:root{
    --primary:#b71c1c;
    --primary-dark:#8e1515;
    --secondary:#fbc02d;
    --dark:#171717;
    --muted:#6b7280;
    --bg:#f8f9fb;
    --surface:#ffffff;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:'Plus Jakarta Sans',sans-serif;
    background:var(--bg);
    color:var(--dark);
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

.section-space{
    padding:90px 0;
}

.section-title{
    font-size:clamp(2rem,4vw,3rem);
    font-weight:800;
    letter-spacing:-1px;
}

.section-subtitle{
    max-width:680px;
    color:var(--muted);
    line-height:1.8;
}

.accent-line{
    width:70px;
    height:5px;
    border-radius:99px;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );
}

/* =========================================================
   HERO POLISH
========================================================= */

.hero-section{
    position:relative;
    min-height:650px;

    display:flex;
    align-items:center;

    background:
        url('/image/hero-school.jpg')
        center center / cover no-repeat;

    overflow:visible;
}

.hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(16,16,16,.80) 0%,
            rgba(16,16,16,.58) 48%,
            rgba(16,16,16,.28) 100%
        );
}

.hero-overlay::before{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:-140px;
    bottom:-180px;

    border-radius:50%;

    background:rgba(183,28,28,.28);

    filter:blur(95px);
}

.hero-overlay::after{
    content:"";

    position:absolute;

    width:320px;
    height:320px;

    right:8%;
    top:-120px;

    border-radius:50%;

    background:rgba(251,192,45,.10);

    filter:blur(100px);
}

.hero-inner{
    position:relative;
    z-index:2;

    width:100%;

    padding-top:135px;
    padding-bottom:120px;
}

.hero-copy{
    max-width:760px;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.20);

    color:#fff;

    font-size:12px;
    font-weight:700;

    backdrop-filter:blur(10px);
}

.hero-title{
    margin:22px 0 0;

    color:#fff;

    font-size:clamp(3rem,5.4vw,5.2rem);

    font-weight:800;

    line-height:1;

    letter-spacing:-3.5px;
}

.hero-title span{
    display:block;

    margin-top:7px;

    color:var(--secondary);
}

.hero-description{
    max-width:650px;

    margin-top:22px;

    color:rgba(255,255,255,.82);

    font-size:16px;

    line-height:1.8;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-top:28px;
}

.hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    padding:12px 22px;

    border-radius:999px;

    font-size:13px;

    font-weight:750;

    transition:.2s ease;
}

.hero-btn-primary{
    color:#fff;
    background:var(--primary);
}

.hero-btn-primary:hover{
    color:#fff;
    background:var(--primary-dark);
    transform:translateY(-2px);
}

.hero-btn-secondary{
    color:#fff;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.22);

    backdrop-filter:blur(10px);
}

.hero-btn-secondary:hover{
    color:var(--primary);

    background:#fff;

    transform:translateY(-2px);
}


/* STATS */

.hero-stats-wrapper{
    position:absolute;

    z-index:5;

    left:50%;
    bottom:-46px;

    transform:translateX(-50%);
}

.hero-stats-card{
    overflow:hidden;

    border-radius:22px;

    background:rgba(255,255,255,.92);

    border:1px solid rgba(255,255,255,.75);

    backdrop-filter:blur(18px);

    box-shadow:
        0 18px 50px rgba(0,0,0,.12);
}

.hero-stat{
    position:relative;

    min-height:92px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:16px 12px;

    text-align:center;
}

.hero-stat::after{
    content:"";

    position:absolute;

    right:0;
    top:26%;

    width:1px;
    height:48%;

    background:rgba(0,0,0,.08);
}

.hero-stat strong{
    color:var(--primary);

    font-size:25px;

    line-height:1;

    font-weight:800;
}

.hero-stat span{
    display:block;

    margin-top:7px;

    color:#6b7280;

    font-size:11px;

    font-weight:650;
}

.hero-stats-card .col-lg-3:last-child .hero-stat::after{
    display:none;
}


/* TABLET */

@media(max-width:991.98px){

    .hero-section{
        min-height:640px;
    }

    .hero-inner{
        padding-top:125px;
        padding-bottom:145px;
    }

    .hero-title{
        letter-spacing:-2.5px;
    }

}


/* MOBILE */

@media(max-width:767.98px){

    .hero-section{
        min-height:720px;
    }

    .hero-overlay{
        background:
            linear-gradient(
                rgba(15,15,15,.72),
                rgba(15,15,15,.68)
            );
    }

    .hero-inner{
        padding-top:120px;
        padding-bottom:185px;
    }

    .hero-title{
        font-size:3rem;

        letter-spacing:-1.7px;
    }

    .hero-description{
        font-size:14px;
    }

    .hero-stats-wrapper{
        bottom:-95px;
    }

    .hero-stat{
        min-height:82px;
        padding:12px 8px;
    }

    .hero-stat strong{
        font-size:21px;
    }

    .hero-stat span{
        font-size:10px;
    }

    .hero-stat::after{
        display:none;
    }

}


/* =========================================================
   HERO STATS
========================================================= */

.hero-stats-wrapper{
    position:absolute;

    z-index:5;

    left:50%;
    bottom:-52px;

    transform:translateX(-50%);
}

.hero-stats-card{
    overflow:hidden;

    border-radius:24px;

    background:rgba(255,255,255,.88);

    border:1px solid rgba(255,255,255,.75);

    backdrop-filter:blur(18px);

    box-shadow:
        0 18px 55px rgba(0,0,0,.14);
}

.hero-stat{
    position:relative;

    min-height:104px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:20px 12px;

    text-align:center;
}

.hero-stat::after{
    content:"";

    position:absolute;

    right:0;
    top:24%;

    width:1px;
    height:52%;

    background:rgba(0,0,0,.08);

}


.hero-stat strong{
    color:var(--primary);

    font-size:27px;

    line-height:1;

    font-weight:800;
}

.hero-stat span{
    display:block;

    margin-top:8px;

    color:#6b7280;

    font-size:12px;

    font-weight:650;
}

.hero-stats-card .col-lg-3:last-child .hero-stat::after{
    display:none;
}


/* =========================================================
   HERO RESPONSIVE
========================================================= */

@media(max-width:991.98px){

    .hero-section{
        min-height:680px;
    }

    .hero-inner{
        padding-top:145px;
        padding-bottom:150px;
    }

    .hero-title{
        letter-spacing:-2.5px;
    }

}

@media(max-width:767.98px){

    .hero-section{
        min-height:760px;

        background-position:center;
    }

    .hero-overlay{
        background:
            linear-gradient(
                rgba(15,15,15,.74),
                rgba(15,15,15,.70)
            );
    }

    .hero-inner{
        padding-top:135px;
        padding-bottom:190px;
    }

    .hero-copy{
        text-align:left;
    }

    .hero-title{
        font-size:3.25rem;

        letter-spacing:-2px;
    }

    .hero-description{
        font-size:15px;
    }

    .hero-stats-wrapper{
        bottom:-110px;
    }

    .hero-stats-card{
        border-radius:20px;
    }

    .hero-stat{
        min-height:88px;
        padding:14px 8px;
    }

    .hero-stat strong{
        font-size:22px;
    }

    .hero-stat span{
        font-size:11px;
    }

    .hero-stat::after{
        display:none;
    }

    .home-intro{
    padding-top:150px;
}

}

/* =========================================================
   SAMBUTAN KEPALA SEKOLAH - POLISH
========================================================= */

.principal-section{
    position:relative;
    padding-top:150px;
    padding-bottom:100px;

    background:
        radial-gradient(
            circle at 8% 45%,
            rgba(183,28,28,.045),
            transparent 28%
        ),
        #f8f9fb;

    overflow:hidden;
}

.principal-section::after{
    content:"";
    position:absolute;

    width:320px;
    height:320px;

    right:-180px;
    bottom:-120px;

    border-radius:50%;

    background:rgba(251,192,45,.07);

    filter:blur(30px);
}


/* FOTO */

.principal-photo-wrapper{
    position:relative;

    max-width:380px;

    margin:0 auto;
}

.principal-photo{
    position:relative;
    z-index:3;

    width:100%;
    height:470px;

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

    border-radius:26px;

    background:#eee;

    box-shadow:
        0 24px 60px rgba(0,0,0,.13);
}

.principal-photo-placeholder{
    position:relative;
    z-index:3;

    width:100%;
    height:470px;

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

    border-radius:26px;

    background:
        linear-gradient(
            145deg,
            #efefef,
            #dfdfdf
        );

    color:#aaa;

    font-size:90px;
}


/* DEKORASI */

.principal-decoration{
    position:absolute;

    pointer-events:none;

    border-radius:24px;
}

.principal-decoration-red{
    z-index:1;

    width:62%;
    height:62%;

    left:-18px;
    bottom:-18px;

    background:
        linear-gradient(
            145deg,
            #b71c1c,
            #8e1515
        );
}

.principal-decoration-yellow{
    z-index:2;

    width:90px;
    height:90px;

    top:-18px;
    right:-18px;

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            #fbc02d,
            #ffd85a
        );
}


/* TEXT */

.principal-content{
    position:relative;
    z-index:2;

    max-width:690px;
}

.principal-title{
    max-width:620px;

    font-size:
        clamp(2.2rem,4vw,3.2rem);

    line-height:1.12;

    letter-spacing:-1.5px;
}

.principal-title span{
    display:block;

    margin-top:5px;

    color:var(--primary);
}

.principal-message{
    max-width:680px;

    margin-top:24px;

    color:#626872;

    font-size:14px;

    line-height:1.95;
}

.principal-message p{
    margin-bottom:14px;
}

.principal-identity{
    margin-top:28px;

    padding-left:16px;

    border-left:
        4px solid var(--secondary);
}

.principal-name{
    color:#171717;

    font-size:17px;

    font-weight:800;
}

.principal-position{
    margin-top:4px;

    color:#858a92;

    font-size:12px;

    font-weight:600;
}


/* TABLET */

@media(max-width:991.98px){

    .principal-section{
        padding-top:170px;
        padding-bottom:80px;
    }

    .principal-photo-wrapper{
        max-width:340px;
    }

    .principal-photo,
    .principal-photo-placeholder{
        height:430px;
    }

    .principal-content{
        margin-top:10px;
    }

}


/* MOBILE */

@media(max-width:575.98px){

    .principal-section{
        padding-top:155px;
        padding-bottom:70px;
    }

    .principal-photo-wrapper{
        width:calc(100% - 30px);
    }

    .principal-photo,
    .principal-photo-placeholder{
        height:400px;

        border-radius:22px;
    }

    .principal-decoration-red{
        left:-12px;
        bottom:-12px;
    }

    .principal-decoration-yellow{
        width:70px;
        height:70px;

        top:-12px;
        right:-12px;

        border-radius:18px;
    }

    .principal-title{
        font-size:2.15rem;
    }

    .principal-message{
        font-size:13px;
    }

}

/* =========================================================
   JURUSAN - POLISH
========================================================= */

.major-section{
    position:relative;

    padding-top:95px;
    padding-bottom:100px;

    background:#fff;

    overflow:hidden;
}

.major-section::before{
    content:"";

    position:absolute;

    width:360px;
    height:360px;

    right:-210px;
    top:-140px;

    border-radius:50%;

    background:
        rgba(251,192,45,.065);

    filter:blur(24px);
}


/* CARD */

.major-card{
    position:relative;

    display:flex;
    flex-direction:column;

    height:100%;

    padding:24px;

    overflow:hidden;

    border-radius:22px;

    color:#171717;

    background:#fff;

    border:
        1px solid rgba(0,0,0,.055);

    box-shadow:
        0 10px 28px rgba(0,0,0,.055);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.major-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--secondary)
        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.28s ease;
}

.major-card:hover{
    color:#171717;

    transform:translateY(-6px);

    border-color:
        rgba(183,28,28,.12);

    box-shadow:
        0 20px 45px rgba(0,0,0,.09);
}

.major-card:hover::before{
    transform:scaleX(1);
}


/* ICON */

.major-icon{
    width:54px;
    height:54px;

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

    flex-shrink:0;

    border-radius:16px;

    color:var(--primary);

    background:
        rgba(183,28,28,.065);

    font-size:25px;

    overflow:hidden;

    transition:.25s ease;
}

.major-card:hover .major-icon{
    background:var(--primary);
    color:#fff;

    transform:translateY(-2px);
}

.major-icon img{
    width:100%;
    height:100%;

    padding:8px;

    object-fit:contain;
}

.major-card:hover .major-icon img{
    filter:brightness(0) invert(1);
}


/* CONTENT */

.major-content{
    margin-top:20px;
}

.major-content h3{
    margin:0;

    color:#171717;

    font-size:16px;

    font-weight:800;

    line-height:1.45;

    letter-spacing:-.2px;
}

.major-code{
    display:inline-flex;

    margin-top:8px;

    padding:4px 9px;

    border-radius:999px;

    color:#7a5700;

    background:
        rgba(251,192,45,.16);

    font-size:9px;

    font-weight:800;

    letter-spacing:.5px;
}

.major-content p{
    margin:12px 0 0;

    color:#7a7f87;

    font-size:12.5px;

    line-height:1.75;
}


/* ARROW */

.major-arrow{
    margin-top:auto;

    padding-top:20px;

    display:flex;
    justify-content:flex-end;

    color:#b0b4ba;

    font-size:20px;

    transition:.22s ease;
}

.major-card:hover .major-arrow{
    color:var(--primary);

    transform:
        translate(3px,-3px);
}


/* MOBILE */

@media(max-width:575.98px){

    .major-section{
        padding-top:75px;
        padding-bottom:80px;
    }

    .major-card{
        padding:21px;
    }

    .major-icon{
        width:50px;
        height:50px;

        border-radius:15px;
    }

    .major-content h3{
        font-size:15px;
    }

}

/* =========================================================
   BERITA TERBARU - POLISH
========================================================= */

.news-section{
    position:relative;
    padding-top:95px;
    padding-bottom:100px;

    background:#f7f8fa;

    overflow:hidden;
}

.news-section::before{
    content:"";
    position:absolute;

    width:360px;
    height:360px;

    left:-220px;
    bottom:-190px;

    border-radius:50%;

    background:rgba(183,28,28,.05);
}


/* HEADER */

.news-heading{
    position:relative;
    z-index:2;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:30px;

    margin-bottom:34px;
}

.news-heading-action{
    flex-shrink:0;
}

.news-all-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    padding:10px 17px;

    border-radius:999px;

    color:var(--primary);

    background:#fff;

    border:1px solid rgba(183,28,28,.11);

    font-size:12px;
    font-weight:800;

    box-shadow:
        0 8px 24px rgba(0,0,0,.05);

    transition:.22s ease;
}

.news-all-button:hover{
    color:#fff;
    background:var(--primary);

    transform:translateY(-2px);
}


/* CARD */

.news-card{
    position:relative;

    display:flex;
    flex-direction:column;

    height:100%;

    overflow:hidden;

    border-radius:22px;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 10px 30px rgba(0,0,0,.055);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.news-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 22px 50px rgba(0,0,0,.10);
}


/* IMAGE */

.news-image-wrapper{
    position:relative;

    display:block;

    width:100%;
    height:220px;

    overflow:hidden;

    background:#e9e9e9;
}

.news-image{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1);
}

.news-card:hover .news-image{
    transform:scale(1.055);
}

.news-image-wrapper::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 58%,
            rgba(0,0,0,.16)
        );

    pointer-events:none;
}


/* NO IMAGE */

.news-image-placeholder{
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:8px;

    color:#aaa;

    background:
        linear-gradient(
            145deg,
            #eeeeee,
            #e5e5e5
        );
}

.news-image-placeholder i{
    font-size:40px;
}

.news-image-placeholder span{
    font-size:10px;
    font-weight:700;
}


/* BADGE */

.news-badge{
    position:absolute;

    z-index:3;

    left:16px;
    top:16px;

    padding:6px 10px;

    border-radius:999px;

    color:#fff;

    background:rgba(183,28,28,.92);

    backdrop-filter:blur(10px);

    font-size:9px;
    font-weight:800;

    letter-spacing:.5px;

    text-transform:uppercase;
}


/* CONTENT */

.news-content{
    display:flex;
    flex-direction:column;

    flex:1;

    padding:21px;
}

.news-meta{
    display:flex;
    align-items:center;

    gap:12px;

    color:#8a8f98;

    font-size:10.5px;

    font-weight:650;
}

.news-meta span{
    display:inline-flex;
    align-items:center;

    gap:6px;
}

.news-meta i{
    color:var(--primary);
}


/* TITLE */

.news-title{
    margin:12px 0 0;

    min-height:52px;

    font-size:17px;

    line-height:1.5;

    font-weight:800;

    letter-spacing:-.25px;

    display:-webkit-box;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

.news-title a{
    color:#191919;

    transition:.2s ease;
}

.news-title a:hover{
    color:var(--primary);
}


/* EXCERPT */

.news-excerpt{
    margin:11px 0 0;

    min-height:66px;

    color:#747982;

    font-size:12.5px;

    line-height:1.75;

    display:-webkit-box;

    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;

    overflow:hidden;
}


/* FOOTER */

.news-footer{
    margin-top:auto;

    padding-top:18px;
}

.news-read-more{
    display:inline-flex;
    align-items:center;

    gap:7px;

    color:var(--primary);

    font-size:11.5px;

    font-weight:800;

    transition:.2s ease;
}

.news-read-more i{
    font-size:16px;

    transition:transform .2s ease;
}

.news-read-more:hover{
    color:var(--primary-dark);
}

.news-read-more:hover i{
    transform:translate(3px,-3px);
}


/* EMPTY */

.news-empty{
    padding:55px 20px;

    text-align:center;

    border-radius:22px;

    background:#fff;

    border:1px dashed #ddd;
}

.news-empty-icon{
    width:60px;
    height:60px;

    margin:0 auto 14px;

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

    border-radius:50%;

    color:var(--primary);

    background:rgba(183,28,28,.07);

    font-size:26px;
}


/* RESPONSIVE */

@media(max-width:767.98px){

    .news-section{
        padding-top:75px;
        padding-bottom:80px;
    }

    .news-heading{
        align-items:flex-start;
        flex-direction:column;

        margin-bottom:28px;
    }

    .news-image-wrapper{
        height:215px;
    }

    .news-content{
        padding:19px;
    }

    .news-title{
        min-height:auto;
    }

    .news-excerpt{
        min-height:auto;
    }

}

/* =========================================================
   PAGE HERO
========================================================= */

.page-hero{
    position:relative;

    padding:170px 0 90px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #991b1b,
            #651313
        );

    overflow:hidden;
}

.page-hero::after{
    content:"";

    position:absolute;

    width:350px;
    height:350px;

    right:-100px;
    top:-100px;

    border-radius:50%;

    background:rgba(251,192,45,.15);

    filter:blur(25px);
}

.page-hero-content{
    position:relative;
    z-index:2;

    max-width:760px;
}

.page-hero-eyebrow{
    display:inline-block;

    margin-bottom:15px;

    font-size:12px;
    font-weight:800;

    letter-spacing:1.3px;

    text-transform:uppercase;

    color:#ffd85d;
}

.page-hero h1{
    margin:0;

    font-size:clamp(2.7rem,5vw,4.4rem);

    font-weight:800;

    letter-spacing:-2px;
}

.page-hero p{
    max-width:650px;

    margin:18px 0 0;

    color:rgba(255,255,255,.78);

    line-height:1.8;
}

.news-list-page{
    background:#f8f9fb;
}


/* =========================================================
   ARTICLE
========================================================= */

.article-hero{
    padding:160px 0 75px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #171717,
            #351515
        );
}

.article-hero-content{
    max-width:900px;
}

.article-back{
    display:inline-flex;

    align-items:center;

    gap:7px;

    color:rgba(255,255,255,.72);

    font-size:12px;

    font-weight:700;
}

.article-back:hover{
    color:#fff;
}

.article-meta{
    margin-top:35px;

    color:#fbc02d;

    font-size:12px;

    font-weight:700;
}

.article-meta span{
    display:inline-flex;

    align-items:center;

    gap:7px;
}

.article-hero h1{
    max-width:950px;

    margin:15px 0 0;

    font-size:clamp(2.4rem,5vw,4.5rem);

    line-height:1.08;

    letter-spacing:-2.4px;

    font-weight:800;
}

.article-section{
    padding:70px 0 100px;

    background:#fff;
}

.article-cover{
    overflow:hidden;

    margin-bottom:45px;

    border-radius:28px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.11);
}

.article-cover img{
    display:block;

    width:100%;

    max-height:600px;

    object-fit:cover;
}

.article-content{
    color:#40444b;

    font-size:16px;

    line-height:2;
}

.article-content p{
    margin-bottom:22px;
}

.article-content h2,
.article-content h3,
.article-content h4{
    margin-top:38px;

    margin-bottom:16px;

    color:#171717;

    font-weight:800;
}

.article-content img{
    height:auto;

    margin:25px 0;

    border-radius:18px;
}


/* =========================================================
   RELATED NEWS
========================================================= */

.related-news{
    background:#f7f8fa;
}

.related-news-card{
    display:block;

    height:100%;

    overflow:hidden;

    border-radius:20px;

    color:#171717;

    background:#fff;

    box-shadow:
        0 10px 30px rgba(0,0,0,.06);

    transition:.25s ease;
}

.related-news-card:hover{
    color:#171717;

    transform:translateY(-5px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.10);
}

.related-news-card img{
    display:block;

    width:100%;
    height:180px;

    object-fit:cover;

    transition:.4s ease;
}

.related-news-card:hover img{
    transform:scale(1.04);
}

.related-news-content{
    padding:18px;
}

.related-news-content span{
    color:#999;

    font-size:10px;

    font-weight:700;
}

.related-news-content h3{
    margin:8px 0 0;

    font-size:14px;

    font-weight:800;

    line-height:1.5;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;
}

/* =========================================================
   PRESTASI - POLISH
========================================================= */

.achievement-section{
    position:relative;

    padding-top:95px;
    padding-bottom:100px;

    background:#fff;

    overflow:hidden;
}

.achievement-section::before{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    right:-180px;
    top:60px;

    border-radius:50%;

    background:rgba(251,192,45,.07);

    filter:blur(28px);
}


/* CARD */

.achievement-card{
    position:relative;

    display:flex;
    flex-direction:column;

    height:100%;

    overflow:hidden;

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #fcfcfc
        );

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 10px 30px rgba(0,0,0,.055);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.achievement-card:hover{
    transform:translateY(-6px);

    border-color:
        rgba(251,192,45,.22);

    box-shadow:
        0 22px 50px rgba(0,0,0,.10);
}


/* IMAGE */

.achievement-image{
    position:relative;

    height:215px;

    overflow:hidden;

    background:#eee;
}

.achievement-card{
    display:flex;
    flex-direction:column;

    width:100%;

    color:inherit;
    text-decoration:none;
}

.achievement-card:hover{
    color:inherit;
}

.achievement-card:hover .achievement-image img{
    transform:scale(1.055);
}

.achievement-image::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 62%,
            rgba(0,0,0,.18)
        );

    pointer-events:none;
}

.achievement-placeholder{
    width:100%;
    height:100%;

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

    color:#aaa;

    font-size:52px;

    background:
        linear-gradient(
            145deg,
            #f1f1f1,
            #e7e7e7
        );
}

.achievement-photo{
    display:block !important;

    width:100% !important;
    height:100% !important;

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

    opacity:1 !important;
    visibility:visible !important;
}

/* TROPHY */

.achievement-trophy{
    position:absolute;

    z-index:3;

    right:16px;
    bottom:16px;

    width:46px;
    height:46px;

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

    border-radius:14px;

    color:#4d3900;

    background:
        linear-gradient(
            145deg,
            #fbc02d,
            #ffd963
        );

    box-shadow:
        0 10px 24px rgba(0,0,0,.17);

    font-size:20px;

    transition:.25s ease;
}

.achievement-card:hover .achievement-trophy{
    transform:
        translateY(-3px)
        rotate(-4deg);
}


/* CONTENT */

.achievement-content{
    display:flex;
    flex-direction:column;

    flex:1;

    padding:21px;
}

.achievement-level{
    align-self:flex-start;

    display:inline-flex;

    padding:5px 9px;

    margin-bottom:12px;

    border-radius:999px;

    color:#7b5800;

    background:
        rgba(251,192,45,.15);

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.6px;
}

.achievement-content h3{
    margin:0;

    min-height:51px;

    color:#171717;

    font-size:16.5px;

    font-weight:800;

    line-height:1.5;

    letter-spacing:-.2px;

    display:-webkit-box;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}


/* META */

.achievement-person,
.achievement-date{
    display:flex;

    align-items:center;

    gap:7px;

    color:#858a92;

    font-size:11.5px;

    font-weight:650;
}

.achievement-person{
    margin-top:15px;
}

.achievement-date{
    margin-top:8px;
}

.achievement-person i,
.achievement-date i{
    color:var(--primary);

    font-size:15px;
}


/* MOBILE */

@media(max-width:767.98px){

    .achievement-section{
        padding-top:75px;
        padding-bottom:80px;
    }

    .achievement-image{
        height:210px;
    }

    .achievement-content{
        padding:19px;
    }

    .achievement-content h3{
        min-height:auto;
    }

}

/* =========================================================
   GALERI - POLISH
========================================================= */

.gallery-section{
    position:relative;

    padding-top:95px;
    padding-bottom:100px;

    background:#f7f8fa;

    overflow:hidden;
}

.gallery-section::before{
    content:"";

    position:absolute;

    width:320px;
    height:320px;

    left:-190px;
    top:80px;

    border-radius:50%;

    background:rgba(183,28,28,.045);

    filter:blur(28px);
}


/* GRID */

.gallery-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    grid-auto-rows:210px;

    gap:16px;
}


/* ITEM */

.gallery-item{
    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:#ddd;

    box-shadow:
        0 10px 30px rgba(0,0,0,.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.gallery-item:hover{
    transform:translateY(-4px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.11);
}


/* MOSAIC */

.gallery-item:nth-child(1),
.gallery-item:nth-child(6){
    grid-column:span 2;
}

.gallery-item:nth-child(3){
    grid-row:span 2;
}


/* IMAGE */

.gallery-item img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1);

    
}

.gallery-item:hover img{
    transform:scale(1.055);
}

.gallery-image{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
}

.gallery-image img{
    width:100%;
    height:100%;
    display:block;

    object-fit:cover;

    /* INI YANG PENTING */
    object-position:center 80% !important;
}


/* PLACEHOLDER */

.gallery-placeholder{
    width:100%;
    height:100%;

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

    color:#aaa;

    background:
        linear-gradient(
            145deg,
            #ececec,
            #dfdfdf
        );

    font-size:42px;
}


/* OVERLAY */

.gallery-overlay{
    position:absolute;
    inset:0;

    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:18px;

    padding:20px;

    color:#fff;

    background:
        linear-gradient(
            180deg,
            transparent 42%,
            rgba(0,0,0,.72)
        );

    transition:
        background .25s ease;
}

.gallery-item:hover .gallery-overlay{
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.03) 32%,
            rgba(0,0,0,.78)
        );
}


/* META */

.gallery-overlay span{
    display:inline-flex;
    align-items:center;

    gap:5px;

    margin-bottom:7px;

    color:#ffd85d;

    font-size:9px;

    font-weight:800;

    letter-spacing:.7px;

    text-transform:uppercase;
}


/* TITLE */

.gallery-overlay h3{
    margin:0;

    max-width:330px;

    font-size:14px;

    font-weight:800;

    line-height:1.45;

    display:-webkit-box;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}


/* ARROW */

.gallery-arrow{
    flex-shrink:0;

    font-size:21px;

    opacity:.85;

    transition:.22s ease;
}

.gallery-item:hover .gallery-arrow{
    opacity:1;

    transform:
        translate(3px,-3px);
}


/* TABLET */

@media(max-width:991.98px){

    .gallery-section{
        padding-top:80px;
        padding-bottom:85px;
    }

    .gallery-grid{
        grid-template-columns:
            repeat(2,1fr);

        grid-auto-rows:210px;
    }

    .gallery-item:nth-child(n){
        grid-column:span 1;
        grid-row:span 1;
    }

    .gallery-item:nth-child(1){
        grid-column:span 2;
    }

}


/* MOBILE */

@media(max-width:575.98px){

    .gallery-section{
        padding-top:70px;
        padding-bottom:75px;
    }

    .gallery-grid{
        grid-template-columns:1fr;

        grid-auto-rows:235px;

        gap:13px;
    }

    .gallery-item:nth-child(n){
        grid-column:span 1;
        grid-row:span 1;
    }

    .gallery-overlay{
        padding:18px;
    }

}

/* =========================================================
   FASILITAS - POLISH
========================================================= */

.facility-section{
    position:relative;

    padding-top:95px;
    padding-bottom:100px;

    background:#fff;

    overflow:hidden;
}

.facility-section::after{
    content:"";

    position:absolute;

    width:340px;
    height:340px;

    right:-200px;
    bottom:-150px;

    border-radius:50%;

    background:rgba(183,28,28,.045);

    filter:blur(26px);
}


/* CARD */

.facility-card{
    position:relative;

    display:flex;
    flex-direction:column;

    height:100%;

    overflow:hidden;

    border-radius:22px;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 10px 30px rgba(0,0,0,.055);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.facility-card:hover{
    transform:translateY(-6px);

    border-color:
        rgba(183,28,28,.11);

    box-shadow:
        0 22px 50px rgba(0,0,0,.10);
}


/* IMAGE */

.facility-image{
    position:relative;

    height:225px;

    overflow:hidden;

    background:#eee;
}

.facility-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1);
}

.facility-card:hover .facility-image img{
    transform:scale(1.055);
}

.facility-image::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 62%,
            rgba(0,0,0,.14)
        );

    pointer-events:none;
}


/* PLACEHOLDER */

.facility-placeholder{
    width:100%;
    height:100%;

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

    color:#aaa;

    background:
        linear-gradient(
            145deg,
            #f0f0f0,
            #e5e5e5
        );

    font-size:46px;
}


/* ICON FLOAT */

.facility-icon{
    position:absolute;

    z-index:3;

    left:17px;
    bottom:17px;

    width:46px;
    height:46px;

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

    border-radius:14px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-dark)
        );

    box-shadow:
        0 10px 24px rgba(0,0,0,.17);

    font-size:20px;

    transition:.25s ease;
}

.facility-card:hover .facility-icon{
    transform:translateY(-3px);
}


/* CONTENT */

.facility-content{
    display:flex;
    flex-direction:column;

    flex:1;

    padding:21px;
}

.facility-content h3{
    margin:0;

    color:#171717;

    font-size:17px;

    font-weight:800;

    line-height:1.45;

    letter-spacing:-.2px;
}

.facility-content p{
    margin:11px 0 0;

    color:#767b84;

    font-size:12.5px;

    line-height:1.75;

    display:-webkit-box;

    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;

    overflow:hidden;
}


/* MOBILE */

@media(max-width:767.98px){

    .facility-section{
        padding-top:75px;
        padding-bottom:80px;
    }

    .facility-image{
        height:215px;
    }

    .facility-content{
        padding:19px;
    }

}


/* =========================================================
   FACILITY MODAL
========================================================= */

.facility-card{
    cursor:pointer;
}

.facility-modal{
    position:fixed;
    inset:0;

    z-index:99999;

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

    padding:25px;

    visibility:hidden;
    opacity:0;
    pointer-events:none;

    transition:.25s ease;
}

.facility-modal.open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}

.facility-modal-backdrop{
    position:absolute;
    inset:0;

    background:rgba(10,10,10,.76);

    backdrop-filter:blur(8px);
}

.facility-modal-box{
    position:relative;
    z-index:2;

    width:min(900px,100%);

    display:grid;
    grid-template-columns:1.1fr .9fr;

    overflow:hidden;

    border-radius:25px;

    background:#fff;

    box-shadow:
        0 30px 90px rgba(0,0,0,.32);

    transform:
        translateY(15px)
        scale(.98);

    transition:.25s ease;
}

.facility-modal.open .facility-modal-box{
    transform:
        translateY(0)
        scale(1);
}


/* IMAGE */

.facility-modal-image{
    min-height:470px;

    background:#eee;
}

.facility-modal-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}


/* CONTENT */

.facility-modal-content{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:45px 38px;
}

.facility-modal-content > span{
    margin-bottom:9px;

    color:var(--primary);

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;
}

.facility-modal-content h2{
    margin:0;

    color:#171717;

    font-size:
        clamp(2rem,4vw,2.8rem);

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1px;
}

.facility-modal-content p{
    margin:18px 0 0;

    color:#626872;

    font-size:13.5px;

    line-height:1.9;
}


/* CLOSE */

.facility-modal-close{
    position:absolute;

    z-index:5;

    top:15px;
    right:15px;

    width:40px;
    height:40px;

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

    border:0;
    border-radius:50%;

    color:#222;

    background:rgba(255,255,255,.94);

    box-shadow:
        0 7px 20px rgba(0,0,0,.14);

    font-size:20px;

    cursor:pointer;

    transition:.2s ease;
}

.facility-modal-close:hover{
    transform:rotate(90deg);
}


/* MOBILE */

@media(max-width:767.98px){

    .facility-modal{
        padding:15px;
    }

    .facility-modal-box{
        display:block;

        max-width:520px;

        max-height:
            calc(100vh - 30px);

        overflow-y:auto;

        border-radius:21px;
    }

    .facility-modal-image{
        min-height:0;
        height:280px;
    }

    .facility-modal-content{
        padding:27px 23px 30px;
    }

}

/* =========================================================
   KONTAK - POLISH
========================================================= */

.contact-section{
    position:relative;

    padding-top:95px;
    padding-bottom:100px;

    background:#f7f8fa;

    overflow:hidden;
}

.contact-section::before{
    content:"";

    position:absolute;

    width:320px;
    height:320px;

    left:-180px;
    bottom:-130px;

    border-radius:50%;

    background:rgba(183,28,28,.045);

    filter:blur(28px);
}


/* CAMPUS CARD */

.contact-card{
    position:relative;

    height:100%;

    padding:28px;

    overflow:hidden;

    border-radius:22px;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 10px 30px rgba(0,0,0,.055);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.contact-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.09);
}

.contact-card::after{
    content:"";

    position:absolute;

    width:130px;
    height:130px;

    right:-60px;
    bottom:-60px;

    border-radius:50%;

    background:rgba(251,192,45,.08);
}

.contact-icon{
    width:52px;
    height:52px;

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

    margin-bottom:19px;

    border-radius:16px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-dark)
        );

    font-size:22px;
}

.contact-card h3{
    margin:0;

    color:#171717;

    font-size:18px;

    font-weight:800;
}

.contact-card p{
    max-width:430px;

    margin:11px 0 0;

    color:#737881;

    font-size:13px;

    line-height:1.8;
}

.contact-link{
    display:inline-flex;
    align-items:center;

    gap:7px;

    margin-top:19px;

    color:var(--primary);

    font-size:11.5px;

    font-weight:800;
}

.contact-link:hover{
    color:var(--primary-dark);
}


/* CONTACT MAIN CARD */

.contact-main-card{
    position:relative;

    overflow:hidden;

    padding:34px;

    border-radius:24px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #8f1717,
            #4f0e0e
        );

    box-shadow:
        0 18px 50px rgba(117,20,20,.18);
}

.contact-main-card::before{
    content:"";

    position:absolute;

    width:280px;
    height:280px;

    top:-170px;
    right:8%;

    border-radius:50%;

    background:rgba(251,192,45,.13);
}

.contact-main-content{
    position:relative;
    z-index:2;
}

.contact-small-title{
    color:#ffd85d;

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1.1px;
}

.contact-main-content h3{
    margin:9px 0 0;

    font-size:
        clamp(1.8rem,4vw,2.5rem);

    font-weight:800;

    letter-spacing:-1px;
}

.contact-main-content p{
    max-width:560px;

    margin:13px 0 0;

    color:rgba(255,255,255,.73);

    font-size:13px;

    line-height:1.8;
}


/* CONTACT ACTIONS */

.contact-actions{
    position:relative;
    z-index:2;

    display:grid;

    gap:9px;
}

.contact-action{
    display:flex;
    align-items:center;

    gap:12px;

    padding:12px 14px;

    border-radius:14px;

    color:#fff;

    background:rgba(255,255,255,.09);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(10px);

    transition:.22s ease;
}

.contact-action:hover{
    color:#fff;

    background:rgba(255,255,255,.15);

    transform:translateX(3px);
}

.contact-action > i{
    width:36px;
    height:36px;

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

    flex-shrink:0;

    border-radius:11px;

    color:#332600;

    background:var(--secondary);

    font-size:18px;
}

.contact-action small{
    display:block;

    color:rgba(255,255,255,.58);

    font-size:8.5px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.7px;
}

.contact-action span{
    display:block;

    margin-top:2px;

    color:#fff;

    font-size:11.5px;

    font-weight:700;
}


/* MOBILE */

@media(max-width:767.98px){

    .contact-section{
        padding-top:75px;
        padding-bottom:80px;
    }

    .contact-card{
        padding:24px;
    }

    .contact-main-card{
        padding:26px 21px;
    }

}

/* =========================================================
   NAVBAR CLEAN
========================================================= */

.navbar-school{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:9999;

    min-height:76px;
    padding:10px 0;

    background:rgba(25,25,25,.65);
    border-bottom:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    transition:.3s ease;
}

.navbar-school.scrolled{
    background:rgba(255,255,255,.97);

    box-shadow:
        0 8px 30px rgba(0,0,0,.08);

    border-bottom:
        1px solid rgba(0,0,0,.06);
}


/* BRAND */

.brand-school{
    display:flex;
    align-items:center;
    gap:10px;

    margin-right:22px;

    color:#fff !important;
}

.brand-logo{
    width:38px !important;
    height:38px !important;

    max-width:38px !important;
    max-height:38px !important;

    object-fit:contain;

    flex-shrink:0;
}

.brand-text{
    display:flex;
    flex-direction:column;

    line-height:1.1;
}

.brand-text strong{
    font-size:13px;
    font-weight:800;
}

.brand-text span{
    margin-top:3px;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    opacity:.75;
}

.navbar-school.scrolled .brand-school{
    color:#171717 !important;
}


/* LINKS */

.navbar-school .navbar-nav{
    gap:2px;
}

.navbar-school .nav-link{
    display:flex;
    align-items:center;

    padding:9px 10px !important;

    border-radius:9px;

    color:rgba(255,255,255,.92);

    font-size:12px;
    font-weight:700;

    white-space:nowrap;

    transition:.2s ease;
}

.navbar-school .nav-link:hover{
    color:#fff;

    background:
        rgba(255,255,255,.10);
}

.navbar-school.scrolled .nav-link{
    color:#333;
}

.navbar-school.scrolled .nav-link:hover{
    color:var(--primary);

    background:
        rgba(183,28,28,.06);
}


/* DROPDOWN */

.navbar-school .dropdown-menu{
    min-width:210px;

    margin-top:10px;

    padding:8px;

    border:0;

    border-radius:14px;

    background:#fff;

    box-shadow:
        0 18px 45px rgba(0,0,0,.14);
}

.navbar-school .dropdown-item{
    display:flex;
    align-items:center;

    padding:10px 12px;

    border-radius:9px;

    color:#222;

    font-size:12px;
    font-weight:700;
}

.navbar-school .dropdown-item:hover{
    color:var(--primary);

    background:
        rgba(183,28,28,.06);
}


.navbar-school .dropdown-menu{
    min-width:220px;
    margin-top:10px;

    padding:8px;

    border:0;
    border-radius:14px;

    background:#fff;

    box-shadow:
        0 18px 45px rgba(0,0,0,.14);
}

.navbar-school .dropdown-item{
    display:flex;
    align-items:center;

    padding:10px 12px;

    border-radius:9px;

    color:#222;

    font-size:12px;
    font-weight:700;

    transition:.2s ease;
}

.navbar-school .dropdown-item:hover{
    color:var(--primary);

    background:
        rgba(183,28,28,.06);
}

.navbar-school .dropdown-toggle::after{
    margin-left:6px;
    vertical-align:middle;
}


.layanan-menu{
    position:relative;
}

.layanan-toggle{
    border:0;
    background:transparent;
    cursor:pointer;
}

.layanan-toggle i{
    font-size:14px;
    transition:transform .2s ease;
}

.layanan-menu.open .layanan-toggle i{
    transform:rotate(180deg);
}

.layanan-dropdown{
    position:absolute;

    top:calc(100% + 10px);
    right:0;

    width:220px;

    padding:8px;

    border-radius:14px;

    background:#fff;

    box-shadow:
        0 18px 45px rgba(0,0,0,.16);

    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    z-index:10050;
}

.layanan-menu.open .layanan-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.layanan-item{
    display:flex;
    align-items:center;

    gap:10px;

    padding:11px 12px;

    border-radius:9px;

    color:#222;

    font-size:12px;
    font-weight:700;

    transition:.2s ease;
}

.layanan-item:hover{
    color:var(--primary);

    background:rgba(183,28,28,.06);
}

.layanan-item i{
    font-size:18px;
    color:var(--primary);
}

@media(max-width:991.98px){

    .layanan-dropdown{
        position:static;

        width:100%;

        margin-top:4px;

        display:none;

        opacity:1;
        visibility:visible;
        transform:none;

        box-shadow:none;

        background:#f6f6f6;
    }

    .layanan-menu.open .layanan-dropdown{
        display:block;
    }

    .layanan-toggle{
        width:100%;
        justify-content:flex-start;
    }
}

.navbar-search-link{
    width:38px;
    height:38px;

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

    padding:0 !important;

    border-radius:50% !important;

    font-size:18px !important;
}

.navbar-search-link:hover{
    background:rgba(255,255,255,.10);
}

.navbar-school.scrolled .navbar-search-link:hover,
.site-navbar.scrolled .navbar-search-link:hover{
    background:rgba(183,28,28,.06);
}

@media(max-width:991.98px){

    .navbar-search-link{
        width:100%;
        height:auto;

        justify-content:flex-start;

        padding:11px 12px !important;

        border-radius:9px !important;
    }

}


/* SPMB */

.btn-spmb{
    padding-left:17px !important;
    padding-right:17px !important;

    border-radius:999px !important;

    background:var(--secondary) !important;

    color:#241b00 !important;

    font-weight:800 !important;
}

.btn-spmb:hover{
    background:#ffd24f !important;

    color:#241b00 !important;

    transform:translateY(-1px);
}


/* HAMBURGER */

.navbar-school .navbar-toggler{
    border:0;

    box-shadow:none !important;
}

.navbar-school .navbar-toggler i{
    color:#fff;

    font-size:26px;
}

.navbar-school.scrolled .navbar-toggler i{
    color:#222;
}


/* MOBILE */

@media(max-width:991.98px){

    .navbar-school,
    .navbar-school.scrolled{
        background:#fff;

        box-shadow:
            0 8px 30px rgba(0,0,0,.08);
    }

    .brand-school{
        color:#171717 !important;
    }

    .navbar-school .navbar-toggler i{
        color:#222;
    }

    .navbar-school .navbar-collapse{
        margin-top:10px;

        padding:12px;

        border-radius:16px;

        background:#fff;

        box-shadow:
            0 18px 45px rgba(0,0,0,.12);
    }

    .navbar-school .navbar-nav{
        align-items:stretch !important;

        gap:2px;
    }

    .navbar-school .nav-link{
        color:#222;

        padding:11px 12px !important;
    }

    .navbar-school .dropdown-menu{
        margin-top:3px;

        border-radius:11px;

        box-shadow:none;

        background:#f6f6f6;
    }

    .btn-spmb{
        justify-content:center;

        margin-top:5px;
    }
}


/* SPMB */

.spmb-button{
    min-width:67px;

    padding-left:17px !important;
    padding-right:17px !important;

    border-radius:999px !important;

    color:#271d00 !important;

    background:
        var(--secondary) !important;

    font-weight:800 !important;

    box-shadow:
        0 7px 20px rgba(251,192,45,.20);
}

.spmb-button:hover{
    color:#271d00 !important;

    background:#ffd04a !important;

    transform:translateY(-2px);
}


/* DROPDOWN LAYANAN */

.site-dropdown{
    width:290px;

    margin-top:12px !important;

    padding:9px;

    border:1px solid rgba(0,0,0,.06);

    border-radius:18px;

    background:
        rgba(255,255,255,.98);

    box-shadow:
        0 22px 60px rgba(0,0,0,.15);
}

.site-dropdown .dropdown-item{
    display:flex;

    align-items:center;

    gap:11px;

    padding:12px;

    border-radius:12px;

    color:#242424;

    transition:
        background .2s ease,
        color .2s ease;
}

.site-dropdown .dropdown-item:hover{
    color:var(--primary);

    background:
        rgba(183,28,28,.055);
}

.dropdown-icon{
    width:39px;
    height:39px;

    flex-shrink:0;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:11px;

    color:var(--primary);

    background:
        rgba(183,28,28,.075);

    font-size:18px;
}

.dropdown-copy{
    display:flex;

    flex-direction:column;

    min-width:0;
}

.dropdown-copy strong{
    font-size:12px;

    line-height:1.3;

    font-weight:800;
}

.dropdown-copy small{
    margin-top:3px;

    color:#92969d;

    font-size:9.5px;

    font-weight:600;
}

.site-dropdown .dropdown-divider{
    margin:6px 4px;

    border-color:
        rgba(0,0,0,.06);
}


/* HAMBURGER */

.site-navbar .navbar-toggler{
    border:0;

    padding:5px;

    box-shadow:none !important;
}

.site-navbar .navbar-toggler i{
    color:#fff;

    font-size:28px;
}

.site-navbar.scrolled .navbar-toggler i{
    color:#222;
}


/* SMALL DESKTOP */

@media(max-width:1199.98px){

    .site-brand{
        margin-right:10px;
    }

    .site-logo{
        width:44px;
        height:44px;
    }

    .site-brand-text{
        min-width:105px;
    }

    .site-brand-name{
        font-size:12.5px;
    }

    .site-brand-city{
        font-size:9px;
    }

    .site-navbar .nav-link{
        padding:
            8px 7px !important;

        font-size:11.5px;
    }

    .spmb-button{
        padding-left:13px !important;
        padding-right:13px !important;
    }

}


/* MOBILE */

@media(max-width:991.98px){

    .site-navbar,
    .site-navbar.scrolled{
        min-height:70px;

        padding:8px 0;

        background:
            rgba(255,255,255,.97);

        border-bottom:
            1px solid rgba(0,0,0,.06);

        box-shadow:
            0 8px 30px rgba(0,0,0,.08);
    }

    .site-brand{
        color:#171717;

        margin-right:0;
    }

    .site-logo,
    .site-navbar.scrolled .site-logo{
        width:43px;
        height:43px;
    }

    .site-navbar .navbar-toggler i{
        color:#222;
    }

    .site-navbar .navbar-collapse{
        margin-top:11px;

        max-height:
            calc(100vh - 100px);

        overflow-y:auto;

        padding:12px;

        border-radius:18px;

        background:#fff;

        box-shadow:
            0 20px 55px rgba(0,0,0,.12);
    }

    .site-navbar .navbar-nav{
        align-items:stretch !important;

        gap:3px;
    }

    .site-navbar .nav-link{
        justify-content:flex-start;

        width:100%;

        padding:
            11px 12px !important;

        color:#252525;

        font-size:13px;
    }

    .site-navbar .nav-link:hover{
        color:var(--primary);

        background:
            rgba(183,28,28,.055);
    }

    .site-dropdown{
        width:100%;

        margin-top:4px !important;

        border:0;

        border-radius:13px;

        background:#f7f7f8;

        box-shadow:none;
    }

    .spmb-button{
        margin-top:5px;

        justify-content:center !important;
    }

}

    /* =========================================================
   MAKLUMAT PUBLIK
========================================================= */

.public-info-hero{
    position:relative;

    padding:180px 0 80px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #181818,
            #531515
        );

    overflow:hidden;
}

.public-info-hero::after{
    content:"";

    position:absolute;

    width:340px;
    height:340px;

    right:-100px;
    top:-120px;

    border-radius:50%;

    background:
        rgba(251,192,45,.13);

    filter:blur(20px);
}

.public-info-hero-content{
    position:relative;
    z-index:2;

    max-width:760px;
}

.public-info-eyebrow{
    color:#ffd85d;
}

.public-info-hero h1{
    margin:5px 0 0;

    font-size:
        clamp(2.7rem,5vw,4.5rem);

    line-height:1;

    font-weight:800;

    letter-spacing:-2px;
}

.public-info-hero p{
    max-width:680px;

    margin:20px 0 0;

    color:
        rgba(255,255,255,.76);

    font-size:15px;

    line-height:1.85;
}


.public-info-section{
    padding:55px 0 90px;
    background:#f4f5f7;
}

.public-info-section .container{
    max-width:1500px;
}


.public-info-card{
    width:100%;
    overflow:hidden;

    border-radius:24px;

    background:#fff;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:
        0 20px 60px rgba(0,0,0,.09);
}


/* TOOLBAR */

.public-info-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;

    padding:22px 28px;

    background:#fff;

    border-bottom:
        1px solid rgba(0,0,0,.07);
}

.public-info-label{
    display:block;

    margin-bottom:4px;

    color:var(--primary);

    font-size:10px;
    font-weight:800;

    letter-spacing:1px;
    text-transform:uppercase;
}

.public-info-toolbar h2{
    margin:0;

    color:#171717;

    font-size:21px;
    font-weight:800;
}


/* BUTTON */

.public-info-actions{
    display:flex;
    align-items:center;
    gap:9px;
}

.public-info-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    padding:10px 17px;

    border-radius:999px;

    font-size:12px;
    font-weight:800;

    transition:.2s ease;
}

.public-info-btn.secondary{
    color:#333;

    background:#f1f2f4;

    border:1px solid rgba(0,0,0,.06);
}

.public-info-btn.secondary:hover{
    color:var(--primary);
    background:#e9eaec;
}

.public-info-btn.primary{
    color:#fff;
    background:var(--primary);
}

.public-info-btn.primary:hover{
    color:#fff;
    background:var(--primary-dark);
    transform:translateY(-1px);
}


/* PDF AREA */

.pdf-viewer{
    position:relative;

    width:100%;

    /* Desktop besar */
    height:calc(100vh - 150px);
    min-height:780px;

    background:#323639;

    overflow:hidden;
}

.pdf-viewer iframe{
    display:block;

    width:100% !important;
    height:100% !important;

    min-width:100%;

    border:0;
}


/* TABLET */

@media(max-width:991.98px){

    .public-info-section{
        padding:40px 0 70px;
    }

    .public-info-section .container{
        max-width:100%;
    }

    .pdf-viewer{
        height:80vh;
        min-height:650px;
    }

}


/* MOBILE */

@media(max-width:767.98px){

    .public-info-section{
        padding:30px 0 60px;
    }

    .public-info-card{
        border-radius:18px;
    }

    .public-info-toolbar{
        flex-direction:column;
        align-items:flex-start;

        gap:16px;

        padding:20px;
    }

    .public-info-actions{
        width:100%;
    }

    .public-info-btn{
        flex:1;
    }

    .pdf-viewer{
        height:75vh;
        min-height:550px;
    }

}

/* =========================================================
   GLOBAL RESPONSIVE FINISHING
========================================================= */

@media(max-width:991.98px){

    .section-space{
        padding-top:80px;
        padding-bottom:80px;
    }

    .section-title{
        font-size:clamp(2rem,5vw,2.7rem);
    }

    .section-subtitle{
        font-size:14px;
    }

    .hero-stats-wrapper{
        width:calc(100% - 30px);
    }

    .principal-content{
        margin-top:20px;
    }

}


@media(max-width:767.98px){

    body{
        font-size:14px;
    }

    .section-space{
        padding-top:70px;
        padding-bottom:70px;
    }

    .section-title{
        font-size:2rem;
        letter-spacing:-.8px;
    }

    .section-subtitle{
        font-size:13px;
        line-height:1.75;
    }

    .section-eyebrow{
        font-size:10px;
        letter-spacing:.9px;
    }

    .accent-line{
        width:55px;
        height:4px;
    }


    /* HERO */

    .hero-title{
        font-size:2.9rem;
    }

    .hero-actions{
        width:100%;
    }

    .hero-btn{
        flex:1;
        min-width:145px;
    }

    .hero-stats-wrapper{
        width:calc(100% - 24px);
    }


    /* SAMBUTAN */

    .principal-content{
        margin-top:30px;
    }


    /* NEWS BUTTON */

    .news-heading-action{
        width:100%;
    }

    .news-all-button{
        width:100%;
    }


    /* CONTACT */

    .contact-actions{
        margin-top:5px;
    }

}


@media(max-width:575.98px){

    .container{
        padding-left:18px;
        padding-right:18px;
    }


    /* NAVBAR */

    .brand-logo{
        width:38px !important;
        height:38px !important;
    }

    .brand-text strong{
        font-size:12px;
    }

    .brand-text span{
        font-size:8px;
    }


    /* HERO */

    .hero-section{
        min-height:700px;
    }

    .hero-inner{
        padding-top:115px;
        padding-bottom:180px;
    }

    .hero-badge{
        font-size:10px;
        padding:7px 11px;
    }

    .hero-title{
        font-size:2.65rem;
        line-height:1.02;
    }

    .hero-description{
        font-size:13px;
        line-height:1.7;
    }

    .hero-actions{
        flex-direction:column;
    }

    .hero-btn{
        width:100%;
    }


    /* HERO STATS */

    .hero-stats-wrapper{
        bottom:-105px;
    }

    .hero-stat{
        min-height:78px;
    }

    .hero-stat strong{
        font-size:20px;
    }

    .hero-stat span{
        font-size:9px;
    }


    /* PRINCIPAL */

    .principal-title{
        font-size:2rem;
    }


    /* CARDS */

    .major-card,
    .news-card,
    .achievement-card,
    .facility-card,
    .contact-card{
        border-radius:18px;
    }


    /* IMAGES */

    .news-image-wrapper,
    .achievement-image,
    .facility-image{
        height:205px;
    }


    /* GALLERY */

    .gallery-grid{
        grid-auto-rows:225px;
    }


    /* CONTACT */

    .contact-main-content h3{
        font-size:1.8rem;
    }


    /* FOOTER */

    .footer-brand strong{
        font-size:14px;
    }

    .school-footer a{
    color:rgba(255,255,255,.72);
    text-decoration:none;
    transition:.2s ease;
}

.school-footer a:hover{
    color:var(--secondary);
}

}

#profil,
#jurusan,
#berita,
#prestasi,
#galeri,
#fasilitas,
#kontak{
    scroll-margin-top:95px;
}

/* =========================================================
   SCHOOL ANNOUNCEMENT POPUP V2
========================================================= */

.school-announcement{
    position:fixed;
    inset:0;

    z-index:99999;

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

    padding:24px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.school-announcement.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


/* BACKDROP */

.school-announcement__backdrop{
    position:absolute;
    inset:0;

    background:rgba(10,10,10,.70);

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}


/* BOX */

.school-announcement__box{
    position:relative;
    z-index:2;

    width:min(920px, 100%);
    max-height:calc(100vh - 48px);

    display:grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(320px, .95fr);

    overflow:hidden;

    border-radius:28px;

    background:#fff;

    box-shadow:
        0 35px 100px rgba(0,0,0,.35);

    transform:
        translateY(20px)
        scale(.97);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1);
}

.school-announcement.show
.school-announcement__box{
    transform:
        translateY(0)
        scale(1);
}


/* CLOSE */

.school-announcement__close{
    position:absolute;

    z-index:10;

    top:16px;
    right:16px;

    width:42px;
    height:42px;

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

    padding:0;

    border:0;
    border-radius:50%;

    color:#222;

    background:rgba(255,255,255,.94);

    box-shadow:
        0 8px 25px rgba(0,0,0,.15);

    font-size:22px;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}

.school-announcement__close:hover{
    background:#fff;

    transform:rotate(90deg);
}


/* IMAGE */

.school-announcement__image{
    position:relative;

    min-height:500px;

    background:#ececec;

    overflow:hidden;
}

.school-announcement__image img{
    display:block;

    width:100%;
    height:100%;

    position:absolute;
    inset:0;

    object-fit:cover;
}


/* CONTENT */

.school-announcement__content{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:55px 45px;
}

.school-announcement__label{
    display:inline-flex;
    align-items:center;

    width:max-content;

    gap:7px;

    padding:7px 11px;

    margin-bottom:18px;

    border-radius:999px;

    color:#991b1b;

    background:rgba(183,28,28,.08);

    font-size:11px;
    font-weight:800;

    text-transform:uppercase;
    letter-spacing:.7px;
}

.school-announcement__content h2{
    margin:0;

    color:#171717;

    font-size:clamp(1.8rem,3vw,2.6rem);

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1.2px;
}

.school-announcement__description{
    margin-top:18px;

    color:#6b7078;

    font-size:14px;

    line-height:1.8;
}


/* BUTTON */

.school-announcement__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:max-content;

    gap:8px;

    margin-top:26px;

    padding:12px 20px;

    border-radius:999px;

    color:#fff;

    background:#b71c1c;

    font-size:12px;
    font-weight:800;

    transition:
        background .2s ease,
        transform .2s ease;
}

.school-announcement__button:hover{
    color:#fff;

    background:#8e1515;

    transform:translateY(-2px);
}


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

@media(max-width:767.98px){

    .school-announcement{
        padding:18px;
    }

    .school-announcement__box{
        display:block;

        max-width:520px;
        max-height:calc(100vh - 36px);

        overflow-y:auto;

        border-radius:24px;
    }

    .school-announcement__image{
        min-height:0;
        height:300px;
    }

    .school-announcement__image img{
        position:relative;

        height:100%;

        object-fit:cover;
    }

    .school-announcement__content{
        padding:28px 25px 30px;
    }

}


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

@media(max-width:575.98px){

    .school-announcement{
        padding:14px;
    }

    .school-announcement__box{
        max-height:calc(100vh - 28px);

        border-radius:21px;
    }

    .school-announcement__image{
        height:230px;
    }

    .school-announcement__content{
        padding:24px 20px 25px;
    }

    .school-announcement__content h2{
        font-size:1.55rem;
    }

    .school-announcement__description{
        font-size:13px;

        line-height:1.7;
    }

    .school-announcement__close{
        top:12px;
        right:12px;

        width:38px;
        height:38px;

        font-size:20px;
    }

}

/* =========================================================
   MANAJEMEN SEKOLAH
========================================================= */

.management-section{
    position:relative;

    background:#fff;

    overflow:hidden;
}

.management-section::before{
    content:"";

    position:absolute;

    width:340px;
    height:340px;

    right:-200px;
    top:-140px;

    border-radius:50%;

    background:rgba(183,28,28,.045);

    filter:blur(25px);
}

.management-card{
    position:relative;

    height:100%;

    overflow:hidden;

    border-radius:22px;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 10px 30px rgba(0,0,0,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.management-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 22px 50px rgba(0,0,0,.11);
}


/* PHOTO */

.management-photo{
    position:relative;

    height:340px;

    overflow:hidden;

    background:#ececec;
}

.management-photo img{
    display:block;

    width:100%;
    height:100%;

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

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1);
}

.management-card:hover .management-photo img{
    transform:scale(1.045);
}

.management-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(0,0,0,.20)
        );
}

.management-placeholder{
    width:100%;
    height:100%;

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

    color:#aaa;

    font-size:70px;

    background:
        linear-gradient(
            145deg,
            #f1f1f1,
            #e5e5e5
        );
}


/* CONTENT */

.management-content{
    padding:21px;

    text-align:center;
}

.management-position{
    display:inline-flex;

    padding:5px 10px;

    margin-bottom:10px;

    border-radius:999px;

    color:var(--primary);

    background:
        rgba(183,28,28,.07);

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.6px;
}

.management-content h3{
    margin:0;

    color:#171717;

    font-size:17px;

    line-height:1.45;

    font-weight:800;
}

.management-degree{
    margin:5px 0 0;

    color:#8a8f98;

    font-size:11.5px;

    font-weight:600;
}


/* MOBILE */

@media(max-width:767.98px){

    .management-card{
        max-width:250px;
    }

    .management-photo{
        height:240px;
    }

}

/* MANAJEMEN - COMPACT */

.management-section .row{
    max-width:1050px;
    margin-left:auto;
    margin-right:auto;
}

.management-card{
    max-width:270px;
    margin:0 auto;

    border-radius:18px;
}

.management-photo{
    height:260px;
}

.management-content{
    padding:16px 14px 18px;
}

.management-position{
    margin-bottom:8px;
    padding:5px 9px;

    font-size:8px;
}

.management-content h3{
    font-size:14px;
    line-height:1.4;
}

.management-degree{
    margin-top:4px;
    font-size:10px;
}

/* =========================================================
   MANAGEMENT FINAL COMPACT
========================================================= */

.management-grid{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));

    gap:12px;

    width:100%;
    max-width:1400px;

    margin:0 auto;
}

.management-item{
    min-width:0;
}

.management-card{
    width:100% !important;
    max-width:none !important;
    height:100%;

    margin:0 !important;

    background:#fff;

    border:1px solid rgba(0,0,0,.06);
    border-radius:14px;

    overflow:hidden;

    box-shadow:0 6px 20px rgba(0,0,0,.05);

    transition:.25s ease;
}

.management-card:hover{
    transform:translateY(-4px);

    box-shadow:0 12px 28px rgba(0,0,0,.09);
}


/* FOTO */

.management-photo{
    width:100% !important;
    height:190px !important;

    overflow:hidden;

    background:#f1f1f1;
}

.management-photo img{
    display:block;

    width:100% !important;
    height:100% !important;

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

.management-placeholder{
    width:100%;
    height:100%;

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

    font-size:38px;

    color:#aaa;
}


/* TEXT */

.management-content{
    padding:11px 9px 13px !important;

    text-align:center;
}

.management-position{
    display:block;

    margin-bottom:5px;

    color:#a71919;

    font-size:8px;
    font-weight:700;

    line-height:1.3;

    text-transform:uppercase;
}

.management-content h3{
    margin:0 !important;

    font-size:11px !important;
    font-weight:700;

    line-height:1.35;

    color:#171717;
}


/* TABLET */

@media(max-width:991px){

    .management-grid{
        grid-template-columns:repeat(3, 1fr);
        max-width:650px;
    }

}


/* HP */

@media(max-width:575px){

    .management-grid{
        grid-template-columns:repeat(2, 1fr);

        gap:10px;
    }

    .management-photo{
        height:180px !important;
    }

}

/* =========================================================
   DETAIL JURUSAN - FINAL POLISH
========================================================= */

.jd-simple{
    padding:115px 0 90px !important;
    background:#f7f8fa !important;
}

.jd-simple .container{
    width:calc(100% - 48px) !important;
    max-width:1350px !important;
    margin:0 auto !important;
}


/* =========================
   BACK BUTTON
========================= */

.jd-simple-back{
    display:inline-flex;
    align-items:center;
    gap:7px;

    margin-bottom:28px !important;

    padding:9px 17px;

    border-radius:999px;

    color:#fff;
    background:var(--primary);

    font-size:11px;
    font-weight:800;
}


/* =========================
   FOTO + DESKRIPSI
========================= */

.jd-simple-grid{
    display:grid !important;

    grid-template-columns:
        minmax(0, 520px)
        minmax(0, 1fr) !important;

    gap:55px !important;

    align-items:start !important;
}


/* FOTO */

.jd-simple-photo{
    position:relative !important;
    top:auto !important;

    width:100% !important;
    height:650px !important;

    overflow:hidden !important;

    border-radius:22px !important;

    background:#eaeaea !important;

    box-shadow:
        0 16px 45px rgba(0,0,0,.08) !important;
}

.jd-simple-photo img{
    display:block !important;

    width:100% !important;
    height:100% !important;

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


/* =========================
   KONTEN
========================= */

.jd-simple-content{
    padding:20px 0 0 !important;

    max-width:720px !important;
}

.jd-simple-label{
    display:inline-flex !important;

    margin-bottom:10px !important;

    color:var(--primary) !important;

    font-size:10px !important;
    font-weight:800 !important;

    letter-spacing:1px !important;

    text-transform:uppercase !important;
}

.jd-simple-content h1{
    margin:0 0 24px !important;

    color:#171717 !important;

    font-size:clamp(2.5rem,4vw,3.3rem) !important;

    line-height:1.08 !important;

    letter-spacing:-1.5px !important;

    font-weight:800 !important;
}


/* DESKRIPSI */

.jd-simple-description{
    max-width:700px !important;

    color:#555b64 !important;

    font-size:14px !important;

    line-height:1.95 !important;

    text-align:left !important;
}

/* spacing paragraf dari nl2br */

.jd-simple-description br{
    display:block !important;

    content:"" !important;

    margin-bottom:13px !important;
}


/* =========================
   JURUSAN LAINNYA
========================= */

.jd-simple-related{
    margin-top:75px !important;

    padding-top:48px !important;

    border-top:
        1px solid rgba(0,0,0,.07) !important;
}

.jd-simple-related-head{
    display:flex !important;

    align-items:flex-end !important;
    justify-content:space-between !important;

    gap:30px !important;

    margin-bottom:26px !important;
}

.jd-simple-related-head span{
    display:block !important;

    margin-bottom:6px !important;

    color:var(--primary) !important;

    font-size:9px !important;

    font-weight:800 !important;

    letter-spacing:1px !important;

    text-transform:uppercase !important;
}

.jd-simple-related-head h2{
    margin:0 !important;

    color:#171717 !important;

    font-size:clamp(1.9rem,3vw,2.5rem) !important;

    font-weight:800 !important;

    letter-spacing:-1px !important;
}

.jd-simple-related-head > a{
    display:inline-flex !important;

    align-items:center !important;

    gap:7px !important;

    color:var(--primary) !important;

    font-size:11px !important;

    font-weight:800 !important;
}


/* =========================
   RELATED GRID
========================= */

.jd-simple-related-grid{
    display:grid !important;

    grid-template-columns:
        repeat(4, minmax(0,1fr)) !important;

    gap:14px !important;
}


/* CARD */

.jd-simple-related-card{
    position:relative !important;

    min-height:115px !important;

    display:flex !important;

    align-items:center !important;

    gap:13px !important;

    padding:18px !important;

    border-radius:18px !important;

    color:#171717 !important;

    background:#fff !important;

    border:
        1px solid rgba(0,0,0,.055) !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.045) !important;

    transition:.22s ease !important;
}

.jd-simple-related-card:hover{
    transform:translateY(-4px) !important;

    border-color:
        rgba(183,28,28,.15) !important;

    box-shadow:
        0 16px 38px rgba(0,0,0,.08) !important;
}


/* ICON */

.jd-simple-related-icon{
    width:44px !important;
    height:44px !important;

    flex:0 0 44px !important;

    display:flex !important;

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

    border-radius:13px !important;

    color:var(--primary) !important;

    background:
        rgba(183,28,28,.075) !important;

    font-size:19px !important;
}


/* TEXT CARD */

.jd-simple-related-card strong{
    display:block !important;

    padding-right:20px !important;

    color:#222 !important;

    font-size:12px !important;

    line-height:1.45 !important;

    font-weight:800 !important;
}

.jd-simple-related-card small{
    display:block !important;

    margin-top:4px !important;

    color:#999 !important;

    font-size:8px !important;

    font-weight:700 !important;
}

.jd-simple-related-card > i{
    position:absolute !important;

    top:15px !important;
    right:15px !important;

    color:#aaa !important;

    font-size:16px !important;
}


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

@media(max-width:991.98px){

    .jd-simple-grid{
        grid-template-columns:1fr !important;

        gap:30px !important;
    }

    .jd-simple-photo{
        height:500px !important;
    }

    .jd-simple-content{
        max-width:none !important;
    }

    .jd-simple-related-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

}


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

@media(max-width:575.98px){

    .jd-simple{
        padding:95px 0 65px !important;
    }

    .jd-simple .container{
        width:calc(100% - 30px) !important;
    }

    .jd-simple-photo{
        height:380px !important;

        border-radius:18px !important;
    }

    .jd-simple-content{
        padding-top:0 !important;
    }

    .jd-simple-content h1{
        font-size:2rem !important;
    }

    .jd-simple-description{
        font-size:13px !important;

        line-height:1.85 !important;
    }

    .jd-simple-related{
        margin-top:60px !important;

        padding-top:38px !important;
    }

    .jd-simple-related-head{
        align-items:flex-start !important;

        flex-direction:column !important;
    }

    .jd-simple-related-grid{
        grid-template-columns:1fr !important;
    }

}

    /* =========================================================
   LIHAT SEMUA GURU
========================================================= */

.management-more{
    display:flex;
    justify-content:center;

    margin-top:36px;
}

.management-more-button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    padding:13px 24px;

    border-radius:999px;

    color:#fff;

    background:var(--primary);

    font-size:12px;
    font-weight:800;

    box-shadow:
        0 10px 28px rgba(183,28,28,.20);

    transition:.22s ease;
}

.management-more-button:hover{
    color:#fff;

    background:var(--primary-dark);

    transform:translateY(-2px);

    box-shadow:
        0 15px 35px rgba(183,28,28,.25);
}

.management-more-button i{
    font-size:16px;
}


/* =========================================================
   GURU & TENDIK PAGE
========================================================= */

.teacher-page{
    padding:135px 0 95px;

    background:#f7f8fa;
}

.teacher-page .container{
    max-width:1400px;
}

.teacher-page-heading{
    margin-bottom:32px;
}

.teacher-page-eyebrow{
    display:block;

    margin-bottom:8px;

    color:var(--primary);

    font-size:10px;
    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;
}

.teacher-page-heading h1{
    margin:0;

    color:#171717;

    font-size:
        clamp(2.5rem,5vw,4rem);

    font-weight:800;

    letter-spacing:-1.5px;
}

.teacher-page-heading p{
    margin:12px 0 0;

    color:#747982;

    font-size:14px;
}


/* SEARCH */

.teacher-search{
    max-width:620px;

    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:35px;

    padding:8px;

    border-radius:16px;

    background:#fff;

    border:
        1px solid rgba(0,0,0,.06);

    box-shadow:
        0 8px 25px rgba(0,0,0,.04);
}

.teacher-search > i{
    margin-left:9px;

    color:#999;

    font-size:18px;
}

.teacher-search input{
    flex:1;

    min-width:0;

    padding:10px 4px;

    border:0;

    outline:none;

    background:transparent;

    color:#222;

    font-size:12px;
}

.teacher-search button{
    padding:10px 18px;

    border:0;

    border-radius:11px;

    color:#fff;

    background:var(--primary);

    font-size:11px;
    font-weight:800;
}


/* GRID */

.teacher-grid{
    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:16px;
}

.teacher-card{
    overflow:hidden;

    border-radius:18px;

    background:#fff;

    border:
        1px solid rgba(0,0,0,.05);

    box-shadow:
        0 8px 25px rgba(0,0,0,.045);

    transition:.22s ease;
}

.teacher-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 16px 38px rgba(0,0,0,.08);
}


/* PHOTO */

.teacher-photo{
    height:220px;

    overflow:hidden;

    background:#ededed;
}

.teacher-photo img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center top;
}

.teacher-placeholder{
    width:100%;
    height:100%;

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

    color:#aaa;

    font-size:45px;
}


/* CONTENT */

.teacher-content{
    padding:14px;

    text-align:center;
}

.teacher-content h2{
    margin:0;

    color:#171717;

    font-size:12px;

    line-height:1.45;

    font-weight:800;
}

.teacher-content p{
    margin:7px 0 0;

    color:#81868e;

    font-size:9.5px;

    line-height:1.5;
}


/* PAGINATION */

.teacher-pagination{
    margin-top:40px;
}


/* RESPONSIVE */

@media(max-width:1199.98px){

    .teacher-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }

}

@media(max-width:767.98px){

    .teacher-page{
        padding:110px 0 70px;
    }

    .teacher-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .teacher-photo{
        height:200px;
    }

}

/* =========================================================
   DETAIL PRESTASI
========================================================= */

.pd-page{
    padding:125px 0 95px;

    background:#f7f8fa;
}

.pd-page .container{
    max-width:1320px;
}

.pd-back{
    display:inline-flex;
    align-items:center;

    gap:7px;

    margin-bottom:30px;

    padding:9px 17px;

    border-radius:999px;

    color:#fff;

    background:var(--primary);

    font-size:11px;

    font-weight:800;
}

.pd-back:hover{
    color:#fff;

    background:var(--primary-dark);
}

.pd-grid{
    display:grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr);

    gap:48px;

    align-items:start;
}


/* FOTO */

.pd-photo{
    height:540px;

    overflow:hidden;

    border-radius:22px;

    background:#eee;

    box-shadow:
        0 16px 45px rgba(0,0,0,.08);
}

.pd-photo img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.pd-placeholder{
    width:100%;
    height:100%;

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

    color:#aaa;

    font-size:60px;
}


/* CONTENT */

.pd-content{
    padding-top:12px;
}

.pd-level{
    display:inline-flex;

    margin-bottom:12px;

    padding:6px 11px;

    border-radius:999px;

    color:#7a5700;

    background:
        rgba(251,192,45,.15);

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;
}

.pd-content h1{
    margin:0;

    color:#171717;

    font-size:
        clamp(2.5rem,4vw,3.7rem);

    line-height:1.1;

    font-weight:800;

    letter-spacing:-1.5px;
}

.pd-meta{
    display:flex;
    flex-wrap:wrap;

    gap:18px;

    margin-top:22px;

    color:#777d85;

    font-size:11px;
}

.pd-meta div{
    display:flex;
    align-items:center;

    gap:6px;
}

.pd-meta i{
    color:var(--primary);
}

.pd-description{
    max-width:720px;

    margin-top:28px;

    color:#555b64;

    font-size:14px;

    line-height:1.95;
}


/* RELATED */

.pd-related{
    margin-top:90px;

    padding-top:50px;

    border-top:
        1px solid rgba(0,0,0,.07);
}

.pd-related-head span{
    color:var(--primary);

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;
}

.pd-related-head h2{
    margin:7px 0 25px;

    font-size:
        clamp(1.9rem,3vw,2.5rem);

    font-weight:800;
}

.pd-related-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:14px;
}

.pd-related-card{
    position:relative;

    min-height:100px;

    padding:18px;

    border-radius:17px;

    color:#171717;

    background:#fff;

    border:
        1px solid rgba(0,0,0,.05);

    box-shadow:
        0 7px 22px rgba(0,0,0,.045);

    transition:.22s ease;
}

.pd-related-card:hover{
    color:#171717;

    transform:translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.08);
}

.pd-related-card strong{
    display:block;

    padding-right:25px;

    font-size:12px;

    line-height:1.45;
}

.pd-related-card small{
    display:block;

    margin-top:6px;

    color:#999;

    font-size:8px;
}

.pd-related-card i{
    position:absolute;

    right:15px;
    top:15px;

    color:#aaa;
}


/* MOBILE */

@media(max-width:991.98px){

    .pd-grid{
        grid-template-columns:1fr;
    }

    .pd-photo{
        height:450px;
    }

    .pd-related-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

@media(max-width:575.98px){

    .pd-page{
        padding:100px 0 70px;
    }

    .pd-photo{
        height:320px;
    }

    .pd-related-grid{
        grid-template-columns:1fr;
    }

}

/* =========================================================
   GALLERY LIGHTBOX
========================================================= */

.gallery-item{
    cursor:pointer;
}

.school-lightbox{
    position:fixed;
    inset:0;

    z-index:99999;

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

    padding:45px 90px;

    visibility:hidden;
    opacity:0;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.school-lightbox.open{
    visibility:visible;
    opacity:1;
}

.school-lightbox-backdrop{
    position:absolute;
    inset:0;

    background:
        rgba(12,10,10,.94);

    backdrop-filter:blur(12px);
}

.school-lightbox-content{
    position:relative;

    z-index:2;

    width:min(1100px, 100%);

    display:flex;
    flex-direction:column;

    align-items:center;

    transform:scale(.96);

    transition:transform .25s ease;
}

.school-lightbox.open .school-lightbox-content{
    transform:scale(1);
}


/* IMAGE */

.school-lightbox-image{
    width:100%;
    height:min(70vh, 700px);

    display:flex;
    align-items:center;
    justify-content:center;
}

.school-lightbox-image img{
    display:block;

    max-width:100%;
    max-height:100%;

    width:auto;
    height:auto;

    object-fit:contain;

    border-radius:15px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.45);
}


/* INFORMATION */

.school-lightbox-info{
    width:100%;

    margin-top:20px;

    text-align:center;

    color:#fff;
}

.school-lightbox-counter{
    margin-bottom:7px;

    color:#fbc02d;

    font-size:10px;
    font-weight:800;

    letter-spacing:1px;
}

.school-lightbox-info h3{
    margin:0;

    color:#fff;

    font-size:18px;
    font-weight:700;
}

.school-lightbox-info p{
    margin:6px 0 0;

    color:rgba(255,255,255,.55);

    font-size:11px;
}


/* CLOSE */

.school-lightbox-close{
    position:absolute;

    z-index:5;

    top:25px;
    right:30px;

    width:44px;
    height:44px;

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

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

    color:#fff;

    background:rgba(255,255,255,.08);

    font-size:20px;

    cursor:pointer;

    transition:.2s ease;
}

.school-lightbox-close:hover{
    background:#fff;
    color:#111;

    transform:rotate(90deg);
}


/* NEXT / PREVIOUS */

.school-lightbox-nav{
    position:absolute;

    z-index:5;

    top:50%;

    width:48px;
    height:48px;

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

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

    color:#fff;

    background:rgba(255,255,255,.08);

    font-size:22px;

    cursor:pointer;

    transform:translateY(-50%);

    transition:.2s ease;
}

.school-lightbox-nav:hover{
    color:#111;
    background:#fbc02d;
}

.school-lightbox-prev{
    left:30px;
}

.school-lightbox-next{
    right:30px;
}


/* PREVENT SCROLL */

body.lightbox-open{
    overflow:hidden;
}


/* MOBILE */

@media(max-width:767.98px){

    .school-lightbox{
        padding:70px 20px 35px;
    }

    .school-lightbox-image{
        height:65vh;
    }

    .school-lightbox-nav{
        width:40px;
        height:40px;

        top:auto;
        bottom:25px;
    }

    .school-lightbox-prev{
        left:20px;
    }

    .school-lightbox-next{
        right:20px;
    }

    .school-lightbox-close{
        top:18px;
        right:18px;

        width:40px;
        height:40px;
    }

    .school-lightbox-info{
        padding-bottom:55px;
    }

    .school-lightbox-info h3{
        font-size:15px;
    }
}


/* =========================================================
   SEARCH PAGE
========================================================= */

.search-page{
    min-height:80vh;

    padding:135px 0 95px;

    background:#f7f8fa;
}

.search-page .container{
    max-width:1100px;
}

.search-page-heading span{
    color:var(--primary);

    font-size:10px;
    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;
}

.search-page-heading h1{
    margin:7px 0 0;

    color:#171717;

    font-size:clamp(2.7rem,5vw,4rem);

    font-weight:800;

    letter-spacing:-1.5px;
}

.search-page-heading p{
    margin:13px 0 0;

    color:#747982;

    font-size:14px;

    line-height:1.8;
}


/* SEARCH FORM */

.search-page-form{
    display:flex;
    align-items:center;

    gap:10px;

    margin-top:30px;

    padding:9px;

    border-radius:18px;

    background:#fff;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:
        0 10px 30px rgba(0,0,0,.055);
}

.search-page-form > i{
    margin-left:10px;

    color:#999;

    font-size:20px;
}

.search-page-form input{
    flex:1;

    min-width:0;

    padding:12px 5px;

    border:0;

    outline:none;

    background:transparent;

    color:#222;

    font-size:13px;
}

.search-page-form button{
    padding:12px 23px;

    border:0;

    border-radius:13px;

    color:#fff;

    background:var(--primary);

    font-size:11px;

    font-weight:800;

    cursor:pointer;

    transition:.2s ease;
}

.search-page-form button:hover{
    background:var(--primary-dark);
}


/* SUMMARY */

.search-result-summary{
    margin-top:30px;

    color:#777d85;

    font-size:12px;
}

.search-result-summary strong{
    color:#222;
}


/* GROUP */

.search-results{
    display:grid;

    gap:55px;

    margin-top:40px;
}

.search-group-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin-bottom:17px;
}

.search-group-heading span{
    color:var(--primary);

    font-size:9px;

    font-weight:800;

    letter-spacing:.8px;

    text-transform:uppercase;
}

.search-group-heading h2{
    margin:4px 0 0;

    color:#171717;

    font-size:24px;

    font-weight:800;
}

.search-group-heading small{
    color:#999;

    font-size:9px;

    font-weight:700;
}


/* RESULT */

.search-result-list{
    display:grid;

    gap:9px;
}

.search-result-item{
    position:relative;

    display:flex;
    align-items:center;

    gap:15px;

    padding:16px 18px;

    border-radius:16px;

    color:#171717;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    transition:.22s ease;
}

.search-result-item:hover{
    color:#171717;

    transform:translateX(4px);

    border-color:
        rgba(183,28,28,.12);

    box-shadow:
        0 10px 30px rgba(0,0,0,.055);
}

.search-result-icon{
    width:44px;
    height:44px;

    flex:0 0 44px;

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

    border-radius:13px;

    color:var(--primary);

    background:
        rgba(183,28,28,.07);

    font-size:19px;
}

.search-result-content{
    flex:1;
    min-width:0;
}

.search-result-content span{
    display:block;

    color:#999;

    font-size:8px;

    font-weight:800;

    text-transform:uppercase;
}

.search-result-content h3{
    margin:3px 0 0;

    color:#222;

    font-size:13px;

    line-height:1.45;

    font-weight:800;
}

.search-result-content p{
    margin:4px 0 0;

    color:#81868e;

    font-size:10px;

    line-height:1.55;
}

.search-result-item > i{
    flex-shrink:0;

    color:#aaa;

    font-size:17px;
}


/* EMPTY */

.search-start,
.search-empty{
    margin-top:65px;

    padding:55px 25px;

    text-align:center;

    border-radius:22px;

    background:#fff;

    border:
        1px dashed rgba(0,0,0,.12);
}

.search-start > i,
.search-empty-icon{
    width:65px;
    height:65px;

    margin:0 auto 17px;

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

    border-radius:50%;

    color:var(--primary);

    background:
        rgba(183,28,28,.07);

    font-size:27px;
}

.search-start h2,
.search-empty h2{
    margin:0;

    font-size:19px;

    font-weight:800;
}

.search-start p,
.search-empty p{
    margin:7px 0 0;

    color:#888;

    font-size:12px;
}


/* MOBILE */

@media(max-width:575.98px){

    .search-page{
        padding:
            105px 0 70px;
    }

    .search-page-form{
        border-radius:15px;
    }

    .search-page-form button{
        padding:
            11px 16px;
    }

    .search-result-item{
        padding:14px;
    }

}

/* =========================================================
   SPMB PAGE
========================================================= */

.spmb-page{
    background:#f7f8fa;
}


/* HERO */

.spmb-hero{
    position:relative;

    padding:155px 0 80px;

    overflow:hidden;

    color:#fff;

    text-align:center;

    background:
        linear-gradient(
            120deg,
            #b71c1c 0%,
            #e93732 52%,
            #fbc02d 100%
        );
}

.spmb-hero::after{
    content:"";

    position:absolute;

    width:380px;
    height:380px;

    top:-230px;
    right:10%;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    filter:blur(30px);
}

.spmb-hero .container{
    position:relative;
    z-index:2;
}

.spmb-eyebrow{
    display:inline-block;

    margin-bottom:12px;

    font-size:10px;
    font-weight:800;

    letter-spacing:1.2px;

    text-transform:uppercase;
}

.spmb-hero h1{
    margin:0;

    font-size:
        clamp(2.7rem,5vw,4.4rem);

    font-weight:800;

    letter-spacing:-2px;
}

.spmb-hero p{
    margin:17px 0 0;

    color:rgba(255,255,255,.82);

    font-size:15px;
}


/* CONTAINER */

.spmb-container{
    max-width:1200px;

    padding-top:40px;
    padding-bottom:100px;
}


/* BACK */

.spmb-back{
    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-bottom:45px;

    padding:10px 18px;

    border-radius:999px;

    color:var(--primary);

    background:#fff;

    font-size:11px;
    font-weight:800;

    box-shadow:
        0 7px 22px rgba(0,0,0,.05);
}

.spmb-back:hover{
    color:#fff;

    background:var(--primary);
}


/* HEADING */

.spmb-heading{
    margin-bottom:28px;
}

.spmb-heading > span{
    color:var(--primary);

    font-size:9px;
    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;
}

.spmb-heading h2{
    margin:6px 0 0;

    color:#171717;

    font-size:
        clamp(2rem,4vw,2.8rem);

    font-weight:800;

    letter-spacing:-1px;
}

.spmb-heading p{
    max-width:650px;

    margin:10px auto 0;

    color:#747982;

    font-size:13px;

    line-height:1.8;
}


/* POSTER */

.spmb-poster-section{
    margin-bottom:40px;
}

.spmb-poster{
    max-width:850px;

    margin:0 auto;

    overflow:hidden;

    border-radius:24px;

    background:#fff;

    box-shadow:
        0 20px 55px rgba(0,0,0,.11);
}

.spmb-poster img{
    display:block;

    width:100%;
    height:auto;
}


/* DOCUMENT */

.spmb-document{
    display:flex;

    align-items:center;

    gap:18px;

    margin-top:35px;

    padding:24px;

    border-radius:20px;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 10px 32px rgba(0,0,0,.05);
}

.spmb-document-icon{
    width:55px;
    height:55px;

    flex:0 0 55px;

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

    border-radius:16px;

    color:#fff;

    background:var(--primary);

    font-size:25px;
}

.spmb-document-copy{
    flex:1;
}

.spmb-document-copy span{
    color:var(--primary);

    font-size:8px;
    font-weight:800;

    text-transform:uppercase;
}

.spmb-document-copy h3{
    margin:4px 0 0;

    color:#171717;

    font-size:15px;

    font-weight:800;
}

.spmb-document-copy p{
    margin:6px 0 0;

    color:#81868e;

    font-size:11px;
}

.spmb-document-actions{
    display:flex;

    gap:8px;

    flex-shrink:0;
}

.spmb-document-button{
    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:10px 15px;

    border-radius:11px;

    color:#fff;

    background:var(--primary);

    font-size:10px;

    font-weight:800;
}

.spmb-document-button:hover{
    color:#fff;

    background:var(--primary-dark);
}

.spmb-document-button.secondary{
    color:var(--primary);

    background:rgba(183,28,28,.07);
}


/* SECTIONS */

.spmb-info-section{
    margin-top:80px;
}


/* SCHEDULE */

.spmb-schedule-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:16px;
}

.spmb-schedule-card{
    padding:25px;

    border-radius:20px;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 8px 28px rgba(0,0,0,.05);
}

.spmb-stage{
    display:inline-flex;

    margin-bottom:12px;

    padding:5px 9px;

    border-radius:999px;

    color:#8b6500;

    background:rgba(251,192,45,.18);

    font-size:8px;

    font-weight:800;

    text-transform:uppercase;
}

.spmb-schedule-card h3{
    margin:0;

    color:#171717;

    font-size:16px;

    line-height:1.45;

    font-weight:800;
}

.spmb-schedule-card ul{
    margin:18px 0 0;

    padding-left:18px;

    color:#666c75;

    font-size:11px;

    line-height:1.9;
}


/* REQUIREMENTS */

.spmb-requirements{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:11px;
}

.spmb-requirements > div{
    display:flex;

    align-items:center;

    gap:10px;

    padding:15px 17px;

    border-radius:14px;

    color:#474c54;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    font-size:11px;

    font-weight:700;
}

.spmb-requirements i{
    width:27px;
    height:27px;

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

    flex-shrink:0;

    border-radius:50%;

    color:#fff;

    background:var(--primary);
}


/* NOTICE */

.spmb-notice{
    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-top:80px;

    padding:30px;

    border-radius:22px;

    background:
        rgba(251,192,45,.12);

    border:
        1px solid rgba(251,192,45,.22);
}

.spmb-notice-icon{
    width:50px;
    height:50px;

    flex:0 0 50px;

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

    border-radius:15px;

    color:#5f4500;

    background:var(--secondary);

    font-size:23px;
}

.spmb-notice span{
    color:#846000;

    font-size:8px;

    font-weight:800;

    text-transform:uppercase;
}

.spmb-notice h2{
    margin:5px 0 0;

    color:#171717;

    font-size:21px;

    font-weight:800;
}

.spmb-notice p{
    max-width:850px;

    margin:9px 0 0;

    color:#68604b;

    font-size:12px;

    line-height:1.8;
}


/* CTA */

.spmb-cta{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:30px;

    margin-top:45px;

    padding:35px;

    border-radius:25px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #171717,
            #551616
        );
}

.spmb-cta span{
    color:#fbc02d;

    font-size:8px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;
}

.spmb-cta h2{
    margin:6px 0 0;

    color:#fff;

    font-size:
        clamp(1.6rem,3vw,2.2rem);

    font-weight:800;
}

.spmb-cta p{
    max-width:650px;

    margin:9px 0 0;

    color:rgba(255,255,255,.62);

    font-size:11px;
}

.spmb-main-button{
    display:inline-flex;

    align-items:center;

    gap:8px;

    flex-shrink:0;

    padding:13px 20px;

    border-radius:999px;

    color:#261d00;

    background:var(--secondary);

    font-size:11px;

    font-weight:800;

    transition:.2s ease;
}

.spmb-main-button:hover{
    color:#261d00;

    background:#ffd14a;

    transform:translateY(-2px);
}


/* RESPONSIVE */

@media(max-width:991.98px){

    .spmb-schedule-grid{
        grid-template-columns:1fr;
    }

    .spmb-document{
        align-items:flex-start;

        flex-wrap:wrap;
    }

    .spmb-document-actions{
        width:100%;

        padding-left:73px;
    }

}

@media(max-width:575.98px){

    .spmb-hero{
        padding:
            125px 0 65px;
    }

    .spmb-container{
        padding-top:30px;
        padding-bottom:70px;
    }

    .spmb-poster{
        border-radius:17px;
    }

    .spmb-document{
        padding:19px;
    }

    .spmb-document-actions{
        padding-left:0;

        flex-wrap:wrap;
    }

    .spmb-requirements{
        grid-template-columns:1fr;
    }

    .spmb-notice{
        padding:22px 19px;
    }

    .spmb-cta{
        align-items:flex-start;

        flex-direction:column;

        padding:26px 22px;
    }

}

/* ============================================
   MODAL SPMB SELESAI
============================================ */

.spmb-announcement-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.68) !important;
    backdrop-filter: blur(5px);
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 30px !important;
}

.spmb-announcement-modal {
    width: 100% !important;
    max-width: 760px !important;
    max-height: 90vh !important;
    background: #fff !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.35) !important;
    animation: spmbPopup .35s ease;
}

@keyframes spmbPopup {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* HEADER */

.spmb-announcement-header {
    padding: 28px 32px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 20px !important;
    border-bottom: 1px solid #eee !important;
}

.spmb-announcement-label {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #c62828 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

.spmb-announcement-header h2 {
    margin: 0 !important;
    color: #c42026 !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.spmb-announcement-close {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    border: none !important;
    border-radius: 50% !important;
    background: #f4f4f4 !important;
    color: #777 !important;
    font-size: 24px !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}


/* BODY */

.spmb-announcement-body {
    padding: 27px 32px !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #444 !important;
}

.spmb-announcement-body p {
    margin: 0 0 17px !important;
}

.spmb-announcement-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    background: #fff0f0 !important;
    color: #d52c32 !important;
    font-size: 29px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}


/* BOX INFORMASI */

.spmb-announcement-notice {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 17px 18px !important;
    margin: 5px 0 20px !important;
    background: #fff8e7 !important;
    border: 1px solid #f0daa1 !important;
    border-radius: 14px !important;
}

.spmb-announcement-notice > i {
    color: #dc9410 !important;
    font-size: 22px !important;
    margin-top: 2px !important;
}

.spmb-announcement-notice div {
    display: flex !important;
    flex-direction: column !important;
}

.spmb-announcement-notice strong {
    color: #333 !important;
    font-size: 15px !important;
}

.spmb-announcement-notice span {
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}


/* SPMB TAHUN DEPAN */

.spmb-next-year {
    margin-top: 25px !important;
    padding: 22px !important;
    border-radius: 16px !important;
    text-align: center !important;
    color: #fff !important;
    background: linear-gradient(
        135deg,
        #a9151b 0%,
        #d82d32 100%
    ) !important;
}

.spmb-next-year span {
    display: block !important;
    color: rgba(255,255,255,.9) !important;
    font-size: 14px !important;
}

.spmb-next-year strong {
    display: block !important;
    margin: 4px 0 !important;
    color: #fff !important;
    font-size: 30px !important;
    font-weight: 800 !important;
}

.spmb-next-year small {
    display: block !important;
    color: rgba(255,255,255,.85) !important;
}


/* FOOTER */

.spmb-announcement-footer {
    padding: 18px 32px !important;
    background: #fafafa !important;
    border-top: 1px solid #eee !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.spmb-announcement-footer span {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #777 !important;
    font-size: 13px !important;
}

.spmb-announcement-footer button {
    border: none !important;
    border-radius: 10px !important;
    background: #ef3535 !important;
    color: #fff !important;
    padding: 12px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

.spmb-announcement-footer button:hover {
    background: #d92727 !important;
}


/* SAAT DITUTUP */

.spmb-announcement-overlay.hide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* MOBILE */

@media (max-width: 600px) {

    .spmb-announcement-overlay {
        padding: 15px !important;
    }

    .spmb-announcement-modal {
        border-radius: 18px !important;
    }

    .spmb-announcement-header {
        padding: 22px 20px !important;
    }

    .spmb-announcement-header h2 {
        font-size: 23px !important;
    }

    .spmb-announcement-body {
        padding: 22px 20px !important;
        font-size: 14px !important;
        max-height: 58vh !important;
    }

    .spmb-announcement-footer {
        padding: 16px 20px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .spmb-announcement-footer span {
        justify-content: center !important;
    }

    .spmb-announcement-footer button {
        width: 100% !important;
    }
}

/* =========================================================
   PROFILE PAGE
========================================================= */

.profile-page{
    background:#f7f8fa;
}


/* HERO */

.profile-hero{
    position:relative;

    padding:145px 0 80px;

    overflow:hidden;

    color:#fff;

    background:
        linear-gradient(
            120deg,
            #171717 0%,
            #3c1b1b 60%,
            #761919 100%
        );
}

.profile-hero::after{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-150px;
    top:-180px;

    border-radius:50%;

    background:rgba(251,192,45,.15);

    filter:blur(40px);
}

.profile-back{
    position:relative;
    z-index:2;

    display:inline-flex;
    align-items:center;

    gap:7px;

    color:rgba(255,255,255,.65);

    font-size:11px;
    font-weight:700;
}

.profile-back:hover{
    color:#fff;
}

.profile-hero-content{
    position:relative;
    z-index:2;

    max-width:900px;

    margin-top:28px;
}

.profile-eyebrow{
    display:block;

    margin-bottom:10px;

    color:var(--secondary);

    font-size:10px;
    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;
}

.profile-hero h1{
    margin:0;

    color:#fff;

    font-size:
        clamp(2.8rem,5vw,4.6rem);

    line-height:1.05;

    font-weight:800;

    letter-spacing:-2px;
}

.profile-hero h1 span{
    color:var(--secondary);
}

.profile-hero p{
    max-width:720px;

    margin:18px 0 0;

    color:rgba(255,255,255,.72);

    font-size:14px;

    line-height:1.85;
}


/* CONTAINER */

.profile-container{
    max-width:1250px;

    padding-top:75px;
    padding-bottom:100px;
}


/* INTRO */

.profile-intro{
    display:grid;

    grid-template-columns:
        minmax(0,1.4fr)
        minmax(300px,.6fr);

    gap:55px;

    align-items:start;
}

.profile-section-label,
.profile-section-head > span{
    display:block;

    margin-bottom:8px;

    color:var(--primary);

    font-size:9px;
    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;
}

.profile-intro-main h2,
.profile-section-head h2{
    margin:0;

    color:#171717;

    font-size:
        clamp(2rem,4vw,2.9rem);

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1px;
}

.profile-intro-main p{
    max-width:760px;

    margin:18px 0 0;

    color:#606670;

    font-size:14px;

    line-height:1.95;
}


/* SUMMARY */

.profile-summary-card{
    padding:27px;

    border-radius:22px;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 12px 38px rgba(0,0,0,.06);
}

.profile-summary-logo{
    width:75px;
    height:75px;

    margin-bottom:16px;
}

.profile-summary-logo img{
    width:100%;
    height:100%;

    object-fit:contain;
}

.profile-summary-card h3{
    margin:0;

    color:#171717;

    font-size:17px;

    font-weight:800;
}

.profile-summary-list{
    display:grid;

    gap:12px;

    margin-top:20px;
}

.profile-summary-list div{
    padding-top:11px;

    border-top:
        1px solid rgba(0,0,0,.06);
}

.profile-summary-list span{
    display:block;

    color:#999;

    font-size:8px;
    font-weight:800;

    text-transform:uppercase;
}

.profile-summary-list strong{
    display:block;

    margin-top:3px;

    color:#333;

    font-size:11px;

    font-weight:800;
}


/* GENERAL SECTION */

.profile-content-section{
    margin-top:90px;
}

.profile-section-head{
    margin-bottom:28px;
}

.profile-section-head p{
    max-width:650px;

    margin:10px 0 0;

    color:#757b84;

    font-size:13px;

    line-height:1.8;
}


/* HISTORY */

.profile-history{
    display:grid;

    grid-template-columns:220px 1fr;

    gap:35px;

    padding:34px;

    border-radius:22px;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 8px 28px rgba(0,0,0,.045);
}

.profile-history-year{
    padding-right:30px;

    border-right:
        1px solid rgba(0,0,0,.08);
}

.profile-history-year strong{
    display:block;

    color:var(--primary);

    font-size:45px;

    line-height:1;
}

.profile-history-year span{
    display:block;

    margin-top:7px;

    color:#999;

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;
}

.profile-history-text{
    color:#5d636c;

    font-size:14px;

    line-height:1.95;
}

.profile-history-text p{
    margin:0 0 16px;
}

.profile-history-text p:last-child{
    margin-bottom:0;
}


/* PRINCIPAL */

.profile-principal{
    display:grid;

    grid-template-columns:
        minmax(280px,.65fr)
        minmax(0,1.35fr);

    gap:40px;

    align-items:stretch;
}

.profile-principal-photo{
    min-height:430px;

    overflow:hidden;

    border-radius:22px;

    background:#eaeaea;
}

.profile-principal-photo img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center top;
}

.profile-principal-content{
    position:relative;

    padding:38px;

    border-radius:22px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #171717,
            #4e1717
        );
}

.profile-principal-content > i{
    margin-bottom:18px;

    color:var(--secondary);

    font-size:38px;
}

.profile-principal-content p{
    margin:0 0 16px;

    color:rgba(255,255,255,.76);

    font-size:14px;

    line-height:1.9;
}

.profile-principal-name{
    margin-top:28px;

    padding-top:20px;

    border-top:
        1px solid rgba(255,255,255,.12);
}

.profile-principal-name strong{
    display:block;

    color:#fff;

    font-size:13px;
}

.profile-principal-name span{
    display:block;

    margin-top:4px;

    color:rgba(255,255,255,.55);

    font-size:10px;
}


/* VISION */

.profile-vision{
    max-width:950px;

    margin:0 auto 18px;

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:28px;

    border-radius:22px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #971515,
            #c72828
        );
}

.profile-vision-icon{
    width:52px;
    height:52px;

    flex:0 0 52px;

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

    border-radius:15px;

    color:#302300;

    background:var(--secondary);

    font-size:23px;
}

.profile-vision span{
    color:var(--secondary);

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;
}

.profile-vision h3{
    max-width:760px;

    margin:5px 0 0;

    color:#fff;

    font-size:19px;

    line-height:1.55;

    font-weight:800;
}


/* MISSION */

.profile-mission{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:13px;

    max-width:950px;

    margin:auto;
}

.profile-mission article{
    padding:22px;

    border-radius:17px;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 7px 22px rgba(0,0,0,.04);
}

.profile-mission strong{
    color:var(--primary);

    font-size:22px;
}

.profile-mission p{
    margin:10px 0 0;

    color:#636a73;

    font-size:12px;

    line-height:1.75;
}


/* PROGRAM */

.profile-program-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:12px;
}

.profile-program-item{
    min-height:90px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px;

    border-radius:16px;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 7px 22px rgba(0,0,0,.04);
}

.profile-program-item > div{
    width:40px;
    height:40px;

    flex:0 0 40px;

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

    border-radius:12px;

    color:var(--primary);

    background:
        rgba(183,28,28,.07);

    font-size:18px;
}

.profile-program-item span{
    color:#242424;

    font-size:11px;

    line-height:1.45;

    font-weight:800;
}


/* CAMPUS */

.profile-campus-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:17px;
}

.profile-campus-card{
    position:relative;

    overflow:hidden;

    padding:28px;

    border-radius:21px;

    background:#fff;

    border:1px

}

.mission-section {
    width: 100%;
    margin-top: 45px;
}

.mission-heading {
    margin-bottom: 24px;
}

.mission-heading span {
    display: inline-block;
    color: #c51f1f;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.mission-heading h2 {
    margin: 0;
    font-size: 36px;
    font-weight: 800;
    color: #171717;
}

.mission-heading p {
    margin: 10px 0 0;
    max-width: 700px;
    color: #6b6b6b;
    font-size: 16px;
    line-height: 1.7;
}

.mission-card {
    width: 100%;
    background: #ffffff;

    border: 1px solid #eeeeee;
    border-radius: 22px;

    padding: 32px 38px;

    font-size: 16px;
    line-height: 1.85;
    color: #333;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05);
}

.mission-card br {
    display: block;
    content: "";
    margin-bottom: 7px;
}

@media (max-width: 768px) {

    .mission-heading h2 {
        font-size: 28px;
    }

    .mission-card {
        padding: 24px 20px;
        font-size: 15px;
    }
}

/* =====================================
   SAMBUTAN KEPALA SEKOLAH
===================================== */

.principal-section {
    width: 100%;
    margin-top: 80px;
    margin-bottom: 80px;
}

.principal-header {
    margin-bottom: 30px;
}

.principal-eyebrow {
    display: inline-block;
    color: #c51f1f;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    margin-bottom: 8px;
}

.principal-header h2 {
    margin: 0;
    color: #171717;
    font-size: 36px;
    font-weight: 800;
}

.principal-header p {
    margin: 10px 0 0;
    color: #707070;
    font-size: 16px;
}


/* CARD */

.principal-card {
    display: grid;
    grid-template-columns: 380px 1fr;

    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 26px;

    overflow: hidden;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.07);
}


/* =========================
   FOTO
========================= */

.principal-photo {
    position: relative;
    min-height: 560px;

    background:
        linear-gradient(
            180deg,
            #f8f8f8 0%,
            #eeeeee 100%
        );

    overflow: hidden;
}

.principal-photo img {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    object-fit: cover;
    object-position: center top;
}


/* FALLBACK */

.principal-placeholder {
    width: 100%;
    height: 100%;

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

    font-size: 90px;
    color: #bbbbbb;
}


/* IDENTITAS DI BAWAH FOTO */

.principal-identity {
    position: absolute;
    z-index: 2;

    left: 20px;
    right: 20px;
    bottom: 20px;

    padding: 18px 20px;

    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);

    border-radius: 16px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12);
}

.principal-identity span {
    display: block;

    color: #c51f1f;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;

    margin-bottom: 5px;
}

.principal-identity h3 {
    margin: 0;

    color: #171717;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 800;
}


/* =========================
   SAMBUTAN
========================= */

.principal-message {
    position: relative;

    padding: 55px 60px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quote-icon {
    width: 52px;
    height: 52px;

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

    margin-bottom: 22px;

    border-radius: 14px;

    background: #fff1f1;
    color: #c51f1f;

    font-size: 27px;
}

.principal-message h3 {
    margin: 0 0 22px;

    color: #191919;

    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
}

.principal-text {
    color: #4b4b4b;

    font-size: 16px;
    line-height: 1.9;

    text-align: justify;
}


/* TANDA TANGAN */

.principal-signature {
    margin-top: 30px;
    padding-top: 22px;

    border-top: 1px solid #eeeeee;
}

.principal-signature span {
    display: block;

    margin-bottom: 5px;

    color: #777777;
    font-size: 13px;
}

.principal-signature strong {
    color: #222222;

    font-size: 16px;
    font-weight: 800;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px) {

    .principal-card {
        grid-template-columns: 300px 1fr;
    }

    .principal-message {
        padding: 40px;
    }
}


@media (max-width: 768px) {

    .principal-section {
        margin-top: 55px;
    }

    .principal-header h2 {
        font-size: 28px;
    }

    .principal-card {
        display: block;
    }

    .principal-photo {
        min-height: 500px;
    }

    .principal-message {
        padding: 32px 24px;
    }

    .principal-message h3 {
        font-size: 21px;
    }

    .principal-text {
        font-size: 15px;
        text-align: left;
    }
}

/* =========================================================
   PROFILE CAMPUS - POLISH
========================================================= */

.profile-campus-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.profile-campus-card{
    position:relative;

    overflow:hidden;

    min-height:250px;

    padding:30px 32px;

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffaf4 100%
        );

    border:1px solid rgba(183,28,28,.07);

    box-shadow:
        0 14px 38px rgba(0,0,0,.055);

    transition:.25s ease;
}

.profile-campus-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 20px 48px rgba(0,0,0,.085);

    border-color:
        rgba(183,28,28,.13);
}


/* nomor besar dekoratif */

.profile-campus-number{
    position:absolute;

    right:24px;
    top:14px;

    color:rgba(183,28,28,.05);

    font-size:86px;

    font-weight:900;

    line-height:1;
}


/* icon */

.profile-campus-icon{
    width:52px;
    height:52px;

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

    margin-bottom:20px;

    border-radius:15px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #d93636
        );

    font-size:23px;

    box-shadow:
        0 10px 24px rgba(183,28,28,.18);
}


/* label kampus */

.profile-campus-card > span{
    display:block;

    margin-bottom:5px;

    color:var(--primary);

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;
}


/* alamat utama */

.profile-campus-card h3{
    margin:0;

    color:#171717;

    font-size:26px;

    line-height:1.25;

    font-weight:800;

    letter-spacing:-.6px;
}


/* detail lokasi */

.profile-campus-card p{
    margin:10px 0 0;

    color:#6c7179;

    font-size:13px;

    line-height:1.7;
}


/* =========================================================
   PROFILE CTA - POLISH
========================================================= */

.profile-final-cta{
    position:relative;

    overflow:hidden;

    margin-top:55px;

    padding:36px 38px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:30px;

    border-radius:26px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #171717 0%,
            #341717 55%,
            #661919 100%
        );

    box-shadow:
        0 18px 50px rgba(40,0,0,.13);
}


/* glow dekoratif */

.profile-final-cta::after{
    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:-90px;
    top:-120px;

    border-radius:50%;

    background:
        rgba(251,192,45,.14);

    filter:blur(25px);
}


/* isi teks */

.profile-final-cta > div{
    position:relative;
    z-index:2;
}

.profile-final-cta span{
    display:block;

    margin-bottom:7px;

    color:var(--secondary);

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;
}

.profile-final-cta h2{
    margin:0;

    color:#fff;

    font-size:30px;

    font-weight:800;

    letter-spacing:-.8px;
}

.profile-final-cta p{
    max-width:650px;

    margin:9px 0 0;

    color:rgba(255,255,255,.65);

    font-size:12px;

    line-height:1.7;
}


/* BUTTON */

.profile-final-cta > a{
    position:relative;
    z-index:2;

    flex-shrink:0;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    padding:13px 22px;

    border-radius:999px;

    color:#2c2100 !important;

    background:var(--secondary);

    font-size:11px;

    font-weight:800;

    text-decoration:none !important;

    box-shadow:
        0 10px 26px rgba(251,192,45,.18);

    transition:.22s ease;
}

.profile-final-cta > a:hover{
    color:#2c2100 !important;

    background:#ffd34d;

    transform:translateY(-2px);

    box-shadow:
        0 15px 32px rgba(251,192,45,.24);
}


/* RESPONSIVE */

@media(max-width:767.98px){

    .profile-campus-grid{
        grid-template-columns:1fr;
    }

    .profile-campus-card{
        min-height:220px;

        padding:25px 23px;
    }

    .profile-campus-card h3{
        font-size:22px;
    }

    .profile-final-cta{
        align-items:flex-start;

        flex-direction:column;

        padding:28px 23px;
    }

    .profile-final-cta h2{
        font-size:24px;
    }
    
}

    .profile-campus-card{
    display:block;
    color:inherit !important;
    text-decoration:none !important;
    cursor:pointer;
    gap: 50px;

.profile-campus-card:hover{
    color:inherit !important;
    transform:translateY(-5px);
}

.profile-campus-map-link{
    display:inline-flex;
    align-items:center;
    gap:6px;

    margin-top:18px;

    color:var(--primary);

    font-size:10px;
    font-weight:800;
}

@media(max-width:767.98px){

    .profile-campus-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

}
    }

    /* =========================================================
   PROFIL SEKOLAH - MOBILE RESPONSIVE FINAL
========================================================= */

@media (max-width: 767.98px){

    /* =========================
       GLOBAL
    ========================= */

    .profile-page{
        overflow-x:hidden;
    }

    .profile-container{
        width:100%;
        padding-left:18px;
        padding-right:18px;
        padding-top:45px;
        padding-bottom:65px;
    }

    .profile-content-section{
        margin-top:60px;
    }


    /* =========================
       HERO
    ========================= */

    .profile-hero{
        padding:105px 0 55px;
    }

    .profile-hero .container{
        padding-left:20px;
        padding-right:20px;
    }

    .profile-back{
        font-size:11px;
        margin-bottom:20px;
    }

    .profile-hero-content{
        margin-top:15px;
        max-width:100%;
    }

    .profile-eyebrow{
        font-size:9px;
        letter-spacing:1.2px;
    }

    .profile-hero h1{
        font-size:34px;
        line-height:1.12;
        letter-spacing:-1px;
    }

    .profile-hero p{
        margin-top:16px;
        font-size:13px;
        line-height:1.75;
    }


    /* =========================
       JUDUL SECTION
    ========================= */

    .profile-intro-main h2,
    .profile-section-head h2{
        font-size:27px;
        line-height:1.2;
        letter-spacing:-.5px;
    }

    .profile-section-head{
        margin-bottom:22px;
    }

    .profile-section-head p{
        font-size:13px;
        line-height:1.7;
    }


    /* =========================
       TENTANG SEKOLAH
    ========================= */

    .profile-intro{
        display:flex;
        flex-direction:column;
        gap:28px;
    }

    .profile-intro-main{
        width:100%;
    }

    .profile-intro-main p{
        margin-top:14px;
        font-size:13px;
        line-height:1.85;
        text-align:left;
    }

    .profile-summary-card{
        width:100%;
        max-width:none;
        padding:22px;
        border-radius:20px;
    }

    .profile-summary-logo{
        width:65px;
        height:65px;
    }

    .profile-summary-card h3{
        font-size:16px;
    }


    /* =========================
       SEJARAH
    ========================= */

    .profile-history{
        display:block;
        padding:22px;
        border-radius:20px;
    }

    .profile-history-year{
        padding:0 0 17px;
        margin-bottom:19px;

        border-right:0;
        border-bottom:1px solid rgba(0,0,0,.08);
    }

    .profile-history-year strong{
        font-size:38px;
    }

    .profile-history-text{
        font-size:13px;
        line-height:1.85;
    }


    /* =========================
       VISI
    ========================= */

    .profile-vision{
        padding:22px;

        display:flex;
        flex-direction:column;

        gap:15px;

        border-radius:20px;
    }

    .profile-vision-icon{
        width:46px;
        height:46px;
        flex:0 0 46px;

        font-size:20px;
    }

    .profile-vision h3{
        font-size:17px;
        line-height:1.55;
    }


    /* =========================
       MISI
    ========================= */

    .mission-section{
        margin-top:40px;
    }

    .mission-heading h2{
        font-size:27px;
        line-height:1.2;
    }

    .mission-heading p{
        font-size:13px;
        line-height:1.7;
    }

    .mission-card{
        width:100%;

        padding:22px 20px;

        border-radius:20px;

        font-size:14px;
        line-height:1.8;

        overflow-wrap:anywhere;
    }


    /* Kalau masih pakai profile-mission */

    .profile-mission{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }

    .profile-mission article{
        padding:20px;
    }


    /* =========================
       SAMBUTAN KEPALA SEKOLAH
    ========================= */

    .principal-section{
        margin-top:60px;
        margin-bottom:60px;
    }

    .principal-header{
        margin-bottom:22px;
    }

    .principal-header h2{
        font-size:27px;
        line-height:1.2;
    }

    .principal-header p{
        font-size:13px;
        line-height:1.7;
    }

    .principal-card{
        display:flex;
        flex-direction:column;

        width:100%;

        border-radius:22px;
    }


    /* FOTO KS */

    .principal-photo{
        position:relative;

        width:100%;
        min-height:0;
        height:430px;
    }

    .principal-photo img{
        position:absolute;
        inset:0;

        width:100%;
        height:100%;

        object-fit:cover;
        object-position:center top;
    }


    /* Nama di foto */

    .principal-identity{
        left:14px;
        right:14px;
        bottom:14px;

        padding:15px 16px;

        border-radius:14px;
    }

    .principal-identity span{
        font-size:9px;
    }

    .principal-identity h3{
        font-size:15px;
    }


    /* SAMBUTAN */

    .principal-message{
        display:block;

        padding:27px 21px;
    }

    .quote-icon{
        width:45px;
        height:45px;

        margin-bottom:18px;

        font-size:22px;
    }

    .principal-message h3{
        margin-bottom:17px;

        font-size:19px;
        line-height:1.45;
    }

    .principal-text{
        font-size:14px;
        line-height:1.85;

        text-align:left;
    }

    .principal-signature{
        margin-top:24px;
        padding-top:18px;
    }


    /* =========================
       PROGRAM KEAHLIAN
    ========================= */

    .profile-program-grid{
        grid-template-columns:1fr;
        gap:11px;
    }

    .profile-program-item{
        min-height:75px;

        padding:14px;

        border-radius:15px;
    }

    .profile-program-item > div{
        width:42px;
        height:42px;
        flex:0 0 42px;
    }

    .profile-program-item span{
        font-size:12px;
    }


    /* =========================
       LOKASI / KAMPUS
    ========================= */

    .profile-campus-grid{
        display:grid;

        grid-template-columns:1fr;

        gap:20px;
    }

    .profile-campus-card{
        width:100%;

        min-height:215px;

        padding:24px;

        border-radius:21px;

        text-decoration:none !important;
    }

    .profile-campus-number{
        right:18px;
        top:14px;

        font-size:67px;
    }

    .profile-campus-icon{
        width:48px;
        height:48px;

        margin-bottom:17px;

        font-size:20px;
    }

    .profile-campus-card h3{
        font-size:21px;
        line-height:1.3;
    }

    .profile-campus-card p{
        font-size:12px;
    }

    .profile-campus-map-link{
        margin-top:15px;
        font-size:10px;
    }


    /* =========================
       CTA BAWAH
    ========================= */

    .profile-final-cta{
        margin-top:55px;

        display:flex;
        flex-direction:column;
        align-items:flex-start;

        gap:22px;

        padding:26px 22px;

        border-radius:22px;
    }

    .profile-final-cta h2{
        font-size:23px;
        line-height:1.3;
    }

    .profile-final-cta p{
        font-size:12px;
        line-height:1.7;
    }

    .profile-final-cta > a{
        width:100%;

        padding:13px 18px;

        justify-content:center;
    }

}

@media (max-width: 390px){

    .profile-container{
        padding-left:15px;
        padding-right:15px;
    }

    .profile-hero .container{
        padding-left:17px;
        padding-right:17px;
    }

    .profile-hero h1{
        font-size:30px;
    }

    .profile-intro-main h2,
    .profile-section-head h2,
    .mission-heading h2,
    .principal-header h2{
        font-size:24px;
    }

    .principal-photo{
        height:390px;
    }

    .principal-message{
        padding:24px 18px;
    }

    .mission-card{
        padding:20px 17px;
        font-size:13px;
    }

    .profile-campus-card{
        padding:21px 19px;
    }

    .profile-final-cta{
        padding:24px 19px;
    }

}

/* =========================================================
   404 ERROR PAGE
========================================================= */

.error-page{
    min-height:100vh;

    display:flex;
    align-items:center;

    padding:130px 0 80px;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(183,28,28,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(251,192,45,.10),
            transparent 35%
        ),
        #f7f8fa;
}

.error-card{
    max-width:760px;

    margin:0 auto;

    padding:55px 45px;

    text-align:center;

    border-radius:28px;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 22px 65px rgba(0,0,0,.08);
}


/* 404 */

.error-code{
    font-size:clamp(5rem,13vw,9rem);

    line-height:.9;

    font-weight:900;

    letter-spacing:-6px;

    color:rgba(183,28,28,.09);
}


/* ICON */

.error-icon{
    width:70px;
    height:70px;

    margin:-25px auto 20px;

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

    border-radius:20px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #d83232
        );

    font-size:31px;

    box-shadow:
        0 12px 30px rgba(183,28,28,.22);
}


.error-label{
    display:block;

    margin-bottom:10px;

    color:var(--primary);

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;
}


.error-card h1{
    max-width:620px;

    margin:0 auto;

    color:#171717;

    font-size:
        clamp(2rem,4vw,3rem);

    line-height:1.2;

    font-weight:800;

    letter-spacing:-1px;
}


.error-card p{
    max-width:580px;

    margin:18px auto 0;

    color:#747982;

    font-size:14px;

    line-height:1.8;
}


/* BUTTON */

.error-actions{
    margin-top:30px;

    display:flex;
    flex-wrap:wrap;

    justify-content:center;

    gap:10px;
}

.error-btn{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    padding:12px 20px;

    border:0;

    border-radius:999px;

    font-size:11px;

    font-weight:800;

    cursor:pointer;

    transition:.22s ease;
}


.error-btn-primary{
    color:#fff;

    background:var(--primary);

    box-shadow:
        0 10px 25px rgba(183,28,28,.18);
}

.error-btn-primary:hover{
    color:#fff;

    background:var(--primary-dark);

    transform:translateY(-2px);
}


.error-btn-secondary{
    color:#333;

    background:#f1f1f1;
}

.error-btn-secondary:hover{
    background:#e8e8e8;

    transform:translateY(-2px);
}


/* MOBILE */

@media(max-width:575.98px){

    .error-page{
        padding:
            100px 15px 60px;
    }

    .error-card{
        padding:
            40px 22px;

        border-radius:22px;
    }

    .error-code{
        letter-spacing:-3px;
    }

    .error-icon{
        width:60px;
        height:60px;

        margin-top:-18px;

        font-size:27px;
    }

    .error-actions{
        flex-direction:column;
    }

    .error-btn{
        width:100%;
    }

}