/* ==========================================================
   SMP NEGERI 2 MOYUDAN
   WEBSITE SEKOLAH MODERN
   MASTER STYLESHEET
========================================================== */


/* ==========================================================
   01. ROOT / VARIABLES
========================================================== */

:root{

    --primary:#073b7a;
    --primary-dark:#052d5d;
    --primary-deep:#031f42;
    --primary-light:#0b63ce;

    --secondary:#0f6fce;

    --accent:#f5b400;
    --accent-dark:#d99c00;

    --white:#ffffff;
    --black:#111827;

    --text:#172033;
    --text-soft:#667085;
    --text-muted:#98a2b3;

    --bg:#f7f9fc;
    --bg-soft:#f1f5f9;
    --bg-dark:#061a33;

    --border:#e5e7eb;
    --border-light:#edf0f4;

    --shadow-sm:
        0 4px 14px rgba(15,23,42,.06);

    --shadow:
        0 12px 35px rgba(15,23,42,.09);

    --shadow-lg:
        0 25px 60px rgba(15,23,42,.15);

    --radius-sm:8px;
    --radius:14px;
    --radius-lg:22px;

    --container:1240px;

    --font-body:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    --font-heading:
        'Plus Jakarta Sans',
        'Inter',
        sans-serif;

    --transition:
        all .28s ease;

}


/* ==========================================================
   02. RESET
========================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

    font-size:16px;

}


body{

    margin:0;

    padding:0;

    font-family:var(--font-body);

    color:var(--text);

    background:var(--white);

    line-height:1.7;

    overflow-x:hidden;

}


img{

    max-width:100%;

    display:block;

}


a{

    text-decoration:none;

    color:inherit;

}


button,
input,
textarea,
select{

    font:inherit;

}


button{

    cursor:pointer;

}


ul,
ol{

    margin:0;

    padding:0;

    list-style:none;

}


h1,
h2,
h3,
h4,
h5,
h6{

    margin:0;

    font-family:var(--font-heading);

    line-height:1.2;

    color:var(--text);

}


p{

    margin:0;

}


/* ==========================================================
   03. CONTAINER
========================================================== */

.container{

    width:min(
        calc(100% - 48px),
        var(--container)
    );

    margin-left:auto;

    margin-right:auto;

}


/* ==========================================================
   04. PAGE LOADER
========================================================== */

.page-loader{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--white);

    opacity:1;

    visibility:visible;

    transition:
        opacity .5s ease,
        visibility .5s ease;

}


.page-loader.loaded{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}


.loader-inner{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

}


.loader-inner img{

    width:76px;

    height:76px;

    object-fit:contain;

    animation:
        loaderLogo 1.5s ease-in-out infinite;

}


.loader-line{

    width:110px;

    height:3px;

    overflow:hidden;

    background:#e5e7eb;

    border-radius:20px;

    position:relative;

}


.loader-line::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:45%;

    height:100%;

    background:var(--primary);

    border-radius:20px;

    animation:
        loaderLine 1.2s ease-in-out infinite;

}


@keyframes loaderLogo{

    0%,
    100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.06);
    }

}


@keyframes loaderLine{

    0%{
        left:-45%;
    }

    100%{
        left:100%;
    }

}


/* ==========================================================
   05. TOPBAR
========================================================== */

.topbar{

    background:var(--primary-deep);

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

    font-size:12px;

    letter-spacing:.01em;

}


.topbar-inner{

    min-height:38px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}


.topbar-left,
.topbar-right{

    display:flex;

    align-items:center;

    gap:16px;

}


.topbar span,
.topbar a{

    display:flex;

    align-items:center;

    gap:7px;

}


.topbar i{

    color:#7db8ff;

    font-size:13px;

}


.topbar a{

    transition:var(--transition);

}


.topbar a:hover{

    color:var(--white);

}


.topbar-divider{

    width:1px;

    height:14px;

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

}


/* ==========================================================
   06. SITE HEADER
   SMP NEGERI 2 MOYUDAN
   RESPONSIVE DESKTOP + MOBILE
========================================================== */

.site-header{

    position:relative;

    z-index:1000;

    width:100%;

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

    border-bottom:1px solid var(--border);

    transition:
        background .3s ease,
        box-shadow .3s ease;

}


.site-header.scrolled{

    position:sticky;

    top:0;

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

    backdrop-filter:blur(18px);

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

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

}


/* ==========================================================
   07. NAV CONTAINER
========================================================== */

.nav-container{

    min-height:84px;

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

}


/* ==========================================================
   08. BRAND
========================================================== */

.brand{

    flex:0 0 auto;

    min-width:245px;

    max-width:280px;

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

}


.brand-logo-wrap{

    width:55px;

    height:55px;

    flex:0 0 55px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f8fafc;

    border:1px solid var(--border);

    border-radius:11px;

    overflow:hidden;

}


.brand-logo{

    width:47px;

    height:47px;

    display:block;

    object-fit:contain;

}


.brand-text{

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    line-height:1.2;

}


.brand-text strong{

    display:block;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-family:var(--font-heading);

    color:var(--primary);

    font-size:14px;

    font-weight:800;

    letter-spacing:-.02em;

}


.brand-text span{

    display:block;

    margin-top:4px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:var(--text-soft);

    font-size:10px;

    font-weight:600;

}


/* ==========================================================
   09. DESKTOP NAVIGATION
========================================================== */

.desktop-navigation{

    flex:1 1 auto;

    min-width:0;

    display:flex;

    align-items:center;

    justify-content:center;

}


.desktop-navigation > ul{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:0;

    margin:0;

    padding:0;

    list-style:none;

}


.desktop-navigation > ul > li{

    position:relative;

    list-style:none;

}


.nav-link{

    min-height:84px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    padding:0 9px;

    color:#344054;

    font-size:12px;

    font-weight:600;

    white-space:nowrap;

    text-decoration:none;

    position:relative;

    transition:
        color .25s ease,
        background .25s ease;

}


.nav-link::after{

    content:"";

    position:absolute;

    left:9px;

    right:9px;

    bottom:0;

    height:3px;

    border-radius:4px 4px 0 0;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:center;

    transition:
        transform .25s ease;

}


.nav-link:hover{

    color:var(--primary);

}


.nav-link:hover::after,
.nav-link.active::after{

    transform:scaleX(1);

}


.nav-link.active{

    color:var(--primary);

}


.nav-link i{

    font-size:9px;

    transition:
        transform .25s ease;

}


.has-dropdown:hover .nav-link i{

    transform:rotate(180deg);

}


/* ==========================================================
   10. DROPDOWN
========================================================== */

.dropdown-menu{

    position:absolute;

    top:calc(100% + 1px);

    left:0;

    z-index:1200;

    min-width:245px;

    padding:8px;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:0 0 12px 12px;

    box-shadow:
        0 15px 35px rgba(15,23,42,.12);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateY(8px);

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

}


.has-dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);

}


.dropdown-menu a{

    display:flex;

    align-items:center;

    gap:10px;

    padding:11px 12px;

    border-radius:8px;

    color:#475467;

    font-size:12px;

    font-weight:600;

    text-decoration:none;

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

}


.dropdown-menu a i{

    width:20px;

    color:var(--primary);

    font-size:15px;

}


.dropdown-menu a:hover{

    color:var(--primary);

    background:#f1f6fc;

    transform:translateX(3px);

}


/* ==========================================================
   11. HEADER ACTION
========================================================== */

.header-actions{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:8px;

}


/* ==========================================================
   12. PPDB BUTTON
========================================================== */

.header-ppdb{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-height:40px;

    padding:0 13px;

    border:1px solid var(--primary);

    border-radius:8px;

    color:var(--white);

    background:var(--primary);

    font-size:11px;

    font-weight:700;

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

    box-shadow:
        0 5px 14px rgba(7,59,122,.16);

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

}


.header-ppdb:hover{

    color:var(--white);

    background:var(--primary-light);

    transform:translateY(-1px);

    box-shadow:
        0 8px 18px rgba(7,59,122,.22);

}


.header-ppdb i{

    font-size:11px;

}


/* ==========================================================
   13. LOGIN SISTEM - DESKTOP
========================================================== */

.header-login{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-height:40px;

    padding:0 13px;

    border:1px solid var(--primary);

    border-radius:8px;

    color:var(--primary);

    background:var(--white);

    font-size:11px;

    font-weight:700;

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;

}


.header-login:hover{

    color:var(--white);

    background:var(--primary);

    border-color:var(--primary);

    transform:translateY(-1px);

}


.header-login i{

    font-size:14px;

}


/* ==========================================================
   14. MOBILE MENU BUTTON
========================================================== */

.mobile-menu-button{

    width:42px;

    height:42px;

    flex:0 0 42px;

    display:none;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

    padding:0;

    margin:0;

    border:1px solid var(--border);

    border-radius:9px;

    background:var(--white);

    cursor:pointer;

    outline:none;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;

}


.mobile-menu-button:hover{

    background:#f8fafc;

    border-color:#cbd5e1;

}


.mobile-menu-button:focus{

    outline:none;

    box-shadow:
        0 0 0 3px rgba(7,59,122,.10);

}


.mobile-menu-button span{

    display:block;

    width:19px;

    height:2px;

    flex:0 0 2px;

    border-radius:3px;

    background:var(--primary);

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

}


/* ==========================================================
   15. HAMBURGER ACTIVE
========================================================== */

.mobile-menu-button.active span:nth-child(1){

    transform:
        translateY(7px)
        rotate(45deg);

}


.mobile-menu-button.active span:nth-child(2){

    opacity:0;

    transform:scaleX(0);

}


.mobile-menu-button.active span:nth-child(3){

    transform:
        translateY(-7px)
        rotate(-45deg);

}


/* ==========================================================
   16. MOBILE NAVIGATION
========================================================== */

.mobile-navigation{

    display:none;

    width:100%;

    position:absolute;

    left:0;

    top:100%;

    z-index:1100;

    background:var(--white);

    border-top:1px solid var(--border);

    box-shadow:
        0 18px 35px rgba(15,23,42,.12);

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

    overflow-y:auto;

    overflow-x:hidden;

}


.mobile-navigation.active{

    display:block;

}


.mobile-nav-inner{

    width:100%;

    max-width:700px;

    margin:0 auto;

    padding:12px 15px 22px;

}


/* ==========================================================
   17. MOBILE BRAND
========================================================== */

.mobile-menu-brand{

    display:flex;

    align-items:center;

    gap:11px;

    padding:5px 2px 13px;

    border-bottom:1px solid var(--border);

}


.mobile-menu-logo{

    width:45px;

    height:45px;

    flex:0 0 45px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f8fafc;

    border:1px solid var(--border);

    border-radius:9px;

    overflow:hidden;

}


.mobile-menu-logo img{

    width:38px;

    height:38px;

    object-fit:contain;

}


.mobile-menu-brand > div:last-child{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.mobile-menu-brand strong{

    display:block;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:var(--primary);

    font-size:12px;

    font-weight:800;

}


.mobile-menu-brand span{

    display:block;

    margin-top:3px;

    color:var(--text-soft);

    font-size:10px;

    font-weight:500;

}


/* ==========================================================
   18. MOBILE GOVERNMENT INFO
========================================================== */

.mobile-government-info{

    display:flex;

    align-items:center;

    gap:10px;

    margin:10px 0 5px;

    padding:10px 11px;

    border:1px solid var(--border);

    border-radius:8px;

    background:#f8fafc;

}


.mobile-government-info > i{

    color:var(--primary);

    font-size:17px;

}


.mobile-government-info div{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.mobile-government-info strong{

    color:#344054;

    font-size:10px;

    font-weight:700;

}


.mobile-government-info span{

    margin-top:2px;

    color:var(--text-soft);

    font-size:9px;

}


/* ==========================================================
   19. MOBILE SECTION TITLE
========================================================== */

.mobile-section-title{

    margin-top:14px;

    margin-bottom:2px;

    padding:6px 4px;

    color:#667085;

    font-size:9px;

    font-weight:800;

    letter-spacing:.09em;

}


/* ==========================================================
   20. MOBILE NAV LINK
========================================================== */

.mobile-nav-link{

    width:100%;

    min-height:45px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:10px 5px;

    border-bottom:1px solid var(--border-light);

    color:#344054;

    font-size:12px;

    font-weight:600;

    text-decoration:none;

    box-sizing:border-box;

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

}


.mobile-nav-link span{

    min-width:0;

    display:flex;

    align-items:center;

    gap:10px;

}


.mobile-nav-link span i{

    width:23px;

    flex:0 0 23px;

    color:var(--primary);

    font-size:15px;

    text-align:center;

}


.mobile-nav-link > i{

    flex:0 0 auto;

    color:#98a2b3;

    font-size:11px;

}


.mobile-nav-link:hover{

    color:var(--primary);

    background:#f8fafc;

}


/* ==========================================================
   21. MOBILE PPDB
========================================================== */

.mobile-ppdb{

    width:100%;

    min-height:45px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-top:14px;

    padding:11px 13px;

    box-sizing:border-box;

    border-radius:8px;

    color:var(--white);

    background:var(--primary);

    font-size:12px;

    font-weight:700;

    text-decoration:none;

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

}


.mobile-ppdb span{

    display:flex;

    align-items:center;

    gap:9px;

}


.mobile-ppdb:hover{

    color:var(--white);

    background:var(--primary-light);

    transform:translateY(-1px);

}


/* ==========================================================
   22. MOBILE LOGIN
========================================================== */

.mobile-login{

    width:100%;

    min-height:45px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-top:8px;

    padding:11px 13px;

    box-sizing:border-box;

    border:1px solid var(--primary);

    border-radius:8px;

    color:var(--primary);

    background:var(--white);

    font-size:12px;

    font-weight:700;

    text-decoration:none;

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

}


.mobile-login span{

    display:flex;

    align-items:center;

    gap:9px;

}


.mobile-login:hover{

    color:var(--white);

    background:var(--primary);

}


/* ==========================================================
   23. MOBILE FOOTER
========================================================== */

.mobile-nav-footer{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:18px 5px 4px;

    margin-top:10px;

    border-top:1px solid var(--border);

}


.mobile-nav-footer span{

    color:#475467;

    font-size:10px;

    font-weight:700;

}


.mobile-nav-footer small{

    margin-top:3px;

    color:#98a2b3;

    font-size:9px;

}


/* ==========================================================
   24. TABLET
========================================================== */

@media (max-width:1180px){

    .nav-container{

        gap:12px;

    }


    .brand{

        min-width:215px;

        max-width:230px;

    }


    .brand-text strong{

        font-size:12px;

    }


    .desktop-navigation > ul{

        gap:0;

    }


    .nav-link{

        padding:0 7px;

        font-size:11px;

    }


    .nav-link::after{

        left:7px;

        right:7px;

    }


    .header-ppdb,
    .header-login{

        padding:0 10px;

        font-size:10px;

    }

}


/* ==========================================================
   25. MOBILE / SMALL TABLET
========================================================== */

@media (max-width:992px){

    .site-header{

        position:relative;

    }


    .nav-container{

        min-height:68px;

        gap:10px;

    }


    .brand{

        min-width:0;

        max-width:none;

        flex:1 1 auto;

    }


    .brand-logo-wrap{

        width:45px;

        height:45px;

        flex-basis:45px;

        border-radius:9px;

    }


    .brand-logo{

        width:38px;

        height:38px;

    }


    .brand-text strong{

        font-size:12px;

    }


    .brand-text span{

        font-size:9px;

    }


    .desktop-navigation{

        display:none;

    }


    .header-actions{

        gap:7px;

    }


    .header-ppdb,
    .header-login{

        display:none;

    }


    .mobile-menu-button{

        display:flex;

    }


    .mobile-navigation{

        top:100%;

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

    }

}


/* ==========================================================
   26. MOBILE
========================================================== */

@media (max-width:600px){

    .nav-container{

        min-height:64px;

        padding-left:15px;

        padding-right:15px;

    }


    .brand{

        gap:9px;

    }


    .brand-logo-wrap{

        width:40px;

        height:40px;

        flex-basis:40px;

    }


    .brand-logo{

        width:34px;

        height:34px;

    }


    .brand-text strong{

        max-width:205px;

        font-size:11px;

    }


    .brand-text span{

        margin-top:3px;

        font-size:8px;

    }


    .mobile-menu-button{

        width:40px;

        height:40px;

        flex-basis:40px;

    }


    .mobile-navigation{

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

    }


    .mobile-nav-inner{

        padding-left:14px;

        padding-right:14px;

    }

}


/* ==========================================================
   27. VERY SMALL MOBILE
========================================================== */

@media (max-width:380px){

    .nav-container{

        padding-left:11px;

        padding-right:11px;

    }


    .brand-text strong{

        max-width:175px;

        font-size:10px;

    }


    .brand-text span{

        font-size:8px;

    }


    .mobile-nav-inner{

        padding-left:11px;

        padding-right:11px;

    }

}


/* ==========================================================
   28. PREVENT HORIZONTAL SCROLL
========================================================== */

html,
body{

    max-width:100%;

    overflow-x:hidden;

}


.mobile-navigation,
.mobile-nav-inner,
.mobile-nav-link,
.mobile-ppdb,
.mobile-login{

    max-width:100%;

}


/* ==========================================================
   29. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .site-header,
    .nav-link,
    .dropdown-menu,
    .mobile-navigation,
    .mobile-menu-button span,
    .mobile-nav-link,
    .mobile-ppdb,
    .mobile-login{

        transition:none !important;

    }

}


/* ==========================================================
   13. HERO
   MODERN SCHOOL HERO
========================================================== */

.hero-section{

    position:relative;

    min-height:
        calc(100vh - 122px);

    overflow:hidden;

    background:
        var(--primary-deep);

}


/* ----------------------------------------------------------
   SLIDER
---------------------------------------------------------- */

.hero-slider{

    position:absolute;

    inset:0;

}


.hero-slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    opacity:0;

    visibility:hidden;

    transform:scale(1.055);

    transition:
        opacity 1s ease,
        visibility 1s ease,
        transform 8s cubic-bezier(.22,1,.36,1);

}


.hero-slide.active{

    opacity:1;

    visibility:visible;

    transform:scale(1);

}


/* ----------------------------------------------------------
   OVERLAY
---------------------------------------------------------- */

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(3,24,52,.96) 0%,
            rgba(3,24,52,.86) 32%,
            rgba(3,24,52,.52) 62%,
            rgba(3,24,52,.20) 100%
        );

}


.hero-overlay::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(3,24,52,.08),
            rgba(3,24,52,.20)
        );

}


/* ----------------------------------------------------------
   HERO CONTAINER
---------------------------------------------------------- */

.hero-container{

    position:relative;

    z-index:3;

    min-height:
        calc(100vh - 122px);

    display:flex;

    align-items:center;

}


.hero-content{

    width:min(
        760px,
        100%
    );

    padding:
        90px 0
        130px;

    color:var(--white);

}


/* ----------------------------------------------------------
   HERO LABEL
---------------------------------------------------------- */

.hero-label{

    display:inline-flex;

    align-items:center;

    gap:11px;

    margin-bottom:24px;

    padding:
        8px 13px;

    color:#d7eaff;

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

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

    border-radius:999px;

    backdrop-filter:blur(10px);

    font-size:10px;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.hero-label-line{

    width:22px;

    height:2px;

    background:#7dbaff;

    border-radius:10px;

}


/* ----------------------------------------------------------
   HERO TITLE
---------------------------------------------------------- */

.hero-content h1{

    max-width:850px;

    margin:0;

    color:var(--white);

    font-size:
        clamp(
            40px,
            5.2vw,
            74px
        );

    font-weight:800;

    line-height:1.04;

    letter-spacing:-.055em;

}


.hero-content h1 span{

    display:block;

    margin-top:5px;

    color:#82c0ff;

}


.hero-content p{

    max-width:660px;

    margin-top:25px;

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

    font-size:15px;

    line-height:1.85;

}


/* ----------------------------------------------------------
   HERO BUTTON
---------------------------------------------------------- */

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:11px;

    margin-top:32px;

}


.hero-btn-primary,
.hero-btn-secondary{

    min-height:49px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:
        0 19px;

    border-radius:10px;

    font-size:11px;

    font-weight:800;

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

}


.hero-btn-primary{

    color:
        var(--primary-deep);

    background:
        var(--white);

}


.hero-btn-primary:hover{

    transform:
        translateY(-3px);

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

}


.hero-btn-secondary{

    color:
        var(--white);

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

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

    backdrop-filter:
        blur(12px);

}


.hero-btn-secondary:hover{

    transform:
        translateY(-3px);

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

    border-color:
        rgba(255,255,255,.5);

}


/* ==========================================================
   14. HERO BOTTOM
========================================================== */

.hero-bottom{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    z-index:10;

    border-top:
        1px solid
        rgba(255,255,255,.14);

    background:
        rgba(3,24,52,.45);

    backdrop-filter:
        blur(14px);

}


.hero-bottom-inner{

    min-height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


.hero-location{

    display:flex;

    align-items:center;

    gap:13px;

    color:var(--white);

}


.hero-location-icon{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#8bc4ff;

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

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

    border-radius:50%;

}


.hero-location div{

    display:flex;

    flex-direction:column;

}


.hero-location small{

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

    font-size:9px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.hero-location strong{

    margin-top:3px;

    color:var(--white);

    font-size:11px;

    font-weight:600;

}


/* ----------------------------------------------------------
   SLIDER CONTROL
---------------------------------------------------------- */

.hero-slider-control{

    display:flex;

    align-items:center;

    gap:11px;

}


.hero-slider-control button{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--white);

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

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

    border-radius:50%;

    cursor:pointer;

    transition:var(--transition);

}


.hero-slider-control button:hover{

    color:var(--primary);

    background:var(--white);

    transform:translateY(-2px);

}


.slider-counter{

    min-width:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

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

    font-size:11px;

}


.slider-counter strong{

    color:var(--white);

    font-size:15px;

}


/* ==========================================================
   15. SECTION DIVIDER
   PEMBATAS ANTAR PAGE
========================================================== */

.about-section,
.principal-section,
.latest-section,
.agenda-section,
.facility-section,
.intro-section,
.stats-section,
.news-section,
.admission-section{

    position:relative;

}


.about-section::before,
.principal-section::before,
.latest-section::before,
.agenda-section::before,
.facility-section::before,
.intro-section::before,
.stats-section::before,
.news-section::before,
.admission-section::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    height:1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #d8e2ed 18%,
            #b8c9dc 50%,
            #d8e2ed 82%,
            transparent
        );

}


/* ==========================================================
   16. GENERAL SECTION
========================================================== */

.about-section,
.principal-section,
.latest-section,
.agenda-section,
.facility-section,
.intro-section,
.news-section{

    padding:
        115px 0;

}


/* ----------------------------------------------------------
   SECTION KICKER
---------------------------------------------------------- */

.section-kicker{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    color:var(--primary);

    font-size:10px;

    font-weight:800;

    letter-spacing:.16em;

    text-transform:uppercase;

}


.section-kicker::before,
.section-kicker::after{

    content:"";

    width:24px;

    height:1px;

    background:
        var(--primary);

}


.section-kicker.light{

    color:#8fc5ff;

}


.section-kicker.light::before,
.section-kicker.light::after{

    background:#8fc5ff;

}


/* ==========================================================
   17. ABOUT / PROFIL SEKOLAH
========================================================== */

.about-section{

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fafd 100%
        );

}


/* ----------------------------------------------------------
   ABOUT GRID
---------------------------------------------------------- */

.about-grid{

    display:grid;

    grid-template-columns:
        180px 1fr;

    gap:70px;

    position:relative;

}


/* ----------------------------------------------------------
   ABOUT LABEL
---------------------------------------------------------- */

.about-label{

    padding-top:7px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


.about-label .section-kicker{

    justify-content:flex-start;

}


.about-label .section-kicker::before{

    display:none;

}


.about-number{

    margin-top:25px;

    color:#dce6f0;

    font-family:
        var(--font-heading);

    font-size:76px;

    font-weight:800;

    line-height:1;

    letter-spacing:-.07em;

}


/* ----------------------------------------------------------
   ABOUT CONTENT
---------------------------------------------------------- */

.about-content{

    max-width:900px;

}


.about-content > .section-kicker{

    justify-content:flex-start;

}


.about-content h2{

    margin-top:16px;

    color:var(--text);

    font-size:
        clamp(
            34px,
            4.2vw,
            57px
        );

    font-weight:800;

    line-height:1.08;

    letter-spacing:-.05em;

}


.about-content h2::after{

    content:"";

    display:block;

    width:48px;

    height:3px;

    margin-top:21px;

    background:
        var(--primary);

    border-radius:10px;

}


.about-content p{

    max-width:780px;

    margin-top:22px;

    color:var(--text-soft);

    font-size:14px;

    line-height:1.9;

}


.about-content .about-lead{

    color:var(--text);

    font-size:16px;

    font-weight:500;

}


/* ----------------------------------------------------------
   ABOUT META
---------------------------------------------------------- */

.about-meta{

    display:grid;

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

    margin-top:38px;

    border-top:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);

}


.about-meta > div{

    min-height:82px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        15px 22px;

    border-right:
        1px solid
        var(--border);

}


.about-meta > div:first-child{

    padding-left:0;

}


.about-meta > div:last-child{

    border-right:0;

}


.about-meta span{

    color:var(--text-muted);

    font-size:9px;

    font-weight:800;

    letter-spacing:.1em;

    text-transform:uppercase;

}


.about-meta strong{

    margin-top:5px;

    color:var(--text);

    font-family:
        var(--font-heading);

    font-size:18px;

}


/* ----------------------------------------------------------
   TEXT LINK
---------------------------------------------------------- */

.text-link{

    margin-top:27px;

    display:inline-flex;

    align-items:center;

    gap:9px;

    color:var(--primary);

    font-size:11px;

    font-weight:800;

    transition:
        color .25s ease;

}


.text-link i{

    transition:
        transform .25s ease;

}


.text-link:hover{

    color:
        var(--primary-deep);

}


.text-link:hover i{

    transform:
        translateX(5px);

}


/* ==========================================================
   18. PRINCIPAL / SAMBUTAN KEPALA SEKOLAH
========================================================== */

.principal-section{

    background:
        #f5f8fc;

}


.principal-section .container{

    position:relative;

}


/* ----------------------------------------------------------
   SECTION HEADER
---------------------------------------------------------- */

.section-header-row{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:45px;

}


.section-header-row > div:first-child{

    flex:1;

}


/* ----------------------------------------------------------
   CENTER TITLE
---------------------------------------------------------- */

.principal-section .section-header-row{

    display:block;

    text-align:center;

}


.principal-section .section-header-row .section-kicker{

    justify-content:center;

}


.principal-section .section-header-row h2{

    margin-top:13px;

}


.principal-section .section-header-row .outline-button{

    margin-top:22px;

}


/* ----------------------------------------------------------
   ALL SECTION HEADERS
---------------------------------------------------------- */

.section-header-row h2{

    color:var(--text);

    font-size:
        clamp(
            31px,
            4vw,
            48px
        );

    font-weight:800;

    line-height:1.1;

    letter-spacing:-.045em;

}


.section-header-row h2 span{

    color:var(--primary);

}


.section-header-row p{

    max-width:560px;

    margin:15px auto 0;

    color:var(--text-soft);

    font-size:13px;

    line-height:1.8;

}


/* ----------------------------------------------------------
   OUTLINE BUTTON
---------------------------------------------------------- */

.outline-button{

    flex-shrink:0;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    padding:
        11px 16px;

    color:var(--primary);

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

    border:
        1px solid
        #cbd8e6;

    border-radius:9px;

    font-size:10px;

    font-weight:800;

    transition:var(--transition);

}


.outline-button:hover{

    color:var(--white);

    background:var(--primary);

    border-color:var(--primary);

    transform:
        translateY(-2px);

}


/* ----------------------------------------------------------
   PRINCIPAL FEATURE
---------------------------------------------------------- */

.principal-feature{

    position:relative;

    display:grid;

    grid-template-columns:
        390px 1fr;

    min-height:460px;

    overflow:hidden;

    background:
        var(--white);

    border:
        1px solid
        #dbe4ed;

    border-radius:22px;

    box-shadow:
        0 18px 55px
        rgba(17,45,75,.08);

}


/* ----------------------------------------------------------
   PHOTO
---------------------------------------------------------- */

.principal-photo{

    position:relative;

    min-height:460px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #dfeaf5,
            #f6f9fc
        );

}


.principal-photo::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(3,31,66,.28)
        );

    pointer-events:none;

}


.principal-photo img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .7s ease;

}


.principal-feature:hover
.principal-photo img{

    transform:
        scale(1.035);

}


.principal-placeholder{

    width:100%;

    height:100%;

    min-height:460px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#8ea2b8;

    font-size:75px;

}


/* ----------------------------------------------------------
   PRINCIPAL CONTENT
---------------------------------------------------------- */

.principal-content{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        55px 65px;

}


.principal-content::before{

    content:"“";

    position:absolute;

    top:24px;

    right:40px;

    color:#edf3f8;

    font-family:
        Georgia,
        serif;

    font-size:120px;

    line-height:1;

    pointer-events:none;

}


.principal-position{

    display:inline-flex;

    width:max-content;

    padding:
        6px 10px;

    color:var(--primary);

    background:#eef5fc;

    border-radius:5px;

    font-size:9px;

    font-weight:800;

    letter-spacing:.1em;

    text-transform:uppercase;

}


.principal-content h3{

    margin-top:15px;

    color:var(--text);

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            26px,
            3vw,
            38px
        );

    line-height:1.15;

    letter-spacing:-.04em;

}


.principal-period{

    margin-top:6px;

    color:var(--text-muted);

    font-size:10px;

    font-weight:600;

}


.principal-message{

    position:relative;

    margin-top:27px;

    padding-left:22px;

    border-left:
        3px solid
        var(--primary);

}


.quote-mark{

    display:none;

}


.principal-message p{

    max-width:650px;

    color:var(--text-soft);

    font-size:14px;

    line-height:1.9;

}


/* ==========================================================
   19. LATEST / INFORMASI SEKOLAH
========================================================== */

.latest-section{

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fafc
        );

}


/* ----------------------------------------------------------
   CENTER HEADER
---------------------------------------------------------- */

.latest-section .section-header-row{

    display:block;

    text-align:center;

}


.latest-section .section-kicker{

    justify-content:center;

}


.latest-section .section-header-row h2{

    margin-top:13px;

}


.latest-section .section-header-row p{

    margin:
        15px auto 0;

}


/* Hide button from right position and place center */

.latest-section
.section-header-row
.outline-button{

    margin-top:23px;

}


/* ----------------------------------------------------------
   LATEST GRID
---------------------------------------------------------- */

.latest-grid{

    display:grid;

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

    gap:18px;

    margin-top:45px;

}


/* ----------------------------------------------------------
   LATEST CARD
---------------------------------------------------------- */

.latest-card{

    position:relative;

    min-height:230px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding:
        30px;

    overflow:hidden;

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

    border:
        1px solid
        #dce5ee;

    border-radius:17px;

    box-shadow:
        0 8px 28px
        rgba(18,47,78,.045);

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

}


.latest-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            #76b7f5
        );

    transform:
        scaleX(0);

    transform-origin:left;

    transition:
        transform .35s ease;

}


.latest-card:hover{

    transform:
        translateY(-7px);

    border-color:
        #c6d6e6;

    box-shadow:
        0 20px 45px
        rgba(18,47,78,.10);

}


.latest-card:hover::before{

    transform:
        scaleX(1);

}


.latest-card-icon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    background:
        #edf5fd;

    border:
        1px solid
        #dceafa;

    border-radius:12px;

    font-size:18px;

    margin-bottom:27px;

}


.latest-card > div:nth-child(2){

    display:flex;

    flex-direction:column;

}


.latest-card span{

    color:var(--primary);

    font-size:9px;

    font-weight:800;

    letter-spacing:.12em;

}


.latest-card h3{

    margin-top:7px;

    color:var(--text);

    font-size:18px;

    letter-spacing:-.025em;

}


.latest-card p{

    max-width:330px;

    margin-top:8px;

    color:var(--text-soft);

    font-size:11px;

    line-height:1.75;

}


.latest-card > i{

    position:absolute;

    right:25px;

    bottom:25px;

    color:#9aaabd;

    font-size:14px;

    transition:
        transform .25s ease,
        color .25s ease;

}


.latest-card:hover > i{

    color:var(--primary);

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

}


/* ==========================================================
   20. QUICK SERVICES
========================================================== */

.quick-services{

    position:relative;

    z-index:20;

    background:
        #ffffff;

    border-top:
        1px solid
        #dfe7ef;

    border-bottom:
        1px solid
        #dfe7ef;

}


.quick-services-grid{

    display:grid;

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

}


.service-card{

    position:relative;

    min-height:108px;

    display:flex;

    align-items:center;

    gap:13px;

    padding:
        20px;

    background:
        #ffffff;

    border-right:
        1px solid
        #e1e8ef;

    transition:var(--transition);

}


.service-card:first-child{

    border-left:
        1px solid
        #e1e8ef;

}


.service-card:hover{

    background:
        #f7fafd;

    transform:
        translateY(-3px);

}


.service-card.featured{

    color:var(--white);

    background:
        linear-gradient(
            135deg,
            var(--primary-deep),
            var(--primary)
        );

}


.service-icon{

    width:43px;

    height:43px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    background:
        #edf5ff;

    border-radius:11px;

}


.featured .service-icon{

    color:var(--white);

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

}


.service-card > div:nth-child(2){

    display:flex;

    flex-direction:column;

    min-width:0;

}


.service-card span{

    color:var(--text-muted);

    font-size:9px;

    font-weight:700;

    letter-spacing:.08em;

}


.service-card strong{

    margin-top:4px;

    color:var(--text);

    font-family:
        var(--font-heading);

    font-size:13px;

}


.featured span,
.featured strong{

    color:var(--white);

}


.service-arrow{

    margin-left:auto;

    color:#9ba8b8;

    font-size:13px;

}


.featured .service-arrow{

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

}


/* ==========================================================
   21. STATISTICS
========================================================== */

.stats-section{

    position:relative;

    padding:
        95px 0;

    overflow:hidden;

    color:var(--white);

    background:
        linear-gradient(
            135deg,
            var(--primary-deep),
            var(--primary)
        );

}


.stats-section::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-230px;

    top:-280px;

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

    border-radius:50%;

}


.stats-header{

    position:relative;

    z-index:2;

    text-align:center;

}


.stats-header .section-kicker{

    justify-content:center;

}


.stats-header h2{

    margin-top:14px;

    color:var(--white);

    font-size:
        clamp(
            31px,
            4vw,
            48px
        );

    line-height:1.1;

    letter-spacing:-.045em;

}


.stats-header h2 span{

    color:#8bc5ff;

}


.stats-header > p{

    max-width:620px;

    margin:
        15px auto 0;

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

    font-size:13px;

    line-height:1.8;

}


.stats-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    margin-top:55px;

    border-top:
        1px solid
        rgba(255,255,255,.15);

    border-bottom:
        1px solid
        rgba(255,255,255,.15);

}


.stat-item{

    min-height:180px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:
        30px 20px;

    text-align:center;

    border-right:
        1px solid
        rgba(255,255,255,.12);

}


.stat-item:first-child{

    border-left:
        1px solid
        rgba(255,255,255,.12);

}


.stat-icon{

    width:43px;

    height:43px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:17px;

    color:#8bc5ff;

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

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

    border-radius:11px;

}


.stat-item strong{

    color:var(--white);

    font-family:
        var(--font-heading);

    font-size:26px;

}


.stat-item small{

    margin-top:4px;

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

    font-size:9px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}


/* ==========================================================
   22. NEWS
========================================================== */

.news-section{

    background:
        #f5f8fc;

}


.news-section .section-header-row{

    display:block;

    text-align:center;

}


.news-section .section-kicker{

    justify-content:center;

}


.news-section .section-header-row p{

    margin:
        14px auto 0;

}


.news-section .section-header-row .outline-button{

    margin-top:22px;

}


.news-grid{

    display:grid;

    grid-template-columns:
        1.45fr 1fr 1fr;

    gap:20px;

    margin-top:45px;

}


.news-card{

    overflow:hidden;

    background:
        var(--white);

    border:
        1px solid
        var(--border);

    border-radius:16px;

    box-shadow:
        0 7px 25px
        rgba(20,48,76,.045);

    transition:var(--transition);

}


.news-card:hover{

    transform:
        translateY(-6px);

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

}


/* ----------------------------------------------------------
   NEWS IMAGE
---------------------------------------------------------- */

.news-image{

    position:relative;

    min-height:210px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #dceafe,
            #eef4fa
        );

}


.news-main .news-image{

    min-height:280px;

}


.news-image img{

    width:100%;

    height:100%;

    min-height:inherit;

    display:block;

    object-fit:cover;

    transition:
        transform .6s ease;

}


.news-card:hover
.news-image img{

    transform:
        scale(1.045);

}


.news-placeholder{

    width:100%;

    min-height:inherit;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#91a4bb;

    font-size:40px;

}


.news-category{

    position:absolute;

    top:14px;

    left:14px;

    padding:
        6px 9px;

    color:var(--primary);

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

    border-radius:6px;

    font-size:9px;

    font-weight:800;

    letter-spacing:.08em;

    backdrop-filter:blur(8px);

}


.news-body{

    padding:
        23px;

}


.news-date{

    display:flex;

    align-items:center;

    gap:6px;

    color:var(--text-muted);

    font-size:10px;

    font-weight:600;

}


.news-body h3{

    margin-top:11px;

    color:var(--text);

    font-size:18px;

    line-height:1.4;

    letter-spacing:-.025em;

}


.news-main .news-body h3{

    font-size:22px;

}


.news-body p{

    margin-top:11px;

    color:var(--text-soft);

    font-size:12px;

    line-height:1.75;

}


.news-body > a{

    margin-top:18px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--primary);

    font-size:11px;

    font-weight:800;

}


.news-body > a i{

    transition:
        transform .25s ease;

}


.news-body > a:hover i{

    transform:
        translateX(4px);

}


/* ==========================================================
   23. AGENDA
========================================================== */

.agenda-section{

    background:
        #ffffff;

}


.agenda-section .section-header-row{

    display:block;

    text-align:center;

}


.agenda-section .section-kicker{

    justify-content:center;

}


.agenda-section
.section-header-row
p{

    margin:
        14px auto 0;

}


.agenda-section
.section-header-row
.outline-button{

    margin-top:22px;

}


.agenda-grid{

    display:grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap:90px;

    margin-top:45px;

}


.agenda-intro{

    padding-top:15px;

}


.agenda-intro h2{

    margin-top:13px;

    color:var(--text);

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    line-height:1.1;

    letter-spacing:-.045em;

}


.agenda-intro h2 span{

    color:var(--primary);

}


.agenda-intro p{

    max-width:430px;

    margin-top:17px;

    color:var(--text-soft);

    font-size:13px;

    line-height:1.8;

}


.agenda-list{

    border-top:
        1px solid
        var(--border);

}


.agenda-item{

    display:grid;

    grid-template-columns:
        75px 1fr 25px;

    gap:20px;

    align-items:center;

    padding:
        24px 0;

    border-bottom:
        1px solid
        var(--border);

    transition:
        padding .25s ease,
        background .25s ease;

}


.agenda-item:hover{

    padding-left:9px;

    padding-right:9px;

    background:
        #f8fafc;

}


.agenda-date{

    width:58px;

    height:62px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:
        #f1f6fc;

    border:
        1px solid
        #e1eaf3;

    border-radius:10px;

}


.agenda-date strong{

    color:var(--primary);

    font-size:21px;

    line-height:1;

}


.agenda-date span{

    margin-top:4px;

    color:var(--text-muted);

    font-size:9px;

    font-weight:800;

}


.agenda-item small{

    color:var(--primary);

    font-size:9px;

    font-weight:800;

    letter-spacing:.1em;

}


.agenda-item h3{

    margin-top:5px;

    color:var(--text);

    font-size:17px;

}


.agenda-item p{

    margin-top:5px;

    color:var(--text-soft);

    font-size:11px;

    line-height:1.65;

}


.agenda-item > i{

    color:#9aa8b8;

}


/* ==========================================================
   24. FACILITY
========================================================== */

.facility-section{

    background:
        #f5f8fc;

}


.facility-section .section-header-row{

    display:block;

    text-align:center;

}


.facility-section .section-kicker{

    justify-content:center;

}


.facility-section .section-header-row p{

    margin:
        14px auto 0;

}


.facility-grid{

    display:grid;

    grid-template-columns:
        1.4fr 1fr 1fr;

    grid-auto-rows:
        minmax(220px,auto);

    gap:18px;

    margin-top:45px;

}


.facility-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:28px;

    background:
        var(--white);

    border:
        1px solid
        var(--border);

    border-radius:16px;

    transition:var(--transition);

}


.facility-card::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            #77b8f5
        );

    transform:
        scaleX(0);

    transform-origin:left;

    transition:
        transform .35s ease;

}


.facility-card:hover{

    transform:
        translateY(-6px);

    border-color:
        #c9d8e7;

    box-shadow:
        0 18px 40px
        rgba(18,47,78,.08);

}


.facility-card:hover::before{

    transform:
        scaleX(1);

}


.facility-card.large{

    grid-row:
        span 2;

}


.facility-card i{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    color:var(--primary);

    background:
        #edf5ff;

    border-radius:11px;

    font-size:20px;

}


.facility-card h3{

    color:var(--text);

    font-size:19px;

}


.facility-card p{

    max-width:360px;

    margin-top:7px;

    color:var(--text-soft);

    font-size:11px;

    line-height:1.7;

}


.facility-card > span{

    position:absolute;

    top:22px;

    right:24px;

    color:#dbe4ee;

    font-family:
        var(--font-heading);

    font-size:24px;

    font-weight:800;

}


/* ==========================================================
   25. ADMISSION / PPDB
========================================================== */

.admission-section{

    padding:
        85px 0;

    background:
        #ffffff;

}


.admission-box{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    padding:
        58px 62px;

    color:var(--white);

    background:
        linear-gradient(
            120deg,
            var(--primary-deep),
            var(--primary)
        );

    border-radius:22px;

    box-shadow:
        0 20px 55px
        rgba(3,31,66,.13);

}


.admission-box::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    top:-220px;

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

    border-radius:50%;

}


.admission-box::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:70px;

    bottom:-150px;

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

    border-radius:50%;

}


.admission-box > div{

    position:relative;

    z-index:2;

}


.admission-box > div > span{

    color:#8fc5ff;

    font-size:9px;

    font-weight:800;

    letter-spacing:.14em;

}


.admission-box h2{

    max-width:720px;

    margin-top:12px;

    color:var(--white);

    font-size:
        clamp(
            28px,
            4vw,
            45px
        );

    line-height:1.1;

    letter-spacing:-.045em;

}


.admission-box p{

    max-width:620px;

    margin-top:13px;

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

    font-size:13px;

    line-height:1.8;

}


.admission-button{

    position:relative;

    z-index:2;

    flex-shrink:0;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:
        14px 20px;

    color:var(--primary);

    background:
        var(--white);

    border-radius:9px;

    font-size:10px;

    font-weight:800;

    transition:var(--transition);

}


.admission-button:hover{

    transform:
        translateY(-3px);

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

}


/* ==========================================================
   26. GLOBAL SECTION DECORATION
========================================================== */

.about-section::after,
.principal-section::after,
.latest-section::after,
.agenda-section::after,
.facility-section::after{

    content:"";

    position:absolute;

    top:32px;

    left:50%;

    width:5px;

    height:5px;

    transform:
        translateX(-50%);

    background:
        var(--primary);

    border:
        4px solid
        rgba(47,128,237,.10);

    border-radius:50%;

}


/* ==========================================================
   27. MOBILE / TABLET
========================================================== */

@media (max-width:1100px){

    .about-grid{

        grid-template-columns:
            130px 1fr;

        gap:45px;

    }


    .principal-feature{

        grid-template-columns:
            330px 1fr;

    }


    .principal-content{

        padding:
            45px;

    }


    .agenda-grid{

        gap:50px;

    }

}


@media (max-width:900px){

    .hero-content{

        padding:
            80px 0
            120px;

    }


    .quick-services-grid{

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

    }


    .service-card:nth-child(3){

        border-left:
            1px solid
            #e1e8ef;

    }


    .about-grid{

        grid-template-columns:
            1fr;

        gap:25px;

    }


    .about-label{

        align-items:center;

    }


    .about-label .section-kicker{

        justify-content:center;

    }


    .about-number{

        display:none;

    }


    .about-content{

        max-width:100%;

        text-align:center;

    }


    .about-content >
    .section-kicker{

        justify-content:center;

    }


    .about-content h2{

        text-align:center;

    }


    .about-content h2::after{

        margin-left:auto;

        margin-right:auto;

    }


    .about-content p{

        margin-left:auto;

        margin-right:auto;

    }


    .about-meta{

        text-align:left;

    }


    .principal-feature{

        grid-template-columns:
            1fr;

    }


    .principal-photo{

        min-height:390px;

        max-height:430px;

    }


    .principal-placeholder{

        min-height:390px;

    }


    .principal-content{

        min-height:390px;

    }


    .latest-grid{

        grid-template-columns:
            1fr 1fr;

    }


    .latest-card:last-child{

        grid-column:
            1 / -1;

    }


    .stats-grid{

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

    }


    .stat-item:nth-child(3){

        border-left:
            1px solid
            rgba(255,255,255,.12);

    }


    .news-grid{

        grid-template-columns:
            1fr 1fr;

    }


    .news-main{

        grid-column:
            1 / -1;

    }


    .agenda-grid{

        grid-template-columns:
            1fr;

        gap:40px;

    }


    .agenda-intro{

        text-align:center;

    }


    .agenda-intro p{

        margin-left:auto;

        margin-right:auto;

    }


    .facility-grid{

        grid-template-columns:
            1fr 1fr;

    }


    .facility-card.large{

        grid-row:
            auto;

    }


    .admission-box{

        padding:
            45px;

    }

}


@media (max-width:650px){

    .hero-section{

        min-height:
            720px;

    }


    .hero-container{

        min-height:
            720px;

    }


    .hero-content{

        padding:
            70px 0
            125px;

    }


    .hero-content h1{

        font-size:
            clamp(
                36px,
                11vw,
                54px
            );

    }


    .hero-content p{

        font-size:13px;

    }


    .hero-buttons{

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .hero-btn-primary,
    .hero-btn-secondary{

        width:
            max-content;

    }


    .hero-bottom-inner{

        min-height:72px;

    }


    .hero-location{

        display:none;

    }


    .hero-bottom-inner{

        justify-content:flex-end;

    }


    .about-section,
    .principal-section,
    .latest-section,
    .agenda-section,
    .facility-section,
    .intro-section,
    .news-section{

        padding:
            80px 0;

    }


    .about-section::before,
    .principal-section::before,
    .latest-section::before,
    .agenda-section::before,
    .facility-section::before,
    .intro-section::before,
    .news-section::before,
    .admission-section::before{

        width:
            calc(100% - 30px);

    }


    .about-meta{

        grid-template-columns:
            1fr;

    }


    .about-meta > div,
    .about-meta > div:first-child{

        min-height:70px;

        padding:
            14px 0;

        border-right:0;

        border-bottom:
            1px solid
            var(--border);

    }


    .about-meta > div:last-child{

        border-bottom:0;

    }


    .principal-feature{

        border-radius:
            16px;

    }


    .principal-photo{

        min-height:
            330px;

        max-height:
            330px;

    }


    .principal-placeholder{

        min-height:
            330px;

    }


    .principal-content{

        min-height:
            auto;

        padding:
            35px 28px 40px;

    }


    .principal-content::before{

        right:20px;

        font-size:90px;

    }


    .latest-grid{

        grid-template-columns:
            1fr;

    }


    .latest-card:last-child{

        grid-column:
            auto;

    }


    .latest-card{

        min-height:
            205px;

    }


    .quick-services-grid{

        grid-template-columns:
            1fr;

    }


    .service-card,
    .service-card:first-child,
    .service-card:nth-child(3){

        border-left:
            1px solid
            #e1e8ef;

    }


    .stats-grid{

        grid-template-columns:
            1fr 1fr;

    }


    .stat-item{

        min-height:
            150px;

    }


    .stat-item:nth-child(odd){

        border-left:
            1px solid
            rgba(255,255,255,.12);

    }


    .news-grid{

        grid-template-columns:
            1fr;

    }


    .news-main{

        grid-column:
            auto;

    }


    .news-main .news-image{

        min-height:
            220px;

    }


    .agenda-item{

        grid-template-columns:
            62px 1fr 18px;

        gap:13px;

    }


    .agenda-date{

        width:55px;

        height:59px;

    }


    .facility-grid{

        grid-template-columns:
            1fr;

    }


    .facility-card{

        min-height:
            210px;

    }


    .admission-section{

        padding:
            65px 0;

    }


    .admission-box{

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            38px 28px;

        border-radius:
            17px;

    }


    .admission-button{

        width:100%;

        justify-content:center;

    }


    .section-header-row{

        margin-bottom:
            35px;

    }


    .section-header-row h2{

        font-size:
            32px;

    }

}


@media (max-width:420px){

    .hero-content h1{

        font-size:
            35px;

    }


    .hero-content p{

        font-size:
            12px;

        line-height:
            1.75;

    }


    .hero-btn-primary,
    .hero-btn-secondary{

        width:100%;

    }


    .hero-slider-control button{

        width:36px;

        height:36px;

    }


    .slider-counter{

        min-width:55px;

    }


    .latest-card{

        padding:
            25px;

    }


    .principal-content{

        padding:
            30px 22px 35px;

    }


    .principal-content h3{

        font-size:
            26px;

    }


    .principal-message p{

        font-size:
            13px;

    }


    .stats-grid{

        grid-template-columns:
            1fr;

    }


    .stat-item,
    .stat-item:nth-child(odd){

        min-height:
            135px;

        border-left:
            1px solid
            rgba(255,255,255,.12);

    }

}

/* ==========================================================
   24. FOOTER
   MODERN PEMERINTAH — RINGKAS, RAPAT, RESPONSIVE
========================================================== */

.footer{

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

    background:#041a35;

}


/* ==========================================================
   FOOTER MAIN
========================================================== */

.footer-main{

    padding:48px 0 35px;

}


.footer-grid{

    display:grid;

    grid-template-columns:
        1.45fr .8fr .8fr 1fr;

    gap:38px;

    align-items:start;

}


/* ==========================================================
   FOOTER BRAND
========================================================== */

.footer-brand-top{

    display:flex;

    align-items:center;

    gap:11px;

}


.footer-logo-wrap{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}


.footer-logo{

    width:44px;

    height:44px;

    object-fit:contain;

}


.footer-brand-title{

    color:var(--white);

    font-family:var(--font-heading);

    font-size:13px;

    font-weight:800;

    line-height:1.3;

}


.footer-brand-subtitle{

    margin-top:3px;

    color:#79b7f5;

    font-size:9px;

    font-weight:500;

}


.footer-description{

    max-width:390px;

    margin:15px 0 0;

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

    font-size:11px;

    line-height:1.7;

}


/* ==========================================================
   SOCIAL
========================================================== */

.footer-social-title{

    margin-top:17px;

    margin-bottom:8px;

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

    font-size:10px;

    font-weight:700;

}


.footer-social{

    display:flex;

    align-items:center;

    gap:6px;

}


.footer-social a{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    font-size:13px;

    border-radius:7px;

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

}


.footer-social a:hover{

    color:var(--white);

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

    transform:translateY(-2px);

}


/* ==========================================================
   FOOTER HEADING
========================================================== */

.footer-heading{

    position:relative;

    margin:0 0 14px;

    color:var(--white);

    font-size:11px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.04em;

}


.footer-heading::after{

    content:"";

    display:block;

    width:22px;

    height:2px;

    margin-top:7px;

    background:#4d9bea;

    border-radius:2px;

}


/* ==========================================================
   FOOTER LINKS
========================================================== */

.footer-links{

    display:flex;

    flex-direction:column;

    gap:7px;

    margin:0;

    padding:0;

    list-style:none;

}


.footer-links li{

    margin:0;

    padding:0;

}


.footer-links a{

    display:inline-flex;

    align-items:center;

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

    font-size:10.5px;

    line-height:1.45;

    transition:
        color .2s ease,
        transform .2s ease;

}


.footer-links a:hover{

    color:var(--white);

    transform:translateX(3px);

}


/* ==========================================================
   KONTAK SEKOLAH
========================================================== */

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:9px;

}


.footer-contact-item{

    display:flex;

    align-items:flex-start;

    gap:8px;

    padding:0;

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

    font-size:10.5px;

    line-height:1.5;

}


.footer-contact-item i{

    width:17px;

    flex:0 0 17px;

    margin-top:1px;

    color:#72b6f9;

    font-size:12px;

    text-align:center;

}


.footer-contact-item span{

    min-width:0;

    overflow-wrap:anywhere;

}


/* ==========================================================
   FOOTER BOTTOM
========================================================== */

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

}


.footer-bottom-inner{

    min-height:52px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}


.copyright{

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

    font-size:9.5px;

    line-height:1.5;

}


.footer-bottom-links{

    display:flex;

    align-items:center;

    gap:15px;

}


.footer-bottom-links a{

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

    font-size:9.5px;

    transition:color .2s ease;

}


.footer-bottom-links a:hover{

    color:var(--white);

}


/* ==========================================================
   25. BACK TO TOP
========================================================== */

.back-top{

    position:fixed;

    right:20px;

    bottom:20px;

    z-index:900;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--white);

    background:var(--primary);

    border:0;

    border-radius:8px;

    box-shadow:
        0 7px 20px rgba(7,59,122,.25);

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:var(--transition);

}


.back-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


.back-top:hover{

    background:var(--primary-light);

    transform:translateY(-2px);

}


/* ==========================================================
   26. LOGIN SISTEM — DESKTOP
========================================================== */

.header-login{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-height:40px;

    padding:0 14px;

    color:var(--primary);

    background:transparent;

    border:1px solid rgba(7,59,122,.18);

    border-radius:8px;

    font-size:11px;

    font-weight:700;

    white-space:nowrap;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.header-login i{

    font-size:13px;

}


.header-login:hover{

    color:var(--white);

    background:var(--primary);

    border-color:var(--primary);

    transform:translateY(-1px);

}


/* ==========================================================
   LOGIN SISTEM — MOBILE
========================================================== */

.mobile-login{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-top:10px;

    padding:12px 13px;

    color:var(--white);

    background:var(--primary);

    border-radius:8px;

    font-size:11.5px;

    font-weight:700;

    line-height:1.3;

}


.mobile-login span{

    display:flex;

    align-items:center;

    gap:9px;

    min-width:0;

}


.mobile-login span i{

    flex-shrink:0;

    font-size:14px;

}


.mobile-login > i{

    flex-shrink:0;

    font-size:12px;

}


/* ==========================================================
   27. TABLET
========================================================== */

@media(max-width:1100px){

    .container{

        width:min(
            calc(100% - 36px),
            var(--container)
        );

    }


    /* -----------------------------------------
       DESKTOP NAV DIGANTI TOGGLE
    ----------------------------------------- */

    .desktop-navigation{

        display:none;

    }


    .header-actions{

        margin-left:auto;

    }


    .header-login{

        display:none;

    }


    .header-ppdb{

        display:none;

    }


    .mobile-menu-button{

        display:flex;

    }


    .mobile-navigation{

        display:none;

        width:100%;

        overflow-x:hidden;

        overflow-y:auto;

        max-height:calc(100svh - 76px);

    }


    .mobile-navigation.open{

        display:block;

    }


    .nav-container{

        min-height:76px;

    }


    .brand{

        min-width:0;

        max-width:calc(100% - 60px);

    }


    .brand-text{

        min-width:0;

    }


    .brand-text strong,
    .brand-text span{

        overflow:hidden;

        text-overflow:ellipsis;

        white-space:nowrap;

    }


    /* -----------------------------------------
       FOOTER TABLET
    ----------------------------------------- */

    .footer-grid{

        grid-template-columns:
            1.3fr 1fr 1fr;

        gap:30px;

    }


    .footer-grid > div:first-child{

        grid-column:1/-1;

    }

}


/* ==========================================================
   28. MOBILE
========================================================== */

@media(max-width:768px){

    html,
    body{

        max-width:100%;

        overflow-x:hidden;

    }


    .container{

        width:calc(100% - 28px);

        max-width:100%;

    }


    /* -----------------------------------------
       HEADER
    ----------------------------------------- */

    .topbar{

        display:none;

    }


    .site-header{

        width:100%;

    }


    .nav-container{

        min-height:64px;

        width:calc(100% - 24px);

        gap:8px;

    }


    .brand{

        gap:8px;

        max-width:calc(100% - 52px);

    }


    .brand-logo-wrap{

        width:40px;

        height:40px;

        border:0;

        background:transparent;

        border-radius:0;

    }


    .brand-logo{

        width:36px;

        height:36px;

    }


    .brand-text strong{

        font-size:10.5px;

        letter-spacing:-.01em;

    }


    .brand-text span{

        margin-top:2px;

        max-width:170px;

        font-size:8px;

    }


    .mobile-menu-button{

        width:40px;

        height:40px;

        flex-shrink:0;

        border-radius:8px;

    }


    /* -----------------------------------------
       MOBILE NAV
    ----------------------------------------- */

    .mobile-navigation{

        max-height:calc(100svh - 64px);

        overflow-y:auto;

        overflow-x:hidden;

        -webkit-overflow-scrolling:touch;

    }


    .mobile-nav-inner{

        width:calc(100% - 24px);

        max-width:none;

        padding:6px 0 14px;

    }


    .mobile-menu-brand{

        display:none;

    }


    .mobile-government-info{

        display:none;

    }


    .mobile-section-title{

        margin:13px 7px 3px;

        padding:0;

        color:#8a94a6;

        font-size:8px;

        font-weight:800;

        letter-spacing:.08em;

    }


    .mobile-nav-link{

        width:100%;

        min-height:43px;

        padding:10px 7px;

        border-bottom:1px solid rgba(15,23,42,.06);

        font-size:11px;

    }


    .mobile-nav-link span{

        min-width:0;

        gap:9px;

    }


    .mobile-nav-link span i{

        width:20px;

        font-size:14px;

    }


    .mobile-nav-link > i{

        font-size:10px;

    }


    .mobile-ppdb{

        width:100%;

        margin-top:10px;

        padding:11px 12px;

        border-radius:8px;

        font-size:11px;

    }


    .mobile-login{

        width:100%;

        margin-top:7px;

        padding:11px 12px;

        border-radius:8px;

        font-size:11px;

    }


    /* -----------------------------------------
       FOOTER MOBILE
    ----------------------------------------- */

    .footer-main{

        padding:38px 0 25px;

    }


    .footer-grid{

        grid-template-columns:1fr 1fr;

        gap:25px 20px;

    }


    .footer-grid > div:first-child{

        grid-column:1/-1;

    }


    .footer-brand-top{

        gap:9px;

    }


    .footer-logo-wrap{

        width:40px;

        height:40px;

    }


    .footer-logo{

        width:38px;

        height:38px;

    }


    .footer-brand-title{

        font-size:11px;

    }


    .footer-brand-subtitle{

        font-size:8px;

    }


    .footer-description{

        max-width:100%;

        margin-top:11px;

        font-size:10px;

        line-height:1.65;

    }


    .footer-social-title{

        margin-top:12px;

        margin-bottom:6px;

        font-size:9px;

    }


    .footer-social a{

        width:27px;

        height:27px;

        font-size:12px;

    }


    .footer-heading{

        margin-bottom:11px;

        font-size:9.5px;

    }


    .footer-heading::after{

        width:18px;

        height:1px;

        margin-top:5px;

    }


    .footer-links{

        gap:6px;

    }


    .footer-links a{

        font-size:9.5px;

    }


    .footer-contact{

        gap:8px;

    }


    .footer-contact-item{

        gap:6px;

        font-size:9.5px;

    }


    .footer-contact-item i{

        width:15px;

        flex-basis:15px;

        font-size:11px;

    }


    .footer-bottom-inner{

        min-height:48px;

        padding:11px 0;

        flex-direction:column;

        align-items:flex-start;

        gap:7px;

    }


    .copyright{

        font-size:8.5px;

    }


    .footer-bottom-links{

        gap:12px;

    }


    .footer-bottom-links a{

        font-size:8.5px;

    }


    .back-top{

        right:14px;

        bottom:14px;

        width:36px;

        height:36px;

    }

}


/* ==========================================================
   29. MOBILE SMALL
========================================================== */

@media(max-width:480px){

    .container{

        width:calc(100% - 22px);

    }


    .nav-container{

        width:calc(100% - 20px);

        min-height:62px;

    }


    .brand-logo-wrap{

        width:37px;

        height:37px;

    }


    .brand-logo{

        width:33px;

        height:33px;

    }


    .brand-text strong{

        font-size:9.5px;

    }


    .brand-text span{

        max-width:145px;

        font-size:7.5px;

    }


    .mobile-menu-button{

        width:38px;

        height:38px;

    }


    .mobile-nav-inner{

        width:calc(100% - 18px);

    }


    .mobile-nav-link{

        min-height:41px;

        padding:9px 5px;

        font-size:10.5px;

    }


    .mobile-section-title{

        margin:11px 5px 2px;

        font-size:7.5px;

    }


    .mobile-ppdb,
    .mobile-login{

        padding:10px 11px;

        font-size:10.5px;

    }


    /* -----------------------------------------
       FOOTER SMALL
    ----------------------------------------- */

    .footer-main{

        padding:32px 0 22px;

    }


    .footer-grid{

        grid-template-columns:1fr;

        gap:21px;

    }


    .footer-grid > div{

        grid-column:auto !important;

    }


    .footer-brand{

        padding-bottom:3px;

    }


    .footer-description{

        font-size:9.5px;

    }


    .footer-links a,
    .footer-contact-item{

        font-size:9.5px;

    }


    .footer-bottom-inner{

        gap:6px;

    }

}


/* ==========================================================
   30. REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

    *{

        scroll-behavior:auto !important;

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

}
/* ==========================================================
   31. PREMIUM GOVERNMENT FOOTER CONTACT
========================================================== */

/*
   Kontak dibuat clean:
   tidak menggunakan card,
   tidak menggunakan border besar,
   hanya ikon kecil + informasi.
*/

.footer-contact{

    gap:10px;

}


.footer-contact-item{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:10px;

    padding:2px 0;

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

    font-size:10.5px;

    line-height:1.6;

    transition:
        color .2s ease,
        transform .2s ease;

}


.footer-contact-item:hover{

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

    transform:translateX(2px);

}


/* ==========================================================
   ICON KONTAK
========================================================== */

.footer-contact-item i{

    width:22px;

    height:22px;

    flex:0 0 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:0;

    color:#78b7f2;

    background:rgba(120,183,242,.08);

    border-radius:6px;

    font-size:10px;

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

}


.footer-contact-item:hover i{

    color:#ffffff;

    background:rgba(120,183,242,.18);

}


/* ==========================================================
   TEKS KONTAK
========================================================== */

.footer-contact-item span{

    display:block;

    padding-top:1px;

    min-width:0;

    color:inherit;

    overflow-wrap:anywhere;

}


/* ==========================================================
   INFORMASI KODE POS
========================================================== */

.footer-contact-item:nth-child(2) span{

    letter-spacing:.01em;

}


/* ==========================================================
   EMAIL
========================================================== */

.footer-contact-item:nth-child(3) span{

    word-break:break-word;

}


/* ==========================================================
   AKREDITASI
========================================================== */

.footer-contact-item:last-child i{

    color:#f1c86a;

    background:rgba(241,200,106,.08);

}


.footer-contact-item:last-child:hover i{

    color:#ffffff;

    background:rgba(241,200,106,.18);

}


/* ==========================================================
   32. PREMIUM LOGIN SYSTEM
========================================================== */

.header-login{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    min-height:40px;

    padding:0 15px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    color:#0b3d78;

    background:#ffffff;

    border:1px solid rgba(11,61,120,.18);

    border-radius:7px;

    font-size:10.5px;

    font-weight:800;

    letter-spacing:.01em;

    white-space:nowrap;

    box-shadow:
        0 2px 8px rgba(15,23,42,.04);

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

}


.header-login::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    background:
        linear-gradient(
            135deg,
            #0b3d78,
            #155fa8
        );

    opacity:0;

    transition:opacity .25s ease;

}


.header-login i{

    font-size:13px;

    transition:
        transform .25s ease;

}


.header-login:hover{

    color:#ffffff;

    border-color:#0b3d78;

    box-shadow:
        0 6px 18px rgba(11,61,120,.20);

    transform:translateY(-1px);

}


.header-login:hover::before{

    opacity:1;

}


.header-login:hover i{

    transform:translateX(2px);

}


/* ==========================================================
   33. MOBILE LOGIN SYSTEM PREMIUM
========================================================== */

.mobile-login{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    min-height:44px;

    margin-top:9px;

    padding:0 13px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #0b3d78,
            #155fa8
        );

    border:0;

    border-radius:8px;

    font-size:10.5px;

    font-weight:800;

    letter-spacing:.01em;

    box-shadow:
        0 5px 16px rgba(7,59,122,.20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.mobile-login::after{

    content:"";

    position:absolute;

    width:100px;

    height:100px;

    right:-45px;

    top:-60px;

    border-radius:50%;

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

    pointer-events:none;

}


.mobile-login span{

    display:flex;

    align-items:center;

    gap:9px;

    min-width:0;

}


.mobile-login span i{

    width:24px;

    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    color:#ffffff;

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

    border-radius:6px;

    font-size:12px;

}


.mobile-login > i{

    flex-shrink:0;

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

    font-size:11px;

}


.mobile-login:hover{

    color:#ffffff;

    transform:translateY(-1px);

    box-shadow:
        0 8px 20px rgba(7,59,122,.27);

}


/* ==========================================================
   34. FOOTER GOVERNMENT LABEL
========================================================== */

.footer-column .footer-heading{

    letter-spacing:.06em;

}


.footer-column .footer-heading::after{

    background:
        linear-gradient(
            90deg,
            #4d9bea,
            rgba(77,155,234,0)
        );

}


/* ==========================================================
   35. PREMIUM FOOTER BOTTOM
========================================================== */

.footer-bottom{

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

}


.footer-bottom-inner{

    position:relative;

}


.copyright{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:4px;

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

    font-size:9px;

}


.footer-bottom-links a{

    position:relative;

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

    font-size:9px;

}


.footer-bottom-links a::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:-3px;

    height:1px;

    background:#5ba4e8;

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .2s ease;

}


.footer-bottom-links a:hover::after{

    transform:scaleX(1);

}


/* ==========================================================
   36. MOBILE CONTACT — LEBIH RAPAT
========================================================== */

@media(max-width:768px){

    .footer-contact{

        gap:8px;

    }


    .footer-contact-item{

        gap:8px;

        padding:1px 0;

        font-size:9.5px;

        line-height:1.5;

    }


    .footer-contact-item i{

        width:20px;

        height:20px;

        flex-basis:20px;

        border-radius:5px;

        font-size:9px;

    }


    .mobile-login{

        min-height:43px;

        margin-top:8px;

        border-radius:8px;

    }

}


/* ==========================================================
   37. MOBILE SMALL
========================================================== */

@media(max-width:480px){

    .footer-contact{

        gap:7px;

    }


    .footer-contact-item{

        gap:7px;

        font-size:9px;

    }


    .footer-contact-item i{

        width:19px;

        height:19px;

        flex-basis:19px;

        font-size:8.5px;

    }


    .mobile-login{

        min-height:42px;

        padding:0 11px;

        font-size:10px;

    }


    .mobile-login span{

        gap:8px;

    }


    .mobile-login span i{

        width:22px;

        height:22px;

        font-size:11px;

    }

}


/* ==========================================================
   38. DESKTOP LARGE — TETAP KOMPAK
========================================================== */

@media(min-width:1200px){

    .footer-grid{

        gap:42px;

    }


    .footer-main{

        padding-top:50px;

        padding-bottom:36px;

    }


    .footer-contact-item{

        font-size:10.5px;

    }

}


/* ==========================================================
   39. GOVERNMENT CLEAN MODE
========================================================== */

.footer a{

    text-decoration:none;

}


.footer img{

    display:block;

}


.footer strong{

    font-weight:800;

}


/* ==========================================================
   40. ACCESSIBILITY
========================================================== */

.header-login:focus-visible,
.mobile-login:focus-visible,
.footer a:focus-visible{

    outline:2px solid #78b7f2;

    outline-offset:3px;

}


/* ==========================================================
   41. REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

    .footer-contact-item,
    .footer-social a,
    .header-login,
    .mobile-login{

        transition:none;

    }

}
/* ==========================================================
   FOOTER MODERN — PORTAL RESMI PEMERINTAH
   SMP NEGERI 2 MOYUDAN
========================================================== */


/* ==========================================================
   FOOTER VARIABLES
========================================================== */

:root{

    --footer-bg:#061a33;
    --footer-bg-2:#08284d;

    --footer-primary:#0b4f91;
    --footer-primary-2:#1267b5;

    --footer-text:#d8e4f1;
    --footer-muted:#8fa6bd;

    --footer-border:rgba(255,255,255,.10);

    --footer-white:#ffffff;

}


/* ==========================================================
   FOOTER MAIN
========================================================== */

.footer{

    position:relative;

    background:
        linear-gradient(
            135deg,
            var(--footer-bg) 0%,
            var(--footer-bg-2) 55%,
            #0a315b 100%
        );

    color:var(--footer-text);

    overflow:hidden;

}


/* garis aksen bagian atas */

.footer::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
        linear-gradient(
            90deg,
            #073b7a,
            #1267b5,
            #4f9de8,
            #1267b5,
            #073b7a
        );

}


/* dekorasi */

.footer::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-180px;
    bottom:-220px;

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

    border-radius:50%;

    pointer-events:none;

}


/* ==========================================================
   FOOTER MAIN AREA
========================================================== */

.footer-main{

    position:relative;

    padding:75px 0 65px;

    z-index:1;

}


/* ==========================================================
   FOOTER GRID
========================================================== */

.footer-grid{

    display:grid;

    grid-template-columns:
        1.8fr
        1fr
        1fr
        1.35fr;

    gap:55px;

    align-items:start;

}


/* ==========================================================
   FOOTER BRAND
========================================================== */

.footer-brand{

    max-width:430px;

}


/* ==========================================================
   BRAND TOP
========================================================== */

.footer-brand-top{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:22px;

}


/* ==========================================================
   FOOTER LOGO WRAPPER
========================================================== */

.footer-logo-wrap{

    width:62px;
    height:62px;

    display:flex;

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

    flex-shrink:0;

    background:#ffffff;

    border-radius:12px;

    padding:8px;

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

}


.footer-logo{

    width:100%;
    height:100%;

    object-fit:contain;

}


/* ==========================================================
   BRAND TITLE
========================================================== */

.footer-brand-title{

    color:#ffffff;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size:17px;

    font-weight:800;

    line-height:1.35;

    letter-spacing:-.2px;

}


.footer-brand-subtitle{

    margin-top:4px;

    color:#8faac4;

    font-size:12px;

    font-weight:500;

    line-height:1.5;

}


/* ==========================================================
   DESCRIPTION
========================================================== */

.footer-description{

    margin:0;

    max-width:420px;

    color:#a9bfd3;

    font-size:13px;

    line-height:1.85;

}


/* ==========================================================
   SOCIAL TITLE
========================================================== */

.footer-social-title{

    margin-top:27px;

    margin-bottom:12px;

    color:#ffffff;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1.2px;

}


/* ==========================================================
   SOCIAL MEDIA
========================================================== */

.footer-social{

    display:flex;

    align-items:center;

    gap:9px;

}


.footer-social a{

    width:38px;
    height:38px;

    display:flex;

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

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

    border-radius:9px;

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

    color:#c8d8e8;

    text-decoration:none;

    font-size:15px;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease;

}


.footer-social a:hover{

    transform:translateY(-3px);

    background:#1267b5;

    border-color:#1267b5;

    color:#ffffff;

}


/* ==========================================================
   FOOTER COLUMN
========================================================== */

.footer-column{

    min-width:0;

}


/* ==========================================================
   FOOTER HEADING
========================================================== */

.footer-heading{

    position:relative;

    margin:0 0 21px;

    padding-bottom:12px;

    color:#ffffff;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size:14px;

    font-weight:800;

}


.footer-heading::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:28px;
    height:2px;

    background:#2d83d1;

}


/* ==========================================================
   FOOTER LINKS
========================================================== */

.footer-links{

    margin:0;
    padding:0;

    list-style:none;

}


.footer-links li{

    margin:0 0 11px;

}


.footer-links a{

    display:inline-flex;

    align-items:center;

    color:#9fb5ca;

    text-decoration:none;

    font-size:13px;

    line-height:1.5;

    transition:
        color .2s ease,
        transform .2s ease;

}


.footer-links a::before{

    content:"";

    width:0;

    height:1px;

    margin-right:0;

    background:#4f9de8;

    transition:
        width .2s ease,
        margin .2s ease;

}


.footer-links a:hover{

    color:#ffffff;

    transform:translateX(3px);

}


.footer-links a:hover::before{

    width:12px;

    margin-right:7px;

}


/* ==========================================================
   FOOTER CONTACT
========================================================== */

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:14px;

}


.footer-contact-item{

    display:flex;

    align-items:flex-start;

    gap:11px;

    color:#9fb5ca;

    font-size:12.5px;

    line-height:1.65;

}


.footer-contact-item i{

    flex-shrink:0;

    width:30px;
    height:30px;

    display:flex;

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

    margin-top:1px;

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

    border-radius:7px;

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

    color:#6eafe9;

    font-size:13px;

}


/* ==========================================================
   FOOTER BOTTOM
========================================================== */

.footer-bottom{

    position:relative;

    border-top:1px solid var(--footer-border);

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

    z-index:2;

}


/* ==========================================================
   FOOTER BOTTOM INNER
========================================================== */

.footer-bottom-inner{

    min-height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

}


/* ==========================================================
   COPYRIGHT
========================================================== */

.copyright{

    color:#829bb3;

    font-size:11.5px;

    line-height:1.6;

}


/* ==========================================================
   FOOTER BOTTOM LINKS
========================================================== */

.footer-bottom-links{

    display:flex;

    align-items:center;

    gap:24px;

}


.footer-bottom-links a{

    color:#91a9c0;

    font-size:11.5px;

    text-decoration:none;

    transition:color .2s ease;

}


.footer-bottom-links a:hover{

    color:#ffffff;

}


/* ==========================================================
   PEMERINTAH / INSTANSI BAR
========================================================== */

.footer-government{

    position:relative;

    border-top:1px solid rgba(255,255,255,.08);

    background:#041326;

    z-index:3;

}


/* ==========================================================
   GOVERNMENT INNER
========================================================== */

.footer-government-inner{

    min-height:76px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


/* ==========================================================
   GOVERNMENT IDENTITY
========================================================== */

.footer-government-brand{

    display:flex;

    align-items:center;

    gap:13px;

}


/* ==========================================================
   GOVERNMENT ICON
========================================================== */

.footer-government-icon{

    width:40px;
    height:40px;

    display:flex;

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

    flex-shrink:0;

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

    border-radius:8px;

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

    color:#8ec3f1;

    font-size:18px;

}


/* ==========================================================
   GOVERNMENT TEXT
========================================================== */

.footer-government-text{

    display:flex;

    flex-direction:column;

    gap:3px;

}


.footer-government-text strong{

    color:#dce9f5;

    font-size:12px;

    font-weight:700;

}


.footer-government-text span{

    color:#728ca5;

    font-size:10.5px;

    line-height:1.5;

}


/* ==========================================================
   GOVERNMENT LINKS / ICON
========================================================== */

.footer-government-links{

    display:flex;

    align-items:center;

    gap:8px;

}


.footer-government-links a{

    width:34px;
    height:34px;

    display:flex;

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

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

    border-radius:7px;

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

    color:#819ab2;

    text-decoration:none;

    font-size:13px;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.footer-government-links a:hover{

    background:#0b4f91;

    border-color:#0b4f91;

    color:#ffffff;

    transform:translateY(-2px);

}


/* ==========================================================
   BACK TO TOP
========================================================== */

.back-top{

    position:fixed;

    right:25px;
    bottom:25px;

    width:44px;
    height:44px;

    display:flex;

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

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

    border-radius:10px;

    background:#0b4f91;

    color:#ffffff;

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

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:
        translateY(12px);

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

    z-index:999;

}


.back-top.show{

    opacity:1;

    visibility:visible;

    transform:
        translateY(0);

}


.back-top:hover{

    background:#1267b5;

}


.back-top i{

    font-size:16px;

}


/* ==========================================================
   FOOTER RESPONSIVE — TABLET
========================================================== */

@media (max-width:1100px){

    .footer-grid{

        grid-template-columns:
            1.5fr
            1fr
            1fr;

        gap:40px;

    }


    .footer-brand{

        grid-column:
            1 / -1;

        max-width:650px;

    }

}


/* ==========================================================
   FOOTER RESPONSIVE — TABLET KECIL
========================================================== */

@media (max-width:768px){

    .footer-main{

        padding:
            55px 0 45px;

    }


    .footer-grid{

        grid-template-columns:
            1fr 1fr;

        gap:38px 30px;

    }


    .footer-brand{

        grid-column:
            1 / -1;

    }


    .footer-bottom-inner{

        min-height:auto;

        padding:
            20px 0;

        flex-direction:column;

        align-items:flex-start;

        gap:14px;

    }


    .footer-government-inner{

        min-height:auto;

        padding:
            18px 0;

        flex-direction:column;

        align-items:flex-start;

        gap:16px;

    }


    .footer-government-links{

        width:100%;

    }

}


/* ==========================================================
   FOOTER RESPONSIVE — MOBILE
========================================================== */

@media (max-width:520px){

    .footer-main{

        padding:
            48px 0 40px;

    }


    .footer-grid{

        grid-template-columns:1fr;

        gap:34px;

    }


    .footer-brand{

        grid-column:auto;

    }


    .footer-brand-top{

        gap:13px;

    }


    .footer-logo-wrap{

        width:54px;
        height:54px;

        padding:7px;

        border-radius:10px;

    }


    .footer-brand-title{

        font-size:15px;

    }


    .footer-brand-subtitle{

        font-size:11px;

    }


    .footer-description{

        font-size:12px;

        line-height:1.8;

    }


    .footer-heading{

        margin-bottom:17px;

    }


    .footer-contact{

        gap:12px;

    }


    .footer-bottom-links{

        flex-wrap:wrap;

        gap:10px 18px;

    }


    .footer-government-brand{

        align-items:flex-start;

    }


    .footer-government-icon{

        width:36px;
        height:36px;

        font-size:16px;

    }


    .footer-government-text strong{

        font-size:11px;

    }


    .footer-government-text span{

        font-size:9.5px;

    }


    .footer-government-links{

        gap:6px;

    }


    .footer-government-links a{

        width:32px;
        height:32px;

    }


    .back-top{

        right:16px;

        bottom:16px;

        width:40px;
        height:40px;

        border-radius:9px;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .footer *,
    .footer *::before,
    .footer *::after{

        transition:none !important;

        animation:none !important;

    }

}
/* ==========================================================
   SMP NEGERI 2 MOYUDAN
   MODERN GOVERNMENT WEBSITE SYSTEM
   MAIN STYLE
========================================================== */


/* ==========================================================
   01. ROOT / VARIABLES
========================================================== */

:root{

    --gov-primary:#073b7a;
    --gov-primary-dark:#052b5c;
    --gov-primary-light:#0d5bb5;
    --gov-accent:#f0b323;

    --gov-white:#ffffff;
    --gov-bg:#f5f7fa;
    --gov-bg-soft:#f8fafc;

    --gov-text:#172033;
    --gov-text-soft:#5f6b7a;
    --gov-muted:#7b8794;

    --gov-border:#e3e8ef;
    --gov-border-dark:#d4dbe5;

    --gov-shadow:0 8px 25px rgba(15,35,65,.07);
    --gov-shadow-hover:0 14px 35px rgba(15,35,65,.12);

    --container-width:1240px;

    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:14px;

    --transition:.25s ease;

}


/* ==========================================================
   02. RESET
========================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    padding:0;

    font-family:'Inter',sans-serif;

    color:var(--gov-text);

    background:var(--gov-white);

    line-height:1.65;

    font-size:15px;

    overflow-x:hidden;

}

body.menu-open{

    overflow:hidden;

}

a{

    color:inherit;

    text-decoration:none;

}

button,
input,
textarea,
select{

    font:inherit;

}

img{

    max-width:100%;

    display:block;

}

.container{

    width:min(
        calc(100% - 40px),
        var(--container-width)
    );

    margin-left:auto;

    margin-right:auto;

}


/* ==========================================================
   03. PAGE LOADER
========================================================== */

.page-loader{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    transition:
        opacity .35s ease,
        visibility .35s ease;

}

.page-loader.hide{

    opacity:0;

    visibility:hidden;

}

.loader-inner{

    width:110px;

    text-align:center;

}

.loader-inner img{

    width:60px;

    height:60px;

    object-fit:contain;

    margin:0 auto 16px;

}

.loader-line{

    width:100%;

    height:3px;

    overflow:hidden;

    background:#e8edf3;

    position:relative;

}

.loader-line::after{

    content:"";

    position:absolute;

    top:0;

    left:-40%;

    width:40%;

    height:100%;

    background:var(--gov-primary);

    animation:loaderMove 1.1s infinite ease-in-out;

}

@keyframes loaderMove{

    0%{
        left:-40%;
    }

    100%{
        left:100%;
    }

}


/* ==========================================================
   04. TOP BAR
========================================================== */

.topbar{

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

    color:#dce7f4;

    font-size:12px;

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

}

.topbar-inner{

    min-height:38px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}

.topbar-left,
.topbar-right{

    display:flex;

    align-items:center;

    gap:10px;

}

.topbar i{

    color:#a9c6e8;

    margin-right:5px;

}

.topbar-right{

    gap:18px;

}

.topbar-right a{

    transition:var(--transition);

}

.topbar-right a:hover{

    color:#ffffff;

}

.topbar-divider{

    width:1px;

    height:14px;

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

}


/* ==========================================================
   05. MAIN HEADER
========================================================== */

.site-header{

    position:sticky;

    top:0;

    z-index:9000;

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

    border-bottom:1px solid var(--gov-border);

    transition:
        box-shadow .25s ease,
        background .25s ease;

}

.site-header.scrolled{

    box-shadow:0 5px 20px rgba(12,35,65,.08);

}

.nav-container{

    min-height:78px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

}


/* ==========================================================
   06. BRAND
========================================================== */

.brand{

    display:flex;

    align-items:center;

    gap:12px;

    min-width:max-content;

}

.brand-logo-wrap{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.brand-logo{

    width:44px;

    height:44px;

    object-fit:contain;

}

.brand-text{

    display:flex;

    flex-direction:column;

    line-height:1.25;

}

.brand-text strong{

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:16px;

    font-weight:800;

    color:var(--gov-primary);

    letter-spacing:-.2px;

}

.brand-text span{

    margin-top:3px;

    font-size:10px;

    font-weight:600;

    color:var(--gov-muted);

    text-transform:uppercase;

    letter-spacing:.35px;

}


/* ==========================================================
   07. DESKTOP NAVIGATION
========================================================== */

.desktop-navigation{

    margin-left:auto;

}

.desktop-navigation ul{

    display:flex;

    align-items:center;

    gap:3px;

    list-style:none;

    margin:0;

    padding:0;

}

.desktop-navigation li{

    position:relative;

}

.nav-link{

    min-height:78px;

    padding:0 13px;

    display:flex;

    align-items:center;

    gap:6px;

    position:relative;

    font-size:13px;

    font-weight:600;

    color:#465365;

    transition:var(--transition);

}

.nav-link i{

    font-size:10px;

    transition:transform .2s ease;

}

.nav-link:hover{

    color:var(--gov-primary);

}

.nav-link.active{

    color:var(--gov-primary);

}

.nav-link.active::after{

    content:"";

    position:absolute;

    left:13px;

    right:13px;

    bottom:0;

    height:3px;

    background:var(--gov-primary);

}


/* ==========================================================
   08. DROPDOWN
========================================================== */

.dropdown-menu{

    position:absolute;

    top:calc(100% + 1px);

    left:0;

    width:235px;

    padding:7px;

    background:#ffffff;

    border:1px solid var(--gov-border);

    border-radius:0 0 var(--radius-md) var(--radius-md);

    box-shadow:var(--gov-shadow-hover);

    opacity:0;

    visibility:hidden;

    transform:translateY(8px);

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

}

.has-dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.has-dropdown:hover .nav-link i{

    transform:rotate(180deg);

}

.dropdown-menu a{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 12px;

    border-radius:6px;

    color:#4a5665;

    font-size:13px;

    font-weight:500;

    transition:var(--transition);

}

.dropdown-menu a i{

    width:18px;

    color:var(--gov-primary);

}

.dropdown-menu a:hover{

    background:#f2f6fb;

    color:var(--gov-primary);

}


/* ==========================================================
   09. HEADER ACTION
========================================================== */

.header-actions{

    display:flex;

    align-items:center;

    gap:12px;

}

.header-ppdb{

    min-height:40px;

    padding:0 15px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border-radius:6px;

    background:var(--gov-primary);

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    transition:var(--transition);

}

.header-ppdb:hover{

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

    transform:translateY(-1px);

}

.header-ppdb i{

    font-size:12px;

}


/* ==========================================================
   10. MOBILE BUTTON
========================================================== */

.mobile-menu-button{

    width:42px;

    height:40px;

    padding:8px;

    display:none;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    border:1px solid var(--gov-border);

    background:#ffffff;

    border-radius:6px;

    cursor:pointer;

}

.mobile-menu-button span{

    width:20px;

    height:2px;

    background:var(--gov-primary);

    transition:.25s ease;

}

.site-header:has(
    .mobile-menu-button[aria-expanded="true"]
)
.mobile-menu-button span:nth-child(1){

    transform:translateY(7px) rotate(45deg);

}

.site-header:has(
    .mobile-menu-button[aria-expanded="true"]
)
.mobile-menu-button span:nth-child(2){

    opacity:0;

}

.site-header:has(
    .mobile-menu-button[aria-expanded="true"]
)
.mobile-menu-button span:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);

}


/* ==========================================================
   11. MOBILE NAVIGATION
========================================================== */

.mobile-navigation{

    display:none;

    background:#ffffff;

    border-top:1px solid var(--gov-border);

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

    overflow-y:auto;

}

.mobile-nav-inner{

    padding:10px 20px 25px;

}

.mobile-nav-link{

    min-height:52px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-bottom:1px solid #edf0f4;

    color:#354255;

    font-size:14px;

    font-weight:600;

}

.mobile-nav-link span{

    display:flex;

    align-items:center;

    gap:12px;

}

.mobile-nav-link span i{

    width:22px;

    color:var(--gov-primary);

}

.mobile-nav-link > i{

    color:#9aa5b1;

}

.mobile-ppdb{

    margin-top:15px;

    min-height:50px;

    padding:0 15px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:var(--gov-primary);

    border-radius:6px;

    color:#ffffff;

    font-size:13px;

    font-weight:700;

}


/* ==========================================================
   12. HERO
========================================================== */

.hero-section{

    position:relative;

    background:#0a3260;

}

.hero-slider{

    position:relative;

    height:570px;

    overflow:hidden;

}

.hero-slide{

    position:absolute;

    inset:0;

    background-position:center;

    background-size:cover;

    background-repeat:no-repeat;

    opacity:0;

    visibility:hidden;

    transform:scale(1.02);

    transition:
        opacity .65s ease,
        visibility .65s ease,
        transform 1.1s ease;

}

.hero-slide.active{

    opacity:1;

    visibility:visible;

    transform:scale(1);

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,28,60,.90) 0%,
            rgba(4,42,82,.70) 42%,
            rgba(4,42,82,.22) 100%
        );

}

.hero-container{

    height:100%;

    display:flex;

    align-items:center;

}

.hero-content{

    position:relative;

    z-index:2;

    width:min(650px,100%);

    color:#ffffff;

    padding-bottom:35px;

}

.hero-label{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1.5px;

    color:#d9e8f7;

}

.hero-label-line{

    width:35px;

    height:2px;

    background:var(--gov-accent);

}

.hero-content h1{

    margin:0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:clamp(34px,4.3vw,58px);

    line-height:1.08;

    letter-spacing:-1.7px;

    font-weight:800;

}

.hero-content h1 span{

    display:block;

    color:#bcd5ef;

}

.hero-content p{

    max-width:590px;

    margin:20px 0 0;

    color:#e3edf8;

    font-size:15px;

    line-height:1.75;

}

.hero-buttons{

    margin-top:28px;

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.hero-btn-primary,
.hero-btn-secondary{

    min-height:44px;

    padding:0 17px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:6px;

    font-size:12px;

    font-weight:700;

    transition:var(--transition);

}

.hero-btn-primary{

    background:#ffffff;

    color:var(--gov-primary);

}

.hero-btn-primary:hover{

    background:#edf4fb;

    transform:translateY(-1px);

}

.hero-btn-secondary{

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

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

    color:#ffffff;

}

.hero-btn-secondary:hover{

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

}


/* ==========================================================
   13. HERO BOTTOM
========================================================== */

.hero-bottom{

    position:absolute;

    bottom:0;

    left:0;

    right:0;

    z-index:5;

    background:rgba(3,31,64,.88);

    border-top:1px solid rgba(255,255,255,.13);

}

.hero-bottom-inner{

    min-height:78px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.hero-location{

    display:flex;

    align-items:center;

    gap:12px;

    color:#ffffff;

}

.hero-location-icon{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:6px;

    color:#ffffff;

}

.hero-location small{

    display:block;

    color:#9fb6d0;

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:.8px;

}

.hero-location strong{

    display:block;

    margin-top:2px;

    font-size:12px;

    font-weight:600;

}

.hero-slider-control{

    display:flex;

    align-items:center;

    gap:10px;

}

.hero-slider-control button{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:6px;

    background:transparent;

    color:#ffffff;

    cursor:pointer;

    transition:var(--transition);

}

.hero-slider-control button:hover{

    background:#ffffff;

    color:var(--gov-primary);

}

.slider-counter{

    min-width:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:5px;

    color:#b7c9dc;

    font-size:12px;

}

.slider-counter strong{

    color:#ffffff;

    font-size:17px;

}
/* ==========================================================
   14. PROFIL SEKOLAH
   MODERN PREMIUM GOVERNMENT STYLE
========================================================== */

.about-section{

    position:relative;

    padding:88px 0;

    background:#ffffff;

    overflow:hidden;

}


/* ==========================================================
   ABOUT LAYOUT
========================================================== */

.about-layout{

    display:grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);

    align-items:center;

    gap:70px;

}


/* ==========================================================
   ABOUT CONTENT
========================================================== */

.about-content{

    width:100%;

    max-width:600px;

    margin:0 auto;

    text-align:center;

}


/* ==========================================================
   SECTION KICKER
   PROFIL SEKOLAH
========================================================== */

.about-content .section-kicker{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    width:max-content;

    margin:0 auto 17px;

    color:var(--gov-primary);

    font-size:10px;

    font-weight:800;

    letter-spacing:1.6px;

    line-height:1;

    text-transform:uppercase;

}


/* ==========================================================
   GARIS KIRI
========================================================== */

.about-content .section-kicker::before{

    content:"";

    width:27px;

    height:2px;

    flex:0 0 27px;

    background:var(--gov-primary);

}


/* ==========================================================
   GARIS KANAN
========================================================== */

.about-content .section-kicker::after{

    content:"";

    width:27px;

    height:2px;

    flex:0 0 27px;

    background:var(--gov-primary);

}


/* ==========================================================
   TITLE
   SMP NEGERI 2 MOYUDAN
========================================================== */

.about-content h2{

    max-width:580px;

    margin:0 auto;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:36px;

    line-height:1.18;

    letter-spacing:-1px;

    font-weight:800;

    color:var(--gov-text);

}


/* ==========================================================
   TITLE SPAN
========================================================== */

.about-content h2 span{

    color:var(--gov-primary);

}


/* ==========================================================
   TITLE LINE
========================================================== */

.about-title-line{

    width:48px;

    height:3px;

    margin:18px auto 21px;

    border-radius:10px;

    background:var(--gov-primary);

}


/* ==========================================================
   SUBTITLE
========================================================== */

.about-lead{

    max-width:560px;

    margin:0 auto;

    color:#425466;

    font-size:14px;

    line-height:1.75;

    font-weight:600;

}


/* ==========================================================
   DESCRIPTION
========================================================== */

.about-description{

    max-width:560px;

    margin:16px auto 0;

    color:var(--gov-text-soft);

    font-size:13px;

    line-height:1.85;

    font-weight:400;

}


/* ==========================================================
   ACTION
========================================================== */

.about-action{

    margin-top:26px;

    display:flex;

    justify-content:center;

}


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

.about-button{

    min-height:44px;

    padding:0 18px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border:1px solid var(--gov-primary);

    border-radius:6px;

    background:var(--gov-primary);

    color:#ffffff;

    font-size:11px;

    font-weight:800;

    text-decoration:none;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


/* ==========================================================
   BUTTON ICON
========================================================== */

.about-button i{

    font-size:12px;

    transition:
        transform .2s ease;

}


/* ==========================================================
   BUTTON HOVER
========================================================== */

.about-button:hover{

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

    border-color:var(--gov-primary-dark);

    color:#ffffff;

    transform:translateY(-2px);

    box-shadow:
        0 8px 22px
        rgba(15,76,129,.18);

}


.about-button:hover i{

    transform:
        translate(
            2px,
            -2px
        );

}


/* ==========================================================
   ABOUT GALLERY
========================================================== */

.about-gallery{

    position:relative;

    width:100%;

    min-width:0;

}


/* ==========================================================
   PHOTO SLIDER
========================================================== */

.about-photo-slider{

    position:relative;

    width:100%;

    height:440px;

    overflow:hidden;

    border-radius:10px;

    background:#eef3f8;

    border:1px solid #dce5ee;

    box-shadow:
        0 18px 45px
        rgba(15,38,63,.11);

}


/* ==========================================================
   PHOTO SLIDE
========================================================== */

.about-photo-slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transform:scale(1.025);

    transition:
        opacity .65s ease,
        visibility .65s ease,
        transform 1s ease;

}


.about-photo-slide.active{

    opacity:1;

    visibility:visible;

    transform:scale(1);

}


/* ==========================================================
   IMAGE
========================================================== */

.about-photo-slide img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

}


/* ==========================================================
   PHOTO OVERLAY
========================================================== */

.about-photo-slide::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(3,28,60,0) 45%,
            rgba(3,28,60,.10) 62%,
            rgba(3,28,60,.78) 100%
        );

}


/* ==========================================================
   PHOTO INFORMATION
========================================================== */

.about-photo-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    z-index:2;

    padding:
        24px
        24px
        21px;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:20px;

    color:#ffffff;

}


.about-photo-overlay span{

    max-width:75%;

    font-size:11px;

    font-weight:700;

    letter-spacing:.4px;

}


.about-photo-overlay strong{

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:21px;

    line-height:1;

    font-weight:800;

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

}


/* ==========================================================
   PHOTO CONTROLS
========================================================== */

.about-photo-controls{

    position:absolute;

    right:20px;

    bottom:19px;

    z-index:5;

    display:flex;

    align-items:center;

    gap:7px;

}


/* ==========================================================
   CONTROL BUTTON
========================================================== */

.about-photo-controls button{

    width:35px;

    height:35px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:5px;

    background:
        rgba(3,28,60,.34);

    color:#ffffff;

    cursor:pointer;

    backdrop-filter:blur(7px);

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;

}


.about-photo-controls button:hover{

    background:#ffffff;

    border-color:#ffffff;

    color:var(--gov-primary);

}


/* ==========================================================
   PHOTO COUNTER
========================================================== */

.about-photo-counter{

    min-width:57px;

    height:35px;

    padding:0 8px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

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

    border-radius:5px;

    background:
        rgba(3,28,60,.34);

    color:#d9e6f2;

    font-size:10px;

    backdrop-filter:blur(7px);

}


.about-photo-counter strong{

    color:#ffffff;

    font-size:13px;

}


/* ==========================================================
   DOT NAVIGATION
========================================================== */

.about-photo-dots{

    position:absolute;

    left:24px;

    bottom:26px;

    z-index:6;

    display:flex;

    align-items:center;

    gap:6px;

}


.about-photo-dots button{

    width:6px;

    height:6px;

    padding:0;

    border:0;

    border-radius:50%;

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

    cursor:pointer;

    transition:
        width .25s ease,
        border-radius .25s ease,
        background .25s ease;

}


.about-photo-dots button.active{

    width:21px;

    border-radius:5px;

    background:#ffffff;

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.about-photo-empty{

    min-height:440px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    border:1px solid #dce5ee;

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            #f6f9fc,
            #edf3f8
        );

    color:#7b8a9b;

    box-shadow:
        0 12px 35px
        rgba(15,38,63,.07);

}


/* ==========================================================
   EMPTY ICON
========================================================== */

.about-photo-empty i{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #d5e0eb;

    border-radius:8px;

    background:#ffffff;

    color:var(--gov-primary);

    font-size:22px;

}


/* ==========================================================
   EMPTY TEXT
========================================================== */

.about-photo-empty span{

    font-size:11px;

    font-weight:600;

    color:#718096;

}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1200px){

    .about-section{

        padding:96px 0;

    }

    .about-layout{

        grid-template-columns:
            minmax(0, .92fr)
            minmax(0, 1.08fr);

        gap:82px;

    }

    .about-content h2{

        font-size:38px;

    }

    .about-photo-slider,
    .about-photo-empty{

        height:465px;

        min-height:465px;

    }

}


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

@media (max-width:991px){

    .about-section{

        padding:72px 0;

    }

    .about-layout{

        grid-template-columns:1fr;

        gap:42px;

    }

    .about-content{

        max-width:760px;

    }

    .about-content h2{

        font-size:36px;

    }

    .about-lead{

        max-width:680px;

    }

    .about-description{

        max-width:700px;

    }

    .about-photo-slider,
    .about-photo-empty{

        height:430px;

        min-height:430px;

    }

}


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

@media (max-width:767px){

    .about-section{

        padding:60px 0;

    }

    .about-layout{

        gap:32px;

    }

    .about-content .section-kicker{

        gap:8px;

        margin-bottom:15px;

        font-size:9px;

        letter-spacing:1.4px;

    }

    .about-content .section-kicker::before,
    .about-content .section-kicker::after{

        width:22px;

        flex-basis:22px;

    }

    .about-content h2{

        font-size:30px;

        line-height:1.18;

        letter-spacing:-.8px;

    }

    .about-title-line{

        width:42px;

        height:2px;

        margin:15px auto 18px;

    }

    .about-lead{

        font-size:13px;

        line-height:1.72;

    }

    .about-description{

        margin-top:14px;

        font-size:12px;

        line-height:1.8;

    }

    .about-action{

        margin-top:22px;

    }

    .about-button{

        min-height:42px;

        padding:0 15px;

        font-size:10px;

    }

    .about-photo-slider,
    .about-photo-empty{

        height:330px;

        min-height:330px;

        border-radius:8px;

    }

    .about-photo-overlay{

        padding:
            20px
            18px
            18px;

    }

    .about-photo-overlay span{

        font-size:10px;

    }

    .about-photo-overlay strong{

        font-size:18px;

    }

    .about-photo-controls{

        right:15px;

        bottom:15px;

    }

    .about-photo-controls button{

        width:32px;

        height:32px;

    }

    .about-photo-counter{

        min-width:50px;

        height:32px;

    }

    .about-photo-dots{

        left:18px;

        bottom:24px;

    }

}


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

@media (max-width:480px){

    .about-section{

        padding:52px 0;

    }

    .about-content h2{

        font-size:27px;

        letter-spacing:-.6px;

    }

    .about-lead{

        font-size:12.5px;

    }

    .about-description{

        font-size:11.5px;

    }

    .about-photo-slider,
    .about-photo-empty{

        height:285px;

        min-height:285px;

    }

    .about-photo-overlay{

        padding:
            17px
            15px
            15px;

    }

    .about-photo-overlay strong{

        display:none;

    }

    .about-photo-controls{

        right:13px;

        bottom:13px;

    }

    .about-photo-dots{

        left:15px;

        bottom:21px;

    }

}
/* ==========================================================
   14. QUICK SERVICES
========================================================== */

.quick-services{

    padding:25px 0;

    background:#ffffff;

    border-bottom:1px solid var(--gov-border);

}

.quick-services-grid{

    display:grid;

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

    gap:10px;

}

.service-card{

    min-height:82px;

    padding:14px 15px;

    display:flex;

    align-items:center;

    gap:12px;

    position:relative;

    border:1px solid var(--gov-border);

    border-radius:8px;

    background:#ffffff;

    transition:var(--transition);

}

.service-card:hover{

    border-color:#cbd7e5;

    box-shadow:var(--gov-shadow);

    transform:translateY(-2px);

}

.service-icon{

    width:42px;

    height:42px;

    flex:0 0 42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:7px;

    background:#edf4fb;

    color:var(--gov-primary);

    font-size:18px;

}

.service-content{

    min-width:0;

}

.service-content span{

    display:block;

    color:var(--gov-muted);

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:.6px;

}

.service-content strong{

    display:block;

    margin-top:2px;

    color:var(--gov-text);

    font-size:13px;

    font-weight:700;

}

.service-arrow{

    margin-left:auto;

    color:#a2adba;

    font-size:13px;

}

.service-card.featured{

    background:var(--gov-primary);

    border-color:var(--gov-primary);

}

.service-card.featured .service-icon{

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

    color:#ffffff;

}

.service-card.featured .service-content span{

    color:#b9d1e8;

}

.service-card.featured .service-content strong{

    color:#ffffff;

}

.service-card.featured .service-arrow{

    color:#ffffff;

}


/* ==========================================================
   15. GENERAL SECTION
========================================================== */

.intro-section,
.news-section,
.agenda-section,
.facility-section{

    padding:85px 0;

}

.section-kicker{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--gov-primary);

    font-size:10px;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

}

.section-kicker::before{

    content:"";

    width:25px;

    height:2px;

    background:var(--gov-primary);

}

.section-kicker.light{

    color:#bcd3eb;

}

.section-kicker.light::before{

    background:#bcd3eb;

}


/* ==========================================================
   16. INTRO
========================================================== */

.intro-grid{

    display:grid;

    grid-template-columns:190px 1fr;

    gap:75px;

    max-width:1050px;

}

.intro-label-column{

    padding-top:6px;

    border-right:1px solid var(--gov-border);

}

.intro-number{

    margin-top:55px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:54px;

    line-height:1;

    font-weight:800;

    color:#e6ebf1;

}

.intro-label-bottom{

    display:block;

    margin-top:10px;

    color:var(--gov-muted);

    font-size:11px;

    font-weight:600;

}

.intro-content h2{

    max-width:760px;

    margin:0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:clamp(28px,3.5vw,44px);

    line-height:1.18;

    letter-spacing:-1.1px;

    color:var(--gov-text);

}

.intro-content h2 span{

    color:var(--gov-primary);

}

.intro-content p{

    max-width:780px;

    margin:20px 0 0;

    color:var(--gov-text-soft);

    font-size:14px;

}

.text-link{

    margin-top:24px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--gov-primary);

    font-size:12px;

    font-weight:700;

}

.text-link i{

    transition:transform .2s ease;

}

.text-link:hover i{

    transform:translateX(4px);

}


/* ==========================================================
   17. STATS
========================================================== */

.stats-section{

    padding:75px 0;

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

    color:#ffffff;

}

.stats-header{

    display:flex;

    justify-content:space-between;

    gap:50px;

    margin-bottom:40px;

}

.stats-header h2{

    max-width:600px;

    margin:12px 0 0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:34px;

    line-height:1.2;

    letter-spacing:-.8px;

}

.stats-header h2 span{

    color:#a9c9e9;

}

.stats-header p{

    max-width:360px;

    margin:0;

    color:#b8cce0;

    font-size:13px;

}

.stats-grid{

    display:grid;

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

    border-top:1px solid rgba(255,255,255,.15);

    border-left:1px solid rgba(255,255,255,.15);

}

.stat-item{

    min-height:180px;

    padding:25px;

    border-right:1px solid rgba(255,255,255,.15);

    border-bottom:1px solid rgba(255,255,255,.15);

}

.stat-icon{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:6px;

    color:#c2d8ed;

}

.stat-item strong{

    display:block;

    margin-top:25px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:25px;

    font-weight:800;

}

.stat-item small{

    display:block;

    margin-top:3px;

    color:#a9bfd5;

    font-size:11px;

}


/* ==========================================================
   18. SECTION HEADER
========================================================== */

.section-header-row{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:35px;

}

.section-header-row h2{

    margin:9px 0 0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:34px;

    line-height:1.2;

    letter-spacing:-.8px;

}

.section-header-row h2 span{

    color:var(--gov-primary);

}

.section-header-row p{

    max-width:580px;

    margin:9px 0 0;

    color:var(--gov-text-soft);

    font-size:13px;

}


/* ==========================================================
   19. OUTLINE BUTTON
========================================================== */

.outline-button{

    min-height:40px;

    padding:0 14px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border:1px solid var(--gov-border-dark);

    border-radius:6px;

    color:var(--gov-primary);

    font-size:11px;

    font-weight:700;

    white-space:nowrap;

    transition:var(--transition);

}

.outline-button:hover{

    background:var(--gov-primary);

    border-color:var(--gov-primary);

    color:#ffffff;

}


/* ==========================================================
   20. NEWS
========================================================== */

.news-section{

    background:var(--gov-bg);

}

.news-grid{

    display:grid;

    grid-template-columns:1.4fr 1fr 1fr;

    gap:16px;

}

.news-card{

    background:#ffffff;

    border:1px solid var(--gov-border);

    border-radius:10px;

    overflow:hidden;

    transition:var(--transition);

}

.news-card:hover{

    box-shadow:var(--gov-shadow-hover);

    transform:translateY(-3px);

}

.news-image{

    height:190px;

    position:relative;

    overflow:hidden;

    background:#e9eef4;

}

.news-main .news-image{

    height:225px;

}

.news-placeholder{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #e7edf4,
            #f4f7fa
        );

    color:#9aa9b9;

    font-size:38px;

}

.news-category{

    position:absolute;

    top:12px;

    left:12px;

    padding:5px 8px;

    background:var(--gov-primary);

    color:#ffffff;

    border-radius:4px;

    font-size:9px;

    font-weight:800;

    letter-spacing:.8px;

}

.news-body{

    padding:20px;

}

.news-date{

    display:flex;

    align-items:center;

    gap:6px;

    color:var(--gov-muted);

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.news-date i{

    color:var(--gov-primary);

}

.news-body h3{

    margin:10px 0 0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:17px;

    line-height:1.4;

    color:var(--gov-text);

}

.news-body p{

    margin:10px 0 0;

    color:var(--gov-text-soft);

    font-size:12px;

}

.news-body > a{

    margin-top:17px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--gov-primary);

    font-size:11px;

    font-weight:700;

}


/* ==========================================================
   21. AGENDA
========================================================== */

.agenda-section{

    background:#ffffff;

}

.agenda-grid{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:70px;

}

.agenda-intro h2{

    margin:12px 0 0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:34px;

    line-height:1.2;

    letter-spacing:-.8px;

}

.agenda-intro h2 span{

    color:var(--gov-primary);

}

.agenda-intro p{

    margin:15px 0 0;

    color:var(--gov-text-soft);

    font-size:13px;

}

.agenda-list{

    border-top:1px solid var(--gov-border);

}

.agenda-item{

    min-height:125px;

    display:grid;

    grid-template-columns:75px 1fr 30px;

    align-items:center;

    gap:18px;

    border-bottom:1px solid var(--gov-border);

    transition:var(--transition);

}

.agenda-item:hover{

    padding-left:7px;

}

.agenda-date{

    text-align:center;

    border-right:1px solid var(--gov-border);

    padding-right:15px;

}

.agenda-date strong{

    display:block;

    font-family:'Plus Jakarta Sans',sans-serif;

    color:var(--gov-primary);

    font-size:25px;

    line-height:1;

}

.agenda-date span{

    display:block;

    margin-top:4px;

    color:var(--gov-muted);

    font-size:9px;

    font-weight:800;

}

.agenda-info small{

    color:var(--gov-primary);

    font-size:9px;

    font-weight:800;

    letter-spacing:.8px;

}

.agenda-info h3{

    margin:4px 0 0;

    font-size:15px;

    font-weight:700;

}

.agenda-info p{

    margin:3px 0 0;

    color:var(--gov-text-soft);

    font-size:11px;

}

.agenda-item > i{

    color:#9aa6b3;

}


/* ==========================================================
   22. FACILITY
========================================================== */

.facility-section{

    background:var(--gov-bg);

}

.facility-grid{

    display:grid;

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

    gap:14px;

}

.facility-card{

    min-height:230px;

    padding:25px;

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:#ffffff;

    border:1px solid var(--gov-border);

    border-radius:9px;

    transition:var(--transition);

    overflow:hidden;

}

.facility-card:hover{

    border-color:#c8d5e4;

    box-shadow:var(--gov-shadow);

    transform:translateY(-2px);

}

.facility-card.large{

    grid-row:span 2;

    min-height:474px;

    background:var(--gov-primary);

    color:#ffffff;

    border-color:var(--gov-primary);

}

.facility-card > div > i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:6px;

    background:#edf4fb;

    color:var(--gov-primary);

    font-size:19px;

}

.facility-card.large > div > i{

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

    color:#ffffff;

}

.facility-card h3{

    margin:24px 0 0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:18px;

    line-height:1.3;

}

.facility-card p{

    margin:8px 0 0;

    color:var(--gov-text-soft);

    font-size:12px;

}

.facility-card.large p{

    color:#c2d5e7;

}

.facility-card > span{

    align-self:flex-end;

    color:#a9b4c0;

    font-size:11px;

    font-weight:800;

}

.facility-card.large > span{

    color:#9bb9d6;

}


/* ==========================================================
   23. PPDB / ADMISSION
========================================================== */

.admission-section{

    padding:55px 0;

    background:#ffffff;

}

.admission-box{

    padding:38px 42px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;

    background:var(--gov-primary);

    border-radius:10px;

    color:#ffffff;

}

.admission-content > span{

    color:#b9d1e8;

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;

}

.admission-content h2{

    max-width:700px;

    margin:10px 0 0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:29px;

    line-height:1.25;

}

.admission-content p{

    max-width:650px;

    margin:10px 0 0;

    color:#c8d9e9;

    font-size:12px;

}

.admission-button{

    min-width:160px;

    min-height:46px;

    padding:0 17px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:6px;

    background:#ffffff;

    color:var(--gov-primary);

    font-size:12px;

    font-weight:800;

    transition:var(--transition);

}

.admission-button:hover{

    background:#edf4fb;

    transform:translateY(-2px);

}


/* ==========================================================
   24. FOOTER
========================================================== */

.footer{

    background:#071f3d;

    color:#d5dfeb;

}

.footer-main{

    padding:60px 0 45px;

}

.footer-grid{

    display:grid;

    grid-template-columns:1.6fr 1fr 1fr 1.25fr;

    gap:45px;

}

.footer-brand-top{

    display:flex;

    align-items:center;

    gap:12px;

}

.footer-logo{

    width:46px;

    height:46px;

    object-fit:contain;

}

.footer-brand-title{

    color:#ffffff;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:15px;

    font-weight:800;

}

.footer-brand-subtitle{

    margin-top:3px;

    color:#9fb5cc;

    font-size:10px;

}

.footer-description{

    max-width:400px;

    margin:18px 0 0;

    color:#9fb1c5;

    font-size:11px;

    line-height:1.8;

}

.footer-social-title{

    margin-top:22px;

    color:#ffffff;

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;

}

.footer-social{

    margin-top:10px;

    display:flex;

    gap:7px;

}

.footer-social a{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:5px;

    color:#b7c9dc;

    transition:var(--transition);

}

.footer-social a:hover{

    background:#ffffff;

    border-color:#ffffff;

    color:var(--gov-primary);

}

.footer-heading{

    margin:0 0 17px;

    color:#ffffff;

    font-size:12px;

    font-weight:800;

}

.footer-links{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-links li{

    margin-bottom:8px;

}

.footer-links a{

    color:#9fb1c5;

    font-size:11px;

    transition:var(--transition);

}

.footer-links a:hover{

    color:#ffffff;

}

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.footer-contact-item{

    display:flex;

    align-items:flex-start;

    gap:10px;

    color:#a9bbce;

    font-size:11px;

}

.footer-contact-item i{

    width:16px;

    flex:0 0 16px;

    color:#8fb4d8;

    margin-top:3px;

}

.footer-bottom{

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

}

.footer-bottom-inner{

    min-height:62px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}

.copyright{

    color:#8298af;

    font-size:10px;

}

.footer-bottom-links{

    display:flex;

    align-items:center;

    gap:20px;

}

.footer-bottom-links a{

    color:#a5b7c9;

    font-size:10px;

    transition:var(--transition);

}

.footer-bottom-links a:hover{

    color:#ffffff;

}


/* ==========================================================
   25. BACK TO TOP
========================================================== */

.back-top{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:8000;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--gov-primary);

    border-radius:6px;

    background:var(--gov-primary);

    color:#ffffff;

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    cursor:pointer;

    box-shadow:0 5px 20px rgba(7,59,122,.18);

    transition:var(--transition);

}

.back-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-top:hover{

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

}


/* ==========================================================
   26. SCROLL REVEAL
========================================================== */

.service-card,
.news-card,
.agenda-item,
.facility-card,
.stat-item{

    opacity:0;

    transform:translateY(15px);

}

.service-card.reveal,
.news-card.reveal,
.agenda-item.reveal,
.facility-card.reveal,
.stat-item.reveal{

    transition:
        opacity .5s ease,
        transform .5s ease;

}

.service-card.show,
.news-card.show,
.agenda-item.show,
.facility-card.show,
.stat-item.show{

    opacity:1;

    transform:translateY(0);

}


/* ==========================================================
   27. GOVERNMENT OFFICIAL BADGE
========================================================== */

.gov-official{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:5px 9px;

    border:1px solid var(--gov-border);

    border-radius:4px;

    background:#ffffff;

    color:var(--gov-text-soft);

    font-size:9px;

    font-weight:700;

}

.gov-official i{

    color:var(--gov-primary);

}


/* ==========================================================
   28. RESPONSIVE TABLET
========================================================== */

@media(max-width:1100px){

    .desktop-navigation{

        display:none;

    }

    .mobile-menu-button{

        display:flex;

    }

    .mobile-navigation.open{

        display:block;

    }

    .nav-container{

        min-height:70px;

    }

    .brand-text strong{

        font-size:15px;

    }

    .hero-slider{

        height:520px;

    }

    .quick-services-grid{

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

    }

    .intro-grid{

        grid-template-columns:150px 1fr;

        gap:45px;

    }

    .stats-grid{

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

    }

    .news-grid{

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

    }

    .news-main{

        grid-column:span 2;

    }

    .agenda-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    .facility-grid{

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

    }

    .facility-card.large{

        grid-row:auto;

        min-height:300px;

    }

    .footer-grid{

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

        gap:35px;

    }

}


/* ==========================================================
   29. RESPONSIVE MOBILE
========================================================== */

@media(max-width:700px){

    .container{

        width:min(
            calc(100% - 28px),
            var(--container-width)
        );

    }

    .topbar{

        display:none;

    }

    .nav-container{

        min-height:64px;

    }

    .brand-logo-wrap{

        width:40px;

        height:40px;

    }

    .brand-logo{

        width:38px;

        height:38px;

    }

    .brand-text strong{

        font-size:13px;

    }

    .brand-text span{

        font-size:8px;

    }

    .header-ppdb{

        display:none;

    }

    .mobile-menu-button{

        width:40px;

        height:38px;

    }

    .mobile-navigation{

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

    }

    .hero-slider{

        height:510px;

    }

    .hero-content{

        padding:0 0 55px;

    }

    .hero-content h1{

        font-size:32px;

        letter-spacing:-1px;

    }

    .hero-content p{

        font-size:13px;

        line-height:1.65;

    }

    .hero-buttons{

        margin-top:20px;

    }

    .hero-btn-primary,
    .hero-btn-secondary{

        min-height:42px;

        padding:0 13px;

        font-size:11px;

    }

    .hero-bottom{

        position:absolute;

    }

    .hero-location{

        display:none;

    }

    .hero-bottom-inner{

        min-height:62px;

        justify-content:center;

    }

    .quick-services{

        padding:15px 0;

    }

    .quick-services-grid{

        grid-template-columns:1fr;

        gap:8px;

    }

    .service-card{

        min-height:70px;

    }

    .intro-section,
    .news-section,
    .agenda-section,
    .facility-section{

        padding:60px 0;

    }

    .intro-grid{

        display:block;

    }

    .intro-label-column{

        padding:0 0 15px;

        border-right:0;

        border-bottom:1px solid var(--gov-border);

    }

    .intro-number{

        display:inline-block;

        margin:15px 12px 0 0;

        font-size:34px;

    }

    .intro-label-bottom{

        display:inline-block;

    }

    .intro-content{

        padding-top:25px;

    }

    .intro-content h2{

        font-size:28px;

    }

    .stats-section{

        padding:55px 0;

    }

    .stats-header{

        display:block;

        margin-bottom:30px;

    }

    .stats-header h2{

        font-size:28px;

    }

    .stats-header p{

        margin-top:15px;

    }

    .stats-grid{

        grid-template-columns:1fr 1fr;

    }

    .stat-item{

        min-height:150px;

        padding:18px;

    }

    .stat-item strong{

        font-size:19px;

    }

    .section-header-row{

        display:block;

    }

    .section-header-row h2{

        font-size:28px;

    }

    .section-header-row p{

        font-size:12px;

    }

    .outline-button{

        margin-top:18px;

    }

    .news-grid{

        grid-template-columns:1fr;

    }

    .news-main{

        grid-column:auto;

    }

    .news-image,
    .news-main .news-image{

        height:190px;

    }

    .agenda-item{

        grid-template-columns:60px 1fr 20px;

        gap:12px;

    }

    .agenda-date{

        padding-right:10px;

    }

    .agenda-info h3{

        font-size:14px;

    }

    .agenda-info p{

        font-size:10px;

    }

    .facility-grid{

        grid-template-columns:1fr;

    }

    .facility-card,
    .facility-card.large{

        min-height:220px;

    }

    .admission-section{

        padding:35px 0;

    }

    .admission-box{

        padding:28px 22px;

        display:block;

    }

    .admission-content h2{

        font-size:24px;

    }

    .admission-button{

        margin-top:20px;

        width:100%;

    }

    .footer-main{

        padding:45px 0 35px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .footer-bottom-inner{

        padding:18px 0;

        display:block;

    }

    .footer-bottom-links{

        margin-top:10px;

        gap:15px;

        flex-wrap:wrap;

    }

    .back-top{

        right:15px;

        bottom:15px;

        width:38px;

        height:38px;

    }

}


/* ==========================================================
   30. VERY SMALL MOBILE
========================================================== */

@media(max-width:400px){

    .brand-text span{

        display:none;

    }

    .hero-slider{

        height:500px;

    }

    .hero-content h1{

        font-size:28px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

    }

    .hero-btn-primary,
    .hero-btn-secondary{

        width:100%;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .stat-item{

        min-height:125px;

    }

    .agenda-item{

        grid-template-columns:50px 1fr 15px;

    }

}


/* ==========================================================
   31. ACCESSIBILITY
========================================================== */

:focus-visible{

    outline:3px solid rgba(13,91,181,.25);

    outline-offset:3px;

}

::selection{

    background:var(--gov-primary);

    color:#ffffff;

}


/* ==========================================================
   32. REDUCE MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        scroll-behavior:auto !important;

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

}
/* ==========================================================
   SMP NEGERI 2 MOYUDAN
   PROFIL SEKOLAH
   MODERN GOVERNMENT STYLE
========================================================== */


/* ==========================================================
   01. PROFILE PAGE BASE
========================================================== */

.profile-page{

    background:#F6F8FB;
    color:#172033;

    overflow:hidden;

}

.profile-page a{

    text-decoration:none;

}

.profile-page img{

    max-width:100%;
    display:block;

}


/* ==========================================================
   02. PAGE HERO
========================================================== */

.page-hero{

    position:relative;

    background:
        linear-gradient(
            120deg,
            #063B78 0%,
            #074A91 55%,
            #0A5BA8 100%
        );

    color:#FFFFFF;

    min-height:340px;

    display:flex;
    align-items:center;

    overflow:hidden;

}


/* Decorative government pattern */

.page-hero::before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    right:-220px;
    top:-250px;

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

    border-radius:50%;

}

.page-hero::after{

    content:"";

    position:absolute;

    width:360px;
    height:360px;

    right:-80px;
    bottom:-230px;

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

    border-radius:50%;

}


.page-hero-container{

    position:relative;

    z-index:2;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:50px;

    padding-top:70px;
    padding-bottom:65px;

}


/* ==========================================================
   03. PAGE HERO CONTENT
========================================================== */

.page-hero-content{

    max-width:780px;

}

.page-hero-label{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    font-family:'Inter',sans-serif;

    font-size:12px;

    font-weight:700;

    letter-spacing:1.8px;

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

}

.page-hero-line{

    width:34px;
    height:2px;

    background:#FFFFFF;

    display:block;

}


.page-hero-content h1{

    margin:0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:clamp(34px,4vw,54px);

    line-height:1.12;

    font-weight:800;

    letter-spacing:-1.5px;

}

.page-hero-content h1 span{

    display:block;

    color:#CFE5FF;

}


.page-hero-content p{

    max-width:680px;

    margin:22px 0 0;

    font-family:'Inter',sans-serif;

    font-size:15px;

    line-height:1.8;

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

}


/* ==========================================================
   04. PAGE HERO META
========================================================== */

.page-hero-meta{

    min-width:190px;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:18px;

    padding-bottom:4px;

}

.page-meta-item{

    display:flex;

    flex-direction:column;

    gap:5px;

    text-align:right;

}

.page-meta-item span{

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:20px;

    font-weight:800;

    color:#FFFFFF;

}

.page-meta-item small{

    font-family:'Inter',sans-serif;

    font-size:10px;

    font-weight:600;

    letter-spacing:.8px;

    text-transform:uppercase;

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

}

.page-meta-divider{

    width:1px;
    height:42px;

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

}


/* ==========================================================
   05. BREADCRUMB
========================================================== */

.breadcrumb-section{

    background:#FFFFFF;

    border-bottom:1px solid #E5EAF0;

}

.breadcrumb{

    min-height:56px;

    display:flex;

    align-items:center;

    gap:10px;

    font-family:'Inter',sans-serif;

    font-size:12px;

}

.breadcrumb a{

    color:#356A9F;

    font-weight:600;

    transition:.2s ease;

}

.breadcrumb a:hover{

    color:#063B78;

}

.breadcrumb i{

    font-size:10px;

    color:#9AA6B5;

}

.breadcrumb span{

    color:#7A8797;

    font-weight:500;

}


/* ==========================================================
   06. PROFILE INTRO
========================================================== */

.profile-intro-section{

    background:#FFFFFF;

    padding:95px 0;

}

.profile-intro-grid{

    display:grid;

    grid-template-columns:190px minmax(0,1fr);

    gap:70px;

}


/* ==========================================================
   07. SECTION LABEL
========================================================== */

.profile-section-label{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding-top:8px;

}

.profile-section-label .section-kicker{

    font-family:'Inter',sans-serif;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.7px;

    color:#356A9F;

}

.profile-section-label strong{

    margin-top:18px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:46px;

    line-height:1;

    font-weight:800;

    color:#DDE5EF;

}

.profile-section-label small{

    margin-top:10px;

    font-family:'Inter',sans-serif;

    font-size:11px;

    font-weight:600;

    color:#8995A5;

}


/* ==========================================================
   08. CONTENT HEADING
========================================================== */

.content-heading{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:17px;

    font-family:'Inter',sans-serif;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.4px;

    color:#356A9F;

}

.content-heading-line{

    width:25px;
    height:2px;

    background:#0B5BA7;

}


/* ==========================================================
   09. PROFILE INTRO CONTENT
========================================================== */

.profile-intro-content{

    max-width:900px;

}

.profile-intro-content h2{

    margin:0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:clamp(30px,4vw,46px);

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1.2px;

    color:#172033;

}

.profile-intro-content > p{

    max-width:790px;

    margin:22px 0 0;

    font-family:'Inter',sans-serif;

    font-size:15px;

    line-height:1.85;

    color:#687587;

}


/* ==========================================================
   10. SCHOOL DATA SECTION
========================================================== */

.school-data-section{

    background:#F3F6FA;

    padding:90px 0;

    border-top:1px solid #E6EBF1;

    border-bottom:1px solid #E6EBF1;

}


.school-data-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:40px;

    margin-bottom:38px;

}


.school-data-header > div{

    max-width:650px;

}


.school-data-header .section-kicker{

    display:block;

    margin-bottom:13px;

    font-family:'Inter',sans-serif;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.6px;

    color:#356A9F;

}


.school-data-header h2{

    margin:0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:clamp(28px,3.5vw,42px);

    line-height:1.2;

    letter-spacing:-1px;

    font-weight:800;

    color:#172033;

}


.school-data-header h2 span{

    color:#0B5BA7;

}


.school-data-header p{

    max-width:380px;

    margin:0;

    font-family:'Inter',sans-serif;

    font-size:13px;

    line-height:1.75;

    color:#748093;

}


/* ==========================================================
   11. SCHOOL DATA GRID
========================================================== */

.school-data-grid{

    display:grid;

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

    gap:16px;

}


.school-data-card{

    min-height:112px;

    display:flex;

    align-items:center;

    gap:17px;

    padding:22px;

    background:#FFFFFF;

    border:1px solid #E2E8EF;

    border-radius:8px;

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

}


.school-data-card:hover{

    transform:translateY(-3px);

    border-color:#C8D8E8;

    box-shadow:
        0 10px 25px rgba(20,48,80,.07);

}


.school-data-icon{

    width:46px;
    height:46px;

    flex:0 0 46px;

    display:flex;

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

    background:#EDF5FC;

    border:1px solid #D9E8F5;

    border-radius:7px;

    color:#0B5BA7;

    font-size:19px;

}


.school-data-card small{

    display:block;

    margin-bottom:5px;

    font-family:'Inter',sans-serif;

    font-size:10px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

    color:#8A96A5;

}


.school-data-card strong{

    display:block;

    font-family:'Inter',sans-serif;

    font-size:14px;

    line-height:1.45;

    font-weight:700;

    color:#263448;

}


/* ==========================================================
   12. ABOUT SCHOOL
========================================================== */

.about-school-section{

    background:#FFFFFF;

    padding:100px 0;

}


.about-school-grid{

    display:grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(340px,.85fr);

    gap:80px;

    align-items:stretch;

}


.about-school-content{

    padding-top:12px;

}


.about-school-content h2{

    margin:0 0 22px;

    max-width:650px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:clamp(30px,4vw,46px);

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1.3px;

    color:#172033;

}


.about-school-content h2 span{

    color:#0B5BA7;

}


.about-school-content p{

    max-width:700px;

    margin:0 0 17px;

    font-family:'Inter',sans-serif;

    font-size:14px;

    line-height:1.85;

    color:#687587;

}


/* ==========================================================
   13. ABOUT SCHOOL PANEL
========================================================== */

.about-school-panel{

    position:relative;

    padding:40px;

    min-height:330px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #063B78,
            #07539B
        );

    border-radius:10px;

    color:#FFFFFF;

    box-shadow:
        0 18px 45px rgba(7,59,120,.15);

}


.about-school-panel::before{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    right:-110px;
    top:-110px;

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

    border-radius:50%;

}


.about-school-panel::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    left:-100px;
    bottom:-100px;

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

    border-radius:50%;

}


.about-panel-number{

    position:absolute;

    top:24px;
    right:28px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:13px;

    font-weight:800;

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

}


.about-panel-icon{

    position:relative;

    z-index:2;

    width:52px;
    height:52px;

    display:flex;

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

    margin-bottom:22px;

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

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

    border-radius:8px;

    font-size:22px;

}


.about-school-panel h3{

    position:relative;

    z-index:2;

    margin:0 0 12px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:24px;

    font-weight:800;

}


.about-school-panel p{

    position:relative;

    z-index:2;

    max-width:430px;

    margin:0;

    font-family:'Inter',sans-serif;

    font-size:13px;

    line-height:1.75;

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

}


.about-panel-line{

    position:relative;

    z-index:2;

    width:100%;

    height:1px;

    margin:25px 0 17px;

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

}


.about-panel-meta{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:space-between;

    gap:15px;

    font-family:'Inter',sans-serif;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

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

}


/* ==========================================================
   14. PROFILE VALUES
========================================================== */

.profile-values-section{

    background:#F3F6FA;

    padding:90px 0;

    border-top:1px solid #E5EAF0;

}


.profile-values-section .section-header-row{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:40px;

    margin-bottom:40px;

}


.profile-values-section .section-kicker{

    display:block;

    margin-bottom:13px;

    font-family:'Inter',sans-serif;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.6px;

    color:#356A9F;

}


.profile-values-section h2{

    margin:0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:clamp(28px,3.5vw,42px);

    line-height:1.2;

    font-weight:800;

    letter-spacing:-1px;

    color:#172033;

}


.profile-values-section h2 span{

    color:#0B5BA7;

}


.profile-values-section .section-header-row > p{

    max-width:390px;

    margin:0;

    font-family:'Inter',sans-serif;

    font-size:13px;

    line-height:1.75;

    color:#748093;

}


/* ==========================================================
   15. VALUES GRID
========================================================== */

.profile-values-grid{

    display:grid;

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

    gap:15px;

}


.profile-value-card{

    position:relative;

    min-height:265px;

    padding:30px 26px;

    background:#FFFFFF;

    border:1px solid #E0E6ED;

    border-radius:8px;

    overflow:hidden;

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

}


.profile-value-card:hover{

    transform:translateY(-4px);

    border-color:#C8D8E8;

    box-shadow:
        0 14px 30px rgba(20,48,80,.07);

}


.profile-value-number{

    position:absolute;

    top:21px;
    right:23px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:12px;

    font-weight:800;

    color:#C8D4E0;

}


.profile-value-icon{

    width:48px;
    height:48px;

    display:flex;

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

    margin-bottom:25px;

    background:#EDF5FC;

    border:1px solid #D9E8F5;

    border-radius:7px;

    color:#0B5BA7;

    font-size:20px;

}


.profile-value-card h3{

    margin:0 0 11px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:18px;

    font-weight:800;

    color:#1C2B3F;

}


.profile-value-card p{

    margin:0;

    font-family:'Inter',sans-serif;

    font-size:12.5px;

    line-height:1.75;

    color:#748093;

}


/* ==========================================================
   16. PROFILE NAVIGATION
========================================================== */

.profile-navigation-section{

    background:#FFFFFF;

    padding:85px 0;

}


.profile-navigation-grid{

    display:grid;

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

    gap:15px;

}


.profile-navigation-card{

    position:relative;

    min-height:185px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:25px;

    background:#F8FAFC;

    border:1px solid #E1E7EE;

    border-radius:8px;

    color:#172033;

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

}


.profile-navigation-card:hover{

    transform:translateY(-3px);

    background:#FFFFFF;

    border-color:#BFD3E5;

    box-shadow:
        0 12px 28px rgba(20,48,80,.07);

}


.profile-navigation-card span{

    display:block;

    margin-bottom:25px;

    font-family:'Inter',sans-serif;

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;

    color:#8B98A8;

}


.profile-navigation-card h3{

    margin:0 0 8px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:17px;

    font-weight:800;

    color:#1C2B3F;

}


.profile-navigation-card p{

    margin:0;

    max-width:220px;

    font-family:'Inter',sans-serif;

    font-size:11.5px;

    line-height:1.65;

    color:#7B8797;

}


.profile-navigation-card > i{

    position:absolute;

    right:22px;
    bottom:22px;

    width:32px;
    height:32px;

    display:flex;

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

    border:1px solid #D9E1E9;

    border-radius:50%;

    color:#356A9F;

    font-size:13px;

    transition:.25s ease;

}


.profile-navigation-card:hover > i{

    background:#0B5BA7;

    border-color:#0B5BA7;

    color:#FFFFFF;

}


/* ==========================================================
   17. PROFILE CONTACT
========================================================== */

.profile-contact-section{

    background:#F3F6FA;

    padding:75px 0 90px;

}


.profile-contact-box{

    position:relative;

    min-height:220px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    padding:45px 55px;

    overflow:hidden;

    background:
        linear-gradient(
            110deg,
            #063B78,
            #07539B
        );

    border-radius:10px;

    color:#FFFFFF;

}


.profile-contact-box::after{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    right:-160px;
    top:-190px;

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

    border-radius:50%;

}


.profile-contact-content{

    position:relative;

    z-index:2;

}


.profile-contact-content > span{

    display:block;

    margin-bottom:13px;

    font-family:'Inter',sans-serif;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.5px;

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

}


.profile-contact-content h2{

    margin:0 0 12px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:clamp(26px,3vw,38px);

    line-height:1.2;

    font-weight:800;

    letter-spacing:-.8px;

}


.profile-contact-content p{

    max-width:600px;

    margin:0;

    font-family:'Inter',sans-serif;

    font-size:13px;

    line-height:1.7;

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

}


.profile-contact-button{

    position:relative;

    z-index:2;

    flex:0 0 auto;

    min-height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    padding:0 22px;

    background:#FFFFFF;

    border:1px solid #FFFFFF;

    border-radius:6px;

    color:#063B78;

    font-family:'Inter',sans-serif;

    font-size:12px;

    font-weight:800;

    transition:.25s ease;

}


.profile-contact-button i{

    font-size:14px;

}


.profile-contact-button:hover{

    background:#EAF3FC;

    border-color:#EAF3FC;

    transform:translateY(-2px);

}


/* ==========================================================
   18. TEXT LINK
========================================================== */

.profile-page .text-link{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:12px;

    font-family:'Inter',sans-serif;

    font-size:12px;

    font-weight:800;

    color:#0B5BA7;

    transition:.25s ease;

}


.profile-page .text-link i{

    transition:transform .25s ease;

}


.profile-page .text-link:hover{

    color:#063B78;

}


.profile-page .text-link:hover i{

    transform:translateX(4px);

}


/* ==========================================================
   19. CONTAINER SAFETY
========================================================== */

.profile-page .container{

    width:min(
        calc(100% - 40px),
        1180px
    );

    margin-left:auto;
    margin-right:auto;

}


/* ==========================================================
   20. TABLET
========================================================== */

@media (max-width:1100px){

    .page-hero-container{

        gap:30px;

    }


    .profile-intro-grid{

        grid-template-columns:150px minmax(0,1fr);

        gap:45px;

    }


    .school-data-grid{

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

    }


    .about-school-grid{

        gap:45px;

    }


    .profile-values-grid{

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

    }


    .profile-navigation-grid{

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

    }

}


/* ==========================================================
   21. TABLET SMALL
========================================================== */

@media (max-width:850px){

    .page-hero{

        min-height:300px;

    }


    .page-hero-container{

        display:block;

        padding-top:55px;
        padding-bottom:55px;

    }


    .page-hero-meta{

        justify-content:flex-start;

        margin-top:35px;

        padding:0;

    }


    .page-meta-item{

        text-align:left;

    }


    .profile-intro-section{

        padding:70px 0;

    }


    .profile-intro-grid{

        grid-template-columns:1fr;

        gap:30px;

    }


    .profile-section-label{

        flex-direction:row;

        align-items:center;

        gap:15px;

    }


    .profile-section-label strong{

        margin:0;

        font-size:30px;

    }


    .profile-section-label small{

        margin:0;

    }


    .school-data-section{

        padding:70px 0;

    }


    .school-data-header{

        display:block;

    }


    .school-data-header p{

        margin-top:18px;

    }


    .about-school-section{

        padding:75px 0;

    }


    .about-school-grid{

        grid-template-columns:1fr;

    }


    .profile-values-section{

        padding:70px 0;

    }


    .profile-values-section .section-header-row{

        display:block;

    }


    .profile-values-section .section-header-row > p{

        margin-top:18px;

    }


    .profile-navigation-section{

        padding:70px 0;

    }


    .profile-contact-box{

        padding:38px;

    }

}


/* ==========================================================
   22. MOBILE
========================================================== */

@media (max-width:600px){

    .profile-page .container{

        width:min(
            calc(100% - 28px),
            1180px
        );

    }


    .page-hero{

        min-height:auto;

    }


    .page-hero-container{

        padding-top:45px;
        padding-bottom:45px;

    }


    .page-hero-content h1{

        font-size:32px;

        letter-spacing:-.8px;

    }


    .page-hero-content p{

        margin-top:17px;

        font-size:13px;

        line-height:1.7;

    }


    .page-hero-meta{

        margin-top:28px;

    }


    .breadcrumb{

        min-height:50px;

        font-size:11px;

    }


    .profile-intro-section{

        padding:55px 0;

    }


    .profile-intro-content h2{

        font-size:30px;

    }


    .profile-intro-content > p{

        font-size:13px;

        line-height:1.75;

    }


    .school-data-section{

        padding:55px 0;

    }


    .school-data-grid{

        grid-template-columns:1fr;

        gap:12px;

    }


    .school-data-card{

        min-height:96px;

        padding:18px;

    }


    .school-data-icon{

        width:42px;
        height:42px;

        flex-basis:42px;

        font-size:17px;

    }


    .school-data-card strong{

        font-size:13px;

    }


    .about-school-section{

        padding:60px 0;

    }


    .about-school-content h2{

        font-size:30px;

    }


    .about-school-content p{

        font-size:13px;

    }


    .about-school-panel{

        min-height:300px;

        padding:30px;

    }


    .about-school-panel h3{

        font-size:21px;

    }


    .profile-values-section{

        padding:55px 0;

    }


    .profile-values-grid{

        grid-template-columns:1fr;

        gap:12px;

    }


    .profile-value-card{

        min-height:auto;

        padding:25px;

    }


    .profile-navigation-section{

        padding:55px 0;

    }


    .profile-navigation-grid{

        grid-template-columns:1fr;

        gap:12px;

    }


    .profile-navigation-card{

        min-height:155px;

    }


    .profile-contact-section{

        padding:55px 0 65px;

    }


    .profile-contact-box{

        display:block;

        padding:30px 25px;

    }


    .profile-contact-content h2{

        font-size:28px;

    }


    .profile-contact-button{

        width:100%;

        margin-top:25px;

    }

}


/* ==========================================================
   23. MOBILE EXTRA SMALL
========================================================== */

@media (max-width:400px){

    .page-hero-content h1{

        font-size:29px;

    }


    .profile-intro-content h2{

        font-size:27px;

    }


    .school-data-card{

        gap:12px;

    }


    .school-data-card strong{

        font-size:12px;

    }


    .about-school-panel{

        padding:25px;

    }


    .about-panel-meta{

        flex-direction:column;

        gap:7px;

    }


    .profile-contact-content h2{

        font-size:25px;

    }

}


/* ==========================================================
   24. ACCESSIBILITY
========================================================== */

.profile-page a:focus-visible,
.profile-page button:focus-visible{

    outline:3px solid rgba(11,91,167,.25);

    outline-offset:3px;

}


/* ==========================================================
   25. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .profile-page *,
    .profile-page *::before,
    .profile-page *::after{

        transition:none !important;

        animation:none !important;

        scroll-behavior:auto !important;

    }

}
/* ==========================================================
   VISI & MISI PAGE
   SMP NEGERI 2 MOYUDAN
========================================================== */

.vision-page{
    background:#ffffff;
}


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

.page-hero{
    position:relative;
    background:#f5f8fc;
    border-bottom:1px solid #e5eaf1;
    overflow:hidden;
}

.page-hero::after{
    content:"";
    position:absolute;
    right:-120px;
    top:-150px;
    width:420px;
    height:420px;
    border:1px solid rgba(7,59,122,.08);
    border-radius:50%;
}

.page-hero-inner{
    min-height:310px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    position:relative;
    z-index:2;
}

.page-hero-content{
    max-width:760px;
}

.page-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:28px;
    font-size:13px;
    color:#6b7280;
}

.page-breadcrumb a{
    color:#315b88;
    text-decoration:none;
    transition:.2s ease;
}

.page-breadcrumb a:hover{
    color:#073b7a;
}

.page-breadcrumb i{
    font-size:10px;
    color:#9aa5b1;
}

.page-kicker{
    display:block;
    margin-bottom:10px;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.8px;
    color:#315f8e;
}

.page-hero h1{
    margin:0 0 14px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(34px,5vw,58px);
    line-height:1.05;
    letter-spacing:-1.8px;
    color:#10243d;
}

.page-hero p{
    max-width:700px;
    margin:0;
    color:#64748b;
    font-size:16px;
    line-height:1.8;
}

.page-hero-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:130px;
    height:130px;
    flex:0 0 130px;
    border:1px solid #dce4ed;
    background:#fff;
    border-radius:50%;
}

.page-hero-number span{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:34px;
    font-weight:800;
    color:#073b7a;
}


/* ==========================================================
   VISI
========================================================== */

.vision-section{
    padding:100px 0;
    background:#fff;
}

.vision-grid{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:80px;
    align-items:start;
}

.vision-label{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.vision-index{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:58px;
    font-weight:800;
    line-height:1;
    color:#073b7a;
}

.vision-label-text{
    font-size:13px;
    line-height:1.7;
    color:#8a96a5;
}

.vision-content{
    max-width:850px;
}

.vision-heading{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:35px;
}

.vision-icon{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef4fa;
    color:#073b7a;
    border:1px solid #dce7f2;
    border-radius:12px;
    font-size:23px;
}

.vision-heading small{
    display:block;
    margin-bottom:5px;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.5px;
    color:#7890a9;
}

.vision-heading h2{
    margin:0;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:25px;
    color:#172b44;
}

.vision-statement{
    position:relative;
    padding:45px 50px;
    background:#f7f9fc;
    border-left:4px solid #073b7a;
}

.vision-statement p{
    margin:0;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(21px,2.4vw,30px);
    font-weight:600;
    line-height:1.65;
    color:#243b53;
}

.quote-mark{
    position:absolute;
    left:18px;
    top:8px;
    font-family:Georgia,serif;
    font-size:65px;
    line-height:1;
    color:#cbd8e6;
}

.quote-bottom{
    left:auto;
    top:auto;
    right:18px;
    bottom:-12px;
}


/* ==========================================================
   MISSION
========================================================== */

.mission-section{
    padding:100px 0;
    background:#073b7a;
    position:relative;
    overflow:hidden;
}

.mission-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    right:-220px;
    top:-250px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
}

.mission-section .container{
    position:relative;
    z-index:2;
}

.section-header-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:50px;
}

.mission-section .section-header-row{
    margin-bottom:45px;
}

.section-kicker.light{
    color:rgba(255,255,255,.65);
}

.mission-section h2{
    margin:10px 0 0;
    color:#fff;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(28px,4vw,42px);
    line-height:1.2;
}

.mission-section h2 span{
    color:#b9d5ef;
}

.mission-section .section-header-row > p{
    max-width:430px;
    margin:0;
    color:rgba(255,255,255,.68);
    line-height:1.8;
    font-size:14px;
}

.mission-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.12);
}

.mission-card{
    position:relative;
    min-height:280px;
    padding:32px;
    background:#073b7a;
    border:0;
    transition:.25s ease;
}

.mission-card:hover{
    background:#0b467f;
}

.mission-number{
    position:absolute;
    top:25px;
    right:28px;
    font-size:11px;
    font-weight:800;
    color:rgba(255,255,255,.35);
}

.mission-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:30px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:10px;
    color:#fff;
    font-size:20px;
}

.mission-card h3{
    margin:0 0 12px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:18px;
    color:#fff;
}

.mission-card p{
    margin:0;
    color:rgba(255,255,255,.65);
    font-size:14px;
    line-height:1.75;
}


/* ==========================================================
   VALUES
========================================================== */

.values-section{
    padding:100px 0;
    background:#fff;
}

.values-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
}

.values-intro{
    max-width:520px;
}

.values-intro h2{
    margin:12px 0 20px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(28px,4vw,42px);
    line-height:1.2;
    color:#172b44;
}

.values-intro h2 span{
    color:#073b7a;
}

.values-intro p{
    margin:0;
    color:#6b7785;
    line-height:1.85;
}

.values-list{
    border-top:1px solid #e3e8ee;
}

.value-item{
    display:grid;
    grid-template-columns:50px 1fr;
    gap:20px;
    padding:25px 0;
    border-bottom:1px solid #e3e8ee;
}

.value-number{
    font-size:12px;
    font-weight:800;
    color:#315f8e;
}

.value-item h3{
    margin:0 0 6px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:17px;
    color:#1e334d;
}

.value-item p{
    margin:0;
    color:#758293;
    font-size:14px;
    line-height:1.65;
}


/* ==========================================================
   PROFILE INFORMATION
========================================================== */

.profile-info-section{
    padding:0 0 100px;
    background:#fff;
}

.profile-info-box{
    display:flex;
    align-items:center;
    gap:25px;
    padding:30px 35px;
    background:#f5f8fc;
    border:1px solid #dfe7ef;
}

.profile-info-icon{
    width:56px;
    height:56px;
    flex:0 0 56px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#073b7a;
    color:#fff;
    border-radius:10px;
    font-size:21px;
}

.profile-info-content{
    flex:1;
}

.profile-info-content > span{
    display:block;
    margin-bottom:5px;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
    color:#7890a9;
}

.profile-info-content h2{
    margin:0 0 5px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:18px;
    color:#172b44;
}

.profile-info-content p{
    margin:0;
    color:#6b7785;
    font-size:13px;
}

.profile-info-button{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:13px 18px;
    background:#073b7a;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    transition:.25s ease;
}

.profile-info-button:hover{
    background:#0b4d91;
}

.profile-info-button i{
    transition:.25s ease;
}

.profile-info-button:hover i{
    transform:translateX(4px);
}


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

@media(max-width:900px){

    .page-hero-inner{
        min-height:280px;
    }

    .page-hero-number{
        width:100px;
        height:100px;
        flex-basis:100px;
    }

    .page-hero-number span{
        font-size:28px;
    }

    .vision-grid{
        grid-template-columns:160px 1fr;
        gap:45px;
    }

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

    .values-grid{
        grid-template-columns:1fr;
        gap:55px;
    }

}


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

@media(max-width:700px){

    .page-hero-inner{
        min-height:250px;
        padding:35px 0;
    }

    .page-hero-number{
        display:none;
    }

    .page-hero h1{
        font-size:36px;
        letter-spacing:-1px;
    }

    .page-hero p{
        font-size:14px;
        line-height:1.7;
    }

    .page-breadcrumb{
        margin-bottom:20px;
    }


    .vision-section,
    .mission-section,
    .values-section{
        padding:70px 0;
    }

    .vision-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .vision-index{
        font-size:42px;
    }

    .vision-label{
        gap:12px;
    }

    .vision-label-text{
        display:none;
    }

    .vision-heading{
        margin-bottom:25px;
    }

    .vision-heading h2{
        font-size:21px;
    }

    .vision-statement{
        padding:35px 28px;
    }

    .vision-statement p{
        font-size:19px;
        line-height:1.6;
    }


    .section-header-row{
        display:block;
    }

    .mission-section .section-header-row > p{
        margin-top:20px;
    }

    .mission-grid{
        grid-template-columns:1fr;
    }

    .mission-card{
        min-height:auto;
        padding:28px;
    }


    .values-grid{
        gap:40px;
    }


    .profile-info-section{
        padding-bottom:70px;
    }

    .profile-info-box{
        display:block;
        padding:25px;
    }

    .profile-info-icon{
        margin-bottom:20px;
    }

    .profile-info-button{
        margin-top:22px;
    }

}


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

@media(max-width:420px){

    .page-hero h1{
        font-size:31px;
    }

    .vision-statement{
        padding:30px 22px;
        border-left-width:3px;
    }

    .vision-statement p{
        font-size:18px;
    }

    .mission-card{
        padding:24px;
    }

    .mission-card h3{
        font-size:17px;
    }

    .profile-info-button{
        width:100%;
        justify-content:space-between;
    }

}
/* ==========================================================
   STRUKTUR ORGANISASI
   SMP NEGERI 2 MOYUDAN
   GOVERNMENT MODERN MINIMAL
========================================================== */

.structure-section{
    padding:90px 0;
    background:#f5f7fa;
}

.structure-header{
    margin-bottom:55px;
    align-items:flex-end;
}

.structure-header h2{
    margin:10px 0 0;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(30px,4vw,48px);
    line-height:1.12;
    font-weight:800;
    color:#102a43;
    letter-spacing:-1.5px;
}

.structure-header h2 span{
    display:block;
    color:#0b5cab;
}

.structure-code{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
}

.structure-code span{
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
    color:#718096;
}

.structure-code strong{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:34px;
    color:#d8dee8;
}


/* ==========================================================
   ORGANIZATION TREE
========================================================== */

.organization-tree{
    position:relative;
    max-width:1120px;
    margin:0 auto;
}

.organization-level{
    display:flex;
    justify-content:center;
    position:relative;
}

.level-main{
    z-index:2;
}

.organization-card{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:20px;
    width:100%;
    padding:25px;
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:10px;
    box-shadow:0 8px 25px rgba(15,23,42,.05);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.organization-card:hover{
    transform:translateY(-4px);
    border-color:#b8cce2;
    box-shadow:0 14px 35px rgba(15,23,42,.09);
}

.main-card{
    max-width:500px;
    border-top:4px solid #0b5cab;
}

.organization-icon{
    flex:0 0 52px;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef5fc;
    color:#0b5cab;
    border:1px solid #d8e7f5;
    border-radius:8px;
    font-size:23px;
}

.organization-info{
    min-width:0;
}

.organization-info span{
    display:block;
    margin-bottom:6px;
    color:#718096;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.2px;
}

.organization-info h3{
    margin:0;
    color:#172b4d;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:18px;
    line-height:1.35;
    font-weight:800;
}

.organization-info p{
    margin:8px 0 0;
    color:#718096;
    font-size:13px;
    line-height:1.7;
}


/* ==========================================================
   CONNECTOR
========================================================== */

.organization-connector{
    position:relative;
    width:100%;
    height:55px;
    display:flex;
    justify-content:center;
}

.organization-connector::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:1px;
    background:#cbd5e1;
}

.organization-connector span{
    position:absolute;
    top:50%;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#0b5cab;
    border:3px solid #f5f7fa;
    box-sizing:content-box;
    transform:translateY(-50%);
    z-index:2;
}


/* ==========================================================
   THREE MANAGEMENT CARDS
========================================================== */

.level-three{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.level-three .organization-card{
    min-height:190px;
}


/* ==========================================================
   SUPPORTING UNITS
========================================================== */

.organization-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.organization-card.compact{
    min-height:220px;
    flex-direction:column;
    gap:16px;
    padding:22px;
}

.organization-card.compact .organization-icon{
    width:46px;
    height:46px;
    flex-basis:46px;
    font-size:20px;
}

.organization-card.compact .organization-info h3{
    font-size:16px;
}

.organization-card.compact .organization-info p{
    font-size:12.5px;
}


/* ==========================================================
   OFFICIAL INFORMATION
========================================================== */

.official-information{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:24px;
    margin-top:55px;
    padding:28px 30px;
    background:#ffffff;
    border:1px solid #dfe6ee;
    border-left:4px solid #0b5cab;
    border-radius:8px;
}

.official-icon{
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef5fc;
    color:#0b5cab;
    border-radius:7px;
    font-size:23px;
}

.official-content span{
    display:block;
    margin-bottom:5px;
    color:#0b5cab;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.4px;
}

.official-content h3{
    margin:0;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:18px;
    font-weight:800;
    color:#172b4d;
}

.official-content p{
    max-width:800px;
    margin:7px 0 0;
    color:#718096;
    font-size:13px;
    line-height:1.7;
}

.official-number{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    padding-left:30px;
    border-left:1px solid #e2e8f0;
}

.official-number strong{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:20px;
    color:#172b4d;
}

.official-number span{
    margin-top:3px;
    color:#718096;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
}


/* ==========================================================
   PROFILE NAVIGATION
========================================================== */

.profile-navigation{
    padding:0 0 90px;
    background:#f5f7fa;
}

.profile-navigation-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.profile-nav-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:90px;
    padding:20px 24px;
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:8px;
    text-decoration:none;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.profile-nav-card:hover{
    transform:translateY(-3px);
    border-color:#b7cbe0;
    box-shadow:0 10px 25px rgba(15,23,42,.07);
}

.profile-nav-card div{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.profile-nav-card span{
    color:#94a3b8;
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
}

.profile-nav-card strong{
    color:#172b4d;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:14px;
    font-weight:800;
}

.profile-nav-card i{
    color:#0b5cab;
    font-size:19px;
    transition:transform .2s ease;
}

.profile-nav-card:hover i{
    transform:translateX(4px);
}


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

@media(max-width:991px){

    .structure-section{
        padding:70px 0;
    }

    .level-three{
        grid-template-columns:1fr;
    }

    .level-three .organization-card{
        min-height:auto;
    }

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

    .official-information{
        grid-template-columns:auto 1fr;
    }

    .official-number{
        grid-column:2;
        align-items:flex-start;
        padding-left:0;
        padding-top:18px;
        border-left:none;
        border-top:1px solid #e2e8f0;
    }

    .profile-navigation-grid{
        grid-template-columns:1fr;
    }

}


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

@media(max-width:767px){

    .structure-section{
        padding:55px 0;
    }

    .structure-header{
        align-items:flex-start;
        margin-bottom:35px;
    }

    .structure-header h2{
        font-size:30px;
        letter-spacing:-1px;
    }

    .structure-code{
        display:none;
    }

    .organization-card{
        padding:20px;
        gap:15px;
    }

    .main-card{
        max-width:100%;
    }

    .organization-icon{
        flex-basis:44px;
        width:44px;
        height:44px;
        font-size:19px;
    }

    .organization-info h3{
        font-size:16px;
    }

    .organization-info p{
        font-size:12px;
    }

    .level-three{
        grid-template-columns:1fr;
        gap:12px;
    }

    .organization-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .organization-card.compact{
        min-height:auto;
        flex-direction:row;
        padding:18px;
    }

    .organization-connector{
        height:35px;
    }

    .official-information{
        grid-template-columns:1fr;
        gap:16px;
        padding:22px;
        margin-top:35px;
    }

    .official-number{
        grid-column:auto;
        padding-top:15px;
    }

    .profile-navigation{
        padding-bottom:60px;
    }

    .profile-nav-card{
        min-height:76px;
        padding:17px 18px;
    }

}


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

@media(max-width:480px){

    .organization-card{
        padding:17px;
    }

    .organization-card.compact{
        padding:16px;
    }

    .organization-icon{
        flex-basis:40px;
        width:40px;
        height:40px;
        font-size:17px;
    }

    .organization-info h3{
        font-size:15px;
    }

    .organization-info p{
        font-size:11.5px;
        line-height:1.6;
    }

    .official-content h3{
        font-size:16px;
    }

    .official-content p{
        font-size:12px;
    }

}
/* ==========================================================
   SEJARAH SEKOLAH
   SMP NEGERI 2 MOYUDAN
   MODERN GOVERNMENT MINIMAL
========================================================== */

.history-section{
    padding:90px 0;
    background:#f5f7fa;
}


/* ==========================================================
   HEADER
========================================================== */

.history-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:55px;
}

.history-header h2{
    margin:10px 0 0;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(30px,4vw,48px);
    line-height:1.12;
    letter-spacing:-1.5px;
    font-weight:800;
    color:#102a43;
}

.history-header h2 span{
    display:block;
    color:#0b5cab;
}

.history-year{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

.history-year strong{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:42px;
    line-height:1;
    color:#d6dee8;
    letter-spacing:-2px;
}

.history-year span{
    margin-top:7px;
    color:#718096;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.3px;
}


/* ==========================================================
   INTRO
========================================================== */

.history-intro{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:30px;
    max-width:1000px;
    margin:0 auto 70px;
    padding:35px;
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-left:4px solid #0b5cab;
    border-radius:9px;
    box-shadow:0 8px 25px rgba(15,23,42,.04);
}

.history-intro-number{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:42px;
    line-height:1;
    font-weight:800;
    color:#d8e1eb;
}

.history-intro-content h3{
    margin:0 0 15px;
    color:#172b4d;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:24px;
    font-weight:800;
}

.history-intro-content p{
    max-width:850px;
    margin:0 0 10px;
    color:#64748b;
    font-size:14px;
    line-height:1.85;
}

.history-intro-content p:last-child{
    margin-bottom:0;
}


/* ==========================================================
   TIMELINE
========================================================== */

.history-timeline{
    position:relative;
    max-width:1000px;
    margin:0 auto;
    padding:10px 0;
}

.history-timeline::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:34px;
    width:1px;
    background:#cbd5e1;
}

.history-item{
    position:relative;
    display:grid;
    grid-template-columns:70px 1fr;
    gap:25px;
    margin-bottom:35px;
}

.history-item:last-child{
    margin-bottom:0;
}

.history-marker{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
}

.history-marker span{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    border:1px solid #cbd5e1;
    border-radius:50%;
    color:#0b5cab;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:11px;
    font-weight:800;
    box-shadow:0 3px 12px rgba(15,23,42,.05);
}

.history-item:first-child .history-marker span{
    background:#0b5cab;
    border-color:#0b5cab;
    color:#ffffff;
}


/* ==========================================================
   HISTORY CARD
========================================================== */

.history-card{
    display:grid;
    grid-template-columns:145px 1fr;
    gap:30px;
    padding:28px;
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:9px;
    box-shadow:0 7px 22px rgba(15,23,42,.04);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.history-card:hover{
    transform:translateY(-3px);
    border-color:#b9cde1;
    box-shadow:0 13px 30px rgba(15,23,42,.08);
}

.history-card-year{
    color:#0b5cab;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:17px;
    line-height:1.4;
    font-weight:800;
}

.history-card-content span{
    display:block;
    margin-bottom:6px;
    color:#94a3b8;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.4px;
}

.history-card-content h3{
    margin:0;
    color:#172b4d;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:19px;
    font-weight:800;
}

.history-card-content p{
    margin:10px 0 0;
    color:#64748b;
    font-size:13px;
    line-height:1.8;
}


/* ==========================================================
   CURRENT / PRESENT BOX
========================================================== */

.history-present{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:25px;
    max-width:1000px;
    margin:70px auto 0;
    padding:30px;
    background:#ffffff;
    border:1px solid #dce5ee;
    border-top:3px solid #0b5cab;
    border-radius:9px;
    box-shadow:0 9px 28px rgba(15,23,42,.05);
}

.history-present-icon{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef5fc;
    color:#0b5cab;
    border-radius:8px;
    font-size:24px;
}

.history-present-content span{
    display:block;
    margin-bottom:6px;
    color:#0b5cab;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.4px;
}

.history-present-content h3{
    margin:0;
    color:#172b4d;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:19px;
    font-weight:800;
}

.history-present-content p{
    max-width:700px;
    margin:8px 0 0;
    color:#64748b;
    font-size:13px;
    line-height:1.75;
}

.history-present-data{
    display:flex;
    align-items:center;
    gap:25px;
    padding-left:25px;
    border-left:1px solid #e2e8f0;
}

.history-present-data div{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    min-width:55px;
}

.history-present-data strong{
    color:#172b4d;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:16px;
    font-weight:800;
}

.history-present-data span{
    margin-top:4px;
    color:#94a3b8;
    font-size:9px;
    font-weight:700;
    letter-spacing:.8px;
}


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

@media(max-width:991px){

    .history-section{
        padding:70px 0;
    }

    .history-header{
        margin-bottom:45px;
    }

    .history-intro{
        grid-template-columns:60px 1fr;
        padding:28px;
    }

    .history-card{
        grid-template-columns:120px 1fr;
        gap:20px;
    }

    .history-present{
        grid-template-columns:auto 1fr;
    }

    .history-present-data{
        grid-column:2;
        justify-content:flex-start;
        align-items:flex-start;
        padding-left:0;
        padding-top:20px;
        border-left:none;
        border-top:1px solid #e2e8f0;
    }

    .history-present-data div{
        align-items:flex-start;
    }

}


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

@media(max-width:767px){

    .history-section{
        padding:55px 0;
    }

    .history-header{
        align-items:flex-start;
        margin-bottom:35px;
    }

    .history-header h2{
        font-size:30px;
        letter-spacing:-1px;
    }

    .history-year{
        display:none;
    }

    .history-intro{
        grid-template-columns:1fr;
        gap:15px;
        margin-bottom:45px;
        padding:22px;
    }

    .history-intro-number{
        font-size:30px;
    }

    .history-intro-content h3{
        font-size:20px;
    }

    .history-intro-content p{
        font-size:12.5px;
        line-height:1.75;
    }

    .history-timeline::before{
        left:22px;
    }

    .history-item{
        grid-template-columns:45px 1fr;
        gap:15px;
        margin-bottom:22px;
    }

    .history-marker span{
        width:42px;
        height:42px;
        font-size:10px;
    }

    .history-card{
        grid-template-columns:1fr;
        gap:12px;
        padding:20px;
    }

    .history-card-year{
        font-size:15px;
    }

    .history-card-content h3{
        font-size:17px;
    }

    .history-card-content p{
        font-size:12px;
        line-height:1.7;
    }

    .history-present{
        grid-template-columns:1fr;
        gap:17px;
        margin-top:45px;
        padding:22px;
    }

    .history-present-content h3{
        font-size:17px;
    }

    .history-present-content p{
        font-size:12px;
    }

    .history-present-data{
        grid-column:auto;
        gap:20px;
        padding-top:17px;
    }

    .history-present-data div{
        min-width:auto;
    }

}


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

@media(max-width:480px){

    .history-intro{
        padding:18px;
    }

    .history-card{
        padding:17px;
    }

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

    .history-card-content p{
        font-size:11.5px;
    }

    .history-present{
        padding:18px;
    }

    .history-present-data{
        gap:15px;
    }

    .history-present-data strong{
        font-size:14px;
    }

}
/* ==========================================================
   AKADEMIK PAGE
   SMP NEGERI 2 MOYUDAN
   GOVERNMENT MODERN MINIMAL
========================================================== */

.academic-page{
    background:#f5f7fa;
    color:#172033;
}


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

.page-hero{
    position:relative;
    min-height:390px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #063b78,
            #0b5da7
        );
}

.academic-hero::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-180px;
    top:-220px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
}

.academic-hero::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-60px;
    bottom:-230px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
}

.page-hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(3,37,76,.30),
            transparent
        );
}

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

.page-hero-content{
    max-width:760px;
    padding:70px 0 65px;
}

.page-hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    color:#dcecff;
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
}

.page-hero-kicker::before{
    content:"";
    width:28px;
    height:2px;
    background:#fff;
}

.page-hero h1{
    margin:0;
    color:#fff;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(38px,5vw,64px);
    line-height:1.08;
    letter-spacing:-2px;
    font-weight:800;
}

.page-hero h1 span{
    display:block;
    color:#bcd9f7;
}

.page-hero p{
    max-width:650px;
    margin:22px 0 0;
    color:rgba(255,255,255,.82);
    font-size:16px;
    line-height:1.8;
}

.page-hero-breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:28px;
    color:rgba(255,255,255,.65);
    font-size:13px;
}

.page-hero-breadcrumb a{
    color:#fff;
    text-decoration:none;
    font-weight:700;
}

.page-hero-breadcrumb i{
    font-size:10px;
}


/* ==========================================================
   ACADEMIC MENU
========================================================== */

.academic-menu-section{
    position:relative;
    z-index:5;
    margin-top:-45px;
}

.academic-menu-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    overflow:hidden;
    background:#dfe5ec;
    border:1px solid #dfe5ec;
    border-radius:12px;
    box-shadow:0 14px 35px rgba(15,45,80,.10);
}

.academic-menu-card{
    min-height:112px;
    display:flex;
    align-items:center;
    gap:16px;
    position:relative;
    padding:22px;
    background:#fff;
    color:#182337;
    text-decoration:none;
    transition:.25s ease;
}

.academic-menu-card:hover{
    background:#f8fbff;
    transform:translateY(-2px);
}

.academic-menu-card.active{
    background:#073b7a;
    color:#fff;
}

.academic-menu-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#edf4fb;
    color:#07549a;
    font-size:20px;
}

.academic-menu-card.active .academic-menu-icon{
    background:rgba(255,255,255,.13);
    color:#fff;
}

.academic-menu-card span{
    display:block;
    margin-bottom:4px;
    color:#7a8698;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.academic-menu-card.active span{
    color:#b9d7f4;
}

.academic-menu-card strong{
    display:block;
    font-size:14px;
    font-weight:800;
}

.academic-menu-arrow{
    position:absolute;
    right:18px;
    top:18px;
    font-size:13px;
    opacity:.35;
}

.academic-menu-card.active .academic-menu-arrow{
    opacity:.8;
}


/* ==========================================================
   INTRO
========================================================== */

.academic-intro-section{
    padding:100px 0 95px;
    background:#fff;
}

.academic-intro-grid{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:80px;
    max-width:1100px;
    margin:auto;
}

.academic-section-label{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.academic-section-label .section-kicker{
    margin-bottom:25px;
}

.academic-section-label strong{
    font-family:'Plus Jakarta Sans',sans-serif;
    color:#dbe3ec;
    font-size:74px;
    line-height:1;
    letter-spacing:-5px;
}

.academic-section-label small{
    margin-top:12px;
    color:#7c899a;
    font-size:12px;
    font-weight:600;
}

.academic-intro-content{
    max-width:780px;
}

.academic-intro-content h2{
    margin:0 0 24px;
    font-family:'Plus Jakarta Sans',sans-serif;
    color:#172033;
    font-size:clamp(30px,4vw,48px);
    line-height:1.15;
    letter-spacing:-1.8px;
}

.academic-intro-content h2 span{
    display:block;
    color:#0a579d;
}

.academic-intro-content p{
    margin:0 0 17px;
    color:#687588;
    font-size:15px;
    line-height:1.9;
}


/* ==========================================================
   INFORMATION
========================================================== */

.academic-info-section{
    padding:90px 0;
    background:#f5f7fa;
}

.academic-info-section .section-header-row{
    margin-bottom:45px;
}

.academic-info-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.academic-info-card{
    position:relative;
    min-height:310px;
    padding:30px 26px;
    overflow:hidden;
    background:#fff;
    border:1px solid #e2e7ed;
    border-radius:10px;
    color:#172033;
    text-decoration:none;
    transition:.28s ease;
}

.academic-info-card:hover{
    border-color:#b9cee4;
    box-shadow:0 15px 35px rgba(20,55,90,.08);
    transform:translateY(-5px);
}

.academic-info-number{
    position:absolute;
    right:22px;
    top:18px;
    color:#e7edf3;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:34px;
    font-weight:800;
}

.academic-info-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:30px;
    border-radius:8px;
    background:#edf4fb;
    color:#07549a;
    font-size:20px;
}

.academic-info-card h3{
    margin:0 0 12px;
    font-size:17px;
    line-height:1.4;
    font-weight:800;
}

.academic-info-card p{
    margin:0;
    color:#758195;
    font-size:13px;
    line-height:1.75;
}

.academic-card-link{
    position:absolute;
    left:26px;
    bottom:25px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#07549a;
    font-size:12px;
    font-weight:800;
}

.academic-card-link i{
    transition:.2s ease;
}

.academic-info-card:hover .academic-card-link i{
    transform:translateX(4px);
}


/* ==========================================================
   PRINCIPLE
========================================================== */

.academic-principle-section{
    padding:90px 0;
    background:#fff;
}

.academic-principle-box{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:70px;
    padding:55px;
    background:#073b7a;
    border-radius:12px;
    overflow:hidden;
    position:relative;
}

.academic-principle-box::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    right:-180px;
    bottom:-230px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
}

.academic-principle-heading{
    position:relative;
    z-index:2;
}

.academic-principle-heading .section-kicker{
    color:#c9def3;
}

.academic-principle-heading h2{
    margin:20px 0;
    color:#fff;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:38px;
    line-height:1.2;
    letter-spacing:-1.5px;
}

.academic-principle-heading h2 span{
    display:block;
    color:#b7d6f3;
}

.academic-principle-heading p{
    max-width:470px;
    color:rgba(255,255,255,.72);
    font-size:14px;
    line-height:1.8;
}

.academic-principle-list{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.12);
}

.academic-principle-item{
    position:relative;
    min-height:180px;
    padding:25px;
    background:rgba(255,255,255,.045);
}

.academic-principle-item > span{
    position:absolute;
    top:18px;
    right:20px;
    color:rgba(255,255,255,.25);
    font-size:12px;
    font-weight:800;
}

.academic-principle-item i{
    display:block;
    margin-bottom:17px;
    color:#bcd9f4;
    font-size:22px;
}

.academic-principle-item strong{
    display:block;
    color:#fff;
    font-size:14px;
}

.academic-principle-item p{
    margin:9px 0 0;
    color:rgba(255,255,255,.62);
    font-size:12px;
    line-height:1.65;
}


/* ==========================================================
   SCHOOL DATA
========================================================== */

.academic-profile-section{
    padding:90px 0;
    background:#f5f7fa;
}

.academic-profile-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:90px;
    align-items:start;
}

.academic-profile-content h2{
    margin:18px 0;
    font-family:'Plus Jakarta Sans',sans-serif;
    color:#172033;
    font-size:40px;
    line-height:1.2;
    letter-spacing:-1.5px;
}

.academic-profile-content h2 span{
    display:block;
    color:#07549a;
}

.academic-profile-content p{
    max-width:420px;
    color:#738094;
    font-size:14px;
    line-height:1.8;
}

.academic-data-list{
    border-top:1px solid #dce2e9;
}

.academic-data-item{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:25px;
    padding:20px 0;
    border-bottom:1px solid #dce2e9;
}

.academic-data-item span{
    color:#7b8798;
    font-size:12px;
}

.academic-data-item strong{
    color:#263247;
    font-size:13px;
    font-weight:800;
}


/* ==========================================================
   CTA
========================================================== */

.academic-cta-section{
    padding:30px 0 90px;
    background:#f5f7fa;
}

.academic-cta-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:45px 50px;
    background:#fff;
    border:1px solid #dfe5eb;
    border-left:4px solid #07549a;
    border-radius:10px;
}

.academic-cta-box > div:first-child{
    max-width:650px;
}

.academic-cta-box span{
    color:#07549a;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.5px;
}

.academic-cta-box h2{
    margin:12px 0;
    color:#172033;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:28px;
    line-height:1.3;
}

.academic-cta-box p{
    margin:0;
    color:#778396;
    font-size:13px;
    line-height:1.7;
}

.academic-cta-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:190px;
}

.academic-cta-primary,
.academic-cta-secondary{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:45px;
    padding:0 20px;
    border-radius:6px;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    transition:.2s ease;
}

.academic-cta-primary{
    background:#07549a;
    color:#fff;
}

.academic-cta-primary:hover{
    background:#063f75;
}

.academic-cta-secondary{
    background:#edf3f8;
    color:#07549a;
}

.academic-cta-secondary:hover{
    background:#e1ebf4;
}


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

@media(max-width:1000px){

    .academic-menu-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .academic-info-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .academic-intro-grid{
        grid-template-columns:150px 1fr;
        gap:50px;
    }

    .academic-principle-box{
        grid-template-columns:1fr;
        gap:45px;
    }

    .academic-profile-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

}


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

@media(max-width:700px){

    .page-hero{
        min-height:350px;
    }

    .page-hero-content{
        padding:55px 0;
    }

    .page-hero h1{
        font-size:38px;
        letter-spacing:-1.2px;
    }

    .page-hero p{
        font-size:14px;
        line-height:1.7;
    }

    .academic-menu-section{
        margin-top:-25px;
    }

    .academic-menu-grid{
        grid-template-columns:1fr;
        border-radius:9px;
    }

    .academic-menu-card{
        min-height:88px;
        padding:17px;
    }

    .academic-intro-section,
    .academic-info-section,
    .academic-principle-section,
    .academic-profile-section{
        padding:65px 0;
    }

    .academic-intro-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .academic-section-label strong{
        font-size:55px;
    }

    .academic-intro-content h2{
        font-size:32px;
    }

    .academic-info-grid{
        grid-template-columns:1fr;
    }

    .academic-info-card{
        min-height:280px;
    }

    .academic-principle-box{
        padding:30px 22px;
        border-radius:9px;
    }

    .academic-principle-heading h2{
        font-size:30px;
    }

    .academic-principle-list{
        grid-template-columns:1fr;
    }

    .academic-principle-item{
        min-height:auto;
    }

    .academic-data-item{
        grid-template-columns:1fr;
        gap:6px;
    }

    .academic-cta-section{
        padding-bottom:65px;
    }

    .academic-cta-box{
        flex-direction:column;
        align-items:flex-start;
        padding:30px 25px;
    }

    .academic-cta-actions{
        width:100%;
    }

}


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

@media(max-width:420px){

    .page-hero h1{
        font-size:32px;
    }

    .academic-menu-card strong{
        font-size:13px;
    }

    .academic-info-card{
        padding:25px 22px;
    }

    .academic-cta-box h2{
        font-size:23px;
    }

}
/* ==========================================================
   SMP NEGERI 2 MOYUDAN
   GURU & TENAGA KEPENDIDIKAN
   GOVERNMENT MODERN STYLE
========================================================== */


/* ==========================================================
   ROOT / GLOBAL
========================================================== */

:root{

    --gov-primary:#073b7a;
    --gov-primary-dark:#052d5d;
    --gov-primary-light:#0d5cad;

    --gov-blue:#1261a0;
    --gov-blue-soft:#eaf3fb;

    --gov-white:#ffffff;
    --gov-bg:#f5f7fa;
    --gov-bg-soft:#f8fafc;

    --gov-text:#172033;
    --gov-text-soft:#5f6b7a;

    --gov-border:#e3e8ef;

    --gov-shadow:
        0 10px 30px rgba(7,59,122,.07);

    --gov-shadow-hover:
        0 18px 40px rgba(7,59,122,.13);

}


/* ==========================================================
   GURU PAGE
========================================================== */

.guru-page{

    background:#ffffff;

    color:var(--gov-text);

    overflow:hidden;

}


/* ==========================================================
   CONTAINER
========================================================== */

.guru-page .container{

    width:min(
        1180px,
        calc(100% - 40px)
    );

    margin-left:auto;
    margin-right:auto;

}


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

.guru-page .page-hero{

    position:relative;

    padding:95px 0 90px;

    background:
        linear-gradient(
            135deg,
            #073b7a 0%,
            #0a4d96 55%,
            #1261a0 100%
        );

    overflow:hidden;

}


/* decorative government line */

.guru-page .page-hero::before{

    content:"";

    position:absolute;

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

    width:420px;
    height:420px;

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

    border-radius:50%;

}


.guru-page .page-hero::after{

    content:"";

    position:absolute;

    bottom:-180px;
    left:-120px;

    width:420px;
    height:420px;

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

    border-radius:50%;

}


.guru-page .page-hero-content{

    position:relative;

    z-index:2;

    max-width:780px;

}


/* ==========================================================
   PAGE KICKER
========================================================== */

.guru-page .page-kicker{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    color:#cfe5ff;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


.guru-page .page-kicker::before{

    content:"";

    width:28px;
    height:2px;

    background:#ffffff;

    opacity:.75;

}


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

.guru-page .page-hero h1{

    margin:0;

    color:#ffffff;

    font-family:
        "Plus Jakarta Sans",
        "Inter",
        sans-serif;

    font-size:clamp(
        36px,
        5vw,
        58px
    );

    line-height:1.08;

    font-weight:800;

    letter-spacing:-1.8px;

}


.guru-page .page-hero h1 span{

    display:block;

    color:#9ed0ff;

}


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

.guru-page .page-hero p{

    max-width:700px;

    margin:24px 0 0;

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

    font-size:16px;

    line-height:1.8;

}


/* ==========================================================
   BREADCRUMB
========================================================== */

.guru-page .breadcrumb-section{

    background:#ffffff;

    border-bottom:1px solid var(--gov-border);

}


.guru-page .breadcrumb{

    min-height:58px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    font-size:13px;

    color:#7a8594;

}


.guru-page .breadcrumb a{

    color:var(--gov-primary);

    text-decoration:none;

    font-weight:600;

    transition:.2s ease;

}


.guru-page .breadcrumb a:hover{

    color:var(--gov-primary-light);

}


.guru-page .breadcrumb i{

    font-size:10px;

    color:#aab3bf;

}


.guru-page .breadcrumb span{

    color:#6d7785;

    font-weight:500;

}


/* ==========================================================
   SECTION KICKER
========================================================== */

.guru-page .section-kicker{

    display:inline-flex;

    align-items:center;

    gap:9px;

    color:var(--gov-primary);

    font-size:11px;

    line-height:1;

    font-weight:800;

    letter-spacing:1.8px;

    text-transform:uppercase;

}


.guru-page .section-kicker::before{

    content:"";

    width:25px;

    height:2px;

    background:var(--gov-primary);

}


/* ==========================================================
   GURU INTRO
========================================================== */

.guru-page .guru-intro{

    padding:100px 0;

    background:#ffffff;

}


.guru-page .guru-intro-grid{

    display:grid;

    grid-template-columns:
        220px
        minmax(0,1fr);

    gap:70px;

    align-items:start;

}


/* ==========================================================
   INTRO LABEL
========================================================== */

.guru-page .guru-intro-label{

    position:relative;

    padding-top:5px;

}


.guru-page .guru-intro-number{

    margin-top:25px;

    color:#dce7f2;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size:82px;

    line-height:.9;

    font-weight:800;

    letter-spacing:-5px;

}


.guru-page .guru-intro-small{

    display:block;

    margin-top:18px;

    color:#788494;

    font-size:12px;

    font-weight:700;

    letter-spacing:.4px;

}


/* ==========================================================
   INTRO CONTENT
========================================================== */

.guru-page .guru-intro-content{

    max-width:820px;

}


.guru-page .guru-intro-content h2{

    margin:0 0 28px;

    color:var(--gov-text);

    font-family:
        "Plus Jakarta Sans",
        "Inter",
        sans-serif;

    font-size:clamp(
        30px,
        4vw,
        48px
    );

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1.4px;

}


.guru-page .guru-intro-content h2 span{

    display:block;

    color:var(--gov-primary);

}


.guru-page .guru-intro-content p{

    max-width:780px;

    margin:0 0 18px;

    color:var(--gov-text-soft);

    font-size:16px;

    line-height:1.9;

}


/* ==========================================================
   GURU STATS
========================================================== */

.guru-page .guru-stats{

    padding:65px 0;

    background:var(--gov-bg);

    border-top:1px solid var(--gov-border);

    border-bottom:1px solid var(--gov-border);

}


.guru-page .guru-stats-grid{

    display:grid;

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

    gap:18px;

}


/* ==========================================================
   STAT CARD
========================================================== */

.guru-page .guru-stat-card{

    min-height:105px;

    display:flex;

    align-items:center;

    gap:16px;

    padding:22px;

    background:#ffffff;

    border:1px solid var(--gov-border);

    border-radius:8px;

    box-shadow:
        0 5px 18px rgba(0,0,0,.025);

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

}


.guru-page .guru-stat-card:hover{

    transform:translateY(-4px);

    border-color:#cbd9e8;

    box-shadow:var(--gov-shadow);

}


/* ==========================================================
   STAT ICON
========================================================== */

.guru-page .guru-stat-icon{

    width:46px;
    height:46px;

    flex:0 0 46px;

    display:flex;

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

    border-radius:7px;

    background:var(--gov-blue-soft);

    color:var(--gov-primary);

    font-size:20px;

}


.guru-page .guru-stat-card strong{

    display:block;

    margin-bottom:5px;

    color:var(--gov-text);

    font-size:16px;

    font-weight:800;

}


.guru-page .guru-stat-card span{

    display:block;

    color:#788494;

    font-size:12px;

    line-height:1.5;

}


/* ==========================================================
   GURU LIST SECTION
========================================================== */

.guru-page .guru-list-section{

    padding:100px 0;

    background:#ffffff;

}


/* ==========================================================
   SECTION HEADER
========================================================== */

.guru-page .section-header-row{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:40px;

    margin-bottom:45px;

}


.guru-page .section-header-row h2{

    margin:15px 0 10px;

    color:var(--gov-text);

    font-family:
        "Plus Jakarta Sans",
        "Inter",
        sans-serif;

    font-size:38px;

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1px;

}


.guru-page .section-header-row p{

    max-width:650px;

    margin:0;

    color:var(--gov-text-soft);

    font-size:15px;

    line-height:1.75;

}


/* ==========================================================
   GURU GRID
========================================================== */

.guru-page .guru-grid{

    display:grid;

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

    gap:22px;

}


/* ==========================================================
   GURU CARD
========================================================== */

.guru-page .guru-card{

    overflow:hidden;

    background:#ffffff;

    border:1px solid var(--gov-border);

    border-radius:9px;

    box-shadow:
        0 5px 20px rgba(0,0,0,.025);

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

}


.guru-page .guru-card:hover{

    transform:translateY(-5px);

    border-color:#cad8e7;

    box-shadow:var(--gov-shadow-hover);

}


/* ==========================================================
   GURU PHOTO
========================================================== */

.guru-page .guru-photo{

    position:relative;

    height:270px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #edf4fa,
            #dfeaf5
        );

}


.guru-page .guru-photo-placeholder{

    width:100%;
    height:100%;

    display:flex;

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

    color:#8ca0b5;

    font-size:68px;

}


.guru-page .guru-photo-placeholder i{

    opacity:.65;

}


/* ==========================================================
   GURU CARD BODY
========================================================== */

.guru-page .guru-card-body{

    padding:22px;

}


.guru-page .guru-role{

    display:block;

    margin-bottom:9px;

    color:var(--gov-primary);

    font-size:10px;

    font-weight:800;

    letter-spacing:1.3px;

}


.guru-page .guru-card-body h3{

    margin:0 0 9px;

    color:var(--gov-text);

    font-family:
        "Plus Jakarta Sans",
        "Inter",
        sans-serif;

    font-size:19px;

    line-height:1.3;

    font-weight:800;

}


.guru-page .guru-card-body p{

    margin:0;

    color:#727e8d;

    font-size:13px;

    line-height:1.7;

}


/* ==========================================================
   TENDIK SECTION
========================================================== */

.guru-page .tendik-section{

    padding:90px 0;

    background:var(--gov-bg);

}


.guru-page .tendik-box{

    display:grid;

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

    gap:70px;

    padding:60px;

    background:#ffffff;

    border:1px solid var(--gov-border);

    border-radius:10px;

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

}


/* ==========================================================
   TENDIK HEADING
========================================================== */

.guru-page .tendik-heading h2{

    margin:18px 0 18px;

    color:var(--gov-text);

    font-family:
        "Plus Jakarta Sans",
        "Inter",
        sans-serif;

    font-size:36px;

    line-height:1.2;

    font-weight:800;

    letter-spacing:-1px;

}


.guru-page .tendik-heading h2 span{

    display:block;

    color:var(--gov-primary);

}


.guru-page .tendik-heading p{

    max-width:500px;

    margin:0;

    color:var(--gov-text-soft);

    font-size:15px;

    line-height:1.8;

}


/* ==========================================================
   TENDIK LIST
========================================================== */

.guru-page .tendik-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}


/* ==========================================================
   TENDIK ITEM
========================================================== */

.guru-page .tendik-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px;

    background:#f9fbfd;

    border:1px solid var(--gov-border);

    border-radius:7px;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.guru-page .tendik-item:hover{

    background:#f3f8fd;

    border-color:#cbd9e8;

    transform:translateX(4px);

}


/* ==========================================================
   TENDIK ICON
========================================================== */

.guru-page .tendik-icon{

    width:44px;
    height:44px;

    flex:0 0 44px;

    display:flex;

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

    border-radius:6px;

    background:var(--gov-blue-soft);

    color:var(--gov-primary);

    font-size:19px;

}


.guru-page .tendik-item span{

    display:block;

    margin-bottom:5px;

    color:#788494;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.2px;

}


.guru-page .tendik-item strong{

    display:block;

    color:var(--gov-text);

    font-size:14px;

    font-weight:750;

}


/* ==========================================================
   GURU INFO SECTION
========================================================== */

.guru-page .guru-info-section{

    padding:90px 0;

    background:#ffffff;

}


/* ==========================================================
   INFO BOX
========================================================== */

.guru-page .guru-info-box{

    display:grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:center;

    gap:25px;

    padding:35px 40px;

    background:
        linear-gradient(
            135deg,
            #f5f9fd,
            #ffffff
        );

    border:1px solid var(--gov-border);

    border-left:4px solid var(--gov-primary);

    border-radius:8px;

}


/* ==========================================================
   INFO ICON
========================================================== */

.guru-page .guru-info-icon{

    width:54px;
    height:54px;

    display:flex;

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

    background:var(--gov-blue-soft);

    color:var(--gov-primary);

    border-radius:7px;

    font-size:24px;

}


/* ==========================================================
   INFO CONTENT
========================================================== */

.guru-page .guru-info-box h2{

    margin:10px 0 8px;

    color:var(--gov-text);

    font-family:
        "Plus Jakarta Sans",
        "Inter",
        sans-serif;

    font-size:22px;

    line-height:1.3;

    font-weight:800;

}


.guru-page .guru-info-box p{

    margin:0;

    color:var(--gov-text-soft);

    font-size:14px;

    line-height:1.7;

}


/* ==========================================================
   OUTLINE BUTTON
========================================================== */

.guru-page .outline-button{

    min-height:44px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:0 20px;

    border:1px solid #b9c8d8;

    border-radius:6px;

    background:#ffffff;

    color:var(--gov-primary);

    text-decoration:none;

    font-size:12px;

    font-weight:750;

    white-space:nowrap;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.guru-page .outline-button i{

    font-size:14px;

}


.guru-page .outline-button:hover{

    background:var(--gov-primary);

    border-color:var(--gov-primary);

    color:#ffffff;

    transform:translateY(-2px);

}


/* ==========================================================
   RESPONSIVE 1100px
========================================================== */

@media (max-width:1100px){

    .guru-page .guru-grid{

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

    }


    .guru-page .guru-stats-grid{

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

    }


    .guru-page .tendik-box{

        grid-template-columns:1fr;

        gap:40px;

    }

}


/* ==========================================================
   RESPONSIVE 900px
========================================================== */

@media (max-width:900px){

    .guru-page .guru-intro-grid{

        grid-template-columns:1fr;

        gap:25px;

    }


    .guru-page .guru-intro-label{

        display:flex;

        align-items:center;

        gap:20px;

    }


    .guru-page .guru-intro-number{

        margin:0;

        font-size:55px;

        letter-spacing:-3px;

    }


    .guru-page .guru-intro-small{

        margin:0;

    }


    .guru-page .section-header-row{

        align-items:flex-start;

        flex-direction:column;

        gap:20px;

    }


    .guru-page .guru-info-box{

        grid-template-columns:
            auto
            1fr;

    }


    .guru-page .guru-info-box .outline-button{

        grid-column:1 / -1;

        justify-self:start;

    }

}


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

@media (max-width:700px){

    .guru-page .container{

        width:calc(100% - 30px);

    }


    .guru-page .page-hero{

        padding:70px 0 65px;

    }


    .guru-page .page-hero h1{

        font-size:36px;

        letter-spacing:-1px;

    }


    .guru-page .page-hero p{

        font-size:14px;

        line-height:1.7;

    }


    .guru-page .guru-intro{

        padding:70px 0;

    }


    .guru-page .guru-intro-content h2{

        font-size:31px;

    }


    .guru-page .guru-intro-content p{

        font-size:14px;

        line-height:1.8;

    }


    .guru-page .guru-stats{

        padding:45px 0;

    }


    .guru-page .guru-stats-grid{

        grid-template-columns:1fr 1fr;

        gap:12px;

    }


    .guru-page .guru-stat-card{

        padding:17px;

        min-height:90px;

    }


    .guru-page .guru-stat-icon{

        width:40px;
        height:40px;

        flex-basis:40px;

        font-size:17px;

    }


    .guru-page .guru-stat-card strong{

        font-size:14px;

    }


    .guru-page .guru-stat-card span{

        font-size:10px;

    }


    .guru-page .guru-list-section{

        padding:70px 0;

    }


    .guru-page .section-header-row h2{

        font-size:31px;

    }


    .guru-page .guru-grid{

        grid-template-columns:1fr 1fr;

        gap:14px;

    }


    .guru-page .guru-photo{

        height:220px;

    }


    .guru-page .guru-card-body{

        padding:17px;

    }


    .guru-page .guru-card-body h3{

        font-size:17px;

    }


    .guru-page .guru-card-body p{

        font-size:12px;

    }


    .guru-page .tendik-section{

        padding:65px 0;

    }


    .guru-page .tendik-box{

        padding:30px 22px;

    }


    .guru-page .tendik-heading h2{

        font-size:30px;

    }


    .guru-page .guru-info-section{

        padding:65px 0;

    }


    .guru-page .guru-info-box{

        padding:25px 22px;

        gap:18px;

    }

}


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

@media (max-width:520px){

    .guru-page .page-hero{

        padding:58px 0 55px;

    }


    .guru-page .page-hero h1{

        font-size:31px;

    }


    .guru-page .page-kicker{

        font-size:9px;

        letter-spacing:1.5px;

    }


    .guru-page .breadcrumb{

        min-height:52px;

        font-size:11px;

        gap:7px;

    }


    .guru-page .guru-intro{

        padding:60px 0;

    }


    .guru-page .guru-intro-label{

        gap:14px;

    }


    .guru-page .guru-intro-number{

        font-size:45px;

    }


    .guru-page .guru-intro-small{

        font-size:10px;

    }


    .guru-page .guru-intro-content h2{

        font-size:28px;

        letter-spacing:-.8px;

    }


    .guru-page .guru-intro-content p{

        font-size:13px;

    }


    .guru-page .guru-stats-grid{

        grid-template-columns:1fr;

    }


    .guru-page .guru-stat-card{

        min-height:78px;

    }


    .guru-page .guru-grid{

        grid-template-columns:1fr;

    }


    .guru-page .guru-photo{

        height:260px;

    }


    .guru-page .guru-card-body{

        padding:20px;

    }


    .guru-page .tendik-box{

        padding:26px 18px;

        border-radius:7px;

    }


    .guru-page .tendik-heading h2{

        font-size:27px;

    }


    .guru-page .tendik-heading p{

        font-size:13px;

    }


    .guru-page .tendik-item{

        padding:15px;

        gap:13px;

    }


    .guru-page .tendik-icon{

        width:40px;
        height:40px;

        flex-basis:40px;

    }


    .guru-page .tendik-item strong{

        font-size:13px;

    }


    .guru-page .guru-info-box{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        padding:24px 20px;

    }


    .guru-page .guru-info-box h2{

        font-size:20px;

    }


    .guru-page .guru-info-box p{

        font-size:13px;

    }


    .guru-page .guru-info-box .outline-button{

        width:100%;

    }

}


/* ==========================================================
   EXTRA SMALL MOBILE
========================================================== */

@media (max-width:380px){

    .guru-page .container{

        width:calc(100% - 24px);

    }


    .guru-page .page-hero h1{

        font-size:28px;

    }


    .guru-page .guru-intro-content h2{

        font-size:25px;

    }


    .guru-page .guru-photo{

        height:230px;

    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.guru-page a:focus-visible,
.guru-page button:focus-visible{

    outline:3px solid rgba(18,97,160,.25);

    outline-offset:3px;

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .guru-page *,
    .guru-page *::before,
    .guru-page *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}
/* ==========================================================
   JADWAL PELAJARAN
   GOVERNMENT MODERN STYLE
========================================================== */


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

.jadwal-page{

    background:#ffffff;

    color:#172033;

    overflow:hidden;

}


/* ==========================================================
   CONTAINER
========================================================== */

.jadwal-page .container{

    width:min(
        1180px,
        calc(100% - 40px)
    );

    margin-left:auto;
    margin-right:auto;

}


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

.jadwal-page .page-hero{

    position:relative;

    padding:95px 0 90px;

    background:
        linear-gradient(
            135deg,
            #073b7a 0%,
            #0a4d96 55%,
            #1261a0 100%
        );

    overflow:hidden;

}


.jadwal-page .page-hero::before{

    content:"";

    position:absolute;

    width:430px;
    height:430px;

    right:-120px;
    top:-170px;

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

    border-radius:50%;

}


.jadwal-page .page-hero::after{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    left:-170px;
    bottom:-190px;

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

    border-radius:50%;

}


.jadwal-page .page-hero-content{

    position:relative;

    z-index:2;

    max-width:760px;

}


/* ==========================================================
   PAGE KICKER
========================================================== */

.jadwal-page .page-kicker{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    color:#cfe5ff;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

}


.jadwal-page .page-kicker::before{

    content:"";

    width:28px;

    height:2px;

    background:#ffffff;

}


/* ==========================================================
   PAGE TITLE
========================================================== */

.jadwal-page .page-hero h1{

    margin:0;

    color:#ffffff;

    font-family:
        "Plus Jakarta Sans",
        "Inter",
        sans-serif;

    font-size:clamp(
        38px,
        5vw,
        58px
    );

    line-height:1.08;

    font-weight:800;

    letter-spacing:-1.8px;

}


.jadwal-page .page-hero h1 span{

    display:block;

    color:#9ed0ff;

}


.jadwal-page .page-hero p{

    max-width:700px;

    margin:24px 0 0;

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

    font-size:16px;

    line-height:1.8;

}


/* ==========================================================
   BREADCRUMB
========================================================== */

.jadwal-page .breadcrumb-section{

    background:#ffffff;

    border-bottom:1px solid #e3e8ef;

}


.jadwal-page .breadcrumb{

    min-height:58px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    color:#778292;

    font-size:13px;

}


.jadwal-page .breadcrumb a{

    color:#073b7a;

    font-weight:600;

    text-decoration:none;

}


.jadwal-page .breadcrumb i{

    color:#aab3bf;

    font-size:10px;

}


.jadwal-page .breadcrumb span{

    color:#6d7785;

}


/* ==========================================================
   SECTION KICKER
========================================================== */

.jadwal-page .section-kicker{

    display:inline-flex;

    align-items:center;

    gap:9px;

    color:#073b7a;

    font-size:10px;

    line-height:1;

    font-weight:800;

    letter-spacing:1.8px;

}


.jadwal-page .section-kicker::before{

    content:"";

    width:25px;

    height:2px;

    background:#073b7a;

}


/* ==========================================================
   INTRO
========================================================== */

.jadwal-page .jadwal-intro{

    padding:100px 0;

    background:#ffffff;

}


.jadwal-page .jadwal-intro-grid{

    display:grid;

    grid-template-columns:
        220px
        minmax(0,1fr);

    gap:70px;

}


.jadwal-page .jadwal-intro-number{

    margin-top:25px;

    color:#dce7f2;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size:82px;

    line-height:.9;

    font-weight:800;

    letter-spacing:-5px;

}


.jadwal-page .jadwal-intro-small{

    display:block;

    margin-top:18px;

    color:#788494;

    font-size:12px;

    font-weight:700;

}


.jadwal-page .jadwal-intro-content{

    max-width:820px;

}


.jadwal-page .jadwal-intro-content h2{

    margin:0 0 28px;

    color:#172033;

    font-family:
        "Plus Jakarta Sans",
        "Inter",
        sans-serif;

    font-size:clamp(
        30px,
        4vw,
        48px
    );

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1.4px;

}


.jadwal-page .jadwal-intro-content h2 span{

    display:block;

    color:#073b7a;

}


.jadwal-page .jadwal-intro-content p{

    max-width:780px;

    margin:0 0 18px;

    color:#5f6b7a;

    font-size:16px;

    line-height:1.9;

}


/* ==========================================================
   INFO CARDS
========================================================== */

.jadwal-page .jadwal-info{

    padding:60px 0;

    background:#f5f7fa;

    border-top:1px solid #e3e8ef;

    border-bottom:1px solid #e3e8ef;

}


.jadwal-page .jadwal-info-grid{

    display:grid;

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

    gap:18px;

}


.jadwal-page .jadwal-info-card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:23px;

    background:#ffffff;

    border:1px solid #e3e8ef;

    border-radius:8px;

    transition:.25s ease;

}


.jadwal-page .jadwal-info-card:hover{

    transform:translateY(-3px);

    box-shadow:
        0 10px 30px rgba(7,59,122,.08);

}


.jadwal-page .jadwal-info-icon{

    width:46px;
    height:46px;

    flex:0 0 46px;

    display:flex;

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

    background:#eaf3fb;

    color:#073b7a;

    border-radius:7px;

    font-size:20px;

}


.jadwal-page .jadwal-info-card span{

    display:block;

    margin-bottom:5px;

    color:#7a8594;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.2px;

}


.jadwal-page .jadwal-info-card strong{

    display:block;

    color:#172033;

    font-size:15px;

    font-weight:800;

}


/* ==========================================================
   JADWAL SECTION
========================================================== */

.jadwal-page .jadwal-section{

    padding:100px 0;

    background:#ffffff;

}


.jadwal-page .section-header-row{

    margin-bottom:35px;

}


.jadwal-page .section-header-row h2{

    margin:15px 0 10px;

    color:#172033;

    font-family:
        "Plus Jakarta Sans",
        "Inter",
        sans-serif;

    font-size:38px;

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1px;

}


.jadwal-page .section-header-row p{

    margin:0;

    max-width:650px;

    color:#5f6b7a;

    font-size:15px;

    line-height:1.75;

}


/* ==========================================================
   DAY BUTTON
========================================================== */

.jadwal-page .jadwal-days{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:22px;

    padding:6px;

    background:#f5f7fa;

    border:1px solid #e3e8ef;

    border-radius:8px;

}


.jadwal-page .jadwal-day{

    min-height:42px;

    padding:0 22px;

    border:1px solid transparent;

    border-radius:6px;

    background:transparent;

    color:#667384;

    font-family:"Inter",sans-serif;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

    transition:.2s ease;

}


.jadwal-page .jadwal-day:hover{

    background:#ffffff;

    color:#073b7a;

}


.jadwal-page .jadwal-day.active{

    background:#073b7a;

    color:#ffffff;

    box-shadow:
        0 4px 12px rgba(7,59,122,.16);

}


/* ==========================================================
   TABLE WRAPPER
========================================================== */

.jadwal-page .jadwal-table-wrapper{

    display:none;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #dfe6ee;

    border-radius:9px;

    box-shadow:
        0 8px 28px rgba(0,0,0,.035);

}


.jadwal-page .jadwal-table-wrapper.active{

    display:block;

}


/* ==========================================================
   TABLE HEADER
========================================================== */

.jadwal-page .jadwal-table-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:25px 28px;

    border-bottom:1px solid #e3e8ef;

    background:#fbfcfe;

}


.jadwal-page .jadwal-table-header h3{

    margin:10px 0 0;

    color:#172033;

    font-family:
        "Plus Jakarta Sans",
        "Inter",
        sans-serif;

    font-size:21px;

    font-weight:800;

}


/* ==========================================================
   STATUS
========================================================== */

.jadwal-page .jadwal-status{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:7px 11px;

    border:1px solid #d8e8dc;

    border-radius:5px;

    background:#f4faf5;

    color:#39704a;

    font-size:10px;

    font-weight:700;

}


.jadwal-page .jadwal-status i{

    font-size:11px;

}


/* ==========================================================
   TABLE RESPONSIVE
========================================================== */

.jadwal-page .table-responsive{

    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}


/* ==========================================================
   TABLE
========================================================== */

.jadwal-page .jadwal-table{

    width:100%;

    min-width:760px;

    border-collapse:collapse;

    table-layout:auto;

}


.jadwal-page .jadwal-table thead{

    background:#073b7a;

}


.jadwal-page .jadwal-table th{

    padding:15px 18px;

    color:#ffffff;

    font-size:11px;

    line-height:1.4;

    font-weight:750;

    letter-spacing:.3px;

    text-align:left;

    white-space:nowrap;

}


.jadwal-page .jadwal-table td{

    padding:17px 18px;

    border-bottom:1px solid #e8edf2;

    color:#4f5c6d;

    font-size:13px;

    line-height:1.5;

    vertical-align:middle;

}


.jadwal-page .jadwal-table tbody tr{

    transition:
        background .18s ease;

}


.jadwal-page .jadwal-table tbody tr:hover{

    background:#f7fafd;

}


.jadwal-page .jadwal-table tbody tr:last-child td{

    border-bottom:none;

}


.jadwal-page .jadwal-table td:first-child{

    width:65px;

    color:#073b7a;

    font-weight:800;

}


.jadwal-page .jadwal-table td:nth-child(2){

    color:#5d6978;

    white-space:nowrap;

    font-weight:600;

}


.jadwal-page .jadwal-table td:nth-child(3){

    color:#172033;

    font-weight:700;

}


/* ==========================================================
   BREAK ROW
========================================================== */

.jadwal-page .jadwal-table tr.break-row td{

    background:#f5f8fb;

    color:#718096;

    font-weight:700;

}


.jadwal-page .jadwal-table tr.break-row td:first-child{

    color:#a1aab5;

}


/* ==========================================================
   NOTE
========================================================== */

.jadwal-page .jadwal-note{

    padding:80px 0 100px;

    background:#f5f7fa;

    border-top:1px solid #e3e8ef;

}


.jadwal-page .jadwal-note-box{

    display:grid;

    grid-template-columns:auto 1fr;

    gap:22px;

    align-items:start;

    padding:32px 36px;

    background:#ffffff;

    border:1px solid #e1e7ee;

    border-left:4px solid #073b7a;

    border-radius:8px;

}


.jadwal-page .jadwal-note-icon{

    width:50px;
    height:50px;

    display:flex;

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

    background:#eaf3fb;

    color:#073b7a;

    border-radius:7px;

    font-size:22px;

}


.jadwal-page .jadwal-note-box h2{

    margin:10px 0 8px;

    color:#172033;

    font-family:
        "Plus Jakarta Sans",
        "Inter",
        sans-serif;

    font-size:21px;

    font-weight:800;

}


.jadwal-page .jadwal-note-box p{

    max-width:800px;

    margin:0;

    color:#5f6b7a;

    font-size:14px;

    line-height:1.75;

}


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

@media (max-width:900px){

    .jadwal-page .jadwal-intro-grid{

        grid-template-columns:1fr;

        gap:25px;

    }


    .jadwal-page .jadwal-intro-label{

        display:flex;

        align-items:center;

        gap:20px;

    }


    .jadwal-page .jadwal-intro-number{

        margin:0;

        font-size:55px;

        letter-spacing:-3px;

    }


    .jadwal-page .jadwal-intro-small{

        margin:0;

    }


    .jadwal-page .jadwal-info-grid{

        grid-template-columns:1fr;

    }

}


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

@media (max-width:700px){

    .jadwal-page .container{

        width:calc(100% - 30px);

    }


    .jadwal-page .page-hero{

        padding:70px 0 65px;

    }


    .jadwal-page .page-hero h1{

        font-size:36px;

    }


    .jadwal-page .page-hero p{

        font-size:14px;

        line-height:1.7;

    }


    .jadwal-page .jadwal-intro{

        padding:70px 0;

    }


    .jadwal-page .jadwal-intro-content h2{

        font-size:31px;

    }


    .jadwal-page .jadwal-intro-content p{

        font-size:14px;

    }


    .jadwal-page .jadwal-info{

        padding:45px 0;

    }


    .jadwal-page .jadwal-section{

        padding:70px 0;

    }


    .jadwal-page .section-header-row h2{

        font-size:31px;

    }


    .jadwal-page .jadwal-days{

        overflow-x:auto;

        flex-wrap:nowrap;

        padding:5px;

    }


    .jadwal-page .jadwal-day{

        flex:0 0 auto;

        padding:0 18px;

    }


    .jadwal-page .jadwal-table-header{

        padding:20px;

    }


    .jadwal-page .jadwal-note{

        padding:60px 0 70px;

    }


    .jadwal-page .jadwal-note-box{

        padding:25px 22px;

    }

}


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

@media (max-width:520px){

    .jadwal-page .container{

        width:calc(100% - 24px);

    }


    .jadwal-page .page-hero{

        padding:58px 0 55px;

    }


    .jadwal-page .page-hero h1{

        font-size:31px;

        letter-spacing:-1px;

    }


    .jadwal-page .page-kicker{

        font-size:9px;

    }


    .jadwal-page .breadcrumb{

        min-height:52px;

        font-size:11px;

        gap:7px;

    }


    .jadwal-page .jadwal-intro{

        padding:60px 0;

    }


    .jadwal-page .jadwal-intro-content h2{

        font-size:27px;

    }


    .jadwal-page .jadwal-intro-content p{

        font-size:13px;

    }


    .jadwal-page .jadwal-info-card{

        padding:18px;

    }


    .jadwal-page .jadwal-info-icon{

        width:42px;
        height:42px;

        flex-basis:42px;

    }


    .jadwal-page .jadwal-section{

        padding:60px 0;

    }


    .jadwal-page .section-header-row h2{

        font-size:28px;

    }


    .jadwal-page .jadwal-table-header{

        align-items:flex-start;

        flex-direction:column;

        padding:18px;

    }


    .jadwal-page .jadwal-table-header h3{

        font-size:18px;

    }


    .jadwal-page .jadwal-table th{

        padding:13px 15px;

        font-size:10px;

    }


    .jadwal-page .jadwal-table td{

        padding:14px 15px;

        font-size:12px;

    }


    .jadwal-page .jadwal-note{

        padding:55px 0 65px;

    }


    .jadwal-page .jadwal-note-box{

        display:flex;

        flex-direction:column;

        padding:22px 18px;

    }


    .jadwal-page .jadwal-note-box h2{

        font-size:19px;

    }


    .jadwal-page .jadwal-note-box p{

        font-size:13px;

    }

}


/* ==========================================================
   EXTRA SMALL
========================================================== */

@media (max-width:380px){

    .jadwal-page .page-hero h1{

        font-size:28px;

    }


    .jadwal-page .jadwal-intro-content h2{

        font-size:25px;

    }


    .jadwal-page .jadwal-day{

        padding:0 15px;

        font-size:11px;

    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.jadwal-page button:focus-visible,
.jadwal-page a:focus-visible{

    outline:3px solid rgba(18,97,160,.25);

    outline-offset:3px;

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .jadwal-page *,
    .jadwal-page *::before,
    .jadwal-page *::after{

        transition:none !important;

        animation:none !important;

        scroll-behavior:auto !important;

    }

}
/* ==========================================================
   KURIKULUM PAGE
   SMP NEGERI 2 MOYUDAN
   GOVERNMENT MODERN MINIMAL
========================================================== */

.kurikulum-page{
    background:#f7f9fc;
    color:#172033;
}


/* ==========================================================
   INTRO
========================================================== */

.kurikulum-intro{
    padding:90px 0;
    background:#ffffff;
}

.kurikulum-intro-grid{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:70px;
    align-items:start;
}

.kurikulum-intro-label{
    position:relative;
    padding-top:5px;
}

.kurikulum-intro-number{
    margin-top:28px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:64px;
    line-height:1;
    font-weight:800;
    color:#e5eaf2;
}

.kurikulum-intro-small{
    display:block;
    margin-top:12px;
    color:#64748b;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.kurikulum-intro-content{
    max-width:850px;
}

.kurikulum-intro-content h2{
    margin:0 0 24px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:42px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.03em;
    color:#10213f;
}

.kurikulum-intro-content h2 span{
    display:block;
    color:#0b4f91;
}

.kurikulum-intro-content p{
    max-width:800px;
    margin:0 0 18px;
    color:#64748b;
    font-size:16px;
    line-height:1.9;
}


/* ==========================================================
   HIGHLIGHT
========================================================== */

.kurikulum-highlight{
    padding:0 0 90px;
    background:#ffffff;
}

.kurikulum-highlight-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.kurikulum-highlight-card{
    display:flex;
    gap:16px;
    padding:24px;
    min-height:170px;
    background:#ffffff;
    border:1px solid #e4e9f0;
    border-radius:12px;
    transition:.25s ease;
}

.kurikulum-highlight-card:hover{
    border-color:#b9cce3;
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(15,45,80,.07);
}

.kurikulum-highlight-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#eef5fc;
    color:#0b4f91;
    font-size:19px;
}

.kurikulum-highlight-card span{
    display:block;
    margin-bottom:7px;
    color:#7a8798;
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
}

.kurikulum-highlight-card strong{
    display:block;
    margin-bottom:8px;
    color:#16243b;
    font-size:15px;
    font-weight:750;
}

.kurikulum-highlight-card p{
    margin:0;
    color:#748196;
    font-size:13px;
    line-height:1.7;
}


/* ==========================================================
   PRINCIPLES
========================================================== */

.kurikulum-principles{
    padding:90px 0;
    background:#f7f9fc;
}

.kurikulum-principles-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:38px;
}

.kurikulum-principle-card{
    position:relative;
    min-height:280px;
    padding:30px;
    background:#ffffff;
    border:1px solid #e1e7ef;
    border-radius:12px;
    overflow:hidden;
    transition:.25s ease;
}

.kurikulum-principle-card:hover{
    transform:translateY(-4px);
    border-color:#b8cbe0;
    box-shadow:0 14px 35px rgba(15,45,80,.08);
}

.kurikulum-card-number{
    position:absolute;
    top:22px;
    right:24px;
    color:#e5eaf1;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:28px;
    font-weight:800;
}

.kurikulum-principle-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    border-radius:10px;
    background:#edf4fb;
    color:#0b4f91;
    font-size:21px;
}

.kurikulum-principle-card h3{
    margin:0 0 12px;
    color:#17253d;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:17px;
    line-height:1.4;
    font-weight:750;
}

.kurikulum-principle-card p{
    margin:0;
    color:#718096;
    font-size:13px;
    line-height:1.8;
}


/* ==========================================================
   COMPONENT
========================================================== */

.kurikulum-component-section{
    padding:90px 0;
    background:#ffffff;
}

.kurikulum-component-box{
    display:grid;
    grid-template-columns:40% 60%;
    overflow:hidden;
    background:#f8fafc;
    border:1px solid #e1e7ef;
    border-radius:14px;
}

.kurikulum-component-heading{
    padding:55px 50px;
    background:#0b4f91;
    color:#ffffff;
}

.kurikulum-component-heading .section-kicker{
    color:#bcd4ed;
}

.kurikulum-component-heading h2{
    margin:22px 0 20px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:31px;
    line-height:1.3;
    font-weight:800;
}

.kurikulum-component-heading h2 span{
    display:block;
    color:#d8e9f8;
}

.kurikulum-component-heading p{
    margin:0;
    color:#d7e4f1;
    font-size:14px;
    line-height:1.8;
}

.kurikulum-component-list{
    padding:25px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.kurikulum-component-item{
    display:flex;
    gap:15px;
    padding:23px;
    background:#ffffff;
    border:1px solid #e3e8ef;
    border-radius:10px;
}

.kurikulum-component-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#edf4fb;
    color:#0b4f91;
    font-size:18px;
}

.kurikulum-component-item span{
    display:block;
    margin-bottom:5px;
    color:#8190a3;
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
}

.kurikulum-component-item strong{
    display:block;
    margin-bottom:8px;
    color:#1a2940;
    font-size:14px;
    line-height:1.4;
}

.kurikulum-component-item p{
    margin:0;
    color:#718096;
    font-size:12px;
    line-height:1.7;
}


/* ==========================================================
   PROGRAM
========================================================== */

.kurikulum-program-section{
    padding:90px 0;
    background:#f7f9fc;
}

.kurikulum-program-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:38px;
}

.kurikulum-program-card{
    padding:28px;
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:12px;
    transition:.25s ease;
}

.kurikulum-program-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 35px rgba(15,45,80,.07);
}

.kurikulum-program-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:28px;
}

.kurikulum-program-top span{
    color:#a1adbd;
    font-size:11px;
    font-weight:800;
}

.kurikulum-program-top i{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#edf4fb;
    color:#0b4f91;
    font-size:18px;
}

.kurikulum-program-card h3{
    margin:0 0 12px;
    color:#17253d;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:16px;
    font-weight:750;
}

.kurikulum-program-card p{
    margin:0;
    color:#718096;
    font-size:13px;
    line-height:1.8;
}


/* ==========================================================
   INFORMATION
========================================================== */

.kurikulum-info-section{
    padding:80px 0;
    background:#ffffff;
}

.kurikulum-info-box{
    display:grid;
    grid-template-columns:60px 1fr auto;
    gap:25px;
    align-items:center;
    padding:32px 35px;
    background:#f7f9fc;
    border:1px solid #e0e7ef;
    border-radius:12px;
}

.kurikulum-info-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#eaf3fb;
    color:#0b4f91;
    font-size:22px;
}

.kurikulum-info-content .section-kicker{
    margin-bottom:7px;
}

.kurikulum-info-content h2{
    margin:0 0 8px;
    color:#17253d;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:20px;
    font-weight:800;
}

.kurikulum-info-content p{
    max-width:720px;
    margin:0;
    color:#718096;
    font-size:13px;
    line-height:1.75;
}


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

@media(max-width:1100px){

    .kurikulum-highlight-grid,
    .kurikulum-principles-grid,
    .kurikulum-program-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .kurikulum-intro-grid{
        grid-template-columns:170px 1fr;
        gap:45px;
    }

    .kurikulum-component-box{
        grid-template-columns:1fr;
    }

    .kurikulum-component-heading{
        padding:40px;
    }

}


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

@media(max-width:768px){

    .kurikulum-intro,
    .kurikulum-principles,
    .kurikulum-component-section,
    .kurikulum-program-section{
        padding:60px 0;
    }

    .kurikulum-intro-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .kurikulum-intro-number{
        margin-top:15px;
        font-size:48px;
    }

    .kurikulum-intro-content h2{
        font-size:30px;
    }

    .kurikulum-intro-content p{
        font-size:14px;
        line-height:1.8;
    }

    .kurikulum-highlight-grid,
    .kurikulum-principles-grid,
    .kurikulum-program-grid{
        grid-template-columns:1fr;
    }

    .kurikulum-highlight-card{
        min-height:auto;
    }

    .kurikulum-principle-card{
        min-height:auto;
    }

    .kurikulum-component-heading{
        padding:35px 25px;
    }

    .kurikulum-component-heading h2{
        font-size:27px;
    }

    .kurikulum-component-list{
        grid-template-columns:1fr;
        padding:18px;
    }

    .kurikulum-component-item{
        padding:20px;
    }

    .kurikulum-info-box{
        grid-template-columns:1fr;
        gap:18px;
        padding:25px;
    }

    .kurikulum-info-icon{
        width:46px;
        height:46px;
    }

    .kurikulum-info-box .outline-button{
        width:100%;
        justify-content:center;
    }

}


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

@media(max-width:480px){

    .kurikulum-intro-content h2{
        font-size:26px;
    }

    .kurikulum-principle-card,
    .kurikulum-program-card{
        padding:23px;
    }

    .kurikulum-component-heading h2{
        font-size:24px;
    }

    .kurikulum-component-item{
        flex-direction:column;
    }

}
/* ==========================================================
   KESISWAAN
   SMP NEGERI 2 MOYUDAN
   GOVERNMENT MODERN MINIMAL
========================================================== */

.kesiswaan-page{
    background:#f7f9fc;
    color:#172033;
}


/* ==========================================================
   INTRO
========================================================== */

.kesiswaan-intro{
    padding:90px 0;
    background:#ffffff;
}

.kesiswaan-intro-grid{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:80px;
    max-width:1180px;
    margin:auto;
}

.kesiswaan-intro-label{
    border-right:1px solid #dfe5ed;
    padding-right:30px;
}

.kesiswaan-intro-number{
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:64px;
    font-weight:800;
    color:#0b4f8a;
    line-height:1;
    margin:25px 0 12px;
}

.kesiswaan-intro-small{
    display:block;
    color:#64748b;
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.kesiswaan-intro-content{
    max-width:850px;
}

.kesiswaan-intro-content h2{
    margin:0 0 28px;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:42px;
    line-height:1.2;
    font-weight:800;
    color:#142033;
}

.kesiswaan-intro-content h2 span{
    display:block;
    color:#0b5cab;
}

.kesiswaan-intro-content p{
    max-width:760px;
    margin:0 0 18px;
    color:#64748b;
    font-size:16px;
    line-height:1.9;
}


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

.kesiswaan-stats{
    padding:45px 0;
    background:#f1f5f9;
    border-top:1px solid #e2e8f0;
    border-bottom:1px solid #e2e8f0;
}

.kesiswaan-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.kesiswaan-stat-card{
    display:flex;
    align-items:center;
    gap:17px;
    min-height:92px;
    padding:20px;
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:8px;
    transition:.25s ease;
}

.kesiswaan-stat-card:hover{
    transform:translateY(-3px);
    border-color:#b9cbe0;
    box-shadow:0 10px 25px rgba(15,23,42,.06);
}

.kesiswaan-stat-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    background:#eaf2fb;
    color:#0b5cab;
    font-size:21px;
}

.kesiswaan-stat-card strong{
    display:block;
    margin-bottom:4px;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:15px;
    font-weight:800;
    color:#172033;
}

.kesiswaan-stat-card span{
    display:block;
    color:#64748b;
    font-size:12px;
    line-height:1.5;
}


/* ==========================================================
   SERVICES
========================================================== */

.kesiswaan-services{
    padding:90px 0;
    background:#ffffff;
}

.kesiswaan-service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:45px;
}

.kesiswaan-service-card{
    position:relative;
    display:block;
    min-height:285px;
    padding:30px;
    overflow:hidden;
    background:#ffffff;
    border:1px solid #dfe5ec;
    border-radius:8px;
    text-decoration:none;
    transition:.3s ease;
}

.kesiswaan-service-card:hover{
    transform:translateY(-5px);
    border-color:#0b5cab;
    box-shadow:0 15px 35px rgba(15,23,42,.08);
}

.kesiswaan-service-number{
    position:absolute;
    top:20px;
    right:24px;
    color:#d7e1eb;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:36px;
    font-weight:800;
}

.kesiswaan-service-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    border-radius:7px;
    background:#edf4fb;
    color:#0b5cab;
    font-size:22px;
}

.kesiswaan-service-content{
    max-width:90%;
}

.kesiswaan-service-content span{
    display:block;
    margin-bottom:8px;
    color:#718096;
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em;
}

.kesiswaan-service-content h3{
    margin:0 0 12px;
    color:#172033;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:21px;
    font-weight:800;
}

.kesiswaan-service-content p{
    margin:0;
    color:#64748b;
    font-size:14px;
    line-height:1.7;
}

.kesiswaan-service-arrow{
    position:absolute;
    right:25px;
    bottom:25px;
    color:#94a3b8;
    font-size:17px;
    transition:.25s ease;
}

.kesiswaan-service-card:hover
.kesiswaan-service-arrow{
    color:#0b5cab;
    transform:translate(3px,-3px);
}


/* ==========================================================
   CHARACTER
========================================================== */

.character-section{
    padding:80px 0;
    background:#f4f7fa;
}

.character-box{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    padding:55px;
    background:#ffffff;
    border:1px solid #dfe5ec;
    border-radius:8px;
}

.character-content h2{
    margin:20px 0;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:36px;
    line-height:1.25;
    font-weight:800;
    color:#172033;
}

.character-content h2 span{
    color:#0b5cab;
}

.character-content p{
    max-width:600px;
    margin:0;
    color:#64748b;
    font-size:15px;
    line-height:1.85;
}

.character-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    align-content:center;
}

.character-item{
    display:flex;
    align-items:flex-start;
    gap:13px;
    padding:18px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:6px;
}

.character-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    background:#e8f1fa;
    color:#0b5cab;
}

.character-item strong{
    display:block;
    margin-bottom:4px;
    color:#172033;
    font-size:14px;
    font-weight:800;
}

.character-item span{
    display:block;
    color:#64748b;
    font-size:12px;
    line-height:1.5;
}


/* ==========================================================
   ACHIEVEMENT CTA
========================================================== */

.achievement-section{
    padding:70px 0;
    background:#ffffff;
}

.achievement-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:45px 50px;
    background:#0b4f8a;
    border-radius:8px;
    color:#ffffff;
}

.achievement-box > div{
    max-width:750px;
}

.achievement-box > div > span{
    display:block;
    margin-bottom:12px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    opacity:.75;
}

.achievement-box h2{
    margin:0 0 14px;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:30px;
    line-height:1.3;
    font-weight:800;
}

.achievement-box p{
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:14px;
    line-height:1.7;
}

.achievement-button{
    display:inline-flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
    padding:14px 20px;
    background:#ffffff;
    color:#0b4f8a;
    border-radius:5px;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    transition:.25s ease;
}

.achievement-button:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}


/* ==========================================================
   INFORMATION
========================================================== */

.kesiswaan-info-section{
    padding:75px 0 90px;
    background:#ffffff;
}

.kesiswaan-info-box{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:25px;
    padding:35px;
    border:1px solid #dfe5ec;
    border-left:4px solid #0b5cab;
    border-radius:7px;
    background:#f8fafc;
}

.kesiswaan-info-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    background:#eaf2fb;
    color:#0b5cab;
    font-size:22px;
}

.kesiswaan-info-box h2{
    margin:8px 0 8px;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:22px;
    font-weight:800;
    color:#172033;
}

.kesiswaan-info-box p{
    max-width:720px;
    margin:0;
    color:#64748b;
    font-size:13px;
    line-height:1.7;
}


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

@media(max-width:1100px){

    .kesiswaan-intro-grid{
        gap:45px;
    }

    .kesiswaan-stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .kesiswaan-service-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:800px){

    .kesiswaan-intro{
        padding:65px 0;
    }

    .kesiswaan-intro-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .kesiswaan-intro-label{
        border-right:0;
        border-bottom:1px solid #dfe5ed;
        padding:0 0 20px;
    }

    .kesiswaan-intro-number{
        font-size:48px;
        margin:15px 0 8px;
    }

    .kesiswaan-intro-content h2{
        font-size:32px;
    }

    .character-box{
        grid-template-columns:1fr;
        gap:40px;
        padding:30px;
    }

    .achievement-box{
        flex-direction:column;
        align-items:flex-start;
        padding:35px;
    }

    .kesiswaan-info-box{
        grid-template-columns:auto 1fr;
    }

    .kesiswaan-info-box .outline-button{
        grid-column:1 / -1;
        width:max-content;
    }

}


@media(max-width:600px){

    .kesiswaan-stats{
        padding:30px 0;
    }

    .kesiswaan-stats-grid{
        grid-template-columns:1fr;
    }

    .kesiswaan-services{
        padding:65px 0;
    }

    .kesiswaan-service-grid{
        grid-template-columns:1fr;
        margin-top:30px;
    }

    .kesiswaan-service-card{
        min-height:250px;
        padding:25px;
    }

    .character-section{
        padding:55px 0;
    }

    .character-box{
        padding:25px;
    }

    .character-content h2{
        font-size:28px;
    }

    .character-list{
        grid-template-columns:1fr;
    }

    .achievement-section{
        padding:55px 0;
    }

    .achievement-box{
        padding:30px 25px;
    }

    .achievement-box h2{
        font-size:25px;
    }

    .kesiswaan-info-section{
        padding:55px 0 65px;
    }

    .kesiswaan-info-box{
        grid-template-columns:1fr;
        padding:25px;
    }

    .kesiswaan-info-icon{
        width:46px;
        height:46px;
    }

    .kesiswaan-info-box .outline-button{
        grid-column:auto;
        width:100%;
        justify-content:center;
    }

}
/* ==========================================================
   BERITA PAGE
   SMP NEGERI 2 MOYUDAN
   GOVERNMENT MODERN MINIMAL
========================================================== */

.berita-page{
    background:#f5f7fa;
    color:#172033;
}


/* ==========================================================
   INTRO
========================================================== */

.berita-intro{
    padding:80px 0;
    background:#ffffff;
}

.berita-intro-grid{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:70px;
    align-items:start;
}

.berita-intro-label{
    border-right:1px solid #dfe5ec;
    min-height:220px;
}

.berita-intro-number{
    margin-top:35px;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:58px;
    font-weight:800;
    line-height:1;
    color:#073b7a;
}

.berita-intro-small{
    display:block;
    margin-top:12px;
    font-size:12px;
    font-weight:700;
    color:#7a8494;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.berita-intro-content{
    max-width:850px;
}

.berita-intro-content h2{
    margin:0 0 24px;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:42px;
    line-height:1.18;
    font-weight:800;
    color:#132238;
}

.berita-intro-content h2 span{
    display:block;
    color:#0b5cad;
}

.berita-intro-content p{
    margin:0 0 16px;
    max-width:780px;
    font-size:16px;
    line-height:1.85;
    color:#657184;
}


/* ==========================================================
   FILTER
========================================================== */

.berita-filter-section{
    padding:0 0 70px;
    background:#ffffff;
}

.berita-filter{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:24px 28px;
    background:#f7f9fc;
    border:1px solid #e1e7ef;
    border-radius:10px;
}

.berita-filter-title{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.berita-filter-title strong{
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:16px;
    color:#172033;
}

.berita-filter-buttons{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.berita-filter-btn{
    border:1px solid #d8e0e9;
    background:#ffffff;
    color:#536174;
    padding:9px 17px;
    border-radius:6px;
    font-family:"Inter",sans-serif;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.2s ease;
}

.berita-filter-btn:hover,
.berita-filter-btn.active{
    background:#073b7a;
    border-color:#073b7a;
    color:#ffffff;
}


/* ==========================================================
   MAIN BERITA
========================================================== */

.berita-main-section{
    padding:85px 0;
    background:#f5f7fa;
}

.berita-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:40px;
}

.berita-card{
    overflow:hidden;
    background:#ffffff;
    border:1px solid #e2e7ed;
    border-radius:10px;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.berita-card:hover{
    transform:translateY(-4px);
    border-color:#cbd6e2;
    box-shadow:0 14px 35px rgba(18,45,75,.09);
}

.berita-card-featured{
    grid-column:span 2;
}

.berita-image{
    position:relative;
    height:220px;
    overflow:hidden;
    background:#e9eef4;
}

.berita-card-featured .berita-image{
    height:260px;
}

.berita-image-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(
            135deg,
            #e7edf4,
            #d9e3ee
        );
}

.berita-image-placeholder i{
    font-size:52px;
    color:#7890aa;
}

.berita-category{
    position:absolute;
    top:18px;
    left:18px;
    padding:7px 11px;
    border-radius:4px;
    background:#073b7a;
    color:#ffffff;
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}

.berita-card-body{
    padding:26px 26px 28px;
}

.berita-meta{
    margin-bottom:13px;
}

.berita-meta span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:11px;
    font-weight:700;
    color:#718096;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.berita-meta i{
    color:#0b5cad;
}

.berita-card-body h3{
    margin:0 0 13px;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:20px;
    line-height:1.4;
    font-weight:750;
    color:#172033;
}

.berita-card-featured .berita-card-body h3{
    font-size:24px;
}

.berita-card-body p{
    margin:0 0 22px;
    color:#697586;
    font-size:14px;
    line-height:1.75;
}

.berita-read-more{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#073b7a;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

.berita-read-more i{
    transition:transform .2s ease;
}

.berita-read-more:hover i{
    transform:translateX(4px);
}


/* ==========================================================
   INFORMATION BOX
========================================================== */

.berita-info-section{
    padding:80px 0;
    background:#ffffff;
}

.berita-info-box{
    display:grid;
    grid-template-columns:70px 1fr auto;
    align-items:center;
    gap:28px;
    padding:35px 38px;
    background:#f7f9fc;
    border:1px solid #dfe6ee;
    border-left:4px solid #073b7a;
    border-radius:10px;
}

.berita-info-icon{
    width:62px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#e7eef7;
    color:#073b7a;
    font-size:25px;
}

.berita-info-content .section-kicker{
    margin-bottom:8px;
}

.berita-info-content h2{
    margin:0 0 8px;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:24px;
    font-weight:800;
    color:#172033;
}

.berita-info-content p{
    max-width:700px;
    margin:0;
    font-size:14px;
    line-height:1.75;
    color:#697586;
}


/* ==========================================================
   CTA
========================================================== */

.berita-cta-section{
    padding:0 0 90px;
    background:#ffffff;
}

.berita-cta-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:45px 50px;
    border-radius:10px;
    background:#073b7a;
    position:relative;
    overflow:hidden;
}

.berita-cta-box::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    right:-100px;
    top:-150px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
}

.berita-cta-box > div:first-child{
    position:relative;
    z-index:1;
}

.berita-cta-box > div:first-child > span{
    display:block;
    margin-bottom:10px;
    color:#b9d7f5;
    font-size:11px;
    font-weight:800;
    letter-spacing:.1em;
}

.berita-cta-box h2{
    max-width:650px;
    margin:0 0 12px;
    color:#ffffff;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:30px;
    line-height:1.3;
    font-weight:800;
}

.berita-cta-box p{
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.75);
    font-size:14px;
    line-height:1.7;
}

.berita-cta-actions{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:205px;
}

.berita-cta-button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-width:205px;
    padding:13px 17px;
    border:1px solid #ffffff;
    border-radius:6px;
    background:#ffffff;
    color:#073b7a;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    transition:.2s ease;
}

.berita-cta-button:hover{
    background:#eef5fc;
}

.berita-cta-button.secondary{
    border-color:rgba(255,255,255,.35);
    background:transparent;
    color:#ffffff;
}

.berita-cta-button.secondary:hover{
    background:rgba(255,255,255,.08);
}


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

@media(max-width:1000px){

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

    .berita-card-featured{
        grid-column:span 2;
    }

    .berita-intro-grid{
        grid-template-columns:170px 1fr;
        gap:45px;
    }

    .berita-intro-content h2{
        font-size:34px;
    }

    .berita-filter{
        align-items:flex-start;
        flex-direction:column;
    }

    .berita-info-box{
        grid-template-columns:60px 1fr;
    }

    .berita-info-box .outline-button{
        grid-column:2;
        justify-self:start;
    }

    .berita-cta-box{
        flex-direction:column;
        align-items:flex-start;
    }

    .berita-cta-actions{
        width:100%;
        max-width:300px;
    }

}


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

@media(max-width:700px){

    .berita-intro{
        padding:55px 0;
    }

    .berita-intro-grid{
        display:block;
    }

    .berita-intro-label{
        min-height:auto;
        padding-bottom:25px;
        margin-bottom:30px;
        border-right:none;
        border-bottom:1px solid #dfe5ec;
    }

    .berita-intro-number{
        margin-top:22px;
        font-size:45px;
    }

    .berita-intro-content h2{
        font-size:28px;
    }

    .berita-intro-content p{
        font-size:14px;
    }

    .berita-filter-section{
        padding-bottom:45px;
    }

    .berita-filter{
        padding:20px;
    }

    .berita-filter-buttons{
        width:100%;
    }

    .berita-filter-btn{
        flex:1;
        min-width:80px;
    }

    .berita-main-section{
        padding:55px 0;
    }

    .berita-grid{
        grid-template-columns:1fr;
        gap:18px;
        margin-top:30px;
    }

    .berita-card-featured{
        grid-column:span 1;
    }

    .berita-image,
    .berita-card-featured .berita-image{
        height:190px;
    }

    .berita-card-body,
    .berita-card-featured .berita-card-body{
        padding:21px;
    }

    .berita-card-body h3,
    .berita-card-featured .berita-card-body h3{
        font-size:18px;
    }

    .berita-info-section{
        padding:55px 0;
    }

    .berita-info-box{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        padding:25px;
        gap:18px;
    }

    .berita-info-content h2{
        font-size:21px;
    }

    .berita-info-box .outline-button{
        width:100%;
        justify-content:center;
    }

    .berita-cta-section{
        padding-bottom:60px;
    }

    .berita-cta-box{
        padding:30px 24px;
    }

    .berita-cta-box h2{
        font-size:24px;
    }

    .berita-cta-actions{
        max-width:none;
    }

    .berita-cta-button{
        width:100%;
    }

}


/* ==========================================================
   VERY SMALL DEVICE
========================================================== */

@media(max-width:420px){

    .berita-filter-buttons{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .berita-filter-btn{
        width:100%;
    }

}
/* ==========================================================
   GALERI SEKOLAH
   SMP NEGERI 2 MOYUDAN
   GOVERNMENT MODERN STYLE
========================================================== */


/* ==========================================================
   01. GALERI PAGE
========================================================== */

.galeri-page{
    width:100%;
    overflow:hidden;
    background:#ffffff;
    color:#172033;
}


/* ==========================================================
   02. PAGE HERO
========================================================== */

.galeri-page .page-hero{
    position:relative;
    min-height:330px;
    display:flex;
    align-items:center;
    background:
        linear-gradient(
            135deg,
            #063b78 0%,
            #07529a 55%,
            #0a6bb5 100%
        );
    overflow:hidden;
}


/* pola dekorasi */

.galeri-page .page-hero::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-170px;
    top:-220px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
}


.galeri-page .page-hero::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    right:-70px;
    bottom:-190px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
}


.galeri-page .page-hero .container{
    position:relative;
    z-index:2;
}


.galeri-page .page-hero-content{
    max-width:780px;
    padding:70px 0 65px;
}


/* ==========================================================
   03. PAGE KICKER
========================================================== */

.galeri-page .page-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;

    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.8px;
    text-transform:uppercase;

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


.galeri-page .page-kicker::before{
    content:"";
    width:30px;
    height:2px;
    background:#ffffff;
    display:block;
}


/* ==========================================================
   04. PAGE HERO TITLE
========================================================== */

.galeri-page .page-hero h1{
    margin:0;

    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(38px,5vw,62px);
    line-height:1.08;
    font-weight:800;
    letter-spacing:-1.8px;

    color:#ffffff;
}


.galeri-page .page-hero h1 span{
    display:block;
    color:#b9dcff;
}


.galeri-page .page-hero p{
    max-width:700px;
    margin:20px 0 0;

    font-family:'Inter',sans-serif;
    font-size:15px;
    line-height:1.8;
    color:rgba(255,255,255,.82);
}


/* ==========================================================
   05. BREADCRUMB
========================================================== */

.galeri-page .breadcrumb-section{
    background:#f7f9fc;
    border-bottom:1px solid #e5eaf1;
}


.galeri-page .breadcrumb{
    min-height:54px;

    display:flex;
    align-items:center;
    gap:10px;

    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:500;
}


.galeri-page .breadcrumb a{
    color:#315d8f;
    text-decoration:none;

    transition:
        color .2s ease;
}


.galeri-page .breadcrumb a:hover{
    color:#073b7a;
}


.galeri-page .breadcrumb i{
    font-size:10px;
    color:#9aa7b7;
}


.galeri-page .breadcrumb span{
    color:#6c7787;
}


/* ==========================================================
   06. INTRO SECTION
========================================================== */

.galeri-intro{
    padding:90px 0;
    background:#ffffff;
}


.galeri-intro-grid{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:70px;
    max-width:1100px;
    margin:0 auto;
}


/* ==========================================================
   07. INTRO LABEL
========================================================== */

.galeri-intro-label{
    position:relative;
    padding-top:5px;
}


.galeri-intro-label .section-kicker{
    display:flex;
    align-items:center;
    gap:10px;

    font-family:'Inter',sans-serif;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;

    color:#285d91;
}


.galeri-intro-label .section-kicker::before{
    content:"";
    width:25px;
    height:2px;
    background:#0b5da7;
}


.galeri-intro-number{
    margin-top:28px;

    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:58px;
    line-height:1;
    font-weight:800;
    letter-spacing:-3px;

    color:#e7edf5;
}


.galeri-intro-small{
    display:block;
    margin-top:10px;

    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;

    color:#7a8797;
}


/* ==========================================================
   08. INTRO CONTENT
========================================================== */

.galeri-intro-content{
    max-width:800px;
}


.galeri-intro-content h2{
    margin:0 0 24px;

    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(28px,4vw,44px);
    line-height:1.2;
    font-weight:800;
    letter-spacing:-1.4px;

    color:#172033;
}


.galeri-intro-content h2 span{
    color:#0759a0;
}


.galeri-intro-content p{
    max-width:760px;
    margin:0 0 16px;

    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.85;

    color:#667386;
}


/* ==========================================================
   09. GALERI MAIN SECTION
========================================================== */

.galeri-section{
    padding:85px 0 100px;
    background:#f7f9fc;
    border-top:1px solid #edf1f5;
}


.galeri-section .section-header-row{
    margin-bottom:34px;
}


/* ==========================================================
   10. SECTION HEADER
========================================================== */

.galeri-section .section-kicker{
    display:inline-flex;
    align-items:center;
    gap:9px;

    margin-bottom:11px;

    font-family:'Inter',sans-serif;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.6px;

    color:#2a6196;
}


.galeri-section .section-kicker::before{
    content:"";
    width:26px;
    height:2px;
    background:#0b5da7;
}


.galeri-section .section-header-row h2{
    margin:0;

    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:32px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-1px;

    color:#172033;
}


.galeri-section .section-header-row p{
    max-width:620px;
    margin:10px 0 0;

    font-family:'Inter',sans-serif;
    font-size:13px;
    line-height:1.7;

    color:#778396;
}


/* ==========================================================
   11. GALERI FILTER
========================================================== */

.galeri-filter{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;

    margin-bottom:32px;
    padding-bottom:20px;

    border-bottom:1px solid #e1e7ef;
}


.galeri-filter-btn{
    appearance:none;
    border:1px solid #dce3eb;
    background:#ffffff;

    min-height:38px;
    padding:0 17px;

    border-radius:6px;

    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:700;

    color:#536174;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.galeri-filter-btn:hover{
    border-color:#1768aa;
    color:#0759a0;
}


.galeri-filter-btn.active{
    background:#0759a0;
    border-color:#0759a0;
    color:#ffffff;
}


.galeri-filter-btn:active{
    transform:translateY(1px);
}


/* ==========================================================
   12. GALERI GRID
========================================================== */

.galeri-grid{
    display:grid;

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

    gap:22px;
}


/* ==========================================================
   13. GALERI CARD
========================================================== */

.galeri-card{
    position:relative;

    background:#ffffff;

    border:1px solid #e4e9f0;
    border-radius:8px;

    overflow:hidden;

    box-shadow:
        0 3px 12px rgba(20,45,75,.035);

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


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

    border-color:#d3deeb;

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


/* ==========================================================
   14. GALERI IMAGE
========================================================== */

.galeri-image{
    position:relative;

    width:100%;
    aspect-ratio:16 / 10;

    overflow:hidden;

    background:#e9eef4;
}


.galeri-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .45s ease;
}


.galeri-card:hover .galeri-image img{
    transform:scale(1.045);
}


/* ==========================================================
   15. IMAGE OVERLAY
========================================================== */

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

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

    padding:16px;

    background:
        linear-gradient(
            to top,
            rgba(5,30,58,.68),
            rgba(5,30,58,.05) 60%,
            transparent
        );

    opacity:.92;
}


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

    min-height:25px;
    padding:0 9px;

    border:1px solid rgba(255,255,255,.35);
    border-radius:4px;

    background:rgba(5,42,79,.65);

    backdrop-filter:blur(5px);

    font-family:'Inter',sans-serif;
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;

    color:#ffffff;
}


.galeri-overlay-icon{
    width:34px;
    height:34px;

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

    border:1px solid rgba(255,255,255,.35);
    border-radius:5px;

    background:rgba(5,42,79,.65);

    color:#ffffff;

    opacity:0;

    transform:translateY(5px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.galeri-card:hover .galeri-overlay-icon{
    opacity:1;
    transform:translateY(0);
}


.galeri-overlay-icon i{
    font-size:13px;
}


/* ==========================================================
   16. GALERI CARD BODY
========================================================== */

.galeri-card-body{
    padding:19px 20px 21px;
}


.galeri-category{
    display:block;

    margin-bottom:8px;

    font-family:'Inter',sans-serif;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.3px;

    color:#286499;
}


.galeri-card-body h3{
    margin:0 0 8px;

    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:17px;
    line-height:1.35;
    font-weight:700;

    color:#1b2638;
}


.galeri-card-body p{
    margin:0;

    font-family:'Inter',sans-serif;
    font-size:12px;
    line-height:1.65;

    color:#778396;
}


/* ==========================================================
   17. HIDDEN FILTER ITEM
========================================================== */

.galeri-card.galeri-hidden{
    display:none;
}


/* ==========================================================
   18. INFORMATION SECTION
========================================================== */

.galeri-info-section{
    padding:80px 0;

    background:#ffffff;
}


.galeri-info-box{
    position:relative;

    display:grid;

    grid-template-columns:58px minmax(0,1fr) auto;

    align-items:center;

    gap:25px;

    padding:30px 34px;

    border:1px solid #dce5ef;
    border-left:4px solid #0759a0;

    border-radius:8px;

    background:#f7f9fc;
}


/* ==========================================================
   19. INFO ICON
========================================================== */

.galeri-info-icon{
    width:50px;
    height:50px;

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

    border-radius:7px;

    background:#e6f0fa;

    color:#0759a0;
}


.galeri-info-icon i{
    font-size:21px;
}


/* ==========================================================
   20. INFO CONTENT
========================================================== */

.galeri-info-content .section-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-bottom:7px;

    font-family:'Inter',sans-serif;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.4px;

    color:#2a6196;
}


.galeri-info-content .section-kicker::before{
    content:"";
    width:20px;
    height:2px;

    background:#0b5da7;
}


.galeri-info-content h2{
    margin:0 0 7px;

    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:21px;
    line-height:1.3;
    font-weight:800;

    color:#172033;
}


.galeri-info-content p{
    max-width:700px;

    margin:0;

    font-family:'Inter',sans-serif;
    font-size:12px;
    line-height:1.7;

    color:#718094;
}


/* ==========================================================
   21. OUTLINE BUTTON
========================================================== */

.galeri-info-box .outline-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    min-height:42px;
    padding:0 17px;

    border:1px solid #cbd7e5;
    border-radius:6px;

    background:#ffffff;

    text-decoration:none;

    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:700;

    color:#245982;

    white-space:nowrap;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.galeri-info-box .outline-button:hover{
    background:#0759a0;
    border-color:#0759a0;
    color:#ffffff;

    transform:translateY(-1px);
}


.galeri-info-box .outline-button i{
    font-size:13px;
}


/* ==========================================================
   22. RESPONSIVE - LARGE TABLET
========================================================== */

@media (max-width:1100px){

    .galeri-intro-grid{
        grid-template-columns:180px minmax(0,1fr);
        gap:50px;
    }


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


    .galeri-info-box{
        grid-template-columns:52px minmax(0,1fr);
    }


    .galeri-info-box .outline-button{
        grid-column:2;
        justify-self:start;
    }

}


/* ==========================================================
   23. RESPONSIVE - TABLET
========================================================== */

@media (max-width:768px){

    .galeri-page .page-hero{
        min-height:290px;
    }


    .galeri-page .page-hero-content{
        padding:58px 0 55px;
    }


    .galeri-page .page-hero h1{
        font-size:42px;
        letter-spacing:-1.3px;
    }


    .galeri-page .page-hero p{
        font-size:13px;
        line-height:1.7;
    }


    .galeri-intro{
        padding:65px 0;
    }


    .galeri-intro-grid{
        grid-template-columns:1fr;
        gap:28px;
    }


    .galeri-intro-label{
        display:grid;
        grid-template-columns:auto 1fr;
        align-items:center;
        gap:18px;
    }


    .galeri-intro-label .section-kicker{
        grid-column:1 / -1;
    }


    .galeri-intro-number{
        margin-top:0;
        font-size:44px;
    }


    .galeri-intro-small{
        margin-top:0;
    }


    .galeri-section{
        padding:65px 0 75px;
    }


    .galeri-section .section-header-row h2{
        font-size:28px;
    }


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

        gap:16px;
    }


    .galeri-card-body{
        padding:16px;
    }


    .galeri-card-body h3{
        font-size:15px;
    }


    .galeri-card-body p{
        font-size:11px;
    }


    .galeri-info-section{
        padding:65px 0;
    }


    .galeri-info-box{
        grid-template-columns:50px minmax(0,1fr);
        gap:18px;
        padding:25px;
    }


    .galeri-info-box .outline-button{
        grid-column:1 / -1;
    }

}


/* ==========================================================
   24. RESPONSIVE - MOBILE
========================================================== */

@media (max-width:576px){

    .galeri-page .page-hero{
        min-height:265px;
    }


    .galeri-page .page-hero-content{
        padding:48px 0;
    }


    .galeri-page .page-kicker{
        font-size:9px;
        letter-spacing:1.3px;
    }


    .galeri-page .page-kicker::before{
        width:22px;
    }


    .galeri-page .page-hero h1{
        font-size:34px;
        letter-spacing:-1px;
    }


    .galeri-page .page-hero p{
        margin-top:14px;
        font-size:12px;
        line-height:1.7;
    }


    .galeri-page .breadcrumb{
        min-height:48px;
        font-size:10px;
        gap:7px;
    }


    .galeri-intro{
        padding:52px 0;
    }


    .galeri-intro-grid{
        gap:24px;
    }


    .galeri-intro-content h2{
        font-size:27px;
        letter-spacing:-.8px;
    }


    .galeri-intro-content p{
        font-size:12px;
        line-height:1.75;
    }


    .galeri-section{
        padding:52px 0 60px;
    }


    .galeri-section .section-header-row{
        margin-bottom:25px;
    }


    .galeri-section .section-header-row h2{
        font-size:25px;
    }


    .galeri-section .section-header-row p{
        font-size:11px;
    }


    .galeri-filter{
        gap:6px;
        margin-bottom:24px;
        padding-bottom:16px;
    }


    .galeri-filter-btn{
        min-height:34px;
        padding:0 12px;
        font-size:10px;
    }


    .galeri-grid{
        grid-template-columns:1fr;
        gap:17px;
    }


    .galeri-image{
        aspect-ratio:16 / 9;
    }


    .galeri-overlay{
        padding:13px;
    }


    .galeri-overlay-icon{
        width:31px;
        height:31px;
    }


    .galeri-card-body{
        padding:17px;
    }


    .galeri-category{
        font-size:8px;
    }


    .galeri-card-body h3{
        font-size:16px;
    }


    .galeri-card-body p{
        font-size:11px;
    }


    .galeri-info-section{
        padding:52px 0;
    }


    .galeri-info-box{
        display:grid;
        grid-template-columns:44px 1fr;
        gap:15px;

        padding:20px;
    }


    .galeri-info-icon{
        width:44px;
        height:44px;
    }


    .galeri-info-icon i{
        font-size:18px;
    }


    .galeri-info-content h2{
        font-size:18px;
    }


    .galeri-info-content p{
        font-size:11px;
        line-height:1.65;
    }


    .galeri-info-box .outline-button{
        width:100%;
        min-height:40px;
    }

}


/* ==========================================================
   25. ACCESSIBILITY
========================================================== */

.galeri-filter-btn:focus-visible,
.galeri-info-box .outline-button:focus-visible,
.galeri-card:focus-visible{
    outline:3px solid rgba(7,89,160,.22);
    outline-offset:3px;
}


/* ==========================================================
   26. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .galeri-card,
    .galeri-image img,
    .galeri-overlay-icon,
    .galeri-filter-btn,
    .galeri-info-box .outline-button{
        transition:none;
    }

}


/* ==========================================================
   27. PRINT
========================================================== */

@media print{

    .galeri-page .page-hero{
        min-height:auto;
        background:#ffffff !important;
        color:#000000;
    }


    .galeri-page .page-hero h1,
    .galeri-page .page-hero h1 span,
    .galeri-page .page-hero p,
    .galeri-page .page-kicker{
        color:#000000 !important;
    }


    .galeri-filter,
    .galeri-info-box .outline-button{
        display:none;
    }


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


    .galeri-card{
        box-shadow:none;
        border:1px solid #cccccc;
        break-inside:avoid;
    }

}
/* ==========================================================
   PPDB PAGE
   SMP NEGERI 2 MOYUDAN
   MODERN GOVERNMENT STYLE
========================================================== */

.ppdb-page{
    background:#ffffff;
    color:#172033;
}


/* ==========================================================
   PPDB HERO
========================================================== */

.ppdb-page-hero{
    min-height:390px;
    display:flex;
    align-items:center;
    background:
        linear-gradient(
            135deg,
            #073b7a 0%,
            #0b4f9c 55%,
            #0a66b7 100%
        );
    position:relative;
    overflow:hidden;
}

.ppdb-page-hero::before{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
    right:-180px;
    top:-180px;
}

.ppdb-page-hero::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
    right:90px;
    bottom:-180px;
}

.ppdb-page-hero .container{
    position:relative;
    z-index:2;
}

.ppdb-page-hero .page-hero-content{
    max-width:760px;
}

.ppdb-page-hero .page-kicker{
    color:#b9dcff;
}

.ppdb-page-hero h1{
    color:#ffffff;
}

.ppdb-page-hero h1 span{
    color:#d9edff;
}

.ppdb-page-hero p{
    color:rgba(255,255,255,.84);
    max-width:680px;
}


/* ==========================================================
   INTRO
========================================================== */

.ppdb-intro{
    padding:90px 0;
    background:#ffffff;
}

.ppdb-intro-grid{
    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    gap:70px;
    max-width:1100px;
    margin:auto;
}

.ppdb-intro-label{
    position:relative;
    padding-top:5px;
}

.ppdb-intro-number{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:72px;
    line-height:1;
    font-weight:800;
    color:#edf3f9;
    margin:25px 0 15px;
}

.ppdb-intro-small{
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#68758a;
}

.ppdb-intro-content{
    max-width:780px;
}

.ppdb-intro-content h2{
    margin:0 0 24px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:38px;
    line-height:1.25;
    font-weight:800;
    color:#13233b;
}

.ppdb-intro-content h2 span{
    display:block;
    color:#0a5ca8;
}

.ppdb-intro-content p{
    margin:0 0 16px;
    color:#667085;
    font-size:16px;
    line-height:1.9;
}


/* ==========================================================
   STATUS
========================================================== */

.ppdb-status-section{
    padding:0 0 90px;
}

.ppdb-status-box{
    display:grid;
    grid-template-columns:70px minmax(0,1fr) auto;
    align-items:center;
    gap:25px;
    padding:30px 35px;
    background:#f5f8fb;
    border:1px solid #dce5ee;
    border-left:4px solid #0b5fa8;
}

.ppdb-status-icon{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e6f1fb;
    color:#07589f;
    font-size:24px;
}

.ppdb-status-content span{
    display:block;
    margin-bottom:6px;
    color:#718096;
    font-size:10px;
    font-weight:800;
    letter-spacing:.13em;
}

.ppdb-status-content h2{
    margin:0 0 5px;
    color:#172b46;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:22px;
    font-weight:800;
}

.ppdb-status-content p{
    margin:0;
    color:#697586;
    font-size:14px;
    line-height:1.7;
}

.ppdb-status-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 15px;
    border:1px solid #cbdbea;
    background:#ffffff;
    color:#0b5fa8;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}


/* ==========================================================
   PROCESS
========================================================== */

.ppdb-process-section{
    padding:90px 0;
    background:#f7f9fc;
    border-top:1px solid #e8edf2;
    border-bottom:1px solid #e8edf2;
}

.ppdb-process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:45px;
}

.ppdb-process-card{
    position:relative;
    padding:30px 25px;
    background:#ffffff;
    border:1px solid #dfe6ee;
    min-height:285px;
    transition:.25s ease;
}

.ppdb-process-card:hover{
    border-color:#9dbbd8;
    transform:translateY(-3px);
}

.ppdb-process-number{
    position:absolute;
    top:20px;
    right:22px;
    color:#dce7f2;
    font-size:28px;
    font-weight:800;
}

.ppdb-process-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#edf5fc;
    color:#075ca5;
    font-size:22px;
    margin-bottom:30px;
}

.ppdb-process-card > span{
    display:block;
    margin-bottom:8px;
    color:#718096;
    font-size:10px;
    font-weight:800;
    letter-spacing:.13em;
}

.ppdb-process-card h3{
    margin:0 0 12px;
    color:#172b46;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:20px;
    font-weight:800;
}

.ppdb-process-card p{
    margin:0;
    color:#687588;
    font-size:13px;
    line-height:1.8;
}


/* ==========================================================
   REQUIREMENT
========================================================== */

.ppdb-requirement-section{
    padding:95px 0;
    background:#ffffff;
}

.ppdb-requirement-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:90px;
    align-items:start;
}

.ppdb-requirement-intro{
    max-width:460px;
}

.ppdb-requirement-intro h2{
    margin:14px 0 20px;
    color:#162940;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:36px;
    line-height:1.3;
    font-weight:800;
}

.ppdb-requirement-intro h2 span{
    display:block;
    color:#0b5ea7;
}

.ppdb-requirement-intro p{
    color:#697586;
    line-height:1.85;
    font-size:15px;
}

.ppdb-requirement-list{
    border-top:1px solid #dfe6ed;
}

.ppdb-requirement-item{
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    gap:20px;
    padding:25px 0;
    border-bottom:1px solid #dfe6ed;
}

.ppdb-requirement-icon{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f0f5fa;
    color:#0a5da5;
    font-size:20px;
}

.ppdb-requirement-item span{
    display:block;
    margin-bottom:5px;
    color:#8a96a6;
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em;
}

.ppdb-requirement-item strong{
    display:block;
    margin-bottom:5px;
    color:#1b304b;
    font-size:16px;
    font-weight:800;
}

.ppdb-requirement-item p{
    margin:0;
    color:#697586;
    font-size:13px;
    line-height:1.7;
}


/* ==========================================================
   SCHEDULE
========================================================== */

.ppdb-schedule-section{
    padding:90px 0;
    background:#f7f9fc;
    border-top:1px solid #e6ebf0;
}

.ppdb-schedule{
    margin-top:45px;
    border-top:1px solid #d9e1e9;
}

.ppdb-schedule-row{
    display:grid;
    grid-template-columns:90px minmax(0,1fr) 35px;
    gap:25px;
    align-items:center;
    padding:24px 20px;
    background:#ffffff;
    border:1px solid #dfe6ee;
    border-top:0;
    transition:.2s ease;
}

.ppdb-schedule-row:hover{
    background:#f9fbfd;
}

.ppdb-schedule-date{
    width:62px;
    height:62px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#edf4fa;
    border:1px solid #d8e4ee;
}

.ppdb-schedule-date strong{
    color:#0a5c9f;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:22px;
    line-height:1;
}

.ppdb-schedule-date span{
    margin-top:4px;
    color:#788697;
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
}

.ppdb-schedule-info span{
    display:block;
    margin-bottom:5px;
    color:#7b8796;
    font-size:9px;
    font-weight:800;
    letter-spacing:.12em;
}

.ppdb-schedule-info h3{
    margin:0 0 4px;
    color:#1a2d46;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:17px;
    font-weight:800;
}

.ppdb-schedule-info p{
    margin:0;
    color:#6d7988;
    font-size:13px;
}

.ppdb-schedule-row > i{
    color:#0a5da5;
    font-size:18px;
}


/* ==========================================================
   CONTACT
========================================================== */

.ppdb-contact-section{
    padding:90px 0;
    background:#ffffff;
}

.ppdb-contact-box{
    display:grid;
    grid-template-columns:65px minmax(0,1fr) auto;
    align-items:center;
    gap:25px;
    padding:35px;
    border:1px solid #dce5ee;
    background:#f8fafc;
}

.ppdb-contact-icon{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e8f2fb;
    color:#075ca5;
    font-size:23px;
}

.ppdb-contact-content h2{
    margin:8px 0 8px;
    color:#182b45;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:23px;
    font-weight:800;
}

.ppdb-contact-content p{
    margin:0;
    color:#687588;
    font-size:13px;
    line-height:1.7;
}

.ppdb-contact-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.ppdb-contact-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:0 17px;
    background:#075ca5;
    color:#ffffff;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    border:1px solid #075ca5;
    transition:.2s ease;
}

.ppdb-contact-button:hover{
    background:#064c88;
    border-color:#064c88;
    color:#ffffff;
}

.ppdb-contact-button.secondary{
    background:#ffffff;
    color:#075ca5;
}

.ppdb-contact-button.secondary:hover{
    background:#edf5fc;
    color:#075ca5;
}


/* ==========================================================
   FINAL CTA
========================================================== */

.ppdb-final-section{
    padding:0 0 90px;
}

.ppdb-final-box{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:60px;
    padding:55px 60px;
    background:#073b7a;
    position:relative;
    overflow:hidden;
}

.ppdb-final-box::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:50%;
    right:-140px;
    top:-160px;
}

.ppdb-final-box > div{
    position:relative;
    z-index:1;
}

.ppdb-final-box > div:first-child > span{
    color:#a9d2f7;
    font-size:10px;
    font-weight:800;
    letter-spacing:.14em;
}

.ppdb-final-box h2{
    max-width:650px;
    margin:13px 0 15px;
    color:#ffffff;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:32px;
    line-height:1.3;
    font-weight:800;
}

.ppdb-final-box p{
    margin:0;
    max-width:620px;
    color:rgba(255,255,255,.75);
    font-size:14px;
    line-height:1.8;
}

.ppdb-final-meta{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:17px;
}

.ppdb-final-meta div{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:rgba(255,255,255,.82);
    font-size:12px;
    line-height:1.6;
}

.ppdb-final-meta i{
    width:18px;
    color:#a9d2f7;
    font-size:15px;
}


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

@media(max-width:1000px){

    .ppdb-process-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .ppdb-requirement-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .ppdb-requirement-intro{
        max-width:700px;
    }

    .ppdb-contact-box{
        grid-template-columns:60px 1fr;
    }

    .ppdb-contact-actions{
        grid-column:2;
    }

    .ppdb-final-box{
        grid-template-columns:1fr;
        gap:35px;
    }

}


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

@media(max-width:768px){

    .ppdb-page-hero{
        min-height:330px;
    }

    .ppdb-intro{
        padding:65px 0;
    }

    .ppdb-intro-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .ppdb-intro-number{
        display:none;
    }

    .ppdb-intro-small{
        display:none;
    }

    .ppdb-intro-content h2{
        font-size:29px;
    }

    .ppdb-status-section{
        padding-bottom:65px;
    }

    .ppdb-status-box{
        grid-template-columns:55px 1fr;
        padding:25px;
        gap:18px;
    }

    .ppdb-status-badge{
        grid-column:2;
        justify-self:start;
    }

    .ppdb-process-section,
    .ppdb-requirement-section,
    .ppdb-schedule-section,
    .ppdb-contact-section{
        padding:65px 0;
    }

    .ppdb-process-grid{
        grid-template-columns:1fr;
        margin-top:30px;
    }

    .ppdb-process-card{
        min-height:auto;
    }

    .ppdb-requirement-intro h2{
        font-size:29px;
    }

    .ppdb-schedule{
        margin-top:30px;
    }

    .ppdb-schedule-row{
        grid-template-columns:65px minmax(0,1fr) 20px;
        gap:15px;
        padding:20px 14px;
    }

    .ppdb-schedule-date{
        width:56px;
        height:56px;
    }

    .ppdb-schedule-info h3{
        font-size:15px;
    }

    .ppdb-schedule-info p{
        font-size:12px;
    }

    .ppdb-contact-box{
        grid-template-columns:1fr;
        padding:25px;
    }

    .ppdb-contact-actions{
        grid-column:auto;
        flex-direction:column;
    }

    .ppdb-contact-button{
        width:100%;
    }

    .ppdb-final-section{
        padding-bottom:65px;
    }

    .ppdb-final-box{
        padding:35px 25px;
    }

    .ppdb-final-box h2{
        font-size:26px;
    }

}


/* ==========================================================
   RESPONSIVE SMALL MOBILE
========================================================== */

@media(max-width:480px){

    .ppdb-page-hero{
        min-height:310px;
    }

    .ppdb-intro-content h2{
        font-size:26px;
    }

    .ppdb-intro-content p{
        font-size:14px;
    }

    .ppdb-status-box{
        padding:20px;
    }

    .ppdb-status-content h2{
        font-size:19px;
    }

    .ppdb-process-card{
        padding:25px 20px;
    }

    .ppdb-requirement-item{
        grid-template-columns:45px 1fr;
        gap:14px;
    }

    .ppdb-requirement-icon{
        width:45px;
        height:45px;
    }

    .ppdb-schedule-row{
        grid-template-columns:55px minmax(0,1fr);
    }

    .ppdb-schedule-row > i{
        display:none;
    }

    .ppdb-schedule-date{
        width:50px;
        height:50px;
    }

    .ppdb-schedule-date strong{
        font-size:18px;
    }

    .ppdb-final-box h2{
        font-size:23px;
    }

}
/* ==========================================================
   KONTAK PAGE
   SMP NEGERI 2 MOYUDAN
   MODERN GOVERNMENT STYLE
========================================================== */

.kontak-page{
    background:#fff;
    color:#172033;
}


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

.kontak-page-hero{
    min-height:390px;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #073b7a 0%,
            #0b4f9c 55%,
            #0a66b7 100%
        );
}

.kontak-page-hero::before{
    content:"";
    position:absolute;

    width:500px;
    height:500px;

    right:-200px;
    top:-210px;

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

    border-radius:50%;
}

.kontak-page-hero::after{
    content:"";
    position:absolute;

    width:260px;
    height:260px;

    right:100px;
    bottom:-190px;

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

    border-radius:50%;
}

.kontak-page-hero .container{
    position:relative;
    z-index:2;
}

.kontak-page-hero h1{
    color:#fff;
}

.kontak-page-hero h1 span{
    color:#d9edff;
}

.kontak-page-hero p{
    color:rgba(255,255,255,.84);
    max-width:680px;
}


/* ==========================================================
   INTRO
========================================================== */

.kontak-intro{
    padding:90px 0;
}

.kontak-intro-grid{
    display:grid;

    grid-template-columns:180px minmax(0,1fr);

    gap:70px;

    max-width:1100px;

    margin:auto;
}

.kontak-intro-label{
    padding-top:5px;
}

.kontak-intro-number{
    margin:25px 0 15px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:72px;

    line-height:1;

    font-weight:800;

    color:#edf3f9;
}

.kontak-intro-small{
    display:block;

    color:#68758a;

    font-size:11px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;
}

.kontak-intro-content{
    max-width:780px;
}

.kontak-intro-content h2{
    margin:0 0 24px;

    color:#13233b;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:38px;

    line-height:1.25;

    font-weight:800;
}

.kontak-intro-content h2 span{
    display:block;

    color:#0a5ca8;
}

.kontak-intro-content p{
    margin:0 0 16px;

    color:#667085;

    font-size:16px;

    line-height:1.9;
}


/* ==========================================================
   CONTACT INFORMATION
========================================================== */

.kontak-information{
    padding:0 0 90px;
}

.kontak-information-grid{
    display:grid;

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

    gap:18px;
}

.kontak-card{
    display:flex;

    gap:20px;

    padding:28px;

    background:#f7f9fc;

    border:1px solid #dfe6ee;

    transition:.25s ease;
}

.kontak-card:hover{
    background:#fff;

    border-color:#a9c4dc;

    transform:translateY(-2px);
}

.kontak-card-icon{
    width:54px;
    height:54px;

    flex:0 0 54px;

    display:flex;

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

    background:#eaf3fb;

    color:#075ca5;

    font-size:21px;
}

.kontak-card-content{
    min-width:0;
}

.kontak-card-content > span{
    display:block;

    margin-bottom:7px;

    color:#7a8797;

    font-size:9px;

    font-weight:800;

    letter-spacing:.13em;
}

.kontak-card-content h3{
    margin:0 0 7px;

    color:#1a2d46;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:19px;

    font-weight:800;
}

.kontak-card-content p{
    margin:0 0 8px;

    color:#687588;

    font-size:13px;

    line-height:1.7;

    word-break:break-word;
}

.kontak-card-content small{
    color:#8a95a3;

    font-size:11px;
}

.kontak-card-link{
    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-top:5px;

    color:#075ca5;

    text-decoration:none;

    font-size:12px;

    font-weight:700;
}

.kontak-card-link:hover{
    color:#064c88;
}


/* ==========================================================
   LOCATION
========================================================== */

.kontak-location{
    padding:90px 0;

    background:#f7f9fc;

    border-top:1px solid #e5ebf1;

    border-bottom:1px solid #e5ebf1;
}

.kontak-location-grid{
    display:grid;

    grid-template-columns:.85fr 1.15fr;

    gap:60px;

    align-items:stretch;
}

.kontak-location-info{
    padding:15px 0;
}

.kontak-location-info h2{
    margin:15px 0 20px;

    color:#172b46;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:34px;

    line-height:1.3;

    font-weight:800;
}

.kontak-location-info h2 span{
    display:block;

    color:#0a5da5;
}

.kontak-location-info > p{
    max-width:500px;

    color:#697586;

    font-size:15px;

    line-height:1.85;
}

.kontak-location-detail{
    margin-top:30px;

    border-top:1px solid #dce4ec;
}

.kontak-location-detail > div{
    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:18px 0;

    border-bottom:1px solid #dce4ec;
}

.kontak-location-detail > div > i{
    width:34px;

    color:#0a5da5;

    font-size:18px;
}

.kontak-location-detail span{
    display:block;

    margin-bottom:4px;

    color:#8490a0;

    font-size:9px;

    font-weight:800;

    letter-spacing:.12em;
}

.kontak-location-detail strong{
    display:block;

    color:#253850;

    font-size:13px;

    line-height:1.6;
}


/* ==========================================================
   MAP
========================================================== */

.kontak-map{
    min-height:390px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            90deg,
            rgba(7,59,122,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(7,59,122,.035) 1px,
            transparent 1px
        ),
        #edf3f7;

    background-size:40px 40px;

    border:1px solid #d8e2eb;
}

.kontak-map::before{
    content:"";

    position:absolute;

    width:360px;
    height:360px;

    border:1px solid rgba(7,59,122,.10);

    border-radius:50%;
}

.kontak-map-grid{
    position:absolute;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            25deg,
            transparent 48%,
            rgba(7,59,122,.06) 49%,
            transparent 50%
        );

    opacity:.8;
}

.kontak-map-content{
    position:relative;

    z-index:2;

    width:260px;

    padding:25px;

    text-align:center;

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

    border:1px solid #d8e2eb;

    box-shadow:0 10px 30px rgba(17,45,78,.08);
}

.kontak-map-marker{
    width:50px;
    height:50px;

    margin:0 auto 15px;

    display:flex;

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

    background:#075ca5;

    color:#fff;

    font-size:21px;

    border-radius:50%;
}

.kontak-map-content strong{
    display:block;

    margin-bottom:5px;

    color:#1a2e48;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:14px;

    line-height:1.5;
}

.kontak-map-content > span{
    display:block;

    margin-bottom:18px;

    color:#788596;

    font-size:11px;
}

.kontak-map-button{
    display:inline-flex;

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

    gap:8px;

    min-height:40px;

    padding:0 14px;

    background:#075ca5;

    color:#fff;

    text-decoration:none;

    font-size:11px;

    font-weight:700;
}

.kontak-map-button:hover{
    background:#064c88;

    color:#fff;
}


/* ==========================================================
   SERVICES
========================================================== */

.kontak-services{
    padding:90px 0;
}

.kontak-services-grid{
    display:grid;

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

    gap:16px;

    margin-top:40px;
}

.kontak-service-card{
    position:relative;

    display:block;

    padding:25px;

    min-height:230px;

    background:#fff;

    border:1px solid #dfe6ee;

    color:inherit;

    text-decoration:none;

    transition:.25s ease;
}

.kontak-service-card:hover{
    border-color:#9fbcd5;

    transform:translateY(-3px);

    color:inherit;
}

.kontak-service-icon{
    width:50px;
    height:50px;

    display:flex;

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

    margin-bottom:28px;

    background:#edf5fc;

    color:#075ca5;

    font-size:21px;
}

.kontak-service-card span{
    display:block;

    margin-bottom:7px;

    color:#7e8a99;

    font-size:9px;

    font-weight:800;

    letter-spacing:.12em;
}

.kontak-service-card h3{
    margin:0 0 8px;

    color:#1b304b;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:18px;

    font-weight:800;
}

.kontak-service-card p{
    margin:0;

    color:#697586;

    font-size:12px;

    line-height:1.7;
}

.kontak-service-card > i{
    position:absolute;

    right:20px;
    bottom:20px;

    color:#0a5da5;

    font-size:16px;
}


/* ==========================================================
   FINAL CTA
========================================================== */

.kontak-final{
    padding:0 0 90px;
}

.kontak-final-box{
    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:60px;

    padding:50px 55px;

    background:#073b7a;

    position:relative;

    overflow:hidden;
}

.kontak-final-box::after{
    content:"";

    position:absolute;

    width:360px;
    height:360px;

    right:-150px;
    top:-170px;

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

    border-radius:50%;
}

.kontak-final-content,
.kontak-final-actions{
    position:relative;

    z-index:2;
}

.kontak-final-content > span{
    color:#a9d2f7;

    font-size:10px;

    font-weight:800;

    letter-spacing:.14em;
}

.kontak-final-content h2{
    max-width:600px;

    margin:13px 0 15px;

    color:#fff;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:31px;

    line-height:1.3;

    font-weight:800;
}

.kontak-final-content p{
    max-width:620px;

    margin:0;

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

    font-size:14px;

    line-height:1.8;
}

.kontak-final-actions{
    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:10px;
}

.kontak-final-button{
    display:flex;

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

    gap:9px;

    min-height:45px;

    padding:0 18px;

    background:#fff;

    color:#075ca5;

    text-decoration:none;

    font-size:12px;

    font-weight:700;

    border:1px solid #fff;

    transition:.2s ease;
}

.kontak-final-button:hover{
    background:#edf5fc;

    color:#064c88;
}

.kontak-final-button.secondary{
    background:transparent;

    color:#fff;

    border-color:rgba(255,255,255,.35);
}

.kontak-final-button.secondary:hover{
    background:rgba(255,255,255,.08);

    color:#fff;
}


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

@media(max-width:1000px){

    .kontak-services-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .kontak-location-grid{
        grid-template-columns:1fr;
    }

    .kontak-final-box{
        grid-template-columns:1fr;

        gap:35px;
    }

}


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

@media(max-width:768px){

    .kontak-page-hero{
        min-height:330px;
    }

    .kontak-intro{
        padding:65px 0;
    }

    .kontak-intro-grid{
        grid-template-columns:1fr;

        gap:25px;
    }

    .kontak-intro-number,
    .kontak-intro-small{
        display:none;
    }

    .kontak-intro-content h2{
        font-size:29px;
    }

    .kontak-information{
        padding-bottom:65px;
    }

    .kontak-information-grid{
        grid-template-columns:1fr;
    }

    .kontak-location,
    .kontak-services{
        padding:65px 0;
    }

    .kontak-location-info h2{
        font-size:29px;
    }

    .kontak-map{
        min-height:330px;
    }

    .kontak-services-grid{
        grid-template-columns:1fr;
    }

    .kontak-service-card{
        min-height:190px;
    }

    .kontak-final{
        padding-bottom:65px;
    }

    .kontak-final-box{
        padding:35px 25px;
    }

    .kontak-final-content h2{
        font-size:26px;
    }

}


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

@media(max-width:480px){

    .kontak-card{
        padding:22px;

        gap:15px;
    }

    .kontak-card-icon{
        width:48px;
        height:48px;

        flex-basis:48px;
    }

    .kontak-card-content h3{
        font-size:17px;
    }

    .kontak-map-content{
        width:calc(100% - 40px);
    }

    .kontak-final-content h2{
        font-size:23px;
    }

}
/* ==========================================================
   PROFIL SEKOLAH
   MODERN GOVERNMENT • CLEAN • PREMIUM • RESPONSIVE

   GANTI CSS PROFIL LAMA DENGAN CSS INI
   LETAKKAN PALING BAWAH FILE CSS
========================================================== */


/* ==========================================================
   01. SECTION UTAMA
========================================================== */

.about-section{

    position:relative;

    width:100%;

    padding:
        68px
        0
        78px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #f3f7fa 0%,
            #f8fafc 52%,
            #edf3f8 100%
        );

}


/* ==========================================================
   02. BACKGROUND DECORATIVE
========================================================== */

.about-section::before{

    content:"";

    position:absolute;

    width:360px;
    height:360px;

    top:-210px;
    right:-120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(15,76,129,.08),
            rgba(15,76,129,.025) 52%,
            transparent 72%
        );

    pointer-events:none;

}


.about-section::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    bottom:-170px;
    left:-100px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(47,128,237,.07),
            transparent 70%
        );

    pointer-events:none;

}


/* ==========================================================
   03. CONTAINER
========================================================== */

.about-section .container{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1120px;

    margin:0 auto;

    padding:
        0
        22px;

}


/* ==========================================================
   04. LAYOUT UTAMA
========================================================== */

.about-layout{

    display:grid;

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

    column-gap:54px;

    row-gap:0;

    align-items:start;

}


/* ==========================================================
   05. CONTENT DIJADIKAN GRID ITEM
========================================================== */

.about-content{

    display:contents;

}


/* ==========================================================
   06. LABEL PROFIL
========================================================== */

.about-content .section-kicker{

    grid-column:
        1 / -1;

    grid-row:1;

    justify-self:center;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin:
        0
        0
        10px;

    padding:
        7px
        14px;

    border:
        1px solid
        rgba(15,76,129,.13);

    border-radius:999px;

    background:
        rgba(15,76,129,.055);

    color:#0f4c81;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.6px;

    line-height:1;

    text-transform:uppercase;

}


/* BULLET */

.about-content .section-kicker::before{

    content:"";

    width:6px;
    height:6px;

    border-radius:50%;

    background:#2f80ed;

    box-shadow:
        0 0 0 4px
        rgba(47,128,237,.09);

}


/* ==========================================================
   07. JUDUL
========================================================== */

.about-content h2{

    grid-column:
        1 / -1;

    grid-row:2;

    margin:
        0;

    padding:0;

    color:#123f63;

    font-size:
        clamp(
            30px,
            3.2vw,
            40px
        );

    line-height:1.18;

    font-weight:800;

    letter-spacing:-.8px;

    text-align:center;

}


/* ==========================================================
   08. GARIS JUDUL
========================================================== */

.about-title-line{

    grid-column:
        1 / -1;

    grid-row:3;

    position:relative;

    justify-self:center;

    width:58px;

    height:3px;

    margin:
        17px
        0
        42px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #0f4c81,
            #2f80ed
        );

}


/* BULAT DI TENGAH */

.about-title-line::after{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#f8fafc;

    border:
        2px solid
        #2f80ed;

    transform:
        translate(
            -50%,
            -50%
        );

}


/* ==========================================================
   09. FOTO
========================================================== */

.about-gallery{

    grid-column:1;

    grid-row:4 / span 3;

    width:100%;

    min-width:0;

}


/* ==========================================================
   10. FOTO SLIDER
========================================================== */

.about-photo-slider{

    position:relative;

    width:100%;

    height:340px;

    padding:9px;

    border-radius:18px;

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

    border:
        1px solid
        #d7e2eb;

    box-shadow:
        0 16px 35px
        rgba(27,53,74,.11);

}


/* ==========================================================
   11. FRAME BELAKANG
========================================================== */

.about-photo-slider::before{

    content:"";

    position:absolute;

    z-index:-1;

    top:10px;
    left:10px;

    width:100%;
    height:100%;

    border-radius:18px;

    background:
        #e5edf4;

    border:
        1px solid
        #cbd9e4;

}


/* ==========================================================
   12. AKSEN DOT
========================================================== */

.about-photo-slider::after{

    content:"";

    position:absolute;

    z-index:-2;

    right:-18px;
    bottom:-18px;

    width:65px;
    height:65px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #2f80ed 1.3px,
            transparent 1.3px
        );

    background-size:8px 8px;

    opacity:.28;

}


/* ==========================================================
   13. SLIDE
========================================================== */

.about-photo-slide{

    position:absolute;

    inset:9px;

    overflow:hidden;

    border-radius:12px;

    opacity:0;

    visibility:hidden;

    transform:
        scale(1.015);

    transition:
        opacity .55s ease,
        transform .65s ease,
        visibility .55s ease;

}


.about-photo-slide.active{

    opacity:1;

    visibility:visible;

    transform:
        scale(1);

}


/* ==========================================================
   14. FOTO
========================================================== */

.about-photo-slide img{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

}


/* ==========================================================
   15. OVERLAY FOTO
========================================================== */

.about-photo-slide::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(5,24,40,.68) 100%
        );

    pointer-events:none;

}


/* ==========================================================
   16. INFO FOTO
========================================================== */

.about-photo-overlay{

    position:absolute;

    z-index:4;

    left:18px;
    right:18px;
    bottom:18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#ffffff;

}


.about-photo-overlay span{

    font-size:12px;

    font-weight:700;

}


.about-photo-overlay strong{

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;
    height:34px;

    border-radius:50%;

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

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

    backdrop-filter:
        blur(7px);

    font-size:10px;

}


/* ==========================================================
   17. CONTROL FOTO
========================================================== */

.about-photo-controls{

    position:absolute;

    z-index:10;

    top:17px;
    right:17px;

    display:flex;

    align-items:center;

    gap:4px;

    padding:4px;

    border-radius:8px;

    background:
        rgba(6,25,42,.52);

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

    backdrop-filter:
        blur(8px);

}


/* ==========================================================
   18. BUTTON CONTROL
========================================================== */

.about-photo-controls button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:30px;
    height:30px;

    padding:0;

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

    border-radius:6px;

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

    color:#ffffff;

    cursor:pointer;

    transition:
        .2s ease;

}


.about-photo-controls button:hover{

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

}


/* ==========================================================
   19. COUNTER
========================================================== */

.about-photo-counter{

    display:flex;

    align-items:center;

    gap:3px;

    padding:
        0
        4px;

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

    font-size:10px;

}


.about-photo-counter strong{

    color:#ffffff;

    font-size:11px;

}


/* ==========================================================
   20. DOTS
========================================================== */

.about-photo-dots{

    position:absolute;

    z-index:10;

    left:17px;
    bottom:17px;

    display:flex;

    align-items:center;

    gap:5px;

    padding:
        5px
        8px;

    border-radius:20px;

    background:
        rgba(5,24,40,.45);

    backdrop-filter:
        blur(7px);

}


.about-photo-dots button{

    width:6px;
    height:6px;

    padding:0;

    border:0;

    border-radius:50%;

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

    cursor:pointer;

    transition:
        all .25s ease;

}


.about-photo-dots button.active{

    width:18px;

    border-radius:10px;

    background:#ffffff;

}


/* ==========================================================
   21. SUBJUDUL
========================================================== */

.about-content .about-lead{

    grid-column:2;

    grid-row:4;

    width:100%;

    margin:
        0
        0
        12px;

    color:#294e6c;

    font-size:16px;

    line-height:1.7;

    font-weight:700;

    text-align:justify;

}


/* ==========================================================
   22. DESKRIPSI
========================================================== */

.about-content .about-description{

    grid-column:2;

    grid-row:5;

    width:100%;

    margin:0;

    color:#64788b;

    font-size:14px;

    line-height:1.8;

    text-align:justify;

}


/* ==========================================================
   23. TOMBOL
========================================================== */

.about-content .about-action{

    grid-column:2;

    grid-row:6;

    width:100%;

    margin:
        22px
        0
        0;

    text-align:left;

}


.about-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:44px;

    padding:
        0
        18px;

    border-radius:7px;

    background:
        linear-gradient(
            135deg,
            #0f4c81,
            #1769aa
        );

    color:#ffffff;

    text-decoration:none;

    font-size:12px;

    font-weight:700;

    box-shadow:
        0 8px 18px
        rgba(15,76,129,.16);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.about-button:hover{

    color:#ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 24px
        rgba(15,76,129,.22);

}


.about-button i{

    font-size:14px;

    transition:
        transform .2s ease;

}


.about-button:hover i{

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

}


/* ==========================================================
   24. FOTO KOSONG
========================================================== */

.about-photo-empty{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:100%;

    height:340px;

    border:
        1px dashed
        #b9cbd9;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            #f7fafc,
            #e9f1f7
        );

    color:#718397;

}


.about-photo-empty i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;
    height:58px;

    margin-bottom:12px;

    border-radius:16px;

    background:#e1ebf3;

    color:#0f4c81;

    font-size:24px;

}


.about-photo-empty span{

    font-size:12px;

    font-weight:600;

}


/* ==========================================================
   25. TABLET
========================================================== */

@media (max-width:991px){

    .about-section{

        padding:
            65px
            0
            75px;

    }


    .about-section .container{

        padding:
            0
            20px;

    }


    .about-layout{

        grid-template-columns:1fr;

        row-gap:0;

    }


    .about-content .section-kicker{

        grid-column:1;

        grid-row:1;

    }


    .about-content h2{

        grid-column:1;

        grid-row:2;

    }


    .about-title-line{

        grid-column:1;

        grid-row:3;

        margin-bottom:35px;

    }


    .about-gallery{

        grid-column:1;

        grid-row:4;

        margin-bottom:28px;

    }


    .about-content .about-lead{

        grid-column:1;

        grid-row:5;

        margin-bottom:12px;

        text-align:justify;

    }


    .about-content .about-description{

        grid-column:1;

        grid-row:6;

        text-align:justify;

    }


    .about-content .about-action{

        grid-column:1;

        grid-row:7;

        margin-top:20px;

        text-align:center;

    }


    .about-photo-slider,
    .about-photo-empty{

        height:360px;

    }

}


/* ==========================================================
   26. MOBILE
========================================================== */

@media (max-width:600px){

    .about-section{

        padding:
            52px
            0
            62px;

    }


    .about-section .container{

        padding:
            0
            16px;

    }


    .about-content .section-kicker{

        margin-bottom:9px;

        padding:
            7px
            12px;

        font-size:9px;

        letter-spacing:1.3px;

    }


    .about-content h2{

        font-size:27px;

        line-height:1.2;

        letter-spacing:-.5px;

    }


    .about-title-line{

        width:50px;

        height:3px;

        margin:
            15px
            auto
            30px;

    }


    .about-gallery{

        margin-bottom:25px;

    }


    .about-photo-slider,
    .about-photo-empty{

        height:270px;

    }


    .about-photo-slider{

        padding:8px;

        border-radius:16px;

    }


    .about-photo-slider::before{

        top:8px;
        left:8px;

        border-radius:16px;

    }


    .about-photo-slider::after{

        width:50px;
        height:50px;

        right:-15px;
        bottom:-15px;

        background-size:7px 7px;

    }


    .about-photo-slide{

        inset:8px;

        border-radius:10px;

    }


    .about-photo-controls{

        top:14px;
        right:14px;

    }


    .about-photo-controls button{

        width:28px;
        height:28px;

    }


    .about-photo-overlay{

        left:14px;
        right:14px;
        bottom:14px;

    }


    .about-photo-overlay span{

        font-size:10px;

    }


    .about-photo-overlay strong{

        width:31px;
        height:31px;

        font-size:9px;

    }


    .about-photo-dots{

        left:14px;
        bottom:14px;

    }


    .about-content .about-lead{

        font-size:15px;

        line-height:1.7;

        text-align:justify;

    }


    .about-content .about-description{

        font-size:13.5px;

        line-height:1.8;

        text-align:justify;

    }


    .about-content .about-action{

        margin-top:20px;

    }


    .about-button{

        width:100%;

        min-height:44px;

        font-size:12px;

    }


    .about-photo-empty i{

        width:54px;
        height:54px;

        font-size:22px;

    }

}


/* ==========================================================
   27. MOBILE SANGAT KECIL
========================================================== */

@media (max-width:380px){

    .about-content h2{

        font-size:25px;

    }


    .about-photo-slider,
    .about-photo-empty{

        height:245px;

    }


    .about-content .about-lead{

        font-size:14px;

    }


    .about-content .about-description{

        font-size:13px;

    }


    .about-photo-counter{

        display:none;

    }

}
/* ==========================================================
   PROFIL SEKOLAH
   MODERN GOVERNMENT PREMIUM
   CLEAN • ELEGANT • RESPONSIVE
========================================================== */


/* ==========================================================
   01. SECTION UTAMA
========================================================== */

.about-section{

    position:relative;

    width:100%;

    padding:
        70px
        0
        82px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(47,128,237,.10),
            transparent 28%
        ),

        radial-gradient(
            circle at 92% 80%,
            rgba(15,76,129,.10),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #edf3f8 0%,
            #f7fafc 42%,
            #e9f1f7 100%
        );

}


/* ==========================================================
   02. POLA TITIK MODERN
========================================================== */

.about-section::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(
            rgba(15,76,129,.13) 1px,
            transparent 1px
        );

    background-size:
        24px 24px;

    opacity:.28;

    mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 35%,
            transparent 65%,
            black
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 35%,
            transparent 65%,
            black
        );

    pointer-events:none;

}


/* ==========================================================
   03. CAHAYA DEKORATIF KIRI
========================================================== */

.about-section::after{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    top:-350px;
    left:-230px;

    border-radius:50%;

    border:
        1px solid
        rgba(47,128,237,.13);

    box-shadow:

        0 0 0 35px
        rgba(47,128,237,.025),

        0 0 0 70px
        rgba(47,128,237,.018);

    pointer-events:none;

}


/* ==========================================================
   04. CONTAINER
========================================================== */

.about-section .container{

    position:relative;

    z-index:3;

    width:100%;

    max-width:1120px;

    margin:
        0
        auto;

    padding:
        0
        22px;

}


/* ==========================================================
   05. LAYOUT
========================================================== */

.about-layout{

    display:grid;

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

    column-gap:52px;

    row-gap:0;

    align-items:start;

}


/* ==========================================================
   06. CONTENT
========================================================== */

.about-content{

    display:contents;

}


/* ==========================================================
   07. LABEL
========================================================== */

.about-content .section-kicker{

    grid-column:
        1 / -1;

    grid-row:1;

    justify-self:center;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    margin:
        0
        auto
        11px;

    padding:
        7px
        15px;

    border:
        1px solid
        rgba(15,76,129,.15);

    border-radius:999px;

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

    box-shadow:
        0 6px 18px
        rgba(15,76,129,.06);

    color:#0f4c81;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.8px;

    line-height:1;

    text-transform:uppercase;

    backdrop-filter:
        blur(8px);

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

}


/* ==========================================================
   08. TITIK LABEL
========================================================== */

.about-content .section-kicker::before{

    content:"";

    width:7px;
    height:7px;

    flex:0 0 7px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #0f4c81,
            #2f80ed
        );

    box-shadow:
        0 0 0 4px
        rgba(47,128,237,.10);

}


/* ==========================================================
   09. JUDUL UTAMA
========================================================== */

.about-content h2{

    grid-column:
        1 / -1;

    grid-row:2;

    display:block;

    width:100%;

    margin:
        0;

    padding:
        0;

    color:#123f63;

    font-size:
        clamp(
            29px,
            3.2vw,
            40px
        );

    line-height:
        1.18;

    font-weight:800;

    letter-spacing:-.7px;

    text-align:center;

}


/* ==========================================================
   10. PAKSA CENTER UNTUK JUDUL
========================================================== */

.about-content h2{

    justify-self:center;

}


/* ==========================================================
   11. GARIS JUDUL
========================================================== */

.about-title-line{

    grid-column:
        1 / -1;

    grid-row:3;

    position:relative;

    justify-self:center;

    width:62px;

    height:3px;

    margin:
        17px
        0
        42px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #0f4c81,
            #2f80ed
        );

}


/* ==========================================================
   12. AKSEN TENGAH
========================================================== */

.about-title-line::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:28px;
    height:28px;

    border-radius:50%;

    border:
        1px solid
        rgba(47,128,237,.16);

    transform:
        translate(
            -50%,
            -50%
        );

}


.about-title-line::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:9px;
    height:9px;

    border-radius:50%;

    background:#f4f8fb;

    border:
        2px solid
        #2f80ed;

    transform:
        translate(
            -50%,
            -50%
        );

}


/* ==========================================================
   13. FOTO
========================================================== */

.about-gallery{

    grid-column:1;

    grid-row:4 / span 3;

    width:100%;

    min-width:0;

}


/* ==========================================================
   14. FOTO SLIDER
========================================================== */

.about-photo-slider{

    position:relative;

    width:100%;

    height:340px;

    padding:9px;

    border-radius:19px;

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

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

    box-shadow:

        0 18px 42px
        rgba(26,55,77,.13),

        0 3px 8px
        rgba(26,55,77,.05);

    backdrop-filter:
        blur(10px);

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

}


/* ==========================================================
   15. FRAME BELAKANG
========================================================== */

.about-photo-slider::before{

    content:"";

    position:absolute;

    z-index:-1;

    top:11px;
    left:11px;

    width:100%;
    height:100%;

    border-radius:19px;

    background:
        linear-gradient(
            135deg,
            #dce8f1,
            #edf3f8
        );

    border:
        1px solid
        #cbd9e5;

}


/* ==========================================================
   16. AKSEN DOT FOTO
========================================================== */

.about-photo-slider::after{

    content:"";

    position:absolute;

    z-index:-2;

    right:-19px;
    bottom:-19px;

    width:68px;
    height:68px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #2f80ed 1.3px,
            transparent 1.3px
        );

    background-size:
        8px 8px;

    opacity:.32;

}


/* ==========================================================
   17. SLIDE
========================================================== */

.about-photo-slide{

    position:absolute;

    inset:9px;

    overflow:hidden;

    border-radius:12px;

    opacity:0;

    visibility:hidden;

    transform:
        scale(1.015);

    transition:
        opacity .55s ease,
        transform .65s ease,
        visibility .55s ease;

}


.about-photo-slide.active{

    opacity:1;

    visibility:visible;

    transform:
        scale(1);

}


/* ==========================================================
   18. FOTO
========================================================== */

.about-photo-slide img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}


/* ==========================================================
   19. OVERLAY
========================================================== */

.about-photo-slide::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(7,25,42,.68) 100%
        );

    pointer-events:none;

}


/* ==========================================================
   20. FOTO INFO
========================================================== */

.about-photo-overlay{

    position:absolute;

    z-index:4;

    left:18px;
    right:18px;
    bottom:18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#ffffff;

}


.about-photo-overlay span{

    font-size:12px;

    font-weight:700;

}


.about-photo-overlay strong{

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;
    height:34px;

    border-radius:50%;

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

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

    backdrop-filter:
        blur(7px);

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

    font-size:10px;

}


/* ==========================================================
   21. CONTROL
========================================================== */

.about-photo-controls{

    position:absolute;

    z-index:10;

    top:17px;
    right:17px;

    display:flex;

    align-items:center;

    gap:4px;

    padding:4px;

    border-radius:8px;

    background:
        rgba(6,25,42,.52);

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

    backdrop-filter:
        blur(8px);

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

}


.about-photo-controls button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:30px;
    height:30px;

    padding:0;

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

    border-radius:6px;

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

    color:#ffffff;

    cursor:pointer;

    transition:
        all .2s ease;

}


.about-photo-controls button:hover{

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

}


/* ==========================================================
   22. COUNTER
========================================================== */

.about-photo-counter{

    display:flex;

    align-items:center;

    gap:3px;

    padding:
        0
        4px;

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

    font-size:10px;

}


.about-photo-counter strong{

    color:#ffffff;

    font-size:11px;

}


/* ==========================================================
   23. DOTS
========================================================== */

.about-photo-dots{

    position:absolute;

    z-index:10;

    left:17px;
    bottom:17px;

    display:flex;

    align-items:center;

    gap:5px;

    padding:
        5px
        8px;

    border-radius:20px;

    background:
        rgba(5,24,40,.45);

    backdrop-filter:
        blur(7px);

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

}


.about-photo-dots button{

    width:6px;
    height:6px;

    padding:0;

    border:0;

    border-radius:50%;

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

    cursor:pointer;

    transition:
        all .25s ease;

}


.about-photo-dots button.active{

    width:18px;

    border-radius:10px;

    background:#ffffff;

}


/* ==========================================================
   24. NARASI UTAMA
========================================================== */

.about-content .about-lead{

    grid-column:2;

    grid-row:4;

    width:100%;

    margin:
        0
        0
        12px;

    color:#294e6c;

    font-size:16px;

    line-height:1.7;

    font-weight:700;

    text-align:justify;

}


/* ==========================================================
   25. DESKRIPSI
========================================================== */

.about-content .about-description{

    grid-column:2;

    grid-row:5;

    width:100%;

    margin:0;

    color:#64788b;

    font-size:14px;

    line-height:1.8;

    text-align:justify;

}


/* ==========================================================
   26. BUTTON
========================================================== */

.about-content .about-action{

    grid-column:2;

    grid-row:6;

    width:100%;

    margin:
        22px
        0
        0;

    text-align:left;

}


.about-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:44px;

    padding:
        0
        18px;

    border-radius:7px;

    background:
        linear-gradient(
            135deg,
            #0f4c81,
            #1769aa
        );

    color:#ffffff;

    text-decoration:none;

    font-size:12px;

    font-weight:700;

    box-shadow:
        0 8px 18px
        rgba(15,76,129,.16);

    transition:
        all .22s ease;

}


.about-button:hover{

    color:#ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(15,76,129,.23);

}


.about-button i{

    transition:
        transform .22s ease;

}


.about-button:hover i{

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

}


/* ==========================================================
   27. FOTO KOSONG
========================================================== */

.about-photo-empty{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:100%;

    height:340px;

    border:
        1px dashed
        #b9cbd9;

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            #f5f9fc,
            #e7f0f6
        );

    color:#718397;

}


.about-photo-empty::before{

    content:"";

    position:absolute;

    inset:10px;

    border:
        1px solid
        rgba(15,76,129,.06);

    border-radius:14px;

    pointer-events:none;

}


.about-photo-empty i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;
    height:58px;

    margin-bottom:12px;

    border-radius:16px;

    background:#deebf4;

    color:#0f4c81;

    font-size:24px;

}


.about-photo-empty span{

    font-size:12px;

    font-weight:600;

}


/* ==========================================================
   28. TABLET
========================================================== */

@media (max-width:991px){

    .about-section{

        padding:
            62px
            0
            72px;

    }


    .about-section .container{

        padding:
            0
            20px;

    }


    .about-layout{

        grid-template-columns:1fr;

        row-gap:0;

    }


    .about-content .section-kicker{

        grid-column:1;

        grid-row:1;

    }


    .about-content h2{

        grid-column:1;

        grid-row:2;

        text-align:center;

    }


    .about-title-line{

        grid-column:1;

        grid-row:3;

        margin-bottom:34px;

    }


    .about-gallery{

        grid-column:1;

        grid-row:4;

        margin-bottom:28px;

    }


    .about-content .about-lead{

        grid-column:1;

        grid-row:5;

        text-align:justify;

    }


    .about-content .about-description{

        grid-column:1;

        grid-row:6;

        text-align:justify;

    }


    .about-content .about-action{

        grid-column:1;

        grid-row:7;

        text-align:center;

    }


    .about-photo-slider,
    .about-photo-empty{

        height:350px;

    }

}


/* ==========================================================
   29. MOBILE
========================================================== */

@media (max-width:600px){

    .about-section{

        padding:
            52px
            0
            62px;

    }


    .about-section .container{

        padding:
            0
            16px;

    }


    .about-content .section-kicker{

        padding:
            7px
            12px;

        font-size:9px;

        letter-spacing:1.3px;

    }


    .about-content h2{

        width:100%;

        font-size:27px;

        line-height:1.2;

        letter-spacing:-.5px;

        text-align:center;

    }


    .about-title-line{

        width:50px;

        height:3px;

        margin:
            15px
            auto
            29px;

    }


    .about-gallery{

        margin-bottom:24px;

    }


    .about-photo-slider,
    .about-photo-empty{

        height:270px;

    }


    .about-photo-slider{

        padding:8px;

        border-radius:16px;

    }


    .about-photo-slider::before{

        top:8px;
        left:8px;

        border-radius:16px;

    }


    .about-photo-slider::after{

        width:50px;
        height:50px;

        right:-14px;
        bottom:-14px;

        background-size:7px 7px;

    }


    .about-photo-slide{

        inset:8px;

        border-radius:10px;

    }


    .about-photo-controls{

        top:14px;
        right:14px;

    }


    .about-photo-controls button{

        width:28px;
        height:28px;

    }


    .about-photo-overlay{

        left:14px;
        right:14px;
        bottom:14px;

    }


    .about-photo-overlay span{

        font-size:10px;

    }


    .about-photo-overlay strong{

        width:31px;
        height:31px;

    }


    .about-photo-dots{

        left:14px;
        bottom:14px;

    }


    .about-content .about-lead{

        font-size:15px;

        line-height:1.7;

        text-align:justify;

    }


    .about-content .about-description{

        font-size:13.5px;

        line-height:1.8;

        text-align:justify;

    }


    .about-content .about-action{

        margin-top:20px;

        text-align:center;

    }


    .about-button{

        width:100%;

        min-height:44px;

    }

}


/* ==========================================================
   30. MOBILE KECIL
========================================================== */

@media (max-width:380px){

    .about-content h2{

        font-size:25px;

        text-align:center;

    }


    .about-photo-slider,
    .about-photo-empty{

        height:245px;

    }


    .about-content .about-lead{

        font-size:14px;

    }


    .about-content .about-description{

        font-size:13px;

    }


    .about-photo-counter{

        display:none;

    }

}
/* ==========================================================
   OVERRIDE TAMBAHAN
   JUDUL PROFIL SEKOLAH - ESTETIK
   TANPA MENGUBAH CSS LAMA
========================================================== */


/* ==========================================================
   01. HILANGKAN AKSEN LINGKARAN LAMA
========================================================== */

.about-title-line::before,
.about-title-line::after{

    display:none !important;

}


/* ==========================================================
   02. HILANGKAN GARIS LAMA
   LALU BUAT GARIS PANJANG BARU
========================================================== */

.about-title-line{

    width:180px !important;

    height:3px !important;

    margin:
        18px
        auto
        42px !important;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #0f4c81 18%,
            #2f80ed 50%,
            #0f4c81 82%,
            transparent 100%
        ) !important;

    box-shadow:
        0 3px 10px
        rgba(47,128,237,.18);

}


/* ==========================================================
   03. BACKGROUND / BINGKAI JUDUL
========================================================== */

.about-content h2{

    position:relative;

    width:auto !important;

    max-width:90%;

    padding:
        20px
        38px
        18px;

    border-radius:18px;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(47,128,237,.10),
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(15,76,129,.08),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            rgba(255,255,255,.88),
            rgba(238,246,252,.72)
        );

    border:
        1px solid
        rgba(15,76,129,.10);

    box-shadow:

        0 12px 30px
        rgba(15,76,129,.08),

        inset 0 1px 0
        rgba(255,255,255,.95);

    backdrop-filter:
        blur(10px);

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

}


/* ==========================================================
   04. BINGKAI DALAM
========================================================== */

.about-content h2::before{

    content:"";

    position:absolute;

    inset:7px;

    border:
        1px solid
        rgba(47,128,237,.08);

    border-radius:13px;

    pointer-events:none;

}


/* ==========================================================
   05. AKSEN KECIL KIRI
========================================================== */

.about-content h2::after{

    content:"";

    position:absolute;

    left:16px;

    top:50%;

    width:5px;

    height:38px;

    border-radius:10px;

    background:
        linear-gradient(
            180deg,
            #0f4c81,
            #2f80ed
        );

    transform:
        translateY(-50%);

    box-shadow:
        0 4px 12px
        rgba(47,128,237,.20);

}


/* ==========================================================
   06. GARIS LEBIH PANJANG DI DESKTOP
========================================================== */

@media (min-width:992px){

    .about-title-line{

        width:240px !important;

        height:3px !important;

    }

}


/* ==========================================================
   07. TABLET
========================================================== */

@media (max-width:991px){

    .about-content h2{

        max-width:
            calc(100% - 20px);

        padding:
            18px
            30px
            16px;

    }

    .about-title-line{

        width:200px !important;

    }

}


/* ==========================================================
   08. MOBILE
========================================================== */

@media (max-width:600px){

    .about-content h2{

        max-width:
            calc(100% - 8px);

        padding:
            16px
            25px
            15px;

        border-radius:15px;

    }

    .about-content h2::after{

        left:11px;

        width:4px;

        height:30px;

    }

    .about-title-line{

        width:150px !important;

        height:3px !important;

        margin:
            15px
            auto
            29px !important;

    }

}


/* ==========================================================
   09. MOBILE KECIL
========================================================== */

@media (max-width:380px){

    .about-content h2{

        padding:
            15px
            20px
            14px;

    }

    .about-title-line{

        width:130px !important;

    }

}
/* ==========================================================
   FINISHING PROFIL SEKOLAH
   TAMBAHAN SAJA — TIDAK MENGUBAH CSS LAMA
========================================================== */


/* ==========================================================
   01. HILANGKAN GARIS VERTIKAL DI SAMPING JUDUL
========================================================== */

.about-content h2::after{

    display:none !important;

}


/* ==========================================================
   02. JUDUL SEKOLAH LEBIH NATURAL
========================================================== */

.about-content h2{

    padding:
        18px
        34px
        17px !important;

    border-radius:18px;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.92),
            rgba(235,244,251,.82)
        );

    border:
        1px solid
        rgba(47,128,237,.10);

    box-shadow:

        0 12px 28px
        rgba(15,76,129,.07),

        inset 0 1px 0
        rgba(255,255,255,.95);

}


/* ==========================================================
   03. AKSEN HALUS DI BINGKAI JUDUL
========================================================== */

.about-content h2::before{

    inset:6px !important;

    border:
        1px solid
        rgba(47,128,237,.07);

    border-radius:13px;

}


/* ==========================================================
   04. GARIS BAWAH JUDUL
========================================================== */

.about-title-line{

    width:220px !important;

    height:3px !important;

    margin:
        17px
        auto
        36px !important;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            transparent 0%,
            #8fb8d8 12%,
            #0f4c81 35%,
            #2f80ed 50%,
            #0f4c81 65%,
            #8fb8d8 88%,
            transparent 100%
        ) !important;

    box-shadow:

        0 3px 9px
        rgba(47,128,237,.18);

}


/* ==========================================================
   05. AREA FOTO / SLIDER
   BACKGROUND PREMIUM
========================================================== */

.about-photo-slider{

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(47,128,237,.13),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(15,76,129,.12),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            #f7fbfe,
            #e8f1f7
        ) !important;

    border:
        1px solid
        rgba(15,76,129,.12);

    box-shadow:

        0 18px 42px
        rgba(26,55,77,.12),

        0 5px 15px
        rgba(15,76,129,.05),

        inset 0 1px 0
        rgba(255,255,255,.95);

}


/* ==========================================================
   06. DEKORASI BACKGROUND FOTO
========================================================== */

.about-photo-slider::before{

    background:

        linear-gradient(
            135deg,
            rgba(220,232,241,.95),
            rgba(247,251,254,.95)
        ) !important;

    border:
        1px solid
        rgba(15,76,129,.10);

}


/* ==========================================================
   07. TAMBAHKAN POLA HALUS DI AREA FOTO
========================================================== */

.about-photo-slider{

    isolation:isolate;

}


.about-photo-slider::after{

    width:90px !important;

    height:90px !important;

    right:-20px !important;

    bottom:-20px !important;

    opacity:.24 !important;

}


/* ==========================================================
   08. FOTO KOSONG JUGA DIBUAT PREMIUM
========================================================== */

.about-photo-empty{

    height:340px;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(47,128,237,.10),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 75%,
            rgba(15,76,129,.09),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            #f7fbfe,
            #e6f0f6
        ) !important;

    border:
        1px dashed
        rgba(15,76,129,.20);

    box-shadow:

        0 16px 35px
        rgba(15,76,129,.07),

        inset 0 1px 0
        rgba(255,255,255,.9);

}


/* ==========================================================
   09. ICON FOTO KOSONG
========================================================== */

.about-photo-empty i{

    width:54px;
    height:54px;

    border-radius:15px;

    background:

        linear-gradient(
            145deg,
            #e4f0f8,
            #d5e7f3
        ) !important;

    border:
        1px solid
        rgba(15,76,129,.08);

    box-shadow:

        0 8px 18px
        rgba(15,76,129,.08);

}


/* ==========================================================
   10. TOMBOL SELENGKAPNYA
   KECIL + RATA KANAN
========================================================== */

.about-content .about-action{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    width:100%;

    margin:
        20px
        0
        0;

    text-align:right;

}


/* ==========================================================
   11. UKURAN BUTTON
========================================================== */

.about-button{

    width:auto !important;

    min-height:40px !important;

    padding:
        0
        15px !important;

    border-radius:7px;

    font-size:11px !important;

    gap:8px;

    box-shadow:

        0 7px 16px
        rgba(15,76,129,.14);

}


/* ==========================================================
   12. ICON BUTTON
========================================================== */

.about-button i{

    font-size:11px;

}


/* ==========================================================
   13. HOVER BUTTON
========================================================== */

.about-button:hover{

    transform:
        translateY(-2px)
        scale(1.01);

    box-shadow:

        0 10px 22px
        rgba(15,76,129,.20);

}


/* ==========================================================
   14. DESKTOP
========================================================== */

@media (min-width:992px){

    .about-content h2{

        padding:
            18px
            42px
            17px !important;

    }


    .about-title-line{

        width:230px !important;

        margin-bottom:
            38px !important;

    }


    .about-photo-slider,
    .about-photo-empty{

        height:330px;

    }

}


/* ==========================================================
   15. TABLET
========================================================== */

@media (max-width:991px){

    .about-content .about-action{

        justify-content:center;

        text-align:center;

    }


    .about-button{

        min-height:41px !important;

    }

}


/* ==========================================================
   16. MOBILE
========================================================== */

@media (max-width:600px){

    .about-content h2{

        padding:
            16px
            25px
            15px !important;

        border-radius:15px;

    }


    .about-title-line{

        width:160px !important;

        margin:
            15px
            auto
            29px !important;

    }


    .about-photo-slider,
    .about-photo-empty{

        height:270px;

    }


    .about-content .about-action{

        justify-content:center;

        margin-top:19px;

    }


    .about-button{

        min-height:40px !important;

        padding:
            0
            14px !important;

        font-size:10.5px !important;

    }

}


/* ==========================================================
   17. MOBILE KECIL
========================================================== */

@media (max-width:380px){

    .about-content h2{

        padding:
            15px
            20px
            14px !important;

    }


    .about-title-line{

        width:140px !important;

    }


    .about-button{

        min-height:38px !important;

        padding:
            0
            12px !important;

        font-size:10px !important;

    }

}
/* ==========================================================
   PREMIUM SLIDER BACKGROUND
   TAMBAHAN SAJA — CSS LAMA TETAP
========================================================== */


/* ==========================================================
   01. PANEL SLIDER UTAMA
========================================================== */

.about-photo-slider,
.about-photo-empty{

    position:relative;

    overflow:visible;

    background:

        /* cahaya kiri atas */
        radial-gradient(
            circle at 12% 15%,
            rgba(255,255,255,.95) 0,
            rgba(255,255,255,.55) 12%,
            transparent 32%
        ),

        /* cahaya kanan bawah */
        radial-gradient(
            circle at 88% 85%,
            rgba(47,128,237,.13) 0,
            transparent 35%
        ),

        /* garis diagonal */
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 28px,
            rgba(15,76,129,.025) 29px,
            transparent 30px
        ),

        /* pola kotak halus */
        linear-gradient(
            rgba(255,255,255,.65) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.65) 1px,
            transparent 1px
        ),

        linear-gradient(
            145deg,
            #edf5fa,
            #f8fbfd 48%,
            #e4eff6
        ) !important;

    background-size:
        auto,
        auto,
        auto,
        28px 28px,
        28px 28px,
        auto;

    border:
        1px solid
        rgba(15,76,129,.13);

    box-shadow:

        0 22px 45px
        rgba(15,76,129,.10),

        0 5px 12px
        rgba(15,76,129,.05),

        inset 0 1px 0
        rgba(255,255,255,.95);

}


/* ==========================================================
   02. FRAME BELAKANG
========================================================== */

.about-photo-slider::before{

    top:8px !important;

    left:8px !important;

    width:100%;

    height:100%;

    background:

        radial-gradient(
            circle at 75% 20%,
            rgba(47,128,237,.09),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            rgba(255,255,255,.75),
            rgba(224,237,246,.75)
        ) !important;

    border:
        1px solid
        rgba(15,76,129,.10) !important;

    box-shadow:

        0 10px 25px
        rgba(15,76,129,.06);

}


/* ==========================================================
   03. DEKORASI FRAME LUAR
========================================================== */

.about-photo-slider{

    isolation:isolate;

}


.about-photo-slider::after{

    content:"";

    position:absolute;

    z-index:-2;

    right:-22px;

    bottom:-22px;

    width:105px;

    height:105px;

    border-radius:24px;

    background:

        linear-gradient(
            135deg,
            rgba(47,128,237,.18),
            rgba(15,76,129,.05)
        );

    border:
        1px solid
        rgba(47,128,237,.12);

    box-shadow:

        0 12px 30px
        rgba(15,76,129,.08);

    transform:
        rotate(8deg);

}


/* ==========================================================
   04. ORNAMEN LINGKARAN
========================================================== */

.about-gallery{

    position:relative;

}


.about-gallery::before{

    content:"";

    position:absolute;

    z-index:0;

    width:95px;

    height:95px;

    left:-35px;

    top:-28px;

    border-radius:50%;

    border:
        1px solid
        rgba(47,128,237,.12);

    box-shadow:

        0 0 0 12px
        rgba(47,128,237,.025),

        0 0 0 24px
        rgba(47,128,237,.018);

    pointer-events:none;

}


/* ==========================================================
   05. POLA DOT PREMIUM
========================================================== */

.about-gallery::after{

    content:"";

    position:absolute;

    z-index:0;

    width:80px;

    height:80px;

    right:-28px;

    top:25px;

    background:

        radial-gradient(
            circle,
            rgba(15,76,129,.22) 1.4px,
            transparent 1.5px
        );

    background-size:
        9px 9px;

    opacity:.45;

    pointer-events:none;

}


/* ==========================================================
   06. PAKSA SLIDER DI ATAS ORNAMEN
========================================================== */

.about-photo-slider,
.about-photo-empty{

    z-index:2;

}


/* ==========================================================
   07. FOTO KOSONG — JANGAN PUTIH POLOS
========================================================== */

.about-photo-empty{

    overflow:hidden;

    color:#52718b !important;

}


/* ==========================================================
   08. ORNAMEN DALAM FOTO KOSONG
========================================================== */

.about-photo-empty::before{

    inset:10px !important;

    border:
        1px solid
        rgba(47,128,237,.10) !important;

    background:

        radial-gradient(
            circle at 15% 15%,
            rgba(47,128,237,.08),
            transparent 25%
        ),

        radial-gradient(
            circle at 85% 85%,
            rgba(15,76,129,.07),
            transparent 30%
        ),

        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 20px,
            rgba(15,76,129,.018) 21px,
            transparent 22px
        );

    box-shadow:

        inset 0 0 30px
        rgba(15,76,129,.025);

}


/* ==========================================================
   09. ICON FOTO KOSONG
========================================================== */

.about-photo-empty i{

    position:relative;

    z-index:2;

    background:

        linear-gradient(
            145deg,
            #eaf4fa,
            #d7e9f4
        ) !important;

    border:
        1px solid
        rgba(15,76,129,.10);

    box-shadow:

        0 10px 22px
        rgba(15,76,129,.10);

}


/* ==========================================================
   10. TEKS FOTO KOSONG
========================================================== */

.about-photo-empty span{

    position:relative;

    z-index:2;

    padding:
        8px
        14px;

    border-radius:20px;

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

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

    box-shadow:

        0 5px 15px
        rgba(15,76,129,.04);

    backdrop-filter:
        blur(5px);

}


/* ==========================================================
   11. SLIDER FOTO — FRAME LEBIH PREMIUM
========================================================== */

.about-photo-slide{

    border-radius:12px;

    box-shadow:

        inset 0 0 0 1px
        rgba(255,255,255,.12),

        0 8px 20px
        rgba(15,76,129,.08);

}


/* ==========================================================
   12. OVERLAY FOTO
========================================================== */

.about-photo-slide::after{

    background:

        linear-gradient(
            180deg,
            rgba(5,25,42,.02) 20%,
            transparent 45%,
            rgba(5,25,42,.70) 100%
        ) !important;

}


/* ==========================================================
   13. MOBILE
========================================================== */

@media (max-width:600px){

    .about-gallery::before{

        width:70px;

        height:70px;

        left:-25px;

        top:-20px;

    }


    .about-gallery::after{

        width:60px;

        height:60px;

        right:-20px;

        top:15px;

        background-size:8px 8px;

    }


    .about-photo-slider::after{

        width:75px;

        height:75px;

        right:-15px;

        bottom:-15px;

        border-radius:18px;

    }

}


/* ==========================================================
   14. MOBILE KECIL
========================================================== */

@media (max-width:380px){

    .about-gallery::before{

        display:none;

    }


    .about-gallery::after{

        opacity:.25;

    }

}

/* ==========================================================
   OVERRIDE PROFIL SEKOLAH
   WHITE CLEAN • ABSTRACT BLOB • MODERN • ELEGANT

   CATATAN:
   - CSS LAMA TIDAK PERLU DIHAPUS
   - LETAKKAN KODE INI PALING BAWAH FILE CSS
   - TIDAK MENGUBAH HTML / PHP / JAVASCRIPT
========================================================== */


/* ==========================================================
   01. BACKGROUND UTAMA
   PUTIH BERSIH + TEKSTUR MODERN
========================================================== */

.about-section{

    position:relative;

    background-color:#ffffff !important;

    background-image:
        url("https://www.transparenttextures.com/patterns/white-wall-3.png"),
        radial-gradient(
            circle at 8% 18%,
            rgba(47,128,237,.07),
            transparent 24%
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(15,76,129,.06),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 55%,
            #ffffff 100%
        ) !important;

    background-repeat:
        repeat,
        no-repeat,
        no-repeat,
        no-repeat !important;

    background-size:
        auto,
        auto,
        auto,
        auto !important;

}


/* ==========================================================
   02. HILANGKAN DEKORASI LAMA SECTION
   DIGANTI DEKORASI BARU
========================================================== */

.about-section::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-220px;
    right:-160px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(47,128,237,.10) 0%,
            rgba(47,128,237,.035) 45%,
            transparent 72%
        ) !important;

    opacity:1 !important;

    pointer-events:none;

}


.about-section::after{

    content:"";

    position:absolute;

    width:360px;
    height:360px;

    bottom:-210px;
    left:-150px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(15,76,129,.09) 0%,
            rgba(15,76,129,.025) 48%,
            transparent 72%
        ) !important;

    border:0 !important;

    box-shadow:none !important;

    pointer-events:none;

}


/* ==========================================================
   03. CONTAINER
========================================================== */

.about-section .container{

    position:relative;

    z-index:5;

}


/* ==========================================================
   04. JUDUL
   LEBIH BERSIH DAN TIDAK TERLALU BERBINGKAI
========================================================== */

.about-content h2{

    position:relative;

    width:auto !important;

    max-width:90%;

    padding:
        12px
        28px
        13px !important;

    border-radius:14px !important;

    background:
        rgba(255,255,255,.72) !important;

    border:
        1px solid
        rgba(15,76,129,.07) !important;

    box-shadow:
        0 8px 24px
        rgba(15,76,129,.055) !important;

    backdrop-filter:
        blur(8px);

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

}


/* HILANGKAN BINGKAI DALAM JUDUL */

.about-content h2::before{

    display:none !important;

}


.about-content h2::after{

    display:none !important;

}


/* ==========================================================
   05. GARIS JUDUL
   LEBIH MINIMAL
========================================================== */

.about-title-line{

    width:150px !important;

    height:2px !important;

    margin:
        16px
        auto
        38px !important;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #c9dff1 15%,
            #2f80ed 50%,
            #c9dff1 85%,
            transparent 100%
        ) !important;

    box-shadow:
        0 3px 10px
        rgba(47,128,237,.12) !important;

}


/* ==========================================================
   06. AREA FOTO
   HILANGKAN KESAN KOTAK
========================================================== */

.about-photo-slider{

    position:relative;

    height:340px !important;

    padding:0 !important;

    border:0 !important;

    border-radius:0 !important;

    background:
        transparent !important;

    box-shadow:none !important;

    overflow:visible !important;

    isolation:isolate;

}


/* ==========================================================
   07. BLOB / BERCAK BESAR BELAKANG FOTO
========================================================== */

.about-photo-slider::before{

    content:"";

    position:absolute;

    z-index:-3;

    width:88%;

    height:92%;

    left:5%;

    top:4%;

    border-radius:
        43%
        57%
        52%
        48%
        /
        46%
        42%
        58%
        54%;

    background:

        radial-gradient(
            circle at 25% 25%,
            rgba(47,128,237,.22),
            transparent 28%
        ),

        radial-gradient(
            circle at 75% 70%,
            rgba(15,76,129,.18),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #eaf4fc,
            #f4f9fd
        ) !important;

    border:0 !important;

    box-shadow:
        0 25px 55px
        rgba(15,76,129,.10) !important;

    transform:
        rotate(-2deg);

}


/* ==========================================================
   08. BERCAK KECIL DEKORATIF
========================================================== */

.about-photo-slider::after{

    content:"";

    position:absolute;

    z-index:-4;

    width:120px !important;

    height:120px !important;

    right:-30px !important;

    bottom:-30px !important;

    border-radius:
        61%
        39%
        42%
        58%
        /
        52%
        47%
        53%
        48%;

    background:

        radial-gradient(
            circle at center,
            rgba(47,128,237,.18),
            rgba(47,128,237,.07) 45%,
            transparent 72%
        ) !important;

    opacity:1 !important;

    background-size:auto !important;

}


/* ==========================================================
   09. FOTO
   TIDAK LAGI TERKUNCI DALAM KOTAK
========================================================== */

.about-photo-slide{

    position:absolute;

    inset:16px !important;

    overflow:hidden;

    border-radius:
        24px
        48px
        28px
        42px
        /
        38px
        28px
        46px
        34px !important;

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

    background:
        #ffffff !important;

    box-shadow:

        0 22px 45px
        rgba(15,76,129,.14),

        0 5px 15px
        rgba(15,76,129,.06) !important;

}


/* ==========================================================
   10. FOTO TETAP NATURAL
========================================================== */

.about-photo-slide img{

    display:block;

    width:100% !important;

    height:100% !important;

    object-fit:cover;

    object-position:center;

    border-radius:inherit;

}


/* ==========================================================
   11. OVERLAY FOTO
   LEBIH LEMBUT
========================================================== */

.about-photo-slide::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            transparent 48%,
            rgba(4,28,48,.05) 65%,
            rgba(4,28,48,.58) 100%
        ) !important;

    pointer-events:none;

}


/* ==========================================================
   12. INFO FOTO
========================================================== */

.about-photo-overlay{

    left:20px !important;

    right:20px !important;

    bottom:20px !important;

}


/* ==========================================================
   13. ANGKA FOTO
========================================================== */

.about-photo-overlay strong{

    width:36px !important;

    height:36px !important;

    border-radius:50% !important;

    background:
        rgba(255,255,255,.18) !important;

    border:
        1px solid
        rgba(255,255,255,.42) !important;

    backdrop-filter:
        blur(10px);

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

}


/* ==========================================================
   14. CONTROL FOTO
   TETAP ADA, TAPI LEBIH MINIMAL
========================================================== */

.about-photo-controls{

    top:20px !important;

    right:20px !important;

    border-radius:12px !important;

    padding:5px !important;

    background:
        rgba(8,31,52,.42) !important;

    backdrop-filter:
        blur(10px);

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

}


/* ==========================================================
   15. DOT FOTO
========================================================== */

.about-photo-dots{

    left:20px !important;

    bottom:20px !important;

    padding:
        6px
        9px !important;

    border-radius:999px !important;

    background:
        rgba(8,31,52,.38) !important;

    backdrop-filter:
        blur(10px);

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

}


/* ==========================================================
   16. TEKS SUBJUDUL
========================================================== */

.about-content .about-lead{

    color:#234e70 !important;

    font-size:16px;

    line-height:1.75;

}


/* ==========================================================
   17. DESKRIPSI
========================================================== */

.about-content .about-description{

    color:#667b8d !important;

    font-size:14px;

    line-height:1.85;

}


/* ==========================================================
   18. BUTTON
   LEBIH MODERN DAN BERSIH
========================================================== */

.about-button{

    border-radius:999px !important;

    min-height:44px;

    padding:
        0
        20px !important;

    background:

        linear-gradient(
            135deg,
            #0f4c81,
            #287dcc
        ) !important;

    box-shadow:

        0 10px 25px
        rgba(15,76,129,.16) !important;

}


.about-button:hover{

    transform:
        translateY(-2px);

    box-shadow:

        0 14px 30px
        rgba(15,76,129,.22) !important;

}


/* ==========================================================
   19. FOTO KOSONG
========================================================== */

.about-photo-empty{

    height:340px !important;

    border:0 !important;

    border-radius:
        40%
        60%
        55%
        45%
        /
        48%
        42%
        58%
        52% !important;

    background:

        radial-gradient(
            circle at 25% 25%,
            rgba(47,128,237,.13),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #f3f8fc,
            #ffffff
        ) !important;

    box-shadow:

        0 20px 45px
        rgba(15,76,129,.08) !important;

}


/* HILANGKAN FRAME DALAM FOTO KOSONG */

.about-photo-empty::before{

    display:none !important;

}


/* ==========================================================
   20. RESPONSIVE TABLET
========================================================== */

@media (max-width:991px){

    .about-photo-slider{

        height:350px !important;

    }


    .about-photo-slide{

        inset:14px !important;

    }


    .about-photo-slider::before{

        width:92%;

        height:92%;

        left:4%;

        top:4%;

    }

}


/* ==========================================================
   21. RESPONSIVE MOBILE
========================================================== */

@media (max-width:600px){

    .about-section{

        background-color:#ffffff !important;

    }


    .about-content h2{

        max-width:
            calc(100% - 10px);

        padding:
            13px
            18px
            12px !important;

        border-radius:12px !important;

        font-size:27px;

    }


    .about-title-line{

        width:120px !important;

        margin:
            14px
            auto
            28px !important;

    }


    .about-photo-slider{

        height:270px !important;

    }


    .about-photo-slide{

        inset:10px !important;

        border-width:5px !important;

        border-radius:
            20px
            35px
            23px
            31px
            /
            28px
            22px
            34px
            26px !important;

    }


    .about-photo-slider::before{

        width:92%;

        height:90%;

        left:4%;

        top:5%;

    }


    .about-photo-slider::after{

        width:75px !important;

        height:75px !important;

        right:-15px !important;

        bottom:-15px !important;

    }


    .about-photo-controls{

        top:14px !important;

        right:14px !important;

    }


    .about-photo-dots{

        left:14px !important;

        bottom:14px !important;

    }


    .about-photo-overlay{

        left:15px !important;

        right:15px !important;

        bottom:15px !important;

    }


    .about-content .about-lead{

        font-size:15px;

    }


    .about-content .about-description{

        font-size:13.5px;

    }


    .about-button{

        width:100%;

    }


    .about-photo-empty{

        height:270px !important;

    }

}


/* ==========================================================
   22. MOBILE SANGAT KECIL
========================================================== */

@media (max-width:380px){

    .about-photo-slider{

        height:245px !important;

    }


    .about-photo-slide{

        inset:9px !important;

    }


    .about-content h2{

        font-size:25px;

        padding:
            12px
            15px
            11px !important;

    }


    .about-title-line{

        width:100px !important;

    }

}
/* ==========================================================
   PROFIL SEKOLAH
   FINAL STYLE
   MINIMAL • MODERN • ABSTRACT • BLUE
   CSS TAMBAHAN — JANGAN HAPUS CSS LAMA
========================================================== */


/* ==========================================================
   01. BACKGROUND PAGE
   PUTIH + TEKSTUR INTERNET SANGAT TIPIS
========================================================== */

.about-section{

    position:relative;

    overflow:hidden;

    background-color:#ffffff !important;

    background-image:

        linear-gradient(
            rgba(255,255,255,.92),
            rgba(255,255,255,.94)
        ),

        url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=60") !important;

    background-size:
        cover !important;

    background-position:
        center !important;

    background-attachment:
        fixed !important;

}


/* ==========================================================
   02. LAPISAN ABSTRAK HALUS
========================================================== */

.about-section::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 8% 18%,
            rgba(30,139,224,.10) 0,
            rgba(30,139,224,.035) 90px,
            transparent 210px
        ),

        radial-gradient(
            circle at 92% 24%,
            rgba(71,166,232,.09) 0,
            rgba(71,166,232,.025) 100px,
            transparent 220px
        ),

        radial-gradient(
            circle at 78% 88%,
            rgba(16,93,158,.07) 0,
            rgba(16,93,158,.02) 100px,
            transparent 220px
        ),

        radial-gradient(
            circle at 17% 82%,
            rgba(52,151,222,.065) 0,
            transparent 180px
        );

}


/* ==========================================================
   03. BERCak-BERCAK TERSEBAR
========================================================== */

.about-section::after{

    content:"";

    position:absolute;

    z-index:1;

    width:100%;

    height:100%;

    inset:0;

    pointer-events:none;

    opacity:.75;

    background:

        radial-gradient(
            circle at 7% 12%,
            #75bdf0 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 9% 12%,
            #75bdf0 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 11% 12%,
            #75bdf0 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 13% 12%,
            #75bdf0 0 1.5px,
            transparent 3px
        ),

        radial-gradient(
            circle at 91% 15%,
            #80c5f1 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 93% 15%,
            #80c5f1 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 95% 15%,
            #80c5f1 0 1.5px,
            transparent 3px
        ),

        radial-gradient(
            circle at 6% 88%,
            #9bcef0 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 8% 88%,
            #9bcef0 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 10% 88%,
            #9bcef0 0 1.5px,
            transparent 3px
        ),

        radial-gradient(
            circle at 88% 82%,
            #7ab9e8 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 90% 82%,
            #7ab9e8 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 92% 82%,
            #7ab9e8 0 1.5px,
            transparent 3px
        );

}


/* ==========================================================
   04. CONTAINER
========================================================== */

.about-section .container{

    position:relative;

    z-index:5;

}


/* ==========================================================
   05. LABEL
   PROFIL SEKOLAH LEBIH KECIL
========================================================== */

.section-kicker{

    position:relative;

    display:inline-flex !important;

    align-items:center;

    gap:7px;

    padding:
        5px
        12px !important;

    min-height:
        30px;

    border:0 !important;

    border-radius:
        999px !important;

    background:
        rgba(255,255,255,.65) !important;

    color:
        #1479c8 !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .10em !important;

    text-transform:
        uppercase;

    box-shadow:
        0 5px 15px
        rgba(25,100,160,.06) !important;

}


/* icon modern */

.section-kicker::before{

    content:"✦";

    display:flex;

    align-items:center;

    justify-content:center;

    width:16px;

    height:16px;

    border-radius:50%;

    background:
        #1689df;

    color:#ffffff;

    font-size:
        9px;

    line-height:1;

    box-shadow:
        0 0 0 4px
        rgba(22,137,223,.08);

}


/* ==========================================================
   06. JUDUL
   SMP NEGERI 2 MOYUDAN
   LEBIH KECIL — TANPA BINGKAI
========================================================== */

.about-content h2{

    position:relative;

    display:block;

    width:auto !important;

    max-width:100%;

    margin:
        8px 0 0 !important;

    padding:
        0 !important;

    border:0 !important;

    border-radius:0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:
        #0d477b !important;

    font-size:
        clamp(28px, 3vw, 44px) !important;

    line-height:
        1.12 !important;

    letter-spacing:
        -.025em !important;

}


/* icon modern di samping judul */

.about-content h2::before{

    content:"";

    position:relative;

    display:inline-block;

    width:9px;

    height:9px;

    margin:
        0 10px 7px 0;

    border-radius:
        3px;

    background:
        linear-gradient(
            135deg,
            #158be4,
            #72c4f4
        );

    transform:
        rotate(45deg);

    box-shadow:
        0 4px 10px
        rgba(21,139,228,.20);

}


/* ==========================================================
   07. HILANGKAN GARIS LAMA
========================================================== */

.about-title-line{

    width:110px !important;

    height:3px !important;

    margin:
        14px 0 28px !important;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #1689df,
            rgba(22,137,223,.08)
        ) !important;

    box-shadow:
        none !important;

}


/* ==========================================================
   08. SUBJUDUL
========================================================== */

.about-content .about-lead{

    max-width:
        680px;

    margin-bottom:
        18px !important;

    color:
        #174d78 !important;

    font-size:
        17px !important;

    font-weight:
        600 !important;

    line-height:
        1.65 !important;

}


/* ==========================================================
   09. DESKRIPSI
========================================================== */

.about-content .about-description{

    max-width:
        690px;

    color:
        #61788d !important;

    font-size:
        14px !important;

    line-height:
        1.85 !important;

}


/* ==========================================================
   10. AREA SLIDER
========================================================== */

.about-photo-slider{

    position:relative;

    height:
        380px !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    overflow:
        visible !important;

    isolation:
        isolate;

}


/* ==========================================================
   11. BERCAK WARNA UTAMA
   MINIMAL — TIDAK BULAT
========================================================== */

.about-photo-slider::before{

    content:"";

    position:absolute;

    z-index:-2;

    width:
        94%;

    height:
        92%;

    left:
        3%;

    top:
        4%;

    background:

        linear-gradient(
            135deg,
            rgba(220,241,253,.95),
            rgba(238,248,254,.92)
        );

    clip-path:

        polygon(

            5% 12%,
            13% 7%,
            23% 10%,
            34% 5%,
            45% 9%,
            57% 4%,
            68% 8%,
            80% 5%,
            91% 12%,

            97% 25%,
            93% 37%,
            97% 49%,
            94% 61%,
            98% 73%,
            91% 87%,

            80% 93%,
            68% 89%,
            56% 96%,
            44% 91%,
            32% 96%,
            20% 90%,
            8% 94%,
            3% 81%,

            7% 69%,
            3% 57%,
            7% 45%,
            3% 33%

        );

    box-shadow:
        0 25px 55px
        rgba(20,110,170,.08);

}


/* ==========================================================
   12. BERCAK WARNA KEDUA
========================================================== */

.about-photo-slider::after{

    content:"";

    position:absolute;

    z-index:-3;

    width:
        100px;

    height:
        82px;

    right:
        -8px;

    bottom:
        -5px;

    background:

        linear-gradient(
            135deg,
            rgba(51,155,226,.30),
            rgba(104,192,239,.08)
        );

    clip-path:

        polygon(
            12% 9%,
            35% 0,
            60% 8%,
            88% 4%,
            100% 28%,
            91% 52%,
            98% 76%,
            71% 100%,
            48% 88%,
            21% 96%,
            0 72%,
            8% 48%,
            0 25%
        );

}


/* ==========================================================
   13. SETIAP FOTO
   3 FOTO = 3 BERCAK
========================================================== */

.about-photo-slide{

    position:absolute;

    inset:
        16px !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    overflow:
        visible !important;

}


/* ==========================================================
   14. BERCAK DI BELAKANG SETIAP FOTO
========================================================== */

.about-photo-slide::before{

    content:"";

    position:absolute;

    z-index:-1;

    inset:
        -7px;

    background:
        linear-gradient(
            145deg,
            #e7f5fd,
            #d3ebfa
        );

    clip-path:

        polygon(

            4% 10%,
            14% 4%,
            25% 8%,
            37% 3%,
            49% 7%,
            62% 3%,
            74% 8%,
            87% 5%,
            96% 14%,

            99% 28%,
            95% 40%,
            98% 53%,
            94% 66%,
            98% 80%,
            90% 94%,

            77% 90%,
            65% 97%,
            52% 92%,
            39% 98%,
            27% 92%,
            15% 97%,
            5% 88%,

            8% 74%,
            3% 62%,
            7% 50%,
            3% 38%,
            7% 24%

        );

    box-shadow:
        0 20px 45px
        rgba(18,100,160,.11);

}


/* ==========================================================
   15. FOTO SENDIRI
========================================================== */

.about-photo-slide img{

    position:relative;

    width:
        100% !important;

    height:
        100% !important;

    display:block;

    object-fit:
        cover;

    object-position:
        center;

    border:
        3px solid
        rgba(255,255,255,.96) !important;

    border-radius:
        0 !important;

    box-shadow:
        0 15px 35px
        rgba(10,70,110,.12) !important;

    clip-path:

        polygon(

            3% 8%,
            12% 4%,
            22% 7%,
            34% 3%,
            46% 6%,
            59% 2%,
            71% 7%,
            84% 4%,
            96% 12%,

            98% 26%,
            95% 39%,
            99% 52%,
            95% 65%,
            98% 79%,
            91% 93%,

            78% 96%,
            66% 92%,
            53% 98%,
            41% 93%,
            28% 97%,
            16% 91%,
            5% 96%,

            7% 81%,
            3% 68%,
            6% 55%,
            2% 42%,
            6% 28%

        );

    transition:
        transform .6s ease,
        filter .6s ease;

}


/* ==========================================================
   16. FOTO AKTIF
========================================================== */

.about-photo-slide.active img{

    transform:
        scale(1.01);

    filter:
        saturate(1.02)
        contrast(1.01);

}


/* ==========================================================
   17. OVERLAY FOTO
========================================================== */

.about-photo-slide::after{

    content:"";

    position:absolute;

    inset:
        0;

    z-index:2;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(8,48,78,.03) 70%,
            rgba(8,48,78,.40) 100%
        );

    pointer-events:
        none;

}


/* ==========================================================
   18. FOTO BERBEDA = AKSEN BERCAK BERBEDA
========================================================== */

.about-photo-slide:nth-child(1)::before{

    background:
        linear-gradient(
            135deg,
            #e7f5fd,
            #d5edfb
        );

}


.about-photo-slide:nth-child(2)::before{

    background:
        linear-gradient(
            135deg,
            #eef8fd,
            #dceffc
        );

    transform:
        rotate(1deg);

}


.about-photo-slide:nth-child(3)::before{

    background:
        linear-gradient(
            135deg,
            #e3f3fc,
            #edf8fd
        );

    transform:
        rotate(-1deg);

}


/* ==========================================================
   19. INFO FOTO
========================================================== */

.about-photo-overlay{

    left:
        20px !important;

    right:
        20px !important;

    bottom:
        18px !important;

    z-index:
        5;

}


.about-photo-overlay span{

    font-size:
        11px !important;

    letter-spacing:
        .06em;

}


.about-photo-overlay strong{

    width:
        32px !important;

    height:
        32px !important;

    border-radius:
        8px !important;

    background:
        rgba(255,255,255,.20) !important;

    border:
        1px solid
        rgba(255,255,255,.42) !important;

    backdrop-filter:
        blur(10px);

}


/* ==========================================================
   20. SLIDER CONTROL
========================================================== */

.about-photo-controls{

    top:
        18px !important;

    right:
        18px !important;

    padding:
        4px !important;

    border-radius:
        999px !important;

    background:
        rgba(255,255,255,.80) !important;

    border:
        1px solid
        rgba(50,140,210,.12) !important;

    box-shadow:
        0 7px 20px
        rgba(20,100,160,.08) !important;

    backdrop-filter:
        blur(10px);

}


/* ==========================================================
   21. DOT
========================================================== */

.about-photo-dots{

    left:
        18px !important;

    bottom:
        17px !important;

    padding:
        5px 7px !important;

    border-radius:
        999px !important;

    background:
        rgba(255,255,255,.82) !important;

    border:
        1px solid
        rgba(50,140,210,.12) !important;

    box-shadow:
        0 5px 15px
        rgba(20,100,160,.07);

}


.about-photo-dots button{

    width:
        8px !important;

    height:
        8px !important;

    border-radius:
        50% !important;

    background:
        #a5d3f1 !important;

}


.about-photo-dots button.active{

    width:
        10px !important;

    height:
        10px !important;

    background:
        #1689df !important;

}


/* ==========================================================
   22. BUTTON
========================================================== */

.about-button{

    min-height:
        48px;

    padding:
        0 20px !important;

    border-radius:
        9px !important;

    background:
        #0d568c !important;

    box-shadow:
        0 10px 22px
        rgba(13,86,140,.16) !important;

}


/* ==========================================================
   23. RESPONSIVE TABLET
========================================================== */

@media (max-width:991px){

    .about-content h2{

        font-size:
            34px !important;

    }


    .about-photo-slider{

        height:
            350px !important;

    }

}


/* ==========================================================
   24. RESPONSIVE MOBILE
========================================================== */

@media (max-width:600px){

    .about-section{

        background-attachment:
            scroll !important;

    }


    .section-kicker{

        font-size:
            9px !important;

        min-height:
            27px;

        padding:
            4px 10px !important;

    }


    .about-content h2{

        font-size:
            26px !important;

        line-height:
            1.2 !important;

    }


    .about-content h2::before{

        width:
            7px;

        height:
            7px;

        margin-right:
            8px;

    }


    .about-title-line{

        width:
            85px !important;

        margin:
            11px 0 24px !important;

    }


    .about-content .about-lead{

        font-size:
            15px !important;

    }


    .about-content .about-description{

        font-size:
            13px !important;

        line-height:
            1.75 !important;

    }


    .about-photo-slider{

        height:
            275px !important;

        margin-top:
            10px;

    }


    .about-photo-slide{

        inset:
            11px !important;

    }


    .about-photo-controls{

        top:
            13px !important;

        right:
            13px !important;

    }


    .about-photo-dots{

        left:
            14px !important;

        bottom:
            13px !important;

    }

}


/* ==========================================================
   25. MOBILE KECIL
========================================================== */

@media (max-width:380px){

    .about-content h2{

        font-size:
            23px !important;

    }


    .about-photo-slider{

        height:
            250px !important;

    }

}
/* ==========================================================
   TAMBAHAN FINAL
   UBAH BINGKAI BULAT MENJADI BERCAK
   JUDUL SEKOLAH MENJADI CAPITAL
   CSS LAMA TIDAK DIUBAH
========================================================== */


/* ==========================================================
   01. JUDUL SEKOLAH CAPITAL
========================================================== */

.about-content h2{

    text-transform:uppercase !important;

    letter-spacing:
        -.025em !important;

}


/* ==========================================================
   02. BINGKAI FOTO EMPTY
   HILANGKAN BENTUK BULAT
========================================================== */

.about-photo-empty{

    position:relative !important;

    width:100% !important;

    height:380px !important;

    border-radius:0 !important;

    background:
        transparent !important;

    overflow:visible !important;

    box-shadow:none !important;

    clip-path:none !important;

}


/* ==========================================================
   03. BENTUK BERCAK UTAMA
========================================================== */

.about-photo-empty::before{

    content:"" !important;

    position:absolute !important;

    z-index:-2 !important;

    inset:10px !important;

    width:auto !important;

    height:auto !important;

    left:10px !important;

    top:10px !important;

    right:10px !important;

    bottom:10px !important;

    border-radius:0 !important;

    background:

        linear-gradient(
            135deg,
            #e9f7fd 0%,
            #d7eefb 45%,
            #eef9fd 100%
        ) !important;

    clip-path:

        polygon(

            4% 12%,
            12% 7%,
            23% 10%,
            34% 5%,
            46% 9%,
            57% 4%,
            69% 8%,
            81% 5%,
            92% 13%,

            97% 25%,
            94% 38%,
            98% 50%,
            94% 63%,
            97% 76%,
            90% 89%,

            80% 94%,
            68% 90%,
            56% 97%,
            44% 92%,
            32% 96%,
            20% 91%,
            9% 95%,
            3% 83%,

            7% 70%,
            3% 58%,
            7% 46%,
            3% 34%

        ) !important;

    box-shadow:

        0 25px 60px
        rgba(18,91,145,.10) !important;

}


/* ==========================================================
   04. BERCAK AKSEN BIRU
========================================================== */

.about-photo-empty::after{

    content:"" !important;

    position:absolute !important;

    z-index:-1 !important;

    width:115px !important;

    height:95px !important;

    right:-2px !important;

    bottom:-2px !important;

    border-radius:0 !important;

    background:

        linear-gradient(
            135deg,
            rgba(27,142,220,.35),
            rgba(92,190,238,.10)
        ) !important;

    clip-path:

        polygon(

            10% 10%,
            34% 2%,
            58% 9%,
            84% 4%,
            100% 28%,
            91% 52%,
            98% 76%,
            72% 100%,
            47% 89%,
            20% 97%,
            0 72%,
            9% 48%,
            0 25%

        ) !important;

}


/* ==========================================================
   05. ICON DI TENGAH
   LEBIH MINIMAL
========================================================== */

.about-photo-empty i{

    position:relative !important;

    z-index:5 !important;

    width:58px !important;

    height:58px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    margin:0 auto 10px !important;

    border-radius:16px !important;

    background:

        rgba(255,255,255,.75) !important;

    color:
        #1679bd !important;

    font-size:
        23px !important;

    box-shadow:

        0 12px 30px
        rgba(15,100,160,.10) !important;

    backdrop-filter:
        blur(10px);

}


/* ==========================================================
   06. TEKS FOTO BELUM TERSEDIA
========================================================== */

.about-photo-empty span{

    position:relative !important;

    z-index:5 !important;

    padding:
        9px 16px !important;

    border-radius:
        999px !important;

    background:
        rgba(255,255,255,.78) !important;

    color:
        #5c748a !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;

    box-shadow:

        0 8px 20px
        rgba(20,100,160,.07) !important;

}


/* ==========================================================
   07. KALAU FOTO DATABASE ADA
   FOTO JUGA TIDAK BOLEH BULAT
========================================================== */

.about-photo-slide{

    border-radius:0 !important;

    overflow:visible !important;

}


/* ==========================================================
   08. BERCAK BELAKANG FOTO DATABASE
========================================================== */

.about-photo-slide::before{

    border-radius:0 !important;

    clip-path:

        polygon(

            4% 10%,
            14% 4%,
            25% 8%,
            37% 3%,
            49% 7%,
            62% 3%,
            74% 8%,
            87% 5%,
            96% 14%,

            99% 28%,
            95% 40%,
            98% 53%,
            94% 66%,
            98% 80%,
            90% 94%,

            77% 90%,
            65% 97%,
            52% 92%,
            39% 98%,
            27% 92%,
            15% 97%,
            5% 88%,

            8% 74%,
            3% 62%,
            7% 50%,
            3% 38%,
            7% 24%

        ) !important;

}


/* ==========================================================
   09. FOTO DATABASE
========================================================== */

.about-photo-slide img{

    border-radius:0 !important;

    clip-path:

        polygon(

            3% 8%,
            12% 4%,
            22% 7%,
            34% 3%,
            46% 6%,
            59% 2%,
            71% 7%,
            84% 4%,
            96% 12%,

            98% 26%,
            95% 39%,
            99% 52%,
            95% 65%,
            98% 79%,
            91% 93%,

            78% 96%,
            66% 92%,
            53% 98%,
            41% 93%,
            28% 97%,
            16% 91%,
            5% 96%,

            7% 81%,
            3% 68%,
            6% 55%,
            2% 42%,
            6% 28%

        ) !important;

}


/* ==========================================================
   10. MOBILE
========================================================== */

@media (max-width:600px){

    .about-photo-empty{

        height:275px !important;

    }

    .about-photo-empty::before{

        inset:7px !important;

    }

    .about-content h2{

        text-transform:uppercase !important;

    }

}
/* ==========================================================
   PROFIL SEKOLAH — MODERN GOVERNMENT BRUSH STYLE
   TAMBAHKAN PALING BAWAH
   CSS LAMA TIDAK PERLU DIHAPUS
========================================================== */


/* ==========================================================
   01. AREA GALERI
========================================================== */

.about-gallery{

    position:relative !important;

    isolation:isolate !important;

    overflow:visible !important;

}


/* ==========================================================
   02. SLIDER
========================================================== */

.about-photo-slider{

    position:relative !important;

    width:100% !important;

    height:390px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    overflow:visible !important;

}


/* ==========================================================
   03. MATIKAN BINGKAI / EFEK LAMA
========================================================== */

.about-photo-slider{

    clip-path:none !important;

}


/* ==========================================================
   04. SAPUAN BRUSH UTAMA
========================================================== */

.about-photo-slider::before{

    content:"" !important;

    position:absolute !important;

    z-index:-3 !important;

    width:92% !important;

    height:92% !important;

    left:4% !important;

    top:4% !important;

    background:

        linear-gradient(
            135deg,
            #e7f6ff 0%,
            #b9e2fa 38%,
            #d9effc 70%,
            #edf9ff 100%
        ) !important;

    clip-path:

        polygon(

            2% 25%,
            7% 19%,
            4% 14%,
            13% 16%,
            18% 10%,
            27% 13%,
            35% 7%,
            44% 12%,
            52% 6%,
            61% 11%,
            70% 7%,
            79% 12%,
            88% 8%,
            97% 15%,

            93% 23%,
            99% 30%,
            94% 38%,
            98% 46%,
            93% 54%,
            98% 62%,
            93% 70%,
            97% 79%,
            91% 87%,

            82% 90%,
            74% 96%,
            65% 91%,
            55% 97%,
            46% 92%,
            37% 97%,
            28% 91%,
            19% 95%,
            10% 89%,
            4% 94%,

            7% 83%,
            2% 75%,
            7% 66%,
            2% 57%,
            7% 48%,
            2% 39%,
            7% 31%

        ) !important;

    filter:

        drop-shadow(
            0 18px 35px
            rgba(21,111,173,.12)
        ) !important;

}


/* ==========================================================
   05. HALFTONE / TITIK-TITIK MODERN
========================================================== */

.about-photo-slider::after{

    content:"" !important;

    position:absolute !important;

    z-index:-2 !important;

    width:92% !important;

    height:92% !important;

    left:4% !important;

    top:4% !important;

    pointer-events:none !important;

    background:

        radial-gradient(
            circle,
            rgba(24,139,218,.42) 0 2px,
            transparent 2.5px
        ) 8% 18% / 16px 16px,

        radial-gradient(
            circle,
            rgba(24,139,218,.32) 0 2px,
            transparent 2.5px
        ) 88% 72% / 17px 17px,

        radial-gradient(
            circle,
            rgba(24,139,218,.26) 0 1.5px,
            transparent 2px
        ) 82% 16% / 14px 14px !important;

    background-repeat:no-repeat !important;

    opacity:.85 !important;

}


/* ==========================================================
   06. SLIDE
========================================================== */

.about-photo-slide{

    position:absolute !important;

    inset:0 !important;

    width:100% !important;

    height:100% !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    padding:0 !important;

    border:0 !important;

    border-radius:0 !important;

    background:transparent !important;

    overflow:visible !important;

}


/* ==========================================================
   07. SAPUAN CAT DI BELAKANG FOTO
========================================================== */

.about-photo-slide::before{

    content:"" !important;

    position:absolute !important;

    z-index:0 !important;

    width:87% !important;

    height:86% !important;

    left:6.5% !important;

    top:7% !important;

    background:

        linear-gradient(
            145deg,
            #65b8ed 0%,
            #9bd5f4 45%,
            #d3edfb 100%
        ) !important;

    clip-path:

        polygon(

            1% 22%,
            8% 16%,
            6% 10%,
            16% 13%,
            22% 7%,
            31% 12%,
            40% 5%,
            50% 11%,
            59% 6%,
            69% 12%,
            78% 7%,
            88% 14%,
            98% 9%,

            93% 25%,
            99% 35%,
            94% 46%,
            98% 57%,
            93% 68%,
            97% 80%,
            89% 90%,

            79% 94%,
            69% 89%,
            58% 97%,
            48% 91%,
            38% 96%,
            28% 90%,
            18% 95%,
            8% 88%,

            4% 78%,
            8% 67%,
            2% 56%,
            7% 45%,
            2% 34%

        ) !important;

    opacity:.78 !important;

    filter:

        drop-shadow(
            0 12px 24px
            rgba(30,119,181,.12)
        ) !important;

}


/* ==========================================================
   08. FOTO
   TIDAK LAGI KOTAK / ROUNDED
========================================================== */

.about-photo-slide img{

    position:relative !important;

    z-index:2 !important;

    width:78% !important;

    height:84% !important;

    object-fit:cover !important;

    display:block !important;

    border:0 !important;

    border-radius:0 !important;

    background:transparent !important;

    box-shadow:

        0 20px 42px
        rgba(16,73,111,.18) !important;

    clip-path:

        polygon(

            4% 13%,
            11% 9%,
            19% 12%,
            28% 7%,
            38% 11%,
            48% 6%,
            58% 11%,
            68% 7%,
            78% 12%,
            88% 8%,
            96% 14%,

            92% 23%,
            97% 33%,
            93% 43%,
            98% 53%,
            93% 63%,
            97% 73%,
            91% 83%,
            95% 89%,

            85% 93%,
            75% 89%,
            65% 96%,
            55% 91%,
            45% 97%,
            35% 91%,
            25% 96%,
            15% 90%,
            6% 94%,

            8% 83%,
            3% 73%,
            7% 63%,
            2% 53%,
            7% 43%,
            3% 33%,
            8% 23%

        ) !important;

}


/* ==========================================================
   09. EFEK CAT PUTIH TIPIS DI SISI FOTO
========================================================== */

.about-photo-slide::after{

    content:"" !important;

    position:absolute !important;

    z-index:3 !important;

    width:82% !important;

    height:82% !important;

    left:9% !important;

    top:9% !important;

    pointer-events:none !important;

    background:

        linear-gradient(
            115deg,
            transparent 0 30%,
            rgba(255,255,255,.32) 35%,
            transparent 42% 100%
        ) !important;

    clip-path:

        polygon(

            2% 19%,
            12% 13%,
            24% 16%,
            36% 9%,
            48% 14%,
            60% 8%,
            72% 14%,
            85% 10%,
            97% 17%,

            93% 29%,
            98% 42%,
            94% 55%,
            98% 68%,
            92% 81%,
            96% 91%,

            82% 94%,
            70% 89%,
            58% 96%,
            46% 90%,
            34% 96%,
            22% 90%,
            10% 94%,
            4% 82%,

            8% 69%,
            3% 56%,
            7% 43%,
            2% 30%

        ) !important;

    opacity:.65 !important;

}


/* ==========================================================
   10. HAPUS TOTAL TOMBOL < > DAN 02 / 03
========================================================== */

.about-photo-controls{

    display:none !important;

    visibility:hidden !important;

}


/* ==========================================================
   11. HAPUS OVERLAY LAMA
   AGAR TIDAK ADA NOMOR FOTO DI ATAS FOTO
========================================================== */

.about-photo-overlay{

    display:none !important;

    visibility:hidden !important;

}


/* ==========================================================
   12. DOT TETAP ADA
   TAPI MINIMALIS
========================================================== */

.about-photo-dots{

    position:absolute !important;

    z-index:20 !important;

    left:50% !important;

    bottom:12px !important;

    transform:translateX(-50%) !important;

    display:flex !important;

    align-items:center !important;

    gap:7px !important;

    padding:6px 9px !important;

    background:

        rgba(255,255,255,.82) !important;

    border:1px solid
        rgba(36,133,194,.10) !important;

    border-radius:20px !important;

    box-shadow:

        0 8px 22px
        rgba(20,90,140,.10) !important;

    backdrop-filter:blur(8px) !important;

}


/* ==========================================================
   13. DOT
========================================================== */

.about-photo-dots button{

    width:7px !important;

    height:7px !important;

    padding:0 !important;

    margin:0 !important;

    border:0 !important;

    border-radius:50% !important;

    background:#b8d8eb !important;

    transition:
        width .3s ease,
        background .3s ease !important;

}


/* ==========================================================
   14. DOT AKTIF
========================================================== */

.about-photo-dots button.active{

    width:20px !important;

    height:7px !important;

    border-radius:10px !important;

    background:#1688d0 !important;

}


/* ==========================================================
   15. RESPONSIVE TABLET
========================================================== */

@media (max-width:992px){

    .about-photo-slider{

        height:350px !important;

    }


    .about-photo-slide img{

        width:82% !important;

        height:82% !important;

    }

}


/* ==========================================================
   16. RESPONSIVE MOBILE
========================================================== */

@media (max-width:768px){

    .about-photo-slider{

        height:300px !important;

    }


    .about-photo-slide img{

        width:88% !important;

        height:78% !important;

    }


    .about-photo-dots{

        bottom:8px !important;

    }

}
/* ==========================================================
   PROFIL SEKOLAH
   PART 1
   MODERN BLUE BRUSH PHOTO
   TAMBAHKAN PALING BAWAH
   TIDAK MENGUBAH CSS LAMA
========================================================== */


/* ==========================================================
   01. GALERI
========================================================== */

.about-gallery{

    position:relative !important;

    isolation:isolate !important;

    overflow:visible !important;

}


/* ==========================================================
   02. SLIDER
========================================================== */

.about-photo-slider{

    position:relative !important;

    width:100% !important;

    height:470px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    overflow:visible !important;

    background:transparent !important;

    border:none !important;

    border-radius:0 !important;

    box-shadow:none !important;

}


/* ==========================================================
   03. HILANGKAN BINGKAI LAMA
========================================================== */

.about-photo-slider{

    outline:none !important;

    box-shadow:none !important;

}


/* ==========================================================
   04. BRUSH BESAR BELAKANG FOTO
========================================================== */

.about-photo-slider::before{

    content:"" !important;

    position:absolute !important;

    z-index:-5 !important;

    left:2% !important;

    top:5% !important;

    width:96% !important;

    height:90% !important;

    background:

        linear-gradient(
            135deg,
            #dff3ff 0%,
            #b8e3fa 38%,
            #8acbf1 66%,
            #d8f0fc 100%
        ) !important;

    clip-path:

        polygon(

            1% 28%,
            5% 23%,
            3% 18%,
            11% 19%,
            8% 13%,
            18% 15%,
            23% 9%,
            31% 13%,
            38% 6%,
            46% 12%,
            55% 7%,
            63% 12%,
            72% 5%,
            80% 12%,
            90% 8%,
            97% 16%,

            93% 24%,
            99% 31%,
            94% 39%,
            98% 47%,
            93% 55%,
            99% 63%,
            94% 70%,
            98% 79%,
            91% 85%,
            94% 92%,

            84% 89%,
            77% 96%,
            68% 91%,
            59% 97%,
            50% 91%,
            41% 96%,
            32% 90%,
            24% 96%,
            15% 90%,
            7% 94%,
            9% 85%,

            3% 79%,
            7% 70%,
            2% 62%,
            7% 53%,
            2% 45%,
            7% 37%

        ) !important;

    opacity:.95 !important;

    filter:

        drop-shadow(
            0 20px 35px
            rgba(21,105,160,.12)
        ) !important;

}


/* ==========================================================
   05. BRUSH PUTIH / SAPUAN TIPIS
========================================================== */

.about-photo-slider::after{

    content:"" !important;

    position:absolute !important;

    z-index:-4 !important;

    left:4% !important;

    top:8% !important;

    width:92% !important;

    height:84% !important;

    background:

        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,255,255,.85) 20%,
            rgba(255,255,255,.35) 40%,
            transparent 58%
        ) !important;

    clip-path:

        polygon(

            4% 25%,
            12% 18%,
            21% 22%,
            31% 13%,
            41% 19%,
            51% 11%,
            61% 17%,
            72% 10%,
            84% 18%,
            96% 13%,

            91% 28%,
            97% 39%,
            91% 51%,
            98% 63%,
            92% 76%,
            96% 88%,

            84% 83%,
            75% 91%,
            65% 84%,
            54% 94%,
            43% 86%,
            32% 92%,
            21% 84%,
            10% 89%,
            5% 77%,
            9% 64%,
            3% 52%,
            8% 40%

        ) !important;

    opacity:.75 !important;

}


/* ==========================================================
   06. HALFTONE KIRI
========================================================== */

.about-photo-slider{

    background-image:

        radial-gradient(
            circle,
            rgba(20,135,211,.45) 0 2px,
            transparent 2.8px
        ) !important;

    background-size:16px 16px !important;

    background-position:
        2% 22% !important;

    background-repeat:no-repeat !important;

}


/* ==========================================================
   07. HALFTONE TAMBAHAN KANAN BAWAH
========================================================== */

.about-photo-slider .about-photo-slide::before{

    content:"" !important;

    position:absolute !important;

    z-index:0 !important;

    width:135px !important;

    height:125px !important;

    right:-15px !important;

    bottom:18px !important;

    background:

        radial-gradient(
            circle,
            rgba(35,143,216,.48) 0 2px,
            transparent 2.8px
        ) !important;

    background-size:15px 15px !important;

    opacity:.7 !important;

    pointer-events:none !important;

}


/* ==========================================================
   08. SLIDE
========================================================== */

.about-photo-slide{

    position:absolute !important;

    inset:0 !important;

    width:100% !important;

    height:100% !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    overflow:visible !important;

    background:transparent !important;

    border:none !important;

    border-radius:0 !important;

}


/* ==========================================================
   09. FOTO UTAMA
========================================================== */

.about-photo-slide img{

    position:relative !important;

    z-index:5 !important;

    display:block !important;

    width:76% !important;

    height:82% !important;

    object-fit:cover !important;

    border:none !important;

    border-radius:0 !important;

    background:transparent !important;

    box-shadow:

        0 25px 45px
        rgba(13,78,119,.18) !important;

    clip-path:

        polygon(

            3% 10%,
            10% 7%,
            18% 11%,
            27% 6%,
            36% 10%,
            45% 5%,
            54% 10%,
            63% 6%,
            72% 11%,
            82% 7%,
            91% 12%,
            97% 9%,

            94% 20%,
            98% 31%,
            94% 42%,
            98% 53%,
            94% 64%,
            98% 75%,
            93% 87%,
            97% 92%,

            87% 95%,
            78% 91%,
            68% 97%,
            58% 92%,
            48% 96%,
            38% 91%,
            28% 97%,
            18% 91%,
            9% 95%,
            4% 88%,

            7% 78%,
            2% 68%,
            7% 57%,
            2% 47%,
            7% 36%,
            2% 25%

        ) !important;

}


/* ==========================================================
   10. SAPUAN BRUSH BIRU DI ATAS FOTO
========================================================== */

.about-photo-slide::after{

    content:"" !important;

    position:absolute !important;

    z-index:6 !important;

    width:88% !important;

    height:88% !important;

    left:6% !important;

    top:6% !important;

    pointer-events:none !important;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.20),
            transparent 40%,
            rgba(76,170,226,.12)
        ) !important;

    clip-path:

        polygon(

            3% 14%,
            13% 9%,
            22% 13%,
            32% 7%,
            43% 12%,
            53% 6%,
            64% 12%,
            75% 7%,
            86% 13%,
            97% 9%,

            93% 23%,
            98% 35%,
            94% 48%,
            98% 60%,
            93% 73%,
            97% 86%,

            86% 91%,
            75% 87%,
            64% 94%,
            53% 89%,
            42% 95%,
            31% 89%,
            20% 94%,
            9% 89%,
            4% 78%,

            8% 66%,
            3% 54%,
            7% 42%,
            2% 29%

        ) !important;

    opacity:.35 !important;

}


/* ==========================================================
   11. OVERLAY FOTO
   TAMPILKAN HANYA NAMA SEKOLAH
========================================================== */

.about-photo-overlay{

    position:absolute !important;

    z-index:15 !important;

    left:11% !important;

    bottom:7% !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    padding:0 !important;

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

}


/* ==========================================================
   12. NAMA SEKOLAH DI ATAS BRUSH
========================================================== */

.about-photo-overlay span{

    position:relative !important;

    display:block !important;

    padding:

        12px 30px 13px 30px !important;

    color:#fff !important;

    font-family:
        Inter,
        Arial,
        sans-serif !important;

    font-size:15px !important;

    font-weight:800 !important;

    letter-spacing:.5px !important;

    text-transform:uppercase !important;

    white-space:nowrap !important;

    background:

        linear-gradient(
            135deg,
            #0c65a5,
            #087fc9
        ) !important;

    clip-path:

        polygon(

            3% 16%,
            9% 8%,
            18% 13%,
            27% 7%,
            37% 12%,
            47% 6%,
            57% 11%,
            68% 7%,
            79% 12%,
            89% 8%,
            97% 17%,

            94% 30%,
            98% 43%,
            94% 56%,
            98% 70%,
            93% 83%,
            87% 92%,

            76% 87%,
            66% 94%,
            55% 88%,
            44% 95%,
            33% 89%,
            22% 94%,
            12% 88%,
            4% 93%,
            7% 78%,
            2% 65%,
            7% 52%,
            2% 39%,
            7% 26%

        ) !important;

    box-shadow:

        0 12px 25px
        rgba(8,82,137,.25) !important;

}


/* ==========================================================
   13. NOMOR FOTO HILANG
========================================================== */

.about-photo-overlay strong{

    display:none !important;

}


/* ==========================================================
   14. HAPUS CONTROL < >
========================================================== */

.about-photo-controls{

    display:none !important;

}


/* ==========================================================
   15. DOT SLIDER
========================================================== */

.about-photo-dots{

    position:absolute !important;

    z-index:30 !important;

    left:50% !important;

    bottom:3px !important;

    transform:translateX(-50%) !important;

    display:flex !important;

    align-items:center !important;

    gap:6px !important;

    padding:6px 10px !important;

    background:

        rgba(255,255,255,.88) !important;

    border:none !important;

    border-radius:20px !important;

    box-shadow:

        0 8px 20px
        rgba(25,99,146,.12) !important;

}


/* ==========================================================
   16. DOT
========================================================== */

.about-photo-dots button{

    width:7px !important;

    height:7px !important;

    padding:0 !important;

    border:none !important;

    border-radius:50% !important;

    background:#a9d6ee !important;

    transition:all .3s ease !important;

}


/* ==========================================================
   17. DOT AKTIF
========================================================== */

.about-photo-dots button.active{

    width:22px !important;

    height:7px !important;

    border-radius:10px !important;

    background:#118bd2 !important;

}


/* ==========================================================
   18. MOBILE
========================================================== */

@media (max-width:768px){

    .about-photo-slider{

        height:350px !important;

    }


    .about-photo-slide img{

        width:84% !important;

        height:78% !important;

    }


    .about-photo-overlay{

        left:8% !important;

        bottom:9% !important;

    }


    .about-photo-overlay span{

        font-size:12px !important;

        padding:9px 20px 10px 20px !important;

    }

}
/* ==========================================================
   OVERRIDE PROFIL SEKOLAH
   STYLE : MODERN GOVERNMENT / BLUE PAINT SPLASH
   TEMPEL PALING BAWAH - JANGAN HAPUS CSS LAMA
========================================================== */


/* ==========================================================
   01. AREA FOTO
========================================================== */

.about-gallery{
    position:relative;
    isolation:isolate;
    overflow:visible !important;
}


/* ==========================================================
   02. SLIDER FOTO
========================================================== */

.about-photo-slider{
    position:relative !important;

    width:100% !important;
    max-width:590px !important;

    height:500px !important;

    margin:0 auto !important;

    background:transparent !important;

    border:none !important;
    border-radius:0 !important;

    box-shadow:none !important;

    overflow:visible !important;
}


/* ==========================================================
   03. FOTO
========================================================== */

.about-photo-slide{
    position:absolute !important;

    inset:0 !important;

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

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

    opacity:0 !important;
    visibility:hidden !important;

    background:transparent !important;

    border:none !important;
    border-radius:0 !important;

    overflow:visible !important;

    transition:
        opacity .65s ease,
        visibility .65s ease !important;
}


.about-photo-slide.active{
    opacity:1 !important;
    visibility:visible !important;
    z-index:5 !important;
}


/* ==========================================================
   04. FOTO UTAMA
========================================================== */

.about-photo-slide img{

    position:relative !important;

    z-index:3 !important;

    width:82% !important;
    height:82% !important;

    object-fit:cover !important;

    border:none !important;
    border-radius:0 !important;

    box-shadow:
        0 20px 45px rgba(13,76,125,.12) !important;

    clip-path:polygon(
        8% 5%,
        22% 8%,
        35% 3%,
        48% 7%,
        63% 2%,
        77% 8%,
        92% 5%,
        89% 20%,
        96% 34%,
        91% 49%,
        97% 64%,
        90% 78%,
        94% 93%,
        78% 89%,
        64% 96%,
        49% 91%,
        35% 97%,
        22% 91%,
        7% 95%,
        11% 80%,
        4% 65%,
        10% 50%,
        4% 35%,
        10% 21%
    );

    transition:
        transform .7s ease,
        filter .7s ease !important;
}


.about-photo-slide.active img{
    transform:scale(1.015);
}


/* ==========================================================
   05. SAPUAN CAT BIRU - BELAKANG FOTO
========================================================== */

.about-photo-slider::before{

    content:"";

    position:absolute;

    left:1%;
    top:7%;

    width:94%;
    height:82%;

    z-index:1;

    background:
        linear-gradient(
            118deg,
            transparent 0 5%,
            rgba(39,154,232,.72) 7% 13%,
            transparent 15%
        ),
        linear-gradient(
            72deg,
            transparent 0 16%,
            rgba(63,174,238,.52) 18% 25%,
            transparent 28%
        ),
        linear-gradient(
            135deg,
            transparent 0 28%,
            rgba(0,115,205,.58) 30% 39%,
            transparent 42%
        ),
        linear-gradient(
            55deg,
            transparent 0 45%,
            rgba(91,188,240,.48) 48% 56%,
            transparent 59%
        ),
        linear-gradient(
            150deg,
            transparent 0 61%,
            rgba(24,132,216,.55) 64% 72%,
            transparent 75%
        ),
        linear-gradient(
            35deg,
            transparent 0 76%,
            rgba(72,171,232,.48) 78% 86%,
            transparent 89%
        );

    filter:blur(.2px);

    clip-path:polygon(
        4% 13%,
        17% 8%,
        28% 12%,
        41% 4%,
        53% 10%,
        67% 5%,
        80% 13%,
        94% 10%,
        90% 27%,
        98% 39%,
        91% 51%,
        97% 66%,
        89% 80%,
        94% 91%,
        78% 87%,
        64% 96%,
        51% 89%,
        37% 97%,
        24% 89%,
        9% 94%,
        13% 79%,
        5% 66%,
        11% 51%,
        3% 38%,
        11% 24%
    );

    opacity:.9;
}


/* ==========================================================
   06. SAPUAN CAT TIPIS / AURA
========================================================== */

.about-photo-slider::after{

    content:"";

    position:absolute;

    left:-5%;
    top:12%;

    width:108%;
    height:76%;

    z-index:0;

    background:

        repeating-linear-gradient(
            155deg,
            transparent 0 17px,
            rgba(35,150,230,.12) 18px 23px,
            transparent 24px 38px
        );

    clip-path:polygon(
        2% 15%,
        15% 10%,
        30% 14%,
        45% 5%,
        62% 11%,
        77% 6%,
        96% 14%,
        91% 30%,
        98% 46%,
        91% 61%,
        96% 80%,
        80% 86%,
        65% 94%,
        48% 88%,
        32% 96%,
        16% 87%,
        4% 91%,
        10% 73%,
        3% 57%,
        9% 40%
    );

    opacity:.85;
}


/* ==========================================================
   07. EFEK DOT / HALFTONE KIRI
========================================================== */

.about-gallery::before{

    content:"";

    position:absolute;

    width:190px;
    height:170px;

    left:-35px;
    top:45px;

    z-index:0;

    background-image:
        radial-gradient(
            circle,
            rgba(22,139,222,.55) 2px,
            transparent 3px
        );

    background-size:16px 16px;

    mask-image:
        linear-gradient(
            135deg,
            black,
            transparent 80%
        );

    -webkit-mask-image:
        linear-gradient(
            135deg,
            black,
            transparent 80%
        );

    opacity:.8;

    pointer-events:none;
}


/* ==========================================================
   08. DOT HALFTONE KANAN BAWAH
========================================================== */

.about-gallery::after{

    content:"";

    position:absolute;

    width:170px;
    height:150px;

    right:-15px;
    bottom:5px;

    z-index:0;

    background-image:
        radial-gradient(
            circle,
            rgba(29,146,225,.42) 2px,
            transparent 3px
        );

    background-size:15px 15px;

    mask-image:
        linear-gradient(
            315deg,
            black,
            transparent 75%
        );

    -webkit-mask-image:
        linear-gradient(
            315deg,
            black,
            transparent 75%
        );

    pointer-events:none;
}


/* ==========================================================
   09. HILANGKAN OVERLAY LAMA
========================================================== */

.about-photo-overlay{

    position:absolute !important;

    left:12% !important;
    bottom:8% !important;

    z-index:8 !important;

    width:auto !important;

    padding:0 !important;

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

    pointer-events:none !important;
}


/* ==========================================================
   10. SEMBUNYIKAN TEKS/NOMOR LAMA
========================================================== */

.about-photo-overlay span,
.about-photo-overlay strong{

    display:none !important;
}


/* ==========================================================
   11. LABEL SMPN 2 MOYUDAN
========================================================== */

.about-photo-overlay::before{

    content:"SMPN 2 MOYUDAN";

    display:block;

    min-width:255px;

    padding:14px 28px 13px;

    color:#fff;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:20px;

    font-weight:800;

    letter-spacing:.5px;

    line-height:1;

    text-align:center;

    background:
        linear-gradient(
            105deg,
            #07599a,
            #0878c9 55%,
            #0b5da1
        );

    box-shadow:
        0 12px 28px rgba(7,89,154,.25);

    clip-path:polygon(
        3% 16%,
        12% 8%,
        23% 13%,
        36% 5%,
        49% 12%,
        62% 6%,
        75% 13%,
        87% 7%,
        97% 17%,
        94% 34%,
        98% 51%,
        93% 68%,
        97% 84%,
        86% 92%,
        72% 87%,
        60% 95%,
        47% 89%,
        34% 96%,
        22% 89%,
        9% 94%,
        3% 82%,
        7% 65%,
        2% 49%,
        7% 32%
    );
}


/* ==========================================================
   12. HILANGKAN CONTROL ANGKA 01/03
========================================================== */

.about-photo-controls{

    position:absolute !important;

    right:6% !important;
    bottom:8% !important;

    z-index:10 !important;

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;
}


/* sembunyikan panah kiri kanan */

.about-photo-controls button{

    display:none !important;
}


/* sembunyikan angka 01 / 03 */

.about-photo-counter{

    display:none !important;
}


/* ==========================================================
   13. DOT SLIDER MODERN
========================================================== */

.about-photo-dots{

    position:absolute !important;

    left:50% !important;
    bottom:-8px !important;

    transform:translateX(-50%) !important;

    z-index:15 !important;

    display:flex !important;

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

    gap:8px !important;

    padding:8px 13px !important;

    min-width:68px;

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

    border:1px solid rgba(24,132,216,.10) !important;

    border-radius:30px !important;

    box-shadow:
        0 8px 22px rgba(17,87,137,.12) !important;

    backdrop-filter:blur(8px);

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


.about-photo-dots button{

    width:9px !important;
    height:9px !important;

    min-width:9px !important;

    padding:0 !important;

    margin:0 !important;

    border:none !important;

    border-radius:50% !important;

    background:#b7d9ef !important;

    transition:
        width .35s ease,
        background .35s ease,
        transform .35s ease !important;
}


.about-photo-dots button.active{

    width:25px !important;

    border-radius:20px !important;

    background:#148ed8 !important;

    transform:none !important;
}


/* ==========================================================
   14. EFEK SAPUAN DIAGONAL
========================================================== */

.about-photo-slide.active::before{

    content:"";

    position:absolute;

    width:130px;
    height:26px;

    top:8%;
    left:8%;

    z-index:6;

    background:
        linear-gradient(
            90deg,
            rgba(17,135,218,.85),
            rgba(77,184,237,.15),
            transparent
        );

    transform:rotate(-8deg);

    clip-path:polygon(
        0 35%,
        15% 18%,
        34% 28%,
        51% 10%,
        68% 26%,
        84% 12%,
        100% 30%,
        91% 57%,
        74% 43%,
        57% 68%,
        39% 48%,
        20% 72%,
        5% 53%
    );

    pointer-events:none;
}


/* ==========================================================
   15. SPLASH KECIL DI BAGIAN BAWAH
========================================================== */

.about-photo-slide.active::after{

    content:"";

    position:absolute;

    width:115px;
    height:55px;

    right:5%;
    bottom:4%;

    z-index:6;

    background:
        linear-gradient(
            135deg,
            rgba(30,146,225,.72),
            rgba(78,183,235,.25)
        );

    clip-path:polygon(
        0 42%,
        12% 25%,
        24% 34%,
        37% 10%,
        52% 30%,
        66% 8%,
        79% 28%,
        94% 20%,
        100% 46%,
        87% 55%,
        96% 76%,
        77% 67%,
        65% 91%,
        48% 70%,
        33% 94%,
        20% 68%,
        5% 78%
    );

    opacity:.7;

    pointer-events:none;
}


/* ==========================================================
   16. JUDUL SEKOLAH
========================================================== */

.about-content h2{

    font-family:
        "Inter",
        Arial,
        sans-serif !important;

    font-weight:900 !important;

    text-transform:uppercase !important;

    letter-spacing:-1.5px !important;

    color:#0d4f83 !important;
}


/* ==========================================================
   17. RESPONSIVE TABLET
========================================================== */

@media (max-width:992px){

    .about-photo-slider{

        max-width:520px !important;
        height:440px !important;

    }

    .about-photo-overlay::before{

        font-size:17px;

        min-width:220px;

        padding:12px 22px;

    }

}


/* ==========================================================
   18. RESPONSIVE MOBILE
========================================================== */

@media (max-width:768px){

    .about-photo-slider{

        max-width:100% !important;

        height:360px !important;

    }


    .about-photo-slide img{

        width:86% !important;
        height:82% !important;

    }


    .about-photo-overlay{

        left:8% !important;
        bottom:7% !important;

    }


    .about-photo-overlay::before{

        min-width:190px;

        padding:11px 18px;

        font-size:14px;

    }


    .about-gallery::before{

        left:-15px;
        top:30px;

        width:120px;
        height:110px;

        background-size:12px 12px;

    }


    .about-gallery::after{

        right:-5px;
        bottom:15px;

        width:110px;
        height:100px;

        background-size:12px 12px;

    }


    .about-photo-dots{

        bottom:-5px !important;

    }

}


/* ==========================================================
   19. MOBILE KECIL
========================================================== */

@media (max-width:480px){

    .about-photo-slider{

        height:315px !important;

    }


    .about-photo-overlay::before{

        min-width:165px;

        padding:10px 14px;

        font-size:12px;

    }


    .about-photo-slider::before{

        left:-2%;

        width:104%;

    }

}
/* ==========================================================
   OVERRIDE FINAL - PROFIL SEKOLAH
   TEMPEL PALING BAWAH CSS LAMA
   TIDAK PERLU MENGHAPUS CSS SEBELUMNYA
========================================================== */


/* ==========================================================
   1. AREA FOTO
========================================================== */

.about-gallery{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
    background:transparent !important;
}


/* ==========================================================
   2. SLIDER
========================================================== */

.about-photo-slider{
    position:relative !important;

    width:100% !important;
    max-width:610px !important;

    height:540px !important;

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

    overflow:visible !important;

    background:transparent !important;

    border:none !important;
    border-radius:0 !important;

    box-shadow:none !important;
}


/* ==========================================================
   3. SLIDE
========================================================== */

.about-photo-slide{
    position:absolute !important;

    inset:0 !important;

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

    opacity:0 !important;
    visibility:hidden !important;

    overflow:visible !important;

    background:transparent !important;

    border:none !important;
    border-radius:0 !important;

    box-shadow:none !important;

    transform:scale(.97) !important;

    transition:
        opacity .65s ease,
        visibility .65s ease,
        transform .65s ease !important;
}


.about-photo-slide.active{
    opacity:1 !important;
    visibility:visible !important;

    transform:scale(1) !important;

    z-index:5 !important;
}


/* ==========================================================
   4. BINGKAI BERCAK UTAMA
   FOTO TIDAK BULAT
   TIDAK KOTAK
========================================================== */

.about-photo-slide::before{

    content:"" !important;

    position:absolute !important;

    width:86% !important;
    height:88% !important;

    left:7% !important;
    top:6% !important;

    z-index:-2 !important;

    background:
        linear-gradient(
            135deg,
            #dff3ff 0%,
            #8fd3f4 42%,
            #caedff 70%,
            #edf9ff 100%
        ) !important;

    /*
       Bentuk brush / bercak
    */

    clip-path:polygon(

        5% 10%,
        13% 6%,
        21% 10%,
        30% 4%,
        39% 9%,
        48% 3%,
        58% 9%,
        68% 5%,
        77% 11%,
        87% 6%,
        94% 15%,

        90% 25%,
        96% 34%,
        91% 44%,
        97% 54%,
        91% 63%,
        96% 73%,
        88% 82%,
        93% 91%,

        83% 88%,
        73% 95%,
        64% 89%,
        54% 96%,
        44% 90%,
        34% 97%,
        24% 91%,
        14% 96%,
        6% 88%,

        10% 78%,
        4% 68%,
        9% 58%,
        3% 48%,
        9% 38%,
        4% 28%,
        10% 19%
    ) !important;

    filter:
        drop-shadow(
            0 16px 24px
            rgba(16,82,130,.13)
        ) !important;
}


/* ==========================================================
   5. LAPISAN BERCAK BELAKANG
========================================================== */

.about-photo-slide::after{

    content:"" !important;

    position:absolute !important;

    width:92% !important;
    height:94% !important;

    left:4% !important;
    top:3% !important;

    z-index:-3 !important;

    background:
        linear-gradient(
            145deg,
            rgba(83,184,235,.20),
            rgba(19,116,184,.10),
            rgba(255,255,255,.35)
        ) !important;

    clip-path:polygon(

        7% 8%,
        17% 3%,
        27% 9%,
        38% 2%,
        49% 8%,
        61% 3%,
        72% 9%,
        84% 5%,
        94% 15%,

        89% 27%,
        96% 39%,
        90% 50%,
        96% 62%,
        89% 74%,
        94% 87%,

        82% 92%,
        71% 87%,
        61% 96%,
        50% 90%,
        39% 97%,
        28% 90%,
        17% 95%,
        6% 87%,

        11% 75%,
        4% 64%,
        10% 53%,
        3% 42%,
        10% 31%,
        4% 19%
    ) !important;

    filter:
        blur(.2px)
        drop-shadow(
            0 10px 22px
            rgba(25,110,170,.10)
        ) !important;
}


/* ==========================================================
   6. FOTO
========================================================== */

.about-photo-slide img{

    position:relative !important;

    width:78% !important;
    height:78% !important;

    max-width:none !important;

    object-fit:cover !important;

    display:block !important;

    margin:0 !important;

    border:none !important;

    border-radius:0 !important;

    box-shadow:
        0 18px 45px
        rgba(13,74,116,.16) !important;

    /*
       FOTO IKUT BENTUK BERCAK
    */

    clip-path:polygon(

        6% 8%,
        17% 3%,
        28% 8%,
        39% 3%,
        50% 8%,
        61% 3%,
        73% 9%,
        84% 5%,
        94% 14%,

        89% 26%,
        96% 38%,
        90% 50%,
        96% 62%,
        89% 74%,
        94% 86%,

        83% 92%,
        72% 87%,
        61% 96%,
        50% 90%,
        39% 97%,
        28% 91%,
        17% 96%,
        6% 87%,

        11% 75%,
        4% 63%,
        10% 52%,
        3% 41%,
        10% 30%,
        4% 18%
    ) !important;

    transition:
        transform .6s ease,
        filter .6s ease !important;
}


.about-photo-slide.active img{

    transform:scale(1.015) !important;

    filter:
        saturate(1.04)
        contrast(1.02) !important;
}


/* ==========================================================
   7. HILANGKAN PANEL PUTIH / BINGKAI LAMA
========================================================== */

.about-photo-slider,
.about-photo-slide,
.about-photo-slide img{

    background-color:transparent !important;
}


/* elemen overlay lama */

.about-photo-overlay{

    position:absolute !important;

    left:15% !important;
    bottom:12% !important;

    z-index:20 !important;

    display:flex !important;

    align-items:center !important;

    gap:12px !important;

    padding:0 !important;

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

    backdrop-filter:none !important;
}


/* ==========================================================
   8. TULISAN SMP NEGERI 2 MOYUDAN
========================================================== */

.about-photo-overlay span{

    display:block !important;

    padding:9px 17px !important;

    background:
        rgba(8,71,119,.92) !important;

    color:#fff !important;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        sans-serif !important;

    font-size:12px !important;

    font-weight:800 !important;

    letter-spacing:.7px !important;

    text-transform:uppercase !important;

    border-radius:7px !important;

    box-shadow:
        0 8px 22px
        rgba(8,71,119,.20) !important;
}


/* ==========================================================
   9. HILANGKAN NOMOR 01 / 02 / 03
========================================================== */

.about-photo-overlay strong{

    display:none !important;
}


/* ==========================================================
   10. HILANGKAN KONTROL PANAH + ANGKA
========================================================== */

.about-photo-controls{

    display:none !important;
}


/* ==========================================================
   11. DOT SLIDER
========================================================== */

.about-photo-dots{

    position:absolute !important;

    left:50% !important;
    bottom:2px !important;

    transform:translateX(-50%) !important;

    z-index:50 !important;

    display:flex !important;

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

    gap:7px !important;

    padding:7px 11px !important;

    background:
        rgba(255,255,255,.90) !important;

    border:1px solid
        rgba(130,190,225,.20) !important;

    border-radius:30px !important;

    box-shadow:
        0 8px 22px
        rgba(15,87,130,.12) !important;

    backdrop-filter:blur(12px) !important;
}


.about-photo-dots button{

    width:8px !important;
    height:8px !important;

    padding:0 !important;

    border:0 !important;

    border-radius:50% !important;

    background:#a9d8f1 !important;

    opacity:1 !important;

    transition:
        width .3s ease,
        background .3s ease,
        transform .3s ease !important;
}


.about-photo-dots button.active{

    width:25px !important;

    border-radius:20px !important;

    background:#168fd3 !important;

    transform:scale(1) !important;
}


/* ==========================================================
   12. TAMBAHAN DEKORASI MINIMALIS
========================================================== */

.about-gallery::before{

    content:"" !important;

    position:absolute !important;

    width:110px !important;
    height:110px !important;

    left:2% !important;
    top:10% !important;

    background:

        radial-gradient(
            circle,
            rgba(38,157,218,.35) 2px,
            transparent 3px
        ) !important;

    background-size:16px 16px !important;

    opacity:.65 !important;

    z-index:-5 !important;

    pointer-events:none !important;
}


.about-gallery::after{

    content:"" !important;

    position:absolute !important;

    width:180px !important;
    height:180px !important;

    right:2% !important;
    bottom:0 !important;

    background:
        radial-gradient(
            circle at center,
            rgba(45,159,218,.11),
            transparent 68%
        ) !important;

    border-radius:50% !important;

    filter:blur(5px) !important;

    z-index:-5 !important;

    pointer-events:none !important;
}


/* ==========================================================
   13. RESPONSIVE LAPTOP
========================================================== */

@media (max-width:1200px){

    .about-photo-slider{

        max-width:560px !important;

        height:500px !important;

    }

}


/* ==========================================================
   14. RESPONSIVE TABLET
========================================================== */

@media (max-width:992px){

    .about-photo-slider{

        max-width:520px !important;

        height:470px !important;

    }

    .about-photo-slide img{

        width:80% !important;
        height:80% !important;

    }

}


/* ==========================================================
   15. RESPONSIVE MOBILE
========================================================== */

@media (max-width:768px){

    .about-photo-slider{

        width:100% !important;

        max-width:430px !important;

        height:390px !important;

        margin:auto !important;

    }


    .about-photo-slide img{

        width:78% !important;

        height:78% !important;

    }


    .about-photo-slide::before{

        width:90% !important;

        height:90% !important;

        left:5% !important;

        top:5% !important;

    }


    .about-photo-overlay{

        left:13% !important;

        bottom:12% !important;

    }


    .about-photo-overlay span{

        font-size:10px !important;

        padding:7px 12px !important;

    }

}


/* ==========================================================
   16. MOBILE KECIL
========================================================== */

@media (max-width:480px){

    .about-photo-slider{

        height:340px !important;

    }


    .about-photo-slide img{

        width:80% !important;

        height:80% !important;

    }


    .about-photo-dots{

        bottom:0 !important;

    }

}
/* ==========================================================
   OVERRIDE FINAL
   PROFIL SEKOLAH - FRAME BERCAK WARNA MODERN
   TAMBAHKAN PALING BAWAH CSS
   TANPA MENGUBAH CSS LAMA
========================================================== */


/* ==========================================================
   1. AREA FOTO
========================================================== */

.about-gallery{
    position:relative !important;
    overflow:visible !important;
    isolation:isolate !important;
}


/* ==========================================================
   2. JUDUL DI ATAS FOTO
   STATIC - TIDAK IKUT SLIDER
========================================================== */

.about-gallery::before{

    content:"SMPN 2 MOYUDAN";

    position:absolute;

    top:-58px;
    left:50%;

    transform:translateX(-50%);

    z-index:50;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:20px;

    font-weight:800;

    letter-spacing:1.8px;

    color:#07528b;

    white-space:nowrap;

    text-transform:uppercase;

    text-shadow:
        0 2px 8px rgba(0,90,150,.10);

}


/* garis kecil modern di bawah judul */

.about-gallery::after{

    content:"";

    position:absolute;

    top:-27px;
    left:50%;

    transform:translateX(-50%);

    width:72px;
    height:4px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #8bd3ff,
            #168ddd,
            #8bd3ff
        );

    z-index:51;

}


/* ==========================================================
   3. SLIDER
========================================================== */

.about-photo-slider{

    position:relative !important;

    width:100% !important;

    height:100% !important;

    overflow:visible !important;

    border:none !important;

    border-radius:0 !important;

    background:transparent !important;

    box-shadow:none !important;

}


/* ==========================================================
   4. FOTO
========================================================== */

.about-photo-slide{

    position:absolute !important;

    inset:0 !important;

    width:100% !important;

    height:100% !important;

    overflow:visible !important;

    background:transparent !important;

    border:none !important;

    border-radius:0 !important;

}


/* ==========================================================
   5. FOTO MENJADI BENTUK BERCAK
========================================================== */

.about-photo-slide img{

    position:relative !important;

    z-index:5 !important;

    display:block !important;

    width:100% !important;

    height:100% !important;

    object-fit:cover !important;

    object-position:center !important;

    border:none !important;

    border-radius:0 !important;

    box-shadow:none !important;

    /*
     * BENTUK BERCAK ORGANIK
     * BUKAN BULAT
     * BUKAN KOTAK
     * BUKAN ZIG-ZAG
     */

    clip-path:polygon(

        3% 18%,
        10% 11%,
        18% 14%,
        25% 7%,
        34% 12%,
        43% 5%,
        52% 11%,
        61% 7%,
        69% 14%,
        79% 9%,
        88% 17%,
        96% 14%,

        92% 25%,
        97% 34%,
        91% 43%,
        96% 52%,
        90% 61%,
        96% 70%,
        91% 79%,
        96% 88%,

        87% 94%,
        78% 90%,
        69% 97%,
        60% 91%,
        51% 97%,
        42% 91%,
        33% 97%,
        24% 91%,
        15% 95%,
        7% 87%,

        11% 78%,
        4% 69%,
        10% 60%,
        4% 51%,
        10% 42%,
        4% 33%,
        9% 25%

    );

}


/* ==========================================================
   6. LAPISAN BERCAK BIRU DI BELAKANG FOTO
========================================================== */

.about-photo-slide::before{

    content:"";

    position:absolute;

    z-index:1;

    top:-17px;
    left:-18px;

    width:calc(100% + 36px);
    height:calc(100% + 34px);

    background:

        radial-gradient(
            ellipse at 22% 20%,
            rgba(42,160,226,.45) 0 9%,
            transparent 10%
        ),

        radial-gradient(
            ellipse at 78% 18%,
            rgba(80,181,235,.38) 0 10%,
            transparent 11%
        ),

        radial-gradient(
            ellipse at 84% 75%,
            rgba(30,142,215,.35) 0 11%,
            transparent 12%
        ),

        radial-gradient(
            ellipse at 18% 78%,
            rgba(74,176,231,.34) 0 10%,
            transparent 11%
        ),

        linear-gradient(
            135deg,
            rgba(86,190,241,.34),
            rgba(24,139,216,.22)
        );

    clip-path:polygon(

        5% 17%,
        15% 12%,
        24% 16%,
        34% 8%,
        44% 13%,
        54% 6%,
        65% 12%,
        75% 8%,
        86% 15%,
        96% 12%,

        91% 25%,
        98% 36%,
        92% 47%,
        97% 58%,
        90% 69%,
        96% 81%,

        87% 93%,
        77% 88%,
        67% 97%,
        57% 90%,
        47% 98%,
        37% 91%,
        27% 96%,
        17% 89%,
        7% 94%,

        11% 82%,
        3% 70%,
        9% 59%,
        3% 48%,
        9% 37%,
        3% 26%

    );

    filter:
        drop-shadow(
            0 12px 25px
            rgba(22,126,188,.12)
        );

}


/* ==========================================================
   7. BERCAK KEDUA - LEBIH TIPIS
========================================================== */

.about-photo-slide::after{

    content:"";

    position:absolute;

    z-index:2;

    top:-27px;
    left:-29px;

    width:calc(100% + 58px);
    height:calc(100% + 54px);

    background:

        radial-gradient(
            circle at 8% 35%,
            rgba(74,177,232,.28) 0 18px,
            transparent 19px
        ),

        radial-gradient(
            circle at 93% 30%,
            rgba(43,154,220,.25) 0 23px,
            transparent 24px
        ),

        radial-gradient(
            circle at 92% 82%,
            rgba(81,183,235,.22) 0 20px,
            transparent 21px
        ),

        radial-gradient(
            circle at 8% 82%,
            rgba(43,154,220,.20) 0 16px,
            transparent 17px
        );

    clip-path:polygon(

        8% 19%,
        20% 9%,
        31% 15%,
        43% 7%,
        55% 14%,
        67% 8%,
        80% 16%,
        94% 12%,

        88% 28%,
        97% 40%,
        91% 52%,
        98% 64%,
        90% 77%,
        96% 89%,

        82% 96%,
        70% 89%,
        58% 98%,
        46% 91%,
        34% 97%,
        22% 89%,
        9% 94%,

        14% 79%,
        4% 67%,
        10% 55%,
        3% 43%,
        10% 31%

    );

    opacity:.65;

    pointer-events:none;

}


/* ==========================================================
   8. HILANGKAN OVERLAY LAMA
   TULISAN TIDAK LAGI MENEMPEL DI FOTO
========================================================== */

.about-photo-overlay{

    display:none !important;

}


/* ==========================================================
   9. HILANGKAN TOMBOL PANAH
   AGAR TAMPILAN LEBIH MINIMALIS
========================================================== */

.about-photo-controls button{

    display:none !important;

}


/* ==========================================================
   10. COUNTER 02 / 03 DIHILANGKAN
========================================================== */

.about-photo-counter{

    display:none !important;

}


/* ==========================================================
   11. DOT SLIDER
   TETAP ADA, TAPI MINIMALIS
========================================================== */

.about-photo-dots{

    position:absolute !important;

    z-index:60 !important;

    left:50% !important;

    bottom:-42px !important;

    transform:translateX(-50%) !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:7px !important;

    padding:7px 11px !important;

    background:rgba(255,255,255,.82) !important;

    border:1px solid rgba(31,145,218,.10) !important;

    border-radius:30px !important;

    box-shadow:
        0 8px 25px
        rgba(20,90,140,.10) !important;

    backdrop-filter:blur(12px);

}


/* dot */

.about-photo-dots button{

    width:8px !important;

    height:8px !important;

    min-width:8px !important;

    padding:0 !important;

    margin:0 !important;

    border:none !important;

    border-radius:50% !important;

    background:#b9dff5 !important;

    transition:
        width .3s ease,
        background .3s ease,
        transform .3s ease !important;

}


/* dot aktif */

.about-photo-dots button.active{

    width:25px !important;

    border-radius:20px !important;

    background:#168fd5 !important;

    transform:none !important;

}


/* ==========================================================
   12. BAYANGAN FOTO
========================================================== */

.about-photo-slide.active img{

    filter:
        drop-shadow(
            0 22px 35px
            rgba(20,93,140,.16)
        );

}


/* ==========================================================
   13. ANIMASI SLIDER LEBIH HALUS
========================================================== */

.about-photo-slide{

    opacity:0 !important;

    visibility:hidden !important;

    transition:
        opacity .7s ease,
        visibility .7s ease !important;

}


.about-photo-slide.active{

    opacity:1 !important;

    visibility:visible !important;

}


/* ==========================================================
   14. RESPONSIVE LAPTOP
========================================================== */

@media (max-width:1200px){

    .about-gallery::before{

        top:-50px;

        font-size:18px;

    }

}


/* ==========================================================
   15. TABLET
========================================================== */

@media (max-width:992px){

    .about-gallery::before{

        top:-45px;

        font-size:17px;

        letter-spacing:1.4px;

    }

    .about-gallery::after{

        top:-18px;

        width:60px;

    }

}


/* ==========================================================
   16. MOBILE
========================================================== */

@media (max-width:768px){

    .about-gallery::before{

        top:-40px;

        font-size:15px;

        letter-spacing:1.2px;

    }

    .about-gallery::after{

        top:-15px;

        width:50px;

        height:3px;

    }

    .about-photo-slide img{

        clip-path:polygon(

            5% 15%,
            16% 8%,
            28% 13%,
            40% 6%,
            52% 12%,
            65% 7%,
            78% 14%,
            94% 10%,

            89% 28%,
            97% 43%,
            91% 58%,
            96% 74%,
            88% 91%,

            74% 96%,
            60% 90%,
            47% 97%,
            34% 91%,
            20% 96%,
            7% 88%,

            12% 72%,
            4% 57%,
            10% 42%,
            3% 27%

        );

    }

    .about-photo-dots{

        bottom:-30px !important;

    }

}
/* ==========================================================
   FIX FOTO SLIDER - PASTIKAN FOTO BERADA DI DEPAN
========================================================== */

#aboutPhotoSlider .about-photo-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    opacity: 0 !important;
    visibility: hidden !important;

    z-index: 10 !important;
}

#aboutPhotoSlider .about-photo-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 20 !important;
}

#aboutPhotoSlider .about-photo-slide img {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

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

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;

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

    z-index: 21 !important;
}
/* ==========================================================
   03. SAMBUTAN KEPALA SEKOLAH
   MODERN - MINIMALIS - TANPA TABEL
   TAMBAHKAN PALING BAWAH CSS LAMA
========================================================== */


/* ==========================================================
   SECTION
========================================================== */

.principal-section{

    position:relative;

    padding:95px 0 110px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #f7fbff 0%,
            #ffffff 55%,
            #f3f9fd 100%
        );

}


/* ==========================================================
   BACKGROUND DEKORATIF
========================================================== */

.principal-section::before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    left:-240px;
    top:80px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(20,145,215,.10) 0 2px,
            transparent 3px
        );

    background-size:20px 20px;

    opacity:.55;

    pointer-events:none;

}


.principal-section::after{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    right:-330px;
    bottom:-350px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(12,91,145,.07),
            transparent 68%
        );

    pointer-events:none;

}


/* ==========================================================
   CONTAINER
========================================================== */

.principal-section .container{

    position:relative;

    z-index:2;

}


/* ==========================================================
   HEADER
========================================================== */

.principal-section .section-header-row{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:60px;

}


/* ==========================================================
   LABEL
========================================================== */

.principal-section .section-kicker{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 15px;

    margin-bottom:18px;

    border-radius:30px;

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

    border:1px solid rgba(15,91,145,.07);

    box-shadow:
        0 8px 25px rgba(20,80,120,.06);

    color:#087bc9;

    font-size:12px;

    font-weight:800;

    letter-spacing:1.2px;

}


/* titik label */

.principal-section .section-kicker::before{

    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:#138ed2;

    box-shadow:
        0 0 0 5px rgba(19,142,210,.10);

}


/* ==========================================================
   JUDUL
========================================================== */

.principal-section .section-header-row h2{

    margin:0;

    color:#14243b;

    font-size:clamp(
        34px,
        4vw,
        52px
    );

    line-height:1.12;

    font-weight:800;

    letter-spacing:-1.8px;

}


.principal-section .section-header-row h2 span{

    color:#07558d;

}


/* ==========================================================
   HAPUS TOMBOL PROFIL SEKOLAH
========================================================== */

.principal-section .section-header-row > a{

    display:none !important;

}


/* ==========================================================
   AREA UTAMA
========================================================== */

.principal-feature{

    position:relative;

    display:grid;

    grid-template-columns:
        380px
        minmax(0,1fr);

    min-height:500px;

    max-width:1100px;

    margin:0 auto;

    overflow:hidden;

    border-radius:28px;

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

    border:1px solid rgba(20,83,125,.08);

    box-shadow:
        0 25px 70px rgba(20,70,105,.09);

}


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

.principal-photo{

    position:relative;

    min-height:500px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #e9f4fb,
            #cddfea
        );

}


/* ==========================================================
   FOTO
========================================================== */

.principal-photo img{

    width:100%;

    height:100%;

    min-height:500px;

    display:block;

    object-fit:cover;

    object-position:center top;

    transition:
        transform .7s ease;

}


.principal-feature:hover
.principal-photo img{

    transform:scale(1.035);

}


/* ==========================================================
   LAPISAN FOTO
========================================================== */

.principal-photo::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(5,62,100,0) 45%,
            rgba(5,50,80,.18) 100%
        );

    pointer-events:none;

}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.principal-placeholder{

    width:100%;

    height:100%;

    min-height:500px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#7b9bb1;

    font-size:70px;

    background:
        linear-gradient(
            145deg,
            #eaf5fb,
            #d8e8f1
        );

}


/* ==========================================================
   CONTENT
========================================================== */

.principal-content{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:65px 75px;

    background:#fff;

}


/* ==========================================================
   GARIS AKSEN
========================================================== */

.principal-content::before{

    content:"";

    position:absolute;

    left:0;

    top:65px;

    bottom:65px;

    width:4px;

    border-radius:10px;

    background:
        linear-gradient(
            180deg,
            #1599df,
            #07558d
        );

}


/* ==========================================================
   JABATAN
========================================================== */

.principal-position{

    display:inline-flex;

    align-items:center;

    align-self:flex-start;

    padding:7px 13px;

    margin-bottom:17px;

    border-radius:7px;

    background:#eef6fc;

    color:#07558d;

    font-size:11px;

    font-weight:800;

    letter-spacing:.8px;

    text-transform:uppercase;

}


/* ==========================================================
   NAMA
========================================================== */

.principal-content h3{

    margin:0 0 8px;

    color:#17243a;

    font-size:clamp(
        34px,
        4vw,
        48px
    );

    line-height:1.12;

    font-weight:800;

    letter-spacing:-1.5px;

}


/* ==========================================================
   PERIODE
========================================================== */

.principal-period{

    display:block;

    margin-bottom:32px;

    color:#91a1b2;

    font-size:13px;

    font-weight:600;

}


/* ==========================================================
   SAMBUTAN
========================================================== */

.principal-message{

    position:relative;

    margin:0;

    padding:0 0 0 27px;

    border-left:3px solid #07558d;

}


/* ==========================================================
   HILANGKAN QUOTE BESAR
========================================================== */

.principal-message .quote-mark{

    display:none !important;

}


/* ==========================================================
   TEKS SAMBUTAN
========================================================== */

.principal-message p{

    margin:0;

    color:#64758b;

    font-size:17px;

    line-height:1.85;

    font-weight:500;

}


/* ==========================================================
   HAPUS LINK SELENGKAPNYA
========================================================== */

.principal-content .text-link{

    display:none !important;

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.principal-section .empty-state{

    max-width:700px;

    margin:0 auto;

    padding:60px 30px;

    text-align:center;

    border-radius:22px;

    background:#fff;

    border:1px solid rgba(20,83,125,.08);

    box-shadow:
        0 20px 55px rgba(20,70,105,.07);

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1100px){

    .principal-feature{

        grid-template-columns:
            330px
            minmax(0,1fr);

        max-width:950px;

    }


    .principal-content{

        padding:50px;

    }


    .principal-content h3{

        font-size:38px;

    }


    .principal-message p{

        font-size:16px;

    }

}


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

@media (max-width:768px){

    .principal-section{

        padding:70px 0 80px;

    }


    .principal-section
    .section-header-row{

        margin-bottom:40px;

    }


    .principal-section
    .section-header-row h2{

        font-size:34px;

        letter-spacing:-1px;

    }


    .principal-feature{

        display:flex;

        flex-direction:column;

        width:100%;

        min-height:auto;

        border-radius:22px;

    }


    .principal-photo{

        width:100%;

        height:400px;

        min-height:400px;

    }


    .principal-photo img{

        min-height:400px;

    }


    .principal-content{

        padding:40px 30px 45px;

    }


    .principal-content::before{

        left:30px;

        right:30px;

        top:0;

        bottom:auto;

        width:auto;

        height:3px;

        background:
            linear-gradient(
                90deg,
                #1599df,
                #07558d
            );

    }


    .principal-position{

        margin-top:5px;

    }


    .principal-content h3{

        font-size:32px;

    }


    .principal-message p{

        font-size:15px;

        line-height:1.8;

    }

}


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

@media (max-width:480px){

    .principal-section{

        padding:55px 0 65px;

    }


    .principal-section
    .section-header-row h2{

        font-size:29px;

    }


    .principal-photo{

        height:340px;

        min-height:340px;

    }


    .principal-photo img{

        min-height:340px;

    }


    .principal-content{

        padding:32px 24px 38px;

    }


    .principal-content h3{

        font-size:28px;

        letter-spacing:-.8px;

    }


    .principal-message{

        padding-left:20px;

    }


    .principal-message p{

        font-size:14px;

        line-height:1.75;

    }

}
/* ==========================================================
   SAMBUTAN KEPALA SEKOLAH
   MODERN • MINIMAL • RESMI
   TAMBAHKAN PALING BAWAH CSS
   TIDAK MENGUBAH CSS LAMA
========================================================== */


/* ==========================================================
   SECTION UTAMA
========================================================== */

.principal-section{

    position:relative;

    padding:110px 0 120px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(248,251,255,.97),
            rgba(239,247,253,.94)
        ),
        url("https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=1800&q=80")
        center center / cover no-repeat;

}


/* LAPISAN PUTIH AGAR BACKGROUND TETAP RESMI */

.principal-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(247,251,255,.97) 0%,
            rgba(247,251,255,.90) 48%,
            rgba(247,251,255,.96) 100%
        );

    pointer-events:none;

}


/* AKSEN HALUS */

.principal-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    top:80px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(30,145,220,.10) 0%,
            rgba(30,145,220,.04) 45%,
            transparent 72%
        );

    pointer-events:none;

}


/* ==========================================================
   CONTAINER
========================================================== */

.principal-section .container{

    position:relative;

    z-index:2;

}


/* ==========================================================
   HEADER
   SAMAKAN DENGAN PROFIL
========================================================== */

.principal-section .section-header-row{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:55px;

}


/* ==========================================================
   LABEL
========================================================== */

.principal-section .section-kicker{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    padding:8px 16px;

    margin-bottom:18px;

    border-radius:30px;

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

    border:1px solid rgba(20,91,145,.08);

    box-shadow:
        0 8px 25px rgba(25,85,130,.06);

    color:#0878c9;

    font-size:12px;

    font-weight:700;

    letter-spacing:1.2px;

}


/* ==========================================================
   JUDUL
========================================================== */

.principal-section .section-header-row h2{

    margin:0;

    color:#154f82;

    font-size:clamp(30px,3.2vw,46px);

    line-height:1.12;

    font-weight:800;

    letter-spacing:-1.5px;

}


/* WARNA BAGIAN KEPALA SEKOLAH */

.principal-section .section-header-row h2 span{

    color:#154f82;

}


/* ==========================================================
   HILANGKAN TOMBOL PROFIL
========================================================== */

.principal-section .section-header-row .outline-button{

    display:none !important;

}


/* ==========================================================
   AREA UTAMA
========================================================== */

.principal-section .principal-feature{

    position:relative;

    display:grid;

    grid-template-columns:
        minmax(300px, 42%)
        minmax(0, 58%);

    align-items:center;

    gap:65px;

    width:100%;

    max-width:1180px;

    margin:0 auto;

    padding:0;

    background:transparent !important;

    border:none !important;

    border-radius:0 !important;

    box-shadow:none !important;

}


/* ==========================================================
   FOTO
   TANPA CARD / TANPA BINGKAI
========================================================== */

.principal-section .principal-photo{

    position:relative;

    width:100%;

    height:470px;

    overflow:hidden;

    background:transparent;

    border:none !important;

    border-radius:0 !important;

    box-shadow:none !important;

}


/* FOTO */

.principal-section .principal-photo img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    border:none !important;

    border-radius:0 !important;

    box-shadow:none !important;

    transition:
        transform 1.2s ease;

}


/* GERAKAN HALUS FOTO */

.principal-section .principal-photo:hover img{

    transform:scale(1.035);

}


/* ==========================================================
   AKSEN FOTO RESMI
========================================================== */

.principal-section .principal-photo::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:38%;

    z-index:1;

    pointer-events:none;

    background:
        linear-gradient(
            to top,
            rgba(7,55,95,.22),
            transparent
        );

}


/* AKSEN GARIS BIRU */

.principal-section .principal-photo::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:90px;

    height:4px;

    background:#168bd0;

    z-index:3;

}


/* ==========================================================
   HILANGKAN PLACEHOLDER BESAR
========================================================== */

.principal-section .principal-placeholder{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #edf6fc,
            #dcebf5
        );

    color:#17649a;

}


/* ==========================================================
   KONTEN KEPALA SEKOLAH
========================================================== */

.principal-section .principal-content{

    position:relative;

    padding:10px 0;

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

}


/* ==========================================================
   JABATAN
========================================================== */

.principal-section .principal-position{

    display:inline-block;

    margin-bottom:15px;

    padding:7px 13px;

    border-radius:6px;

    background:#eaf4fb;

    color:#155987;

    font-size:11px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* ==========================================================
   NAMA
========================================================== */

.principal-section .principal-content h3{

    margin:0 0 8px;

    color:#153f67;

    font-size:clamp(30px,3vw,43px);

    line-height:1.12;

    font-weight:800;

    letter-spacing:-1.2px;

    animation:
        principalNameIn
        .9s
        ease both;

}


/* ==========================================================
   PERIODE
========================================================== */

.principal-section .principal-period{

    display:block;

    margin-bottom:28px;

    color:#7890a4;

    font-size:13px;

    font-weight:600;

}


/* ==========================================================
   SAMBUTAN
========================================================== */

.principal-section .principal-message{

    position:relative;

    max-width:720px;

    padding:0 0 0 25px;

    margin:0;

    border-left:3px solid #168bd0;

    animation:
        principalMessageIn
        1.1s
        ease both;

}


/* TANDA KUTIP */

.principal-section .quote-mark{

    position:absolute;

    right:10px;

    top:-48px;

    color:rgba(22,139,208,.10);

    font-family:Georgia,serif;

    font-size:105px;

    line-height:1;

    font-weight:700;

    pointer-events:none;

}


/* TEKS SAMBUTAN */

.principal-section .principal-message p{

    margin:0;

    color:#60788f;

    font-size:16px;

    line-height:1.9;

    font-weight:500;

    letter-spacing:.1px;

}


/* ==========================================================
   HILANGKAN LINK SELENGKAPNYA
========================================================== */

.principal-section .principal-content .text-link{

    display:none !important;

}


/* ==========================================================
   ANIMASI NAMA
========================================================== */

@keyframes principalNameIn{

    from{

        opacity:0;

        transform:
            translateY(18px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/* ==========================================================
   ANIMASI SAMBUTAN
========================================================== */

@keyframes principalMessageIn{

    from{

        opacity:0;

        transform:
            translateY(25px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/* ==========================================================
   GERAKAN OTOMATIS HALUS
   TEKS BERNAFAS / TIDAK BERLEBIHAN
========================================================== */

.principal-section .principal-message p{

    animation:
        principalTextFloat
        6s
        ease-in-out
        infinite;

}


@keyframes principalTextFloat{

    0%,
    100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-3px);

    }

}


/* ==========================================================
   RESPONSIVE LAPTOP
========================================================== */

@media (max-width:1200px){

    .principal-section{

        padding:95px 0 100px;

    }

    .principal-section .principal-feature{

        grid-template-columns:
            minmax(280px,40%)
            minmax(0,60%);

        gap:45px;

    }

    .principal-section .principal-photo{

        height:420px;

    }

}


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

@media (max-width:992px){

    .principal-section{

        padding:85px 0 90px;

    }

    .principal-section .principal-feature{

        grid-template-columns:1fr;

        gap:35px;

        max-width:700px;

    }

    .principal-section .principal-photo{

        width:100%;

        max-width:520px;

        height:380px;

        margin:0 auto;

    }

    .principal-section .principal-content{

        text-align:center;

    }

    .principal-section .principal-position{

        margin-bottom:12px;

    }

    .principal-section .principal-message{

        margin:0 auto;

        text-align:left;

        max-width:620px;

    }

}


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

@media (max-width:768px){

    .principal-section{

        padding:70px 0 75px;

    }

    .principal-section .section-header-row{

        margin-bottom:38px;

    }

    .principal-section .section-kicker{

        font-size:10px;

        padding:7px 13px;

    }

    .principal-section .section-header-row h2{

        font-size:30px;

        letter-spacing:-.8px;

    }

    .principal-section .principal-feature{

        gap:28px;

    }

    .principal-section .principal-photo{

        height:320px;

    }

    .principal-section .principal-content h3{

        font-size:30px;

    }

    .principal-section .principal-period{

        font-size:12px;

        margin-bottom:22px;

    }

    .principal-section .principal-message{

        padding-left:18px;

    }

    .principal-section .principal-message p{

        font-size:14px;

        line-height:1.8;

    }

    .principal-section .quote-mark{

        display:none;

    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width:480px){

    .principal-section{

        padding:60px 0 65px;

    }

    .principal-section .section-header-row h2{

        font-size:27px;

    }

    .principal-section .principal-photo{

        height:280px;

    }

    .principal-section .principal-content h3{

        font-size:27px;

    }

    .principal-section .principal-message p{

        font-size:13.5px;

    }

}
/* ==========================================================
   PART 2
   SAMBUTAN KEPALA SEKOLAH
   CLEAN • MODERN • RAPI • ANIMATED
   TEMPEL PALING BAWAH
========================================================== */


/* ==========================================================
   PAKSA HILANGKAN SEMUA BENTUK TABEL / CARD LAMA
========================================================== */

.principal-section .principal-feature,
.principal-section article.principal-feature{

    display:grid !important;

    grid-template-columns:
        minmax(300px, 43%)
        minmax(0, 57%) !important;

    align-items:center !important;

    width:100% !important;

    max-width:1180px !important;

    margin:0 auto !important;

    padding:0 !important;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    overflow:visible !important;

}


/* ==========================================================
   HILANGKAN ELEMEN CARD TERSEMBUNYI DARI CSS LAMA
========================================================== */

.principal-section .principal-feature::before,
.principal-section .principal-feature::after{

    display:none !important;

    content:none !important;

}


/* ==========================================================
   FOTO
========================================================== */

.principal-section .principal-photo{

    position:relative !important;

    width:100% !important;

    height:440px !important;

    margin:0 !important;

    padding:0 !important;

    overflow:hidden !important;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

}


/* ==========================================================
   FOTO UTAMA
========================================================== */

.principal-section .principal-photo img{

    position:relative !important;

    display:block !important;

    width:100% !important;

    height:100% !important;

    object-fit:cover !important;

    object-position:center !important;

    margin:0 !important;

    padding:0 !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    opacity:1 !important;

}


/* ==========================================================
   HILANGKAN OVERLAY FOTO LAMA
========================================================== */

.principal-section .principal-photo::before{

    content:"" !important;

    position:absolute !important;

    inset:auto 0 0 0 !important;

    width:100% !important;

    height:100px !important;

    background:
        linear-gradient(
            to top,
            rgba(8,48,82,.20),
            transparent
        ) !important;

    z-index:2 !important;

    pointer-events:none !important;

}


/* ==========================================================
   GARIS AKSEN FOTO
========================================================== */

.principal-section .principal-photo::after{

    content:"" !important;

    position:absolute !important;

    left:0 !important;

    bottom:0 !important;

    width:75px !important;

    height:4px !important;

    background:#168bd0 !important;

    z-index:5 !important;

}


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

.principal-section .principal-content{

    position:relative !important;

    width:100% !important;

    max-width:650px !important;

    margin:0 !important;

    padding:0 0 0 20px !important;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

}


/* ==========================================================
   JABATAN
========================================================== */

.principal-section .principal-position{

    display:inline-flex !important;

    align-items:center !important;

    width:auto !important;

    margin:0 0 16px !important;

    padding:6px 12px !important;

    background:#eaf5fc !important;

    border:0 !important;

    border-radius:5px !important;

    color:#135987 !important;

    font-size:10px !important;

    line-height:1 !important;

    font-weight:800 !important;

    letter-spacing:1.1px !important;

    text-transform:uppercase !important;

}


/* ==========================================================
   NAMA KEPALA SEKOLAH
========================================================== */

.principal-section .principal-content h3{

    display:block !important;

    width:100% !important;

    margin:0 0 8px !important;

    padding:0 !important;

    color:#163f66 !important;

    font-size:clamp(28px,3vw,40px) !important;

    line-height:1.15 !important;

    font-weight:800 !important;

    letter-spacing:-1px !important;

    text-align:left !important;

}


/* ==========================================================
   PERIODE
========================================================== */

.principal-section .principal-period{

    display:block !important;

    margin:0 0 27px !important;

    padding:0 !important;

    color:#8498aa !important;

    font-size:12px !important;

    line-height:1.5 !important;

    font-weight:600 !important;

}


/* ==========================================================
   AREA SAMBUTAN
========================================================== */

.principal-section .principal-message{

    position:relative !important;

    display:block !important;

    width:100% !important;

    max-width:620px !important;

    margin:0 !important;

    padding:2px 0 2px 22px !important;

    background:transparent !important;

    border:0 !important;

    border-left:3px solid #168bd0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

}


/* ==========================================================
   TEKS SAMBUTAN
========================================================== */

.principal-section .principal-message p{

    display:block !important;

    width:100% !important;

    margin:0 !important;

    padding:0 !important;

    color:#60788f !important;

    font-size:15px !important;

    line-height:1.9 !important;

    font-weight:500 !important;

    text-align:left !important;

    letter-spacing:.05px !important;

}


/* ==========================================================
   HILANGKAN QUOTE BESAR
========================================================== */

.principal-section .quote-mark{

    display:none !important;

}


/* ==========================================================
   HILANGKAN LINK
========================================================== */

.principal-section .principal-content .text-link{

    display:none !important;

}


/* ==========================================================
   ANIMASI FOTO
========================================================== */

.principal-section .principal-photo{

    animation:
        principalPhotoEnter
        1.1s
        cubic-bezier(.22,.61,.36,1)
        both;

}


@keyframes principalPhotoEnter{

    0%{

        opacity:0;

        transform:
            translateX(-35px);

    }

    100%{

        opacity:1;

        transform:
            translateX(0);

    }

}


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

.principal-section .principal-content{

    animation:
        principalContentEnter
        1.1s
        .15s
        cubic-bezier(.22,.61,.36,1)
        both;

}


@keyframes principalContentEnter{

    0%{

        opacity:0;

        transform:
            translateX(35px);

    }

    100%{

        opacity:1;

        transform:
            translateX(0);

    }

}


/* ==========================================================
   ANIMASI JABATAN
========================================================== */

.principal-section .principal-position{

    animation:
        principalSmallEnter
        .8s
        .25s
        ease both;

}


@keyframes principalSmallEnter{

    0%{

        opacity:0;

        transform:
            translateY(10px);

    }

    100%{

        opacity:1;

        transform:
            translateY(0);

    }

}


/* ==========================================================
   GERAKAN HALUS FOTO
========================================================== */

.principal-section .principal-photo img{

    animation:
        principalImageFloat
        8s
        ease-in-out
        infinite alternate;

}


@keyframes principalImageFloat{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.025);

    }

}


/* ==========================================================
   GERAKAN SAMBUTAN
========================================================== */

.principal-section .principal-message{

    animation:
        principalMessageFloat
        7s
        ease-in-out
        infinite;

}


@keyframes principalMessageFloat{

    0%,
    100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-3px);

    }

}


/* ==========================================================
   AKSEN BACKGROUND
========================================================== */

.principal-section{

    background-color:#f4f8fc !important;

}


.principal-section .container::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    left:-160px;

    top:100px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(26,143,211,.12) 0 2px,
            transparent 3px
        );

    background-size:18px 18px;

    opacity:.55;

    pointer-events:none;

}


/* ==========================================================
   GARIS AKSEN HALUS DI BAWAH
========================================================== */

.principal-section .principal-feature{

    position:relative !important;

}


.principal-section .principal-feature > .principal-content::after{

    content:"";

    display:block;

    width:42px;

    height:3px;

    margin-top:28px;

    background:#168bd0;

    border-radius:10px;

    opacity:.7;

}


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

@media (max-width:992px){

    .principal-section .principal-feature,
    .principal-section article.principal-feature{

        grid-template-columns:1fr !important;

        gap:38px !important;

        max-width:720px !important;

    }


    .principal-section .principal-photo{

        width:100% !important;

        max-width:520px !important;

        height:370px !important;

        margin:0 auto !important;

    }


    .principal-section .principal-content{

        max-width:650px !important;

        margin:0 auto !important;

        padding:0 !important;

        text-align:center !important;

    }


    .principal-section .principal-content h3{

        text-align:center !important;

    }


    .principal-section .principal-period{

        text-align:center !important;

    }


    .principal-section .principal-message{

        margin:0 auto !important;

        text-align:left !important;

    }


    .principal-section .principal-feature > .principal-content::after{

        margin-left:auto;

        margin-right:auto;

    }

}


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

@media (max-width:768px){

    .principal-section{

        padding:70px 20px 80px !important;

    }


    .principal-section .principal-feature,
    .principal-section article.principal-feature{

        gap:30px !important;

    }


    .principal-section .principal-photo{

        height:300px !important;

    }


    .principal-section .principal-content h3{

        font-size:29px !important;

        letter-spacing:-.7px !important;

    }


    .principal-section .principal-message{

        padding-left:17px !important;

    }


    .principal-section .principal-message p{

        font-size:14px !important;

        line-height:1.85 !important;

    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width:480px){

    .principal-section{

        padding:60px 16px 70px !important;

    }


    .principal-section .section-header-row h2{

        font-size:27px !important;

    }


    .principal-section .principal-photo{

        height:260px !important;

    }


    .principal-section .principal-content h3{

        font-size:26px !important;

    }


    .principal-section .principal-message p{

        font-size:13.5px !important;

        line-height:1.8 !important;

    }

}


/* ==========================================================
   AKSESIBILITAS
   HENTIKAN ANIMASI JIKA USER MEMILIH REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .principal-section *,
    .principal-section *::before,
    .principal-section *::after{

        animation:none !important;

        transition:none !important;

    }

}
/* ==========================================================
   SAMBUTAN KEPALA SEKOLAH — MODERN GOVERNMENT STYLE
   PART 1
   CSS OVERRIDE — JANGAN HAPUS CSS LAMA
========================================================== */


/* ==========================================================
   SECTION
========================================================== */

.principal-section{

    position:relative;

    padding:110px 0 120px;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(25,118,210,.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 75%,
            rgba(30,136,229,.045),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f5f9fd 0%,
            #f8fbfe 50%,
            #f4f8fc 100%
        );

    overflow:hidden;

}


/* ==========================================================
   BACKGROUND DECORATION
========================================================== */

.principal-section::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:-220px;
    top:80px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(30,136,229,.08) 1px,
            transparent 1.5px
        );

    background-size:18px 18px;

    opacity:.7;

    pointer-events:none;

}


.principal-section::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-260px;
    bottom:-280px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(21,101,192,.06),
            transparent 68%
        );

    pointer-events:none;

}


/* ==========================================================
   CONTAINER
========================================================== */

.principal-section .container{

    position:relative;

    z-index:2;

}


/* ==========================================================
   HEADER
========================================================== */

.principal-section .section-header-row{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:40px;

    margin-bottom:55px;

}


/* ==========================================================
   KICKER
========================================================== */

.principal-section .section-kicker{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:9px 16px;

    border-radius:50px;

    background:#ffffff;

    color:#147dcc;

    font-size:12px;

    font-weight:800;

    letter-spacing:1.3px;

    line-height:1;

    box-shadow:
        0 8px 25px rgba(20,70,110,.07);

}


/* BULATAN KECIL */

.principal-section .section-kicker::before{

    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:#198fe0;

    box-shadow:
        0 0 0 5px rgba(25,143,224,.10);

}


/* ==========================================================
   JUDUL
========================================================== */

.principal-section .section-header-row h2{

    margin:20px 0 0;

    font-size:42px;

    line-height:1.12;

    letter-spacing:-1.8px;

    font-weight:750;

    color:#172238;

}


.principal-section .section-header-row h2 span{

    color:#15549a;

}


/* ==========================================================
   HAPUS BUTTON PROFIL
========================================================== */

.principal-section .section-header-row .outline-button{

    display:none !important;

}


/* ==========================================================
   LAYOUT UTAMA
========================================================== */

.principal-feature{

    position:relative;

    display:grid;

    grid-template-columns:
        minmax(320px, 38%)
        minmax(0, 62%);

    align-items:center;

    gap:70px;

    width:100%;

    padding:0;

    margin:0;

    background:transparent;

    border:none;

    border-radius:0;

    box-shadow:none;

}


/* ==========================================================
   FOTO
========================================================== */

.principal-photo{

    position:relative;

    width:100%;

    height:570px;

    overflow:hidden;

    border-radius:8px;

    background:
        linear-gradient(
            145deg,
            #e7f0f8,
            #cbd9e7
        );

    box-shadow:
        0 25px 55px rgba(25,55,85,.14);

}


/* ==========================================================
   FOTO IMAGE
========================================================== */

.principal-photo img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center top;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1),
        filter .5s ease;

}


/* ==========================================================
   HOVER FOTO
========================================================== */

.principal-photo:hover img{

    transform:scale(1.035);

}


/* ==========================================================
   OVERLAY FOTO
========================================================== */

.principal-photo::before{

    content:"";

    position:absolute;

    z-index:2;

    left:0;
    right:0;
    bottom:0;

    height:48%;

    background:
        linear-gradient(
            to top,
            rgba(7,23,42,.78),
            rgba(7,23,42,.32) 45%,
            transparent
        );

    pointer-events:none;

}


/* ==========================================================
   NAMA DI ATAS FOTO
========================================================== */

.principal-photo::after{

    content:"Suhartono, S.Pd.";

    position:absolute;

    z-index:3;

    left:38px;

    bottom:58px;

    color:#ffffff;

    font-size:30px;

    line-height:1.15;

    font-weight:750;

    letter-spacing:-.7px;

    text-shadow:
        0 3px 12px rgba(0,0,0,.25);

    pointer-events:none;

}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.principal-placeholder{

    width:100%;
    height:100%;

    display:flex;

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

    background:
        linear-gradient(
            145deg,
            #e8f1f8,
            #c9d7e5
        );

    color:#7090ad;

    font-size:55px;

}


/* ==========================================================
   INFORMASI JABATAN DI FOTO
========================================================== */

.principal-photo .principal-position{

    position:absolute;

    z-index:4;

    left:38px;

    bottom:28px;

    color:#159bff;

    font-size:15px;

    font-weight:700;

    letter-spacing:.2px;

}


/* ==========================================================
   CONTENT KANAN
========================================================== */

.principal-content{

    position:relative;

    padding:35px 30px 30px 0;

    min-width:0;

}


/* ==========================================================
   QUOTE BESAR
========================================================== */

.principal-content::before{

    content:"“";

    position:absolute;

    top:-55px;

    right:10px;

    font-family:Georgia,serif;

    font-size:125px;

    line-height:1;

    font-weight:700;

    color:#dbeafa;

    opacity:.85;

    pointer-events:none;

}


/* ==========================================================
   LABEL
========================================================== */

.principal-content .principal-position{

    display:inline-flex;

    align-items:center;

    padding:9px 14px;

    margin-bottom:18px;

    border-radius:6px;

    background:#edf5fc;

    color:#14518b;

    font-size:11px;

    line-height:1;

    font-weight:800;

    letter-spacing:.8px;

    text-transform:uppercase;

}


/* ==========================================================
   NAMA KEPALA SEKOLAH
========================================================== */

.principal-content h3{

    margin:0;

    color:#182238;

    font-size:42px;

    line-height:1.12;

    letter-spacing:-1.7px;

    font-weight:750;

}


/* ==========================================================
   PERIODE
========================================================== */

.principal-content .principal-period{

    display:block;

    margin-top:9px;

    color:#94a2b5;

    font-size:13px;

    font-weight:600;

}


/* ==========================================================
   SAMBUTAN
========================================================== */

.principal-message{

    position:relative;

    margin-top:32px;

    padding:4px 0 4px 30px;

    border-left:4px solid #155aa0;

}


/* ==========================================================
   TEKS SAMBUTAN
========================================================== */

.principal-message p{

    margin:0;

    max-width:720px;

    color:#53657d;

    font-size:18px;

    line-height:1.75;

    font-weight:450;

    letter-spacing:.05px;

}


/* ==========================================================
   QUOTE MARK LAMA
========================================================== */

.principal-message .quote-mark{

    display:none !important;

}


/* ==========================================================
   NAMA BAWAH
========================================================== */

.principal-content .text-link{

    display:none !important;

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.principal-section .empty-state{

    padding:70px 30px;

    text-align:center;

    border-radius:16px;

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

    border:1px solid #e3ebf3;

    color:#718197;

}


/* ==========================================================
   RESPONSIVE LAPTOP
========================================================== */

@media (max-width:1200px){

    .principal-section{

        padding:95px 0 100px;

    }


    .principal-feature{

        grid-template-columns:
            minmax(300px, 40%)
            minmax(0, 60%);

        gap:50px;

    }


    .principal-photo{

        height:520px;

    }


    .principal-content h3{

        font-size:38px;

    }


    .principal-message p{

        font-size:17px;

    }

}


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

@media (max-width:992px){

    .principal-section{

        padding:80px 0 90px;

    }


    .principal-section .section-header-row{

        align-items:flex-start;

        margin-bottom:45px;

    }


    .principal-section .section-header-row h2{

        font-size:36px;

    }


    .principal-feature{

        grid-template-columns:1fr;

        gap:38px;

    }


    .principal-photo{

        height:520px;

        max-width:560px;

        margin:0 auto;

    }


    .principal-content{

        padding:10px 15px 20px;

    }


    .principal-content::before{

        right:0;

        top:-30px;

    }


    .principal-content h3{

        font-size:36px;

    }

}


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

@media (max-width:768px){

    .principal-section{

        padding:70px 0 80px;

    }


    .principal-section .section-header-row{

        display:block;

        margin-bottom:35px;

        text-align:left;

    }


    .principal-section .section-header-row h2{

        margin-top:16px;

        font-size:31px;

        letter-spacing:-1.1px;

    }


    .principal-feature{

        gap:28px;

    }


    .principal-photo{

        height:440px;

        border-radius:7px;

    }


    .principal-photo::after{

        left:25px;

        bottom:52px;

        font-size:25px;

    }


    .principal-photo .principal-position{

        left:25px;

        bottom:25px;

        font-size:13px;

    }


    .principal-content{

        padding:5px 5px 15px;

    }


    .principal-content::before{

        top:-25px;

        right:0;

        font-size:90px;

    }


    .principal-content .principal-position{

        font-size:10px;

        padding:8px 12px;

        margin-bottom:14px;

    }


    .principal-content h3{

        font-size:31px;

        letter-spacing:-1px;

    }


    .principal-message{

        margin-top:25px;

        padding-left:20px;

        border-left-width:3px;

    }


    .principal-message p{

        font-size:16px;

        line-height:1.7;

    }

}


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

@media (max-width:480px){

    .principal-section{

        padding:60px 0 70px;

    }


    .principal-photo{

        height:390px;

    }


    .principal-photo::after{

        font-size:23px;

    }


    .principal-content h3{

        font-size:28px;

    }


    .principal-message p{

        font-size:15px;

        line-height:1.65;

    }

}
/* ==========================================================
   SAMBUTAN KEPALA SEKOLAH
   MODERN • FORMAL • MINIMALIS
   TAMBAHKAN PALING BAWAH CSS LAMA
========================================================== */


/* ==========================================================
   SECTION UTAMA
========================================================== */

.principal-section{

    position:relative;

    padding:105px 0 115px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 8% 35%,
            rgba(30,136,229,.055) 0,
            rgba(30,136,229,.025) 120px,
            transparent 260px
        ),
        radial-gradient(
            circle at 92% 70%,
            rgba(21,91,155,.045) 0,
            rgba(21,91,155,.018) 130px,
            transparent 280px
        ),
        linear-gradient(
            180deg,
            #f7fafd 0%,
            #ffffff 52%,
            #f6f9fc 100%
        );

}


/* ==========================================================
   BERCAK HALUS
========================================================== */

.principal-section::before{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    left:-90px;
    top:130px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(28,126,190,.12) 1px,
            transparent 1.5px
        );

    background-size:18px 18px;

    opacity:.32;

    pointer-events:none;

}


/* ==========================================================
   BERCAK KANAN
========================================================== */

.principal-section::after{

    content:"";

    position:absolute;

    width:330px;
    height:330px;

    right:-150px;
    bottom:-100px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(21,82,143,.06),
            transparent 68%
        );

    pointer-events:none;

}


/* ==========================================================
   CONTAINER
========================================================== */

.principal-section .container{

    position:relative;

    z-index:2;

}


/* ==========================================================
   HEADER
========================================================== */

.principal-section .section-header-row{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:68px;

}


/* ==========================================================
   LABEL
========================================================== */

.principal-section .section-kicker{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:8px 17px;

    border-radius:50px;

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

    border:1px solid rgba(20,92,153,.08);

    color:#1376bd;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.4px;

    line-height:1;

    box-shadow:
        0 7px 22px rgba(21,71,111,.055);

}


/* ==========================================================
   TITIK LABEL
========================================================== */

.principal-section .section-kicker::before{

    content:"";

    width:7px;
    height:7px;

    flex:0 0 7px;

    border-radius:50%;

    background:#198ed5;

    box-shadow:
        0 0 0 4px rgba(25,142,213,.09);

}


/* ==========================================================
   JUDUL UTAMA
========================================================== */

.principal-section
.section-header-row h2{

    margin:18px 0 0;

    color:#182235;

    font-size:38px;

    line-height:1.15;

    font-weight:700;

    letter-spacing:-1.4px;

}


/* ==========================================================
   WARNA "KEPALA SEKOLAH"
========================================================== */

.principal-section
.section-header-row h2 span{

    color:#15558f;

}


/* ==========================================================
   HAPUS TOMBOL PROFIL
========================================================== */

.principal-section
.section-header-row
.outline-button{

    display:none !important;

}


/* ==========================================================
   AREA FOTO + SAMBUTAN
========================================================== */

.principal-feature{

    position:relative;

    display:grid;

    grid-template-columns:
        minmax(320px, 390px)
        minmax(0, 1fr);

    align-items:center;

    gap:70px;

    width:100%;

    background:transparent !important;

    border:none !important;

    border-radius:0 !important;

    box-shadow:none !important;

    padding:0 !important;

}


/* ==========================================================
   FOTO
========================================================== */

.principal-photo{

    position:relative;

    width:100%;

    height:500px;

    overflow:hidden;

    border-radius:8px;

    background:#eaf1f7;

    box-shadow:
        0 22px 45px rgba(24,61,94,.13);

}


/* ==========================================================
   GARIS BERDIRI DI SISI FOTO
========================================================== */

.principal-photo::before{

    content:"";

    position:absolute;

    z-index:10;

    width:4px;

    height:105px;

    left:-14px;

    top:50%;

    transform:translateY(-50%);

    border-radius:4px;

    background:#17639e;

    box-shadow:
        0 8px 22px rgba(23,99,158,.18);

}


/* ==========================================================
   FOTO IMAGE
========================================================== */

.principal-photo img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center top;

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

}


/* ==========================================================
   GERAK HALUS FOTO
========================================================== */

.principal-feature:hover
.principal-photo img{

    transform:scale(1.025);

}


/* ==========================================================
   GRADIENT FOTO
========================================================== */

.principal-photo::after{

    content:"";

    position:absolute;

    z-index:2;

    left:0;
    right:0;
    bottom:0;

    height:35%;

    background:
        linear-gradient(
            to top,
            rgba(9,28,48,.68),
            rgba(9,28,48,.22),
            transparent
        );

    pointer-events:none;

}


/* ==========================================================
   NAMA DI ATAS FOTO
========================================================== */

.principal-photo .principal-position{

    position:absolute;

    z-index:5;

    left:28px;

    bottom:27px;

    margin:0;

    color:#ffffff;

    font-size:14px;

    font-weight:600;

    letter-spacing:.2px;

}


/* ==========================================================
   INFORMASI KANAN
========================================================== */

.principal-content{

    position:relative;

    padding:10px 35px 10px 0;

}


/* ==========================================================
   QUOTE BESAR
========================================================== */

.principal-content::before{

    content:"“";

    position:absolute;

    right:0;

    top:-45px;

    color:#dcebf7;

    font-family:Georgia,serif;

    font-size:105px;

    font-weight:700;

    line-height:1;

    opacity:.75;

    pointer-events:none;

}


/* ==========================================================
   LABEL KEPALA SEKOLAH
========================================================== */

.principal-content
.principal-position{

    display:inline-flex;

    align-items:center;

    padding:7px 12px;

    margin-bottom:15px;

    border-radius:5px;

    background:#edf5fb;

    color:#155487;

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* ==========================================================
   NAMA
========================================================== */

.principal-content h3{

    margin:0;

    color:#172236;

    font-size:35px;

    line-height:1.15;

    font-weight:700;

    letter-spacing:-1.1px;

    animation:
        principalNameIn
        .8s
        ease both;

}


/* ==========================================================
   ANIMASI NAMA
========================================================== */

@keyframes principalNameIn{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================================
   PERIODE
========================================================== */

.principal-content
.principal-period{

    display:block;

    margin-top:7px;

    color:#8998aa;

    font-size:12px;

    font-weight:600;

}


/* ==========================================================
   SAMBUTAN
========================================================== */

.principal-message{

    position:relative;

    margin-top:27px;

    padding:3px 0 3px 25px;

    border-left:3px solid #17639e;

    animation:
        principalMessageIn
        1s
        .15s
        ease both;

}


/* ==========================================================
   ANIMASI SAMBUTAN
========================================================== */

@keyframes principalMessageIn{

    from{

        opacity:0;

        transform:translateX(15px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/* ==========================================================
   TEKS SAMBUTAN
========================================================== */

.principal-message p{

    margin:0;

    max-width:730px;

    color:#5d6e82;

    font-size:16px;

    line-height:1.8;

    font-weight:400;

    letter-spacing:.05px;

}


/* ==========================================================
   MATIKAN QUOTE LAMA
========================================================== */

.principal-message
.quote-mark{

    display:none !important;

}


/* ==========================================================
   MATIKAN SELENGKAPNYA
========================================================== */

.principal-content
.text-link{

    display:none !important;

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.principal-section
.empty-state{

    border:0 !important;

    border-radius:0 !important;

    background:transparent !important;

    box-shadow:none !important;

}


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

@media (max-width:992px){

    .principal-section{

        padding:85px 0 95px;

    }


    .principal-section
    .section-header-row{

        margin-bottom:50px;

    }


    .principal-section
    .section-header-row h2{

        font-size:34px;

    }


    .principal-feature{

        grid-template-columns:
            320px
            minmax(0,1fr);

        gap:45px;

    }


    .principal-photo{

        height:450px;

    }


    .principal-content{

        padding-right:15px;

    }


    .principal-content h3{

        font-size:31px;

    }


    .principal-message p{

        font-size:15px;

        line-height:1.75;

    }

}


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

@media (max-width:768px){

    .principal-section{

        padding:70px 0 80px;

    }


    .principal-section
    .section-header-row{

        margin-bottom:42px;

    }


    .principal-section
    .section-header-row h2{

        font-size:30px;

        letter-spacing:-.9px;

    }


    .principal-feature{

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:35px;

    }


    .principal-photo{

        width:100%;

        max-width:430px;

        height:430px;

        margin:0 auto;

    }


    .principal-photo::before{

        left:-8px;

        height:75px;

    }


    .principal-content{

        padding:0 8px;

    }


    .principal-content::before{

        top:-30px;

        right:0;

        font-size:85px;

    }


    .principal-content h3{

        font-size:29px;

    }


    .principal-message{

        margin-top:22px;

        padding-left:18px;

    }


    .principal-message p{

        font-size:15px;

        line-height:1.7;

    }

}


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

@media (max-width:480px){

    .principal-section{

        padding:60px 0 70px;

    }


    .principal-section
    .section-header-row h2{

        font-size:27px;

    }


    .principal-section
    .section-kicker{

        font-size:10px;

        letter-spacing:1.1px;

        padding:8px 13px;

    }


    .principal-photo{

        height:390px;

    }


    .principal-content h3{

        font-size:27px;

    }


    .principal-message p{

        font-size:14px;

        line-height:1.7;

    }

}
/* ==========================================================
   SAMBUTAN KEPALA SEKOLAH
   STYLE MODERN - RAPI - RATA KANAN
   TAMBAHKAN PALING BAWAH CSS LAMA
========================================================== */

.principal-section .principal-content{

    position:relative;

    padding:30px 35px 30px 38px;

    max-width:720px;

    text-align:right;

}


/* ==========================================================
   JABATAN
========================================================== */

.principal-section .principal-position{

    display:inline-block;

    margin-bottom:14px;

    padding:6px 12px;

    border-radius:4px;

    background:#eef6fc;

    color:#17649a;

    font-size:11px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* ==========================================================
   NAMA KEPALA SEKOLAH
========================================================== */

.principal-section .principal-content h3{

    margin:0;

    color:#173f63;

    font-size:clamp(30px,3vw,42px);

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1px;

}


/* ==========================================================
   PERIODE
========================================================== */

.principal-section .principal-period{

    display:block;

    margin-top:8px;

    color:#8497aa;

    font-size:13px;

    font-weight:600;

}


/* ==========================================================
   GARIS AKSEN
========================================================== */

.principal-section .principal-content::after{

    content:"";

    display:block;

    width:70px;

    height:3px;

    margin:22px 0 25px auto;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            #8bcdf0,
            #168bd0
        );

}


/* ==========================================================
   SAMBUTAN
========================================================== */

.principal-section .principal-message{

    margin:0;

    padding:0;

    border:none;

}


/* HAPUS QUOTE */

.principal-section .quote-mark{

    display:none !important;

}


/* ==========================================================
   NARASI
========================================================== */

.principal-section .principal-message p{

    margin:0;

    color:#60778c;

    font-size:16px;

    line-height:1.9;

    font-weight:500;

    text-align:right;

    letter-spacing:.1px;

}


/* ==========================================================
   BUAT PARAGRAF LEBIH TERBACA
========================================================== */

.principal-section .principal-message p{

    max-width:680px;

    margin-left:auto;

}


/* ==========================================================
   HILANGKAN LINK SELENGKAPNYA
========================================================== */

.principal-section .text-link{

    display:none !important;

}


/* ==========================================================
   FOTO
========================================================== */

.principal-section .principal-photo{

    position:relative;

    height:520px;

    overflow:hidden;

    border-radius:4px;

    background:#edf5fa;

    box-shadow:
        0 20px 45px rgba(20,70,110,.12);

}


/* ==========================================================
   AKSEN FOTO
========================================================== */

.principal-section .principal-photo::before{

    content:"";

    position:absolute;

    z-index:3;

    top:0;

    left:0;

    width:85px;

    height:4px;

    background:#168bd0;

}


.principal-section .principal-photo::after{

    content:"";

    position:absolute;

    z-index:3;

    right:0;

    bottom:0;

    width:65px;

    height:4px;

    background:#168bd0;

}


/* ==========================================================
   FOTO
========================================================== */

.principal-section .principal-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .6s ease;

}


.principal-section .principal-photo:hover img{

    transform:scale(1.025);

}


/* ==========================================================
   ANIMASI CONTENT
========================================================== */

.principal-section .principal-content{

    animation:
        principalTextIn .8s ease both;

}


@keyframes principalTextIn{

    from{

        opacity:0;

        transform:translateX(35px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/* ==========================================================
   ANIMASI FOTO
========================================================== */

.principal-section .principal-photo{

    animation:
        principalImageIn .8s ease both;

}


@keyframes principalImageIn{

    from{

        opacity:0;

        transform:translateX(-30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


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

@media (max-width:992px){

    .principal-section .principal-content{

        padding:
            10px
            20px
            20px
            25px;

        text-align:left;

    }


    .principal-section .principal-content::after{

        margin-left:0;

        margin-right:auto;

    }


    .principal-section .principal-message p{

        text-align:left;

    }

}


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

@media (max-width:768px){

    .principal-section .principal-content{

        padding:
            5px
            10px
            10px
            18px;

        text-align:left;

    }


    .principal-section .principal-content h3{

        font-size:30px;

    }


    .principal-section .principal-message p{

        font-size:15px;

        line-height:1.8;

        text-align:left;

    }


    .principal-section .principal-photo{

        height:400px;

    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width:480px){

    .principal-section .principal-content h3{

        font-size:27px;

    }


    .principal-section .principal-message p{

        font-size:14px;

        line-height:1.75;

    }


    .principal-section .principal-photo{

        height:350px;

    }

}
/* ==========================================================
   SAMBUTAN KEPALA SEKOLAH
   MODERN FORMAL - GOVERNMENT STYLE
   TAMBAHKAN DI PALING BAWAH CSS LAMA
========================================================== */

.principal-section{
    position:relative;
    overflow:hidden;
    padding:95px 0 110px;
    background:
        radial-gradient(
            circle at 12% 30%,
            rgba(21,145,220,.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 70%,
            rgba(14,78,145,.06),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #ffffff 48%,
            #f5f9fd 100%
        );
}


/* ==========================================================
   AKSEN BACKGROUND
========================================================== */

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

    width:420px;
    height:420px;

    right:-180px;
    top:80px;

    border:1px solid rgba(18,112,180,.09);

    border-radius:50%;

    animation:
        principalOrbit 12s linear infinite;

    pointer-events:none;
}


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

    width:280px;
    height:280px;

    left:-160px;
    bottom:20px;

    border:1px solid rgba(18,112,180,.07);

    border-radius:50%;

    animation:
        principalOrbitReverse 16s linear infinite;

    pointer-events:none;
}


/* ==========================================================
   HEADER
========================================================== */

.principal-section .section-header-row{
    position:relative;
    z-index:2;

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

    text-align:center;

    margin-bottom:65px;
}


.principal-section .section-header-row > div{
    width:100%;
}


/* HILANGKAN TOMBOL PROFIL LAMA */

.principal-section .section-header-row > a{
    display:none !important;
}


/* ==========================================================
   KICKER
========================================================== */

.principal-section .section-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:8px 17px;

    border-radius:30px;

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

    border:1px solid rgba(22,115,184,.10);

    box-shadow:
        0 8px 25px rgba(17,70,110,.06);

    color:#1478bd;

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

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


.principal-section .section-kicker::before{
    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:#1495dc;

    box-shadow:
        0 0 0 5px rgba(20,149,220,.10);

    animation:
        principalPulse 2s ease-in-out infinite;
}


/* ==========================================================
   JUDUL
========================================================== */

.principal-section .section-header-row h2{
    margin:18px 0 0;

    font-size:42px;
    line-height:1.15;

    letter-spacing:-1.4px;

    font-weight:750;

    color:#182337;
}


.principal-section .section-header-row h2 span{
    color:#155b91;
}


/* ==========================================================
   GARIS JUDUL
========================================================== */

.principal-section .section-header-row h2::after{
    content:"";

    display:block;

    width:58px;
    height:3px;

    margin:20px auto 0;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            #168fd2,
            #5ab8e6
        );

    animation:
        principalLine 3s ease-in-out infinite;
}


/* ==========================================================
   AREA UTAMA
========================================================== */

.principal-section .principal-feature{
    position:relative;
    z-index:3;

    display:grid;

    grid-template-columns:
        minmax(300px, 43%)
        minmax(0, 57%);

    align-items:center;

    gap:70px;

    max-width:1180px;

    margin:0 auto;

    padding:0;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;
}


/* ==========================================================
   FOTO
========================================================== */

.principal-section .principal-photo{
    position:relative;

    width:100%;

    min-height:470px;

    display:flex;

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

    background:transparent !important;

    overflow:visible !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;
}


/* BINGKAI FOTO */

.principal-section .principal-photo::before{
    content:"";

    position:absolute;

    width:calc(100% - 26px);
    height:calc(100% - 26px);

    left:13px;
    top:13px;

    border-radius:24px;

    border:1px solid rgba(21,105,163,.18);

    background:
        linear-gradient(
            145deg,
            rgba(21,139,204,.10),
            rgba(255,255,255,.2)
        );

    transform:rotate(-2deg);

    z-index:0;
}


/* AKSEN BINGKAI ATAS */

.principal-section .principal-photo::after{
    content:"";

    position:absolute;

    width:90px;
    height:4px;

    left:0;
    top:0;

    border-radius:10px;

    background:#168fd2;

    box-shadow:
        0 10px 0 rgba(22,143,210,.13);

    z-index:5;

    animation:
        principalAccent 3s ease-in-out infinite;
}


/* FOTO SEBENARNYA */

.principal-section .principal-photo img{
    position:relative;

    z-index:2;

    display:block;

    width:100%;
    height:470px;

    object-fit:cover;

    border-radius:18px;

    border:7px solid rgba(255,255,255,.96);

    background:#eef5fa;

    box-shadow:
        0 22px 55px rgba(20,64,100,.14),
        0 5px 18px rgba(20,64,100,.08);

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


.principal-section .principal-photo:hover img{
    transform:translateY(-5px);

    box-shadow:
        0 28px 65px rgba(20,64,100,.18),
        0 8px 22px rgba(20,64,100,.10);
}


/* ==========================================================
   AKSEN KECIL DI BAWAH FOTO
========================================================== */

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

    width:100%;
    height:470px;

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

    border-radius:18px;

    border:7px solid #fff;

    background:
        linear-gradient(
            145deg,
            #eaf4fb,
            #d8e8f4
        );

    box-shadow:
        0 22px 55px rgba(20,64,100,.13);
}


.principal-section
.principal-photo
.principal-placeholder i{
    font-size:70px;
    color:#78afd1;

    animation:
        principalFloat 3s ease-in-out infinite;
}


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

.principal-section .principal-content{
    position:relative;

    padding:20px 0 20px 34px;

    border-left:3px solid #168fd2;
}


/* AKSEN QUOTE */

.principal-section .principal-content::before{
    content:"“";

    position:absolute;

    left:-13px;
    top:-38px;

    font-family:Georgia,serif;

    font-size:86px;
    line-height:1;

    font-weight:bold;

    color:#dcecf7;

    background:#fff;

    height:48px;

    animation:
        principalQuote 4s ease-in-out infinite;
}


/* ==========================================================
   JABATAN
========================================================== */

.principal-section .principal-position{
    display:inline-block;

    margin-bottom:15px;

    padding:7px 13px;

    border-radius:6px;

    background:#edf6fc;

    color:#12588b;

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

    letter-spacing:.8px;

    text-transform:uppercase;
}


/* ==========================================================
   NAMA
========================================================== */

.principal-section .principal-content h3{
    margin:0 0 6px;

    color:#173d61;

    font-size:39px;

    line-height:1.15;

    letter-spacing:-1px;

    font-weight:750;
}


/* ==========================================================
   PERIODE
========================================================== */

.principal-section .principal-period{
    display:block;

    margin-bottom:25px;

    color:#8296a9;

    font-size:13px;

    font-weight:600;
}


/* ==========================================================
   SAMBUTAN
========================================================== */

.principal-section .principal-message{
    position:relative;

    margin:0;

    padding:0 0 0 25px;

    border-left:3px solid #1594d5;
}


/* HAPUS QUOTE LAMA */

.principal-section .quote-mark{
    display:none !important;
}


/* NARASI RATA KANAN KIRI */

.principal-section .principal-message p{
    margin:0;

    color:#5d7186;

    font-size:17px;

    line-height:1.95;

    font-weight:500;

    text-align:justify;

    text-justify:inter-word;
}


/* ==========================================================
   NAMA DI BAWAH SAMBUTAN
========================================================== */

.principal-section .principal-content .text-link{
    display:none !important;
}


/* ==========================================================
   AKSEN GARIS BAWAH
========================================================== */

.principal-section .principal-message::after{
    content:"";

    display:block;

    width:50px;
    height:3px;

    margin-top:25px;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            #1594d5,
            #79c5e8
        );

    animation:
        principalLine 3s ease-in-out infinite;
}


/* ==========================================================
   ICON / AKSEN BERGERAK
========================================================== */

.principal-section .principal-content::after{
    content:"✦";

    position:absolute;

    right:15px;
    bottom:-5px;

    font-size:22px;

    color:rgba(21,143,210,.35);

    animation:
        principalStar 3s ease-in-out infinite;
}


/* ==========================================================
   ANIMASI
========================================================== */

@keyframes principalPulse{

    0%,100%{
        transform:scale(1);
        opacity:.75;
    }

    50%{
        transform:scale(1.25);
        opacity:1;
    }

}


@keyframes principalFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

}


@keyframes principalQuote{

    0%,100%{
        transform:translateY(0);
        opacity:.65;
    }

    50%{
        transform:translateY(-6px);
        opacity:1;
    }

}


@keyframes principalStar{

    0%,100%{
        transform:translateY(0) rotate(0deg);
        opacity:.35;
    }

    50%{
        transform:translateY(-8px) rotate(15deg);
        opacity:.8;
    }

}


@keyframes principalLine{

    0%,100%{
        transform:scaleX(1);
        transform-origin:left;
    }

    50%{
        transform:scaleX(1.3);
        transform-origin:left;
    }

}


@keyframes principalAccent{

    0%,100%{
        width:70px;
    }

    50%{
        width:105px;
    }

}


@keyframes principalOrbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


@keyframes principalOrbitReverse{

    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }

}


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

@media (max-width:992px){

    .principal-section{
        padding:80px 0 90px;
    }

    .principal-section .section-header-row{
        margin-bottom:50px;
    }

    .principal-section .section-header-row h2{
        font-size:36px;
    }

    .principal-section .principal-feature{
        grid-template-columns:1fr;

        gap:45px;

        max-width:650px;
    }

    .principal-section .principal-photo{
        min-height:430px;
    }

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

    .principal-section .principal-content{
        padding-left:28px;
    }

}


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

@media (max-width:768px){

    .principal-section{
        padding:65px 0 75px;
    }

    .principal-section .section-header-row{
        margin-bottom:40px;
    }

    .principal-section .section-kicker{
        font-size:10px;
        padding:7px 13px;
    }

    .principal-section .section-header-row h2{
        font-size:29px;
        letter-spacing:-.7px;
    }

    .principal-section .principal-feature{
        display:block;

        width:100%;

        padding:0 8px;
    }

    .principal-section .principal-photo{
        min-height:360px;

        margin-bottom:38px;
    }

    .principal-section .principal-photo img,
    .principal-section
    .principal-photo
    .principal-placeholder{
        height:360px;
    }

    .principal-section .principal-content{
        padding:
            18px
            0
            18px
            22px;
    }

    .principal-section .principal-content h3{
        font-size:30px;
    }

    .principal-section .principal-message{
        padding-left:18px;
    }

    .principal-section .principal-message p{
        font-size:15px;
        line-height:1.8;

        text-align:justify;
    }

    .principal-section .principal-content::before{
        font-size:65px;
        top:-28px;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width:480px){

    .principal-section{
        padding:55px 0 65px;
    }

    .principal-section .section-header-row h2{
        font-size:26px;
    }

    .principal-section .principal-photo{
        min-height:320px;
    }

    .principal-section .principal-photo img,
    .principal-section
    .principal-photo
    .principal-placeholder{
        height:320px;
    }

    .principal-section .principal-content h3{
        font-size:27px;
    }

    .principal-section .principal-message p{
        font-size:14px;
        line-height:1.75;
    }

}
/* ==========================================================
   PART TAMBAHAN
   SAMBUTAN KEPALA SEKOLAH
   BACKGROUND + BINGKAI FOTO FORMAL
   JANGAN HAPUS CSS LAMA
========================================================== */


/* ==========================================================
   BACKGROUND PAGE
========================================================== */

.principal-section{
    position:relative !important;
    overflow:hidden !important;

    background:
        linear-gradient(
            135deg,
            rgba(247,251,255,.98) 0%,
            rgba(255,255,255,.97) 45%,
            rgba(239,247,253,.98) 100%
        ) !important;
}


/* pola cahaya kanan */

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

    position:absolute;

    width:650px;
    height:650px;

    right:-260px;
    top:-180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(21,137,205,.10) 0%,
            rgba(21,137,205,.045) 35%,
            transparent 68%
        );

    pointer-events:none;

    animation:
        principalBgFloat 10s ease-in-out infinite;
}


/* pola lingkaran kiri */

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

    position:absolute;

    width:430px;
    height:430px;

    left:-250px;
    bottom:-190px;

    border-radius:50%;

    border:
        1px solid
        rgba(21,137,205,.08);

    box-shadow:
        0 0 0 35px rgba(21,137,205,.025),
        0 0 0 70px rgba(21,137,205,.018);

    pointer-events:none;

    animation:
        principalBgRotate 18s linear infinite;
}


/* ==========================================================
   POLA DOT FORMAL
========================================================== */

.principal-section .container{
    position:relative;
    z-index:5;
}


.principal-section .container::before{
    content:"";

    position:absolute;

    width:130px;
    height:130px;

    left:-65px;
    top:120px;

    background-image:
        radial-gradient(
            circle,
            rgba(18,137,205,.16) 2px,
            transparent 2.5px
        );

    background-size:18px 18px;

    opacity:.65;

    pointer-events:none;

    animation:
        principalDots 7s ease-in-out infinite;
}


/* ==========================================================
   BINGKAI FOTO UTAMA
========================================================== */

.principal-section .principal-photo{
    position:relative !important;

    isolation:isolate;

    overflow:visible !important;
}


/* lapisan bingkai belakang */

.principal-section .principal-photo::before{
    content:"";

    position:absolute;

    z-index:-2;

    top:22px;
    left:22px;

    width:100%;
    height:100%;

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            #d9edf9 0%,
            #edf7fc 48%,
            #c9e4f3 100%
        );

    border:
        1px solid
        rgba(21,115,175,.20);

    transform:
        rotate(2.2deg);

    box-shadow:
        0 18px 45px
        rgba(24,83,120,.10);

    transition:
        transform .5s ease;
}


/* bingkai kedua */

.principal-section .principal-photo::after{
    content:"";

    position:absolute;

    z-index:-1;

    top:-10px;
    left:-10px;

    width:100%;
    height:100%;

    border-radius:22px;

    border:
        2px solid
        rgba(20,142,207,.38);

    background:
        linear-gradient(
            135deg,
            rgba(20,142,207,.06),
            transparent 45%
        );

    transform:
        rotate(-1.5deg);

    transition:
        transform .5s ease;
}


/* ==========================================================
   FOTO
========================================================== */

.principal-section .principal-photo img{
    position:relative !important;

    z-index:3 !important;

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

    object-fit:cover !important;

    display:block !important;

    border-radius:18px !important;

    border:
        6px solid
        rgba(255,255,255,.98) !important;

    outline:
        1px solid
        rgba(17,102,157,.18);

    background:#edf5fa;

    box-shadow:
        0 20px 50px
        rgba(19,69,104,.16),
        0 4px 15px
        rgba(19,69,104,.08);

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


/* hover halus */

.principal-section .principal-photo:hover::before{
    transform:
        rotate(3.5deg)
        translate(3px,3px);
}


.principal-section .principal-photo:hover::after{
    transform:
        rotate(-2.5deg)
        translate(-3px,-3px);
}


.principal-section .principal-photo:hover img{
    transform:
        translateY(-4px);

    box-shadow:
        0 28px 60px
        rgba(19,69,104,.20);
}


/* ==========================================================
   AKSEN GARIS FOTO
========================================================== */

.principal-section .principal-photo .photo-accent{
    display:none;
}


/* garis atas */

.principal-section .principal-photo img{
    --photo-accent-color:#148dcc;
}


/* gunakan pseudo pada parent */

.principal-section .principal-photo{
    border-top:
        5px solid
        #168fd0;

    border-left:
        0 solid transparent;
}


/* ==========================================================
   AKSEN POJOK FOTO
========================================================== */

.principal-section .principal-photo{
    clip-path:none !important;
}


.principal-section .principal-photo .principal-placeholder{
    position:relative;

    z-index:3;

    width:100%;
    height:470px;

    border-radius:18px;

    border:
        6px solid #fff;

    outline:
        1px solid
        rgba(17,102,157,.18);

    background:
        linear-gradient(
            145deg,
            #e8f3fa,
            #d9eaf5
        );

    box-shadow:
        0 20px 50px
        rgba(19,69,104,.14);
}


/* ==========================================================
   AKSEN QUOTE
========================================================== */

.principal-section .principal-content::before{
    content:"“" !important;

    color:
        rgba(20,143,207,.13) !important;

    font-size:95px !important;

    top:-45px !important;

    left:-17px !important;

    background:transparent !important;

    z-index:-1;
}


/* ==========================================================
   KONTEN LEBIH BERSIH
========================================================== */

.principal-section .principal-content{
    position:relative;

    padding:
        25px
        0
        25px
        35px !important;

    border-left:
        3px solid
        #1595d5 !important;

    background:transparent !important;
}


/* ==========================================================
   NARASI RATA KANAN KIRI
========================================================== */

.principal-section .principal-message p{
    text-align:justify !important;

    text-justify:inter-word !important;

    font-size:16px !important;

    line-height:1.9 !important;

    color:#60778c !important;

    font-weight:500 !important;

    max-width:720px;

    margin:0 !important;
}


/* ==========================================================
   NAMA KEPALA SEKOLAH
========================================================== */

.principal-section .principal-content h3{
    font-size:38px !important;

    line-height:1.15 !important;

    color:#174d78 !important;

    margin-bottom:7px !important;

    letter-spacing:-.8px !important;
}


/* ==========================================================
   LABEL KEPALA SEKOLAH
========================================================== */

.principal-section .principal-position{
    background:
        #edf7fc !important;

    border:
        1px solid
        rgba(20,142,207,.10);

    color:
        #135b8d !important;

    border-radius:5px !important;

    padding:
        7px 12px !important;
}


/* ==========================================================
   PERIODE
========================================================== */

.principal-section .principal-period{
    color:#8a9cac !important;

    font-size:13px !important;

    margin-bottom:23px !important;
}


/* ==========================================================
   ICON BERGERAK
========================================================== */

.principal-section .principal-content::after{
    content:"✦" !important;

    right:20px !important;
    bottom:0 !important;

    color:
        rgba(20,142,207,.35) !important;

    font-size:20px !important;

    animation:
        principalIconMove 3s ease-in-out infinite !important;
}


/* ==========================================================
   GARIS BAWAH SAMBUTAN
========================================================== */

.principal-section .principal-message::after{
    width:58px !important;

    height:3px !important;

    margin-top:24px !important;

    background:
        linear-gradient(
            90deg,
            #138fd0,
            #7bc7e8
        ) !important;

    border-radius:10px;
}


/* ==========================================================
   ANIMASI BACKGROUND
========================================================== */

@keyframes principalBgFloat{

    0%,100%{
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    50%{
        transform:
            translate3d(-25px,20px,0)
            scale(1.06);
    }

}


@keyframes principalBgRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


@keyframes principalDots{

    0%,100%{
        transform:
            translateY(0);
        opacity:.45;
    }

    50%{
        transform:
            translateY(-15px);
        opacity:.8;
    }

}


@keyframes principalIconMove{

    0%,100%{
        transform:
            translateY(0)
            rotate(0deg);

        opacity:.3;
    }

    50%{
        transform:
            translateY(-8px)
            rotate(12deg);

        opacity:.8;
    }

}


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

@media (max-width:992px){

    .principal-section{
        padding:80px 0 90px !important;
    }

    .principal-section .principal-feature{
        gap:48px !important;
    }

    .principal-section .principal-photo{
        max-width:620px;
        margin:0 auto;
    }

}


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

@media (max-width:768px){

    .principal-section{
        padding:65px 0 75px !important;
    }

    .principal-section .container::before{
        left:-80px;
        top:80px;
        opacity:.4;
    }

    .principal-section .principal-photo{
        width:calc(100% - 15px);
        margin:
            0 auto 35px;
    }

    .principal-section .principal-photo img{
        height:350px !important;
    }

    .principal-section .principal-photo .principal-placeholder{
        height:350px;
    }

    .principal-section .principal-content{
        padding-left:23px !important;
    }

    .principal-section .principal-content h3{
        font-size:30px !important;
    }

    .principal-section .principal-message p{
        font-size:14px !important;
        line-height:1.8 !important;
    }

}


/* ==========================================================
   HP SANGAT KECIL
========================================================== */

@media (max-width:480px){

    .principal-section .principal-photo{
        width:calc(100% - 8px);
    }

    .principal-section .principal-photo img{
        height:320px !important;
    }

    .principal-section .principal-photo .principal-placeholder{
        height:320px;
    }

    .principal-section .principal-content h3{
        font-size:27px !important;
    }

}
/* ==========================================================
   PART 1
   SAMBUTAN KEPALA SEKOLAH
   MODERN GOVERNMENT SCHOOL STYLE
   CSS TAMBAHAN - JANGAN HAPUS CSS LAMA
========================================================== */


/* ==========================================================
   PAGE BACKGROUND
========================================================== */

.principal-section{

    position:relative;

    padding:110px 0 120px;

    overflow:hidden;

    background:

        linear-gradient(
            135deg,
            rgba(247,251,255,.98),
            rgba(235,245,255,.94)
        );

}


/* background pattern */

.principal-section::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    left:-330px;
    top:-220px;

    border-radius:50%;

    border:2px solid rgba(30,118,190,.08);

    box-shadow:

        0 0 0 55px rgba(30,118,190,.025),
        0 0 0 110px rgba(30,118,190,.018);

    pointer-events:none;

}


/* bercak titik kiri */

.principal-section::after{

    content:"";

    position:absolute;

    width:170px;
    height:170px;

    left:0;
    top:150px;

    opacity:.55;

    background-image:

        radial-gradient(
            circle,
            rgba(25,145,215,.20) 2px,
            transparent 2.5px
        );

    background-size:22px 22px;

    pointer-events:none;

}


/* ==========================================================
   TAMBAHAN BACKGROUND KANAN
========================================================== */

.principal-section .container{

    position:relative;

    z-index:2;

}


.principal-section .container::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-230px;
    bottom:-180px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(20,125,205,.10) 0%,
            rgba(20,125,205,.04) 42%,
            transparent 72%
        );

    pointer-events:none;

}


/* ==========================================================
   HEADER
========================================================== */

.principal-section .section-header-row{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:72px;

}


.principal-section .section-kicker{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-bottom:20px;

    padding:9px 18px;

    border-radius:30px;

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

    border:1px solid rgba(30,118,190,.08);

    box-shadow:

        0 8px 25px rgba(15,70,110,.07);

    color:#0878c9;

    font-size:13px;

    font-weight:800;

    letter-spacing:1.4px;

}


/* titik kecil */

.principal-section .section-kicker::before{

    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:#168bd2;

    box-shadow:

        0 0 0 5px rgba(22,139,210,.10);

}


/* judul */

.principal-section .section-header-row h2{

    margin:0;

    font-size:clamp(
        34px,
        4vw,
        52px
    );

    line-height:1.08;

    font-weight:800;

    letter-spacing:-1.8px;

    color:#17243a;

}


.principal-section .section-header-row h2 span{

    color:#12588d;

}


/* garis bawah */

.principal-section .section-header-row h2::after{

    content:"";

    display:block;

    width:70px;
    height:4px;

    margin:24px auto 0;

    border-radius:20px;

    background:

        linear-gradient(
            90deg,
            #148fd3,
            #5db9e7
        );

}


/* ==========================================================
   HILANGKAN BUTTON PROFIL LAMA
========================================================== */

.principal-section .section-header-row .outline-button{

    display:none !important;

}


/* ==========================================================
   AREA UTAMA
========================================================== */

.principal-feature{

    position:relative;

    display:grid;

    grid-template-columns:
        360px
        minmax(0,1fr);

    align-items:center;

    gap:80px;

    max-width:1160px;

    margin:0 auto;

    padding:0;

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

}


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

.principal-photo{

    position:relative;

    width:100%;

    max-width:330px;

    aspect-ratio:3 / 4;

    margin:auto;

    padding:9px;

    background:#fff;

    border-radius:20px;

    border:1px solid rgba(19,103,163,.16);

    box-shadow:

        0 22px 50px rgba(20,75,110,.14);

    z-index:2;

}


/* foto */

.principal-photo img{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center top;

    border-radius:13px;

}


/* ==========================================================
   BINGKAI AKSEN BIRU
========================================================== */

.principal-photo::before{

    content:"";

    position:absolute;

    left:-10px;
    top:-10px;

    width:82px;
    height:6px;

    border-radius:10px;

    background:#138bd0;

    z-index:5;

}


/* ==========================================================
   BINGKAI AKSEN EMAS
========================================================== */

.principal-photo::after{

    content:"";

    position:absolute;

    right:-11px;
    bottom:-11px;

    width:78px;
    height:6px;

    border-radius:10px;

    background:#e7b83c;

    z-index:5;

}


/* ==========================================================
   AKSEN KOTAK BIRU
========================================================== */

.principal-photo{

    box-sizing:border-box;

}


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

.principal-content{

    position:relative;

    padding-left:42px;

}


/* garis vertikal */

.principal-content::before{

    content:"";

    position:absolute;

    left:0;
    top:8px;
    bottom:8px;

    width:4px;

    border-radius:10px;

    background:

        linear-gradient(
            180deg,
            #1595d7,
            #3f8fc1
        );

}


/* ==========================================================
   LABEL JABATAN
========================================================== */

.principal-position{

    display:inline-flex;

    align-items:center;

    padding:8px 15px;

    border-radius:7px;

    background:#edf6fd;

    color:#12598c;

    font-size:12px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* ==========================================================
   NAMA
========================================================== */

.principal-content h3{

    margin:18px 0 8px;

    color:#174d78;

    font-size:clamp(
        34px,
        4vw,
        48px
    );

    line-height:1.08;

    font-weight:800;

    letter-spacing:-1.5px;

}


/* ==========================================================
   PERIODE
========================================================== */

.principal-period{

    display:block;

    margin-bottom:30px;

    color:#8297aa;

    font-size:14px;

    font-weight:700;

}


/* ==========================================================
   SAMBUTAN
========================================================== */

.principal-message{

    position:relative;

    max-width:720px;

    padding:0 0 0 28px;

    border-left:3px solid #1596d8;

}


/* tanda kutip */

.principal-message .quote-mark{

    position:absolute;

    left:-13px;

    top:-55px;

    font-size:82px;

    line-height:1;

    font-family:Georgia,serif;

    font-weight:700;

    color:rgba(30,145,211,.12);

}


/* teks */

.principal-message p{

    margin:0;

    color:#5d7489;

    font-size:17px;

    line-height:1.9;

    font-weight:500;

    text-align:justify;

    text-justify:inter-word;

}


/* ==========================================================
   AKSEN BAWAH
========================================================== */

.principal-message::after{

    content:"";

    display:block;

    width:55px;
    height:4px;

    margin-top:30px;

    border-radius:10px;

    background:

        linear-gradient(
            90deg,
            #1695d6,
            #5eb9df
        );

}


/* ==========================================================
   HAPUS LINK SELENGKAPNYA
========================================================== */

.principal-content .text-link{

    display:none !important;

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.principal-section .empty-state{

    max-width:600px;

    margin:auto;

    padding:50px;

    text-align:center;

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

    border-radius:20px;

    border:1px solid #e5edf4;

}


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

@media (max-width:992px){

    .principal-section{

        padding:90px 0 100px;

    }


    .principal-feature{

        grid-template-columns:
            290px
            minmax(0,1fr);

        gap:50px;

    }


    .principal-photo{

        max-width:280px;

    }


    .principal-content{

        padding-left:30px;

    }


    .principal-content h3{

        font-size:36px;

    }


    .principal-message p{

        font-size:15px;

        line-height:1.8;

    }

}


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

@media (max-width:768px){

    .principal-section{

        padding:75px 20px 85px;

    }


    .principal-section .section-header-row{

        margin-bottom:50px;

    }


    .principal-section .section-header-row h2{

        font-size:32px;

        letter-spacing:-1px;

    }


    .principal-feature{

        display:flex;

        flex-direction:column;

        gap:40px;

        align-items:center;

    }


    .principal-photo{

        width:230px;

        max-width:230px;

        aspect-ratio:3 / 4;

    }


    .principal-content{

        width:100%;

        padding-left:25px;

    }


    .principal-content h3{

        font-size:30px;

    }


    .principal-message{

        padding-left:20px;

    }


    .principal-message p{

        font-size:15px;

        line-height:1.8;

        text-align:justify;

    }


    .principal-message .quote-mark{

        font-size:65px;

        top:-42px;

    }

}


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

@media (max-width:480px){

    .principal-section{

        padding-left:16px;
        padding-right:16px;

    }


    .principal-section .section-header-row h2{

        font-size:28px;

    }


    .principal-photo{

        width:210px;

        max-width:210px;

    }


    .principal-content h3{

        font-size:27px;

    }


    .principal-position{

        font-size:10px;

        padding:7px 12px;

    }


    .principal-message p{

        font-size:14px;

        line-height:1.75;

    }

}
/* ==========================================================
   PART 1 UPDATE
   SAMBUTAN KEPALA SEKOLAH
   FOTO + NARASI LEBIH RAPAT
   BACKGROUND SEKOLAH MODERN
   JANGAN HAPUS CSS LAMA
========================================================== */


/* ==========================================================
   BACKGROUND PAGE
========================================================== */

.principal-section{

    position:relative;

    overflow:hidden;

    padding:95px 0 105px;

    background:

        linear-gradient(
            rgba(247,251,255,.94),
            rgba(247,251,255,.97)
        ),

        url("https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=2000&q=80");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}


/* lapisan putih tambahan */

.principal-section > .container{

    position:relative;

    z-index:3;

}


/* ==========================================================
   EFEK CAHAYA BACKGROUND
========================================================== */

.principal-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 15% 25%,
            rgba(36,143,207,.12),
            transparent 30%
        ),

        radial-gradient(
            circle at 88% 80%,
            rgba(20,99,160,.10),
            transparent 32%
        );

    pointer-events:none;

}


/* ==========================================================
   BERCak DOT KIRI
========================================================== */

.principal-section::after{

    content:"";

    position:absolute;

    width:150px;
    height:150px;

    left:0;
    top:170px;

    opacity:.65;

    background-image:

        radial-gradient(
            circle,
            rgba(15,137,207,.22) 2px,
            transparent 2.5px
        );

    background-size:21px 21px;

    pointer-events:none;

}


/* ==========================================================
   HEADER
========================================================== */

.principal-section .section-header-row{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:58px;

}


.principal-section .section-header-row h2{

    margin:0;

    font-size:clamp(
        34px,
        4vw,
        48px
    );

    line-height:1.1;

    letter-spacing:-1.6px;

    color:#17243a;

}


.principal-section .section-header-row h2 span{

    color:#165b8e;

}


/* ==========================================================
   GARIS JUDUL
========================================================== */

.principal-section .section-header-row h2::after{

    content:"";

    display:block;

    width:68px;
    height:4px;

    margin:20px auto 0;

    border-radius:20px;

    background:

        linear-gradient(
            90deg,
            #128bd0,
            #64bde6
        );

}


/* ==========================================================
   LAYOUT FOTO + NARASI
========================================================== */

.principal-feature{

    display:grid;

    grid-template-columns:
        310px
        minmax(0,680px);

    align-items:center;

    justify-content:center;

    gap:42px;

    width:100%;

    max-width:1030px;

    margin:0 auto;

    padding:0;

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

}


/* ==========================================================
   FOTO
========================================================== */

.principal-photo{

    position:relative;

    width:270px;

    aspect-ratio:3 / 4;

    margin:0 auto;

    padding:7px;

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

    border-radius:17px;

    border:1px solid rgba(24,112,173,.18);

    box-shadow:

        0 18px 42px rgba(19,68,105,.18);

    z-index:4;

}


/* foto sebenarnya */

.principal-photo img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    object-position:center top;

    border-radius:11px;

}


/* ==========================================================
   AKSEN BINGKAI BIRU
========================================================== */

.principal-photo::before{

    content:"";

    position:absolute;

    left:-8px;
    top:-8px;

    width:70px;
    height:5px;

    border-radius:10px;

    background:#148ed1;

    box-shadow:

        0 0 0 1px rgba(20,142,209,.05);

    z-index:10;

}


/* ==========================================================
   AKSEN BINGKAI EMAS
========================================================== */

.principal-photo::after{

    content:"";

    position:absolute;

    right:-8px;
    bottom:-8px;

    width:65px;
    height:5px;

    border-radius:10px;

    background:#dcb33e;

    z-index:10;

}


/* ==========================================================
   KONTEN NARASI
   DIBUAT LEBIH DEKAT KE FOTO
========================================================== */

.principal-content{

    position:relative;

    padding-left:30px;

    max-width:680px;

}


/* garis vertikal */

.principal-content::before{

    content:"";

    position:absolute;

    left:0;

    top:5px;
    bottom:5px;

    width:3px;

    border-radius:10px;

    background:

        linear-gradient(
            180deg,
            #1595d6,
            #4d9cc8
        );

}


/* ==========================================================
   LABEL
========================================================== */

.principal-position{

    display:inline-flex;

    align-items:center;

    padding:7px 13px;

    border-radius:6px;

    background:#edf6fc;

    color:#155d8e;

    font-size:11px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* ==========================================================
   NAMA KEPALA SEKOLAH
========================================================== */

.principal-content h3{

    margin:13px 0 6px;

    font-size:clamp(
        31px,
        3.5vw,
        43px
    );

    line-height:1.1;

    letter-spacing:-1.3px;

    color:#174f7b;

    font-weight:800;

}


/* ==========================================================
   PERIODE
========================================================== */

.principal-period{

    display:block;

    margin-bottom:22px;

    color:#8095a8;

    font-size:13px;

    font-weight:700;

}


/* ==========================================================
   NARASI
========================================================== */

.principal-message{

    position:relative;

    padding-left:22px;

    max-width:650px;

    border-left:3px solid #1596d7;

}


/* tanda kutip */

.principal-message .quote-mark{

    position:absolute;

    left:-10px;

    top:-38px;

    font-family:Georgia,serif;

    font-size:62px;

    line-height:1;

    color:rgba(20,145,211,.13);

}


/* teks */

.principal-message p{

    margin:0;

    font-size:15px;

    line-height:1.85;

    color:#5c7488;

    font-weight:500;

    text-align:justify;

}


/* ==========================================================
   AKSEN BAWAH
========================================================== */

.principal-message::after{

    content:"";

    display:block;

    width:48px;
    height:4px;

    margin-top:22px;

    border-radius:20px;

    background:#42a8dc;

}


/* ==========================================================
   HAPUS LINK
========================================================== */

.principal-content .text-link,

.principal-section .outline-button{

    display:none !important;

}


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

@media (max-width:992px){

    .principal-section{

        padding:80px 25px 90px;

        background-attachment:scroll;

    }


    .principal-feature{

        grid-template-columns:
            270px
            minmax(0,1fr);

        gap:32px;

        max-width:900px;

    }


    .principal-photo{

        width:240px;

    }


    .principal-content{

        padding-left:25px;

    }


    .principal-content h3{

        font-size:34px;

    }


    .principal-message p{

        font-size:14px;

        line-height:1.8;

    }

}


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

@media (max-width:768px){

    .principal-section{

        padding:70px 20px 80px;

    }


    .principal-section .section-header-row{

        margin-bottom:45px;

    }


    .principal-section .section-header-row h2{

        font-size:31px;

    }


    .principal-feature{

        display:flex;

        flex-direction:column;

        gap:32px;

        align-items:center;

    }


    .principal-photo{

        width:220px;

        aspect-ratio:3 / 4;

    }


    .principal-content{

        width:100%;

        padding-left:22px;

    }


    .principal-content h3{

        font-size:30px;

    }


    .principal-message p{

        font-size:14px;

        line-height:1.8;

    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width:480px){

    .principal-section{

        padding-left:16px;
        padding-right:16px;

    }


    .principal-photo{

        width:200px;

    }


    .principal-section .section-header-row h2{

        font-size:28px;

    }


    .principal-content h3{

        font-size:27px;

    }


    .principal-message{

        padding-left:18px;

    }


    .principal-message p{

        font-size:13.5px;

        line-height:1.75;

    }

}
/* ==========================================================
   SAMBUTAN KEPALA SEKOLAH — MODERN GOVERNMENT STYLE
   PART 1
   CSS INI DILETAKKAN PALING BAWAH CSS LAMA
========================================================== */

.principal-section{

    position:relative;

    padding:95px 0 110px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(247,251,255,.98),
            rgba(255,255,255,.94)
        );

}


/* ==========================================================
   BACKGROUND SEKOLAH
========================================================== */

.principal-section::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    background-image:
        linear-gradient(
            rgba(248,252,255,.86),
            rgba(248,252,255,.94)
        ),
        url("../assets/img/sekolah-bg.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    opacity:.42;

}


/* ==========================================================
   BACKGROUND LINGKARAN
========================================================== */

.principal-section::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:-270px;

    top:40px;

    border:

        1px solid

        rgba(21,139,214,.10);

    border-radius:50%;

    box-shadow:

        0 0 0 45px rgba(21,139,214,.025),

        0 0 0 90px rgba(21,139,214,.018),

        0 0 0 135px rgba(21,139,214,.012);

    z-index:0;

    pointer-events:none;

}


/* ==========================================================
   CONTAINER
========================================================== */

.principal-section .container{

    position:relative;

    z-index:2;

}


/* ==========================================================
   HEADER
========================================================== */

.principal-section .section-header-row{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:72px;

}


/* ==========================================================
   KICKER
========================================================== */

.principal-section .section-kicker{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    margin-bottom:20px;

    border-radius:50px;

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

    border:1px solid rgba(22,102,160,.08);

    box-shadow:

        0 8px 25px rgba(16,74,120,.06);

    color:#0878c9;

    font-size:13px;

    font-weight:800;

    letter-spacing:1.2px;

    text-transform:uppercase;

}


/* titik kicker */

.principal-section .section-kicker::before{

    content:"";

    width:9px;

    height:9px;

    border-radius:50%;

    background:#168fd3;

    box-shadow:

        0 0 0 5px rgba(22,143,211,.10);

    animation:

        principalPulse 2.5s ease-in-out infinite;

}


/* garis kecil */

.principal-section .section-kicker::after{

    content:"";

    width:30px;

    height:2px;

    background:#15558b;

    border-radius:20px;

}


/* ==========================================================
   JUDUL
========================================================== */

.principal-section .section-header-row h2{

    margin:0;

    font-size:clamp(36px,4vw,58px);

    line-height:1.08;

    letter-spacing:-2.2px;

    font-weight:800;

    color:#15233a;

}


/* kata Kepala Sekolah */

.principal-section .section-header-row h2 span{

    color:#17649b;

}


/* garis bawah judul */

.principal-section .section-header-row h2::after{

    content:"";

    display:block;

    width:76px;

    height:4px;

    margin:24px auto 0;

    border-radius:50px;

    background:

        linear-gradient(

            90deg,

            #1595d5,

            #5bb8e6

        );

}


/* ==========================================================
   HILANGKAN LINK PROFIL
========================================================== */

.principal-section .outline-button{

    display:none !important;

}


/* ==========================================================
   AREA UTAMA
========================================================== */

.principal-section .principal-feature{

    position:relative;

    display:grid;

    grid-template-columns:

        minmax(300px,420px)

        minmax(0,1fr);

    align-items:center;

    column-gap:55px;

    max-width:1180px;

    margin:0 auto;

    padding:0;

    background:transparent;

    border:0;

    box-shadow:none;

}


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

.principal-section .principal-photo{

    position:relative;

    width:100%;

    max-width:390px;

    aspect-ratio:3 / 4;

    margin:0 auto;

    padding:8px;

    background:#fff;

    border-radius:24px;

    border:

        1px solid

        rgba(19,126,190,.22);

    box-shadow:

        0 25px 55px rgba(20,71,108,.13),

        0 5px 15px rgba(20,71,108,.06);

    overflow:visible;

    isolation:isolate;

}


/* foto */

.principal-section .principal-photo img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center top;

    border-radius:17px;

    background:#edf5fa;

}


/* ==========================================================
   BINGKAI AKSEN BIRU
========================================================== */

.principal-section .principal-photo::before{

    content:"";

    position:absolute;

    top:-10px;

    left:-10px;

    width:88px;

    height:5px;

    border-radius:20px;

    background:#1596d4;

    z-index:4;

    box-shadow:

        0 9px 0 rgba(21,150,212,.18);

}


/* ==========================================================
   BINGKAI AKSEN EMAS
========================================================== */

.principal-section .principal-photo::after{

    content:"";

    position:absolute;

    right:-9px;

    bottom:-9px;

    width:58px;

    height:58px;

    border-right:4px solid #e6b23c;

    border-bottom:4px solid #e6b23c;

    border-radius:0 0 20px 0;

    z-index:4;

}


/* ==========================================================
   BERCak WARNA KIRI FOTO
========================================================== */

.principal-section .principal-photo{

    --dot-color:rgba(25,143,207,.18);

}


.principal-section .principal-photo .photo-decoration{

    display:none;

}


/* ==========================================================
   DECORATION DOTS
========================================================== */

.principal-section .principal-photo img{

    position:relative;

}


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

.principal-section .principal-content{

    position:relative;

    min-width:0;

    padding:28px 0 28px 32px;

    border-left:

        4px solid

        #1595d3;

}


/* ==========================================================
   QUOTE BESAR
========================================================== */

.principal-section .principal-content::before{

    content:"“";

    position:absolute;

    top:-38px;

    left:-18px;

    font-family:Georgia,serif;

    font-size:90px;

    line-height:1;

    font-weight:700;

    color:rgba(26,151,214,.12);

    z-index:-1;

}


/* ==========================================================
   LABEL
========================================================== */

.principal-section .principal-position{

    display:inline-flex;

    align-items:center;

    padding:8px 14px;

    margin-bottom:16px;

    border-radius:6px;

    background:#edf7fc;

    color:#075b91;

    font-size:12px;

    line-height:1;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* ==========================================================
   NAMA
========================================================== */

.principal-section .principal-content h3{

    margin:0;

    color:#174b75;

    font-size:clamp(34px,3.2vw,48px);

    line-height:1.12;

    letter-spacing:-1.5px;

    font-weight:800;

}


/* ==========================================================
   PERIODE
========================================================== */

.principal-section .principal-period{

    display:block;

    margin-top:9px;

    margin-bottom:30px;

    color:#8298aa;

    font-size:14px;

    font-weight:700;

}


/* ==========================================================
   SAMBUTAN
========================================================== */

.principal-section .principal-message{

    position:relative;

    margin:0;

    padding:0 0 0 26px;

    max-width:760px;

}


/* garis narasi */

.principal-section .principal-message::before{

    content:"";

    position:absolute;

    top:2px;

    bottom:2px;

    left:0;

    width:3px;

    border-radius:20px;

    background:

        linear-gradient(

            180deg,

            #1499da,

            #58b6e3

        );

}


/* hilangkan quote lama */

.principal-section .quote-mark{

    display:none;

}


/* teks */

.principal-section .principal-message p{

    margin:0;

    color:#607b91;

    font-size:18px;

    line-height:1.85;

    font-weight:500;

    text-align:justify;

    letter-spacing:.15px;

}


/* ==========================================================
   HILANGKAN SELENGKAPNYA
========================================================== */

.principal-section .text-link{

    display:none !important;

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.principal-section .empty-state{

    position:relative;

    z-index:2;

    max-width:600px;

    margin:0 auto;

    padding:40px;

    text-align:center;

    border-radius:20px;

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

    border:1px solid rgba(20,100,150,.08);

}


/* ==========================================================
   BERCak DOTS PAGE
========================================================== */

.principal-section .container::before{

    content:"";

    position:absolute;

    left:-100px;

    top:280px;

    width:125px;

    height:150px;

    background-image:

        radial-gradient(

            circle,

            rgba(20,145,211,.20) 2px,

            transparent 2.5px

        );

    background-size:18px 18px;

    opacity:.8;

    animation:

        principalDots 7s ease-in-out infinite;

    pointer-events:none;

}


/* ==========================================================
   AKSEN KANAN BAWAH
========================================================== */

.principal-section .container::after{

    content:"✦";

    position:absolute;

    right:-35px;

    bottom:10px;

    color:rgba(21,143,207,.18);

    font-size:30px;

    animation:

        principalFloat 4s ease-in-out infinite;

}


/* ==========================================================
   ANIMASI
========================================================== */

@keyframes principalPulse{

    0%,
    100%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.18);

        opacity:.65;

    }

}


@keyframes principalFloat{

    0%,
    100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-8px) rotate(8deg);

    }

}


@keyframes principalDots{

    0%,
    100%{

        transform:translate(0,0);

        opacity:.65;

    }

    50%{

        transform:translate(10px,-12px);

        opacity:1;

    }

}


/* ==========================================================
   HOVER FOTO
========================================================== */

.principal-section .principal-photo{

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}


.principal-section .principal-photo:hover{

    transform:translateY(-6px);

    box-shadow:

        0 32px 65px rgba(20,71,108,.18),

        0 8px 20px rgba(20,71,108,.08);

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){

    .principal-section{

        padding:85px 0 95px;

    }


    .principal-section .principal-feature{

        max-width:1050px;

        grid-template-columns:

            minmax(280px,360px)

            minmax(0,1fr);

        column-gap:42px;

    }


    .principal-section .principal-photo{

        max-width:350px;

    }


    .principal-section .principal-content h3{

        font-size:40px;

    }


    .principal-section .principal-message p{

        font-size:17px;

        line-height:1.75;

    }

}


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

@media (max-width:992px){

    .principal-section{

        padding:75px 20px 85px;

    }


    .principal-section .section-header-row{

        margin-bottom:55px;

    }


    .principal-section .section-header-row h2{

        font-size:42px;

    }


    .principal-section .principal-feature{

        grid-template-columns:

            300px

            minmax(0,1fr);

        column-gap:35px;

    }


    .principal-section .principal-photo{

        max-width:300px;

    }


    .principal-section .principal-content{

        padding-left:25px;

    }


    .principal-section .principal-content h3{

        font-size:34px;

    }


    .principal-section .principal-message p{

        font-size:16px;

        line-height:1.7;

    }

}


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

@media (max-width:768px){

    .principal-section{

        padding:65px 18px 75px;

    }


    .principal-section .section-header-row{

        margin-bottom:45px;

    }


    .principal-section .section-kicker{

        font-size:11px;

        padding:9px 14px;

    }


    .principal-section .section-header-row h2{

        font-size:34px;

        letter-spacing:-1.3px;

    }


    .principal-section .section-header-row h2::after{

        width:60px;

        height:3px;

        margin-top:18px;

    }


    .principal-section .principal-feature{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:38px;

    }


    .principal-section .principal-photo{

        width:210px;

        max-width:210px;

        aspect-ratio:3 / 4;

        border-radius:20px;

        padding:6px;

    }


    .principal-section .principal-photo img{

        border-radius:14px;

    }


    .principal-section .principal-content{

        width:100%;

        padding:

            25px

            0

            10px

            20px;

    }


    .principal-section .principal-content h3{

        font-size:32px;

    }


    .principal-section .principal-period{

        margin-bottom:24px;

    }


    .principal-section .principal-message{

        padding-left:20px;

    }


    .principal-section .principal-message p{

        font-size:15px;

        line-height:1.75;

        text-align:justify;

    }


    .principal-section .container::before{

        left:-45px;

        top:180px;

        transform:scale(.7);

    }

}


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

@media (max-width:480px){

    .principal-section .section-header-row h2{

        font-size:29px;

    }


    .principal-section .principal-photo{

        width:190px;

        max-width:190px;

    }


    .principal-section .principal-content h3{

        font-size:28px;

    }


    .principal-section .principal-message p{

        font-size:14px;

        line-height:1.7;

    }

}
/* ==========================================================
   SAMBUTAN KEPALA SEKOLAH
   PENYESUAIAN FINAL
   TAMBAHKAN DI PALING BAWAH CSS LAMA
========================================================== */


/* ==========================================================
   JUDUL SECTION
========================================================== */

.principal-section .section-header-row h2{

    margin:0;

    font-size:42px !important;

    line-height:1.1;

    font-weight:800;

    letter-spacing:-1.3px;

    text-transform:uppercase;

}


/* bagian biru */

.principal-section .section-header-row h2 span{

    font-size:42px !important;

    text-transform:uppercase;

}


/* garis bawah judul */

.principal-section .section-header-row h2::after{

    width:65px;

    height:3px;

    margin-top:16px;

}


/* ==========================================================
   HEADER LEBIH RINGKAS
========================================================== */

.principal-section .section-header-row{

    margin-bottom:42px !important;

}


/* ==========================================================
   AREA FOTO + NARASI
   LEBIH DEKAT
========================================================== */

.principal-feature{

    max-width:1120px !important;

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

    column-gap:22px !important;

}


/* ==========================================================
   FOTO 4 x 6
========================================================== */

.principal-photo{

    width:320px !important;

    height:480px !important;

    padding:6px;

    border-radius:16px;

}


/* ==========================================================
   KONTEN NARASI
   GESER KE KIRI
========================================================== */

.principal-content{

    margin-left:-8px !important;

    padding-left:18px !important;

    padding-right:0 !important;

    max-width:720px !important;

}


/* ==========================================================
   LABEL
========================================================== */

.principal-position{

    margin-bottom:11px !important;

    padding:7px 12px;

    font-size:10px;

}


/* ==========================================================
   NAMA KEPALA SEKOLAH
========================================================== */

.principal-content h3{

    margin:0 0 4px !important;

    font-size:38px !important;

    line-height:1.1;

    letter-spacing:-1px;

}


/* ==========================================================
   PERIODE
========================================================== */

.principal-period{

    margin:0 0 19px !important;

    font-size:13px;

}


/* ==========================================================
   SAMBUTAN
========================================================== */

.principal-message{

    margin:0;

    padding-left:18px !important;

    max-width:700px;

}


/* ==========================================================
   TEKS SAMBUTAN
========================================================== */

.principal-message p{

    margin:0 !important;

    font-size:15.5px !important;

    line-height:1.72 !important;

    text-align:justify !important;

    color:#5d7488;

}


/* ==========================================================
   QUOTE DIPERKECIL
========================================================== */

.principal-content::before{

    left:-11px;

    top:-38px;

    font-size:72px;

}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (min-width:1200px){

    .principal-feature{

        grid-template-columns:320px minmax(0,760px) !important;

        column-gap:20px !important;

        max-width:1100px !important;

    }


    .principal-content{

        margin-left:-5px !important;

    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1199px){

    .principal-feature{

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

        column-gap:20px !important;

        max-width:950px !important;

    }


    .principal-photo{

        width:290px !important;

        height:435px !important;

    }


    .principal-content h3{

        font-size:34px !important;

    }


    .principal-message p{

        font-size:15px !important;

    }

}


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

@media (max-width:992px){

    .principal-section .section-header-row h2{

        font-size:36px !important;

    }


    .principal-section .section-header-row h2 span{

        font-size:36px !important;

    }


    .principal-feature{

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

        column-gap:18px !important;

        max-width:850px !important;

    }


    .principal-photo{

        width:250px !important;

        height:375px !important;

    }


    .principal-content{

        margin-left:-5px !important;

        padding-left:16px !important;

    }


    .principal-content h3{

        font-size:31px !important;

    }


    .principal-message{

        padding-left:15px !important;

    }


    .principal-message p{

        font-size:14px !important;

        line-height:1.7 !important;

    }

}


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

@media (max-width:768px){

    .principal-section .section-header-row h2{

        font-size:30px !important;

        letter-spacing:-.8px;

    }


    .principal-section .section-header-row h2 span{

        font-size:30px !important;

    }


    .principal-feature{

        display:flex !important;

        flex-direction:column !important;

        align-items:center !important;

        gap:27px !important;

    }


    .principal-photo{

        width:200px !important;

        height:300px !important;

    }


    .principal-content{

        width:100%;

        margin-left:0 !important;

        padding-left:16px !important;

    }


    .principal-content h3{

        font-size:28px !important;

    }


    .principal-message p{

        font-size:14px !important;

        line-height:1.7 !important;

    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width:480px){

    .principal-section .section-header-row h2{

        font-size:26px !important;

    }


    .principal-section .section-header-row h2 span{

        font-size:26px !important;

    }


    .principal-photo{

        width:180px !important;

        height:270px !important;

    }


    .principal-content h3{

        font-size:25px !important;

    }


    .principal-message p{

        font-size:13.5px !important;

        line-height:1.65 !important;

    }

}
/* ==========================================================
   FINAL OVERRIDE
   SAMBUTAN KEPALA SEKOLAH
   FOTO + NARASI LEBIH RAPAT
========================================================== */


/* ==========================================================
   BACKGROUND PAGE SEKOLAH
========================================================== */

.principal-section{

    position:relative !important;

    overflow:hidden !important;

    background-color:#edf5f9 !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(246,251,253,.94) 0%,
            rgba(246,251,253,.88) 45%,
            rgba(246,251,253,.76) 100%
        ),
        url("https://images.unsplash.com/photo-1606761568499-6d2451b23c66?auto=format&fit=crop&w=2200&q=85") !important;

    background-size:cover !important;

    background-position:center !important;

    background-repeat:no-repeat !important;

}


/* lapisan lembut */

.principal-section::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(0,132,190,.10) 0,
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(0,132,190,.08) 0,
            transparent 24%
        );

}


/* ==========================================================
   CONTAINER
========================================================== */

.principal-section > .container{

    position:relative !important;

    z-index:2 !important;

}


/* ==========================================================
   JUDUL
========================================================== */

.principal-section .section-header-row{

    margin-bottom:36px !important;

}


.principal-section .section-header-row h2{

    font-size:38px !important;

    line-height:1.08 !important;

    letter-spacing:-1px !important;

    text-transform:uppercase !important;

}


.principal-section .section-header-row h2 span{

    font-size:38px !important;

    text-transform:uppercase !important;

}


/* ==========================================================
   AREA UTAMA
   FOTO DAN NARASI DIDEKATKAN
========================================================== */

.principal-feature{

    width:100% !important;

    max-width:1060px !important;

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

    column-gap:8px !important;

    margin-left:auto !important;

    margin-right:auto !important;

}


/* ==========================================================
   FOTO 4 x 6
========================================================== */

.principal-photo{

    width:300px !important;

    height:450px !important;

    padding:6px !important;

    margin:0 !important;

    z-index:5 !important;

}


/* ==========================================================
   NARASI
   DITARIK KE FOTO
========================================================== */

.principal-content{

    position:relative !important;

    margin-left:-18px !important;

    padding-left:22px !important;

    padding-right:0 !important;

    max-width:710px !important;

}


/* ==========================================================
   KEPALA SEKOLAH
========================================================== */

.principal-position{

    margin-bottom:9px !important;

    font-size:10px !important;

    letter-spacing:.9px !important;

}


/* ==========================================================
   NAMA
========================================================== */

.principal-content h3{

    margin-top:0 !important;

    margin-bottom:4px !important;

    font-size:34px !important;

    line-height:1.1 !important;

    letter-spacing:-.8px !important;

}


/* ==========================================================
   PERIODE
========================================================== */

.principal-period{

    margin-bottom:16px !important;

    font-size:12px !important;

}


/* ==========================================================
   SAMBUTAN
========================================================== */

.principal-message{

    margin:0 !important;

    padding-left:15px !important;

    max-width:690px !important;

}


/* ==========================================================
   TEKS
========================================================== */

.principal-message p{

    margin:0 !important;

    font-size:14.5px !important;

    line-height:1.68 !important;

    text-align:justify !important;

    color:#566e82 !important;

}


/* ==========================================================
   QUOTE LEBIH HALUS
========================================================== */

.principal-content::before{

    left:-10px !important;

    top:-35px !important;

    font-size:68px !important;

    color:rgba(21,153,220,.10) !important;

}


/* ==========================================================
   AKSEN BINGKAI FOTO
========================================================== */

.principal-photo::before{

    left:-5px !important;

    top:-4px !important;

    width:75px !important;

    height:4px !important;

}


.principal-photo::after{

    right:14px !important;

    bottom:-5px !important;

    width:55px !important;

    height:4px !important;

}


/* ==========================================================
   ORNAMEN BERCak HALUS
========================================================== */

.principal-feature::after{

    right:-20px !important;

    bottom:-25px !important;

    width:85px !important;

    height:85px !important;

    opacity:.5 !important;

}


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

@media (max-width:992px){

    .principal-feature{

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

        column-gap:5px !important;

        max-width:850px !important;

    }


    .principal-photo{

        width:260px !important;

        height:390px !important;

    }


    .principal-content{

        margin-left:-14px !important;

        padding-left:18px !important;

    }


    .principal-content h3{

        font-size:30px !important;

    }


    .principal-message p{

        font-size:14px !important;

    }

}


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

@media (max-width:768px){

    .principal-section{

        background-position:center !important;

    }


    .principal-section .section-header-row h2{

        font-size:29px !important;

    }


    .principal-section .section-header-row h2 span{

        font-size:29px !important;

    }


    .principal-feature{

        display:flex !important;

        flex-direction:column !important;

        align-items:center !important;

        gap:25px !important;

    }


    .principal-photo{

        width:195px !important;

        height:292px !important;

    }


    .principal-content{

        width:100% !important;

        margin-left:0 !important;

        padding-left:16px !important;

    }


    .principal-content h3{

        font-size:28px !important;

    }


    .principal-message p{

        font-size:14px !important;

        line-height:1.68 !important;

    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width:480px){

    .principal-section .section-header-row h2{

        font-size:25px !important;

    }


    .principal-section .section-header-row h2 span{

        font-size:25px !important;

    }


    .principal-photo{

        width:180px !important;

        height:270px !important;

    }


    .principal-content h3{

        font-size:25px !important;

    }


    .principal-message p{

        font-size:13.5px !important;

        line-height:1.65 !important;

    }

}
/* ==========================================================
   SEMBUNYIKAN SEMUA GARIS DI SAMPING NARASI
========================================================== */

.principal-content{
    border: none !important;
    box-shadow: none !important;
}

.principal-content::before,
.principal-content::after{
    display: none !important;
    content: none !important;
}

.principal-message{
    border: none !important;
    box-shadow: none !important;
}

.principal-message::before,
.principal-message::after{
    display: none !important;
    content: none !important;
}

.principal-message p{
    border: none !important;
    box-shadow: none !important;
}


/* sembunyikan elemen yang kemungkinan menjadi garis */

.principal-content > .quote-mark{
    display: none !important;
}

.principal-content > span,
.principal-content > div{
    border-left: none !important;
    border-right: none !important;
}


/* ==========================================================
   NARASI BERSIH
========================================================== */

.principal-message{
    padding: 0 !important;
    margin: 12px 0 0 0 !important;
}

.principal-message p{
    padding: 0 !important;
    margin: 0 !important;
    text-align: justify !important;
}
/* ==========================================================
   MOBILE - SAMBUTAN KEPALA SEKOLAH
========================================================== */

@media (max-width: 768px){

    /* seluruh konten dibuat center */
    .principal-content{

        width:100% !important;

        max-width:100% !important;

        margin:0 auto !important;

        padding:0 18px !important;

        text-align:center !important;

        display:flex !important;

        flex-direction:column !important;

        align-items:center !important;

    }


    /* label Kepala Sekolah */
    .principal-position{

        display:inline-flex !important;

        width:max-content !important;

        margin:0 auto 10px !important;

        text-align:center !important;

        justify-content:center !important;

    }


    /* NAMA KEPALA SEKOLAH */
    .principal-content h3{

        display:block !important;

        width:100% !important;

        margin:0 auto 6px !important;

        text-align:center !important;

        font-size:27px !important;

        line-height:1.2 !important;

        white-space:normal !important;

        visibility:visible !important;

        opacity:1 !important;

    }


    /* periode */
    .principal-period{

        display:block !important;

        width:100% !important;

        margin:0 auto 18px !important;

        text-align:center !important;

    }


    /* narasi */
    .principal-message{

        width:100% !important;

        max-width:100% !important;

        margin:0 auto !important;

        padding:0 !important;

        text-align:justify !important;

    }


    .principal-message p{

        width:100% !important;

        margin:0 auto !important;

        padding:0 !important;

        text-align:justify !important;

        font-size:14px !important;

        line-height:1.7 !important;

    }

}
/* ==========================================================
   MOBILE - LABEL KEPALA SEKOLAH BENAR-BENAR TENGAH
========================================================== */

@media (max-width: 768px){

    .principal-content .principal-position{

        display:flex !important;

        width:fit-content !important;

        margin-left:auto !important;
        margin-right:auto !important;

        align-self:center !important;

        text-align:center !important;

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

        position:relative !important;
        left:auto !important;
        right:auto !important;

        float:none !important;

        transform:none !important;

    }

}
/* ==========================================================
   MOBILE - HANYA UKURAN FOTO KEPALA SEKOLAH
========================================================== */

@media (max-width: 768px){

    .principal-photo{
        width:150px !important;
        height:200px !important;
    }

}
/* ==========================================================
   BERITA TERBARU
   4 CARD - MODERN PEMERINTAH
   OVERRIDE TANPA MENGHAPUS CSS LAMA
========================================================== */

.latest-section{

    position:relative;

    overflow:hidden;

    padding:85px 0 95px;

    background:
        linear-gradient(
            135deg,
            rgba(248,251,253,.96),
            rgba(238,246,250,.92)
        ),
        url("https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=2200&q=85");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

}


/* lapisan halus */

.latest-section::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-180px;
    right:-130px;

    background:rgba(0,105,160,.07);

    border-radius:50%;

    filter:blur(10px);

    pointer-events:none;

}


/* container */

.latest-section > .container{

    position:relative;

    z-index:2;

}


/* ==========================================================
   HEADER
========================================================== */

.latest-section .section-header-row{

    margin-bottom:34px;

    align-items:flex-end;

}


.latest-section .section-kicker{

    font-size:11px;

    font-weight:700;

    letter-spacing:1.8px;

    color:#1674a8;

}


.latest-section .section-header-row h2{

    margin:7px 0 8px;

    font-size:34px;

    line-height:1.1;

    letter-spacing:-.8px;

}


.latest-section .section-header-row h2 span{

    color:#1674a8;

}


.latest-section .section-header-row p{

    margin:0;

    max-width:560px;

    color:#6c7d89;

    font-size:14px;

    line-height:1.7;

}


/* ==========================================================
   4 CARD GRID
========================================================== */

.latest-news-grid{

    display:grid !important;

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

    gap:20px !important;

    align-items:stretch;

}


/* ==========================================================
   CARD
========================================================== */

.latest-news-card{

    display:flex;

    flex-direction:column;

    min-width:0;

    height:100%;

    overflow:hidden;

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

    border:1px solid rgba(20,70,100,.08);

    border-radius:16px;

    box-shadow:
        0 8px 28px rgba(23,61,82,.07);

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

}


.latest-news-card:hover{

    transform:translateY(-6px);

    border-color:rgba(22,116,168,.18);

    box-shadow:
        0 18px 42px rgba(23,61,82,.13);

}


/* ==========================================================
   FOTO
========================================================== */

.latest-news-image{

    position:relative;

    display:block;

    height:205px;

    overflow:hidden;

    background:#eaf1f5;

}


.latest-news-image img{

    width:100% !important;

    height:100% !important;

    object-fit:cover;

    display:block;

    transition:
        transform .5s ease;

}


.latest-news-card:hover
.latest-news-image img{

    transform:scale(1.045);

}


/* ==========================================================
   KATEGORI
========================================================== */

.latest-news-category{

    position:absolute;

    left:14px;

    bottom:14px;

    padding:6px 10px;

    border-radius:6px;

    background:rgba(13,72,104,.92);

    color:#fff;

    font-size:9px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

}


/* ==========================================================
   CONTENT
========================================================== */

.latest-news-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:19px 19px 17px;

}


/* ==========================================================
   META
========================================================== */

.latest-news-meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:10px;

}


.latest-news-meta span{

    display:inline-flex;

    align-items:center;

    gap:5px;

    color:#81909a;

    font-size:10px;

}


.latest-news-meta i{

    color:#1674a8;

}


/* ==========================================================
   JUDUL
========================================================== */

.latest-news-content h3{

    margin:0 0 9px;

    font-size:16px;

    line-height:1.4;

    font-weight:700;

    letter-spacing:-.15px;

}


.latest-news-content h3 a{

    color:#183747;

    text-decoration:none;

    transition:color .25s ease;

}


.latest-news-content h3 a:hover{

    color:#1674a8;

}


/* ==========================================================
   RINGKASAN
========================================================== */

.latest-news-content > p{

    margin:0;

    color:#71818b;

    font-size:12.5px;

    line-height:1.65;

}


/* ==========================================================
   FOOTER
========================================================== */

.latest-news-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-top:auto;

    padding-top:16px;

    border-top:1px solid #edf2f5;

}


.latest-news-author{

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:#7b8b94;

    font-size:10.5px;

}


.latest-news-author i{

    margin-right:4px;

    color:#1674a8;

}


.latest-news-read{

    display:inline-flex;

    align-items:center;

    gap:5px;

    flex-shrink:0;

    color:#1674a8;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}


.latest-news-read i{

    transition:transform .25s ease;

}


.latest-news-read:hover i{

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

}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.latest-news-placeholder{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #edf5f8,
            #dceaf0
        );

}


.latest-news-placeholder i{

    font-size:32px;

    color:#8eabb9;

}


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

@media (max-width:1100px){

    .latest-news-grid{

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

    }

}


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

@media (max-width:600px){

    .latest-section{

        padding:60px 0 70px;

        background-attachment:scroll;

    }


    .latest-section .section-header-row{

        align-items:flex-start;

    }


    .latest-section .section-header-row h2{

        font-size:29px;

    }


    .latest-news-grid{

        grid-template-columns:
            1fr !important;

        gap:16px !important;

    }


    .latest-news-image{

        height:210px;

    }


    .latest-news-content{

        padding:17px;

    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width:400px){

    .latest-news-image{

        height:190px;

    }


    .latest-news-content h3{

        font-size:15px;

    }

}
/* ==========================================================
   BERITA TERBARU - 4 CARD
   TAMBAHAN SAJA
========================================================== */

.latest-section .latest-news-grid{
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    width:100% !important;
    max-width:100% !important;
    gap:24px !important;
}


/* PAKSA SEMUA CARD TAMPIL */

.latest-section .latest-news-card{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-width:0 !important;
    visibility:visible !important;
    opacity:1 !important;
}


/* JANGAN SEMBUNYIKAN CARD KE-4 */

.latest-section .latest-news-card:nth-child(4){
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
}


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

@media (max-width:1100px){

    .latest-section .latest-news-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }

}


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

@media (max-width:700px){

    .latest-section .latest-news-grid{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }

}
/* ==========================================================
   BERITA TERBARU - 4 CARD
   TAMBAHAN FINAL
========================================================== */

.latest-news-grid-four{

    display:grid !important;

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

    gap:24px !important;

    width:100% !important;

}


/* SEMUA CARD WAJIB TAMPIL */

.latest-news-grid-four
.latest-news-card{

    display:flex !important;

    flex-direction:column !important;

    position:relative !important;

    width:100% !important;

    min-width:0 !important;

    max-width:none !important;

    visibility:visible !important;

    opacity:1 !important;

}


/* CARD KE-4 */

.latest-news-grid-four
.latest-news-card:nth-child(4){

    display:flex !important;

    visibility:visible !important;

    opacity:1 !important;

}


/* JIKA ADA CSS LAMA YANG MENGHILANGKAN CARD */

.latest-news-grid-four
.latest-news-card:nth-child(n){

    transform:none !important;

}


/* ==========================================================
   GAMBAR
========================================================== */

.latest-news-grid-four
.latest-news-image{

    display:block !important;

    width:100% !important;

    overflow:hidden !important;

}


/* ==========================================================
   DESKTOP KECIL
========================================================== */

@media (max-width:1200px){

    .latest-news-grid-four{

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

    }

}


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

@media (max-width:700px){

    .latest-news-grid-four{

        grid-template-columns:
            1fr !important;

    }

}
/* ==========================================================
   BERITA TERBARU - FORCE 4 CARD
   TAMBAHAN TANPA MENGUBAH CSS LAMA
========================================================== */

.latest-news-grid-four{

    display:grid !important;

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

    gap:24px !important;

    width:100% !important;

    max-width:100% !important;

    overflow:visible !important;

}


/* ==========================================================
   PAKSA SEMUA CARD BERITA TAMPIL
========================================================== */

.latest-news-grid-four
.latest-news-card{

    display:flex !important;

    flex-direction:column !important;

    width:100% !important;

    min-width:0 !important;

    max-width:none !important;

    height:auto !important;

    min-height:100% !important;

    visibility:visible !important;

    opacity:1 !important;

    position:relative !important;

    overflow:visible !important;

}


/* ==========================================================
   CARD KE-4
========================================================== */

.latest-news-grid-four
.latest-news-card:nth-child(4){

    display:flex !important;

    visibility:visible !important;

    opacity:1 !important;

    width:100% !important;

    max-width:none !important;

}


/* ==========================================================
   JANGAN BIARKAN CARD KE-4 TERSEMBUNYI
========================================================== */

.latest-news-grid-four
.latest-news-card:nth-child(n){

    visibility:visible !important;

    opacity:1 !important;

}


/* ==========================================================
   GAMBAR CARD
========================================================== */

.latest-news-grid-four
.latest-news-image{

    display:block !important;

    width:100% !important;

    height:220px !important;

    overflow:hidden !important;

    position:relative !important;

}


.latest-news-grid-four
.latest-news-image img{

    display:block !important;

    width:100% !important;

    height:100% !important;

    object-fit:cover !important;

}


/* ==========================================================
   CONTENT
========================================================== */

.latest-news-grid-four
.latest-news-content{

    display:flex !important;

    flex-direction:column !important;

    flex:1 !important;

}


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

@media (max-width:1100px){

    .latest-news-grid-four{

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

        gap:20px !important;

    }

}


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

@media (max-width:700px){

    .latest-news-grid-four{

        grid-template-columns:
            1fr !important;

        gap:18px !important;

    }


    .latest-news-grid-four
    .latest-news-image{

        height:210px !important;

    }

}


/* ==========================================================
   BERITA GRID 4
========================================================== */

.berita-grid-4{

    display:grid !important;

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

    gap:24px !important;

    width:100% !important;

    align-items:stretch !important;

}


/* ==========================================================
   CARD
========================================================== */

.berita-grid-4
.berita-card-4{

    display:flex !important;

    flex-direction:column !important;

    width:100% !important;

    min-width:0 !important;

    max-width:none !important;

    height:100% !important;

    opacity:1 !important;

    visibility:visible !important;

}


/* ==========================================================
   GAMBAR
========================================================== */

.berita-grid-4
.latest-news-image{

    display:block !important;

    position:relative !important;

    width:100% !important;

    height:220px !important;

    overflow:hidden !important;

}


.berita-grid-4
.latest-news-image img{

    display:block !important;

    width:100% !important;

    height:100% !important;

    object-fit:cover !important;

}


/* ==========================================================
   CONTENT
========================================================== */

.berita-grid-4
.latest-news-content{

    display:flex !important;

    flex-direction:column !important;

    flex:1 !important;

}


/* ==========================================================
   FOOTER SELALU DI BAWAH
========================================================== */

.berita-grid-4
.latest-news-footer{

    margin-top:auto !important;

}


/* ==========================================================
   PAKSA CARD 1-4 TAMPIL
========================================================== */

.berita-grid-4
.berita-card-4:nth-child(1),
.berita-grid-4
.berita-card-4:nth-child(2),
.berita-grid-4
.berita-card-4:nth-child(3),
.berita-grid-4
.berita-card-4:nth-child(4){

    display:flex !important;

    visibility:visible !important;

    opacity:1 !important;

}


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

@media (max-width:1100px){

    .berita-grid-4{

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

        gap:22px !important;

    }

}


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

@media (max-width:700px){

    .berita-grid-4{

        grid-template-columns:
            1fr !important;

        gap:20px !important;

    }


    .berita-grid-4
    .latest-news-image{

        height:220px !important;

    }

}


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

@media (max-width:420px){

    .berita-grid-4
    .latest-news-image{

        height:200px !important;

    }

}
/* ==========================================================
   FIX BERITA 4 CARD
   JANGAN HAPUS CSS LAMA
========================================================== */

.latest-news-grid-four{

    display:grid !important;

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

    width:100% !important;

    gap:24px !important;

    overflow:visible !important;

}


/* PASTIKAN SEMUA CARD TAMPIL */

.latest-news-grid-four
.latest-news-card{

    display:flex !important;

    visibility:visible !important;

    opacity:1 !important;

    width:100% !important;

    max-width:none !important;

    min-width:0 !important;

}


/* CARD KE-4 KHUSUS */

.latest-news-grid-four
.latest-news-card:nth-child(4){

    display:flex !important;

    visibility:visible !important;

    opacity:1 !important;

}


/* JANGAN POTONG CARD */

.latest-news-grid-four{

    height:auto !important;

    max-height:none !important;

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){

    .latest-news-grid-four{

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

    }

}


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

@media (max-width:576px){

    .latest-news-grid-four{

        grid-template-columns:
            1fr !important;

    }

}
/* ==========================================================
   HEADER BERITA TERBARU
   MODERN • MINIMALIS • FORMAL
========================================================== */

.latest-section .section-header-row{
    text-align:center;
    justify-content:center;
    margin-bottom:28px;
}

.latest-section .section-header-row > div{
    width:100%;
    max-width:850px;
    margin:0 auto;
}

/* LABEL KECIL */

.latest-section .section-kicker{
    display:block;
    margin-bottom:7px;

    font-family:Arial, sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;

    line-height:1.4;
}

/* JUDUL */

.latest-section .section-header-row h2{
    margin:0;

    font-family:Arial, sans-serif;
    font-size:28px;
    font-weight:700;
    line-height:1.25;

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

/* BAGIAN "TERBARU" */

.latest-section .section-header-row h2 span{
    font-family:Arial, sans-serif;
    font-weight:700;
}

/* DESKRIPSI */

.latest-section .section-header-row p{
    max-width:650px;
    margin:8px auto 0;

    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:700;
    line-height:1.6;

    text-align:center;
}

/* TOMBOL TETAP DI SAMPING / HEADER */
.latest-section .section-header-row .outline-button{
    position:absolute;
    right:0;
}


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

@media (max-width:768px){

    .latest-section .section-header-row{
        margin-bottom:22px;
        padding:0 10px;
    }

    .latest-section .section-kicker{
        font-size:10px;
        letter-spacing:1.3px;
        margin-bottom:6px;
    }

    .latest-section .section-header-row h2{
        font-size:22px;
        line-height:1.3;
    }

    .latest-section .section-header-row p{
        margin-top:7px;
        font-size:13px;
        line-height:1.55;
        max-width:100%;
    }

    .latest-section .section-header-row .outline-button{
        position:static;
        margin-top:15px;
    }

}
/* ==========================================================
   JUDUL BERITA TERBARU - MODERN MINIMALIS
========================================================== */

.latest-section .section-header-row{
    text-align:center;
    justify-content:center;
}

.latest-section .section-header-row > div{
    width:100%;
    max-width:850px;
    margin:0 auto;
}

.latest-section .section-kicker{
    display:block;

    margin-bottom:8px;

    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;

    text-transform:uppercase;
}

.latest-section .section-header-row h2{
    position:relative;

    display:inline-block;

    margin:0 auto 12px;

    font-family:Arial, Helvetica, sans-serif;
    font-size:32px;
    font-weight:700;
    line-height:1.2;

    text-transform:uppercase;
    letter-spacing:.3px;

    color:#172033;
}


/* GARIS BAWAH BERGERAK */

.latest-section .section-header-row h2::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-7px;

    width:55px;
    height:3px;

    border-radius:10px;

    background:#2563eb;

    transform:translateX(-50%);
    animation:garisBerita 2.5s ease-in-out infinite;
}


@keyframes garisBerita{

    0%{
        width:35px;
        opacity:.65;
    }

    50%{
        width:90px;
        opacity:1;
    }

    100%{
        width:35px;
        opacity:.65;
    }

}


/* PAKSA KATA BERITA TERBARU MENJADI CAPITAL */

.latest-section .section-header-row h2 span{
    font-weight:700;
    text-transform:uppercase;
}


/* DESKRIPSI */

.latest-section .section-header-row p{
    max-width:720px;

    margin:18px auto 0;

    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    font-weight:700;

    line-height:1.7;

    text-align:center;

    color:#4b5563;
}


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

@media (max-width:768px){

    .latest-section .section-header-row h2{
        font-size:26px;
        margin-bottom:10px;
    }

    .latest-section .section-header-row p{
        max-width:94%;

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

        margin-top:16px;
    }

    .latest-section .section-kicker{
        font-size:11px;
        letter-spacing:1.6px;
    }

}
/* ==========================================================
   HEADER BERITA TERBARU - CENTER MODERN
========================================================== */

.latest-section .section-header-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    width:100%;
    text-align:center;

    margin:0 auto 35px;
}


/* BLOK JUDUL */

.latest-section .section-header-row > div{
    width:100%;
    max-width:850px;

    margin:0 auto;

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

    text-align:center;
}


/* UPDATE TERKINI */

.latest-section .section-kicker{
    display:inline-block;

    margin:0 0 9px;

    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:700;

    letter-spacing:1.8px;
    text-transform:uppercase;

    text-align:center;

    position:relative;
}


/* GARIS BAWAH */

.latest-section .section-kicker::after{
    content:"";

    display:block;

    width:42px;
    height:3px;

    margin:8px auto 0;

    border-radius:10px;

    background:currentColor;

    animation:
        beritaLineMove 2.2s ease-in-out infinite;
}


/* JUDUL */

.latest-section .section-header-row h2{
    margin:0;

    font-family:Arial, Helvetica, sans-serif;

    font-size:34px;
    line-height:1.2;

    font-weight:800;

    letter-spacing:-.5px;

    text-align:center;

    color:#172033;
}


/* BAGIAN "TERBARU" */

.latest-section .section-header-row h2 span{
    font-weight:800;
}


/* DESKRIPSI */

.latest-section .section-header-row p{
    width:100%;
    max-width:700px;

    margin:10px auto 0;

    font-family:Arial, Helvetica, sans-serif;

    font-size:15px;
    line-height:1.7;

    font-weight:600;

    color:#64748b;

    text-align:center;
}


/* TOMBOL LIHAT SEMUA */

.latest-section .section-header-row .outline-button{
    margin:22px auto 0;

    align-self:center;
}


/* ==========================================================
   ANIMASI GARIS
========================================================== */

@keyframes beritaLineMove{

    0%{
        width:25px;
        opacity:.5;
        transform:scaleX(.7);
    }

    50%{
        width:65px;
        opacity:1;
        transform:scaleX(1);
    }

    100%{
        width:25px;
        opacity:.5;
        transform:scaleX(.7);
    }

}


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

@media (max-width:992px){

    .latest-section .section-header-row h2{
        font-size:30px;
    }

    .latest-section .section-header-row p{
        max-width:650px;
        font-size:14px;
    }

}


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

@media (max-width:768px){

    .latest-section .section-header-row{
        margin-bottom:28px;
        padding-left:10px;
        padding-right:10px;
    }

    .latest-section .section-kicker{
        font-size:11px;
        letter-spacing:1.5px;
    }

    .latest-section .section-header-row h2{
        font-size:26px;
        line-height:1.25;
    }

    .latest-section .section-header-row p{
        max-width:95%;

        margin-top:9px;

        font-size:13px;
        line-height:1.6;
    }

}


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

@media (max-width:480px){

    .latest-section .section-header-row h2{
        font-size:24px;
    }

    .latest-section .section-header-row p{
        font-size:12.5px;
        line-height:1.6;
    }

}
/* ==========================================================
   AGENDA SEKOLAH - HEADER MODERN PEMERINTAH
   TAMBAHKAN PALING BAWAH CSS
========================================================== */

.agenda-section .section-header-row{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    margin-bottom:34px;
}

.agenda-section .section-header-row > div{
    width:100%;
    max-width:850px;
    margin:0 auto;
}

/* KICKER */

.agenda-section .section-kicker{
    display:inline-block;
    position:relative;

    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.8px;

    color:#1d4ed8;

    margin-bottom:8px;
    padding-bottom:8px;
}

/* GARIS BAWAH BERGERAK */

.agenda-section .section-kicker::after{
    content:"";

    position:absolute;
    left:50%;
    bottom:0;

    width:42px;
    height:3px;

    border-radius:10px;

    background:currentColor;

    transform:translateX(-50%);
    animation:agendaLineMove 2.5s ease-in-out infinite;
}

@keyframes agendaLineMove{

    0%{
        width:28px;
        opacity:.55;
    }

    50%{
        width:70px;
        opacity:1;
    }

    100%{
        width:28px;
        opacity:.55;
    }

}

/* JUDUL */

.agenda-section .section-header-row h2{
    margin:0;

    font-family:Arial, Helvetica, sans-serif;

    font-size:32px;
    line-height:1.2;

    font-weight:800;

    letter-spacing:-.5px;

    color:#111827;
}

/* BAGIAN SPAN */

.agenda-section .section-header-row h2 span{
    color:#1d4ed8;
    font-weight:800;
}

/* DESKRIPSI */

.agenda-section .section-header-row p{
    margin:10px auto 0;

    max-width:680px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:15px;
    line-height:1.65;

    font-weight:700;

    color:#4b5563;

    text-align:center;
}

/* TOMBOL DISEMBUNYIKAN DARI HEADER
   AGAR HEADER BENAR-BENAR TENGAH */

.agenda-section .section-header-row > .outline-button{
    display:none;
}


/* ==========================================================
   AGENDA CARD
========================================================== */

.agenda-home-grid{
    display:grid;

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

    gap:18px;
}


.agenda-home-card{
    position:relative;

    display:flex;
    align-items:center;

    gap:15px;

    min-height:125px;

    padding:20px;

    text-decoration:none;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:16px;

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

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


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

    border-color:#bfdbfe;

    box-shadow:
        0 14px 35px rgba(15,23,42,.10);
}


/* ==========================================================
   TANGGAL
========================================================== */

.agenda-home-date{
    flex:0 0 58px;

    width:58px;
    height:65px;

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

    border-radius:12px;

    background:#eff6ff;

    border:1px solid #dbeafe;

    text-align:center;
}


.agenda-home-date strong{
    font-family:Arial, Helvetica, sans-serif;

    font-size:23px;

    line-height:1;

    font-weight:800;

    color:#1d4ed8;
}


.agenda-home-date span{
    margin-top:5px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:10px;

    font-weight:800;

    letter-spacing:.8px;

    color:#475569;
}


/* ==========================================================
   CONTENT
========================================================== */

.agenda-home-content{
    min-width:0;
    flex:1;
}


.agenda-home-content > span{
    display:block;

    margin-bottom:5px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;

    color:#1d4ed8;

    text-transform:uppercase;
}


.agenda-home-content h3{
    margin:0;

    font-family:Arial, Helvetica, sans-serif;

    font-size:15px;

    line-height:1.4;

    font-weight:800;

    color:#111827;
}


.agenda-home-content p{
    margin:6px 0 0;

    font-family:Arial, Helvetica, sans-serif;

    font-size:12px;

    line-height:1.5;

    font-weight:400;

    color:#64748b;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;
}


/* ==========================================================
   ICON PANAH
========================================================== */

.agenda-home-card > .bi{
    flex:0 0 auto;

    font-size:17px;

    color:#1d4ed8;

    transition:
        transform .25s ease;
}


.agenda-home-card:hover > .bi{
    transform:
        translate(3px,-3px);
}


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

@media (max-width:992px){

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

}


@media (max-width:768px){

    .agenda-section .section-header-row{
        margin-bottom:25px;
    }

    .agenda-section .section-kicker{
        font-size:12px;
        letter-spacing:1.5px;
    }

    .agenda-section .section-header-row h2{
        font-size:27px;
    }

    .agenda-section .section-header-row p{
        font-size:14px;
        line-height:1.55;

        padding:0 10px;
    }

    .agenda-home-grid{
        grid-template-columns:1fr;

        gap:13px;
    }

    .agenda-home-card{
        min-height:105px;

        padding:16px;

        border-radius:14px;
    }

}


@media (max-width:480px){

    .agenda-section .section-header-row h2{
        font-size:24px;
    }

    .agenda-section .section-header-row p{
        font-size:13px;
    }

    .agenda-home-card{
        gap:12px;
        padding:14px;
    }

    .agenda-home-date{
        flex-basis:52px;

        width:52px;
        height:59px;
    }

    .agenda-home-date strong{
        font-size:21px;
    }

    .agenda-home-content h3{
        font-size:14px;
    }

}
/* ==========================================================
   AGENDA SEKOLAH - MODERN PEMERINTAH
   TAMBAHKAN PALING BAWAH CSS
========================================================== */


/* ==========================================================
   SECTION UTAMA
========================================================== */

.agenda-section{

    position:relative;

    width:100%;

    padding:90px 0 100px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    overflow:hidden;

}


/* ==========================================================
   BACKGROUND DEKORASI
========================================================== */

.agenda-section::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-220px;
    left:-180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(30,136,229,.10) 0%,
            rgba(30,136,229,.04) 45%,
            transparent 70%
        );

    pointer-events:none;

}


.agenda-section::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(13,71,161,.08) 0%,
            rgba(13,71,161,.03) 45%,
            transparent 70%
        );

    pointer-events:none;

}


/* ==========================================================
   CONTAINER
========================================================== */

.agenda-section .container{

    position:relative;

    z-index:2;

    max-width:1200px;

    margin:0 auto;

    padding-left:24px;
    padding-right:24px;

}


/* ==========================================================
   HEADER AGENDA
========================================================== */

.agenda-section .section-header-row{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:48px;

}


/* ==========================================================
   KICKER
========================================================== */

.agenda-section .section-kicker{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    position:relative;

    padding:9px 18px;

    margin-bottom:16px;

    border-radius:50px;

    background:#ffffff;

    color:#0878c9;

    font-family:Arial, Helvetica, sans-serif;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

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

}


/* ==========================================================
   JUDUL
========================================================== */

.agenda-section .section-header-row h2{

    position:relative;

    margin:0;

    padding-bottom:18px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:42px;

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1.2px;

    color:#172033;

}


/* WARNA KATA KEDUA */

.agenda-section .section-header-row h2 span{

    color:#1558d6;

}


/* GARIS BAWAH */

.agenda-section .section-header-row h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:42px;

    height:4px;

    border-radius:10px;

    background:#1597df;

    transform:translateX(-50%);

    animation:
        agendaLineMove 2.8s
        ease-in-out
        infinite;

}


/* ==========================================================
   ANIMASI GARIS
========================================================== */

@keyframes agendaLineMove{

    0%,
    100%{

        width:42px;

        opacity:.75;

    }

    50%{

        width:90px;

        opacity:1;

    }

}


/* ==========================================================
   DESKRIPSI HEADER
========================================================== */

.agenda-section .section-header-row p{

    max-width:760px;

    margin:18px auto 0;

    font-family:Arial, Helvetica, sans-serif;

    font-size:16px;

    line-height:1.7;

    font-weight:600;

    color:#526071;

}


/* ==========================================================
   TOMBOL LIHAT KALENDER
========================================================== */

.agenda-section .outline-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    margin-top:24px;

    padding:11px 19px;

    border:1px solid #d7e2ef;

    border-radius:10px;

    background:#ffffff;

    color:#164f91;

    font-family:Arial, Helvetica, sans-serif;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

    transition:
        .25s ease;

}


.agenda-section .outline-button:hover{

    background:#0d5cab;

    border-color:#0d5cab;

    color:#ffffff;

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(13,92,171,.18);

}


/* ==========================================================
   GRID AGENDA
========================================================== */

.agenda-section .agenda-home-grid{

    display:grid;

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

    gap:18px;

    width:100%;

}


/* ==========================================================
   CARD AGENDA
========================================================== */

.agenda-section .agenda-home-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:20px;

    min-height:150px;

    padding:22px 24px;

    border:1px solid #e3eaf2;

    border-radius:16px;

    background:#ffffff;

    text-decoration:none;

    overflow:hidden;

    box-shadow:
        0 8px 28px rgba(15,23,42,.06);

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

}


/* GARIS SAMPING */

.agenda-section .agenda-home-card::before{

    content:"";

    position:absolute;

    top:20px;
    bottom:20px;
    left:0;

    width:4px;

    border-radius:0 8px 8px 0;

    background:#1677c8;

    transition:.25s ease;

}


/* HOVER */

.agenda-section .agenda-home-card:hover{

    transform:translateY(-5px);

    border-color:#cbdbea;

    box-shadow:
        0 18px 40px rgba(15,23,42,.10);

}


.agenda-section .agenda-home-card:hover::before{

    width:6px;

}


/* ==========================================================
   TANGGAL
========================================================== */

.agenda-section .agenda-home-date{

    flex:0 0 72px;

    width:72px;

    height:82px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    background:
        linear-gradient(
            145deg,
            #0d5cab,
            #167dcc
        );

    color:#ffffff;

    box-shadow:
        0 8px 20px rgba(13,92,171,.20);

}


.agenda-section .agenda-home-date strong{

    display:block;

    margin:0;

    font-family:Arial, Helvetica, sans-serif;

    font-size:30px;

    line-height:1;

    font-weight:800;

}


.agenda-section .agenda-home-date span{

    display:block;

    margin-top:7px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:11px;

    line-height:1;

    font-weight:700;

    letter-spacing:1px;

}


/* ==========================================================
   CONTENT
========================================================== */

.agenda-section .agenda-home-content{

    flex:1;

    min-width:0;

}


/* KATEGORI */

.agenda-section .agenda-home-content > span{

    display:inline-block;

    margin-bottom:7px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:10px;

    line-height:1;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#1478bd;

}


/* JUDUL */

.agenda-section .agenda-home-content h3{

    margin:0;

    font-family:Arial, Helvetica, sans-serif;

    font-size:18px;

    line-height:1.4;

    font-weight:800;

    color:#172033;

}


/* DESKRIPSI */

.agenda-section .agenda-home-content p{

    margin:7px 0 0;

    font-family:Arial, Helvetica, sans-serif;

    font-size:13px;

    line-height:1.6;

    color:#657286;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}


/* ==========================================================
   ICON PANAH
========================================================== */

.agenda-section .agenda-home-card > i{

    flex:0 0 auto;

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#eef6fc;

    color:#0d68ad;

    font-size:14px;

    transition:.25s ease;

}


.agenda-section .agenda-home-card:hover > i{

    background:#0d5cab;

    color:#ffffff;

    transform:translate(2px,-2px);

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.agenda-section .latest-news-empty{

    width:100%;

    max-width:650px;

    margin:0 auto;

    padding:45px 30px;

    text-align:center;

    border:1px solid #e3eaf2;

    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 10px 35px rgba(15,23,42,.06);

}


.agenda-section .latest-news-empty > div{

    width:58px;

    height:58px;

    margin:0 auto 16px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#edf6fc;

    color:#1478bd;

}


.agenda-section .latest-news-empty i{

    font-size:24px;

}


.agenda-section .latest-news-empty h3{

    margin:0;

    font-family:Arial, Helvetica, sans-serif;

    font-size:20px;

    font-weight:800;

    color:#172033;

}


.agenda-section .latest-news-empty p{

    margin:8px auto 0;

    font-family:Arial, Helvetica, sans-serif;

    font-size:14px;

    line-height:1.6;

    color:#697586;

}


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

@media (max-width:992px){

    .agenda-section{

        padding:75px 0 80px;

    }


    .agenda-section .agenda-home-grid{

        grid-template-columns:
            1fr;

        max-width:760px;

        margin:0 auto;

    }


    .agenda-section .section-header-row h2{

        font-size:36px;

    }

}


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

@media (max-width:768px){

    .agenda-section{

        padding:65px 0 70px;

    }


    .agenda-section .container{

        padding-left:16px;
        padding-right:16px;

    }


    .agenda-section .section-header-row{

        margin-bottom:32px;

    }


    .agenda-section .section-kicker{

        font-size:11px;

        padding:8px 14px;

        margin-bottom:13px;

    }


    .agenda-section .section-header-row h2{

        font-size:30px;

        letter-spacing:-.7px;

    }


    .agenda-section .section-header-row p{

        margin-top:16px;

        font-size:14px;

        line-height:1.65;

    }


    .agenda-section .outline-button{

        margin-top:20px;

        font-size:12px;

        padding:10px 15px;

    }


    .agenda-section .agenda-home-grid{

        gap:14px;

    }


    .agenda-section .agenda-home-card{

        gap:14px;

        min-height:125px;

        padding:17px 16px;

        border-radius:14px;

    }


    .agenda-section .agenda-home-card::before{

        top:17px;
        bottom:17px;

    }


    .agenda-section .agenda-home-date{

        flex:0 0 58px;

        width:58px;

        height:68px;

        border-radius:11px;

    }


    .agenda-section .agenda-home-date strong{

        font-size:25px;

    }


    .agenda-section .agenda-home-date span{

        margin-top:6px;

        font-size:9px;

    }


    .agenda-section .agenda-home-content h3{

        font-size:15px;

        line-height:1.35;

    }


    .agenda-section .agenda-home-content > span{

        font-size:9px;

        margin-bottom:6px;

    }


    .agenda-section .agenda-home-content p{

        font-size:12px;

        line-height:1.5;

    }


    .agenda-section .agenda-home-card > i{

        width:30px;

        height:30px;

        font-size:12px;

    }


    .agenda-section .latest-news-empty{

        padding:35px 20px;

    }


    .agenda-section .latest-news-empty h3{

        font-size:18px;

    }


    .agenda-section .latest-news-empty p{

        font-size:13px;

    }

}


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

@media (max-width:480px){

    .agenda-section{

        padding:55px 0 60px;

    }


    .agenda-section .section-header-row h2{

        font-size:27px;

    }


    .agenda-section .section-header-row p{

        font-size:13px;

    }


    .agenda-section .agenda-home-card{

        padding:15px 13px;

        gap:11px;

    }


    .agenda-section .agenda-home-date{

        flex:0 0 52px;

        width:52px;

        height:62px;

    }


    .agenda-section .agenda-home-date strong{

        font-size:22px;

    }


    .agenda-section .agenda-home-content h3{

        font-size:14px;

    }


    .agenda-section .agenda-home-content p{

        font-size:11px;

    }


    .agenda-section .agenda-home-card > i{

        display:none;

    }

}
/* ==========================================================
   SEKILAS SEKOLAH
   MODERN - FORMAL - MINIMALIS
   TAMBAHKAN PALING BAWAH CSS
========================================================== */


/* ==========================================================
   SECTION UTAMA
========================================================== */

.sekilas-section{

    position:relative;

    width:100%;

    padding:90px 0 100px;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );

    overflow:hidden;

}


/* ==========================================================
   BACKGROUND DEKORASI
========================================================== */

.sekilas-section::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-220px;
    left:-180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(21,120,198,.10) 0%,
            rgba(21,120,198,.04) 45%,
            transparent 70%
        );

    pointer-events:none;

}


.sekilas-section::after{

    content:"";

    position:absolute;

    width:360px;
    height:360px;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(13,71,161,.08) 0%,
            rgba(13,71,161,.03) 45%,
            transparent 70%
        );

    pointer-events:none;

}


/* ==========================================================
   CONTAINER
========================================================== */

.sekilas-section .container{

    position:relative;

    z-index:2;

    max-width:1200px;

    margin:0 auto;

    padding-left:24px;
    padding-right:24px;

}


/* ==========================================================
   HEADER / KICKER
========================================================== */

.sekilas-section .section-kicker{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    position:relative;

    padding:9px 18px;

    margin-bottom:17px;

    border-radius:50px;

    background:#ffffff;

    color:#0878c9;

    font-family:Arial, Helvetica, sans-serif;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

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

}


/* ==========================================================
   JUDUL
========================================================== */

.sekilas-section h2{

    position:relative;

    margin:0;

    padding-bottom:18px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:40px;

    line-height:1.2;

    font-weight:800;

    letter-spacing:-1px;

    color:#172033;

}


/* ==========================================================
   GARIS BAWAH JUDUL
========================================================== */

.sekilas-section h2::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:45px;

    height:4px;

    border-radius:10px;

    background:#1597df;

    animation:
        sekilasLineMove 2.8s
        ease-in-out
        infinite;

}


@keyframes sekilasLineMove{

    0%,
    100%{

        width:45px;

        opacity:.75;

    }

    50%{

        width:95px;

        opacity:1;

    }

}


/* ==========================================================
   TEKS DESKRIPSI
========================================================== */

.sekilas-section p{

    font-family:Arial, Helvetica, sans-serif;

    color:#526071;

}


/* ==========================================================
   LINK PROFIL
========================================================== */

.sekilas-section a{

    font-family:Arial, Helvetica, sans-serif;

}


/* ==========================================================
   KARTU / AREA INFORMASI
========================================================== */

.sekilas-section .profil-info,
.sekilas-section .school-info,
.sekilas-section .profile-info{

    position:relative;

    padding:28px;

    border:1px solid #e3eaf2;

    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 10px 35px rgba(15,23,42,.06);

}


/* ==========================================================
   DATA SEKOLAH
========================================================== */

.sekilas-section .school-data,
.sekilas-section .profil-data,
.sekilas-section .profile-data{

    display:grid;

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

    gap:14px;

}


/* ==========================================================
   ITEM DATA
========================================================== */

.sekilas-section .school-data > div,
.sekilas-section .profil-data > div,
.sekilas-section .profile-data > div{

    padding:15px 17px;

    border:1px solid #e7edf4;

    border-radius:12px;

    background:#f8fafc;

    font-family:Arial, Helvetica, sans-serif;

    font-size:14px;

    color:#4b5a6d;

    transition:.25s ease;

}


.sekilas-section .school-data > div:hover,
.sekilas-section .profil-data > div:hover,
.sekilas-section .profile-data > div:hover{

    background:#ffffff;

    border-color:#cbdbea;

    transform:translateY(-2px);

    box-shadow:
        0 8px 22px rgba(15,23,42,.06);

}


/* ==========================================================
   LABEL DATA
========================================================== */

.sekilas-section .school-data strong,
.sekilas-section .profil-data strong,
.sekilas-section .profile-data strong{

    color:#172033;

    font-weight:800;

}


/* ==========================================================
   TOMBOL PROFIL
========================================================== */

.sekilas-section a[href*="profil"]{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:20px;

    padding:11px 18px;

    border-radius:10px;

    background:#0d5cab;

    color:#ffffff !important;

    font-family:Arial, Helvetica, sans-serif;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

    transition:.25s ease;

}


.sekilas-section a[href*="profil"]:hover{

    background:#084a8e;

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(13,92,171,.20);

}


/* ==========================================================
   JIKA LINK MENGGUNAKAN ARROW
========================================================== */

.sekilas-section a[href*="profil"]::after{

    content:"→";

    font-size:16px;

    line-height:1;

}


/* ==========================================================
   LAYANAN SEKOLAH
========================================================== */

.sekilas-section + .layanan-section{

    position:relative;

    z-index:2;

}


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

@media (max-width:992px){

    .sekilas-section{

        padding:75px 0 80px;

    }


    .sekilas-section .container{

        padding-left:20px;
        padding-right:20px;

    }


    .sekilas-section h2{

        font-size:35px;

    }


    .sekilas-section .school-data,
    .sekilas-section .profil-data,
    .sekilas-section .profile-data{

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

    }

}


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

@media (max-width:768px){

    .sekilas-section{

        padding:65px 0 70px;

    }


    .sekilas-section .container{

        padding-left:16px;
        padding-right:16px;

    }


    .sekilas-section .section-kicker{

        padding:8px 14px;

        margin-bottom:14px;

        font-size:11px;

    }


    .sekilas-section h2{

        font-size:29px;

        line-height:1.25;

        letter-spacing:-.6px;

    }


    .sekilas-section h2::after{

        width:40px;

    }


    .sekilas-section p{

        font-size:14px;

        line-height:1.7;

    }


    .sekilas-section .profil-info,
    .sekilas-section .school-info,
    .sekilas-section .profile-info{

        padding:20px;

        border-radius:15px;

    }


    .sekilas-section .school-data,
    .sekilas-section .profil-data,
    .sekilas-section .profile-data{

        grid-template-columns:1fr;

        gap:10px;

    }


    .sekilas-section .school-data > div,
    .sekilas-section .profil-data > div,
    .sekilas-section .profile-data > div{

        padding:13px 14px;

        font-size:13px;

    }


    .sekilas-section a[href*="profil"]{

        padding:10px 16px;

        font-size:12px;

    }

}


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

@media (max-width:480px){

    .sekilas-section{

        padding:55px 0 60px;

    }


    .sekilas-section h2{

        font-size:26px;

    }


    .sekilas-section p{

        font-size:13px;

        line-height:1.65;

    }


    .sekilas-section .profil-info,
    .sekilas-section .school-info,
    .sekilas-section .profile-info{

        padding:17px;

    }

}
/* ==========================================================
   06. SEKILAS SEKOLAH
   MODERN MINIMALIS
========================================================== */

.school-overview-section {

    position: relative;

    width: 100%;

    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );

}


/* ==========================================================
   CONTAINER
========================================================== */

.school-overview-section .container {

    width: min(
        1180px,
        calc(100% - 40px)
    );

    margin: 0 auto;

}


/* ==========================================================
   CARD UTAMA
========================================================== */

.school-overview-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(330px, .85fr);

    gap: 55px;

    align-items: stretch;

    padding: 48px;

    background: #ffffff;

    border: 1px solid #e5eaf0;

    border-radius: 28px;

    box-shadow:
        0 18px 50px
        rgba(15, 23, 42, .07);

    overflow: hidden;

}


/* ==========================================================
   GARIS AKSEN ATAS
========================================================== */

.school-overview-grid::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #1769d1,
            #4da3e8,
            transparent
        );

}


/* ==========================================================
   INTRO
========================================================== */

.school-overview-intro {

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


/* ==========================================================
   KICKER
========================================================== */

.school-overview-intro .section-kicker {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    margin-bottom: 18px;

    padding: 8px 15px;

    background: #f0f7ff;

    border: 1px solid #dceeff;

    border-radius: 999px;

    color: #0878c9;

    font-family: Arial, sans-serif;

    font-size: 12px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 1px;

    text-transform: uppercase;

}


/* ==========================================================
   JUDUL
========================================================== */

.school-overview-intro h2 {

    position: relative;

    margin: 0;

    color: #172033;

    font-family: Arial, sans-serif;

    font-size: clamp(
        30px,
        3.2vw,
        42px
    );

    font-weight: 700;

    line-height: 1.18;

    letter-spacing: -1px;

}


/* ==========================================================
   JUDUL SPAN
========================================================== */

.school-overview-intro h2 span {

    display: inline;

    color: #1769d1;

}


/* ==========================================================
   GARIS BAWAH JUDUL
========================================================== */

.school-overview-intro h2::after {

    content: "";

    display: block;

    width: 65px;

    height: 4px;

    margin-top: 17px;

    border-radius: 10px;

    background: #1769d1;

    animation:
        schoolLineMove
        3s
        ease-in-out
        infinite;

}


/* ==========================================================
   ANIMASI GARIS
========================================================== */

@keyframes schoolLineMove {

    0% {

        width: 45px;

    }

    50% {

        width: 85px;

    }

    100% {

        width: 45px;

    }

}


/* ==========================================================
   DESKRIPSI
========================================================== */

.school-overview-intro p {

    max-width: 760px;

    margin: 22px 0 25px;

    color: #5b6678;

    font-family: Arial, sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.8;

}


/* ==========================================================
   LINK PROFIL
========================================================== */

.school-overview-intro .text-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    width: fit-content;

    color: #145da8;

    font-family: Arial, sans-serif;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;

}


.school-overview-intro .text-link:hover {

    color: #0878c9;

    transform:
        translateX(4px);

}


.school-overview-intro .text-link i {

    font-size: 16px;

    transition:
        transform .25s ease;

}


.school-overview-intro .text-link:hover i {

    transform:
        translateX(4px);

}


/* ==========================================================
   DATA SEKOLAH
========================================================== */

.school-overview-data {

    display: grid;

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

    gap: 12px;

    align-content: center;

    padding: 5px;

}


/* ==========================================================
   ITEM DATA
========================================================== */

.overview-data-item {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 92px;

    padding: 17px 18px;

    background: #f8fafc;

    border: 1px solid #e6ebf1;

    border-radius: 15px;

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

}


/* ==========================================================
   HOVER ITEM
========================================================== */

.overview-data-item:hover {

    transform:
        translateY(-3px);

    background: #ffffff;

    border-color: #cfe2f5;

    box-shadow:
        0 10px 25px
        rgba(15, 23, 42, .07);

}


/* ==========================================================
   LABEL
========================================================== */

.overview-data-item span {

    margin-bottom: 7px;

    color: #7b8798;

    font-family: Arial, sans-serif;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: .5px;

    text-transform: uppercase;

}


/* ==========================================================
   VALUE
========================================================== */

.overview-data-item strong {

    color: #172033;

    font-family: Arial, sans-serif;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.35;

    word-break: break-word;

}


/* ==========================================================
   DATA PERTAMA - NPSN
========================================================== */

.overview-data-item:first-child {

    background:
        linear-gradient(
            135deg,
            #f0f7ff,
            #ffffff
        );

    border-color: #d8eafa;

}


.overview-data-item:first-child strong {

    color: #145da8;

}


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

@media (max-width: 992px) {

    .school-overview-section {

        padding: 65px 0;

    }


    .school-overview-section .container {

        width: min(
            94%,
            760px
        );

    }


    .school-overview-grid {

        grid-template-columns: 1fr;

        gap: 35px;

        padding: 38px;

        border-radius: 24px;

    }


    .school-overview-intro h2 {

        font-size: 34px;

    }


    .school-overview-data {

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

    }


    .overview-data-item {

        min-height: 88px;

    }

}


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

@media (max-width: 768px) {

    .school-overview-section {

        padding: 48px 0;

    }


    .school-overview-section .container {

        width:
            calc(100% - 24px);

    }


    .school-overview-grid {

        display: block;

        padding: 28px 22px;

        border-radius: 20px;

    }


    .school-overview-intro {

        margin-bottom: 30px;

    }


    .school-overview-intro .section-kicker {

        margin-bottom: 14px;

        font-size: 11px;

        padding: 8px 13px;

    }


    .school-overview-intro h2 {

        font-size: 28px;

        line-height: 1.2;

        letter-spacing: -.6px;

    }


    .school-overview-intro h2::after {

        margin-top: 14px;

        height: 3px;

    }


    .school-overview-intro p {

        margin: 18px 0 22px;

        font-size: 15px;

        line-height: 1.7;

    }


    .school-overview-data {

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

        gap: 10px;

        padding: 0;

    }


    .overview-data-item {

        min-height: 82px;

        padding: 14px;

        border-radius: 13px;

    }


    .overview-data-item span {

        font-size: 10px;

        margin-bottom: 5px;

    }


    .overview-data-item strong {

        font-size: 15px;

    }

}


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

@media (max-width: 480px) {

    .school-overview-section .container {

        width:
            calc(100% - 16px);

    }


    .school-overview-grid {

        padding: 24px 17px;

        border-radius: 18px;

    }


    .school-overview-intro h2 {

        font-size: 25px;

    }


    .school-overview-intro p {

        font-size: 14px;

    }


    .school-overview-data {

        grid-template-columns: 1fr;

    }


    .overview-data-item {

        min-height: auto;

        padding: 15px 16px;

    }


    .overview-data-item strong {

        font-size: 15px;

    }

}
/* ==========================================================
   05. AGENDA MENDATANG
   STYLE DISESUAIKAN DENGAN SECTION BERITA
=========================================================== */


/* ==========================================================
   AGENDA SECTION
=========================================================== */

.agenda-section{

    position:relative;

    padding:90px 0 100px;

    background:

        linear-gradient(
            180deg,
            rgba(248,252,255,.96) 0%,
            rgba(241,248,252,.94) 100%
        );

    overflow:hidden;

}


/*
|--------------------------------------------------------------------------
| BACKGROUND EFFECT
|--------------------------------------------------------------------------
*/

.agenda-section::before{

    content:"";

    position:absolute;

    top:-180px;
    left:-160px;

    width:520px;
    height:520px;

    background:

        radial-gradient(
            circle,
            rgba(0,132,255,.08) 0%,
            rgba(0,132,255,.035) 38%,
            transparent 70%
        );

    pointer-events:none;

}


.agenda-section::after{

    content:"";

    position:absolute;

    right:-180px;
    bottom:-220px;

    width:560px;
    height:560px;

    background:

        radial-gradient(
            circle,
            rgba(22,157,218,.07) 0%,
            rgba(22,157,218,.025) 42%,
            transparent 72%
        );

    pointer-events:none;

}


/* ==========================================================
   CONTAINER
=========================================================== */

.agenda-section .container{

    position:relative;

    z-index:2;

}


/* ==========================================================
   HEADER ROW
=========================================================== */

.agenda-section .section-header-row{

    position:relative;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:40px;

    margin-bottom:48px;

}


/* ==========================================================
   HEADER LEFT
=========================================================== */

.agenda-section .section-header-row > div{

    flex:1;

    text-align:center;

}


/* ==========================================================
   KICKER
=========================================================== */

.agenda-section .section-kicker{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:38px;

    padding:0 18px;

    border-radius:999px;

    background:

        linear-gradient(
            135deg,
            rgba(232,247,255,.98),
            rgba(247,252,255,.98)
        );

    border:1px solid #D8ECF8;

    box-shadow:
        0 5px 16px rgba(30,112,160,.07);

    color:#1684C0;

    font-size:12px;

    font-weight:800;

    line-height:1;

    letter-spacing:1.2px;

}


/*
|--------------------------------------------------------------------------
| KICKER DOT
|--------------------------------------------------------------------------
*/

.agenda-section .section-kicker::before{

    content:"";

    width:9px;
    height:9px;

    border-radius:50%;

    background:#1598DD;

    box-shadow:
        0 0 0 5px rgba(21,152,221,.10);

}


/* ==========================================================
   TITLE
=========================================================== */

.agenda-section .section-header-row h2{

    position:relative;

    margin:16px 0 12px;

    padding-bottom:17px;

    color:#16253D;

    font-size:42px;

    line-height:1.12;

    font-weight:800;

    letter-spacing:-1.5px;

}


/*
|--------------------------------------------------------------------------
| TITLE BLUE
|--------------------------------------------------------------------------
*/

.agenda-section .section-header-row h2 span{

    color:#1683B8;

}


/*
|--------------------------------------------------------------------------
| TITLE UNDERLINE
|--------------------------------------------------------------------------
*/

.agenda-section .section-header-row h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:92px;
    height:4px;

    transform:translateX(-50%);

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            #1679F5,
            #258AD9
        );

}


/* ==========================================================
   DESCRIPTION
=========================================================== */

.agenda-section .section-header-row p{

    max-width:650px;

    margin:0 auto;

    color:#667A91;

    font-size:17px;

    line-height:1.65;

    font-weight:600;

}


/* ==========================================================
   CALENDAR BUTTON
=========================================================== */

.agenda-section .outline-button{

    flex-shrink:0;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:48px;

    padding:0 20px;

    border:1px solid #D4E1EC;

    border-radius:8px;

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

    color:#174E79;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    box-shadow:
        0 5px 15px rgba(35,80,110,.04);

    transition:
        .25s ease;

}


.agenda-section .outline-button i{

    font-size:15px;

    transition:
        transform .25s ease;

}


.agenda-section .outline-button:hover{

    color:#087AB7;

    border-color:#B8D8EA;

    background:#fff;

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(35,80,110,.08);

}


.agenda-section .outline-button:hover i{

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

}


/* ==========================================================
   AGENDA GRID
=========================================================== */

.agenda-home-grid{

    display:grid;

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

    gap:30px;

    align-items:stretch;

}


/* ==========================================================
   AGENDA CARD
=========================================================== */

.agenda-home-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-width:0;

    min-height:100%;

    padding:0;

    overflow:hidden;

    border-radius:20px;

    background:#fff;

    border:1px solid rgba(220,230,238,.75);

    box-shadow:
        0 12px 32px rgba(35,77,105,.09);

    color:inherit;

    text-decoration:none;

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

}


/* ==========================================================
   CARD HOVER
=========================================================== */

.agenda-home-card:hover{

    transform:
        translateY(-7px);

    border-color:#D1E5F0;

    box-shadow:
        0 20px 42px rgba(25,80,115,.14);

}


/* ==========================================================
   DATE AREA
=========================================================== */

.agenda-home-date{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    flex-shrink:0;

    width:100%;

    min-height:112px;

    padding:20px;

    background:

        linear-gradient(
            135deg,
            #EFF9FE 0%,
            #F7FCFF 100%
        );

    border-bottom:1px solid #E5EFF5;

}


/*
|--------------------------------------------------------------------------
| DATE NUMBER
|--------------------------------------------------------------------------
*/

.agenda-home-date strong{

    display:block;

    color:#123A59;

    font-size:42px;

    line-height:.95;

    font-weight:800;

    letter-spacing:-1px;

}


/*
|--------------------------------------------------------------------------
| MONTH
|--------------------------------------------------------------------------
*/

.agenda-home-date span{

    display:block;

    margin-top:8px;

    color:#1381B8;

    font-size:12px;

    line-height:1;

    font-weight:800;

    letter-spacing:1.5px;

}


/* ==========================================================
   DATE DECORATION
=========================================================== */

.agenda-home-date::after{

    content:"";

    position:absolute;

    top:18px;

    right:18px;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#1594D0;

    box-shadow:
        0 0 0 5px rgba(21,148,208,.10);

}


/* ==========================================================
   CONTENT
=========================================================== */

.agenda-home-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:22px 23px 24px;

}


/* ==========================================================
   CATEGORY
=========================================================== */

.agenda-home-content > span{

    align-self:flex-start;

    display:inline-flex;

    align-items:center;

    min-height:28px;

    padding:0 11px;

    border-radius:7px;

    background:#E9F6FC;

    color:#147DAF;

    font-size:10px;

    line-height:1;

    font-weight:800;

    letter-spacing:.55px;

}


/* ==========================================================
   TITLE
=========================================================== */

.agenda-home-content h3{

    margin:14px 0 10px;

    color:#18384E;

    font-size:20px;

    line-height:1.3;

    font-weight:800;

    letter-spacing:-.35px;

}


/* ==========================================================
   DESCRIPTION
=========================================================== */

.agenda-home-content p{

    display:-webkit-box;

    overflow:hidden;

    margin:0;

    color:#74889A;

    font-size:14px;

    line-height:1.65;

    font-weight:500;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

}


/* ==========================================================
   ARROW CARD
=========================================================== */

.agenda-home-card > i{

    position:absolute;

    right:22px;

    bottom:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;
    height:34px;

    border-radius:50%;

    background:#F0F7FB;

    color:#1382B7;

    font-size:15px;

    transition:
        .25s ease;

}


.agenda-home-card:hover > i{

    color:#fff;

    background:#137FAE;

    transform:
        translate(2px,-2px);

}


/* ==========================================================
   COUNTDOWN
=========================================================== */

.agenda-countdown{

    margin-top:auto;

    padding-top:18px;

    margin-right:0;

}


/* ==========================================================
   COUNTDOWN LABEL
=========================================================== */

.agenda-countdown-label{

    display:flex;

    align-items:center;

    gap:7px;

    margin-bottom:10px;

    color:#8294A4;

    font-size:10px;

    line-height:1;

    font-weight:800;

    letter-spacing:.6px;

    text-transform:uppercase;

}


.agenda-countdown-label i{

    color:#1687BB;

    font-size:13px;

}


/* ==========================================================
   COUNTDOWN TIME
=========================================================== */

.agenda-countdown-time{

    display:grid;

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

    gap:5px;

}


/* ==========================================================
   COUNTDOWN BOX
=========================================================== */

.agenda-countdown-box{

    min-width:0;

    padding:8px 3px;

    border:1px solid #E2EDF3;

    border-radius:8px;

    background:#F8FBFD;

    text-align:center;

    transition:
        background .2s ease,
        border-color .2s ease;

}


.agenda-countdown-box strong{

    display:block;

    color:#163A55;

    font-size:16px;

    line-height:1.1;

    font-weight:800;

    font-variant-numeric:tabular-nums;

}


.agenda-countdown-box span{

    display:block;

    margin-top:4px;

    color:#8A9AA8;

    font-size:8px;

    line-height:1;

    font-weight:700;

    letter-spacing:.3px;

    text-transform:uppercase;

}


/* ==========================================================
   COUNTDOWN HOVER
=========================================================== */

.agenda-home-card:hover
.agenda-countdown-box{

    border-color:#D4E8F2;

    background:#F3FAFD;

}


/* ==========================================================
   TODAY STATUS
=========================================================== */

.agenda-countdown.is-today{

    padding-top:17px;

}


.agenda-countdown-today{

    display:flex;

    align-items:center;

    gap:8px;

    min-height:39px;

    padding:0 12px;

    border:1px solid #DCEBF2;

    border-radius:8px;

    background:#F4FAFD;

    color:#157BA9;

    font-size:12px;

    font-weight:800;

}


.agenda-countdown-today i{

    color:#1686B9;

    font-size:14px;

}


/* ==========================================================
   EMPTY STATE
=========================================================== */

.agenda-section .latest-news-empty{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    min-height:280px;

    padding:45px 25px;

    border:1px solid #E0EAF0;

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 12px 32px rgba(35,77,105,.07);

    text-align:center;

}


.agenda-section .latest-news-empty > div{

    display:flex;

    align-items:center;

    justify-content:center;

    width:62px;
    height:62px;

    margin-bottom:18px;

    border-radius:50%;

    background:#EDF8FD;

    color:#1685B6;

}


.agenda-section .latest-news-empty > div i{

    font-size:25px;

}


.agenda-section .latest-news-empty h3{

    margin:0 0 8px;

    color:#18384E;

    font-size:20px;

    font-weight:800;

}


.agenda-section .latest-news-empty p{

    max-width:500px;

    margin:0;

    color:#7A8D9C;

    font-size:14px;

    line-height:1.6;

}


/* ==========================================================
   LARGE DESKTOP
=========================================================== */

@media (max-width:1400px){

    .agenda-home-grid{

        gap:24px;

    }


    .agenda-home-content{

        padding:
            20px 20px 22px;

    }


    .agenda-home-content h3{

        font-size:18px;

    }

}


/* ==========================================================
   DESKTOP / LAPTOP
=========================================================== */

@media (max-width:1200px){

    .agenda-section{

        padding:
            80px 0 90px;

    }


    .agenda-home-grid{

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

        gap:24px;

    }


    .agenda-section .section-header-row{

        margin-bottom:40px;

    }


    .agenda-section .section-header-row h2{

        font-size:38px;

    }


    .agenda-section .section-header-row p{

        font-size:16px;

    }

}


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

@media (max-width:992px){

    .agenda-section{

        padding:
            70px 0 80px;

    }


    .agenda-section .section-header-row{

        align-items:center;

        flex-direction:column;

        gap:24px;

    }


    .agenda-section .section-header-row > div{

        width:100%;

    }


    .agenda-section .outline-button{

        align-self:center;

    }


    .agenda-home-grid{

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

    }


    .agenda-home-date{

        min-height:105px;

    }


    .agenda-home-date strong{

        font-size:38px;

    }

}


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

@media (max-width:768px){

    .agenda-section{

        padding:
            60px 0 70px;

    }


    .agenda-section .section-header-row{

        margin-bottom:32px;

    }


    .agenda-section .section-kicker{

        min-height:35px;

        padding:0 15px;

        font-size:10px;

    }


    .agenda-section .section-header-row h2{

        margin-top:14px;

        font-size:32px;

        letter-spacing:-1px;

    }


    .agenda-section .section-header-row p{

        padding:
            0 15px;

        font-size:14px;

        line-height:1.6;

    }


    .agenda-home-grid{

        grid-template-columns:
            1fr;

        gap:20px;

    }


    .agenda-home-card{

        border-radius:18px;

    }


    .agenda-home-date{

        min-height:100px;

    }


    .agenda-home-content{

        padding:
            20px;

    }


    .agenda-home-content h3{

        font-size:19px;

    }


    .agenda-home-content p{

        font-size:14px;

    }

}


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

@media (max-width:576px){

    .agenda-section{

        padding:
            50px 0 60px;

    }


    .agenda-section .section-header-row h2{

        font-size:29px;

    }


    .agenda-section .section-header-row h2::after{

        width:76px;

        height:3px;

    }


    .agenda-section .outline-button{

        width:100%;

        min-height:46px;

    }


    .agenda-home-grid{

        gap:17px;

    }


    .agenda-home-date{

        min-height:92px;

    }


    .agenda-home-date strong{

        font-size:35px;

    }


    .agenda-home-date span{

        font-size:11px;

    }


    .agenda-home-content{

        padding:
            19px;

    }


    .agenda-home-content h3{

        font-size:18px;

        line-height:1.35;

    }


    .agenda-home-content p{

        font-size:13px;

        line-height:1.6;

    }


    .agenda-countdown-time{

        gap:4px;

    }


    .agenda-countdown-box{

        padding:
            7px 2px;

    }


    .agenda-countdown-box strong{

        font-size:14px;

    }


    .agenda-countdown-box span{

        font-size:7px;

    }


    .agenda-home-card > i{

        right:18px;

        bottom:18px;

        width:32px;
        height:32px;

    }

}


/* ==========================================================
   VERY SMALL MOBILE
=========================================================== */

@media (max-width:380px){

    .agenda-section .section-header-row h2{

        font-size:26px;

    }


    .agenda-home-date{

        min-height:88px;

    }


    .agenda-home-date strong{

        font-size:32px;

    }


    .agenda-home-content h3{

        font-size:17px;

    }


    .agenda-countdown-box strong{

        font-size:13px;

    }

}
/* ==========================================================
   FIX 4 CARD AGENDA
   SEMUA CARD SEJAJAR & UKURAN SAMA
=========================================================== */


/* ==========================================================
   GRID 4 KOLOM PRESISI
=========================================================== */

.agenda-home-grid{

    display:grid !important;

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

    gap:28px !important;

    align-items:stretch !important;

}


/* ==========================================================
   CARD
=========================================================== */

.agenda-home-card{

    display:flex !important;

    flex-direction:column !important;

    width:100% !important;

    height:100% !important;

    min-height:590px !important;

    margin:0 !important;

    padding:0 !important;

    box-sizing:border-box !important;

}


/* ==========================================================
   BAGIAN TANGGAL
   SAMA SEMUA
=========================================================== */

.agenda-home-date{

    flex:0 0 110px !important;

    width:100% !important;

    min-height:110px !important;

    height:110px !important;

    box-sizing:border-box !important;

}


/* ==========================================================
   CONTENT
=========================================================== */

.agenda-home-content{

    display:flex !important;

    flex-direction:column !important;

    flex:1 1 auto !important;

    width:100% !important;

    min-height:0 !important;

    box-sizing:border-box !important;

}


/* ==========================================================
   JUDUL
   BATASI AGAR TINGGI TIDAK BERBEDA JAUH
=========================================================== */

.agenda-home-content h3{

    min-height:52px !important;

    max-height:54px !important;

    margin-bottom:10px !important;

    overflow:hidden !important;

    display:-webkit-box !important;

    -webkit-line-clamp:2 !important;

    -webkit-box-orient:vertical !important;

}


/* ==========================================================
   DESKRIPSI
   SEMUA 3 BARIS
=========================================================== */

.agenda-home-content p{

    min-height:69px !important;

    max-height:69px !important;

    overflow:hidden !important;

    display:-webkit-box !important;

    -webkit-line-clamp:3 !important;

    -webkit-box-orient:vertical !important;

}


/* ==========================================================
   COUNTDOWN
   SELALU DI POSISI BAWAH YANG SAMA
=========================================================== */

.agenda-countdown{

    width:100% !important;

    margin-top:auto !important;

    padding-top:18px !important;

    box-sizing:border-box !important;

}


/* ==========================================================
   COUNTDOWN BOX
=========================================================== */

.agenda-countdown-time{

    display:grid !important;

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

    gap:5px !important;

    width:100% !important;

}


.agenda-countdown-box{

    width:100% !important;

    min-width:0 !important;

    height:52px !important;

    padding:8px 3px !important;

    box-sizing:border-box !important;

}


/* ==========================================================
   PANJANG CARD
=========================================================== */

.agenda-home-card > i{

    bottom:22px !important;

}


/* ==========================================================
   DESKTOP BESAR
=========================================================== */

@media (min-width:1401px){

    .agenda-home-grid{

        gap:30px !important;

    }


    .agenda-home-card{

        min-height:600px !important;

    }


    .agenda-home-content{

        padding:
            22px 23px 24px !important;

    }

}


/* ==========================================================
   LAPTOP
=========================================================== */

@media (min-width:993px) and (max-width:1200px){

    .agenda-home-grid{

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

        gap:18px !important;

    }


    .agenda-home-card{

        min-height:570px !important;

        border-radius:17px !important;

    }


    .agenda-home-date{

        flex-basis:100px !important;

        height:100px !important;

        min-height:100px !important;

    }


    .agenda-home-date strong{

        font-size:35px !important;

    }


    .agenda-home-content{

        padding:
            18px !important;

    }


    .agenda-home-content h3{

        font-size:17px !important;

        line-height:1.3 !important;

        min-height:45px !important;

        max-height:46px !important;

    }


    .agenda-home-content p{

        font-size:13px !important;

        line-height:1.55 !important;

        min-height:60px !important;

        max-height:60px !important;

    }


    .agenda-countdown-box{

        height:48px !important;

    }


    .agenda-countdown-box strong{

        font-size:14px !important;

    }


    .agenda-countdown-box span{

        font-size:7px !important;

    }

}


/* ==========================================================
   TABLET
   2 CARD PER BARIS
=========================================================== */

@media (min-width:577px) and (max-width:992px){

    .agenda-home-grid{

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

        gap:22px !important;

    }


    .agenda-home-card{

        min-height:570px !important;

    }


    .agenda-home-date{

        flex-basis:105px !important;

        height:105px !important;

        min-height:105px !important;

    }

}


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

@media (max-width:576px){

    .agenda-home-grid{

        grid-template-columns:
            1fr !important;

        gap:20px !important;

    }


    .agenda-home-card{

        min-height:560px !important;

    }


    .agenda-home-date{

        flex-basis:100px !important;

        height:100px !important;

        min-height:100px !important;

    }


    .agenda-home-content h3{

        min-height:48px !important;

        max-height:50px !important;

    }


    .agenda-home-content p{

        min-height:63px !important;

        max-height:63px !important;

    }

}
/* ==========================================================
   OVERRIDE TAMBAHAN - AGENDA MENDATANG
   JANGAN HAPUS CSS LAMA
========================================================== */


/* ==========================================================
   1. TANGGAL AGENDA - PUTIH LEBIH TERANG
========================================================== */

.agenda-date,
.agenda-date *,
.event-date,
.event-date *,
.card-date,
.card-date *,
.date-box,
.date-box * {

    color:#ffffff !important;

    opacity:1 !important;

}


/* ANGKA TANGGAL */

.agenda-date .day,
.event-date .day,
.card-date .day,
.date-box .day,
.agenda-day {

    color:#ffffff !important;

    font-weight:800 !important;

}


/* BULAN */

.agenda-date .month,
.event-date .month,
.card-date .month,
.date-box .month,
.agenda-month {

    color:#ffffff !important;

    opacity:1 !important;

    font-weight:700 !important;

}


/* ==========================================================
   2. MENUJU KEGIATAN - NAIK SEDIKIT
========================================================== */

.agenda-countdown,
.countdown-wrapper,
.event-countdown,
.agenda-card-countdown,
.countdown-section {

    margin-top:-8px !important;

}


/* Jika bagian countdown menggunakan border atas */

.agenda-countdown,
.countdown-wrapper,
.event-countdown {

    padding-top:16px !important;

}


/* ==========================================================
   3. JUDUL "MENUJU KEGIATAN"
========================================================== */

.agenda-countdown-title,
.countdown-title,
.event-countdown-title {

    margin-top:0 !important;

    margin-bottom:10px !important;

}


/* ==========================================================
   4. KHUSUS BAGIAN LABEL CLOCK / MENUJU KEGIATAN
========================================================== */

.agenda-card .countdown,
.agenda-card .countdown-header,
.agenda-card .countdown-label,
.event-card .countdown,
.event-card .countdown-header,
.event-card .countdown-label {

    transform:translateY(-6px);

}


/* ==========================================================
   5. BOX HARI / JAM / MENIT / DETIK
========================================================== */

.agenda-card .countdown-box,
.agenda-card .time-box,
.event-card .countdown-box,
.event-card .time-box {

    transform:translateY(-5px);

}


/* ==========================================================
   6. AGAR TIDAK TERLALU JAUH DARI NARASI
========================================================== */

.agenda-card .description,
.event-card .description {

    margin-bottom:18px !important;

}


/* ==========================================================
   7. RESPONSIVE - LAPTOP
========================================================== */

@media (max-width:1200px){

    .agenda-countdown,
    .countdown-wrapper,
    .event-countdown,
    .agenda-card-countdown {

        margin-top:-6px !important;

    }

}


/* ==========================================================
   8. RESPONSIVE - TABLET
========================================================== */

@media (max-width:992px){

    .agenda-countdown,
    .countdown-wrapper,
    .event-countdown,
    .agenda-card-countdown {

        margin-top:-5px !important;

    }

}


/* ==========================================================
   9. RESPONSIVE - MOBILE
========================================================== */

@media (max-width:768px){

    .agenda-countdown,
    .countdown-wrapper,
    .event-countdown,
    .agenda-card-countdown {

        margin-top:-4px !important;

    }

    .agenda-date,
    .event-date,
    .card-date,
    .date-box {

        color:#ffffff !important;

    }

}
/* ==========================================================
   OVERRIDE AGENDA
   - MENUJU KEGIATAN LEBIH NAIK
   - COUNTDOWN LEBIH COMPACT
   - TANGGAL PUTIH TERANG
========================================================== */


/* ==========================================================
   TANGGAL AGENDA
=========================================================== */

.agenda-home-date strong,
.agenda-home-date span{

    color:#FFFFFF !important;

}


/* ==========================================================
   AREA COUNTDOWN
   NAIKKAN POSISI MENUJU KEGIATAN
=========================================================== */

.agenda-countdown{

    margin-top:10px !important;

    padding-top:10px !important;

}


/* ==========================================================
   GARIS PEMBATAS
=========================================================== */

.agenda-countdown{

    border-top:1px solid #EEF2F7 !important;

}


/* ==========================================================
   LABEL MENUJU KEGIATAN
=========================================================== */

.agenda-countdown-label{

    margin-bottom:7px !important;

    gap:6px !important;

    font-size:10px !important;

    line-height:1.2 !important;

}


/* ==========================================================
   ICON LABEL
=========================================================== */

.agenda-countdown-label i{

    font-size:12px !important;

}


/* ==========================================================
   AREA BOX COUNTDOWN
=========================================================== */

.agenda-countdown-time{

    gap:5px !important;

}


/* ==========================================================
   BOX COUNTDOWN
=========================================================== */

.agenda-countdown-box{

    min-width:0 !important;

    padding:6px 5px !important;

    border-radius:8px !important;

}


/* ==========================================================
   ANGKA COUNTDOWN
=========================================================== */

.agenda-countdown-box strong{

    font-size:15px !important;

    line-height:1.05 !important;

}


/* ==========================================================
   LABEL HARI / JAM / MENIT / DETIK
=========================================================== */

.agenda-countdown-box span{

    margin-top:3px !important;

    font-size:8px !important;

    line-height:1 !important;

}


/* ==========================================================
   STATUS HARI INI
=========================================================== */

.agenda-countdown-today{

    padding:8px 11px !important;

    font-size:11px !important;

    border-radius:8px !important;

}


/* ==========================================================
   JIKA DESKRIPSI TERLALU PANJANG
   SUPAYA COUNTDOWN TETAP RAPI
=========================================================== */

.agenda-home-content > p{

    margin-bottom:0 !important;

}


/* ==========================================================
   DESKTOP
=========================================================== */

@media (min-width:993px){

    .agenda-countdown{

        margin-top:9px !important;

        padding-top:9px !important;

    }


    .agenda-countdown-label{

        margin-bottom:6px !important;

    }


    .agenda-countdown-box{

        flex:1;

    }

}


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

@media (max-width:992px){

    .agenda-countdown{

        margin-top:9px !important;

        padding-top:9px !important;

    }


    .agenda-countdown-label{

        margin-bottom:6px !important;

    }


    .agenda-countdown-box{

        min-width:0 !important;

        flex:1;

        padding:6px 4px !important;

    }


    .agenda-countdown-box strong{

        font-size:14px !important;

    }

}


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

@media (max-width:576px){

    .agenda-countdown{

        margin-top:8px !important;

        padding-top:8px !important;

    }


    .agenda-countdown-label{

        margin-bottom:6px !important;

        font-size:9px !important;

    }


    .agenda-countdown-time{

        gap:4px !important;

    }


    .agenda-countdown-box{

        flex:1;

        min-width:0 !important;

        padding:6px 3px !important;

        border-radius:7px !important;

    }


    .agenda-countdown-box strong{

        font-size:13px !important;

    }


    .agenda-countdown-box span{

        margin-top:3px !important;

        font-size:7px !important;

    }

}
/* ==========================================================
   FINAL OVERRIDE AGENDA CARD
   - HILANGKAN SPACE PUTIH PANJANG
   - NARASI TIDAK DIPOTONG
   - CARD TETAP RAPI DAN SEJAJAR
=========================================================== */


/* ==========================================================
   GRID AGENDA
=========================================================== */

.agenda-home-grid{

    align-items:stretch !important;

}


/* ==========================================================
   CARD AGENDA
   HAPUS TINGGI PAKSA
=========================================================== */

.agenda-home-card{

    height:auto !important;

    min-height:0 !important;

    max-height:none !important;

    padding-bottom:22px !important;

    display:flex !important;

    flex-direction:column !important;

}


/* ==========================================================
   CONTENT CARD
=========================================================== */

.agenda-home-content{

    height:auto !important;

    min-height:0 !important;

    overflow:visible !important;

}


/* ==========================================================
   JUDUL
   JANGAN POTONG NARASI
=========================================================== */

.agenda-home-content h3{

    display:block !important;

    overflow:visible !important;

    text-overflow:unset !important;

    -webkit-line-clamp:unset !important;

    -webkit-box-orient:unset !important;

    white-space:normal !important;

}


/* ==========================================================
   DESKRIPSI
   JANGAN DIPOTONG
=========================================================== */

.agenda-home-content p{

    display:block !important;

    height:auto !important;

    min-height:0 !important;

    max-height:none !important;

    overflow:visible !important;

    text-overflow:unset !important;

    -webkit-line-clamp:unset !important;

    -webkit-box-orient:unset !important;

    white-space:normal !important;

    margin-bottom:0 !important;

}


/* ==========================================================
   COUNTDOWN
   LEBIH DEKAT DENGAN NARASI
=========================================================== */

.agenda-countdown{

    margin-top:10px !important;

    padding-top:9px !important;

    margin-bottom:0 !important;

}


/* ==========================================================
   LABEL COUNTDOWN
=========================================================== */

.agenda-countdown-label{

    margin-bottom:6px !important;

}


/* ==========================================================
   BOX COUNTDOWN
=========================================================== */

.agenda-countdown-box{

    padding:6px 5px !important;

}


/* ==========================================================
   PANAH CARD
   JANGAN MEMBUAT RUANG KOSONG DI BAWAH
=========================================================== */

.agenda-home-card > .bi-arrow-up-right{

    position:relative !important;

    right:auto !important;

    bottom:auto !important;

    align-self:flex-end !important;

    margin-top:18px !important;

    flex-shrink:0 !important;

}


/* ==========================================================
   TANGGAL TETAP PUTIH
=========================================================== */

.agenda-home-date strong,
.agenda-home-date span{

    color:#FFFFFF !important;

}


/* ==========================================================
   DESKTOP
=========================================================== */

@media (min-width:993px){

    .agenda-home-card{

        padding-bottom:20px !important;

    }


    .agenda-home-content{

        flex:0 0 auto !important;

    }


    .agenda-home-card > .bi-arrow-up-right{

        margin-top:18px !important;

    }

}


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

@media (max-width:992px){

    .agenda-home-card{

        padding-bottom:20px !important;

    }


    .agenda-home-card > .bi-arrow-up-right{

        margin-top:16px !important;

    }

}


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

@media (max-width:576px){

    .agenda-home-card{

        padding-bottom:18px !important;

    }


    .agenda-countdown{

        margin-top:8px !important;

        padding-top:8px !important;

    }


    .agenda-home-card > .bi-arrow-up-right{

        margin-top:15px !important;

    }

}


/* ==========================================================
   SERVICES SECTION
=========================================================== */

.services-section{

    position:relative;

    padding:90px 0;

    background:#F8FBFE;

}


/* ==========================================================
   HEADER
=========================================================== */

.services-section .section-header-row{

    margin-bottom:38px;

}


.services-section .section-kicker{

    display:inline-block;

    margin-bottom:10px;

    font-size:12px;

    line-height:1.2;

    font-weight:800;

    letter-spacing:1px;

    color:#0B82D5;

}


.services-section .section-header-row h2{

    margin:0;

    font-size:38px;

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1px;

    color:#172033;

}


.services-section .section-header-row h2 span{

    color:#1678C4;

}


.services-section .section-header-row p{

    margin:12px 0 0;

    max-width:680px;

    font-size:15px;

    line-height:1.7;

    font-weight:500;

    color:#64748B;

}


/* ==========================================================
   SERVICES GRID
=========================================================== */

.services-home-grid{

    display:grid;

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

    gap:24px;

    align-items:stretch;

}


/* ==========================================================
   SERVICE CARD
=========================================================== */

.service-home-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:auto;

    min-height:0;

    padding:28px 26px 24px;

    border:1px solid #E2EAF2;

    border-radius:18px;

    background:#FFFFFF;

    text-decoration:none;

    overflow:hidden;

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

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

}


/* ==========================================================
   GARIS AKSEN KIRI
=========================================================== */

.service-home-card::before{

    content:"";

    position:absolute;

    left:0;

    top:22px;

    bottom:22px;

    width:4px;

    border-radius:0 5px 5px 0;

    background:#0B82D5;

}


/* ==========================================================
   HOVER CARD
=========================================================== */

.service-home-card:hover{

    transform:translateY(-5px);

    border-color:#D5E7F5;

    box-shadow:
        0 18px 40px rgba(
            15,
            23,
            42,
            .10
        );

}


/* ==========================================================
   ICON
=========================================================== */

.service-home-icon{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

    border-radius:14px;

    background:#EAF6FD;

    color:#087CC1;

    flex-shrink:0;

}


.service-home-icon i{

    font-size:24px;

    line-height:1;

}


/* ==========================================================
   LABEL
=========================================================== */

.service-home-card > div:last-of-type > span{

    display:inline-block;

    margin-bottom:9px;

    padding:7px 11px;

    border-radius:7px;

    background:#EAF6FD;

    font-size:10px;

    line-height:1;

    font-weight:800;

    letter-spacing:.7px;

    color:#087CC1;

}


/* ==========================================================
   JUDUL
=========================================================== */

.service-home-card h3{

    margin:0;

    font-size:20px;

    line-height:1.35;

    font-weight:800;

    letter-spacing:-.3px;

    color:#172033;

}


/* ==========================================================
   DESKRIPSI
=========================================================== */

.service-home-card p{

    margin:12px 0 0;

    font-size:14px;

    line-height:1.7;

    font-weight:500;

    color:#64748B;

    height:auto;

    min-height:0;

    max-height:none;

    overflow:visible;

    display:block;

    text-overflow:unset;

    -webkit-line-clamp:unset;

    -webkit-box-orient:unset;

}


/* ==========================================================
   PANAH
=========================================================== */

.service-home-card > .bi-arrow-up-right{

    align-self:flex-end;

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    margin-top:22px;

    border-radius:50%;

    background:#EDF7FE;

    color:#087CC1;

    font-size:18px;

    flex-shrink:0;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;

}


.service-home-card:hover > .bi-arrow-up-right{

    transform:translate(
        2px,
        -2px
    );

    background:#087CC1;

    color:#FFFFFF;

}


/* ==========================================================
   CARD CONTENT
=========================================================== */

.service-home-card > div:nth-child(2){

    height:auto;

    min-height:0;

}


/* ==========================================================
   DESKTOP BESAR
=========================================================== */

@media (min-width:1201px){

    .services-section{

        padding:90px 0;

    }


    .services-home-grid{

        gap:24px;

    }


    .service-home-card{

        padding:28px 26px 24px;

    }

}


/* ==========================================================
   LAPTOP
=========================================================== */

@media (max-width:1200px){

    .services-section{

        padding:75px 0;

    }


    .services-home-grid{

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

        gap:20px;

    }


    .services-section .section-header-row h2{

        font-size:34px;

    }


    .service-home-card{

        padding:25px 23px 22px;

    }


    .service-home-icon{

        width:50px;

        height:50px;

        margin-bottom:20px;

    }


    .service-home-card h3{

        font-size:19px;

    }

}


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

@media (max-width:992px){

    .services-section{

        padding:65px 0;

    }


    .services-section .section-header-row{

        margin-bottom:30px;

    }


    .services-section .section-header-row h2{

        font-size:31px;

    }


    .services-section .section-header-row p{

        font-size:14px;

    }


    .services-home-grid{

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

        gap:18px;

    }


    .service-home-card{

        padding:23px 21px 21px;

        border-radius:16px;

    }


    .service-home-card::before{

        top:20px;

        bottom:20px;

        width:3px;

    }


    .service-home-icon{

        width:48px;

        height:48px;

        margin-bottom:18px;

        border-radius:12px;

    }


    .service-home-icon i{

        font-size:22px;

    }


    .service-home-card h3{

        font-size:18px;

        line-height:1.35;

    }


    .service-home-card p{

        margin-top:10px;

        font-size:13px;

        line-height:1.65;

    }


    .service-home-card > .bi-arrow-up-right{

        width:38px;

        height:38px;

        margin-top:18px;

        font-size:16px;

    }

}


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

@media (max-width:768px){

    .services-section{

        padding:55px 0;

    }


    .services-section .section-header-row{

        margin-bottom:26px;

    }


    .services-section .section-kicker{

        font-size:10px;

        margin-bottom:8px;

    }


    .services-section .section-header-row h2{

        font-size:27px;

        letter-spacing:-.6px;

    }


    .services-section .section-header-row p{

        margin-top:9px;

        font-size:13px;

        line-height:1.6;

    }


    .services-home-grid{

        grid-template-columns:
            1fr;

        gap:15px;

    }


    .service-home-card{

        padding:22px 20px 20px;

        border-radius:15px;

    }


    .service-home-card::before{

        top:18px;

        bottom:18px;

    }


    .service-home-icon{

        width:46px;

        height:46px;

        margin-bottom:17px;

        border-radius:11px;

    }


    .service-home-icon i{

        font-size:21px;

    }


    .service-home-card > div:last-of-type > span{

        margin-bottom:8px;

        padding:6px 9px;

        font-size:9px;

    }


    .service-home-card h3{

        font-size:18px;

    }


    .service-home-card p{

        margin-top:9px;

        font-size:13px;

        line-height:1.65;

    }


    .service-home-card > .bi-arrow-up-right{

        width:36px;

        height:36px;

        margin-top:17px;

        font-size:15px;

    }

}


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

@media (max-width:576px){

    .services-section{

        padding:48px 0;

    }


    .services-section .section-header-row h2{

        font-size:25px;

    }


    .services-home-grid{

        gap:13px;

    }


    .service-home-card{

        padding:20px 18px 18px;

    }


    .service-home-icon{

        width:44px;

        height:44px;

        margin-bottom:15px;

    }


    .service-home-card h3{

        font-size:17px;

    }


    .service-home-card p{

        font-size:12.5px;

    }

}


/* ==========================================================
   HP SANGAT KECIL
=========================================================== */

@media (max-width:400px){

    .services-section{

        padding:42px 0;

    }


    .services-section .section-header-row h2{

        font-size:23px;

    }


    .service-home-card{

        padding:19px 17px 17px;

    }


    .service-home-card h3{

        font-size:16px;

    }


    .service-home-card p{

        font-size:12px;

    }

}

/* ==========================================================
   MODERN PEMERINTAH — HEADER LAYANAN SEKOLAH
========================================================== */

.services-section{
    position:relative;
    overflow:hidden;
    padding:72px 20px 76px;
    background:
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #eef5f1 45%,
            #f8fafc 100%
        );
    isolation:isolate;
}


/* ==========================================================
   BACKGROUND GRID HALUS
========================================================== */

.services-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-3;

    background-image:
        linear-gradient(
            rgba(15,118,110,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(15,118,110,.045) 1px,
            transparent 1px
        );

    background-size:42px 42px;

    mask-image:linear-gradient(
        to bottom,
        transparent,
        #000 20%,
        #000 80%,
        transparent
    );
}


/* ==========================================================
   BACKGROUND CAHAYA BERGERAK
========================================================== */

.services-section::after{
    content:"";
    position:absolute;
    width:520px;
    height:520px;

    top:-260px;
    left:50%;
    transform:translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(13,148,136,.12) 0%,
            rgba(13,148,136,.055) 35%,
            transparent 70%
        );

    border-radius:50%;
    filter:blur(10px);

    z-index:-2;

    animation:
        servicesGlow 9s ease-in-out infinite alternate;
}


/* ==========================================================
   ORNAMEN BACKGROUND
========================================================== */

.services-bg-animation{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:-1;
}

.services-bg-animation span{
    position:absolute;
    display:block;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(13,148,136,.07),
            rgba(13,148,136,0)
        );

    filter:blur(3px);

    animation:
        servicesFloat 14s ease-in-out infinite;
}


/* posisi ornamen */

.services-bg-animation span:nth-child(1){
    top:8%;
    left:8%;
    animation-delay:0s;
}

.services-bg-animation span:nth-child(2){
    top:55%;
    right:5%;
    width:230px;
    height:230px;
    animation-delay:-4s;
}

.services-bg-animation span:nth-child(3){
    bottom:-80px;
    left:30%;
    width:260px;
    height:260px;
    animation-delay:-8s;
}

.services-bg-animation span:nth-child(4){
    top:25%;
    right:25%;
    width:120px;
    height:120px;
    animation-delay:-11s;
}


/* ==========================================================
   CONTAINER
========================================================== */

.services-section .container{
    position:relative;
    z-index:2;
}


/* ==========================================================
   HEADER MODERN
========================================================== */

.services-header-modern{
    max-width:820px;
    margin:0 auto;
    text-align:center;

    display:flex;
    flex-direction:column;
    align-items:center;
}


/* ==========================================================
   KICKER
========================================================== */

.services-kicker{
    position:relative;

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

    margin-bottom:18px;
    padding:8px 18px;

    border:1px solid rgba(15,118,110,.18);
    border-radius:999px;

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

    color:#0f766e;

    font-size:12px;
    font-weight:800;
    letter-spacing:1.8px;
    line-height:1;

    box-shadow:
        0 5px 18px rgba(15,118,110,.07);

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


/* garis kecil khas desain pemerintahan */

.services-kicker::before{
    content:"";

    width:7px;
    height:7px;

    margin-right:9px;

    border-radius:50%;

    background:#0f766e;

    box-shadow:
        0 0 0 4px rgba(15,118,110,.09);
}


/* ==========================================================
   JUDUL
========================================================== */

.services-header-modern h2{
    margin:0;

    color:#173b3a;

    font-size:clamp(
        30px,
        4vw,
        46px
    );

    font-weight:800;
    line-height:1.18;

    letter-spacing:-1.1px;

    text-align:center;
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.services-header-modern p{
    max-width:650px;

    margin:16px auto 0;

    color:#64748b;

    font-size:16px;
    font-weight:400;

    line-height:1.75;

    text-align:center;
}


/* ==========================================================
   ANIMASI CAHAYA
========================================================== */

@keyframes servicesGlow{

    0%{
        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }

    50%{
        transform:
            translateX(-50%)
            translateY(45px)
            scale(1.08);
    }

    100%{
        transform:
            translateX(-50%)
            translateY(10px)
            scale(.96);
    }

}


/* ==========================================================
   ANIMASI ORNAMEN
========================================================== */

@keyframes servicesFloat{

    0%{
        transform:
            translate3d(0,0,0)
            scale(1);
        opacity:.55;
    }

    50%{
        transform:
            translate3d(35px,-25px,0)
            scale(1.08);
        opacity:.8;
    }

    100%{
        transform:
            translate3d(-20px,25px,0)
            scale(.94);
        opacity:.45;
    }

}


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

@media (max-width:992px){

    .services-section{
        padding:62px 20px 66px;
    }

    .services-header-modern h2{
        font-size:36px;
    }

    .services-header-modern p{
        font-size:15px;
    }

}


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

@media (max-width:768px){

    .services-section{
        padding:54px 18px 58px;
    }

    .services-kicker{
        margin-bottom:15px;
        padding:8px 15px;

        font-size:10px;
        letter-spacing:1.5px;
    }

    .services-header-modern h2{
        font-size:29px;
        letter-spacing:-.7px;
    }

    .services-header-modern p{
        max-width:100%;
        margin-top:13px;

        font-size:14px;
        line-height:1.7;
    }

}


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

@media (max-width:480px){

    .services-section{
        padding:48px 16px 52px;
    }

    .services-header-modern h2{
        font-size:26px;
    }

    .services-header-modern p{
        font-size:13.5px;
    }

    .services-bg-animation span{
        opacity:.45;
    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .services-section::after,
    .services-bg-animation span{
        animation:none;
    }

}
/* ==========================================================
   OVERRIDE — LAYANAN SEKOLAH
   MODERN • MINIMALIS • FORMAL PEMERINTAH
========================================================== */


/* ==========================================================
   SECTION UTAMA
========================================================== */

.services-section{
    position:relative !important;
    overflow:hidden !important;

    padding-top:78px !important;
    padding-bottom:82px !important;

    background:
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #eef7f6 45%,
            #f8fafc 100%
        ) !important;

    isolation:isolate;
}


/* ==========================================================
   GRID BACKGROUND
========================================================== */

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

    position:absolute;
    inset:-100px;

    z-index:-3;

    background-image:
        linear-gradient(
            rgba(14,116,144,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(14,116,144,.045) 1px,
            transparent 1px
        );

    background-size:42px 42px;

    animation:
        servicesGridMove 22s linear infinite;

    pointer-events:none;
}


/* ==========================================================
   CAHAYA BERGERAK
========================================================== */

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

    position:absolute;

    width:620px;
    height:620px;

    left:50%;
    top:-300px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(14,165,163,.13) 0%,
            rgba(14,165,163,.075) 28%,
            rgba(14,165,163,.025) 52%,
            transparent 72%
        );

    filter:blur(8px);

    z-index:-2;

    animation:
        servicesLightMove 10s ease-in-out infinite alternate;

    pointer-events:none;
}


/* ==========================================================
   ORNAMEN CAHAYA TAMBAHAN
========================================================== */

.services-section{
    background-color:#f8fafc !important;
}

.services-section .container{
    position:relative;
    z-index:5;
}

.services-section .container::before,
.services-section .container::after{
    content:"";

    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(14,165,163,.055),
            transparent 68%
        );

    filter:blur(4px);

    pointer-events:none;

    z-index:-1;
}

.services-section .container::before{
    left:-150px;
    top:20px;

    animation:
        servicesBubbleLeft 13s ease-in-out infinite;
}

.services-section .container::after{
    right:-150px;
    bottom:-80px;

    animation:
        servicesBubbleRight 15s ease-in-out infinite;
}


/* ==========================================================
   HEADER — BENAR-BENAR TENGAH
========================================================== */

.services-header-modern,
.section-header-row{
    width:100% !important;

    max-width:900px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    text-align:center !important;

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


/* ==========================================================
   LABEL LAYANAN SEKOLAH
========================================================== */

.services-kicker{
    display:inline-flex !important;

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

    margin-left:auto !important;
    margin-right:auto !important;

    margin-bottom:20px !important;

    padding:9px 19px !important;

    border-radius:999px !important;

    border:1px solid rgba(14,116,144,.14) !important;

    background:rgba(255,255,255,.82) !important;

    color:#087bb9 !important;

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

    letter-spacing:1.6px !important;

    line-height:1 !important;

    box-shadow:
        0 8px 25px rgba(15,23,42,.055) !important;

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

    animation:
        servicesKickerFloat 4s ease-in-out infinite;
}


/* titik kecil */

.services-kicker::before{
    content:"";

    width:7px;
    height:7px;

    flex:0 0 7px;

    margin-right:10px;

    border-radius:50%;

    background:#0ea5e9;

    box-shadow:
        0 0 0 5px rgba(14,165,233,.09);
}


/* garis kanan */

.services-kicker::after{
    content:"";

    width:28px;
    height:1px;

    margin-left:10px;

    background:
        linear-gradient(
            90deg,
            #1685bd,
            rgba(22,133,189,.15)
        );
}


/* ==========================================================
   JUDUL UTAMA
========================================================== */

.services-header-modern h2,
.section-header-row h2{
    width:100% !important;

    margin:0 auto !important;

    text-align:center !important;

    color:#17233a !important;

    font-size:clamp(
        32px,
        4vw,
        48px
    ) !important;

    font-weight:800 !important;

    line-height:1.16 !important;

    letter-spacing:-1.4px !important;
}


/* kata berwarna biru jika struktur memakai span */

.services-header-modern h2 span{
    color:#1485c5;
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.services-header-modern p,
.section-header-row p{
    width:100% !important;

    max-width:700px !important;

    margin:16px auto 0 !important;

    text-align:center !important;

    color:#64748b !important;

    font-size:16px !important;

    font-weight:500 !important;

    line-height:1.75 !important;
}


/* ==========================================================
   CARD — TETAP 4 SEJAJAR
========================================================== */

.services-section .services-grid,
.services-section .row{
    position:relative;

    z-index:3;
}


/* ==========================================================
   CARD FLOAT SANGAT HALUS
========================================================== */

.services-section .service-card,
.services-section .services-card{
    animation:
        serviceCardFloat 7s ease-in-out infinite;

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


/* card bergantian agar tidak bergerak bersamaan */

.services-section .service-card:nth-child(2),
.services-section .services-card:nth-child(2){
    animation-delay:-1.5s;
}

.services-section .service-card:nth-child(3),
.services-section .services-card:nth-child(3){
    animation-delay:-3s;
}

.services-section .service-card:nth-child(4),
.services-section .services-card:nth-child(4){
    animation-delay:-4.5s;
}


/* ==========================================================
   HOVER CARD
========================================================== */

.services-section .service-card:hover,
.services-section .services-card:hover{
    transform:translateY(-8px);

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


/* ==========================================================
   ANIMASI GRID
========================================================== */

@keyframes servicesGridMove{

    0%{
        transform:translate3d(0,0,0);
    }

    100%{
        transform:translate3d(42px,42px,0);
    }

}


/* ==========================================================
   ANIMASI CAHAYA UTAMA
========================================================== */

@keyframes servicesLightMove{

    0%{
        transform:
            translateX(-50%)
            translateY(-15px)
            scale(.92);
    }

    50%{
        transform:
            translateX(-50%)
            translateY(35px)
            scale(1.08);
    }

    100%{
        transform:
            translateX(-50%)
            translateY(5px)
            scale(1);
    }

}


/* ==========================================================
   BUBBLE KIRI
========================================================== */

@keyframes servicesBubbleLeft{

    0%{
        transform:translate3d(0,0,0);
        opacity:.45;
    }

    50%{
        transform:translate3d(35px,-25px,0);
        opacity:.75;
    }

    100%{
        transform:translate3d(-15px,20px,0);
        opacity:.45;
    }

}


/* ==========================================================
   BUBBLE KANAN
========================================================== */

@keyframes servicesBubbleRight{

    0%{
        transform:translate3d(0,0,0);
        opacity:.35;
    }

    50%{
        transform:translate3d(-35px,25px,0);
        opacity:.7;
    }

    100%{
        transform:translate3d(15px,-20px,0);
        opacity:.4;
    }

}


/* ==========================================================
   LABEL FLOAT
========================================================== */

@keyframes servicesKickerFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-3px);
    }

}


/* ==========================================================
   CARD FLOAT
========================================================== */

@keyframes serviceCardFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-4px);
    }

}


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

@media (max-width:992px){

    .services-section{
        padding-top:65px !important;
        padding-bottom:70px !important;
    }

    .services-header-modern h2,
    .section-header-row h2{
        font-size:38px !important;
    }

    .services-header-modern p,
    .section-header-row p{
        font-size:15px !important;
    }

}


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

@media (max-width:768px){

    .services-section{
        padding:
            55px
            18px
            60px !important;
    }

    .services-kicker{
        margin-bottom:16px !important;

        padding:
            8px
            16px !important;

        font-size:10px !important;

        letter-spacing:1.4px !important;
    }

    .services-header-modern h2,
    .section-header-row h2{
        font-size:30px !important;

        letter-spacing:-.8px !important;
    }

    .services-header-modern p,
    .section-header-row p{
        margin-top:13px !important;

        font-size:14px !important;

        line-height:1.7 !important;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width:480px){

    .services-section{
        padding:
            48px
            15px
            52px !important;
    }

    .services-header-modern h2,
    .section-header-row h2{
        font-size:27px !important;
    }

    .services-header-modern p,
    .section-header-row p{
        font-size:13.5px !important;
    }

    .services-section::before{
        background-size:34px 34px;
    }

}


/* ==========================================================
   AKSESIBILITAS
========================================================== */

@media (prefers-reduced-motion:reduce){

    .services-section::before,
    .services-section::after,
    .services-section .container::before,
    .services-section .container::after,
    .services-kicker,
    .services-section .service-card,
    .services-section .services-card{
        animation:none !important;
    }

}
/* ==========================================================
   FINAL OVERRIDE
   LAYANAN SEKOLAH — CAPITAL • CENTER • AUTO MOTION
========================================================== */


/* ==========================================================
   SEMUA TEKS SECTION MENJADI CAPITAL
========================================================== */

.services-section,
.services-section *{
    text-transform:uppercase !important;
}


/* ==========================================================
   SECTION
========================================================== */

.services-section{
    position:relative !important;
    overflow:hidden !important;

    text-align:center !important;

    background:
        linear-gradient(
            120deg,
            #f8fafc,
            #eef8f7,
            #f8fafc,
            #edf6fa
        ) !important;

    background-size:400% 400% !important;

    animation:
        governmentBackground 18s ease infinite !important;
}


/* ==========================================================
   BACKGROUND GRID BERGERAK
========================================================== */

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

    position:absolute;
    inset:-80px;

    z-index:0;

    background-image:
        linear-gradient(
            rgba(14,116,144,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(14,116,144,.045) 1px,
            transparent 1px
        );

    background-size:42px 42px;

    animation:
        gridAutoMove 20s linear infinite;

    pointer-events:none;
}


/* ==========================================================
   CAHAYA BERGERAK
========================================================== */

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

    position:absolute;

    width:650px;
    height:650px;

    top:-330px;
    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(14,165,233,.14) 0%,
            rgba(14,165,233,.07) 30%,
            rgba(14,165,233,.025) 52%,
            transparent 72%
        );

    filter:blur(12px);

    animation:
        lightAutoMove 9s ease-in-out infinite alternate;

    z-index:0;

    pointer-events:none;
}


/* ==========================================================
   CONTENT HARUS DI ATAS BACKGROUND
========================================================== */

.services-section .container{
    position:relative !important;

    z-index:5 !important;

    text-align:center !important;
}


/* ==========================================================
   HEADER CENTER TOTAL
========================================================== */

.services-header-modern{
    width:100% !important;
    max-width:1000px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    text-align:center !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;
}


/* ==========================================================
   LABEL
========================================================== */

.services-kicker{
    display:inline-flex !important;

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

    margin-left:auto !important;
    margin-right:auto !important;

    padding:9px 20px !important;

    border-radius:50px !important;

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

    border:1px solid rgba(14,116,144,.15) !important;

    color:#087bb9 !important;

    font-size:12px !important;

    font-weight:900 !important;

    letter-spacing:2px !important;

    box-shadow:
        0 8px 25px rgba(15,23,42,.06) !important;

    backdrop-filter:blur(12px);

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

    animation:
        labelAutoMove 4s ease-in-out infinite;
}


/* titik icon label */

.services-kicker::before{
    content:"";

    width:8px;
    height:8px;

    margin-right:10px;

    flex:0 0 8px;

    border-radius:50%;

    background:#0ea5e9;

    box-shadow:
        0 0 0 5px rgba(14,165,233,.10);

    animation:
        dotPulse 1.8s ease-in-out infinite;
}


/* garis kanan */

.services-kicker::after{
    content:"";

    width:30px;
    height:1px;

    margin-left:11px;

    background:#1685bd;

    animation:
        linePulse 2s ease-in-out infinite;
}


/* ==========================================================
   JUDUL
========================================================== */

.services-header-modern h2{
    width:100% !important;

    margin:
        20px
        auto
        0 !important;

    text-align:center !important;

    color:#17233a !important;

    font-size:
        clamp(
            30px,
            4vw,
            48px
        ) !important;

    font-weight:900 !important;

    line-height:1.15 !important;

    letter-spacing:-1px !important;

    text-transform:uppercase !important;

    animation:
        titleAutoMove 6s ease-in-out infinite;
}


/* ==========================================================
   WARNA BIRU PADA SPAN
========================================================== */

.services-header-modern h2 span{
    color:#1385c4 !important;

    text-transform:uppercase !important;
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.services-header-modern p{
    width:100% !important;

    max-width:760px !important;

    margin:
        16px
        auto
        0 !important;

    text-align:center !important;

    color:#64748b !important;

    font-size:15px !important;

    font-weight:600 !important;

    line-height:1.75 !important;

    text-transform:uppercase !important;
}


/* ==========================================================
   SEMUA CARD
========================================================== */

.services-section .service-card,
.services-section .services-card{
    position:relative;

    overflow:hidden;

    animation:
        cardAutoFloat 6s ease-in-out infinite;

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


/* ==========================================================
   CARD BERGANTIAN
========================================================== */

.services-section .service-card:nth-child(1),
.services-section .services-card:nth-child(1){
    animation-delay:0s;
}

.services-section .service-card:nth-child(2),
.services-section .services-card:nth-child(2){
    animation-delay:-1.2s;
}

.services-section .service-card:nth-child(3),
.services-section .services-card:nth-child(3){
    animation-delay:-2.4s;
}

.services-section .service-card:nth-child(4),
.services-section .services-card:nth-child(4){
    animation-delay:-3.6s;
}


/* ==========================================================
   ICON CARD — BERGERAK OTOMATIS
========================================================== */

.services-section .service-card i,
.services-section .services-card i,
.services-section .service-icon i,
.services-section .icon i{

    display:inline-block !important;

    animation:
        iconAutoMove 3.5s ease-in-out infinite;

    transform-origin:center;
}


/* ==========================================================
   KOTAK ICON
========================================================== */

.services-section .service-icon,
.services-section .services-icon,
.services-section .icon-box{

    animation:
        iconBoxAutoMove 4s ease-in-out infinite;
}


/* ==========================================================
   ICON CARD BERGANTIAN
========================================================== */

.services-section .service-card:nth-child(2) i,
.services-section .services-card:nth-child(2) i{
    animation-delay:-.8s;
}

.services-section .service-card:nth-child(3) i,
.services-section .services-card:nth-child(3) i{
    animation-delay:-1.6s;
}

.services-section .service-card:nth-child(4) i,
.services-section .services-card:nth-child(4) i{
    animation-delay:-2.4s;
}


/* ==========================================================
   LABEL CARD
========================================================== */

.services-section .service-card .badge,
.services-section .services-card .badge,
.services-section .service-card .category,
.services-section .services-card .category{

    text-transform:uppercase !important;

    font-weight:800 !important;

    letter-spacing:.6px !important;
}


/* ==========================================================
   JUDUL CARD
========================================================== */

.services-section .service-card h3,
.services-section .services-card h3,
.services-section .service-card h4,
.services-section .services-card h4{

    text-transform:uppercase !important;

    font-weight:800 !important;
}


/* ==========================================================
   DESKRIPSI CARD
========================================================== */

.services-section .service-card p,
.services-section .services-card p{

    text-transform:uppercase !important;
}


/* ==========================================================
   ARROW / ICON PANAH
========================================================== */

.services-section .service-card .arrow,
.services-section .services-card .arrow,
.services-section .service-card .arrow-icon,
.services-section .services-card .arrow-icon{

    animation:
        arrowAutoMove 2.8s ease-in-out infinite;
}


/* ==========================================================
   HOVER CARD
========================================================== */

.services-section .service-card:hover,
.services-section .services-card:hover{

    transform:
        translateY(-10px)
        scale(1.015) !important;

    box-shadow:
        0 25px 60px rgba(15,23,42,.12) !important;
}


/* ==========================================================
   BACKGROUND ANIMATION
========================================================== */

@keyframes governmentBackground{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}


/* ==========================================================
   GRID AUTO MOVE
========================================================== */

@keyframes gridAutoMove{

    0%{
        transform:
            translate(0,0);
    }

    100%{
        transform:
            translate(42px,42px);
    }

}


/* ==========================================================
   LIGHT AUTO MOVE
========================================================== */

@keyframes lightAutoMove{

    0%{
        transform:
            translateX(-50%)
            translateY(-15px)
            scale(.9);
    }

    50%{
        transform:
            translateX(-50%)
            translateY(35px)
            scale(1.08);
    }

    100%{
        transform:
            translateX(-50%)
            translateY(5px)
            scale(1);
    }

}


/* ==========================================================
   LABEL MOVE
========================================================== */

@keyframes labelAutoMove{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-4px);
    }

}


/* ==========================================================
   DOT PULSE
========================================================== */

@keyframes dotPulse{

    0%,
    100%{
        transform:scale(1);
        opacity:.7;
    }

    50%{
        transform:scale(1.35);
        opacity:1;
    }

}


/* ==========================================================
   LINE PULSE
========================================================== */

@keyframes linePulse{

    0%,
    100%{
        width:24px;
        opacity:.5;
    }

    50%{
        width:38px;
        opacity:1;
    }

}


/* ==========================================================
   TITLE MOVE
========================================================== */

@keyframes titleAutoMove{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-2px);
    }

}


/* ==========================================================
   CARD AUTO FLOAT
========================================================== */

@keyframes cardAutoFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-5px);
    }

}


/* ==========================================================
   ICON AUTO MOVE
========================================================== */

@keyframes iconAutoMove{

    0%{
        transform:
            translateY(0)
            rotate(0deg);
    }

    25%{
        transform:
            translateY(-5px)
            rotate(-3deg);
    }

    50%{
        transform:
            translateY(0)
            rotate(0deg);
    }

    75%{
        transform:
            translateY(4px)
            rotate(3deg);
    }

    100%{
        transform:
            translateY(0)
            rotate(0deg);
    }

}


/* ==========================================================
   ICON BOX AUTO MOVE
========================================================== */

@keyframes iconBoxAutoMove{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }

}


/* ==========================================================
   ARROW AUTO MOVE
========================================================== */

@keyframes arrowAutoMove{

    0%,
    100%{
        transform:
            translate(0,0);
    }

    50%{
        transform:
            translate(4px,-4px);
    }

}


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

@media(max-width:768px){

    .services-section{
        padding:
            55px
            16px
            60px !important;
    }

    .services-header-modern h2{
        font-size:29px !important;

        letter-spacing:-.7px !important;
    }

    .services-header-modern p{
        font-size:13px !important;

        line-height:1.7 !important;
    }

    .services-kicker{
        font-size:10px !important;

        letter-spacing:1.4px !important;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media(max-width:480px){

    .services-header-modern h2{
        font-size:25px !important;
    }

    .services-header-modern p{
        font-size:12px !important;
    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

    .services-section,
    .services-section::before,
    .services-section::after,
    .services-section .service-card,
    .services-section .services-card,
    .services-section .service-card i,
    .services-section .services-card i,
    .services-kicker,
    .services-header-modern h2{

        animation:none !important;
    }

}
/* ==========================================================
   ANIMASI NAMA LAYANAN SEKOLAH
   OTOMATIS • MODERN • MINIMALIS
========================================================== */


/* ==========================================================
   SEMUA NAMA LAYANAN CAPITAL
========================================================== */

.services-home-card h3{
    position:relative;

    display:inline-block;

    margin:0;

    padding-bottom:10px;

    text-transform:uppercase !important;

    letter-spacing:-.35px;

    overflow:hidden;
}


/* ==========================================================
   GARIS DASAR DI BAWAH NAMA
========================================================== */

.services-home-card h3::before{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:2px;

    border-radius:20px;

    background:
        rgba(14,116,144,.12);
}


/* ==========================================================
   GARIS YANG BERJALAN OTOMATIS
========================================================== */

.services-home-card h3::after{

    content:"";

    position:absolute;

    left:-35%;

    bottom:0;

    width:35%;
    height:2px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #0785c7,
            #38bdf8,
            transparent
        );

    animation:
        serviceNameLine 3s ease-in-out infinite;
}


/* ==========================================================
   NAMA BERGERAK OTOMATIS
========================================================== */

.services-home-card h3{

    animation:
        serviceNameMove 4s ease-in-out infinite;
}


/* ==========================================================
   ANIMASI GARIS
========================================================== */

@keyframes serviceNameLine{

    0%{
        left:-35%;
        opacity:0;
    }

    15%{
        opacity:1;
    }

    50%{
        left:100%;
        opacity:1;
    }

    65%{
        opacity:0;
    }

    100%{
        left:100%;
        opacity:0;
    }

}


/* ==========================================================
   ANIMASI NAMA
========================================================== */

@keyframes serviceNameMove{

    0%,
    100%{
        transform:
            translateY(0);
    }

    50%{
        transform:
            translateY(-3px);
    }

}


/* ==========================================================
   SETIAP CARD BERGANTIAN
========================================================== */

/* CARD 1 */

.services-home-card:nth-child(1) h3{
    animation-delay:0s;
}

.services-home-card:nth-child(1) h3::after{
    animation-delay:0s;
}


/* CARD 2 */

.services-home-card:nth-child(2) h3{
    animation-delay:-1s;
}

.services-home-card:nth-child(2) h3::after{
    animation-delay:-.8s;
}


/* CARD 3 */

.services-home-card:nth-child(3) h3{
    animation-delay:-2s;
}

.services-home-card:nth-child(3) h3::after{
    animation-delay:-1.6s;
}


/* CARD 4 */

.services-home-card:nth-child(4) h3{
    animation-delay:-3s;
}

.services-home-card:nth-child(4) h3::after{
    animation-delay:-2.4s;
}


/* ==========================================================
   LABEL PROFIL / PENDIDIKAN / KESISWAAN / DOKUMENTASI
========================================================== */

.services-home-card > div > span{

    text-transform:uppercase !important;

    position:relative;

    overflow:hidden;
}


/* ==========================================================
   LABEL JUGA PUNYA GARIS BERGERAK
========================================================== */

.services-home-card > div > span::after{

    content:"";

    display:block;

    width:20px;
    height:2px;

    margin-top:5px;

    border-radius:20px;

    background:#0d8bc9;

    animation:
        serviceLabelLine 2.5s ease-in-out infinite;
}


/* ==========================================================
   ANIMASI LABEL
========================================================== */

@keyframes serviceLabelLine{

    0%{
        width:15px;
        opacity:.45;
    }

    50%{
        width:45px;
        opacity:1;
    }

    100%{
        width:15px;
        opacity:.45;
    }

}


/* ==========================================================
   ICON SETIAP LAYANAN BERGERAK
========================================================== */

.services-home-card .service-home-icon{

    animation:
        serviceIconMove 4s ease-in-out infinite;
}


/* ==========================================================
   ICON BERGANTIAN
========================================================== */

.services-home-card:nth-child(1) .service-home-icon{
    animation-delay:0s;
}

.services-home-card:nth-child(2) .service-home-icon{
    animation-delay:-1s;
}

.services-home-card:nth-child(3) .service-home-icon{
    animation-delay:-2s;
}

.services-home-card:nth-child(4) .service-home-icon{
    animation-delay:-3s;
}


/* ==========================================================
   ANIMASI ICON
========================================================== */

@keyframes serviceIconMove{

    0%,
    100%{
        transform:
            translateY(0)
            rotate(0deg);
    }

    25%{
        transform:
            translateY(-5px)
            rotate(-2deg);
    }

    50%{
        transform:
            translateY(0)
            rotate(0deg);
    }

    75%{
        transform:
            translateY(4px)
            rotate(2deg);
    }

}


/* ==========================================================
   PANAH JUGA BERGERAK
========================================================== */

.services-home-card > .bi-arrow-up-right{

    animation:
        serviceArrowMove 2.5s ease-in-out infinite;
}


/* ==========================================================
   ANIMASI PANAH
========================================================== */

@keyframes serviceArrowMove{

    0%,
    100%{
        transform:
            translate(0,0);
    }

    50%{
        transform:
            translate(4px,-4px);
    }

}


/* ==========================================================
   DESKRIPSI CAPITAL
========================================================== */

.services-home-card p{

    text-transform:uppercase !important;
}


/* ==========================================================
   HOVER
========================================================== */

.services-home-card:hover h3{

    color:#0785c7;

    transform:
        translateY(-2px);
}


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

@media(max-width:768px){

    .services-home-card h3{

        padding-bottom:8px;

        font-size:20px;

    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

    .services-home-card h3,
    .services-home-card h3::after,
    .services-home-card .service-home-icon,
    .services-home-card > .bi-arrow-up-right,
    .services-home-card > div > span::after{

        animation:none !important;

    }

}
/* ==========================================================
   HEADER LAYANAN SEKOLAH
   KECIL • CENTER • GARIS BERGERAK • OTOMATIS
========================================================== */


/* ==========================================================
   HEADER UTAMA
========================================================== */

.services-section .section-header-row{
    width:100% !important;

    display:flex !important;

    justify-content:center !important;

    text-align:center !important;

    margin:0 auto !important;
}


/* ==========================================================
   WRAPPER HEADER
========================================================== */

.services-section .section-header-row > div{
    width:100% !important;

    max-width:760px !important;

    margin:0 auto !important;

    text-align:center !important;
}


/* ==========================================================
   LAYANAN SEKOLAH
   UKURAN DIPERKECIL
========================================================== */

.services-section .section-kicker{

    position:relative;

    display:inline-block;

    padding:0 0 9px 0 !important;

    margin:0 auto 15px !important;

    background:none !important;

    border:none !important;

    border-radius:0 !important;

    color:#087bb9 !important;

    font-size:11px !important;

    font-weight:800 !important;

    letter-spacing:1.8px !important;

    line-height:1.2 !important;

    text-transform:uppercase !important;

    box-shadow:none !important;

}


/* ==========================================================
   GARIS BAWAH
========================================================== */

.services-section .section-kicker::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    border-radius:20px;

    background:
        rgba(8,123,185,.14);

}


/* ==========================================================
   GARIS YANG BERJALAN OTOMATIS
========================================================== */

.services-section .section-kicker::after{

    content:"";

    position:absolute;

    left:-30%;

    bottom:0;

    width:30%;

    height:2px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #0785c7,
            #38bdf8,
            transparent
        );

    animation:
        layananLineMove 3s ease-in-out infinite;

}


/* ==========================================================
   JUDUL
========================================================== */

.services-section .section-header-row h2{

    margin:0 auto !important;

    width:100% !important;

    text-align:center !important;

    font-size:clamp(
        25px,
        3vw,
        36px
    ) !important;

    font-weight:800 !important;

    line-height:1.2 !important;

    letter-spacing:-.6px !important;

    color:#17233a !important;

    text-transform:uppercase !important;

}


/* ==========================================================
   SPAN JUDUL
========================================================== */

.services-section .section-header-row h2 span{

    color:#1385c4 !important;

    text-transform:uppercase !important;

}


/* ==========================================================
   DESKRIPSI
========================================================== */

.services-section .section-header-row p{

    width:100% !important;

    max-width:650px !important;

    margin:11px auto 0 !important;

    text-align:center !important;

    font-size:13px !important;

    font-weight:500 !important;

    line-height:1.65 !important;

    color:#64748b !important;

    text-transform:uppercase !important;

}


/* ==========================================================
   ANIMASI GARIS
========================================================== */

@keyframes layananLineMove{

    0%{
        left:-30%;
        opacity:0;
    }

    15%{
        opacity:1;
    }

    50%{
        left:100%;
        opacity:1;
    }

    65%{
        opacity:0;
    }

    100%{
        left:100%;
        opacity:0;
    }

}


/* ==========================================================
   GARIS LABEL BERNAFAS
========================================================== */

.services-section .section-kicker{

    animation:
        layananKickerFloat 4s ease-in-out infinite;

}


@keyframes layananKickerFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-2px);
    }

}


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

@media(max-width:768px){

    .services-section .section-kicker{

        font-size:10px !important;

        letter-spacing:1.5px !important;

        padding-bottom:8px !important;

        margin-bottom:13px !important;

    }


    .services-section .section-header-row h2{

        font-size:24px !important;

        letter-spacing:-.4px !important;

    }


    .services-section .section-header-row p{

        font-size:12px !important;

        line-height:1.6 !important;

        margin-top:9px !important;

    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media(max-width:480px){

    .services-section .section-kicker{

        font-size:9px !important;

    }

    .services-section .section-header-row h2{

        font-size:22px !important;

    }

    .services-section .section-header-row p{

        font-size:11.5px !important;

    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

    .services-section .section-kicker,
    .services-section .section-kicker::after{

        animation:none !important;

    }

}
/* ==========================================================
   JARAK HEADER KE DAFTAR LAYANAN
========================================================== */

/* Deskripsi header */
.services-section .section-header-row p{
    margin-bottom:22px !important;
}


/* Jarak menuju card layanan */
.services-section .services-home-grid{
    margin-top:8px !important;
}


/* ==========================================================
   JARAK ANTAR CARD
========================================================== */

.services-section .service-home-card{
    margin-bottom:12px;
}


/* ==========================================================
   DESKTOP
========================================================== */

@media(min-width:993px){

    .services-section .section-header-row p{
        margin-bottom:26px !important;
    }

    .services-section .services-home-grid{
        margin-top:10px !important;
    }

}


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

@media(max-width:992px){

    .services-section .section-header-row p{
        margin-bottom:20px !important;
    }

}


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

@media(max-width:768px){

    .services-section .section-header-row p{
        margin-bottom:18px !important;
    }

    .services-section .services-home-grid{
        margin-top:6px !important;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media(max-width:480px){

    .services-section .section-header-row p{
        margin-bottom:16px !important;
    }

}
/* ==========================================================
   08. PPDB
   MODERN • MINIMALIS • FORMAL PEMERINTAH
========================================================== */


/* ==========================================================
   SECTION UTAMA
========================================================== */

.admission-section{
    position:relative;

    overflow:hidden;

    padding:
        55px
        20px
        60px;

    background:
        linear-gradient(
            120deg,
            #f8fafc,
            #eef7f7,
            #f8fafc,
            #eef6fa
        );

    background-size:400% 400%;

    animation:
        ppdbBackground 18s ease infinite;

    isolation:isolate;
}


/* ==========================================================
   GRID HALUS BACKGROUND
========================================================== */

.admission-section::before{

    content:"";

    position:absolute;

    inset:-80px;

    z-index:0;

    background-image:
        linear-gradient(
            rgba(14,116,144,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(14,116,144,.04) 1px,
            transparent 1px
        );

    background-size:40px 40px;

    animation:
        ppdbGridMove 22s linear infinite;

    pointer-events:none;
}


/* ==========================================================
   CAHAYA HALUS
========================================================== */

.admission-section::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-250px;
    right:8%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(14,165,233,.10),
            rgba(14,165,233,.035) 45%,
            transparent 72%
        );

    filter:blur(10px);

    animation:
        ppdbLightMove 10s ease-in-out infinite alternate;

    z-index:0;

    pointer-events:none;
}


/* ==========================================================
   CONTAINER
========================================================== */

.admission-section .container{

    position:relative;

    z-index:5;
}


/* ==========================================================
   BOX PPDB
========================================================== */

.admission-box{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;

    max-width:1120px;

    margin:0 auto;

    padding:
        32px
        36px;

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

    border:
        1px solid
        rgba(14,116,144,.10);

    border-radius:18px;

    box-shadow:
        0 15px 45px
        rgba(15,23,42,.07);

    backdrop-filter:blur(14px);

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

    overflow:hidden;

    animation:
        ppdbBoxFloat 7s ease-in-out infinite;
}


/* ==========================================================
   GARIS AKSEN KIRI
========================================================== */

.admission-box::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:4px;
    height:100%;

    background:
        linear-gradient(
            180deg,
            #087bb9,
            #38bdf8,
            #0f766e
        );

    background-size:100% 200%;

    animation:
        ppdbAccentMove 4s ease infinite;
}


/* ==========================================================
   CAHAYA DALAM BOX
========================================================== */

.admission-box::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:-130px;
    top:-130px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(14,165,233,.08),
            transparent 70%
        );

    animation:
        ppdbInnerLight 8s ease-in-out infinite alternate;

    pointer-events:none;
}


/* ==========================================================
   CONTENT
========================================================== */

.admission-content{

    position:relative;

    z-index:2;

    flex:1;

    min-width:0;
}


/* ==========================================================
   LABEL PPDB
========================================================== */

.admission-content > span{

    position:relative;

    display:inline-block;

    padding-bottom:8px;

    color:#087bb9;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.6px;

    line-height:1.2;

    text-transform:uppercase;
}


/* ==========================================================
   GARIS LABEL
========================================================== */

.admission-content > span::before{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    height:2px;

    border-radius:20px;

    background:
        rgba(8,123,185,.12);
}


/* ==========================================================
   GARIS BERGERAK
========================================================== */

.admission-content > span::after{

    content:"";

    position:absolute;

    left:-30%;

    bottom:0;

    width:30%;

    height:2px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #0785c7,
            #38bdf8,
            transparent
        );

    animation:
        ppdbLabelLine 3s ease-in-out infinite;
}


/* ==========================================================
   JUDUL
========================================================== */

.admission-content h2{

    position:relative;

    margin:
        13px
        0
        0;

    max-width:780px;

    color:#17233a;

    font-size:
        clamp(
            24px,
            3vw,
            34px
        );

    font-weight:800;

    line-height:1.25;

    letter-spacing:-.6px;

    text-transform:uppercase;
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.admission-content p{

    max-width:720px;

    margin:
        10px
        0
        0;

    color:#64748b;

    font-size:13px;

    font-weight:500;

    line-height:1.7;

    text-transform:uppercase;
}


/* ==========================================================
   BUTTON PPDB
========================================================== */

.admission-button{

    position:relative;

    z-index:5;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    flex-shrink:0;

    min-width:165px;

    padding:
        12px
        18px;

    border:
        1px solid
        rgba(8,123,185,.15);

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            #087bb9,
            #0e8dcc
        );

    color:#fff !important;

    text-decoration:none !important;

    font-size:11px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    box-shadow:
        0 9px 25px
        rgba(8,123,185,.18);

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


/* ==========================================================
   BUTTON SHINE
========================================================== */

.admission-button::before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:60%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform:skewX(-20deg);

    animation:
        ppdbButtonShine 4s ease-in-out infinite;

    pointer-events:none;
}


/* ==========================================================
   ICON BUTTON
========================================================== */

.admission-button i{

    display:inline-block;

    font-size:13px;

    animation:
        ppdbArrowMove 2.5s ease-in-out infinite;
}


/* ==========================================================
   HOVER
========================================================== */

.admission-button:hover{

    color:#fff !important;

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 32px
        rgba(8,123,185,.25);
}


/* ==========================================================
   ANIMASI BACKGROUND
========================================================== */

@keyframes ppdbBackground{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}


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

@keyframes ppdbGridMove{

    0%{
        transform:
            translate(0,0);
    }

    100%{
        transform:
            translate(40px,40px);
    }

}


/* ==========================================================
   CAHAYA
========================================================== */

@keyframes ppdbLightMove{

    0%{
        transform:
            translate(0,0)
            scale(.9);
    }

    50%{
        transform:
            translate(-40px,30px)
            scale(1.08);
    }

    100%{
        transform:
            translate(20px,-20px)
            scale(1);
    }

}


/* ==========================================================
   BOX FLOAT
========================================================== */

@keyframes ppdbBoxFloat{

    0%,
    100%{
        transform:
            translateY(0);
    }

    50%{
        transform:
            translateY(-3px);
    }

}


/* ==========================================================
   GARIS AKSEN
========================================================== */

@keyframes ppdbAccentMove{

    0%{
        background-position:0% 0%;
    }

    50%{
        background-position:0% 100%;
    }

    100%{
        background-position:0% 0%;
    }

}


/* ==========================================================
   CAHAYA DALAM BOX
========================================================== */

@keyframes ppdbInnerLight{

    0%{
        transform:
            translate(0,0)
            scale(.9);
    }

    100%{
        transform:
            translate(-45px,35px)
            scale(1.1);
    }

}


/* ==========================================================
   GARIS LABEL
========================================================== */

@keyframes ppdbLabelLine{

    0%{
        left:-30%;
        opacity:0;
    }

    15%{
        opacity:1;
    }

    50%{
        left:100%;
        opacity:1;
    }

    65%{
        opacity:0;
    }

    100%{
        left:100%;
        opacity:0;
    }

}


/* ==========================================================
   BUTTON SHINE
========================================================== */

@keyframes ppdbButtonShine{

    0%,
    45%{
        left:-100%;
    }

    65%{
        left:130%;
    }

    100%{
        left:130%;
    }

}


/* ==========================================================
   ARROW
========================================================== */

@keyframes ppdbArrowMove{

    0%,
    100%{
        transform:
            translate(0,0);
    }

    50%{
        transform:
            translate(4px,-4px);
    }

}


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

@media(max-width:992px){

    .admission-section{

        padding:
            45px
            18px
            50px;
    }

    .admission-box{

        padding:
            28px;

        gap:25px;
    }

    .admission-content h2{

        font-size:27px;
    }

}


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

@media(max-width:768px){

    .admission-section{

        padding:
            40px
            16px
            45px;
    }

    .admission-box{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

        padding:
            25px
            22px;
    }

    .admission-content{

        width:100%;
    }

    .admission-content h2{

        font-size:23px;

        line-height:1.3;
    }

    .admission-content p{

        font-size:12px;

        line-height:1.65;
    }

    .admission-button{

        width:100%;

        min-width:0;

        padding:
            12px
            16px;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media(max-width:480px){

    .admission-box{

        padding:
            22px
            19px;
    }

    .admission-content > span{

        font-size:9px;

        letter-spacing:1.3px;
    }

    .admission-content h2{

        font-size:21px;

        letter-spacing:-.4px;
    }

    .admission-content p{

        font-size:11.5px;
    }

    .admission-button{

        font-size:10px;
    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

    .admission-section,
    .admission-section::before,
    .admission-section::after,
    .admission-box,
    .admission-box::before,
    .admission-box::after,
    .admission-content > span::after,
    .admission-button::before,
    .admission-button i{

        animation:none !important;
    }

}
/* ==========================================================
   PPDB FINAL
   INLINE MODERN • TANPA TABLE • CLEAN PEMERINTAH
========================================================== */

.admission-section{
    width:100%;
    padding:42px 20px 48px !important;
    background:#f7fafc !important;
    overflow:hidden;
}


/* ==========================================================
   CONTAINER
========================================================== */

.admission-section .container{
    width:100%;
    max-width:1180px !important;
    margin:0 auto !important;
    padding:0 !important;
}


/* ==========================================================
   PPDB BOX
========================================================== */

.admission-box{
    position:relative;

    width:100% !important;
    max-width:100% !important;

    min-height:170px !important;

    margin:0 !important;
    padding:28px 34px !important;

    display:flex !important;
    flex-direction:row !important;

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

    gap:35px !important;

    border:1px solid #e3edf3 !important;
    border-radius:16px !important;

    background:#ffffff !important;

    box-shadow:
        0 10px 30px rgba(15,23,42,.055) !important;

    overflow:hidden !important;

    backdrop-filter:none !important;
}


/* ==========================================================
   GARIS AKSEN KIRI
========================================================== */

.admission-box::before{
    content:"";

    position:absolute;

    left:0;
    top:20px;
    bottom:20px;

    width:3px;

    border-radius:0 5px 5px 0;

    background:
        linear-gradient(
            180deg,
            #087bb9,
            #35a9dc
        );

    animation:
        ppdbAccent 3s ease-in-out infinite;
}


/* ==========================================================
   HILANGKAN EFEK BULAT BESAR
========================================================== */

.admission-box::after{
    content:none !important;
}


/* ==========================================================
   CONTENT
========================================================== */

.admission-content{
    flex:1 1 auto !important;

    width:auto !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;
}


/* ==========================================================
   LABEL
========================================================== */

.admission-content > span{
    position:relative;

    display:inline-block;

    margin:0 0 10px !important;
    padding:0 0 7px !important;

    background:none !important;

    color:#087bb9 !important;

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

    line-height:1.2 !important;

    letter-spacing:1.4px !important;

    text-transform:uppercase !important;
}


/* ==========================================================
   GARIS LABEL
========================================================== */

.admission-content > span::before{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:2px;

    border-radius:10px;

    background:#e3f0f7;
}


.admission-content > span::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:25px;
    height:2px;

    border-radius:10px;

    background:#0785c7;

    animation:
        ppdbLine 2.8s ease-in-out infinite;
}


/* ==========================================================
   JUDUL
========================================================== */

.admission-content h2{
    max-width:900px !important;

    margin:0 !important;

    padding:0 !important;

    color:#17233a !important;

    font-size:
        clamp(22px,2.5vw,31px) !important;

    font-weight:800 !important;

    line-height:1.25 !important;

    letter-spacing:-.55px !important;

    text-transform:uppercase !important;
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.admission-content p{
    max-width:820px !important;

    margin:9px 0 0 !important;

    padding:0 !important;

    color:#64748b !important;

    font-size:12px !important;

    font-weight:500 !important;

    line-height:1.65 !important;

    text-transform:uppercase !important;
}


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

.admission-button{
    position:relative;

    flex:0 0 auto !important;

    width:auto !important;
    min-width:160px !important;

    height:48px !important;

    margin:0 !important;
    padding:0 18px !important;

    display:inline-flex !important;

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

    gap:9px !important;

    border:0 !important;
    border-radius:9px !important;

    background:#087fbd !important;

    color:#ffffff !important;

    text-decoration:none !important;

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

    letter-spacing:.8px !important;

    text-transform:uppercase !important;

    box-shadow:
        0 7px 18px rgba(8,127,189,.16) !important;

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


/* ==========================================================
   BUTTON HOVER
========================================================== */

.admission-button:hover{
    background:#076fa7 !important;

    color:#ffffff !important;

    transform:translateY(-2px) !important;

    box-shadow:
        0 11px 24px rgba(8,127,189,.22) !important;
}


/* ==========================================================
   ICON BUTTON
========================================================== */

.admission-button i{
    font-size:13px !important;

    transition:
        transform .25s ease;
}


.admission-button:hover i{
    transform:
        translate(3px,-3px);
}


/* ==========================================================
   ANIMASI GARIS
========================================================== */

@keyframes ppdbLine{

    0%{
        left:0;
        width:20px;
        opacity:.5;
    }

    50%{
        left:calc(100% - 25px);
        width:25px;
        opacity:1;
    }

    100%{
        left:0;
        width:20px;
        opacity:.5;
    }

}


/* ==========================================================
   ANIMASI AKSEN
========================================================== */

@keyframes ppdbAccent{

    0%,100%{
        opacity:.65;
        transform:scaleY(.75);
    }

    50%{
        opacity:1;
        transform:scaleY(1);
    }

}


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

@media(max-width:992px){

    .admission-section{
        padding:38px 18px 42px !important;
    }

    .admission-box{
        padding:26px 28px !important;
        gap:25px !important;
    }

    .admission-content h2{
        font-size:25px !important;
    }

}


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

@media(max-width:768px){

    .admission-section{
        padding:32px 15px 38px !important;
    }

    .admission-box{
        display:flex !important;

        flex-direction:column !important;

        align-items:flex-start !important;

        justify-content:flex-start !important;

        gap:18px !important;

        min-height:auto !important;

        padding:23px 20px !important;
    }

    .admission-content{
        width:100% !important;
    }

    .admission-content h2{
        font-size:21px !important;

        line-height:1.3 !important;
    }

    .admission-content p{
        font-size:11px !important;

        line-height:1.6 !important;
    }

    .admission-button{
        width:100% !important;

        height:46px !important;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media(max-width:480px){

    .admission-box{
        padding:21px 18px !important;

        border-radius:14px !important;
    }

    .admission-content > span{
        font-size:9px !important;

        letter-spacing:1.2px !important;
    }

    .admission-content h2{
        font-size:19px !important;
    }

    .admission-content p{
        font-size:10.5px !important;
    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

    .admission-box::before,
    .admission-content > span::after{

        animation:none !important;
    }

}
/* ==========================================================
   PPDB — FINAL MODERN
   TANPA TABEL • TANPA BOX BESAR
   INLINE • FORMAL • MODERN PEMERINTAH
========================================================== */


/* ==========================================================
   SECTION
========================================================== */

.admission-section{

    position:relative;

    width:100%;

    padding:55px 20px 60px !important;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #f5fafc 0%,
            #eef7f9 50%,
            #f8fafc 100%
        ) !important;
}


/* ==========================================================
   BACKGROUND GRID HALUS
========================================================== */

.admission-section::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            rgba(14,116,144,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(14,116,144,.035) 1px,
            transparent 1px
        );

    background-size:42px 42px;

    opacity:.65;

    animation:
        ppdbGrid 20s linear infinite;

    pointer-events:none;
}


/* ==========================================================
   CAHAYA BACKGROUND
========================================================== */

.admission-section::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    right:-180px;
    top:-180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(14,165,233,.10),
            transparent 70%
        );

    animation:
        ppdbLight 9s ease-in-out infinite alternate;

    pointer-events:none;
}


/* ==========================================================
   CONTAINER
========================================================== */

.admission-section .container{

    position:relative;

    z-index:2;

    max-width:1180px !important;

    margin:0 auto !important;

    padding:0 !important;
}


/* ==========================================================
   HILANGKAN TAMPILAN TABLE / CARD LAMA
========================================================== */

.admission-box{

    position:relative;

    width:100% !important;

    max-width:none !important;

    min-height:0 !important;

    margin:0 !important;

    padding:28px 25px 28px 32px !important;

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    justify-content:space-between !important;

    gap:40px !important;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    backdrop-filter:none !important;

    -webkit-backdrop-filter:none !important;

    overflow:visible !important;

}


/* ==========================================================
   GARIS VERTIKAL SEPERTI DESAIN PEMERINTAH
========================================================== */

.admission-box::before{

    content:"";

    position:absolute;

    left:0;

    top:15px;

    bottom:15px;

    width:4px;

    border-radius:10px;

    background:
        linear-gradient(
            180deg,
            #087bb9,
            #38bdf8,
            #0f766e
        );

    background-size:100% 200%;

    animation:
        ppdbVerticalLine 4s ease-in-out infinite;
}


/* ==========================================================
   HILANGKAN EFEK BULAT / SHADOW LAMA
========================================================== */

.admission-box::after{

    content:none !important;
}


/* ==========================================================
   CONTENT
========================================================== */

.admission-content{

    flex:1 1 auto !important;

    width:auto !important;

    min-width:0 !important;

    padding:0 !important;

    margin:0 !important;
}


/* ==========================================================
   LABEL PPDB
========================================================== */

.admission-content > span{

    position:relative;

    display:inline-block;

    margin:0 0 14px !important;

    padding:0 0 8px !important;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    color:#087bb9 !important;

    font-size:10px !important;

    font-weight:800 !important;

    line-height:1.2 !important;

    letter-spacing:1.5px !important;

    text-transform:uppercase !important;
}


/* ==========================================================
   GARIS BAWAH LABEL
========================================================== */

.admission-content > span::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    border-radius:20px;

    background:
        rgba(8,123,185,.12);
}


/* ==========================================================
   GARIS BERJALAN
========================================================== */

.admission-content > span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:28px;

    height:2px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #0785c7,
            #38bdf8
        );

    animation:
        ppdbLabelMove 2.8s ease-in-out infinite;
}


/* ==========================================================
   JUDUL
========================================================== */

.admission-content h2{

    max-width:850px !important;

    margin:0 !important;

    padding:0 !important;

    color:#17233a !important;

    font-size:
        clamp(
            25px,
            3vw,
            38px
        ) !important;

    font-weight:850 !important;

    line-height:1.18 !important;

    letter-spacing:-.8px !important;

    text-transform:uppercase !important;
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.admission-content p{

    max-width:780px !important;

    margin:12px 0 0 !important;

    padding:0 !important;

    color:#63788e !important;

    font-size:13px !important;

    font-weight:500 !important;

    line-height:1.75 !important;

    text-transform:uppercase !important;
}


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

.admission-button{

    position:relative;

    flex:0 0 auto !important;

    min-width:170px !important;

    height:50px !important;

    margin:0 !important;

    padding:0 20px !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:10px !important;

    border:0 !important;

    border-radius:9px !important;

    background:#087fbd !important;

    color:#fff !important;

    text-decoration:none !important;

    font-size:10px !important;

    font-weight:800 !important;

    letter-spacing:1px !important;

    text-transform:uppercase !important;

    box-shadow:
        0 8px 20px
        rgba(8,127,189,.16) !important;

    transition:
        all .3s ease;
}


/* ==========================================================
   BUTTON SHINE
========================================================== */

.admission-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:60%;

    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform:skewX(-20deg);

    animation:
        ppdbButtonShine 4s ease-in-out infinite;

    pointer-events:none;
}


/* ==========================================================
   BUTTON HOVER
========================================================== */

.admission-button:hover{

    background:#066fa8 !important;

    color:#fff !important;

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 28px
        rgba(8,127,189,.24) !important;
}


/* ==========================================================
   PANAH
========================================================== */

.admission-button i{

    font-size:14px !important;

    animation:
        ppdbArrow 2.5s ease-in-out infinite;
}


/* ==========================================================
   ANIMASI GRID
========================================================== */

@keyframes ppdbGrid{

    0%{
        transform:translate(0,0);
    }

    100%{
        transform:translate(42px,42px);
    }

}


/* ==========================================================
   ANIMASI CAHAYA
========================================================== */

@keyframes ppdbLight{

    0%{
        transform:
            translate(0,0)
            scale(.9);
    }

    100%{
        transform:
            translate(-40px,35px)
            scale(1.1);
    }

}


/* ==========================================================
   GARIS VERTIKAL
========================================================== */

@keyframes ppdbVerticalLine{

    0%{
        background-position:0 0;
        opacity:.65;
    }

    50%{
        background-position:0 100%;
        opacity:1;
    }

    100%{
        background-position:0 0;
        opacity:.65;
    }

}


/* ==========================================================
   GARIS LABEL
========================================================== */

@keyframes ppdbLabelMove{

    0%{
        left:0;
        width:20px;
        opacity:.5;
    }

    50%{
        left:calc(100% - 28px);
        width:28px;
        opacity:1;
    }

    100%{
        left:0;
        width:20px;
        opacity:.5;
    }

}


/* ==========================================================
   BUTTON SHINE
========================================================== */

@keyframes ppdbButtonShine{

    0%,
    45%{
        left:-100%;
    }

    65%,
    100%{
        left:130%;
    }

}


/* ==========================================================
   PANAH
========================================================== */

@keyframes ppdbArrow{

    0%,
    100%{
        transform:
            translate(0,0);
    }

    50%{
        transform:
            translate(4px,-4px);
    }

}


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

@media(max-width:992px){

    .admission-section{

        padding:
            45px 20px
            50px !important;
    }

    .admission-box{

        gap:28px !important;

        padding:
            25px 20px
            25px 28px !important;
    }

    .admission-content h2{

        font-size:28px !important;
    }

}


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

@media(max-width:768px){

    .admission-section{

        padding:
            40px 16px
            45px !important;
    }

    .admission-box{

        display:flex !important;

        flex-direction:column !important;

        align-items:flex-start !important;

        gap:20px !important;

        padding:
            22px 18px
            22px 25px !important;
    }

    .admission-box::before{

        top:10px;

        bottom:10px;

        width:3px;
    }

    .admission-content{

        width:100% !important;
    }

    .admission-content h2{

        font-size:23px !important;

        line-height:1.3 !important;
    }

    .admission-content p{

        font-size:11.5px !important;

        line-height:1.7 !important;
    }

    .admission-button{

        width:100% !important;

        height:47px !important;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media(max-width:480px){

    .admission-section{

        padding:
            32px 14px
            38px !important;
    }

    .admission-box{

        padding:
            20px 16px
            20px 22px !important;
    }

    .admission-content > span{

        font-size:9px !important;

        letter-spacing:1.2px !important;
    }

    .admission-content h2{

        font-size:20px !important;
    }

    .admission-content p{

        font-size:10.5px !important;
    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

    .admission-section::before,
    .admission-section::after,
    .admission-box::before,
    .admission-content > span::after,
    .admission-button::before,
    .admission-button i{

        animation:none !important;
    }

}
/* ==========================================================
   PPDB — BACKGROUND SLIDER MINIMALIS MODERN
   TAMBAHKAN DI PALING BAWAH CSS
========================================================== */

.admission-section{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    background:#f5f9fb !important;
}


/* ==========================================================
   BACKGROUND SLIDER
========================================================== */

.admission-section::before{

    content:"";

    position:absolute;

    inset:-20%;

    z-index:-2;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(14,165,233,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 80% 25%,
            rgba(6,148,162,.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 55% 85%,
            rgba(59,130,246,.07),
            transparent 32%
        );

    animation:
        ppdbBackgroundSlider 14s ease-in-out infinite alternate;

    transform-origin:center;
}


/* ==========================================================
   LAPISAN GRID MODERN
========================================================== */

.admission-section::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    background-image:
        linear-gradient(
            90deg,
            rgba(14,116,144,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            0deg,
            rgba(14,116,144,.035) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );

    animation:
        ppdbGridSlide 18s linear infinite;
}


/* ==========================================================
   ORNAMEN BULAT HALUS
========================================================== */

.admission-section .container::before{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    left:-90px;
    top:20px;

    border:
        1px solid
        rgba(8,127,189,.08);

    border-radius:50%;

    box-shadow:
        0 0 0 25px rgba(8,127,189,.025),
        0 0 0 50px rgba(8,127,189,.018);

    animation:
        ppdbCircleMove 8s ease-in-out infinite;

    pointer-events:none;
}


/* ==========================================================
   ORNAMEN TITIK MINIMALIS
========================================================== */

.admission-section .container::after{

    content:"";

    position:absolute;

    width:5px;
    height:5px;

    right:8%;
    top:18%;

    border-radius:50%;

    background:#1494cc;

    box-shadow:
        18px 15px 0 rgba(20,148,204,.25),
        38px -10px 0 rgba(20,148,204,.14),
        -20px 30px 0 rgba(20,148,204,.10);

    animation:
        ppdbDotsFloat 5s ease-in-out infinite;
}


/* ==========================================================
   ANIMASI BACKGROUND
========================================================== */

@keyframes ppdbBackgroundSlider{

    0%{

        transform:
            translate3d(-2%,0,0)
            scale(1);

    }

    25%{

        transform:
            translate3d(1%,2%,0)
            scale(1.03);

    }

    50%{

        transform:
            translate3d(3%,-1%,0)
            scale(1.05);

    }

    75%{

        transform:
            translate3d(-1%,3%,0)
            scale(1.03);

    }

    100%{

        transform:
            translate3d(-3%,-2%,0)
            scale(1);

    }

}


/* ==========================================================
   GRID BERGERAK
========================================================== */

@keyframes ppdbGridSlide{

    0%{

        background-position:
            0 0,
            0 0;

    }

    100%{

        background-position:
            45px 0,
            0 45px;

    }

}


/* ==========================================================
   CIRCLE BERGERAK
========================================================== */

@keyframes ppdbCircleMove{

    0%,
    100%{

        transform:
            translate(0,0)
            scale(1);

        opacity:.45;

    }

    50%{

        transform:
            translate(35px,20px)
            scale(1.08);

        opacity:.8;

    }

}


/* ==========================================================
   DOTS BERGERAK
========================================================== */

@keyframes ppdbDotsFloat{

    0%,
    100%{

        transform:
            translate(0,0);

        opacity:.5;

    }

    50%{

        transform:
            translate(-18px,18px);

        opacity:1;

    }

}


/* ==========================================================
   CONTENT TETAP DI DEPAN
========================================================== */

.admission-section .container{

    position:relative;

    z-index:2;
}


/* ==========================================================
   PPDB BOX LEBIH TRANSPARAN
========================================================== */

.admission-box{

    position:relative;

    background:
        rgba(255,255,255,.62) !important;

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

    box-shadow:
        0 15px 40px
        rgba(15,23,42,.045) !important;

    backdrop-filter:
        blur(5px);

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

    transition:
        background .4s ease,
        box-shadow .4s ease;
}


/* ==========================================================
   HOVER BOX
========================================================== */

.admission-box:hover{

    background:
        rgba(255,255,255,.76) !important;

    box-shadow:
        0 20px 50px
        rgba(15,23,42,.07) !important;
}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

    .admission-section::before,
    .admission-section::after,
    .admission-section .container::before,
    .admission-section .container::after{

        animation:none !important;
    }

}
/* ==========================================================
   HERO FULL PAGE — MODERN PEMERINTAH
   LOKASI SEKOLAH DISEMBUNYIKAN
   TANPA MENGUBAH HTML LAMA
========================================================== */


/* ==========================================================
   HERO FULL SCREEN
========================================================== */

.hero-section{

    position:relative !important;

    width:100% !important;

    min-height:100vh !important;
    height:100vh !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    background:#0b2239 !important;
}


/* ==========================================================
   SLIDER FULL PAGE
========================================================== */

.hero-slider{

    position:absolute !important;

    inset:0 !important;

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

    overflow:hidden !important;
}


/* ==========================================================
   SETIAP SLIDE FULL SCREEN
========================================================== */

.hero-slide{

    position:absolute !important;

    inset:0 !important;

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

    min-height:100vh !important;

    display:flex !important;

    align-items:center !important;

    background-position:center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;

    opacity:0;

    visibility:hidden;

    transform:scale(1.04);

    transition:
        opacity .8s ease,
        visibility .8s ease,
        transform 6s ease !important;
}


/* ==========================================================
   SLIDE AKTIF
========================================================== */

.hero-slide.active{

    opacity:1 !important;

    visibility:visible !important;

    transform:scale(1) !important;

    z-index:2 !important;
}


/* ==========================================================
   OVERLAY MODERN
========================================================== */

.hero-overlay{

    position:absolute !important;

    inset:0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(5,27,48,.88) 0%,
            rgba(5,27,48,.70) 38%,
            rgba(5,27,48,.28) 72%,
            rgba(5,27,48,.12) 100%
        ) !important;

    z-index:1 !important;
}


/* ==========================================================
   GRADIENT BAWAH
========================================================== */

.hero-slide::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:35%;

    background:
        linear-gradient(
            to top,
            rgba(4,24,43,.55),
            transparent
        );

    pointer-events:none;

    z-index:1;
}


/* ==========================================================
   CONTAINER
========================================================== */

.hero-container{

    position:relative !important;

    z-index:5 !important;

    width:100% !important;

    max-width:1200px !important;

    height:100% !important;

    margin:0 auto !important;

    display:flex !important;

    align-items:center !important;

    padding:
        90px 30px 100px !important;
}


/* ==========================================================
   CONTENT
========================================================== */

.hero-content{

    position:relative;

    z-index:10;

    max-width:760px !important;

    margin-top:-20px !important;
}


/* ==========================================================
   LABEL
========================================================== */

.hero-label{

    display:inline-flex !important;

    align-items:center !important;

    gap:10px !important;

    margin-bottom:20px !important;

    padding:
        8px 15px !important;

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

    border-radius:30px !important;

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

    color:#fff !important;

    font-size:10px !important;

    font-weight:800 !important;

    letter-spacing:1.5px !important;

    text-transform:uppercase !important;

    backdrop-filter:blur(8px);

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


/* ==========================================================
   GARIS LABEL
========================================================== */

.hero-label-line{

    display:block !important;

    width:28px !important;

    height:2px !important;

    border-radius:10px !important;

    background:#35b5ed !important;

    animation:
        heroLabelLine 2.5s ease-in-out infinite;
}


/* ==========================================================
   JUDUL
========================================================== */

.hero-content h1{

    max-width:850px !important;

    margin:0 !important;

    color:#fff !important;

    font-size:
        clamp(
            38px,
            5.2vw,
            70px
        ) !important;

    font-weight:850 !important;

    line-height:1.05 !important;

    letter-spacing:-2px !important;

    text-transform:uppercase !important;
}


/* ==========================================================
   JUDUL AKSEN
========================================================== */

.hero-content h1 span{

    display:block !important;

    color:#39afe4 !important;

    margin-top:4px !important;
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.hero-content p{

    max-width:700px !important;

    margin:
        22px 0 0 !important;

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

    font-size:15px !important;

    font-weight:500 !important;

    line-height:1.8 !important;
}


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

.hero-buttons{

    display:flex !important;

    align-items:center !important;

    gap:12px !important;

    margin-top:30px !important;
}


/* ==========================================================
   BUTTON UTAMA
========================================================== */

.hero-btn-primary{

    min-height:48px !important;

    padding:
        0 20px !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:10px !important;

    border:0 !important;

    border-radius:8px !important;

    background:#0788c9 !important;

    color:#fff !important;

    text-decoration:none !important;

    font-size:10px !important;

    font-weight:800 !important;

    letter-spacing:.8px !important;

    text-transform:uppercase !important;

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

    transition:
        .3s ease !important;
}


.hero-btn-primary:hover{

    background:#056fa6 !important;

    color:#fff !important;

    transform:translateY(-2px) !important;
}


/* ==========================================================
   BUTTON SEKUNDER
========================================================== */

.hero-btn-secondary{

    min-height:48px !important;

    padding:
        0 20px !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:10px !important;

    border:
        1px solid
        rgba(255,255,255,.30) !important;

    border-radius:8px !important;

    background:
        rgba(255,255,255,.08) !important;

    color:#fff !important;

    text-decoration:none !important;

    font-size:10px !important;

    font-weight:800 !important;

    letter-spacing:.8px !important;

    text-transform:uppercase !important;

    backdrop-filter:blur(8px);

    transition:
        .3s ease !important;
}


.hero-btn-secondary:hover{

    background:
        rgba(255,255,255,.18) !important;

    color:#fff !important;

    transform:translateY(-2px) !important;
}


/* ==========================================================
   ==========================================================
   HILANGKAN LOKASI SEKOLAH
   ==========================================================
========================================================== */

.hero-location{

    display:none !important;
}


/* ==========================================================
   HERO BOTTOM
   TETAP ADA UNTUK CONTROL SLIDER
========================================================== */

.hero-bottom{

    position:absolute !important;

    left:0 !important;

    right:0 !important;

    bottom:0 !important;

    width:100% !important;

    z-index:20 !important;

    padding:
        0 30px 28px !important;

    background:transparent !important;

    border:0 !important;

    box-shadow:none !important;
}


/* ==========================================================
   BOTTOM INNER
========================================================== */

.hero-bottom-inner{

    max-width:1200px !important;

    margin:0 auto !important;

    padding:0 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:flex-end !important;
}


/* ==========================================================
   SLIDER CONTROL
========================================================== */

.hero-slider-control{

    display:flex !important;

    align-items:center !important;

    gap:12px !important;

    padding:
        6px !important;

    border:
        1px solid
        rgba(255,255,255,.18) !important;

    border-radius:10px !important;

    background:
        rgba(5,27,48,.35) !important;

    backdrop-filter:blur(12px);

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


/* ==========================================================
   BUTTON SLIDER
========================================================== */

.hero-slider-control button{

    width:38px !important;

    height:38px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

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

    border-radius:7px !important;

    background:
        rgba(255,255,255,.08) !important;

    color:#fff !important;

    cursor:pointer !important;

    transition:.25s ease !important;
}


.hero-slider-control button:hover{

    background:#0788c9 !important;

    border-color:#0788c9 !important;

    transform:translateY(-2px);
}


/* ==========================================================
   COUNTER
========================================================== */

.slider-counter{

    min-width:60px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:5px !important;

    color:
        rgba(255,255,255,.65) !important;

    font-size:11px !important;
}


.slider-counter strong{

    color:#fff !important;

    font-size:14px !important;

    font-weight:800 !important;
}


/* ==========================================================
   ANIMASI LABEL
========================================================== */

@keyframes heroLabelLine{

    0%,
    100%{

        width:20px;

        opacity:.6;

    }

    50%{

        width:38px;

        opacity:1;

    }

}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media(min-width:1400px){

    .hero-container{

        max-width:1320px !important;

        padding-left:20px !important;

        padding-right:20px !important;
    }

    .hero-content{

        max-width:820px !important;
    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media(max-width:1200px){

    .hero-content h1{

        font-size:
            clamp(
                36px,
                5vw,
                58px
            ) !important;
    }

    .hero-container{

        padding-left:40px !important;

        padding-right:40px !important;
    }

}


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

@media(max-width:992px){

    .hero-section{

        min-height:100svh !important;

        height:100svh !important;
    }

    .hero-slide{

        min-height:100svh !important;
    }

    .hero-container{

        padding:
            80px 28px 110px !important;

        align-items:center !important;
    }

    .hero-content{

        max-width:680px !important;
    }

    .hero-content h1{

        font-size:
            clamp(
                34px,
                6vw,
                50px
            ) !important;

        letter-spacing:-1.3px !important;
    }

}


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

@media(max-width:768px){

    .hero-section{

        min-height:100svh !important;

        height:100svh !important;
    }

    .hero-slide{

        min-height:100svh !important;

        background-position:center !important;
    }

    .hero-overlay{

        background:
            linear-gradient(
                90deg,
                rgba(5,27,48,.88),
                rgba(5,27,48,.60)
            ) !important;
    }

    .hero-container{

        padding:
            75px 20px 115px !important;

        align-items:center !important;
    }

    .hero-content{

        max-width:100% !important;

        margin-top:0 !important;
    }

    .hero-content h1{

        font-size:
            clamp(
                30px,
                9vw,
                43px
            ) !important;

        line-height:1.08 !important;

        letter-spacing:-1px !important;
    }

    .hero-content p{

        font-size:12px !important;

        line-height:1.7 !important;

        max-width:95% !important;
    }

    .hero-buttons{

        flex-direction:column !important;

        align-items:stretch !important;

        width:100% !important;

        max-width:300px !important;

        margin-top:24px !important;
    }

    .hero-btn-primary,
    .hero-btn-secondary{

        width:100% !important;

        min-height:46px !important;
    }

    .hero-bottom{

        padding:
            0 20px 18px !important;
    }

    .hero-bottom-inner{

        justify-content:flex-end !important;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media(max-width:480px){

    .hero-container{

        padding:
            70px 18px 110px !important;
    }

    .hero-label{

        font-size:9px !important;

        padding:
            7px 12px !important;
    }

    .hero-content h1{

        font-size:29px !important;
    }

    .hero-content p{

        font-size:11px !important;
    }

    .hero-slider-control{

        gap:7px !important;
    }

    .hero-slider-control button{

        width:34px !important;

        height:34px !important;
    }

    .slider-counter{

        min-width:50px !important;
    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

    .hero-label-line{

        animation:none !important;
    }

    .hero-slide{

        transition:none !important;
    }

}
/* ==========================================================
   HERO — MODERN PEMERINTAH
   FULL PAGE • MINIMALIS • TANPA BLUR
   ANGKA 01/03 DISEMBUNYIKAN
========================================================== */


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

.hero-section{

    position:relative !important;

    width:100% !important;

    height:100vh !important;

    min-height:100vh !important;

    margin:0 !important;

    padding:0 !important;

    overflow:hidden !important;

    background:#102b43 !important;
}


/* ==========================================================
   SLIDER
========================================================== */

.hero-slider{

    position:absolute !important;

    inset:0 !important;

    width:100% !important;

    height:100% !important;

    overflow:hidden !important;
}


/* ==========================================================
   SLIDE
========================================================== */

.hero-slide{

    position:absolute !important;

    inset:0 !important;

    width:100% !important;

    height:100% !important;

    min-height:100vh !important;

    display:flex !important;

    align-items:center !important;

    background-size:cover !important;

    background-position:center !important;

    background-repeat:no-repeat !important;

    opacity:0;

    visibility:hidden;

    transform:scale(1.02);

    transition:
        opacity .8s ease,
        transform 7s ease,
        visibility .8s ease !important;
}


/* ==========================================================
   SLIDE AKTIF
========================================================== */

.hero-slide.active{

    opacity:1 !important;

    visibility:visible !important;

    transform:scale(1) !important;

    z-index:2 !important;
}


/* ==========================================================
   OVERLAY
   TIDAK BLUR
========================================================== */

.hero-overlay{

    position:absolute !important;

    inset:0 !important;

    z-index:1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(5,31,55,.84) 0%,
            rgba(5,31,55,.67) 38%,
            rgba(5,31,55,.34) 70%,
            rgba(5,31,55,.12) 100%
        ) !important;

    backdrop-filter:none !important;

    -webkit-backdrop-filter:none !important;
}


/* ==========================================================
   GRADIENT BAWAH
========================================================== */

.hero-slide::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:28%;

    background:
        linear-gradient(
            to top,
            rgba(3,24,42,.48),
            transparent
        );

    z-index:1;

    pointer-events:none;
}


/* ==========================================================
   CONTAINER
========================================================== */

.hero-container{

    position:relative !important;

    z-index:5 !important;

    width:100% !important;

    height:100% !important;

    max-width:1200px !important;

    margin:0 auto !important;

    display:flex !important;

    align-items:center !important;

    padding:
        80px 30px 100px !important;
}


/* ==========================================================
   CONTENT
========================================================== */

.hero-content{

    position:relative !important;

    z-index:10 !important;

    width:100% !important;

    max-width:720px !important;

    margin:0 !important;
}


/* ==========================================================
   LABEL
========================================================== */

.hero-label{

    display:inline-flex !important;

    align-items:center !important;

    gap:9px !important;

    margin-bottom:16px !important;

    padding:
        7px 13px !important;

    border:
        1px solid
        rgba(255,255,255,.25) !important;

    border-radius:30px !important;

    background:
        rgba(255,255,255,.08) !important;

    color:#fff !important;

    font-size:9px !important;

    font-weight:800 !important;

    letter-spacing:1.5px !important;

    text-transform:uppercase !important;
}


/* ==========================================================
   GARIS LABEL
========================================================== */

.hero-label-line{

    display:block !important;

    width:25px !important;

    height:2px !important;

    border-radius:10px !important;

    background:#21a7df !important;

    animation:
        heroLineMove 2.5s ease-in-out infinite;
}


/* ==========================================================
   JUDUL
========================================================== */

.hero-content h1{

    max-width:720px !important;

    margin:0 !important;

    padding:0 !important;

    color:#fff !important;

    font-size:
        clamp(
            32px,
            4.3vw,
            54px
        ) !important;

    font-weight:800 !important;

    line-height:1.08 !important;

    letter-spacing:-1.2px !important;

    text-transform:uppercase !important;
}


/* ==========================================================
   JUDUL AKSEN
========================================================== */

.hero-content h1 span{

    display:inline !important;

    color:#39a9dc !important;

    margin-left:5px !important;
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.hero-content p{

    max-width:650px !important;

    margin:
        17px 0 0 !important;

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

    font-size:13px !important;

    font-weight:500 !important;

    line-height:1.75 !important;
}


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

.hero-buttons{

    display:flex !important;

    align-items:center !important;

    gap:10px !important;

    margin-top:25px !important;
}


/* ==========================================================
   BUTTON PRIMARY
========================================================== */

.hero-btn-primary{

    min-height:44px !important;

    padding:
        0 18px !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:9px !important;

    border:0 !important;

    border-radius:7px !important;

    background:#087fba !important;

    color:#fff !important;

    font-size:9px !important;

    font-weight:800 !important;

    letter-spacing:.8px !important;

    text-transform:uppercase !important;

    text-decoration:none !important;

    transition:
        .3s ease !important;
}


.hero-btn-primary:hover{

    background:#056d9f !important;

    color:#fff !important;

    transform:translateY(-2px) !important;
}


/* ==========================================================
   BUTTON SECONDARY
========================================================== */

.hero-btn-secondary{

    min-height:44px !important;

    padding:
        0 18px !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:9px !important;

    border:
        1px solid
        rgba(255,255,255,.35) !important;

    border-radius:7px !important;

    background:
        rgba(255,255,255,.06) !important;

    color:#fff !important;

    font-size:9px !important;

    font-weight:800 !important;

    letter-spacing:.8px !important;

    text-transform:uppercase !important;

    text-decoration:none !important;

    transition:
        .3s ease !important;
}


.hero-btn-secondary:hover{

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

    color:#fff !important;

    transform:translateY(-2px) !important;
}


/* ==========================================================
   HILANGKAN LOKASI
========================================================== */

.hero-location{

    display:none !important;
}


/* ==========================================================
   BOTTOM
========================================================== */

.hero-bottom{

    position:absolute !important;

    left:0 !important;

    right:0 !important;

    bottom:0 !important;

    z-index:30 !important;

    height:55px !important;

    padding:0 !important;

    margin:0 !important;

    background:transparent !important;

    border:0 !important;

    box-shadow:none !important;
}


/* ==========================================================
   INNER
========================================================== */

.hero-bottom-inner{

    width:100% !important;

    height:100% !important;

    max-width:1200px !important;

    margin:0 auto !important;

    padding:0 30px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;
}


/* ==========================================================
   HAPUS 01 / 03 + TOMBOL PANAH
========================================================== */

.hero-slider-control{

    display:none !important;
}


/* ==========================================================
   GANTI DENGAN TITIK HIDUP
========================================================== */

.hero-bottom-inner::after{

    content:"•••";

    display:block;

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

    font-size:18px;

    font-weight:800;

    letter-spacing:7px;

    line-height:1;

    transform:translateX(3px);

    animation:
        heroDots 2s ease-in-out infinite;
}


/* ==========================================================
   ANIMASI TITIK
========================================================== */

@keyframes heroDots{

    0%,
    100%{

        opacity:.35;

        transform:
            translateY(0)
            translateX(3px);

        letter-spacing:5px;
    }

    50%{

        opacity:1;

        transform:
            translateY(-3px)
            translateX(3px);

        letter-spacing:9px;
    }

}


/* ==========================================================
   ANIMASI GARIS LABEL
========================================================== */

@keyframes heroLineMove{

    0%,
    100%{

        width:20px;

        opacity:.55;
    }

    50%{

        width:34px;

        opacity:1;
    }

}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media(min-width:1400px){

    .hero-container{

        max-width:1280px !important;

        padding-left:20px !important;

        padding-right:20px !important;
    }

    .hero-content{

        max-width:760px !important;
    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media(max-width:1200px){

    .hero-container{

        padding:
            80px 40px 90px !important;
    }

    .hero-content h1{

        font-size:
            clamp(
                31px,
                4.8vw,
                50px
            ) !important;
    }

}


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

@media(max-width:992px){

    .hero-section{

        height:100svh !important;

        min-height:100svh !important;
    }

    .hero-slide{

        height:100svh !important;

        min-height:100svh !important;
    }

    .hero-container{

        padding:
            75px 28px 90px !important;
    }

    .hero-content{

        max-width:650px !important;
    }

    .hero-content h1{

        font-size:
            clamp(
                29px,
                6vw,
                44px
            ) !important;
    }

    .hero-content p{

        font-size:12px !important;
    }

}


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

@media(max-width:768px){

    .hero-section{

        height:100svh !important;

        min-height:100svh !important;
    }

    .hero-slide{

        height:100svh !important;

        min-height:100svh !important;

        background-position:center !important;
    }

    .hero-overlay{

        background:
            linear-gradient(
                90deg,
                rgba(5,31,55,.86),
                rgba(5,31,55,.55)
            ) !important;
    }

    .hero-container{

        padding:
            70px 20px 90px !important;
    }

    .hero-content{

        max-width:100% !important;
    }

    .hero-label{

        margin-bottom:14px !important;

        font-size:8px !important;
    }

    .hero-content h1{

        font-size:
            clamp(
                27px,
                8vw,
                38px
            ) !important;

        line-height:1.12 !important;

        letter-spacing:-.7px !important;
    }

    .hero-content h1 span{

        margin-left:3px !important;
    }

    .hero-content p{

        max-width:95% !important;

        margin-top:14px !important;

        font-size:11px !important;

        line-height:1.7 !important;
    }

    .hero-buttons{

        flex-direction:column !important;

        align-items:stretch !important;

        width:100% !important;

        max-width:280px !important;

        margin-top:21px !important;
    }

    .hero-btn-primary,
    .hero-btn-secondary{

        width:100% !important;

        min-height:43px !important;
    }

    .hero-bottom{

        height:45px !important;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media(max-width:480px){

    .hero-container{

        padding:
            65px 17px 80px !important;
    }

    .hero-content h1{

        font-size:26px !important;
    }

    .hero-content p{

        font-size:10.5px !important;
    }

    .hero-buttons{

        max-width:260px !important;
    }

}


/* ==========================================================
   AKSESIBILITAS
========================================================== */

@media(prefers-reduced-motion:reduce){

    .hero-slide{

        transition:none !important;
    }

    .hero-label-line,
    .hero-bottom-inner::after{

        animation:none !important;
    }

}
/* ==========================================================
   FIX HEADER FINAL
   TOP INFO HILANG SAAT SCROLL
   NAVBAR PUTIH TETAP DI ATAS
========================================================== */


/* ==========================================================
   RESET FIX SEBELUMNYA
========================================================== */

body {
    padding-top: 0 !important;
}


/* Jangan fixed sebelum scroll */
header .navbar,
header nav.navbar,
.navbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}


/* ==========================================================
   NAVBAR SAAT NORMAL
========================================================== */

header .navbar,
header nav.navbar,
.navbar {

    width: 100% !important;

    background: #fff !important;

    z-index: 99999 !important;

    box-shadow:
        0 3px 15px rgba(15, 35, 55, .06) !important;

    border-bottom:
        1px solid #e5ebf1 !important;

}


/* ==========================================================
   SAAT SCROLL
   NAVBAR PINDAH KE PALING ATAS
========================================================== */

body.scrolled header .navbar,
body.scrolled header nav.navbar,
body.scrolled .navbar {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    width: 100% !important;

    height: 84px !important;

    z-index: 999999 !important;

    background: #ffffff !important;

    box-shadow:
        0 6px 24px rgba(15, 35, 55, .12) !important;

    border-bottom:
        1px solid #e3eaf0 !important;

    animation:
        navbarMasuk .28s ease both;

}


/* ==========================================================
   ANIMASI NAVBAR
========================================================== */

@keyframes navbarMasuk {

    from {

        transform:
            translateY(-100%);

    }

    to {

        transform:
            translateY(0);

    }

}


/* ==========================================================
   TOP INFO
   BIARKAN HILANG KETIKA SCROLL
========================================================== */

body.scrolled .topbar,
body.scrolled .top-bar,
body.scrolled .header-top,
body.scrolled .header-information,
body.scrolled .header-info {

    transform:
        translateY(-100%) !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

}


/* ==========================================================
   ISI NAVBAR
========================================================== */

header .navbar .container,
header nav.navbar .container,
.navbar .container {

    display: flex !important;

    align-items: center !important;

    min-height: 84px !important;

}


/* ==========================================================
   LOGO
========================================================== */

header .navbar-brand {

    display: flex !important;

    align-items: center !important;

    flex-shrink: 0 !important;

}


/* ==========================================================
   NAMA SEKOLAH
========================================================== */

header .navbar-brand strong {

    text-transform: uppercase !important;

    font-size: 15px !important;

    font-weight: 850 !important;

    color: #0b4278 !important;

    line-height: 1.1 !important;

}


/* ==========================================================
   WEBSITE RESMI
========================================================== */

header .navbar-brand small {

    display: block !important;

    margin-top: 3px !important;

    font-size: 8px !important;

    font-weight: 700 !important;

    letter-spacing: .7px !important;

    text-transform: uppercase !important;

    color: #718397 !important;

}


/* ==========================================================
   MENU
========================================================== */

header .navbar-nav {

    display: flex !important;

    align-items: center !important;

    margin-left: auto !important;

}


header .navbar-nav .nav-link {

    text-transform: uppercase !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    color: #40536a !important;

}


/* ==========================================================
   PPDB
========================================================== */

header a[href*="ppdb"] {

    text-transform: uppercase !important;

}


/* ==========================================================
   LOGIN
========================================================== */

header a[href*="login"] {

    text-transform: uppercase !important;

}


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

@media (max-width: 992px) {

    body.scrolled header .navbar,
    body.scrolled header nav.navbar,
    body.scrolled .navbar {

        height: 64px !important;

    }


    body.scrolled header .navbar .container,
    body.scrolled header nav.navbar .container,
    body.scrolled .navbar .container {

        min-height: 64px !important;

    }

}
/* ==========================================================
   HEADER FULL FIXED
   TOPBAR + MAIN HEADER TETAP MUNCUL SAAT SCROLL
   TATA LETAK DAN UKURAN TETAP
========================================================== */

/* ----------------------------------------------------------
   UKURAN HEADER
   Sesuaikan dengan ukuran header lama
---------------------------------------------------------- */

:root{
    --topbar-height: 48px;
    --main-header-height: 82px;
}


/* ==========================================================
   TOPBAR TETAP DI ATAS
========================================================== */

.topbar{

    position: fixed !important;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    height: var(--topbar-height);

    z-index: 10000 !important;

    display: flex;
    align-items: center;

    background: #0b3d78 !important;

}


/* ==========================================================
   MAIN HEADER TETAP DI BAWAH TOPBAR
========================================================== */

.site-header{

    position: fixed !important;

    top: var(--topbar-height);
    left: 0;
    right: 0;

    width: 100%;

    height: var(--main-header-height);

    z-index: 9999 !important;

    background: #ffffff !important;

    border-bottom: 1px solid #e3e9f0;

    box-shadow:
        0 4px 18px rgba(11,61,120,.08);

}


/* ==========================================================
   JANGAN UBAH UKURAN CONTAINER
========================================================== */

.site-header .nav-container{

    height: var(--main-header-height);

    min-height: var(--main-header-height);

}


/* ==========================================================
   RUANG UNTUK HEADER
   Agar konten halaman tidak tertutup header
========================================================== */

body{

    padding-top:
        calc(
            var(--topbar-height)
            +
            var(--main-header-height)
        ) !important;

}


/* ==========================================================
   TOPBAR INNER
   TETAP SESUAI TATA LETAK LAMA
========================================================== */

.topbar .container{

    height: 100%;

}


/* ==========================================================
   TOPBAR KIRI DAN KANAN
========================================================== */

.topbar-inner{

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* ==========================================================
   HEADER TIDAK BERUBAH UKURAN SAAT SCROLL
========================================================== */

.site-header,
.site-header .nav-container,
.topbar{

    transition: none !important;

}


/* ==========================================================
   JANGAN KECILKAN LOGO
========================================================== */

.site-header .brand-logo-wrap{

    flex-shrink: 0;

}


/* ==========================================================
   JANGAN KECILKAN BRAND
========================================================== */

.site-header .brand{

    flex-shrink: 0;

}


/* ==========================================================
   NAVIGASI TETAP DI POSISI LAMA
========================================================== */

.site-header .desktop-navigation{

    flex-shrink: 0;

}


/* ==========================================================
   BUTTON TETAP UKURAN LAMA
========================================================== */

.site-header .header-actions{

    flex-shrink: 0;

}


/* ==========================================================
   DROPDOWN TETAP DI ATAS KONTEN
========================================================== */

.site-header .dropdown-menu{

    z-index: 11000 !important;

}


/* ==========================================================
   MOBILE
   TOPBAR TETAP ADA
========================================================== */

@media (max-width: 992px){

    :root{

        --topbar-height: 48px;

        --main-header-height: 72px;

    }


    .topbar{

        display: flex !important;

        height: var(--topbar-height);

    }


    .site-header{

        top: var(--topbar-height);

        height: var(--main-header-height);

    }


    .site-header .nav-container{

        height: var(--main-header-height);

        min-height: var(--main-header-height);

    }


    body{

        padding-top:
            calc(
                var(--topbar-height)
                +
                var(--main-header-height)
            ) !important;

    }

}


/* ==========================================================
   HP
========================================================== */

@media (max-width: 576px){

    :root{

        --topbar-height: 44px;

        --main-header-height: 66px;

    }


    .topbar{

        height: var(--topbar-height);

        overflow: hidden;

    }


    .site-header{

        top: var(--topbar-height);

        height: var(--main-header-height);

    }


    .site-header .nav-container{

        height: var(--main-header-height);

        min-height: var(--main-header-height);

    }


    body{

        padding-top:
            calc(
                var(--topbar-height)
                +
                var(--main-header-height)
            ) !important;

    }

}
/* ==========================================================
   TOPBAR HILANG SAAT SCROLL
   HEADER UTAMA TETAP MENEMPEL
========================================================== */

/* Kondisi awal */
.topbar{
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000 !important;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


/* Header utama */
.site-header{
    position: fixed !important;

    top: 48px;
    left: 0;
    width: 100%;

    z-index: 9999 !important;

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


/* ==========================================================
   SAAT SCROLL
   TOPBAR HILANG
========================================================== */

body.header-scrolled .topbar{

    transform: translateY(-100%);

    opacity: 0;

    pointer-events: none;

}


/* Header naik ke paling atas */
body.header-scrolled .site-header{

    top: 0 !important;

    box-shadow:
        0 5px 20px rgba(11,61,120,.12);

}


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

body{

    padding-top: 130px;
}


/* ==========================================================
   JANGAN UBAH UKURAN HEADER
========================================================== */

.site-header .nav-container{

    min-height: 82px;
}


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

@media (max-width: 992px){

    .site-header{

        top: 48px;

    }

    body{

        padding-top: 120px;

    }

}


@media (max-width: 576px){

    .site-header{

        top: 44px;

    }

    body{

        padding-top: 110px;

    }

}
/* ==========================================================
   FIX HEADER SAAT SCROLL
   TOPBAR HILANG TOTAL
   HEADER UTAMA TETAP MUNCUL
========================================================== */

/* ==========================================================
   KONDISI NORMAL
========================================================== */

.topbar{
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    height: 48px !important;

    z-index: 10001 !important;

    transition:
        transform .25s ease,
        opacity .25s ease !important;
}


/* HEADER UTAMA */

#mainHeader.site-header{

    position: fixed !important;

    top: 48px !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 10000 !important;

    background: #ffffff !important;

    transition:
        top .25s ease !important;
}


/* ==========================================================
   SAAT SCROLL
========================================================== */

body.header-scrolled .topbar{

    transform: translateY(-100%) !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

}


/* HEADER NAIK KE PALING ATAS */

body.header-scrolled #mainHeader.site-header{

    top: 0 !important;

}


/* ==========================================================
   JANGAN UBAH UKURAN HEADER
========================================================== */

#mainHeader .nav-container{

    min-height: 82px !important;

    height: 82px !important;

}


/* ==========================================================
   KONTEN TIDAK TERTUTUP HEADER
========================================================== */

body{

    padding-top: 130px !important;

}


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

@media (max-width: 992px){

    .topbar{

        height: 48px !important;

    }

    #mainHeader.site-header{

        top: 48px !important;

    }

    #mainHeader .nav-container{

        min-height: 72px !important;

        height: 72px !important;

    }

    body{

        padding-top: 120px !important;

    }

}


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

@media (max-width: 576px){

    .topbar{

        height: 44px !important;

    }

    #mainHeader.site-header{

        top: 44px !important;

    }

    #mainHeader .nav-container{

        min-height: 66px !important;

        height: 66px !important;

    }

    body{

        padding-top: 110px !important;

    }

}
/* ==========================================================
   MOBILE - SEMBUNYIKAN TOPBAR
   TIDAK MENGUBAH HEADER DESKTOP
========================================================== */

@media (max-width: 768px){

    /* Sembunyikan seluruh topbar pada HP */
    .topbar{
        display:none !important;
    }

    /* Header utama tetap tampil */
    .site-header{
        display:block !important;
        position:sticky !important;
        top:0 !important;
        z-index:9999 !important;
        width:100%;
    }

    /* Container header */
    .nav-container{
        width:100%;
        padding-left:16px;
        padding-right:16px;
    }

    /* Logo dan nama sekolah tetap */
    .brand{
        display:flex !important;
        align-items:center;
    }

    .brand-text{
        display:flex !important;
        flex-direction:column;
    }

    /* Navigasi desktop disembunyikan */
    .desktop-navigation{
        display:none !important;
    }

    /* Tombol kanan desktop */
    .header-actions{
        display:flex !important;
        align-items:center;
    }

    /* PPDB dan Login desktop disembunyikan di HP */
    .header-ppdb,
    .header-login{
        display:none !important;
    }

    /* Tombol menu mobile tetap */
    .mobile-menu-button{
        display:flex !important;
        align-items:center;
        justify-content:center;
    }

    /* Menu mobile */
    .mobile-navigation{
        z-index:10000 !important;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width: 480px){

    .nav-container{
        min-height:68px;
        padding-left:12px;
        padding-right:12px;
    }

    .brand-logo-wrap{
        width:44px;
        height:44px;
    }

    .brand-logo{
        max-width:100%;
        max-height:100%;
    }

    .brand-text strong{
        font-size:15px;
        line-height:1.2;
    }

    .brand-text span{
        font-size:9px;
        margin-top:3px;
    }

}
/* ==========================================================
   MOBILE HEADER FIXED - SELALU PALING ATAS
========================================================== */

@media (max-width: 768px){

    /* Header selalu menempel di paling atas */
    .site-header{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;

        z-index:99999 !important;

        background:#ffffff !important;

        opacity:1 !important;

        visibility:visible !important;

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


    /* Jangan biarkan background halaman terlihat di belakang header */
    .site-header::before{
        content:"";

        position:absolute;

        top:0;
        left:0;
        right:0;
        bottom:0;

        background:#ffffff;

        z-index:-1;
    }


    /* Header utama tetap solid */
    .nav-container{
        position:relative;

        z-index:2;

        background:#ffffff;
    }


    /* Brand tetap terlihat */
    .brand{
        position:relative;

        z-index:3;
    }


    /* Tombol menu tetap di atas */
    .header-actions{
        position:relative;

        z-index:3;
    }


    /* Menu mobile juga berada di atas semua konten */
    .mobile-navigation{
        position:fixed !important;

        top:68px !important;
        left:0 !important;
        right:0 !important;

        z-index:99998 !important;

        background:#ffffff !important;
    }


    /* Beri ruang agar isi halaman tidak tertutup header */
    body{
        padding-top:68px;
    }

}


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

@media (max-width:480px){

    .site-header{
        min-height:64px !important;
    }

    .nav-container{
        min-height:64px !important;
    }

    .mobile-navigation{
        top:64px !important;
    }

    body{
        padding-top:64px;
    }

}
/* ==========================================================
   KUNCI HEADER MOBILE
   HEADER TIDAK TEMBUS SAAT SCROLL
========================================================== */

@media (max-width: 768px){

    html,
    body{
        overflow-x:hidden !important;
    }

    /* HEADER DIKUNCI */
    header.site-header{
        position:fixed !important;

        top:0 !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;

        height:68px !important;
        min-height:68px !important;

        z-index:2147483647 !important;

        background:#ffffff !important;

        background-image:none !important;

        opacity:1 !important;

        visibility:visible !important;

        filter:none !important;

        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;

        isolation:isolate !important;

        transform:translate3d(0,0,0) !important;

        box-shadow:
            0 3px 15px rgba(0,0,0,.10) !important;
    }


    /* LAPISAN PUTIH PENGUNCI */
    header.site-header::before{
        content:"" !important;

        position:absolute !important;

        top:0 !important;
        left:0 !important;

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

        background:#ffffff !important;

        opacity:1 !important;

        z-index:-1 !important;

        pointer-events:none !important;
    }


    /* NAV CONTAINER */
    header.site-header .nav-container{
        position:relative !important;

        width:100% !important;
        height:68px !important;
        min-height:68px !important;

        background:#ffffff !important;

        opacity:1 !important;

        z-index:2 !important;
    }


    /* BRAND */
    header.site-header .brand{
        position:relative !important;

        z-index:10 !important;

        background:#ffffff !important;
    }


    /* ACTION */
    header.site-header .header-actions{
        position:relative !important;

        z-index:10 !important;

        background:#ffffff !important;
    }


    /* LOGO */
    header.site-header .brand-logo-wrap{
        background:#ffffff !important;
    }


    /* MOBILE BUTTON */
    header.site-header .mobile-menu-button{
        position:relative !important;

        z-index:20 !important;

        background:#ffffff !important;
    }


    /* TOPBAR HILANG DI MOBILE */
    .topbar{
        display:none !important;
    }


    /* NAV DESKTOP HILANG */
    .desktop-navigation{
        display:none !important;
    }


    /* PPDB & LOGIN DESKTOP HILANG */
    .header-ppdb,
    .header-login{
        display:none !important;
    }


    /* MENU MOBILE */
    header.site-header .mobile-navigation{
        position:fixed !important;

        top:68px !important;

        left:0 !important;
        right:0 !important;

        width:100% !important;

        max-height:calc(100vh - 68px) !important;

        overflow-y:auto !important;

        background:#ffffff !important;

        opacity:1 !important;

        z-index:2147483646 !important;

        box-shadow:
            0 12px 30px rgba(0,0,0,.12) !important;
    }


    /* PAKSA ISI MOBILE MENU PUTIH */
    header.site-header .mobile-navigation,
    header.site-header .mobile-nav-inner{
        background-color:#ffffff !important;
        background-image:none !important;
    }


    /* ISI HALAMAN TIDAK MENUTUP HEADER */
    body{
        padding-top:68px !important;
    }


    /* HERO TIDAK BOLEH NAIK KE ATAS HEADER */
    .hero-section,
    .hero-slider,
    .hero-slide{
        position:relative;
        z-index:1 !important;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width:480px){

    header.site-header{
        height:64px !important;
        min-height:64px !important;
    }

    header.site-header .nav-container{
        height:64px !important;
        min-height:64px !important;
    }

    header.site-header .mobile-navigation{
        top:64px !important;
        max-height:calc(100vh - 64px) !important;
    }

    body{
        padding-top:64px !important;
    }

}
/* ==========================================================
   MOBILE - HEADER RAPAT KE PALING ATAS
   Logo + Nama Sekolah + Toggle tetap seperti sekarang
========================================================== */

@media screen and (max-width: 768px){

    /* Hilangkan ruang kosong di atas halaman */
    html,
    body{
        margin:0 !important;
        padding:0 !important;
        padding-top:0 !important;
        min-height:100% !important;
    }

    /* Header utama langsung menempel ke bagian atas */
    .site-header{
        position:relative !important;
        top:0 !important;
        margin-top:0 !important;
        padding-top:0 !important;
        width:100% !important;
        z-index:9999 !important;
    }

    /* Container header */
    .site-header .nav-container{
        margin-top:0 !important;
        padding-top:0 !important;
    }

    /* Baris logo + tulisan + toggle */
    .site-header .brand,
    .site-header .header-actions{
        margin-top:0 !important;
    }

    /* Header mobile tetap rapat */
    .site-header .nav-container{
        min-height:0 !important;
    }

    /* Logo dan tulisan jangan digeser */
    .site-header .brand{
        transform:none !important;
    }

    /* Toggle tetap di posisi kanan */
    .site-header .mobile-menu-button{
        transform:none !important;
        margin-top:0 !important;
    }

}


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

@media screen and (max-width: 480px){

    html,
    body{
        margin:0 !important;
        padding:0 !important;
        padding-top:0 !important;
    }

    .site-header{
        margin-top:0 !important;
        padding-top:0 !important;
    }

    .site-header .nav-container{
        margin-top:0 !important;
        padding-top:0 !important;
    }

}
/* ==========================================================
   MOBILE - RAPATKAN HEADER SEDIKIT LAGI KE ATAS
========================================================== */

@media screen and (max-width: 768px){

    .site-header .nav-container{
        transform:translateY(-5px) !important;
    }

    .site-header .brand,
    .site-header .header-actions{
        transform:translateY(5px) !important;
    }

}


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

@media screen and (max-width:480px){

    .site-header .nav-container{
        transform:translateY(-4px) !important;
    }

    .site-header .brand,
    .site-header .header-actions{
        transform:translateY(4px) !important;
    }

}
/* ==========================================================
   MOBILE - RAPATKAN LAGI 3PX
========================================================== */

@media screen and (max-width: 768px){

    .site-header .nav-container{
        transform:translateY(-8px) !important;
    }

    .site-header .brand,
    .site-header .header-actions{
        transform:translateY(8px) !important;
    }

}


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

@media screen and (max-width:480px){

    .site-header .nav-container{
        transform:translateY(-7px) !important;
    }

    .site-header .brand,
    .site-header .header-actions{
        transform:translateY(7px) !important;
    }

}
/* ==========================================================
   MOBILE — HEADER FULL RAPAT KE PALING ATAS
   LOGO + NAMA + TOGGLE TETAP
========================================================== */

@media screen and (max-width: 768px){

    html,
    body{
        margin:0 !important;
        padding:0 !important;
        padding-top:0 !important;
        margin-top:0 !important;
    }

    .topbar{
        margin:0 !important;
        padding:0 !important;
    }

    .site-header{
        position:relative !important;

        top:0 !important;
        left:0 !important;
        right:0 !important;

        margin:0 !important;
        padding:0 !important;

        width:100% !important;

        transform:none !important;

        border-top:0 !important;

        z-index:99999 !important;
    }

    .site-header .nav-container{
        position:relative !important;

        top:0 !important;

        margin:0 !important;
        padding-top:0 !important;

        transform:none !important;

        width:100% !important;

        display:flex !important;
        align-items:center !important;
    }

    .site-header .brand{
        margin-top:0 !important;
        padding-top:0 !important;

        transform:none !important;
    }

    .site-header .header-actions{
        margin-top:0 !important;
        padding-top:0 !important;

        transform:none !important;
    }

    .site-header .mobile-menu-button{
        margin-top:0 !important;

        transform:none !important;
    }

}


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

@media screen and (max-width:480px){

    html,
    body{
        margin:0 !important;
        padding:0 !important;
        padding-top:0 !important;
    }

    .site-header{
        margin:0 !important;
        padding:0 !important;
        top:0 !important;
    }

    .site-header .nav-container{
        margin:0 !important;
        padding-top:0 !important;
    }

}
/* ==========================================================
   MOBILE — HEADER FULL RAPAT KE PALING ATAS
   LOGO + NAMA + TOGGLE TETAP
========================================================== */

@media screen and (max-width: 768px){

    html,
    body{
        margin:0 !important;
        padding:0 !important;
        padding-top:0 !important;
        margin-top:0 !important;
    }

    .topbar{
        margin:0 !important;
        padding:0 !important;
    }

    .site-header{
        position:relative !important;

        top:0 !important;
        left:0 !important;
        right:0 !important;

        margin:0 !important;
        padding:0 !important;

        width:100% !important;

        transform:none !important;

        border-top:0 !important;

        z-index:99999 !important;
    }

    .site-header .nav-container{
        position:relative !important;

        top:0 !important;

        margin:0 !important;
        padding-top:0 !important;

        transform:none !important;

        width:100% !important;

        display:flex !important;
        align-items:center !important;
    }

    .site-header .brand{
        margin-top:0 !important;
        padding-top:0 !important;

        transform:none !important;
    }

    .site-header .header-actions{
        margin-top:0 !important;
        padding-top:0 !important;

        transform:none !important;
    }

    .site-header .mobile-menu-button{
        margin-top:0 !important;

        transform:none !important;
    }

}


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

@media screen and (max-width:480px){

    html,
    body{
        margin:0 !important;
        padding:0 !important;
        padding-top:0 !important;
    }

    .site-header{
        margin:0 !important;
        padding:0 !important;
        top:0 !important;
    }

    .site-header .nav-container{
        margin:0 !important;
        padding-top:0 !important;
    }

}
/* ==========================================================
   MOBILE — TOPBAR DI ATAS HEADER SEKOLAH
========================================================== */

@media screen and (max-width: 768px){

    /* TOPBAR TAMPIL KEMBALI */
    .topbar{
        display:block !important;

        position:relative !important;

        top:0 !important;
        left:0 !important;

        width:100% !important;

        height:36px !important;
        min-height:36px !important;

        margin:0 !important;
        padding:0 !important;

        background:#0B3D78 !important;

        z-index:100000 !important;

        overflow:hidden !important;
    }


    /* ISI TOPBAR */
    .topbar .container,
    .topbar .topbar-inner{

        width:100% !important;
        max-width:none !important;

        height:36px !important;
        min-height:36px !important;

        margin:0 !important;

        padding:0 10px !important;

        display:flex !important;

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

        box-sizing:border-box !important;
    }


    /* KIRI */
    .topbar-left{

        display:flex !important;

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

        width:auto !important;

        gap:7px !important;

        white-space:nowrap !important;
    }


    /* KANAN */
    .topbar-right{

        display:flex !important;

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

        width:auto !important;

        gap:7px !important;

        white-space:nowrap !important;
    }


    /* TEKS TOPBAR */
    .topbar span,
    .topbar a{

        font-size:8.5px !important;

        line-height:1 !important;

        font-weight:600 !important;

        color:#ffffff !important;

        white-space:nowrap !important;

        text-decoration:none !important;
    }


    .topbar i{

        font-size:9px !important;

        margin-right:2px !important;
    }


    .topbar-divider{

        display:block !important;

        width:1px !important;

        height:11px !important;

        background:rgba(255,255,255,.35) !important;

        flex:0 0 1px !important;
    }


    /* ======================================================
       HEADER SEKOLAH TEPAT DI BAWAH TOPBAR
    ====================================================== */

    .site-header{

        position:relative !important;

        top:0 !important;
        left:0 !important;

        width:100% !important;

        margin:0 !important;
        padding:0 !important;

        transform:none !important;

        z-index:99999 !important;

        background:#ffffff !important;
    }


    .site-header .nav-container{

        margin:0 !important;

        padding-top:0 !important;

        transform:none !important;
    }


    /* ======================================================
       HERO TURUN SETELAH TOPBAR + HEADER
    ====================================================== */

    .hero-section{

        margin-top:0 !important;

    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media screen and (max-width:480px){

    .topbar{

        height:34px !important;
        min-height:34px !important;
    }


    .topbar .container,
    .topbar .topbar-inner{

        height:34px !important;
        min-height:34px !important;

        padding:0 6px !important;
    }


    .topbar-left,
    .topbar-right{

        gap:5px !important;
    }


    .topbar span,
    .topbar a{

        font-size:7.5px !important;
    }


    .topbar i{

        font-size:8px !important;
    }


    .topbar-divider{

        height:10px !important;
    }

}
/* ==========================================================
   MOBILE MODERN HEADER
   TOPBAR + HEADER MENYATU DAN TETAP DI ATAS SAAT SCROLL
========================================================== */

@media screen and (max-width: 768px){

    /* ======================================================
       TOPBAR PEMERINTAH
    ====================================================== */

    .topbar{

        display:block !important;

        position:fixed !important;

        top:0 !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;

        height:34px !important;
        min-height:34px !important;
        max-height:34px !important;

        margin:0 !important;
        padding:0 !important;

        background:#0b3d78 !important;

        z-index:100001 !important;

        overflow:hidden !important;

        box-sizing:border-box !important;

    }


    .topbar .container,
    .topbar .topbar-inner{

        width:100% !important;
        max-width:none !important;

        height:34px !important;
        min-height:34px !important;

        margin:0 !important;

        padding:0 12px !important;

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        box-sizing:border-box !important;

    }


    /* ======================================================
       SUSUNAN TOPBAR
    ====================================================== */

    .topbar-left,
    .topbar-right{

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        gap:7px !important;

        width:auto !important;

        min-width:0 !important;

        white-space:nowrap !important;

    }


    .topbar-left span,
    .topbar-right span,
    .topbar-right a{

        display:inline-flex !important;

        align-items:center !important;

        color:#ffffff !important;

        font-family:
            Inter,
            sans-serif !important;

        font-size:9px !important;

        line-height:1 !important;

        font-weight:600 !important;

        white-space:nowrap !important;

        text-decoration:none !important;

    }


    .topbar i{

        font-size:9px !important;

        margin-right:3px !important;

    }


    .topbar-divider{

        display:inline-block !important;

        width:1px !important;

        height:11px !important;

        min-width:1px !important;

        background:rgba(255,255,255,.35) !important;

    }


    /* ======================================================
       HEADER UTAMA
    ====================================================== */

    .site-header{

        position:fixed !important;

        top:34px !important;

        left:0 !important;
        right:0 !important;

        width:100% !important;

        height:68px !important;

        min-height:68px !important;
        max-height:68px !important;

        margin:0 !important;
        padding:0 !important;

        background:#ffffff !important;

        z-index:100000 !important;

        transform:none !important;

        opacity:1 !important;

        visibility:visible !important;

        box-shadow:
            0 2px 12px rgba(15,23,42,.10) !important;

        border:0 !important;

        border-bottom:1px solid #e6ebf1 !important;

        box-sizing:border-box !important;

    }


    /* ======================================================
       CONTAINER HEADER
    ====================================================== */

    .site-header .nav-container{

        width:100% !important;

        max-width:none !important;

        height:68px !important;
        min-height:68px !important;

        margin:0 !important;

        padding:0 14px !important;

        display:flex !important;

        align-items:center !important;

        justify-content:space-between !important;

        box-sizing:border-box !important;

        background:#ffffff !important;

    }


    /* ======================================================
       BRAND
    ====================================================== */

    .site-header .brand{

        display:flex !important;

        align-items:center !important;

        height:68px !important;

        min-width:0 !important;

        flex:1 1 auto !important;

        margin:0 !important;

        padding:0 !important;

        transform:none !important;

    }


    .site-header .brand-logo-wrap{

        width:42px !important;
        height:42px !important;

        min-width:42px !important;
        min-height:42px !important;

        margin:0 9px 0 0 !important;

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

    }


    .site-header .brand-logo{

        width:42px !important;
        height:42px !important;

        object-fit:contain !important;

        display:block !important;

    }


    /* ======================================================
       NAMA SEKOLAH
    ====================================================== */

    .site-header .brand-text{

        display:flex !important;

        flex-direction:column !important;

        justify-content:center !important;

        align-items:flex-start !important;

        min-width:0 !important;

        margin:0 !important;

        padding:0 !important;

    }


    .site-header .brand-text strong{

        display:block !important;

        margin:0 !important;
        padding:0 !important;

        color:#0b3d78 !important;

        font-family:
            "Plus Jakarta Sans",
            Inter,
            sans-serif !important;

        font-size:15px !important;

        line-height:18px !important;

        font-weight:800 !important;

        white-space:nowrap !important;

        overflow:hidden !important;

        text-overflow:ellipsis !important;

        max-width:220px !important;

    }


    .site-header .brand-text span{

        display:block !important;

        margin:2px 0 0 !important;

        padding:0 !important;

        color:#7b8794 !important;

        font-size:9px !important;

        line-height:12px !important;

        font-weight:600 !important;

        letter-spacing:.25px !important;

        white-space:nowrap !important;

    }


    /* ======================================================
       TOGGLE
    ====================================================== */

    .site-header .header-actions{

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        height:68px !important;

        margin:0 !important;

        padding:0 !important;

        flex:0 0 auto !important;

    }


    .site-header .header-ppdb,
    .site-header .header-login{

        display:none !important;

    }


    .site-header .mobile-menu-button{

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        flex-direction:column !important;

        width:42px !important;

        height:42px !important;

        min-width:42px !important;

        min-height:42px !important;

        margin:0 !important;

        padding:0 !important;

        gap:4px !important;

        background:#ffffff !important;

        border:1px solid #dce4ec !important;

        border-radius:9px !important;

        box-shadow:none !important;

    }


    .site-header .mobile-menu-button span{

        display:block !important;

        width:21px !important;

        height:2px !important;

        margin:0 !important;

        background:#0b3d78 !important;

        border-radius:3px !important;

    }


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

    .site-header .mobile-navigation{

        position:fixed !important;

        top:102px !important;

        left:0 !important;
        right:0 !important;

        width:100% !important;

        max-height:calc(100vh - 102px) !important;

        overflow-y:auto !important;

        background:#ffffff !important;

        z-index:99999 !important;

    }


    /* ======================================================
       KONTEN TIDAK TERTUTUP HEADER
       34px TOPBAR + 68px HEADER = 102px
    ====================================================== */

    body{

        padding-top:102px !important;

    }


    main{

        padding-top:0 !important;

        margin-top:0 !important;

    }


    .hero-section{

        margin-top:0 !important;

    }

}


/* ==========================================================
   MOBILE 480px
========================================================== */

@media screen and (max-width:480px){

    .topbar{

        height:32px !important;

        min-height:32px !important;

        max-height:32px !important;

    }


    .topbar .container,
    .topbar .topbar-inner{

        height:32px !important;

        min-height:32px !important;

        padding:0 7px !important;

    }


    .topbar-left,
    .topbar-right{

        gap:5px !important;

    }


    .topbar-left span,
    .topbar-right span,
    .topbar-right a{

        font-size:8px !important;

    }


    .topbar i{

        font-size:8px !important;

    }


    .topbar-divider{

        height:10px !important;

    }


    .site-header{

        top:32px !important;

        height:66px !important;

        min-height:66px !important;

        max-height:66px !important;

    }


    .site-header .nav-container{

        height:66px !important;

        min-height:66px !important;

        padding:0 12px !important;

    }


    .site-header .brand{

        height:66px !important;

    }


    .site-header .brand-logo-wrap,
    .site-header .brand-logo{

        width:40px !important;

        height:40px !important;

        min-width:40px !important;

        min-height:40px !important;

    }


    .site-header .brand-text strong{

        font-size:14px !important;

        line-height:17px !important;

        max-width:200px !important;

    }


    .site-header .brand-text span{

        font-size:8.5px !important;

        line-height:11px !important;

    }


    .site-header .header-actions{

        height:66px !important;

    }


    .site-header .mobile-menu-button{

        width:40px !important;

        height:40px !important;

        min-width:40px !important;

        min-height:40px !important;

    }


    .site-header .mobile-navigation{

        top:98px !important;

        max-height:calc(100vh - 98px) !important;

    }


    body{

        padding-top:98px !important;

    }

}
/* ==========================================================
   MOBILE FINAL
   TOPBAR + HEADER RAPAT, FULL WIDTH, TIDAK TERPOTONG
========================================================== */

@media (max-width: 768px){

    /* ======================================================
       TOPBAR
    ====================================================== */

    .topbar{
        position:fixed !important;

        top:0 !important;
        left:0 !important;
        right:0 !important;

        width:100vw !important;

        height:32px !important;
        min-height:32px !important;
        max-height:32px !important;

        margin:0 !important;
        padding:0 !important;

        display:block !important;

        background:#0b3d78 !important;

        z-index:100001 !important;

        overflow:hidden !important;

        box-sizing:border-box !important;
    }


    /* CONTAINER */
    .topbar .container,
    .topbar-inner{

        width:100% !important;
        max-width:none !important;

        height:32px !important;
        min-height:32px !important;

        margin:0 !important;

        padding:0 8px !important;

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        box-sizing:border-box !important;
    }


    /* ======================================================
       TOPBAR KIRI + KANAN
    ====================================================== */

    .topbar-left,
    .topbar-right{

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        flex:0 0 auto !important;

        width:auto !important;

        min-width:0 !important;

        gap:6px !important;

        white-space:nowrap !important;
    }


    /* ======================================================
       TEKS
    ====================================================== */

    .topbar-left span,
    .topbar-right span,
    .topbar-right a{

        display:inline-flex !important;

        align-items:center !important;

        width:auto !important;

        max-width:none !important;

        overflow:visible !important;

        text-overflow:clip !important;

        white-space:nowrap !important;

        color:#ffffff !important;

        font-family:Inter, sans-serif !important;

        font-size:8px !important;

        line-height:32px !important;

        font-weight:600 !important;

        letter-spacing:-.05px !important;

        text-decoration:none !important;
    }


    .topbar i{

        flex:0 0 auto !important;

        font-size:8px !important;

        margin-right:2px !important;
    }


    .topbar-divider{

        display:inline-block !important;

        flex:0 0 1px !important;

        width:1px !important;

        height:10px !important;

        margin:0 !important;

        background:rgba(255,255,255,.38) !important;
    }


    /* ======================================================
       HEADER UTAMA
    ====================================================== */

    .site-header{

        position:fixed !important;

        top:32px !important;
        left:0 !important;
        right:0 !important;

        width:100vw !important;

        height:64px !important;
        min-height:64px !important;
        max-height:64px !important;

        margin:0 !important;
        padding:0 !important;

        background:#ffffff !important;

        z-index:100000 !important;

        transform:none !important;

        border:0 !important;

        border-bottom:1px solid #e7ebf0 !important;

        box-shadow:0 2px 10px rgba(15,23,42,.08) !important;

        box-sizing:border-box !important;
    }


    /* ======================================================
       CONTAINER HEADER
    ====================================================== */

    .site-header .nav-container{

        width:100% !important;
        max-width:none !important;

        height:64px !important;
        min-height:64px !important;

        margin:0 !important;

        padding:0 12px !important;

        display:flex !important;

        align-items:center !important;

        justify-content:space-between !important;

        box-sizing:border-box !important;
    }


    /* ======================================================
       BRAND
    ====================================================== */

    .site-header .brand{

        height:64px !important;

        display:flex !important;

        align-items:center !important;

        flex:1 1 auto !important;

        min-width:0 !important;

        margin:0 !important;

        padding:0 !important;

        transform:none !important;
    }


    .site-header .brand-logo-wrap{

        width:40px !important;
        height:40px !important;

        min-width:40px !important;
        min-height:40px !important;

        margin:0 8px 0 0 !important;

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;
    }


    .site-header .brand-logo{

        width:40px !important;
        height:40px !important;

        object-fit:contain !important;

        display:block !important;
    }


    /* ======================================================
       NAMA SEKOLAH
    ====================================================== */

    .site-header .brand-text{

        min-width:0 !important;

        display:flex !important;

        flex-direction:column !important;

        justify-content:center !important;

        align-items:flex-start !important;

        margin:0 !important;

        padding:0 !important;
    }


    .site-header .brand-text strong{

        display:block !important;

        width:auto !important;

        max-width:calc(100vw - 115px) !important;

        margin:0 !important;

        padding:0 !important;

        overflow:hidden !important;

        text-overflow:ellipsis !important;

        white-space:nowrap !important;

        color:#0b3d78 !important;

        font-family:
            "Plus Jakarta Sans",
            Inter,
            sans-serif !important;

        font-size:14px !important;

        line-height:17px !important;

        font-weight:800 !important;
    }


    .site-header .brand-text span{

        display:block !important;

        margin:1px 0 0 !important;

        padding:0 !important;

        color:#7b8794 !important;

        font-family:Inter,sans-serif !important;

        font-size:8.5px !important;

        line-height:11px !important;

        font-weight:600 !important;

        white-space:nowrap !important;
    }


    /* ======================================================
       TOGGLE
    ====================================================== */

    .site-header .header-actions{

        height:64px !important;

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        flex:0 0 auto !important;

        margin:0 !important;

        padding:0 !important;
    }


    .site-header .header-ppdb,
    .site-header .header-login{

        display:none !important;
    }


    .site-header .mobile-menu-button{

        display:flex !important;

        width:40px !important;
        height:40px !important;

        min-width:40px !important;
        min-height:40px !important;

        margin:0 !important;
        padding:0 !important;

        align-items:center !important;

        justify-content:center !important;

        flex-direction:column !important;

        gap:4px !important;

        border:1px solid #dbe3eb !important;

        border-radius:9px !important;

        background:#ffffff !important;

        box-shadow:none !important;
    }


    .site-header .mobile-menu-button span{

        display:block !important;

        width:20px !important;

        height:2px !important;

        margin:0 !important;

        background:#0b3d78 !important;

        border-radius:3px !important;
    }


    /* ======================================================
       BODY
       32px TOPBAR + 64px HEADER = 96px
    ====================================================== */

    body{

        padding-top:96px !important;

        margin:0 !important;
    }


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

    .mobile-navigation{

        position:fixed !important;

        top:96px !important;

        left:0 !important;
        right:0 !important;

        width:100vw !important;

        max-height:calc(100vh - 96px) !important;

        overflow-y:auto !important;

        z-index:99999 !important;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width:480px){

    .topbar,
    .topbar .container,
    .topbar-inner{

        height:30px !important;
        min-height:30px !important;
        max-height:30px !important;
    }


    .topbar .container,
    .topbar-inner{

        padding:0 6px !important;
    }


    .topbar-left,
    .topbar-right{

        gap:5px !important;
    }


    .topbar-left span,
    .topbar-right span,
    .topbar-right a{

        font-size:7.5px !important;

        line-height:30px !important;

        letter-spacing:-.15px !important;
    }


    .topbar i{

        font-size:7.5px !important;
    }


    .topbar-divider{

        height:9px !important;
    }


    .site-header{

        top:30px !important;

        height:62px !important;

        min-height:62px !important;

        max-height:62px !important;
    }


    .site-header .nav-container,
    .site-header .brand{

        height:62px !important;

        min-height:62px !important;
    }


    .site-header .brand-logo-wrap,
    .site-header .brand-logo{

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

        min-width:38px !important;
        min-height:38px !important;
    }


    .site-header .brand-text strong{

        font-size:13.5px !important;

        line-height:16px !important;

        max-width:calc(100vw - 105px) !important;
    }


    .site-header .brand-text span{

        font-size:8px !important;

        line-height:10px !important;
    }


    .site-header .header-actions{

        height:62px !important;
    }


    .site-header .mobile-menu-button{

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

        min-width:38px !important;
        min-height:38px !important;
    }


    body{

        padding-top:92px !important;
    }


    .mobile-navigation{

        top:92px !important;

        max-height:calc(100vh - 92px) !important;
    }

}
/* ==========================================================
   MOBILE - HILANGKAN SPACE ANTARA TOPBAR & HEADER
========================================================== */

@media (max-width: 768px){

    .topbar{
        margin-bottom:0 !important;
        padding-bottom:0 !important;
    }

    .site-header{
        margin-top:0 !important;
        padding-top:0 !important;
    }

    .site-header .nav-container{
        margin-top:0 !important;
        padding-top:0 !important;
    }

}


@media (max-width:480px){

    .topbar{
        margin-bottom:0 !important;
        padding-bottom:0 !important;
    }

    .site-header{
        margin-top:0 !important;
        padding-top:0 !important;
    }

}
/* ==========================================================
   MOBILE — TOPBAR + HEADER DIKUNCI TANPA SPACE
========================================================== */

@media screen and (max-width: 768px){

    /* ======================================================
       TOPBAR DIKUNCI PALING ATAS
    ====================================================== */

    .topbar{
        position:fixed !important;

        top:0 !important;
        left:0 !important;
        right:0 !important;

        width:100vw !important;

        height:32px !important;
        min-height:32px !important;
        max-height:32px !important;

        margin:0 !important;
        padding:0 !important;

        border:0 !important;

        transform:none !important;

        z-index:100002 !important;

        box-sizing:border-box !important;
    }


    /* ======================================================
       HEADER LANGSUNG MENEMPEL DI BAWAH TOPBAR
    ====================================================== */

    .site-header{
        position:fixed !important;

        top:32px !important;
        left:0 !important;
        right:0 !important;

        width:100vw !important;

        height:64px !important;
        min-height:64px !important;
        max-height:64px !important;

        margin:0 !important;
        padding:0 !important;

        border-top:0 !important;

        transform:none !important;

        z-index:100001 !important;

        box-sizing:border-box !important;
    }


    /* ======================================================
       KUNCI CONTAINER
    ====================================================== */

    .site-header .nav-container{

        position:absolute !important;

        top:0 !important;
        left:0 !important;

        width:100% !important;

        height:64px !important;
        min-height:64px !important;

        margin:0 !important;
        padding:0 12px !important;

        transform:none !important;

        box-sizing:border-box !important;
    }


    /* ======================================================
       BRAND
    ====================================================== */

    .site-header .brand{

        position:absolute !important;

        left:12px !important;
        top:0 !important;

        height:64px !important;

        margin:0 !important;
        padding:0 !important;

        transform:none !important;

        display:flex !important;

        align-items:center !important;
    }


    /* ======================================================
       TOGGLE
    ====================================================== */

    .site-header .header-actions{

        position:absolute !important;

        right:12px !important;
        top:0 !important;

        height:64px !important;

        margin:0 !important;
        padding:0 !important;

        transform:none !important;

        display:flex !important;

        align-items:center !important;
    }


    .site-header .mobile-menu-button{

        margin:0 !important;

        transform:none !important;
    }


    /* ======================================================
       PAKSA TIDAK ADA JARAK
    ====================================================== */

    .topbar + .site-header{

        margin-top:0 !important;
        padding-top:0 !important;
    }


    body{

        margin:0 !important;

        padding-top:96px !important;
    }

}


/* ==========================================================
   HP KECIL — LEBIH RAPAT
========================================================== */

@media screen and (max-width:480px){

    .topbar{

        height:30px !important;
        min-height:30px !important;
        max-height:30px !important;
    }


    .site-header{

        top:30px !important;

        height:62px !important;
        min-height:62px !important;
        max-height:62px !important;
    }


    .site-header .nav-container{

        height:62px !important;
        min-height:62px !important;
    }


    .site-header .brand{

        height:62px !important;
    }


    .site-header .header-actions{

        height:62px !important;
    }


    body{

        padding-top:92px !important;
    }

}
/* ==========================================================
   MOBILE — KUNCI HEADER + CEGAH BACKGROUND TEMBUS
========================================================== */

@media screen and (max-width: 768px){

    html,
    body{
        margin:0 !important;
        padding:0 !important;
        overflow-x:hidden !important;
    }

    /* TOPBAR TETAP DI PALING ATAS */
    .topbar{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;
        height:32px !important;
        min-height:32px !important;

        z-index:99999 !important;

        margin:0 !important;
        padding:0 !important;

        background:#0b3d78 !important;
    }

    /* HEADER TEPAT DI BAWAH TOPBAR */
    .site-header{
        position:fixed !important;

        top:32px !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;
        height:64px !important;
        min-height:64px !important;

        z-index:99998 !important;

        margin:0 !important;
        padding:0 !important;

        background:#fff !important;

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

    /* ISI HEADER */
    .site-header .nav-container{
        height:64px !important;
        min-height:64px !important;

        margin:0 !important;
        padding:0 12px !important;

        background:#fff !important;
    }

    /* BRAND */
    .site-header .brand{
        height:64px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
    }

    /* TOGGLE */
    .site-header .header-actions{
        height:64px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
    }

    /* ======================================================
       PENTING:
       SLIDER TIDAK BOLEH BERADA DI ATAS HEADER
    ====================================================== */

    .hero,
    .hero-section,
    .hero-slider,
    .hero-slide{
        z-index:1 !important;
    }

    /* HEADER SELALU DI DEPAN */
    .topbar,
    .site-header{
        isolation:isolate !important;
    }

    /* RUANG KONTEN SESUAI HEADER */
    body{
        padding-top:96px !important;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media screen and (max-width:480px){

    .topbar{
        height:30px !important;
        min-height:30px !important;
    }

    .site-header{
        top:30px !important;

        height:62px !important;
        min-height:62px !important;
    }

    .site-header .nav-container,
    .site-header .brand,
    .site-header .header-actions{
        height:62px !important;
    }

    body{
        padding-top:92px !important;
    }

}
/* ==========================================================
   FOOTER PEMERINTAH MODERN
   SMP NEGERI 2 MOYUDAN
   ========================================================== */


/* ==========================================================
   KONTAK + MASUKAN
========================================================== */

.footer-contact-feedback {
    display: grid;
    grid-template-columns: minmax(150px, .9fr) minmax(190px, 1.1fr);
    gap: 24px;
    align-items: start;
}


/* ==========================================================
   HUBUNGI SEKOLAH
========================================================== */

.footer-contact-box {
    min-width: 0;
}


.footer-contact-box .footer-heading,
.footer-feedback-box .footer-heading {
    position: relative;
    margin: 0 0 16px;
    padding-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .01em;
}


/*
|--------------------------------------------------------------------------
| GARIS IDENTITAS PEMERINTAH
|--------------------------------------------------------------------------
*/

.footer-contact-box .footer-heading::after,
.footer-feedback-box .footer-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    opacity: .75;
}


/* ==========================================================
   DAFTAR KONTAK
========================================================== */

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.55;
}


.footer-contact-item i {
    flex: 0 0 17px;
    width: 17px;
    margin-top: 3px;
    font-size: 14px;
    opacity: .82;
}


.footer-contact-item span {
    min-width: 0;
    word-break: break-word;
}


/* ==========================================================
   MASUKAN & SARAN
========================================================== */

.footer-feedback-box {
    min-width: 0;
}


.footer-feedback-description {
    margin: -3px 0 13px;
    font-size: 12.5px;
    line-height: 1.6;
    opacity: .78;
}


/* ==========================================================
   FORM MASUKAN
========================================================== */

.footer-feedback-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.footer-feedback-field {
    width: 100%;
}


.footer-feedback-field input,
.footer-feedback-field textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;

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

    border-radius: 5px;

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

    color: #fff;

    padding: 9px 11px;

    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.45;

    outline: none;

    transition:
        border-color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}


/* ==========================================================
   INPUT
========================================================== */

.footer-feedback-field input {
    height: 38px;
}


/* ==========================================================
   TEXTAREA
========================================================== */

.footer-feedback-field textarea {
    min-height: 74px;
    resize: vertical;
}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.footer-feedback-field input::placeholder,
.footer-feedback-field textarea::placeholder {
    color: rgba(255,255,255,.58);
}


/* ==========================================================
   FOCUS
   Aksesibilitas / keyboard friendly
========================================================== */

.footer-feedback-field input:focus,
.footer-feedback-field textarea:focus {
    border-color: rgba(255,255,255,.62);

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

    box-shadow:
        0 0 0 3px rgba(255,255,255,.08);
}


/* ==========================================================
   TOMBOL
========================================================== */

.footer-feedback-button {
    position: relative;

    width: 100%;
    min-height: 38px;

    margin-top: 2px;

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

    border-radius: 5px;

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

    color: #fff;

    padding: 9px 14px;

    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;

    letter-spacing: .01em;

    cursor: pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .15s ease;
}


.footer-feedback-button:hover {
    background: rgba(255,255,255,.20);
    border-color: rgba(255,255,255,.40);
}


.footer-feedback-button:focus-visible {
    outline: 3px solid rgba(255,255,255,.35);
    outline-offset: 2px;
}


.footer-feedback-button:active {
    transform: translateY(1px);
}


/* ==========================================================
   PESAN BERHASIL
========================================================== */

.footer-feedback-success {
    margin-bottom: 10px;

    padding: 9px 11px;

    border-left: 3px solid #5fcf8d;

    border-radius: 3px;

    background: rgba(46,160,96,.12);

    color: #e4f8eb;

    font-size: 11.5px;
    line-height: 1.5;
}


/* ==========================================================
   PESAN ERROR
========================================================== */

.footer-feedback-error {
    margin-bottom: 10px;

    padding: 9px 11px;

    border-left: 3px solid #ef8b8b;

    border-radius: 3px;

    background: rgba(190,50,50,.12);

    color: #ffe3e3;

    font-size: 11.5px;
    line-height: 1.5;
}


/* ==========================================================
   PEMISAH HALUS
========================================================== */

.footer-contact-box {
    padding-right: 20px;
    border-right: 1px solid rgba(255,255,255,.12);
}


.footer-feedback-box {
    padding-left: 2px;
}


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

@media (max-width: 1100px) {

    .footer-contact-feedback {
        grid-template-columns: minmax(145px, 1fr) minmax(180px, 1fr);
        gap: 18px;
    }

    .footer-contact-box {
        padding-right: 16px;
    }

}


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

@media (max-width: 900px) {

    .footer-contact-feedback {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-contact-box {
        padding-right: 0;
        padding-bottom: 20px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

}


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

@media (max-width: 600px) {

    .footer-contact-feedback {
        gap: 22px;
    }

    .footer-contact {
        gap: 9px;
    }

    .footer-contact-item {
        font-size: 13px;
    }

    .footer-feedback-description {
        font-size: 12px;
    }

    .footer-feedback-field input,
    .footer-feedback-field textarea {
        font-size: 13px;
    }

}


/* ==========================================================
   MOBILE SANGAT KECIL
========================================================== */

@media (max-width: 400px) {

    .footer-contact-box .footer-heading,
    .footer-feedback-box .footer-heading {
        font-size: 14px;
    }

    .footer-contact-item {
        font-size: 12.5px;
    }

    .footer-feedback-button {
        min-height: 40px;
    }

}
 /* ==========================================================
    KONTAK PAGE — MODERN MINIMAL GOVERNMENT STYLE
    OVERRIDE CSS
    Tambahkan PALING BAWAH CSS LAMA
========================================================== */


/* ==========================================================
   GLOBAL
========================================================== */

.kontak-page {
    background: #fff;
    color: #172033;
}


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

.kontak-page-hero {
    position: relative;
    overflow: hidden;
}


.kontak-page-hero .page-hero-content {
    max-width: 760px;
}


.kontak-page-hero .page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 13px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
}


.kontak-page-hero .page-kicker::before {
    content: "";

    width: 28px;
    height: 2px;

    background: currentColor;

    border-radius: 2px;
}


.kontak-page-hero h1 {
    margin: 0;

    font-size: clamp(32px, 4vw, 48px);

    font-weight: 750;

    line-height: 1.1;

    letter-spacing: -.035em;
}


.kontak-page-hero h1 span {
    font-weight: 400;
}


.kontak-page-hero p {
    max-width: 560px;

    margin-top: 15px;

    font-size: 14px;

    line-height: 1.7;

    opacity: .78;
}


/* ==========================================================
   BREADCRUMB
========================================================== */

.kontak-page .breadcrumb-section {
    background: #fff;

    border-bottom: 1px solid #edf0f4;
}


.kontak-page .breadcrumb {
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 9px;

    font-size: 12px;
}


.kontak-page .breadcrumb a {
    color: #4c6a8a;

    text-decoration: none;

    transition: color .2s ease;
}


.kontak-page .breadcrumb a:hover {
    color: #163a63;
}


.kontak-page .breadcrumb i {
    font-size: 9px;

    color: #9ba7b5;
}


.kontak-page .breadcrumb span {
    color: #7b8795;
}


/* ==========================================================
   INFORMASI KONTAK
========================================================== */

.kontak-information {
    padding: 76px 0 78px;

    background: #fff;
}


.kontak-information .section-header-row {
    margin-bottom: 28px;
}


.kontak-information .section-kicker {
    display: inline-block;

    margin-bottom: 9px;

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

    letter-spacing: .13em;

    color: #526b86;
}


.kontak-information .section-header-row h2 {
    margin: 0;

    font-size: clamp(25px, 3vw, 34px);

    font-weight: 700;

    letter-spacing: -.025em;

    color: #172033;
}


/* ==========================================================
   CONTACT GRID
========================================================== */

.kontak-information-grid {
    display: grid;

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

    gap: 18px;

    max-width: 920px;
}


/* ==========================================================
   CONTACT CARD
========================================================== */

.kontak-information .kontak-card {
    position: relative;

    display: flex;

    gap: 20px;

    min-height: 190px;

    padding: 28px;

    background: #fff;

    border: 1px solid #e5e9ee;

    border-radius: 10px;

    box-shadow:
        0 5px 20px rgba(24, 42, 63, .045);

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


.kontak-information .kontak-card:hover {
    border-color: #d5dce5;

    box-shadow:
        0 10px 28px rgba(24, 42, 63, .075);

    transform: translateY(-2px);
}


/* ==========================================================
   CARD ACCENT
========================================================== */

.kontak-information .kontak-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 26px;
    bottom: 26px;

    width: 3px;

    background: #315d87;

    border-radius: 0 3px 3px 0;
}


/* ==========================================================
   ICON
========================================================== */

.kontak-information .kontak-card-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;

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

    margin-top: 1px;

    border: 1px solid #e2e8ef;

    border-radius: 8px;

    background: #f7f9fb;

    color: #315d87;
}


.kontak-information .kontak-card-icon i {
    font-size: 18px;
}


/* ==========================================================
   CARD CONTENT
========================================================== */

.kontak-information .kontak-card-content {
    min-width: 0;
}


.kontak-information .kontak-card-content > span {
    display: block;

    margin-bottom: 7px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;

    color: #718096;
}


.kontak-information .kontak-card-content h3 {
    margin: 0 0 8px;

    font-size: 19px;

    font-weight: 700;

    letter-spacing: -.015em;

    color: #172033;
}


.kontak-information .kontak-card-content p {
    margin: 0;

    font-size: 13px;

    line-height: 1.65;

    color: #5d6978;

    overflow-wrap: anywhere;
}


.kontak-information .kontak-card-content small {
    display: block;

    margin-top: 10px;

    font-size: 11.5px;

    color: #7c8794;
}


/* ==========================================================
   EMAIL LINK
========================================================== */

.kontak-information .kontak-card-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 15px;

    color: #315d87;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

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


.kontak-information .kontak-card-link:hover {
    color: #183f67;

    gap: 10px;
}


.kontak-information .kontak-card-link i {
    font-size: 10px;
}


/* ==========================================================
   LOCATION
========================================================== */

.kontak-location {
    padding: 78px 0;

    background: #f7f9fb;

    border-top: 1px solid #edf0f4;

    border-bottom: 1px solid #edf0f4;
}


.kontak-location-grid {
    display: grid;

    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);

    gap: 48px;

    align-items: stretch;
}


/* ==========================================================
   LOCATION INFO
========================================================== */

.kontak-location-info {
    display: flex;

    flex-direction: column;

    justify-content: center;
}


.kontak-location-info .section-kicker {
    display: inline-block;

    margin-bottom: 10px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .13em;

    color: #526b86;
}


.kontak-location-info h2 {
    margin: 0 0 25px;

    font-size: clamp(26px, 3vw, 36px);

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -.03em;

    color: #172033;
}


.kontak-location-info h2 span {
    font-weight: 400;
}


/* ==========================================================
   LOCATION DETAIL
========================================================== */

.kontak-location-detail {
    display: flex;

    flex-direction: column;

    gap: 0;

    border-top: 1px solid #dde3e9;
}


.kontak-location-detail > div {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding: 15px 0;

    border-bottom: 1px solid #dde3e9;
}


.kontak-location-detail > div > i {
    flex: 0 0 18px;

    width: 18px;

    margin-top: 2px;

    color: #315d87;

    font-size: 15px;
}


.kontak-location-detail > div > div {
    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


.kontak-location-detail span {
    font-size: 9.5px;

    font-weight: 700;

    letter-spacing: .12em;

    color: #7b8795;
}


.kontak-location-detail strong {
    font-size: 13px;

    font-weight: 600;

    line-height: 1.55;

    color: #394657;
}


/* ==========================================================
   MAP
========================================================== */

.kontak-map {
    position: relative;

    min-height: 360px;

    overflow: hidden;

    border: 1px solid #dce2e8;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            rgba(48, 93, 135, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(48, 93, 135, .045) 1px,
            transparent 1px
        ),
        #eef3f6;

    background-size: 38px 38px;

    box-shadow:
        0 8px 25px rgba(24, 42, 63, .055);
}


.kontak-map-grid {
    position: absolute;

    inset: 0;

    opacity: .65;
}


/* ==========================================================
   MAP CONTENT
========================================================== */

.kontak-map-content {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: min(330px, 82%);

    padding: 25px;

    text-align: center;

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

    border: 1px solid #e1e6eb;

    border-radius: 9px;

    box-shadow:
        0 12px 35px rgba(26, 45, 65, .10);
}


.kontak-map-marker {
    width: 42px;
    height: 42px;

    display: flex;

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

    margin: 0 auto 13px;

    border-radius: 50%;

    background: #315d87;

    color: #fff;
}


.kontak-map-marker i {
    font-size: 17px;
}


.kontak-map-content strong {
    display: block;

    margin-bottom: 5px;

    font-size: 14px;

    font-weight: 700;

    color: #172033;
}


.kontak-map-content > span {
    display: block;

    margin-bottom: 18px;

    font-size: 11.5px;

    color: #7a8592;
}


/* ==========================================================
   GOOGLE MAPS BUTTON
========================================================== */

.kontak-map-button {
    display: inline-flex;

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

    gap: 7px;

    min-height: 36px;

    padding: 8px 14px;

    border: 1px solid #315d87;

    border-radius: 5px;

    background: #315d87;

    color: #fff;

    font-size: 11.5px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.kontak-map-button:hover {
    background: #244d73;

    border-color: #244d73;

    color: #fff;

    transform: translateY(-1px);
}


.kontak-map-button i {
    font-size: 10px;
}


/* ==========================================================
   HILANGKAN BAGIAN YANG SUDAH TIDAK DIPAKAI
   Jika HTML lama masih menyisakannya
========================================================== */

.kontak-services,
.kontak-final {
    display: none;
}


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

@media (max-width: 992px) {

    .kontak-information {
        padding: 60px 0;
    }

    .kontak-location {
        padding: 60px 0;
    }

    .kontak-location-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .kontak-location-info {
        max-width: 700px;
    }

    .kontak-map {
        min-height: 330px;
    }

}


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

@media (max-width: 768px) {

    .kontak-information {
        padding: 48px 0;
    }

    .kontak-information-grid {
        grid-template-columns: 1fr;

        gap: 14px;

        max-width: none;
    }

    .kontak-information .kontak-card {
        min-height: auto;

        padding: 22px;
    }

    .kontak-information .kontak-card::before {
        top: 20px;
        bottom: 20px;
    }

    .kontak-location {
        padding: 48px 0;
    }

    .kontak-map {
        min-height: 300px;
    }

}


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

@media (max-width: 480px) {

    .kontak-page-hero h1 {
        font-size: 32px;
    }

    .kontak-page-hero p {
        font-size: 13px;
    }

    .kontak-information .kontak-card {
        gap: 14px;

        padding: 20px;
    }

    .kontak-information .kontak-card-icon {
        flex-basis: 38px;

        width: 38px;
        height: 38px;
    }

    .kontak-information .kontak-card-icon i {
        font-size: 16px;
    }

    .kontak-information .kontak-card-content h3 {
        font-size: 17px;
    }

    .kontak-location-info h2 {
        font-size: 27px;
    }

    .kontak-map {
        min-height: 280px;
    }

    .kontak-map-content {
        width: 84%;

        padding: 20px;
    }

}
/* ==========================================================
   KONTAK — MODERN ONE PAGE
   GOVERNMENT / INSTITUTIONAL STYLE
   CSS OVERRIDE
========================================================== */


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

.kontak-page {
    background: #f6f8fa;
}


/* ==========================================================
   HERO — DIPADATKAN
========================================================== */

.kontak-page-hero {
    padding: 58px 0 42px !important;
    background: #fff !important;
}


.kontak-page-hero .page-hero-content {
    max-width: 760px;
}


.kontak-page-hero .page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}


.kontak-page-hero .page-kicker::before {
    content: "";

    width: 25px;
    height: 2px;

    background: currentColor;

    border-radius: 2px;
}


.kontak-page-hero h1 {
    margin: 10px 0 0 !important;

    font-size: clamp(32px, 4vw, 48px) !important;

    line-height: 1.05 !important;

    letter-spacing: -.045em;

    font-weight: 750;
}


.kontak-page-hero h1 span {
    font-weight: 400;
}


.kontak-page-hero p {
    max-width: 540px;

    margin: 13px 0 0 !important;

    font-size: 13px !important;

    line-height: 1.6;

    color: #667085;
}


/* ==========================================================
   BREADCRUMB — SANGAT RINGKAS
========================================================== */

.kontak-page .breadcrumb-section {
    background: #fff;

    border-top: 1px solid #edf0f3;
    border-bottom: 1px solid #edf0f3;
}


.kontak-page .breadcrumb {
    min-height: 42px;

    font-size: 11px;
}


/* ==========================================================
   SEMBUNYIKAN SECTION LAMA
========================================================== */

.kontak-page .kontak-intro,
.kontak-page .kontak-services,
.kontak-page .kontak-final {
    display: none !important;
}


/* ==========================================================
   MAIN CONTACT AREA
========================================================== */

.kontak-information {
    padding: 48px 0 !important;

    background: #f6f8fa !important;
}


/* ==========================================================
   HEADER
========================================================== */

.kontak-information .section-header-row {
    margin-bottom: 22px !important;
}


.kontak-information .section-kicker {
    margin-bottom: 6px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .14em;

    color: #496581;
}


.kontak-information .section-header-row h2 {
    margin: 0;

    font-size: 27px;

    line-height: 1.2;

    letter-spacing: -.025em;
}


/* ==========================================================
   SATUKAN CONTACT + MAP
========================================================== */

.kontak-information-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(0, 1.18fr) !important;

    gap: 18px !important;

    max-width: none !important;

    align-items: stretch;
}


/* ==========================================================
   CONTACT CARDS AREA
========================================================== */

.kontak-information-grid .kontak-card {
    min-height: 175px;

    margin: 0 !important;

    padding: 24px !important;

    border: 1px solid #e1e6eb !important;

    border-radius: 9px !important;

    background: #fff !important;

    box-shadow:
        0 4px 18px rgba(15, 35, 55, .045) !important;
}


/* ==========================================================
   CARD ICON
========================================================== */

.kontak-information-grid .kontak-card-icon {
    width: 40px !important;
    height: 40px !important;

    flex: 0 0 40px !important;

    border-radius: 7px !important;

    background: #f3f6f9 !important;

    border: 1px solid #e2e7ec !important;

    color: #315d87 !important;
}


/* ==========================================================
   CARD LABEL
========================================================== */

.kontak-information-grid
.kontak-card-content > span {

    font-size: 9px !important;

    letter-spacing: .13em;

    font-weight: 800;

    color: #7a8795;
}


/* ==========================================================
   CARD TITLE
========================================================== */

.kontak-information-grid
.kontak-card-content h3 {

    margin: 4px 0 7px !important;

    font-size: 18px !important;

    font-weight: 700;

    letter-spacing: -.015em;
}


/* ==========================================================
   CARD TEXT
========================================================== */

.kontak-information-grid
.kontak-card-content p {

    font-size: 12.5px !important;

    line-height: 1.6 !important;

    color: #596676 !important;

    margin: 0 !important;
}


/* ==========================================================
   EMAIL BUTTON
========================================================== */

.kontak-information-grid
.kontak-card-link {

    margin-top: 12px !important;

    font-size: 11px !important;

    color: #315d87 !important;
}


/* ==========================================================
   CONTACT CARD HOVER
========================================================== */

.kontak-information-grid .kontak-card {

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


.kontak-information-grid .kontak-card:hover {

    transform: translateY(-3px);

    border-color: #ccd6df !important;

    box-shadow:
        0 12px 28px rgba(15, 35, 55, .08) !important;
}


/* ==========================================================
   MAP — DIGABUNGKAN DENGAN AREA UTAMA
========================================================== */

.kontak-information-grid::after {

    content: "";

    grid-column: 2;

    grid-row: 1 / span 2;

}


/* ==========================================================
   MAP DIPINDAHKAN SECARA VISUAL
========================================================== */

.kontak-location {
    padding: 0 !important;

    background: #f6f8fa !important;

    border: 0 !important;
}


.kontak-location-grid {

    display: grid !important;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(0, 1.18fr) !important;

    gap: 18px !important;

    max-width: none !important;

    align-items: stretch;
}


/* ==========================================================
   LOCATION INFO
========================================================== */

.kontak-location-info {

    display: none !important;
}


/* ==========================================================
   MAP DIPOSISIKAN SEBAGAI PANEL
========================================================== */

.kontak-map {

    grid-column: 2;

    grid-row: 1;

    min-height: 368px !important;

    margin-top: -193px;

    border-radius: 9px !important;

    border: 1px solid #dfe5ea !important;

    box-shadow:
        0 6px 24px rgba(15, 35, 55, .055) !important;

    overflow: hidden;

    background-color: #edf2f5 !important;
}


/* ==========================================================
   MAP GRID
========================================================== */

.kontak-map-grid {

    opacity: .75;

    background:
        linear-gradient(
            90deg,
            rgba(49,93,135,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(49,93,135,.045) 1px,
            transparent 1px
        );

    background-size: 36px 36px;

    animation:
        kontakMapMove 18s linear infinite;
}


@keyframes kontakMapMove {

    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 18px 18px;
    }

    100% {
        background-position: 36px 36px;
    }

}


/* ==========================================================
   MAP CONTENT
========================================================== */

.kontak-map-content {

    width: min(310px, 82%) !important;

    padding: 22px !important;

    border-radius: 9px !important;

    background: rgba(255,255,255,.96) !important;

    border: 1px solid #e1e6eb !important;

    box-shadow:
        0 15px 35px rgba(20,40,60,.10) !important;

    animation:
        kontakMapFloat 4s ease-in-out infinite;
}


@keyframes kontakMapFloat {

    0%,
    100% {
        transform:
            translate(-50%, -50%);
    }

    50% {
        transform:
            translate(-50%, calc(-50% - 4px));
    }

}


/* ==========================================================
   MAP MARKER
========================================================== */

.kontak-map-marker {

    width: 40px !important;
    height: 40px !important;

    margin-bottom: 11px !important;

    background: #315d87 !important;

    box-shadow:
        0 0 0 7px rgba(49,93,135,.08);

    animation:
        kontakMarkerPulse 2.5s ease-in-out infinite;
}


@keyframes kontakMarkerPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 6px rgba(49,93,135,.07);
    }

    50% {
        box-shadow:
            0 0 0 10px rgba(49,93,135,.13);
    }

}


/* ==========================================================
   MAP TEXT
========================================================== */

.kontak-map-content strong {

    font-size: 13px !important;

    color: #172033;
}


.kontak-map-content > span {

    font-size: 10.5px !important;

    margin-bottom: 15px !important;

    color: #7a8592;
}


/* ==========================================================
   MAP BUTTON
========================================================== */

.kontak-map-button {

    min-height: 35px !important;

    padding: 8px 13px !important;

    border-radius: 5px !important;

    font-size: 10.5px !important;

    background: #315d87 !important;

    border-color: #315d87 !important;

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


.kontak-map-button:hover {

    transform: translateY(-2px);

    background: #244e75 !important;

    box-shadow:
        0 6px 15px rgba(49,93,135,.18);
}


/* ==========================================================
   STATUS INFORMASI
   DITAMBAHKAN SECARA VISUAL
========================================================== */

.kontak-information::after {

    content:
        "●  Layanan informasi resmi sekolah";

    display: block;

    max-width: 1280px;

    margin: 22px auto 0;

    padding: 0 20px;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .025em;

    color: #718096;

    animation:
        kontakStatusFade 3s ease-in-out infinite;
}


@keyframes kontakStatusFade {

    0%,
    100% {
        opacity: .55;
    }

    50% {
        opacity: 1;
    }

}


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

@media (max-width: 992px) {

    .kontak-page-hero {
        padding: 48px 0 35px !important;
    }

    .kontak-information {
        padding: 40px 0 !important;
    }

    .kontak-information-grid {

        grid-template-columns: 1fr 1fr !important;

    }

    .kontak-location-grid {

        grid-template-columns: 1fr 1fr !important;

    }

    .kontak-map {

        margin-top: -193px;

    }

}


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

@media (max-width: 768px) {

    .kontak-page-hero {
        padding: 40px 0 30px !important;
    }

    .kontak-page-hero h1 {
        font-size: 34px !important;
    }

    .kontak-information {
        padding: 32px 0 !important;
    }

    .kontak-information-grid {

        grid-template-columns: 1fr !important;

        gap: 12px !important;

    }

    .kontak-information-grid .kontak-card {

        min-height: 145px;

        padding: 20px !important;

    }

    .kontak-location {

        padding: 0 0 32px !important;

    }

    .kontak-location-grid {

        grid-template-columns: 1fr !important;

    }

    .kontak-map {

        grid-column: 1;

        margin-top: 0;

        min-height: 310px !important;

    }

    .kontak-information::after {

        padding: 0 16px;

    }

}


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

@media (max-width: 480px) {

    .kontak-page-hero h1 {

        font-size: 30px !important;

    }

    .kontak-page-hero p {

        font-size: 12px !important;

    }

    .kontak-information .section-header-row h2 {

        font-size: 23px;

    }

    .kontak-information-grid .kontak-card {

        padding: 18px !important;

    }

    .kontak-map {

        min-height: 285px !important;

    }

    .kontak-map-content {

        width: 84% !important;

        padding: 19px !important;

    }

}


/* ==========================================================
   REDUCE MOTION
   Aksesibilitas
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .kontak-map-grid,
    .kontak-map-content,
    .kontak-map-marker,
    .kontak-information::after {

        animation: none !important;

    }

    .kontak-information-grid .kontak-card,
    .kontak-map-button {

        transition: none !important;

    }

}
/* ==========================================================
   KONTAK — DIRECT CONTACT MINIMAL
   TAMBAHAN / OVERRIDE
   Jangan hapus CSS lama
========================================================== */


/* ==========================================================
   SEMBUNYIKAN HERO KONTAK
========================================================== */

.kontak-page-hero {
    display: none !important;
}


/* ==========================================================
   SEMBUNYIKAN BREADCRUMB
========================================================== */

.kontak-page .breadcrumb-section {
    display: none !important;
}


/* ==========================================================
   AREA KONTAK
========================================================== */

.kontak-information {
    position: relative;

    padding: 58px 0 52px !important;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(49,93,135,.07) 0,
            rgba(49,93,135,.07) 90px,
            transparent 91px
        ),
        radial-gradient(
            circle at 92% 82%,
            rgba(49,93,135,.055) 0,
            rgba(49,93,135,.055) 120px,
            transparent 121px
        ),
        #f7f9fb !important;
}


/* ==========================================================
   BERCak WARNA HALUS
========================================================== */

.kontak-information::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -130px;
    right: 12%;

    border-radius: 50%;

    background: rgba(49,93,135,.035);

    filter: blur(2px);

    pointer-events: none;
}


.kontak-information::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    bottom: -90px;
    left: 18%;

    border-radius: 50%;

    background: rgba(78,124,161,.035);

    pointer-events: none;
}


/* ==========================================================
   CONTAINER
========================================================== */

.kontak-information > .container {
    position: relative;

    z-index: 2;
}


/* ==========================================================
   HEADER KONTAK
========================================================== */

.kontak-information .section-header-row {
    margin-bottom: 24px !important;
}


.kontak-information .section-header-row h2 {
    font-size: clamp(25px, 3vw, 34px) !important;

    font-weight: 750 !important;

    letter-spacing: -.035em;

    color: #182536 !important;
}


.kontak-information .section-kicker {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    font-size: 10px !important;

    font-weight: 800 !important;

    letter-spacing: .14em;

    color: #496581 !important;
}


.kontak-information .section-kicker::before {
    content: "";

    width: 24px;
    height: 2px;

    border-radius: 2px;

    background: #315d87;
}


/* ==========================================================
   CONTACT GRID
========================================================== */

.kontak-information-grid {
    position: relative;

    z-index: 3;

    display: grid !important;

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

    gap: 16px !important;

    max-width: 920px !important;
}


/* ==========================================================
   CONTACT CARD
========================================================== */

.kontak-information .kontak-card {
    position: relative;

    min-height: 155px !important;

    padding: 23px 24px !important;

    overflow: hidden;

    border: 1px solid #e0e6eb !important;

    border-radius: 10px !important;

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

    box-shadow:
        0 5px 22px rgba(24,42,63,.045) !important;

    backdrop-filter: blur(5px);

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


/* ==========================================================
   AKSEN WARNA CARD
========================================================== */

.kontak-information .kontak-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #315d87 0%,
            #6f91ad 45%,
            transparent 100%
        );

    opacity: .9;
}


/* ==========================================================
   BERCak DALAM CARD
========================================================== */

.kontak-information .kontak-card::after {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    right: -55px;
    bottom: -55px;

    border-radius: 50%;

    background: rgba(49,93,135,.035);

    pointer-events: none;
}


/* ==========================================================
   HOVER
========================================================== */

.kontak-information .kontak-card:hover {
    transform: translateY(-3px);

    border-color: #d0d9e1 !important;

    box-shadow:
        0 12px 30px rgba(24,42,63,.075) !important;
}


/* ==========================================================
   ICON
========================================================== */

.kontak-information .kontak-card-icon {
    position: relative;

    z-index: 2;

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

    flex: 0 0 38px !important;

    border-radius: 7px !important;

    background: #f3f6f9 !important;

    border: 1px solid #e1e7ed !important;

    color: #315d87 !important;
}


.kontak-information .kontak-card-icon i {
    font-size: 16px;
}


/* ==========================================================
   CONTENT
========================================================== */

.kontak-information .kontak-card-content {
    position: relative;

    z-index: 2;

    min-width: 0;
}


.kontak-information .kontak-card-content > span {
    font-size: 9px !important;

    font-weight: 800 !important;

    letter-spacing: .13em;

    color: #7b8794 !important;
}


.kontak-information .kontak-card-content h3 {
    margin: 4px 0 7px !important;

    font-size: 18px !important;

    font-weight: 700 !important;

    letter-spacing: -.015em;

    color: #182536 !important;
}


.kontak-information .kontak-card-content p {
    margin: 0 !important;

    font-size: 12.5px !important;

    line-height: 1.6 !important;

    color: #5e6b79 !important;

    overflow-wrap: anywhere;
}


/* ==========================================================
   EMAIL LINK
========================================================== */

.kontak-information .kontak-card-link {
    margin-top: 10px !important;

    font-size: 11px !important;

    font-weight: 700;

    color: #315d87 !important;

    text-decoration: none;

    transition: gap .2s ease;
}


.kontak-information .kontak-card-link:hover {
    gap: 9px;
}


/* ==========================================================
   LOKASI
========================================================== */

.kontak-location {
    padding: 0 0 55px !important;

    background: #f7f9fb !important;

    border: 0 !important;
}


/* ==========================================================
   LOKASI INFO TIDAK PERLU
========================================================== */

.kontak-location-info {
    display: none !important;
}


/* ==========================================================
   MAP FULL WIDTH
========================================================== */

.kontak-location-grid {
    display: block !important;

    max-width: 920px;

    margin: 0 auto;
}


.kontak-map {
    position: relative;

    width: 100%;

    min-height: 270px !important;

    margin: 0 !important;

    border-radius: 10px !important;

    border: 1px solid #dde4ea !important;

    box-shadow:
        0 6px 25px rgba(24,42,63,.05) !important;
}


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

@media (max-width: 768px) {

    .kontak-information {
        padding: 40px 0 35px !important;
    }

    .kontak-information-grid {
        grid-template-columns: 1fr !important;

        gap: 12px !important;
    }

    .kontak-information .kontak-card {
        min-height: 135px !important;

        padding: 20px !important;
    }

    .kontak-location {
        padding-bottom: 35px !important;
    }

    .kontak-map {
        min-height: 250px !important;
    }

}


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

@media (max-width: 480px) {

    .kontak-information {
        padding: 34px 0 30px !important;
    }

    .kontak-information .section-header-row {
        margin-bottom: 18px !important;
    }

    .kontak-information .section-header-row h2 {
        font-size: 23px !important;
    }

    .kontak-information .kontak-card {
        padding: 18px !important;
    }

    .kontak-map {
        min-height: 225px !important;
    }

}
/* ==========================================================
   KONTAK — 2 CARD KIRI + LOKASI KANAN
   OVERRIDE TAMBAHAN
========================================================== */


/* ==========================================================
   AREA UTAMA
========================================================== */

.kontak-information {
    padding: 48px 0 28px !important;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 5% 20%,
            rgba(49,93,135,.055),
            transparent 150px
        ),
        radial-gradient(
            circle at 95% 80%,
            rgba(49,93,135,.045),
            transparent 180px
        ),
        #f7f9fb !important;
}


/* ==========================================================
   HEADER
========================================================== */

.kontak-information .section-header-row {
    margin-bottom: 22px !important;
}

.kontak-information .section-header-row h2 {
    font-size: 28px !important;

    font-weight: 750 !important;

    letter-spacing: -.035em;

    color: #172536 !important;
}


/* ==========================================================
   GRID UTAMA
   KIRI = KONTAK
   KANAN = LOKASI
========================================================== */

.kontak-information-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr) !important;

    grid-template-rows: auto auto;

    gap: 14px !important;

    max-width: 1050px !important;

    margin: 0 auto !important;

    align-items: stretch;
}


/* ==========================================================
   KARTU KONTAK
========================================================== */

.kontak-information-grid .kontak-card {
    position: relative;

    min-height: 150px !important;

    padding: 22px !important;

    margin: 0 !important;

    border-radius: 9px !important;

    border: 1px solid #dfe5ea !important;

    background: rgba(255,255,255,.96) !important;

    box-shadow:
        0 5px 20px rgba(24,42,63,.045) !important;

    overflow: hidden;

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


/* ==========================================================
   GARIS ATAS
========================================================== */

.kontak-information-grid .kontak-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #315d87,
            #7695af,
            transparent
        );
}


/* ==========================================================
   BERCak HALUS
========================================================== */

.kontak-information-grid .kontak-card::after {

    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -50px;
    bottom: -50px;

    border-radius: 50%;

    background: rgba(49,93,135,.035);

    pointer-events: none;
}


/* ==========================================================
   HOVER
========================================================== */

.kontak-information-grid .kontak-card:hover {

    transform: translateY(-2px);

    border-color: #ccd7e0 !important;

    box-shadow:
        0 10px 26px rgba(24,42,63,.075) !important;
}


/* ==========================================================
   ICON
========================================================== */

.kontak-information-grid .kontak-card-icon {

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

    flex: 0 0 38px !important;

    border-radius: 7px !important;

    background: #f3f6f9 !important;

    border: 1px solid #e0e6eb !important;

    color: #315d87 !important;

    position: relative;

    z-index: 2;
}


/* ==========================================================
   TEXT
========================================================== */

.kontak-information-grid .kontak-card-content {

    position: relative;

    z-index: 2;

    min-width: 0;
}


.kontak-information-grid
.kontak-card-content > span {

    font-size: 9px !important;

    font-weight: 800 !important;

    letter-spacing: .13em;

    color: #7b8794 !important;
}


.kontak-information-grid
.kontak-card-content h3 {

    margin: 4px 0 7px !important;

    font-size: 17px !important;

    font-weight: 700 !important;

    color: #182536 !important;
}


.kontak-information-grid
.kontak-card-content p {

    margin: 0 !important;

    font-size: 12px !important;

    line-height: 1.6 !important;

    color: #5c6876 !important;
}


/* ==========================================================
   KODE POS
========================================================== */

.kontak-information-grid
.kontak-card-content small {

    display: block;

    margin-top: 9px;

    font-size: 10.5px;

    color: #7a8794;
}


/* ==========================================================
   EMAIL
========================================================== */

.kontak-information-grid
.kontak-card-link {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-top: 11px !important;

    font-size: 10.5px !important;

    font-weight: 700;

    color: #315d87 !important;

    text-decoration: none;
}


/* ==========================================================
   LOKASI
   DIPINDAHKAN KE KANAN
========================================================== */

.kontak-location {

    position: absolute !important;

    left: calc(50% + 15px);

    right: 0;

    top: 0;

    height: 100%;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    pointer-events: none;
}


/* ==========================================================
   LOCATION GRID
========================================================== */

.kontak-location-grid {

    display: block !important;

    width: 100%;

    height: 100%;

    max-width: none !important;

    margin: 0 !important;
}


/* ==========================================================
   HILANGKAN NARASI LOKASI
========================================================== */

.kontak-location-info {

    display: none !important;
}


/* ==========================================================
   MAP KANAN
========================================================== */

.kontak-map {

    position: absolute !important;

    top: 0;

    right: max(20px, calc((100vw - 1050px) / 2));

    width: calc(
        (100% - 1050px) / 2 + 510px
    );

    max-width: 510px;

    height: 315px !important;

    min-height: 315px !important;

    margin: 0 !important;

    border-radius: 10px !important;

    border: 1px solid #dce3e9 !important;

    background: #edf2f5 !important;

    box-shadow:
        0 7px 26px rgba(24,42,63,.055) !important;

    pointer-events: auto;

    overflow: hidden;
}


/* ==========================================================
   MAP GRID
========================================================== */

.kontak-map-grid {

    background:
        linear-gradient(
            90deg,
            rgba(49,93,135,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(49,93,135,.055) 1px,
            transparent 1px
        );

    background-size: 36px 36px;

    animation:
        kontakGridMove 18s linear infinite;
}


@keyframes kontakGridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 36px 36px;
    }

}


/* ==========================================================
   MAP CONTENT
========================================================== */

.kontak-map-content {

    width: 280px !important;

    padding: 20px !important;

    border-radius: 9px !important;

    background: rgba(255,255,255,.96) !important;

    border: 1px solid #dfe5ea !important;

    box-shadow:
        0 12px 30px rgba(24,42,63,.10) !important;
}


/* ==========================================================
   MARKER
========================================================== */

.kontak-map-marker {

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

    margin-bottom: 10px !important;

    background: #315d87 !important;

    box-shadow:
        0 0 0 7px rgba(49,93,135,.08);

    animation:
        kontakPulse 2.8s ease-in-out infinite;
}


@keyframes kontakPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 6px rgba(49,93,135,.07);
    }

    50% {
        box-shadow:
            0 0 0 10px rgba(49,93,135,.13);
    }

}


/* ==========================================================
   MAP TEXT
========================================================== */

.kontak-map-content strong {

    display: block;

    font-size: 13px !important;

    color: #172536;
}


.kontak-map-content > span {

    display: block;

    margin: 5px 0 14px !important;

    font-size: 10.5px !important;

    color: #7a8794;
}


/* ==========================================================
   MAP BUTTON
========================================================== */

.kontak-map-button {

    display: inline-flex !important;

    align-items: center;

    gap: 7px;

    min-height: 34px !important;

    padding: 7px 12px !important;

    border-radius: 5px !important;

    background: #315d87 !important;

    border: 1px solid #315d87 !important;

    font-size: 10px !important;

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


.kontak-map-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 6px 15px rgba(49,93,135,.18);
}


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

@media (max-width: 900px) {

    .kontak-information {
        padding-bottom: 28px !important;
    }

    .kontak-information-grid {

        grid-template-columns: 1fr !important;

    }

    .kontak-location {

        position: relative !important;

        left: auto;
        right: auto;

        top: auto;

        height: auto;

        margin-top: 14px;

        padding: 0 0 35px !important;

    }

    .kontak-map {

        position: relative !important;

        top: auto;
        right: auto;

        width: 100%;

        max-width: none;

        height: 280px !important;

        min-height: 280px !important;

    }

}


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

@media (max-width: 480px) {

    .kontak-information {

        padding: 34px 0 22px !important;

    }

    .kontak-information
    .section-header-row h2 {

        font-size: 23px !important;

    }

    .kontak-information-grid
    .kontak-card {

        min-height: 135px !important;

        padding: 19px !important;

    }

    .kontak-map {

        height: 250px !important;

        min-height: 250px !important;

    }

    .kontak-map-content {

        width: 250px !important;

        padding: 17px !important;

    }

}
/* ==========================================================
   FIX FINAL KONTAK
   KIRI  : ALAMAT + EMAIL
   KANAN : LOKASI SEKOLAH
   OVERRIDE CSS LAMA
========================================================== */


/* ==========================================================
   HALAMAN KONTAK
========================================================== */

.kontak-page {
    background: #f7f9fb !important;
}


/* ==========================================================
   SEMBUNYIKAN BAGIAN YANG TIDAK DIPERLUKAN
========================================================== */

.kontak-page-hero,
.kontak-page .breadcrumb-section,
.kontak-intro,
.kontak-services,
.kontak-final {
    display: none !important;
}


/* ==========================================================
   AREA KONTAK UTAMA
========================================================== */

.kontak-information {
    position: relative !important;

    padding: 48px 0 45px !important;

    margin: 0 !important;

    background:
        radial-gradient(
            circle at 8% 25%,
            rgba(49,93,135,.055),
            transparent 150px
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(49,93,135,.045),
            transparent 170px
        ),
        #f7f9fb !important;

    overflow: hidden;
}


/* ==========================================================
   HEADER
========================================================== */

.kontak-information .section-header-row {
    margin-bottom: 22px !important;

    text-align: left !important;
}


.kontak-information .section-kicker {
    display: inline-flex !important;

    align-items: center;

    gap: 8px;

    margin-bottom: 7px !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    letter-spacing: .13em;

    color: #496581 !important;
}


.kontak-information .section-kicker::before {
    content: "";

    width: 24px;
    height: 2px;

    border-radius: 2px;

    background: #315d87;
}


.kontak-information .section-header-row h2 {
    margin: 0 !important;

    font-size: clamp(25px, 3vw, 34px) !important;

    line-height: 1.15 !important;

    font-weight: 750 !important;

    letter-spacing: -.035em;

    color: #182536 !important;
}


/* ==========================================================
   WRAPPER UTAMA
   KIRI DAN KANAN
========================================================== */

.kontak-information-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr) !important;

    grid-template-rows: auto auto;

    gap: 14px 18px !important;

    width: 100% !important;

    max-width: 1050px !important;

    margin: 0 auto !important;

    align-items: stretch !important;
}


/* ==========================================================
   CARD ALAMAT
========================================================== */

.kontak-information-grid .kontak-card:nth-child(1) {
    grid-column: 1;

    grid-row: 1;
}


/* ==========================================================
   CARD EMAIL
========================================================== */

.kontak-information-grid .kontak-card:nth-child(2) {
    grid-column: 1;

    grid-row: 2;
}


/* ==========================================================
   CARD KONTAK
========================================================== */

.kontak-information-grid .kontak-card {
    position: relative !important;

    min-height: 145px !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 21px 22px !important;

    display: flex !important;

    align-items: flex-start !important;

    gap: 18px !important;

    border: 1px solid #dfe5ea !important;

    border-radius: 9px !important;

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

    box-shadow:
        0 5px 20px rgba(24,42,63,.045) !important;

    overflow: hidden !important;

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


/* ==========================================================
   GARIS AKSEN ATAS
========================================================== */

.kontak-information-grid .kontak-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #315d87 0%,
            #6d91ad 45%,
            transparent 100%
        );
}


/* ==========================================================
   BERCak WARNA
========================================================== */

.kontak-information-grid .kontak-card::after {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    right: -55px;
    bottom: -55px;

    border-radius: 50%;

    background: rgba(49,93,135,.035);

    pointer-events: none;
}


/* ==========================================================
   HOVER
========================================================== */

.kontak-information-grid .kontak-card:hover {
    transform: translateY(-2px);

    border-color: #ccd7e0 !important;

    box-shadow:
        0 10px 25px rgba(24,42,63,.075) !important;
}


/* ==========================================================
   ICON
========================================================== */

.kontak-information-grid .kontak-card-icon {
    position: relative;

    z-index: 2;

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

    min-width: 38px !important;

    flex: 0 0 38px !important;

    border-radius: 7px !important;

    background: #f3f6f9 !important;

    border: 1px solid #dfe6ec !important;

    color: #315d87 !important;
}


/* ==========================================================
   CONTENT
========================================================== */

.kontak-information-grid .kontak-card-content {
    position: relative;

    z-index: 2;

    min-width: 0;

    flex: 1;
}


.kontak-information-grid
.kontak-card-content > span {
    display: block;

    margin-bottom: 3px !important;

    font-size: 9px !important;

    line-height: 1.3;

    font-weight: 800 !important;

    letter-spacing: .13em;

    color: #7b8794 !important;
}


.kontak-information-grid
.kontak-card-content h3 {
    margin: 3px 0 6px !important;

    font-size: 18px !important;

    line-height: 1.2;

    font-weight: 700 !important;

    color: #182536 !important;
}


.kontak-information-grid
.kontak-card-content p {
    margin: 0 !important;

    font-size: 12.5px !important;

    line-height: 1.55 !important;

    color: #5c6876 !important;
}


.kontak-information-grid
.kontak-card-content small {
    display: block;

    margin-top: 8px;

    font-size: 10.5px;

    color: #7b8794;
}


/* ==========================================================
   EMAIL
========================================================== */

.kontak-information-grid
.kontak-card-link {
    display: inline-flex !important;

    align-items: center;

    gap: 5px;

    margin-top: 10px !important;

    font-size: 10.5px !important;

    font-weight: 700;

    color: #315d87 !important;

    text-decoration: none;
}


.kontak-information-grid
.kontak-card-link:hover {
    color: #244e75 !important;
}


/* ==========================================================
   ==========================================================
   LOKASI
   DIPOSISIKAN BENAR-BENAR DI SAMPING
   ==========================================================
========================================================== */


/*
   Reset seluruh positioning dari CSS sebelumnya.
*/

.kontak-location {
    position: absolute !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: auto !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    pointer-events: auto !important;
}


/*
   Karena HTML lokasi berada setelah
   .kontak-information, kita tarik secara visual
   ke kanan dengan wrapper halaman.
*/

.kontak-page {
    position: relative !important;
}


/* ==========================================================
   LOCATION CONTAINER
========================================================== */

.kontak-location {
    display: block !important;

    width: 100% !important;

    max-width: 1050px !important;

    margin-left: auto !important;

    margin-right: auto !important;

    margin-top: -365px !important;

    margin-bottom: 45px !important;

    z-index: 5;
}


/* ==========================================================
   LOCATION GRID
========================================================== */

.kontak-location-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr) !important;

    gap: 18px !important;

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;
}


/* ==========================================================
   INFO LOKASI TIDAK DITAMPILKAN
========================================================== */

.kontak-location-info {
    display: none !important;
}


/* ==========================================================
   MAP
========================================================== */

.kontak-map {
    grid-column: 2 !important;

    grid-row: 1 !important;

    position: relative !important;

    top: auto !important;

    right: auto !important;

    left: auto !important;

    width: 100% !important;

    max-width: none !important;

    height: 304px !important;

    min-height: 304px !important;

    margin: 0 !important;

    border-radius: 10px !important;

    border: 1px solid #dce4ea !important;

    background: #edf2f5 !important;

    box-shadow:
        0 7px 26px rgba(24,42,63,.055) !important;

    overflow: hidden !important;
}


/* ==========================================================
   MAP GRID
========================================================== */

.kontak-map-grid {
    background:
        linear-gradient(
            90deg,
            rgba(49,93,135,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(49,93,135,.055) 1px,
            transparent 1px
        ) !important;

    background-size: 36px 36px !important;

    animation:
        kontakGridMove 18s linear infinite;
}


@keyframes kontakGridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 36px 36px;
    }

}


/* ==========================================================
   MAP CONTENT
========================================================== */

.kontak-map-content {
    width: 280px !important;

    max-width: calc(100% - 30px);

    padding: 20px !important;

    border-radius: 9px !important;

    background: rgba(255,255,255,.96) !important;

    border: 1px solid #dfe5ea !important;

    box-shadow:
        0 12px 30px rgba(24,42,63,.10) !important;
}


/* ==========================================================
   MAP MARKER
========================================================== */

.kontak-map-marker {
    width: 38px !important;

    height: 38px !important;

    margin-bottom: 10px !important;

    background: #315d87 !important;

    box-shadow:
        0 0 0 7px rgba(49,93,135,.08);

    animation:
        kontakPulse 2.8s ease-in-out infinite;
}


@keyframes kontakPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 6px rgba(49,93,135,.07);
    }

    50% {
        box-shadow:
            0 0 0 10px rgba(49,93,135,.13);
    }

}


/* ==========================================================
   MAP TEXT
========================================================== */

.kontak-map-content strong {
    display: block;

    font-size: 13px !important;

    color: #172536 !important;
}


.kontak-map-content > span {
    display: block;

    margin: 5px 0 14px !important;

    font-size: 10.5px !important;

    color: #7a8794 !important;
}


/* ==========================================================
   MAP BUTTON
========================================================== */

.kontak-map-button {
    display: inline-flex !important;

    align-items: center;

    gap: 7px;

    min-height: 34px !important;

    padding: 7px 12px !important;

    border-radius: 5px !important;

    background: #315d87 !important;

    border: 1px solid #315d87 !important;

    font-size: 10px !important;
}


.kontak-map-button:hover {
    background: #244e75 !important;

    transform: translateY(-2px);
}


/* ==========================================================
   DESKTOP — RAPAT
========================================================== */

@media (min-width: 1100px) {

    .kontak-information {
        padding-top: 42px !important;

        padding-bottom: 28px !important;
    }

    .kontak-location {
        margin-top: -365px !important;

        margin-bottom: 42px !important;
    }

    .kontak-map {
        height: 304px !important;

        min-height: 304px !important;
    }

}


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

@media (max-width: 900px) {

    .kontak-information {
        padding: 38px 0 28px !important;
    }

    .kontak-information-grid {
        grid-template-columns: 1fr !important;

        gap: 12px !important;
    }

    .kontak-information-grid
    .kontak-card {
        grid-column: 1 !important;

        grid-row: auto !important;
    }

    .kontak-location {

        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;

        max-width: 1050px !important;

        margin: 0 auto 35px !important;

        padding: 0 !important;
    }

    .kontak-location-grid {
        display: block !important;
    }

    .kontak-map {

        width: 100% !important;

        height: 280px !important;

        min-height: 280px !important;
    }

}


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

@media (max-width: 600px) {

    .kontak-information {
        padding: 32px 0 24px !important;
    }

    .kontak-information
    .section-header-row {
        margin-bottom: 18px !important;
    }

    .kontak-information
    .section-header-row h2 {
        font-size: 24px !important;
    }

    .kontak-information-grid
    .kontak-card {
        min-height: 135px !important;

        padding: 18px !important;

        gap: 14px !important;
    }

    .kontak-information-grid
    .kontak-card-content p {
        font-size: 12px !important;
    }

    .kontak-map {

        height: 250px !important;

        min-height: 250px !important;
    }

    .kontak-map-content {
        width: 250px !important;

        padding: 17px !important;
    }

}


/* ==========================================================
   MOBILE SANGAT KECIL
========================================================== */

@media (max-width: 400px) {

    .kontak-information-grid
    .kontak-card {

        padding: 16px !important;

        gap: 12px !important;
    }

    .kontak-information-grid
    .kontak-card-icon {

        width: 34px !important;

        height: 34px !important;

        min-width: 34px !important;

        flex-basis: 34px !important;
    }

    .kontak-map {

        height: 225px !important;

        min-height: 225px !important;
    }

}
/* ==========================================================
   KONTAK FINAL DESKTOP
   2 KOLOM BENAR-BENAR BERHADAPAN
========================================================== */

@media (min-width: 901px) {


    /* ======================================================
       PAGE BACKGROUND
    ====================================================== */

    .kontak-page {

        position: relative;

        background:
            linear-gradient(
                rgba(247,250,252,.94),
                rgba(247,250,252,.96)
            ),
            url("https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&w=2000&q=80")
            center center / cover fixed no-repeat !important;

        background-attachment: fixed !important;

    }


    /* ======================================================
       AREA KONTAK
    ====================================================== */

    .kontak-information {

        position: relative !important;

        padding: 48px 0 55px !important;

        margin: 0 !important;

        background: transparent !important;

        overflow: visible !important;

    }


    /* ======================================================
       CONTAINER
    ====================================================== */

    .kontak-information > .container {

        max-width: 1180px !important;

        margin: 0 auto !important;

    }


    /* ======================================================
       JUDUL
    ====================================================== */

    .kontak-information .section-header-row {

        margin: 0 0 22px !important;

        padding: 0 !important;

        text-align: left !important;

    }


    .kontak-information .section-header-row h2 {

        margin: 0 !important;

        font-size: 31px !important;

        line-height: 1.15 !important;

        font-weight: 750 !important;

        letter-spacing: -.035em !important;

        color: #182536 !important;

    }


    .kontak-information .section-kicker {

        margin-bottom: 7px !important;

    }


    /* ======================================================
       KONTAK GRID
    ====================================================== */

    .kontak-information-grid {

        display: grid !important;

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

        grid-template-rows: auto auto !important;

        gap: 14px 20px !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        align-items: stretch !important;

    }


    /* ======================================================
       CARD ALAMAT
    ====================================================== */

    .kontak-information-grid
    .kontak-card:nth-child(1) {

        grid-column: 1 !important;

        grid-row: 1 !important;

    }


    /* ======================================================
       CARD EMAIL
    ====================================================== */

    .kontak-information-grid
    .kontak-card:nth-child(2) {

        grid-column: 1 !important;

        grid-row: 2 !important;

    }


    /* ======================================================
       CARD
    ====================================================== */

    .kontak-information-grid
    .kontak-card {

        width: 100% !important;

        min-height: 145px !important;

        height: auto !important;

        margin: 0 !important;

        padding: 22px 24px !important;

        border-radius: 10px !important;

        background:
            rgba(255,255,255,.96) !important;

        border: 1px solid
            rgba(213,222,230,.95) !important;

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

    }


    /* ======================================================
       CARD TEXT
    ====================================================== */

    .kontak-information-grid
    .kontak-card-content {

        min-width: 0 !important;

        flex: 1 !important;

    }


    .kontak-information-grid
    .kontak-card-content h3 {

        font-size: 18px !important;

        margin: 4px 0 7px !important;

    }


    .kontak-information-grid
    .kontak-card-content p {

        font-size: 12.5px !important;

        line-height: 1.6 !important;

        max-width: 520px !important;

    }


    /* ======================================================
       ======================================================
       LOKASI
       ======================================================
    ====================================================== */


    /*
       Reset CSS lama
    */

    .kontak-location {

        position: absolute !important;

        top: 0 !important;

        left: 0 !important;

        right: 0 !important;

        width: 100% !important;

        max-width: none !important;

        height: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        background: transparent !important;

        pointer-events: none !important;

        z-index: 3 !important;

    }


    /* ======================================================
       LOCATION GRID
    ====================================================== */

    .kontak-location-grid {

        display: block !important;

        width: 100% !important;

        max-width: 1180px !important;

        height: 100% !important;

        margin: 0 auto !important;

        position: relative !important;

    }


    /* ======================================================
       HILANGKAN INFO LOKASI KIRI
    ====================================================== */

    .kontak-location-info {

        display: none !important;

    }


    /* ======================================================
       MAP CARD
    ====================================================== */

    .kontak-map {

        position: absolute !important;

        top: 118px !important;

        right: 0 !important;

        left: auto !important;

        width:
            calc(50% - 10px) !important;

        height: 304px !important;

        min-height: 304px !important;

        max-width: none !important;

        margin: 0 !important;

        border-radius: 10px !important;

        border: 1px solid
            rgba(211,221,229,.95) !important;

        background:
            linear-gradient(
                rgba(239,244,247,.82),
                rgba(232,239,243,.90)
            ) !important;

        box-shadow:
            0 10px 30px
            rgba(25,49,72,.065) !important;

        pointer-events: auto !important;

        overflow: hidden !important;

    }


    /* ======================================================
       MAP GRID
    ====================================================== */

    .kontak-map-grid {

        position: absolute !important;

        inset: 0 !important;

        opacity: .75;

        background:
            linear-gradient(
                90deg,
                rgba(49,93,135,.07) 1px,
                transparent 1px
            ),
            linear-gradient(
                rgba(49,93,135,.07) 1px,
                transparent 1px
            ) !important;

        background-size:
            38px 38px !important;

        animation:
            kontakGridDesktop
            20s linear infinite !important;

    }


    @keyframes kontakGridDesktop {

        from {
            background-position:
                0 0;
        }

        to {
            background-position:
                38px 38px;
        }

    }


    /* ======================================================
       MAP DECORATION
    ====================================================== */

    .kontak-map::before {

        content: "";

        position: absolute;

        width: 260px;

        height: 260px;

        right: -100px;

        bottom: -120px;

        border-radius: 50%;

        border: 1px solid
            rgba(49,93,135,.12);

        box-shadow:
            0 0 0 35px
            rgba(49,93,135,.025),
            0 0 0 70px
            rgba(49,93,135,.018);

        pointer-events: none;

    }


    /* ======================================================
       MAP CONTENT
    ====================================================== */

    .kontak-map-content {

        position: absolute !important;

        left: 50% !important;

        top: 50% !important;

        transform:
            translate(-50%, -50%) !important;

        width: 285px !important;

        min-height: 170px !important;

        padding: 21px !important;

        border-radius: 10px !important;

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

        border: 1px solid
            rgba(216,225,232,.95) !important;

        box-shadow:
            0 14px 35px
            rgba(25,49,72,.11) !important;

        z-index: 5 !important;

    }


    /* ======================================================
       MARKER
    ====================================================== */

    .kontak-map-marker {

        width: 38px !important;

        height: 38px !important;

        margin-bottom: 10px !important;

        background: #315d87 !important;

        box-shadow:
            0 0 0 7px
            rgba(49,93,135,.09) !important;

    }


    /* ======================================================
       MAP TITLE
    ====================================================== */

    .kontak-map-content strong {

        display: block !important;

        margin: 0 !important;

        font-size: 14px !important;

        line-height: 1.3 !important;

        font-weight: 750 !important;

        color: #182536 !important;

    }


    .kontak-map-content > span {

        margin:
            6px 0 14px !important;

        font-size: 11px !important;

        color: #7a8794 !important;

    }


    /* ======================================================
       GOOGLE MAPS BUTTON
    ====================================================== */

    .kontak-map-button {

        min-height: 36px !important;

        padding:
            8px 14px !important;

        border-radius: 6px !important;

        font-size: 10.5px !important;

        font-weight: 700 !important;

        background: #315d87 !important;

        border-color: #315d87 !important;

    }


    /* ======================================================
       SPASI DENGAN FOOTER
    ====================================================== */

    .kontak-location {

        margin-bottom: 0 !important;

    }

}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (min-width: 1200px) {

    .kontak-information > .container {

        max-width: 1180px !important;

    }

    .kontak-location-grid {

        max-width: 1180px !important;

    }

    .kontak-map {

        height: 320px !important;

        min-height: 320px !important;

    }

}


/* ==========================================================
   DESKTOP NORMAL
========================================================== */

@media (min-width: 901px) and (max-width: 1199px) {

    .kontak-information > .container {

        max-width: 94% !important;

    }

    .kontak-location-grid {

        max-width: 94% !important;

    }

    .kontak-map {

        height: 300px !important;

        min-height: 300px !important;

    }

}


/* ==========================================================
   MOBILE
   JANGAN MENGUBAH VERSI YANG SUDAH BAGUS
========================================================== */

@media (max-width: 900px) {

    .kontak-page {

        background:
            linear-gradient(
                rgba(247,250,252,.96),
                rgba(247,250,252,.97)
            ),
            url("https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&w=1200&q=70")
            center center / cover no-repeat !important;

    }

}
/* ==========================================================
   FINAL DESKTOP ALIGNMENT
   KONTAK SMP NEGERI 2 MOYUDAN
========================================================== */

@media (min-width: 901px) {


    /* ======================================================
       AREA KONTAK
    ====================================================== */

    .kontak-information {

        padding-top: 58px !important;

        padding-bottom: 68px !important;

        background: transparent !important;

    }


    /* ======================================================
       HEADER — TENGAH
    ====================================================== */

    .kontak-information .section-header-row {

        width: 100% !important;

        display: flex !important;

        justify-content: center !important;

        text-align: center !important;

        margin: 0 0 28px !important;

    }


    .kontak-information
    .section-header-row > div {

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

    }


    /* ======================================================
       INFORMASI KONTAK
       LABEL TENGAH + GARIS BERGERAK
    ====================================================== */

    .kontak-information
    .section-kicker {

        position: relative !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 10px !important;

        width: max-content !important;

        margin: 0 auto 10px !important;

        padding: 7px 14px !important;

        border-radius: 30px !important;

        background: rgba(255,255,255,.78) !important;

        border: 1px solid rgba(49,93,135,.08) !important;

        box-shadow:
            0 5px 18px rgba(30,55,80,.045) !important;

        font-size: 10px !important;

        font-weight: 800 !important;

        letter-spacing: .13em !important;

        color: #496581 !important;

        overflow: hidden !important;

    }


    /* ======================================================
       HILANGKAN GARIS LAMA
    ====================================================== */

    .kontak-information
    .section-kicker::before {

        content: "" !important;

        display: block !important;

        width: 27px !important;

        height: 2px !important;

        margin: 0 !important;

        border-radius: 10px !important;

        background:
            linear-gradient(
                90deg,
                #315d87,
                #7ea1bd
            ) !important;

        animation:
            kontakLineMove 2.4s
            ease-in-out infinite !important;

    }


    /* ======================================================
       GARIS KANAN
    ====================================================== */

    .kontak-information
    .section-kicker::after {

        content: "" !important;

        display: block !important;

        width: 27px !important;

        height: 2px !important;

        margin: 0 !important;

        border-radius: 10px !important;

        background:
            linear-gradient(
                90deg,
                #7ea1bd,
                #315d87
            ) !important;

        animation:
            kontakLineMoveReverse 2.4s
            ease-in-out infinite !important;

    }


    /* ======================================================
       ANIMASI GARIS
    ====================================================== */

    @keyframes kontakLineMove {

        0%,
        100% {

            transform:
                translateX(0);

            opacity: .65;

        }

        50% {

            transform:
                translateX(7px);

            opacity: 1;

        }

    }


    @keyframes kontakLineMoveReverse {

        0%,
        100% {

            transform:
                translateX(0);

            opacity: .65;

        }

        50% {

            transform:
                translateX(-7px);

            opacity: 1;

        }

    }


    /* ======================================================
       JUDUL
    ====================================================== */

    .kontak-information
    .section-header-row h2 {

        margin: 0 !important;

        text-align: center !important;

        font-size:
            clamp(27px, 3vw, 35px) !important;

        line-height: 1.12 !important;

        font-weight: 750 !important;

        letter-spacing: -.04em !important;

        color: #182536 !important;

    }


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

    .kontak-information-grid {

        display: grid !important;

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

        grid-template-rows:
            1fr 1fr !important;

        gap: 14px 22px !important;

        width: 100% !important;

        max-width: 1180px !important;

        margin: 0 auto !important;

        align-items: stretch !important;

    }


    /* ======================================================
       ALAMAT
    ====================================================== */

    .kontak-information-grid
    .kontak-card:nth-child(1) {

        grid-column: 1 !important;

        grid-row: 1 !important;

    }


    /* ======================================================
       EMAIL
    ====================================================== */

    .kontak-information-grid
    .kontak-card:nth-child(2) {

        grid-column: 1 !important;

        grid-row: 2 !important;

    }


    /* ======================================================
       UKURAN CARD
    ====================================================== */

    .kontak-information-grid
    .kontak-card {

        min-height: 170px !important;

        height: 100% !important;

        box-sizing: border-box !important;

    }


    /* ======================================================
       LOKASI
       RESET TOTAL POSITION LAMA
    ====================================================== */

    .kontak-location {

        position: absolute !important;

        top: 0 !important;

        left: 0 !important;

        right: 0 !important;

        width: 100% !important;

        height: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        pointer-events: none !important;

        z-index: 3 !important;

    }


    /* ======================================================
       LOCATION GRID
    ====================================================== */

    .kontak-location-grid {

        position: relative !important;

        width: 100% !important;

        max-width: 1180px !important;

        height: 100% !important;

        margin: 0 auto !important;

    }


    /* ======================================================
       INFO LOKASI
    ====================================================== */

    .kontak-location-info {

        display: none !important;

    }


    /* ======================================================
       MAP
       SEKARANG SEJAJAR DENGAN CARD ATAS
    ====================================================== */

    .kontak-map {

        position: absolute !important;

        top: 176px !important;

        right: 0 !important;

        left: auto !important;

        width:
            calc(50% - 11px) !important;

        height: 354px !important;

        min-height: 354px !important;

        max-width: none !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        border-radius: 10px !important;

        overflow: hidden !important;

    }


    /* ======================================================
       MAP GRID
    ====================================================== */

    .kontak-map-grid {

        position: absolute !important;

        inset: 0 !important;

        background:
            linear-gradient(
                90deg,
                rgba(49,93,135,.065) 1px,
                transparent 1px
            ),
            linear-gradient(
                rgba(49,93,135,.065) 1px,
                transparent 1px
            ) !important;

        background-size:
            38px 38px !important;

        animation:
            kontakMapMove
            20s linear infinite !important;

    }


    @keyframes kontakMapMove {

        0% {

            background-position:
                0 0;

        }

        100% {

            background-position:
                38px 38px;

        }

    }


    /* ======================================================
       MAP CARD TENGAH
    ====================================================== */

    .kontak-map-content {

        position: absolute !important;

        left: 50% !important;

        top: 50% !important;

        transform:
            translate(-50%, -50%) !important;

        width: 285px !important;

        min-height: 170px !important;

        box-sizing: border-box !important;

        padding: 21px !important;

        border-radius: 10px !important;

        z-index: 5 !important;

    }


    /* ======================================================
       MARKER BERNAFAS
    ====================================================== */

    .kontak-map-marker {

        animation:
            kontakMarkerPulse
            2.8s ease-in-out infinite !important;

    }


    @keyframes kontakMarkerPulse {

        0%,
        100% {

            transform: scale(1);

            box-shadow:
                0 0 0 6px
                rgba(49,93,135,.07);

        }

        50% {

            transform: scale(1.05);

            box-shadow:
                0 0 0 11px
                rgba(49,93,135,.13);

        }

    }


    /* ======================================================
       GARIS BAWAH JUDUL
       AKSEN HALUS
    ====================================================== */

    .kontak-information
    .section-header-row h2::after {

        content: "";

        display: block;

        width: 48px;

        height: 3px;

        margin:
            13px auto 0;

        border-radius: 20px;

        background:
            linear-gradient(
                90deg,
                transparent,
                #315d87,
                transparent
            );

        background-size:
            200% 100%;

        animation:
            kontakTitleLine
            3s ease-in-out infinite;

    }


    @keyframes kontakTitleLine {

        0% {

            background-position:
                100% 0;

            opacity: .55;

        }

        50% {

            background-position:
                0% 0;

            opacity: 1;

        }

        100% {

            background-position:
                -100% 0;

            opacity: .55;

        }

    }


}


/* ==========================================================
   DESKTOP LEBAR
========================================================== */

@media (min-width: 1200px) {

    .kontak-map {

        top: 176px !important;

        height: 354px !important;

        min-height: 354px !important;

    }

}


/* ==========================================================
   DESKTOP SEDANG
========================================================== */

@media (min-width: 901px) and (max-width: 1199px) {

    .kontak-information-grid {

        max-width: 94% !important;

    }

    .kontak-location-grid {

        max-width: 94% !important;

    }

    .kontak-map {

        top: 174px !important;

        height: 350px !important;

        min-height: 350px !important;

    }

}
/* ==========================================================
   FINAL POLISH — KONTAK DESKTOP
   PENYESUAIAN POSISI, UKURAN & ALIGNMENT
========================================================== */

@media (min-width: 901px) {

    /* ======================================================
       AREA UTAMA
    ====================================================== */

    .kontak-information {

        padding-top: 62px !important;

        padding-bottom: 72px !important;

    }


    /* ======================================================
       HEADER BENAR-BENAR DI TENGAH HALAMAN
    ====================================================== */

    .kontak-information .section-header-row {

        width: 100% !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        text-align: center !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

        margin-bottom: 31px !important;

    }


    .kontak-information
    .section-header-row > div {

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        text-align: center !important;

    }


    /* ======================================================
       LABEL INFORMASI KONTAK
    ====================================================== */

    .kontak-information
    .section-kicker {

        position: relative !important;

        left: auto !important;

        right: auto !important;

        margin-left: auto !important;

        margin-right: auto !important;

        margin-bottom: 12px !important;

        transform: none !important;

    }


    /* ======================================================
       JUDUL
    ====================================================== */

    .kontak-information
    .section-header-row h2 {

        position: relative !important;

        left: auto !important;

        right: auto !important;

        margin-left: auto !important;

        margin-right: auto !important;

        text-align: center !important;

        transform: none !important;

        font-size: 34px !important;

        line-height: 1.12 !important;

        letter-spacing: -.042em !important;

        white-space: nowrap !important;

    }


    /* ======================================================
       GARIS BAWAH JUDUL
    ====================================================== */

    .kontak-information
    .section-header-row h2::after {

        width: 54px !important;

        height: 3px !important;

        margin-top: 14px !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }


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

    .kontak-information-grid {

        width: 100% !important;

        max-width: 1180px !important;

        margin-left: auto !important;

        margin-right: auto !important;

        display: grid !important;

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

        grid-template-rows:
            1fr 1fr !important;

        gap: 16px 26px !important;

        align-items: stretch !important;

    }


    /* ======================================================
       CARD KIRI
    ====================================================== */

    .kontak-information-grid
    .kontak-card {

        height: 100% !important;

        min-height: 0 !important;

        box-sizing: border-box !important;

    }


    /* ======================================================
       ALAMAT
    ====================================================== */

    .kontak-information-grid
    .kontak-card:nth-child(1) {

        grid-column: 1 !important;

        grid-row: 1 !important;

    }


    /* ======================================================
       EMAIL
    ====================================================== */

    .kontak-information-grid
    .kontak-card:nth-child(2) {

        grid-column: 1 !important;

        grid-row: 2 !important;

    }


    /* ======================================================
       LOKASI / MAP
       SEJAJAR DENGAN BLOK KIRI
    ====================================================== */

    .kontak-map {

        top: 0 !important;

        right: 0 !important;

        width:
            calc(50% - 13px) !important;

        height: 100% !important;

        min-height: 0 !important;

        margin: 0 !important;

        box-sizing: border-box !important;

    }


    /* ======================================================
       MAP CONTENT
    ====================================================== */

    .kontak-map-content {

        width: 300px !important;

        min-height: 174px !important;

        padding: 22px !important;

    }


    /* ======================================================
       MAP MARKER
    ====================================================== */

    .kontak-map-marker {

        width: 42px !important;

        height: 42px !important;

        margin-left: auto !important;

        margin-right: auto !important;

        margin-bottom: 12px !important;

    }


    /* ======================================================
       MAP TITLE
    ====================================================== */

    .kontak-map-content strong {

        text-align: center !important;

        font-size: 14px !important;

        line-height: 1.35 !important;

    }


    .kontak-map-content > span {

        text-align: center !important;

        justify-content: center !important;

        margin-top: 7px !important;

        margin-bottom: 15px !important;

    }


    /* ======================================================
       BUTTON MAP
    ====================================================== */

    .kontak-map-button {

        margin-left: auto !important;

        margin-right: auto !important;

    }

}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (min-width: 1200px) {

    .kontak-information > .container {

        max-width: 1180px !important;

    }

    .kontak-location-grid {

        max-width: 1180px !important;

    }

    .kontak-map {

        height: 100% !important;

    }

}

/* ==========================================================
   PART FINAL — KONTAK DESKTOP & LAPTOP
   ALIGNMENT CARD + MAP
========================================================== */


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 1200px) {

    /* ======================================================
       AREA UTAMA
    ====================================================== */

    .kontak-information > .container {

        max-width: 1180px !important;

        margin-left: auto !important;
        margin-right: auto !important;

    }


    /* ======================================================
       HEADER
    ====================================================== */

    .kontak-information .section-header-row {

        width: 100% !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        text-align: center !important;

        margin-left: auto !important;
        margin-right: auto !important;

        margin-bottom: 30px !important;

    }


    .kontak-information
    .section-header-row > div {

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;

    }


    .kontak-information
    .section-kicker {

        margin-left: auto !important;
        margin-right: auto !important;

        margin-bottom: 11px !important;

    }


    .kontak-information
    .section-header-row h2 {

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;

        white-space: nowrap !important;

    }


    .kontak-information
    .section-header-row h2::after {

        display: block !important;

        margin-left: auto !important;
        margin-right: auto !important;

    }


    /* ======================================================
       GRID KONTAK
    ====================================================== */

    .kontak-information-grid {

        width: 100% !important;

        display: grid !important;

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

        column-gap: 26px !important;

        align-items: start !important;

        margin: 0 !important;

    }


    /* ======================================================
       CARD KIRI
    ====================================================== */

    .kontak-information
    .kontak-card {

        width: 100% !important;

        box-sizing: border-box !important;

    }


    /* ======================================================
       MAP AREA
    ====================================================== */

    .kontak-location {

        position: absolute !important;

        top: 0 !important;

        left: 0 !important;

        width: 100% !important;

        height: 100% !important;

        padding: 0 !important;

        margin: 0 !important;

        pointer-events: none !important;

        z-index: 3 !important;

    }


    .kontak-location-grid {

        position: relative !important;

        width: 1180px !important;

        max-width: 1180px !important;

        height: 424px !important;

        margin: 0 auto !important;

    }


    /* ======================================================
       MAP
       SEJAJAR DENGAN CARD KIRI
    ====================================================== */

    .kontak-map {

        position: absolute !important;

        top: 105px !important;

        right: 0 !important;

        left: auto !important;

        width: calc(50% - 13px) !important;

        height: 424px !important;

        min-height: 424px !important;

        max-height: 424px !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        pointer-events: auto !important;

        z-index: 10 !important;

    }


    /* ======================================================
       MAP CONTENT
    ====================================================== */

    .kontak-map-content {

        position: absolute !important;

        top: 50% !important;

        left: 50% !important;

        transform:
            translate(-50%, -50%) !important;

        width: 300px !important;

        min-height: 174px !important;

        box-sizing: border-box !important;

    }


    /* ======================================================
       MARKER
    ====================================================== */

    .kontak-map-marker {

        width: 42px !important;

        height: 42px !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }


    /* ======================================================
       MAP BACKGROUND
    ====================================================== */

    .kontak-map-grid {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        opacity: .75 !important;

        background:
            linear-gradient(
                90deg,
                rgba(49,93,135,.065) 1px,
                transparent 1px
            ),
            linear-gradient(
                rgba(49,93,135,.065) 1px,
                transparent 1px
            ) !important;

        background-size: 38px 38px !important;

        animation:
            kontakMapMove
            20s linear infinite !important;

    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 901px) and (max-width: 1199px) {

    /* ======================================================
       CONTAINER
    ====================================================== */

    .kontak-information > .container {

        max-width: 94% !important;

        margin-left: auto !important;
        margin-right: auto !important;

    }


    /* ======================================================
       HEADER
    ====================================================== */

    .kontak-information .section-header-row {

        width: 100% !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        text-align: center !important;

        margin-left: auto !important;
        margin-right: auto !important;

        margin-bottom: 28px !important;

    }


    .kontak-information
    .section-header-row > div {

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;

    }


    .kontak-information
    .section-kicker {

        margin-left: auto !important;
        margin-right: auto !important;

        margin-bottom: 10px !important;

    }


    .kontak-information
    .section-header-row h2 {

        font-size: 31px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;

        white-space: nowrap !important;

    }


    .kontak-information
    .section-header-row h2::after {

        display: block !important;

        margin-left: auto !important;
        margin-right: auto !important;

    }


    /* ======================================================
       GRID KONTAK
    ====================================================== */

    .kontak-information-grid {

        width: 100% !important;

        display: grid !important;

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

        column-gap: 22px !important;

        align-items: start !important;

        margin: 0 !important;

    }


    /* ======================================================
       LOCATION
    ====================================================== */

    .kontak-location {

        position: absolute !important;

        top: 0 !important;

        left: 0 !important;

        width: 100% !important;

        height: 100% !important;

        padding: 0 !important;

        margin: 0 !important;

        pointer-events: none !important;

        z-index: 3 !important;

    }


    .kontak-location-grid {

        position: relative !important;

        width: 94% !important;

        max-width: none !important;

        height: 424px !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }


    /* ======================================================
       MAP LAPTOP
    ====================================================== */

    .kontak-map {

        position: absolute !important;

        top: 105px !important;

        right: 0 !important;

        left: auto !important;

        width: calc(50% - 11px) !important;

        height: 424px !important;

        min-height: 424px !important;

        max-height: 424px !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        pointer-events: auto !important;

        z-index: 10 !important;

    }


    /* ======================================================
       MAP CONTENT LAPTOP
    ====================================================== */

    .kontak-map-content {

        position: absolute !important;

        top: 50% !important;

        left: 50% !important;

        transform:
            translate(-50%, -50%) !important;

        width: 275px !important;

        min-height: 174px !important;

        box-sizing: border-box !important;

    }


    /* ======================================================
       MARKER
    ====================================================== */

    .kontak-map-marker {

        width: 42px !important;

        height: 42px !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }


    /* ======================================================
       MAP GRID
    ====================================================== */

    .kontak-map-grid {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        opacity: .75 !important;

        background:
            linear-gradient(
                90deg,
                rgba(49,93,135,.065) 1px,
                transparent 1px
            ),
            linear-gradient(
                rgba(49,93,135,.065) 1px,
                transparent 1px
            ) !important;

        background-size: 38px 38px !important;

        animation:
            kontakMapMove
            20s linear infinite !important;

    }

}


/* ==========================================================
   TABLET & MOBILE
   CSS LAMA TETAP BERJALAN
========================================================== */

@media (max-width: 900px) {

    .kontak-location {

        position: relative !important;

        top: auto !important;

        left: auto !important;

        width: 100% !important;

        height: auto !important;

        padding: 0 !important;

        margin: 0 !important;

    }


    .kontak-location-grid {

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;

    }


    .kontak-map {

        position: relative !important;

        top: auto !important;

        right: auto !important;

        left: auto !important;

        width: 100% !important;

        height: 360px !important;

        min-height: 360px !important;

        max-height: none !important;

    }

}
/* ==========================================================
   PART FINAL — MAP SEJAJAR DENGAN 2 CARD KONTAK
   DESKTOP / LAPTOP
========================================================== */

@media (min-width: 901px) {

    /* ======================================================
       AREA UTAMA KONTAK
       Tinggi mengikuti 2 card kiri
    ====================================================== */

    .kontak-information {
        position: relative !important;
        overflow: visible !important;
    }


    /* ======================================================
       GRID KIRI + MAP
    ====================================================== */

    .kontak-information-grid {
        position: relative !important;

        display: grid !important;

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

        gap: 28px !important;

        align-items: stretch !important;
    }


    /* ======================================================
       CARD KONTAK
       2 CARD = TINGGI TOTAL MAP
    ====================================================== */

    .kontak-card {
        min-height: 0 !important;
        height: auto !important;
        box-sizing: border-box !important;
    }


    /* ======================================================
       KOLOM KONTAK KIRI
    ====================================================== */

    .kontak-information-grid
    > div:first-child {

        display: flex !important;

        flex-direction: column !important;

        gap: 20px !important;
    }


    /* ======================================================
       MAP
       TIDAK BOLEH ABSOLUTE TERHADAP PAGE
    ====================================================== */

    .kontak-map {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        align-self: stretch !important;

        overflow: hidden !important;

        z-index: 2 !important;
    }


    /* ======================================================
       MAP GRID
    ====================================================== */

    .kontak-map-grid {

        position: absolute !important;

        inset: 0 !important;

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

        z-index: 0 !important;
    }


    /* ======================================================
       ISI MAP
    ====================================================== */

    .kontak-map-content {

        position: absolute !important;

        left: 50% !important;
        top: 50% !important;

        transform: translate(-50%, -50%) !important;

        width: min(300px, 80%) !important;

        box-sizing: border-box !important;

        z-index: 5 !important;
    }


    /* ======================================================
       MARKER
    ====================================================== */

    .kontak-map-marker {

        margin-left: auto !important;
        margin-right: auto !important;
    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 901px) and (max-width: 1199px) {

    .kontak-information > .container {

        max-width: 94% !important;

    }


    .kontak-information-grid {

        gap: 22px !important;

    }


    .kontak-information-grid
    > div:first-child {

        gap: 18px !important;

    }


    .kontak-map-content {

        width: 270px !important;

    }

}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (min-width: 1200px) {

    .kontak-information-grid {

        gap: 28px !important;

    }

}


/* ==========================================================
   PENTING
   MATIKAN SEMUA POSISI ABSOLUTE LAMA MAP
========================================================== */

@media (min-width: 901px) {

    .kontak-location {

        position: static !important;

        height: auto !important;

        width: auto !important;

        padding: 0 !important;

        margin: 0 !important;

    }


    .kontak-location-grid {

        position: static !important;

        width: auto !important;

        max-width: none !important;

        height: auto !important;

        margin: 0 !important;

    }

}


/* ==========================================================
   MOBILE
   BIARKAN TAMPILAN MOBILE YANG SUDAH BAGUS
========================================================== */

@media (max-width: 900px) {

    .kontak-map {

        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;

        height: 360px !important;

        min-height: 360px !important;

        max-height: none !important;

    }

}
/* ==========================================================
   PART FINAL — KONTAK MODERN
   ALAMAT + EMAIL SAMPINGAN
   MAP DI BAWAH
========================================================== */


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 901px) {

    /* ======================================================
       SECTION KONTAK
    ====================================================== */

    .kontak-information {

        position: relative !important;

        padding-top: 10px !important;

        padding-bottom: 30px !important;

        overflow: visible !important;

    }


    /* ======================================================
       CONTAINER
    ====================================================== */

    .kontak-information > .container {

        max-width: 1180px !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }


    /* ======================================================
       2 CARD — ALAMAT + EMAIL
    ====================================================== */

    .kontak-information-grid {

        display: grid !important;

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

        gap: 22px !important;

        width: 100% !important;

        margin: 0 !important;

        align-items: stretch !important;

    }


    /* ======================================================
       CARD KONTAK
    ====================================================== */

    .kontak-card {

        position: relative !important;

        display: flex !important;

        align-items: flex-start !important;

        gap: 18px !important;

        width: 100% !important;

        min-height: 168px !important;

        height: 168px !important;

        padding: 27px 28px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        background: rgba(255,255,255,.96) !important;

        border: 1px solid rgba(38,82,120,.13) !important;

        border-radius: 16px !important;

        box-shadow:

            0 8px 25px rgba(15,48,80,.055),

            0 2px 6px rgba(15,48,80,.025) !important;

        transition:

            transform .35s ease,

            box-shadow .35s ease,

            border-color .35s ease !important;

    }


    /* ======================================================
       GARIS ATAS MODERN
    ====================================================== */

    .kontak-card::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        height: 3px;

        background: linear-gradient(
            90deg,
            #174f82,
            #4d82ad,
            rgba(77,130,173,.12)
        );

        border-radius: 16px 16px 0 0;

    }


    /* ======================================================
       HOVER
    ====================================================== */

    .kontak-card:hover {

        transform: translateY(-4px) !important;

        border-color: rgba(38,82,120,.24) !important;

        box-shadow:

            0 16px 34px rgba(15,48,80,.10),

            0 4px 10px rgba(15,48,80,.04) !important;

    }


    /* ======================================================
       ICON
    ====================================================== */

    .kontak-card-icon {

        flex: 0 0 48px !important;

        width: 48px !important;

        height: 48px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        margin: 0 !important;

        border-radius: 13px !important;

        background: linear-gradient(
            145deg,
            #f3f7fb,
            #e9f0f7
        ) !important;

        border: 1px solid rgba(41,89,130,.12) !important;

        color: #245d8e !important;

        box-shadow:

            inset 0 1px 0 rgba(255,255,255,.9) !important;

    }


    .kontak-card-icon i {

        font-size: 20px !important;

    }


    /* ======================================================
       CONTENT
    ====================================================== */

    .kontak-card-content {

        min-width: 0 !important;

        padding: 0 !important;

        margin: 0 !important;

    }


    .kontak-card-content > span {

        display: block !important;

        margin-bottom: 5px !important;

        font-size: 10px !important;

        line-height: 1.3 !important;

        font-weight: 800 !important;

        letter-spacing: 1.25px !important;

        color: #75879a !important;

    }


    .kontak-card-content h3 {

        margin: 0 0 7px !important;

        font-size: 22px !important;

        line-height: 1.15 !important;

        font-weight: 800 !important;

        letter-spacing: -.3px !important;

        color: #172b40 !important;

    }


    .kontak-card-content p {

        margin: 0 !important;

        font-size: 14px !important;

        line-height: 1.55 !important;

        font-weight: 500 !important;

        color: #5e6f81 !important;

    }


    .kontak-card-content small {

        display: block !important;

        margin-top: 7px !important;

        font-size: 12px !important;

        font-weight: 600 !important;

        color: #8796a6 !important;

    }


    /* ======================================================
       LINK EMAIL
    ====================================================== */

    .kontak-card-link {

        display: inline-flex !important;

        align-items: center !important;

        gap: 6px !important;

        margin-top: 8px !important;

        padding: 0 !important;

        font-size: 12px !important;

        line-height: 1.4 !important;

        font-weight: 750 !important;

        color: #245d8e !important;

        text-decoration: none !important;

        transition: color .25s ease !important;

    }


    .kontak-card-link:hover {

        color: #123f68 !important;

    }


    .kontak-card-link i {

        font-size: 11px !important;

        transition: transform .25s ease !important;

    }


    .kontak-card-link:hover i {

        transform: translate(2px,-2px) !important;

    }


    /* ======================================================
       HILANGKAN ELEMEN MAP LAMA DARI FLOW
       LOKASI AKAN DITAMPILKAN DI BAWAH
    ====================================================== */

    .kontak-location {

        position: relative !important;

        width: 100% !important;

        height: auto !important;

        padding: 0 0 50px !important;

        margin: 0 !important;

        overflow: visible !important;

    }


    .kontak-location-grid {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        max-width: 1180px !important;

        height: auto !important;

        margin: 0 auto !important;

    }


    /* ======================================================
       INFORMASI LOKASI KIRI
       DISEMBUNYIKAN AGAR TIDAK DUPLIKAT
    ====================================================== */

    .kontak-location-info {

        display: none !important;

    }


    /* ======================================================
       MAP
       SEKARANG DI BAWAH CARD
    ====================================================== */

    .kontak-map {

        position: relative !important;

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        top: auto !important;

        right: auto !important;

        bottom: auto !important;

        left: auto !important;

        width: 100% !important;

        height: 300px !important;

        min-height: 300px !important;

        max-height: 300px !important;

        margin: 22px 0 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border-radius: 18px !important;

        border: 1px solid rgba(42,91,130,.16) !important;

        box-shadow:

            0 12px 32px rgba(15,48,80,.07) !important;

        z-index: 1 !important;

    }


    /* ======================================================
       MAP GRID
    ====================================================== */

    .kontak-map-grid {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        opacity: .72 !important;

        background:

            linear-gradient(
                90deg,
                rgba(49,93,135,.065) 1px,
                transparent 1px
            ),

            linear-gradient(
                rgba(49,93,135,.065) 1px,
                transparent 1px
            ) !important;

        background-size: 38px 38px !important;

        animation:
            kontakMapMove
            20s linear infinite !important;

    }


    /* ======================================================
       MAP CONTENT
    ====================================================== */

    .kontak-map-content {

        position: absolute !important;

        left: 50% !important;

        top: 50% !important;

        transform: translate(-50%,-50%) !important;

        width: 320px !important;

        min-height: 170px !important;

        padding: 25px 25px !important;

        box-sizing: border-box !important;

        border-radius: 16px !important;

        background: rgba(255,255,255,.96) !important;

        border: 1px solid rgba(42,91,130,.13) !important;

        box-shadow:

            0 15px 35px rgba(15,48,80,.10) !important;

        text-align: center !important;

        z-index: 5 !important;

    }


    /* ======================================================
       MAP MARKER
    ====================================================== */

    .kontak-map-marker {

        width: 46px !important;

        height: 46px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        margin: 0 auto 10px !important;

        border-radius: 50% !important;

        background: #2f6797 !important;

        color: #fff !important;

        box-shadow:

            0 0 0 8px rgba(47,103,151,.10) !important;

    }


    .kontak-map-marker i {

        font-size: 20px !important;

    }


    .kontak-map-content strong {

        display: block !important;

        margin-bottom: 5px !important;

        font-size: 16px !important;

        font-weight: 800 !important;

        color: #172b40 !important;

    }


    .kontak-map-content span {

        display: block !important;

        margin-bottom: 15px !important;

        font-size: 12px !important;

        font-weight: 600 !important;

        color: #7a8998 !important;

    }


    /* ======================================================
       BUTTON MAPS
    ====================================================== */

    .kontak-map-button {

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 7px !important;

        min-height: 38px !important;

        padding: 0 18px !important;

        border-radius: 8px !important;

        background: #245d8e !important;

        color: #fff !important;

        font-size: 12px !important;

        font-weight: 750 !important;

        text-decoration: none !important;

        transition:

            transform .25s ease,

            background .25s ease,

            box-shadow .25s ease !important;

    }


    .kontak-map-button:hover {

        background: #174a76 !important;

        transform: translateY(-2px) !important;

        box-shadow:

            0 7px 16px rgba(36,93,142,.20) !important;

    }

}


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

@media (min-width: 601px) and (max-width: 900px) {

    .kontak-information-grid {

        grid-template-columns: 1fr 1fr !important;

        gap: 16px !important;

    }


    .kontak-card {

        min-height: 155px !important;

        height: auto !important;

        padding: 22px !important;

    }


    .kontak-card-content h3 {

        font-size: 19px !important;

    }


    .kontak-card-content p {

        font-size: 13px !important;

    }


    .kontak-map {

        height: 280px !important;

        min-height: 280px !important;

        max-height: 280px !important;

    }

}


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

@media (max-width: 600px) {

    .kontak-information-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 14px !important;

    }


    .kontak-card {

        min-height: 145px !important;

        height: auto !important;

        padding: 21px !important;

        border-radius: 14px !important;

    }


    .kontak-card-content h3 {

        font-size: 19px !important;

    }


    .kontak-card-content p {

        font-size: 13px !important;

    }


    .kontak-location {

        padding-bottom: 30px !important;

    }


    .kontak-map {

        height: 270px !important;

        min-height: 270px !important;

        max-height: 270px !important;

        margin-top: 16px !important;

        border-radius: 15px !important;

    }


    .kontak-map-content {

        width: 285px !important;

        max-width: 84% !important;

        padding: 22px 18px !important;

    }

}
/* ==========================================================
   PART — CARD KONTAK HORIZONTAL MODERN
   ALAMAT + EMAIL SEJAJAR
========================================================== */

@media (min-width: 901px) {

    /* ======================================================
       GRID CARD
    ====================================================== */

    .kontak-information-grid {

        display: grid !important;

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

        gap: 20px !important;

        width: 100% !important;

        margin: 0 auto !important;

        align-items: stretch !important;

    }


    /* ======================================================
       CARD
    ====================================================== */

    .kontak-card {

        position: relative !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        width: 100% !important;

        height: 158px !important;

        min-height: 158px !important;

        margin: 0 !important;

        padding: 25px 28px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border-radius: 18px !important;

        border: 1px solid rgba(35,82,120,.12) !important;

        background:

            linear-gradient(
                135deg,
                rgba(255,255,255,.98),
                rgba(246,250,253,.94)
            ) !important;

        box-shadow:

            0 10px 30px rgba(24,57,88,.065),

            inset 0 1px 0 rgba(255,255,255,.9) !important;

        transition:

            transform .35s ease,

            box-shadow .35s ease,

            border-color .35s ease !important;

    }


    /* ======================================================
       GARIS ATAS
    ====================================================== */

    .kontak-card::before {

        content: "";

        position: absolute;

        top: 0;

        left: 24px;

        right: 24px;

        height: 3px;

        border-radius: 0 0 8px 8px;

        background:

            linear-gradient(
                90deg,
                #164f82,
                #5e91b8,
                rgba(94,145,184,.08)
            );

    }


    /* ======================================================
       EFEK BACKGROUND
    ====================================================== */

    .kontak-card::after {

        content: "";

        position: absolute;

        width: 120px;

        height: 120px;

        right: -48px;

        bottom: -65px;

        border-radius: 50%;

        background:

            radial-gradient(
                circle,
                rgba(42,96,143,.07),
                rgba(42,96,143,0)
            );

        pointer-events: none;

    }


    /* ======================================================
       HOVER
    ====================================================== */

    .kontak-card:hover {

        transform: translateY(-4px) !important;

        border-color: rgba(35,82,120,.22) !important;

        box-shadow:

            0 17px 38px rgba(24,57,88,.11),

            inset 0 1px 0 rgba(255,255,255,.95) !important;

    }


    /* ======================================================
       ICON
    ====================================================== */

    .kontak-card-icon {

        position: relative !important;

        z-index: 2 !important;

        flex: 0 0 52px !important;

        width: 52px !important;

        height: 52px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        margin: 0 18px 0 0 !important;

        border-radius: 14px !important;

        border: 1px solid rgba(38,89,132,.13) !important;

        background:

            linear-gradient(
                145deg,
                #f7fafc,
                #e8f0f6
            ) !important;

        color: #245d8e !important;

        box-shadow:

            0 5px 14px rgba(30,72,108,.07),

            inset 0 1px 0 rgba(255,255,255,.95) !important;

    }


    .kontak-card-icon i {

        font-size: 21px !important;

    }


    /* ======================================================
       CONTENT
    ====================================================== */

    .kontak-card-content {

        position: relative !important;

        z-index: 2 !important;

        min-width: 0 !important;

        flex: 1 !important;

        padding: 0 !important;

        margin: 0 !important;

    }


    /* ======================================================
       LABEL
    ====================================================== */

    .kontak-card-content > span {

        display: block !important;

        margin: 0 0 5px !important;

        font-size: 10px !important;

        line-height: 1.2 !important;

        font-weight: 800 !important;

        letter-spacing: 1.25px !important;

        color: #788999 !important;

    }


    /* ======================================================
       JUDUL
    ====================================================== */

    .kontak-card-content h3 {

        margin: 0 0 6px !important;

        font-size: 21px !important;

        line-height: 1.15 !important;

        font-weight: 800 !important;

        letter-spacing: -.35px !important;

        color: #172c42 !important;

    }


    /* ======================================================
       NARASI / ALAMAT / EMAIL
    ====================================================== */

    .kontak-card-content p {

        margin: 0 !important;

        font-size: 13.5px !important;

        line-height: 1.5 !important;

        font-weight: 500 !important;

        color: #607184 !important;

        word-break: break-word !important;

    }


    /* ======================================================
       KODE POS
    ====================================================== */

    .kontak-card-content small {

        display: block !important;

        margin-top: 6px !important;

        font-size: 11.5px !important;

        line-height: 1.3 !important;

        font-weight: 650 !important;

        color: #8796a5 !important;

    }


    /* ======================================================
       LINK EMAIL
    ====================================================== */

    .kontak-card-link {

        display: inline-flex !important;

        align-items: center !important;

        gap: 5px !important;

        margin-top: 6px !important;

        font-size: 11.5px !important;

        line-height: 1.3 !important;

        font-weight: 800 !important;

        color: #245d8e !important;

        text-decoration: none !important;

    }


    .kontak-card-link:hover {

        color: #123f67 !important;

    }


    .kontak-card-link i {

        font-size: 10px !important;

        transition: transform .25s ease !important;

    }


    .kontak-card-link:hover i {

        transform: translate(2px,-2px) !important;

    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 901px) and (max-width: 1199px) {

    .kontak-information-grid {

        gap: 16px !important;

    }


    .kontak-card {

        height: 150px !important;

        min-height: 150px !important;

        padding: 22px !important;

    }


    .kontak-card-icon {

        flex-basis: 46px !important;

        width: 46px !important;

        height: 46px !important;

        margin-right: 14px !important;

    }


    .kontak-card-content h3 {

        font-size: 19px !important;

    }


    .kontak-card-content p {

        font-size: 12.5px !important;

    }

}


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

@media (min-width: 601px) and (max-width: 900px) {

    .kontak-information-grid {

        display: grid !important;

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

        gap: 14px !important;

    }


    .kontak-card {

        height: 145px !important;

        min-height: 145px !important;

        padding: 19px !important;

    }


    .kontak-card-icon {

        flex-basis: 43px !important;

        width: 43px !important;

        height: 43px !important;

        margin-right: 12px !important;

    }


    .kontak-card-content h3 {

        font-size: 18px !important;

    }


    .kontak-card-content p {

        font-size: 12px !important;

    }

}


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

@media (max-width: 600px) {

    .kontak-information-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 14px !important;

    }


    .kontak-card {

        width: 100% !important;

        height: auto !important;

        min-height: 138px !important;

        padding: 20px !important;

    }


    .kontak-card-icon {

        flex: 0 0 44px !important;

        width: 44px !important;

        height: 44px !important;

        margin-right: 13px !important;

    }


    .kontak-card-content h3 {

        font-size: 18px !important;

    }


    .kontak-card-content p {

        font-size: 12.5px !important;

    }

}
/* ==========================================================
   KONTAK — FINAL MODERN GOVERNMENT STYLE
   CARD SAMPING + MAP DI BAWAH
   TAMBAHKAN PALING BAWAH CSS LAMA
========================================================== */


/* ==========================================================
   01. KONTAK INFORMATION
========================================================== */

.kontak-information {

    position: relative !important;

    padding: 55px 0 45px !important;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(31, 91, 145, .055),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f7fafc 0%,
            #ffffff 100%
        ) !important;

    overflow: hidden !important;

}


/* dekorasi background */

.kontak-information::before {

    content: "";

    position: absolute;

    width: 360px;

    height: 360px;

    right: -180px;

    top: -180px;

    border-radius: 50%;

    background: rgba(30, 87, 140, .035);

    pointer-events: none;

}


/* ==========================================================
   02. CONTAINER
========================================================== */

.kontak-information > .container {

    width: 100% !important;

    max-width: 1180px !important;

    margin-left: auto !important;

    margin-right: auto !important;

    padding-left: 20px !important;

    padding-right: 20px !important;

    box-sizing: border-box !important;

}


/* ==========================================================
   03. HEADER — TENGAH
========================================================== */

.kontak-information
.section-header-row {

    width: 100% !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    text-align: center !important;

    margin: 0 auto 30px !important;

}


.kontak-information
.section-header-row > div {

    width: 100% !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;

}


/* ==========================================================
   04. KICKER
========================================================== */

.kontak-information
.section-kicker {

    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 10px !important;

    width: max-content !important;

    margin: 0 auto 12px !important;

    padding: 9px 18px !important;

    border: 1px solid rgba(31, 91, 145, .10) !important;

    border-radius: 999px !important;

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

    box-shadow:
        0 8px 22px rgba(15, 45, 75, .055) !important;

    color: #315d87 !important;

    font-size: 12px !important;

    font-weight: 800 !important;

    letter-spacing: 1.1px !important;

}


/* garis kiri kanan */

.kontak-information
.section-kicker::before,
.kontak-information
.section-kicker::after {

    content: "";

    display: block;

    width: 30px;

    height: 2px;

    border-radius: 99px;

    background: linear-gradient(
        90deg,
        #315d87,
        #8fb2cf
    );

}


/* ==========================================================
   05. JUDUL
========================================================== */

.kontak-information
.section-header-row h2 {

    position: relative !important;

    margin: 0 !important;

    padding-bottom: 17px !important;

    color: #17283d !important;

    font-size: clamp(
        30px,
        3vw,
        42px
    ) !important;

    line-height: 1.15 !important;

    font-weight: 800 !important;

    letter-spacing: -1.4px !important;

    text-align: center !important;

}


/* garis bawah judul */

.kontak-information
.section-header-row h2::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 58px;

    height: 3px;

    border-radius: 99px;

    background: linear-gradient(
        90deg,
        #315d87,
        #8bb1cf
    );

}


/* ==========================================================
   06. CARD GRID — WAJIB SAMPING
========================================================== */

.kontak-information-grid {

    width: 100% !important;

    display: grid !important;

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

    gap: 20px !important;

    align-items: stretch !important;

    margin: 0 !important;

}


/* ==========================================================
   07. CARD KONTAK
========================================================== */

.kontak-information-grid
.kontak-card {

    position: relative !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 185px !important;

    margin: 0 !important;

    padding: 27px 28px !important;

    display: flex !important;

    align-items: flex-start !important;

    gap: 19px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    border: 1px solid #dce5ec !important;

    border-top: 3px solid #4779a4 !important;

    border-radius: 14px !important;

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

    box-shadow:
        0 10px 30px rgba(18, 48, 75, .055) !important;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease !important;

}


/* lingkaran dekorasi */

.kontak-information-grid
.kontak-card::after {

    content: "";

    position: absolute;

    width: 105px;

    height: 105px;

    right: -48px;

    bottom: -50px;

    border-radius: 50%;

    background: rgba(49,93,135,.045);

    pointer-events: none;

}


/* hover */

.kontak-information-grid
.kontak-card:hover {

    transform: translateY(-4px) !important;

    border-color: #c7d8e6 !important;

    box-shadow:
        0 16px 36px rgba(18, 48, 75, .10) !important;

}


/* ==========================================================
   08. ICON
========================================================== */

.kontak-information-grid
.kontak-card-icon {

    position: relative !important;

    z-index: 2 !important;

    flex: 0 0 48px !important;

    width: 48px !important;

    height: 48px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border: 1px solid #d9e4ed !important;

    border-radius: 11px !important;

    background: #f4f8fb !important;

    color: #315f89 !important;

    font-size: 21px !important;

}


/* ==========================================================
   09. CONTENT
========================================================== */

.kontak-information-grid
.kontak-card-content {

    position: relative !important;

    z-index: 2 !important;

    min-width: 0 !important;

    flex: 1 !important;

}


.kontak-information-grid
.kontak-card-content > span {

    display: block !important;

    margin-bottom: 6px !important;

    color: #7a8a9b !important;

    font-size: 11px !important;

    line-height: 1.3 !important;

    font-weight: 800 !important;

    letter-spacing: 1.15px !important;

}


.kontak-information-grid
.kontak-card-content h3 {

    margin: 0 0 7px !important;

    color: #182b40 !important;

    font-size: 24px !important;

    line-height: 1.2 !important;

    font-weight: 800 !important;

}


.kontak-information-grid
.kontak-card-content p {

    margin: 0 0 8px !important;

    color: #5f7082 !important;

    font-size: 15px !important;

    line-height: 1.6 !important;

}


.kontak-information-grid
.kontak-card-content small {

    display: block !important;

    margin-top: 5px !important;

    color: #7c8c9d !important;

    font-size: 12px !important;

    font-weight: 600 !important;

}


/* ==========================================================
   10. EMAIL LINK
========================================================== */

.kontak-information-grid
.kontak-card-link {

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    margin-top: 4px !important;

    color: #315f89 !important;

    font-size: 13px !important;

    font-weight: 800 !important;

    text-decoration: none !important;

    transition: gap .25s ease, color .25s ease !important;

}


.kontak-information-grid
.kontak-card-link:hover {

    gap: 10px !important;

    color: #173f67 !important;

}


/* ==========================================================
   11. LOKASI — MAP DI BAWAH CARD
========================================================== */

.kontak-location {

    position: relative !important;

    width: 100% !important;

    padding: 0 0 65px !important;

    margin: 0 !important;

    background: #ffffff !important;

}


/* ==========================================================
   12. LOCATION GRID
========================================================== */

.kontak-location-grid {

    width: 100% !important;

    max-width: 1180px !important;

    margin: 0 auto !important;

    padding: 0 20px !important;

    box-sizing: border-box !important;

    display: block !important;

}


/* ==========================================================
   13. SEMBUNYIKAN BLOK LOKASI LAMA
       karena informasi sudah ada di card atas
========================================================== */

.kontak-location-info {

    display: none !important;

}


/* ==========================================================
   14. MAP FULL WIDTH
========================================================== */

.kontak-map {

    position: relative !important;

    top: auto !important;

    right: auto !important;

    left: auto !important;

    bottom: auto !important;

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    width: 100% !important;

    height: 330px !important;

    min-height: 330px !important;

    max-height: none !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    border: 1px solid #d4e0e8 !important;

    border-radius: 16px !important;

    background:
        linear-gradient(
            135deg,
            #eef4f8,
            #f8fbfd
        ) !important;

    box-shadow:
        0 16px 38px rgba(18, 48, 75, .075) !important;

    z-index: 1 !important;

}


/* ==========================================================
   15. MAP GRID MODERN
========================================================== */

.kontak-map-grid {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;

    height: 100% !important;

    opacity: .85 !important;

    background:
        linear-gradient(
            90deg,
            rgba(49,93,135,.075) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(49,93,135,.075) 1px,
            transparent 1px
        ) !important;

    background-size: 42px 42px !important;

    animation:
        kontakMapMove
        22s linear infinite !important;

}


/* ==========================================================
   16. MAP CONTENT
========================================================== */

.kontak-map-content {

    position: absolute !important;

    left: 50% !important;

    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: min(360px, 82%) !important;

    min-height: 175px !important;

    padding: 24px 26px !important;

    box-sizing: border-box !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    border: 1px solid rgba(213,225,235,.95) !important;

    border-radius: 15px !important;

    background: rgba(255,255,255,.96) !important;

    box-shadow:
        0 18px 45px rgba(18,48,75,.12) !important;

    backdrop-filter: blur(8px) !important;

    -webkit-backdrop-filter: blur(8px) !important;

}


/* ==========================================================
   17. MAP MARKER
========================================================== */

.kontak-map-marker {

    width: 48px !important;

    height: 48px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    margin: 0 auto 12px !important;

    border-radius: 50% !important;

    background: #315f89 !important;

    color: #ffffff !important;

    font-size: 21px !important;

    box-shadow:
        0 0 0 8px rgba(49,95,137,.09) !important;

    animation:
        kontakMarkerPulse
        2.8s ease-in-out infinite !important;

}


/* ==========================================================
   18. MAP TEXT
========================================================== */

.kontak-map-content strong {

    display: block !important;

    margin-bottom: 5px !important;

    color: #182b40 !important;

    font-size: 17px !important;

    font-weight: 800 !important;

}


.kontak-map-content span {

    display: block !important;

    margin-bottom: 16px !important;

    color: #78899a !important;

    font-size: 13px !important;

}


/* ==========================================================
   19. GOOGLE MAP BUTTON
========================================================== */

.kontak-map-button {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    min-width: 170px !important;

    padding: 11px 17px !important;

    border-radius: 8px !important;

    background: #315f89 !important;

    color: #ffffff !important;

    font-size: 12px !important;

    font-weight: 800 !important;

    text-decoration: none !important;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease !important;

}


.kontak-map-button:hover {

    transform: translateY(-2px) !important;

    background: #244e75 !important;

    color: #ffffff !important;

    box-shadow:
        0 8px 20px rgba(49,95,137,.22) !important;

}


/* ==========================================================
   20. ANIMASI MAP
========================================================== */

@keyframes kontakMapMove {

    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            42px 0,
            0 42px;
    }

}


/* ==========================================================
   21. ANIMASI MARKER
========================================================== */

@keyframes kontakMarkerPulse {

    0%,
    100% {

        transform: scale(1);

        box-shadow:
            0 0 0 8px rgba(49,95,137,.09);

    }

    50% {

        transform: scale(1.06);

        box-shadow:
            0 0 0 12px rgba(49,95,137,.045);

    }

}


/* ==========================================================
   22. LAPTOP
========================================================== */

@media (min-width: 901px) and (max-width: 1199px) {

    .kontak-information > .container,
    .kontak-location-grid {

        max-width: 94% !important;

    }

    .kontak-information-grid {

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

        gap: 18px !important;

    }

    .kontak-information-grid
    .kontak-card {

        padding: 24px !important;

        min-height: 180px !important;

    }

    .kontak-map {

        height: 310px !important;

        min-height: 310px !important;

    }

}


/* ==========================================================
   23. TABLET
========================================================== */

@media (min-width: 601px) and (max-width: 900px) {

    .kontak-information {

        padding-top: 45px !important;

    }

    .kontak-information-grid {

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

        gap: 15px !important;

    }

    .kontak-information-grid
    .kontak-card {

        padding: 21px !important;

        gap: 13px !important;

    }

    .kontak-information-grid
    .kontak-card-icon {

        flex-basis: 43px !important;

        width: 43px !important;

        height: 43px !important;

    }

    .kontak-information-grid
    .kontak-card-content h3 {

        font-size: 20px !important;

    }

    .kontak-information-grid
    .kontak-card-content p {

        font-size: 13px !important;

    }

    .kontak-map {

        height: 300px !important;

        min-height: 300px !important;

    }

}


/* ==========================================================
   24. MOBILE
========================================================== */

@media (max-width: 600px) {

    .kontak-information {

        padding:
            38px 0 35px !important;

    }

    .kontak-information > .container,
    .kontak-location-grid {

        width: 100% !important;

        max-width: 100% !important;

        padding-left: 15px !important;

        padding-right: 15px !important;

    }

    .kontak-information
    .section-header-row {

        margin-bottom: 24px !important;

    }

    .kontak-information
    .section-header-row h2 {

        font-size: 27px !important;

        letter-spacing: -.8px !important;

    }

    /* mobile kembali vertikal */

    .kontak-information-grid {

        grid-template-columns: 1fr !important;

        gap: 13px !important;

    }

    .kontak-information-grid
    .kontak-card {

        min-height: 155px !important;

        padding: 21px !important;

        border-radius: 13px !important;

    }

    .kontak-information-grid
    .kontak-card-content h3 {

        font-size: 21px !important;

    }

    .kontak-information-grid
    .kontak-card-content p {

        font-size: 13.5px !important;

        line-height: 1.55 !important;

    }

    .kontak-location {

        padding-bottom: 40px !important;

    }

    .kontak-map {

        height: 285px !important;

        min-height: 285px !important;

        border-radius: 14px !important;

    }

    .kontak-map-content {

        width: 82% !important;

        min-height: 165px !important;

        padding: 21px !important;

    }

    .kontak-map-content strong {

        font-size: 15px !important;

    }

}
/* ==========================================================
   FINAL FIX — CARD KONTAK WAJIB BERDAMPINGAN
   ALAMAT | EMAIL
========================================================== */

@media (min-width: 701px) {

    /* ======================================================
       GRID UTAMA
    ====================================================== */

    .kontak-information
    .kontak-information-grid {

        display: grid !important;

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

        grid-template-rows: 1fr !important;

        width: 100% !important;

        max-width: 100% !important;

        gap: 20px !important;

        margin: 0 !important;

        padding: 0 !important;

        align-items: stretch !important;

        justify-content: stretch !important;

        box-sizing: border-box !important;

    }


    /* ======================================================
       CARD 1 + CARD 2
       WAJIB SATU BARIS
    ====================================================== */

    .kontak-information
    .kontak-information-grid
    > .kontak-card {

        display: flex !important;

        position: relative !important;

        width: 100% !important;

        max-width: none !important;

        min-width: 0 !important;

        min-height: 180px !important;

        height: 180px !important;

        margin: 0 !important;

        padding: 25px 27px !important;

        box-sizing: border-box !important;

        grid-column: auto !important;

        grid-row: 1 !important;

        float: none !important;

        clear: none !important;

    }


    /* ======================================================
       CARD ALAMAT
    ====================================================== */

    .kontak-information
    .kontak-information-grid
    > .kontak-card:first-child {

        grid-column: 1 !important;

    }


    /* ======================================================
       CARD EMAIL
    ====================================================== */

    .kontak-information
    .kontak-information-grid
    > .kontak-card:nth-child(2) {

        grid-column: 2 !important;

    }


    /* ======================================================
       ISI CARD
    ====================================================== */

    .kontak-information
    .kontak-information-grid
    > .kontak-card
    .kontak-card-content {

        flex: 1 1 auto !important;

        min-width: 0 !important;

        width: auto !important;

    }


    /* ======================================================
       ICON
    ====================================================== */

    .kontak-information
    .kontak-information-grid
    > .kontak-card
    .kontak-card-icon {

        flex: 0 0 48px !important;

        width: 48px !important;

        min-width: 48px !important;

        height: 48px !important;

    }


    /* ======================================================
       TEKS ALAMAT / EMAIL
    ====================================================== */

    .kontak-information
    .kontak-information-grid
    > .kontak-card
    .kontak-card-content p {

        max-width: 100% !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;

    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 901px) and (max-width: 1199px) {

    .kontak-information
    .kontak-information-grid {

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

        gap: 16px !important;

    }

    .kontak-information
    .kontak-information-grid
    > .kontak-card {

        height: 175px !important;

        min-height: 175px !important;

        padding: 23px !important;

    }

}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (min-width: 1200px) {

    .kontak-information
    .kontak-information-grid {

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

        gap: 22px !important;

    }

    .kontak-information
    .kontak-information-grid
    > .kontak-card {

        height: 180px !important;

        min-height: 180px !important;

    }

}


/* ==========================================================
   MOBILE
   KEMBALI KE BAWAH
========================================================== */

@media (max-width: 700px) {

    .kontak-information
    .kontak-information-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        grid-template-rows: auto !important;

        gap: 14px !important;

    }


    .kontak-information
    .kontak-information-grid
    > .kontak-card {

        grid-column: 1 !important;

        grid-row: auto !important;

        width: 100% !important;

        height: auto !important;

        min-height: 155px !important;

    }

}
/* ==========================================================
   FINAL — ICON DI SAMPING ISI CARD
========================================================== */

@media (min-width: 701px) {

    .kontak-information
    .kontak-information-grid
    > .kontak-card {

        display: flex !important;

        flex-direction: row !important;

        align-items: flex-start !important;

        justify-content: flex-start !important;

        gap: 18px !important;

    }


    /* ======================================================
       ICON DI KIRI
    ====================================================== */

    .kontak-information
    .kontak-card
    .kontak-card-icon {

        flex: 0 0 48px !important;

        width: 48px !important;

        height: 48px !important;

        margin: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

    }


    /* ======================================================
       ISI DI SEBELAH KANAN ICON
    ====================================================== */

    .kontak-information
    .kontak-card
    .kontak-card-content {

        flex: 1 1 auto !important;

        width: auto !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        text-align: left !important;

    }


    /* ======================================================
       LABEL
    ====================================================== */

    .kontak-information
    .kontak-card
    .kontak-card-content > span {

        display: block !important;

        margin: 0 0 5px !important;

        text-align: left !important;

    }


    /* ======================================================
       JUDUL
    ====================================================== */

    .kontak-information
    .kontak-card
    .kontak-card-content h3 {

        margin: 0 0 7px !important;

        text-align: left !important;

    }


    /* ======================================================
       ALAMAT / EMAIL
    ====================================================== */

    .kontak-information
    .kontak-card
    .kontak-card-content p {

        margin: 0 !important;

        text-align: left !important;

    }


    /* ======================================================
       KODE POS
    ====================================================== */

    .kontak-information
    .kontak-card
    .kontak-card-content small {

        text-align: left !important;

    }


    /* ======================================================
       LINK
    ====================================================== */

    .kontak-information
    .kontak-card
    .kontak-card-link {

        justify-content: flex-start !important;

        text-align: left !important;

    }

}


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

@media (max-width: 700px) {

    .kontak-information
    .kontak-card {

        display: flex !important;

        flex-direction: row !important;

        align-items: flex-start !important;

        gap: 14px !important;

    }


    .kontak-information
    .kontak-card
    .kontak-card-icon {

        flex: 0 0 44px !important;

        width: 44px !important;

        height: 44px !important;

        margin: 0 !important;

    }


    .kontak-information
    .kontak-card
    .kontak-card-content {

        flex: 1 !important;

        min-width: 0 !important;

        text-align: left !important;

    }

}
/* ==========================================================
   GURU & TENAGA KEPENDIDIKAN
   FINAL MODERN GOVERNMENT STYLE
   SMP NEGERI 2 MOYUDAN
   OVERRIDE CSS — LETAKKAN PALING BAWAH
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.guru-page {

    --guru-primary: #155e75;
    --guru-primary-dark: #0f4c5c;
    --guru-secondary: #0f766e;
    --guru-accent: #d6a84f;

    --guru-text: #173042;
    --guru-muted: #64748b;
    --guru-border: rgba(15, 76, 92, .12);

    --guru-bg: #f6f8fa;
    --guru-white: #ffffff;

    position: relative;
    overflow: hidden;
    background: var(--guru-bg);

}


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

.guru-page .page-hero {

    position: relative;

    min-height: 330px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0f4c5c 0%,
            #155e75 52%,
            #0f766e 100%
        );

}


.guru-page .page-hero::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -180px;
    top: -220px;

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

    border-radius: 50%;

    box-shadow:
        0 0 0 50px rgba(255,255,255,.025),
        0 0 0 100px rgba(255,255,255,.018);

}


.guru-page .page-hero::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--guru-accent),
            transparent
        );

    background-size: 200% 100%;

    animation: guruLineMove 5s linear infinite;

}


@keyframes guruLineMove {

    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }

}


.guru-page .page-hero-content {

    position: relative;

    z-index: 2;

    max-width: 760px;

}


.guru-page .page-kicker {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

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

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


.guru-page .page-kicker::before {

    content: "";

    width: 28px;
    height: 2px;

    background: var(--guru-accent);

}


.guru-page .page-hero h1 {

    margin: 0;

    color: #fff;

    font-size: clamp(36px, 4vw, 56px);

    line-height: 1.05;

    font-weight: 750;

    letter-spacing: -1.5px;

}


.guru-page .page-hero h1 span {

    display: inline;

    color: #d8f3f0;

}


.guru-page .page-hero p {

    max-width: 680px;

    margin: 20px 0 0;

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

    font-size: 15px;

    line-height: 1.8;

}


/* ==========================================================
   BREADCRUMB
========================================================== */

.guru-page .breadcrumb-section {

    background: #fff;

    border-bottom: 1px solid var(--guru-border);

}


.guru-page .breadcrumb {

    min-height: 52px;

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 12px;

}


.guru-page .breadcrumb a {

    color: var(--guru-primary);

    text-decoration: none;

    font-weight: 600;

}


.guru-page .breadcrumb span {

    color: var(--guru-muted);

}


.guru-page .breadcrumb i {

    color: #a5b4c0;

    font-size: 10px;

}


/* ==========================================================
   INTRO
========================================================== */

.guru-page .guru-intro {

    padding: 80px 0 55px;

    background: #fff;

}


.guru-page .guru-intro-grid {

    display: grid;

    grid-template-columns: 180px minmax(0, 1fr);

    gap: 60px;

    align-items: start;

}


.guru-page .guru-intro-label {

    position: relative;

    padding-left: 20px;

    border-left: 2px solid var(--guru-primary);

}


.guru-page .guru-intro-number {

    margin-top: 24px;

    color: var(--guru-primary);

    font-size: 48px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -2px;

}


.guru-page .guru-intro-small {

    display: block;

    margin-top: 8px;

    color: var(--guru-muted);

    font-size: 11px;

    line-height: 1.5;

}


.guru-page .guru-intro-content h2 {

    max-width: 850px;

    margin: 0 0 22px;

    color: var(--guru-text);

    font-size: clamp(30px, 3vw, 43px);

    line-height: 1.15;

    letter-spacing: -1px;

}


.guru-page .guru-intro-content h2 span {

    color: var(--guru-primary);

}


.guru-page .guru-intro-content p {

    max-width: 850px;

    margin: 0 0 12px;

    color: var(--guru-muted);

    font-size: 15px;

    line-height: 1.8;

}


/* ==========================================================
   STATISTIK
========================================================== */

.guru-page .guru-stats {

    padding: 15px 0 75px;

    background: #fff;

}


.guru-page .guru-stats-grid {

    display: grid;

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

    gap: 15px;

}


.guru-page .guru-stat-card {

    position: relative;

    min-height: 100px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 20px;

    background: #fff;

    border: 1px solid var(--guru-border);

    border-radius: 14px;

    box-shadow:
        0 5px 20px rgba(15, 76, 92, .045);

    overflow: hidden;

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

}


.guru-page .guru-stat-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: var(--guru-primary);

    transform: scaleY(.3);

    transform-origin: center;

    transition: transform .3s ease;

}


.guru-page .guru-stat-card:hover {

    transform: translateY(-4px);

    border-color: rgba(21,94,117,.25);

    box-shadow:
        0 14px 35px rgba(15, 76, 92, .10);

}


.guru-page .guru-stat-card:hover::before {

    transform: scaleY(1);

}


.guru-page .guru-stat-icon {

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: grid;

    place-items: center;

    color: var(--guru-primary);

    background: rgba(21,94,117,.07);

    border-radius: 12px;

    font-size: 20px;

}


.guru-page .guru-stat-card strong {

    display: block;

    color: var(--guru-text);

    font-size: 15px;

    font-weight: 750;

}


.guru-page .guru-stat-card span {

    display: block;

    margin-top: 4px;

    color: var(--guru-muted);

    font-size: 11px;

}


/* ==========================================================
   SECTION HEADER
========================================================== */

.guru-page .section-header-row {

    margin-bottom: 34px;

}


.guru-page .section-kicker {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--guru-primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.guru-page .section-kicker::after {

    content: "";

    width: 25px;
    height: 1px;

    background: var(--guru-accent);

}


.guru-page .section-header-row h2 {

    position: relative;

    display: inline-block;

    margin: 10px 0 0;

    padding-bottom: 12px;

    color: var(--guru-text);

    font-size: 34px;

    line-height: 1.15;

    letter-spacing: -.8px;

}


.guru-page .section-header-row h2::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 46px;
    height: 3px;

    background: var(--guru-primary);

    border-radius: 5px;

}


.guru-page .section-header-row p {

    max-width: 680px;

    margin: 14px 0 0;

    color: var(--guru-muted);

    font-size: 14px;

    line-height: 1.7;

}


/* ==========================================================
   GURU SECTION
========================================================== */

.guru-page .guru-list-section {

    padding: 75px 0;

    background:
        linear-gradient(
            180deg,
            #f6f8fa 0%,
            #fff 100%
        );

}


/* ==========================================================
   GURU GRID
========================================================== */

.guru-page .guru-grid {

    display: grid;

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

    gap: 20px;

}


/* ==========================================================
   GURU CARD
========================================================== */

.guru-page .guru-card {

    position: relative;

    background: #fff;

    border: 1px solid var(--guru-border);

    border-radius: 16px;

    overflow: hidden;

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

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

}


.guru-page .guru-card::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

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

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .35s ease;

}


.guru-page .guru-card:hover {

    transform: translateY(-7px);

    border-color: rgba(21,94,117,.22);

    box-shadow:
        0 18px 40px rgba(15,76,92,.12);

}


.guru-page .guru-card:hover::after {

    transform: scaleX(1);

}


/* ==========================================================
   FOTO GURU
========================================================== */

.guru-page .guru-photo {

    position: relative;

    height: 245px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #e8f1f4,
            #f7fafb
        );

}


.guru-page .guru-photo::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 60%,
            rgba(15,76,92,.08)
        );

    pointer-events: none;

}


.guru-page .guru-photo-placeholder {

    width: 108px;
    height: 108px;

    display: grid;

    place-items: center;

    color: var(--guru-primary);

    background: #fff;

    border: 5px solid rgba(21,94,117,.08);

    border-radius: 50%;

    box-shadow:
        0 10px 30px rgba(15,76,92,.12);

    font-size: 44px;

}


/* ==========================================================
   FOTO ASLI
   Jika nantinya <img> digunakan
========================================================== */

.guru-page .guru-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center top;

    transition: transform .5s ease;

}


.guru-page .guru-card:hover .guru-photo img {

    transform: scale(1.035);

}


/* ==========================================================
   CARD BODY
========================================================== */

.guru-page .guru-card-body {

    padding: 22px;

}


.guru-page .guru-role {

    display: inline-block;

    color: var(--guru-primary);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.3px;

}


.guru-page .guru-card-body h3 {

    margin: 8px 0 7px;

    color: var(--guru-text);

    font-size: 19px;

    line-height: 1.25;

}


.guru-page .guru-card-body p {

    margin: 0;

    color: var(--guru-muted);

    font-size: 12px;

    line-height: 1.65;

}


/* ==========================================================
   PIMPINAN KHUSUS
   Bisa dipakai jika card pimpinan dibuat nanti
========================================================== */

.guru-page .pimpinan-section {

    padding: 85px 0;

    background: #fff;

}


.guru-page .pimpinan-grid {

    display: grid;

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

    gap: 20px;

    align-items: start;

}


.guru-page .pimpinan-card:first-child {

    grid-column: 1 / -1;

    width: min(340px, 100%);

    margin: 0 auto 20px;

}


.guru-page .pimpinan-card {

    position: relative;

    padding: 0;

    background: #fff;

    border: 1px solid var(--guru-border);

    border-radius: 16px;

    overflow: hidden;

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

}


.guru-page .pimpinan-photo {

    height: 260px;

    overflow: hidden;

    background: #eef4f6;

}


.guru-page .pimpinan-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center top;

}


.guru-page .pimpinan-body {

    padding: 20px;

    text-align: center;

}


.guru-page .pimpinan-body span {

    color: var(--guru-primary);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.4px;

}


.guru-page .pimpinan-body h3 {

    margin: 8px 0 4px;

    color: var(--guru-text);

    font-size: 18px;

}


.guru-page .pimpinan-body p {

    margin: 0;

    color: var(--guru-muted);

    font-size: 12px;

}


/* ==========================================================
   TENAGA KEPENDIDIKAN
========================================================== */

.guru-page .tendik-section {

    padding: 75px 0;

    background: #fff;

}


.guru-page .tendik-box {

    position: relative;

    display: grid;

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

    gap: 60px;

    padding: 45px;

    background:
        linear-gradient(
            135deg,
            #f1f7f8,
            #ffffff
        );

    border: 1px solid var(--guru-border);

    border-radius: 20px;

    overflow: hidden;

}


.guru-page .tendik-box::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

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

}


.guru-page .tendik-heading h2 {

    margin: 12px 0 15px;

    color: var(--guru-text);

    font-size: 32px;

    line-height: 1.2;

}


.guru-page .tendik-heading h2 span {

    color: var(--guru-primary);

}


.guru-page .tendik-heading p {

    max-width: 500px;

    margin: 0;

    color: var(--guru-muted);

    font-size: 14px;

    line-height: 1.75;

}


.guru-page .tendik-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.guru-page .tendik-item {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 17px 18px;

    background: #fff;

    border: 1px solid var(--guru-border);

    border-radius: 12px;

    transition:
        transform .3s ease,
        border-color .3s ease;

}


.guru-page .tendik-item:hover {

    transform: translateX(5px);

    border-color: rgba(21,94,117,.25);

}


.guru-page .tendik-icon {

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    color: var(--guru-primary);

    background: rgba(21,94,117,.07);

    border-radius: 10px;

}


.guru-page .tendik-item span {

    display: block;

    color: var(--guru-primary);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

}


.guru-page .tendik-item strong {

    display: block;

    margin-top: 4px;

    color: var(--guru-text);

    font-size: 13px;

}


/* ==========================================================
   INFORMASI
========================================================== */

.guru-page .guru-info-section {

    padding: 0 0 85px;

    background: #fff;

}


.guru-page .guru-info-box {

    position: relative;

    display: grid;

    grid-template-columns: 52px 1fr auto;

    gap: 20px;

    align-items: center;

    padding: 30px;

    background: #f5f8fa;

    border: 1px solid var(--guru-border);

    border-radius: 16px;

}


.guru-page .guru-info-icon {

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    color: var(--guru-primary);

    background: #fff;

    border: 1px solid var(--guru-border);

    border-radius: 13px;

    font-size: 20px;

}


.guru-page .guru-info-box h2 {

    margin: 7px 0;

    color: var(--guru-text);

    font-size: 20px;

}


.guru-page .guru-info-box p {

    margin: 0;

    color: var(--guru-muted);

    font-size: 12px;

    line-height: 1.6;

}


.guru-page .outline-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 44px;

    padding: 0 20px;

    color: var(--guru-primary);

    background: #fff;

    border: 1px solid rgba(21,94,117,.25);

    border-radius: 9px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition: all .3s ease;

}


.guru-page .outline-button:hover {

    color: #fff;

    background: var(--guru-primary);

    border-color: var(--guru-primary);

    transform: translateY(-2px);

}


/* ==========================================================
   ANIMASI MASUK
========================================================== */

.guru-page .guru-card,
.guru-page .guru-stat-card,
.guru-page .tendik-item {

    animation:
        guruFadeUp .7s ease both;

}


@keyframes guruFadeUp {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (min-width: 1200px) {

    .guru-page .guru-grid {

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

    }

    .guru-page .guru-stats-grid {

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

    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 901px) and (max-width: 1199px) {

    .guru-page .guru-intro-grid {

        gap: 40px;

    }

    .guru-page .guru-grid {

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

    }

    .guru-page .guru-stats-grid {

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

    }

    .guru-page .tendik-box {

        gap: 35px;

        padding: 35px;

    }

}


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

@media (min-width: 601px) and (max-width: 900px) {

    .guru-page .page-hero {

        min-height: 300px;

    }

    .guru-page .guru-intro-grid {

        grid-template-columns: 1fr;

        gap: 25px;

    }

    .guru-page .guru-intro-label {

        display: flex;

        align-items: center;

        gap: 20px;

    }

    .guru-page .guru-intro-number {

        margin: 0;

        font-size: 38px;

    }

    .guru-page .guru-grid {

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

    }

    .guru-page .guru-stats-grid {

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

    }

    .guru-page .tendik-box {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .guru-page .guru-info-box {

        grid-template-columns: 52px 1fr;

    }

    .guru-page .guru-info-box .outline-button {

        grid-column: 2;

        justify-self: start;

    }

}


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

@media (max-width: 600px) {

    .guru-page .page-hero {

        min-height: 280px;

        padding: 55px 0;

    }

    .guru-page .page-hero h1 {

        font-size: 34px;

        letter-spacing: -1px;

    }

    .guru-page .page-hero p {

        font-size: 13px;

        line-height: 1.7;

    }


    .guru-page .guru-intro {

        padding: 55px 0 35px;

    }

    .guru-page .guru-intro-grid {

        grid-template-columns: 1fr;

        gap: 25px;

    }

    .guru-page .guru-intro-label {

        padding-left: 15px;

    }

    .guru-page .guru-intro-number {

        margin-top: 18px;

        font-size: 38px;

    }

    .guru-page .guru-intro-content h2 {

        font-size: 28px;

    }


    .guru-page .guru-stats {

        padding-bottom: 55px;

    }

    .guru-page .guru-stats-grid {

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .guru-page .guru-list-section {

        padding: 55px 0;

    }

    .guru-page .section-header-row h2 {

        font-size: 29px;

    }


    .guru-page .guru-grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .guru-page .guru-photo {

        height: 280px;

    }


    .guru-page .tendik-section {

        padding: 55px 0;

    }


    .guru-page .tendik-box {

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 28px 22px;

        border-radius: 15px;

    }


    .guru-page .tendik-heading h2 {

        font-size: 27px;

    }


    .guru-page .guru-info-section {

        padding-bottom: 60px;

    }


    .guru-page .guru-info-box {

        grid-template-columns: 1fr;

        gap: 15px;

        padding: 24px;

    }


    .guru-page .guru-info-icon {

        width: 46px;
        height: 46px;

    }


    .guru-page .guru-info-box .outline-button {

        width: 100%;

    }


    /* PIMPINAN */

    .guru-page .pimpinan-grid {

        grid-template-columns: 1fr;

    }


    .guru-page .pimpinan-card:first-child {

        grid-column: auto;

        width: 100%;

        margin-bottom: 0;

    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .guru-page *,
    .guru-page *::before,
    .guru-page *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;

    }

}
/* ==========================================================
   TENAGA KEPENDIDIKAN
========================================================== */

.guru-page .tendik-section {

    padding: 75px 0;

    background: #fff;

}


/* ==========================================================
   HEADER
========================================================== */

.guru-page .tendik-section .guru-modern-header {

    margin-bottom: 35px;

}


.guru-page .tendik-section .section-kicker {

    display: inline-block;

    margin-bottom: 10px;

    color: var(--guru-primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.guru-page .tendik-section .guru-modern-header h2 {

    margin: 0 0 12px;

    color: var(--guru-text);

    font-size: 32px;

    line-height: 1.2;

}


.guru-page .tendik-section .guru-modern-header h2 span {

    color: var(--guru-primary);

}


.guru-page .tendik-section .guru-modern-header p {

    max-width: 550px;

    margin: 0;

    color: var(--guru-muted);

    font-size: 14px;

    line-height: 1.75;

}


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

.guru-page .tendik-modern-grid {

    display: grid;

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

    gap: 22px;

}


/* ==========================================================
   CARD
========================================================== */

.guru-page .tendik-modern-card {

    position: relative;

    overflow: hidden;

    background: #fff;

    border: 1px solid var(--guru-border);

    border-radius: 16px;

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

}


.guru-page .tendik-modern-card:hover {

    transform: translateY(-5px);

    border-color:
        rgba(21,94,117,.25);

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

}


/* ==========================================================
   FOTO
========================================================== */

.guru-page .tendik-modern-photo {

    position: relative;

    width: 100%;

    height: 235px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #eef4f6,
            #f8fafb
        );

}


.guru-page .tendik-modern-photo::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 35%;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.08)
        );

    pointer-events: none;

}


.guru-page .tendik-modern-photo img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform .5s ease;

}


.guru-page .tendik-modern-card:hover
.tendik-modern-photo img {

    transform: scale(1.05);

}


/* ==========================================================
   CONTENT
========================================================== */

.guru-page .tendik-modern-content {

    padding: 20px 20px 22px;

}


.guru-page .tendik-modern-content span {

    display: block;

    margin-bottom: 8px;

    color: var(--guru-primary);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.guru-page .tendik-modern-content h3 {

    margin: 0;

    color: var(--guru-text);

    font-size: 15px;

    font-weight: 700;

    line-height: 1.4;

}


.guru-page .tendik-modern-content p {

    margin: 7px 0 0;

    color: var(--guru-muted);

    font-size: 12px;

    line-height: 1.6;

}


/* ==========================================================
   EMPTY DATA
========================================================== */

.guru-page .tendik-modern-grid
.guru-empty {

    grid-column: 1 / -1;

    padding: 60px 30px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f5f8fa,
            #ffffff
        );

    border: 1px solid var(--guru-border);

    border-radius: 16px;

}


.guru-page .guru-empty-icon {

    width: 60px;
    height: 60px;

    display: grid;

    place-items: center;

    margin: 0 auto 18px;

    color: var(--guru-primary);

    background:
        rgba(21,94,117,.07);

    border-radius: 15px;

    font-size: 25px;

}


.guru-page .guru-empty h3 {

    margin: 0 0 8px;

    color: var(--guru-text);

    font-size: 17px;

}


.guru-page .guru-empty p {

    max-width: 450px;

    margin: 0 auto;

    color: var(--guru-muted);

    font-size: 12px;

    line-height: 1.7;

}


/* ==========================================================
   ANIMASI
========================================================== */

.guru-page .tendik-modern-card {

    animation:
        guruFadeUp .7s ease both;

}


.guru-page .tendik-modern-card:nth-child(2) {

    animation-delay: .05s;

}


.guru-page .tendik-modern-card:nth-child(3) {

    animation-delay: .10s;

}


.guru-page .tendik-modern-card:nth-child(4) {

    animation-delay: .15s;

}


.guru-page .tendik-modern-card:nth-child(5) {

    animation-delay: .20s;

}


.guru-page .tendik-modern-card:nth-child(6) {

    animation-delay: .25s;

}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (min-width: 1200px) {

    .guru-page .tendik-modern-grid {

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

    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 901px)
and (max-width: 1199px) {

    .guru-page .tendik-modern-grid {

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

        gap: 18px;

    }

    .guru-page .tendik-modern-photo {

        height: 220px;

    }

}


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

@media (min-width: 601px)
and (max-width: 900px) {

    .guru-page .tendik-section {

        padding: 65px 0;

    }

    .guru-page .tendik-modern-grid {

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

        gap: 16px;

    }

    .guru-page .tendik-modern-photo {

        height: 230px;

    }

    .guru-page .tendik-modern-content {

        padding: 18px;

    }

    .guru-page .tendik-modern-content h3 {

        font-size: 14px;

    }

}


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

@media (max-width: 600px) {

    .guru-page .tendik-section {

        padding: 55px 0;

    }

    .guru-page .tendik-section
    .guru-modern-header {

        margin-bottom: 28px;

    }

    .guru-page .tendik-section
    .guru-modern-header h2 {

        font-size: 27px;

    }

    .guru-page .tendik-section
    .guru-modern-header p {

        font-size: 13px;

        line-height: 1.7;

    }

    .guru-page .tendik-modern-grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .guru-page .tendik-modern-photo {

        height: 280px;

    }

    .guru-page .tendik-modern-content {

        padding: 18px 18px 20px;

    }

    .guru-page .tendik-modern-content h3 {

        font-size: 15px;

    }

    .guru-page .guru-empty {

        padding: 45px 20px;

    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .guru-page .tendik-modern-card,
    .guru-page .tendik-modern-photo img {

        animation: none !important;

        transition: none !important;

    }

}
/* ==========================================================
   ANIMASI CARD TENAGA KEPENDIDIKAN
   STYLE SAMA SEPERTI CARD GURU
========================================================== */

.guru-page .tendik-modern-card {

    opacity: 0;

    animation:
        tendikCardFadeUp .7s cubic-bezier(.22,1,.36,1) forwards;

}


/* ==========================================================
   ANIMASI BERURUTAN
========================================================== */

.guru-page .tendik-modern-card:nth-child(1) {
    animation-delay: .05s;
}

.guru-page .tendik-modern-card:nth-child(2) {
    animation-delay: .10s;
}

.guru-page .tendik-modern-card:nth-child(3) {
    animation-delay: .15s;
}

.guru-page .tendik-modern-card:nth-child(4) {
    animation-delay: .20s;
}

.guru-page .tendik-modern-card:nth-child(5) {
    animation-delay: .25s;
}

.guru-page .tendik-modern-card:nth-child(6) {
    animation-delay: .30s;
}

.guru-page .tendik-modern-card:nth-child(7) {
    animation-delay: .35s;
}

.guru-page .tendik-modern-card:nth-child(8) {
    animation-delay: .40s;
}

.guru-page .tendik-modern-card:nth-child(9) {
    animation-delay: .45s;
}

.guru-page .tendik-modern-card:nth-child(10) {
    animation-delay: .50s;
}

.guru-page .tendik-modern-card:nth-child(11) {
    animation-delay: .55s;
}

.guru-page .tendik-modern-card:nth-child(12) {
    animation-delay: .60s;
}

.guru-page .tendik-modern-card:nth-child(13) {
    animation-delay: .65s;
}

.guru-page .tendik-modern-card:nth-child(14) {
    animation-delay: .70s;
}

.guru-page .tendik-modern-card:nth-child(15) {
    animation-delay: .75s;
}

.guru-page .tendik-modern-card:nth-child(16) {
    animation-delay: .80s;
}

.guru-page .tendik-modern-card:nth-child(17) {
    animation-delay: .85s;
}

.guru-page .tendik-modern-card:nth-child(18) {
    animation-delay: .90s;
}

.guru-page .tendik-modern-card:nth-child(19) {
    animation-delay: .95s;
}

.guru-page .tendik-modern-card:nth-child(20) {
    animation-delay: 1s;
}


/* ==========================================================
   KEYFRAME
========================================================== */

@keyframes tendikCardFadeUp {

    0% {

        opacity: 0;

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

    }

    60% {

        opacity: 1;

        transform:
            translateY(-3px)
            scale(1.005);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ==========================================================
   HOVER
========================================================== */

.guru-page .tendik-modern-card {

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;

}


.guru-page .tendik-modern-card:hover {

    transform:
        translateY(-8px)
        scale(1.01);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.10);

}


/* ==========================================================
   FOTO ZOOM
========================================================== */

.guru-page .tendik-modern-photo {

    overflow: hidden;

}


.guru-page .tendik-modern-photo img {

    transition:
        transform .6s cubic-bezier(.22,1,.36,1),
        filter .4s ease;

}


.guru-page .tendik-modern-card:hover
.tendik-modern-photo img {

    transform: scale(1.07);

    filter: brightness(.96);

}


/* ==========================================================
   CONTENT SLIDE
========================================================== */

.guru-page .tendik-modern-content {

    transition:
        transform .35s ease;

}


.guru-page .tendik-modern-card:hover
.tendik-modern-content {

    transform: translateY(-2px);

}


/* ==========================================================
   ICON / DETAIL VISUAL
========================================================== */

.guru-page .tendik-modern-content span {

    transition:
        letter-spacing .3s ease,
        color .3s ease;

}


.guru-page .tendik-modern-card:hover
.tendik-modern-content span {

    letter-spacing: 2px;

    color: var(--guru-secondary);

}


/* ==========================================================
   EMPTY DATA
========================================================== */

.guru-page .guru-empty {

    animation:
        tendikCardFadeUp .7s ease both;

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .guru-page .tendik-modern-card,
    .guru-page .tendik-modern-card:hover,
    .guru-page .tendik-modern-photo img,
    .guru-page .tendik-modern-content,
    .guru-page .tendik-modern-content span {

        animation: none !important;

        transition: none !important;

        transform: none !important;

    }

}
/* ==========================================================
   WAKIL KEPALA SEKOLAH
   3 CARD BERJAJAR KE SAMPING
========================================================== */

.guru-page .pimpinan-wakil-grid {

    display: grid;

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

    gap: 22px;

    width: 100%;

}


/* ==========================================================
   CARD WAKIL
========================================================== */

.guru-page .pimpinan-wakil {

    position: relative;

    overflow: hidden;

    width: 100%;

    background: #fff;

    border: 1px solid var(--guru-border);

    border-radius: 16px;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;

    opacity: 0;

    animation:
        wakilFadeUp .7s cubic-bezier(.22,1,.36,1)
        forwards;

}


/* ==========================================================
   ANIMASI BERURUTAN
========================================================== */

.guru-page .pimpinan-wakil:nth-child(1) {

    animation-delay: .05s;

}

.guru-page .pimpinan-wakil:nth-child(2) {

    animation-delay: .15s;

}

.guru-page .pimpinan-wakil:nth-child(3) {

    animation-delay: .25s;

}


/* ==========================================================
   HOVER CARD
========================================================== */

.guru-page .pimpinan-wakil:hover {

    transform: translateY(-8px);

    border-color:
        rgba(21,94,117,.25);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.10);

}


/* ==========================================================
   FOTO
========================================================== */

.guru-page .pimpinan-wakil
.pimpinan-photo {

    position: relative;

    width: 100%;

    height: 270px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #eef4f6,
            #f8fafb
        );

}


.guru-page .pimpinan-wakil
.pimpinan-photo img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform .6s cubic-bezier(.22,1,.36,1),
        filter .4s ease;

}


.guru-page .pimpinan-wakil:hover
.pimpinan-photo img {

    transform: scale(1.07);

    filter: brightness(.96);

}


/* ==========================================================
   GRADIENT FOTO
========================================================== */

.guru-page .pimpinan-wakil
.pimpinan-photo::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 35%;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.10)
        );

    pointer-events: none;

}


/* ==========================================================
   CONTENT
========================================================== */

.guru-page .pimpinan-wakil
.pimpinan-content {

    padding: 20px;

}


.guru-page .pimpinan-wakil
.pimpinan-label {

    display: block;

    margin-bottom: 8px;

    color: var(--guru-primary);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition:
        letter-spacing .3s ease;

}


.guru-page .pimpinan-wakil:hover
.pimpinan-label {

    letter-spacing: 2px;

}


.guru-page .pimpinan-wakil
.pimpinan-content h3 {

    margin: 0;

    color: var(--guru-text);

    font-size: 15px;

    line-height: 1.4;

}


.guru-page .pimpinan-wakil
.pimpinan-content p {

    margin: 7px 0 0;

    color: var(--guru-muted);

    font-size: 12px;

    line-height: 1.6;

}


/* ==========================================================
   KEYFRAME
========================================================== */

@keyframes wakilFadeUp {

    from {

        opacity: 0;

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

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 1200px) {

    .guru-page .pimpinan-wakil-grid {

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

        gap: 24px;

    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 901px)
and (max-width: 1199px) {

    .guru-page .pimpinan-wakil-grid {

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

        gap: 18px;

    }

    .guru-page .pimpinan-wakil
    .pimpinan-photo {

        height: 235px;

    }

}


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

@media (min-width: 601px)
and (max-width: 900px) {

    .guru-page .pimpinan-wakil-grid {

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

        gap: 16px;

    }

    .guru-page .pimpinan-wakil
    .pimpinan-photo {

        height: 240px;

    }

}


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

@media (max-width: 600px) {

    .guru-page .pimpinan-wakil-grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .guru-page .pimpinan-wakil
    .pimpinan-photo {

        height: 280px;

    }

    .guru-page .pimpinan-wakil
    .pimpinan-content {

        padding: 18px;

    }

}
/* ==========================================================
   FIX WAKIL KEPALA SEKOLAH
   PAKSA TETAP DI BAGIAN WAKA
========================================================== */


/* Jangan biarkan card Waka mengikuti card pimpinan utama */

.guru-page .pimpinan-wakil-grid {

    display: grid !important;

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

    gap: 22px !important;

    width: 100%;

    margin-top: 30px;

}


/* Reset aturan first-child dari pimpinan utama */

.guru-page .pimpinan-wakil-grid
.pimpinan-card:first-child {

    grid-column: auto !important;

    width: 100% !important;

    margin: 0 !important;

}


/* Reset kemungkinan style pimpinan utama */

.guru-page .pimpinan-wakil-grid
.pimpinan-wakil {

    grid-column: auto !important;

    grid-row: auto !important;

    width: 100% !important;

    margin: 0 !important;

}


/* Pastikan isi card tidak keluar ke atas */

.guru-page .pimpinan-wakil
.pimpinan-content {

    position: relative;

    display: block;

    padding: 20px;

}


/* Foto tetap di dalam card */

.guru-page .pimpinan-wakil
.pimpinan-photo {

    position: relative;

    display: block;

    width: 100%;

    height: 270px;

    overflow: hidden;

}


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

@media (min-width: 601px)
and (max-width: 900px) {

    .guru-page .pimpinan-wakil-grid {

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

    }

}


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

@media (max-width: 600px) {

    .guru-page .pimpinan-wakil-grid {

        grid-template-columns: 1fr !important;

        margin-top: 25px;

    }

}
/* ==========================================================
   GURU PAGE HERO
   MODERN • COMPACT • ELEGANT
========================================================== */

.guru-page .guru-page-hero {

    min-height: 420px;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

}


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

.guru-page .guru-page-hero
.page-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    padding: 65px 0 70px;

}


/* ==========================================================
   KICKER
========================================================== */

.guru-page .guru-page-hero
.page-kicker {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

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

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}


/* garis kecil */

.guru-page .guru-page-hero
.page-kicker::before {

    content: "";

    width: 34px;

    height: 2px;

    background: #d4af37;

}


/* ==========================================================
   JUDUL
========================================================== */

.guru-page .guru-page-hero
.page-hero-content h1 {

    max-width: 820px;

    margin: 0;

    color: #fff;

    font-size: clamp(
        42px,
        5vw,
        68px
    );

    line-height: 1.04;

    letter-spacing: -2.5px;

    font-weight: 800;

}


/* warna kata kedua */

.guru-page .guru-page-hero
.page-hero-content h1 span {

    color: #d9edf1;

}


/* ==========================================================
   NARASI
========================================================== */

.guru-page .guru-page-hero
.page-hero-content p {

    max-width: 620px;

    margin: 22px 0 0;

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

    font-size: 15px;

    line-height: 1.7;

}


/* ==========================================================
   BREADCRUMB
========================================================== */

.guru-page .breadcrumb-section {

    background: #fff;

    border-bottom:
        1px solid
        var(--guru-border);

}


.guru-page .breadcrumb {

    min-height: 58px;

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 12px;

}


.guru-page .breadcrumb a {

    color: var(--guru-primary);

    text-decoration: none;

    font-weight: 700;

}


.guru-page .breadcrumb span {

    color: var(--guru-muted);

}


.guru-page .breadcrumb i {

    color: #aab7c0;

    font-size: 10px;

}


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

@media (max-width: 900px) {

    .guru-page .guru-page-hero {

        min-height: 370px;

    }

    .guru-page .guru-page-hero
    .page-hero-content {

        max-width: 700px;

        padding: 55px 0 60px;

    }

    .guru-page .guru-page-hero
    .page-hero-content h1 {

        font-size: 48px;

    }

}


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

@media (max-width: 600px) {

    .guru-page .guru-page-hero {

        min-height: 330px;

    }

    .guru-page .guru-page-hero
    .page-hero-content {

        padding: 50px 0;

    }

    .guru-page .guru-page-hero
    .page-kicker {

        margin-bottom: 15px;

        font-size: 10px;

        letter-spacing: 1.7px;

    }

    .guru-page .guru-page-hero
    .page-kicker::before {

        width: 26px;

    }

    .guru-page .guru-page-hero
    .page-hero-content h1 {

        max-width: 100%;

        font-size: 38px;

        line-height: 1.08;

        letter-spacing: -1.5px;

    }

    .guru-page .guru-page-hero
    .page-hero-content p {

        max-width: 100%;

        margin-top: 17px;

        font-size: 13px;

        line-height: 1.65;

    }

    .guru-page .breadcrumb {

        min-height: 52px;

        gap: 8px;

        font-size: 11px;

        overflow: hidden;

        white-space: nowrap;

    }

}
/* ==========================================================
   GURU PAGE HERO
   MODERN • CENTERED • COMPACT • ANIMATED BACKGROUND
========================================================== */

.guru-page .guru-page-hero {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 360px;

    padding: 70px 0;

    overflow: hidden;

}


/* ==========================================================
   BACKGROUND ANIMASI
========================================================== */

.guru-page .guru-page-hero::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    top: -230px;

    right: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.13) 0%,
            rgba(255,255,255,.05) 35%,
            transparent 70%
        );

    animation:
        guruHeroFloat 12s ease-in-out infinite;

    pointer-events: none;

}


/* Lingkaran kedua */

.guru-page .guru-page-hero::after {

    content: "";

    position: absolute;

    width: 380px;

    height: 380px;

    bottom: -250px;

    left: -80px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 70px rgba(255,255,255,.025),
        0 0 0 140px rgba(255,255,255,.018);

    animation:
        guruHeroFloatReverse 15s ease-in-out infinite;

    pointer-events: none;

}


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

.guru-page .guru-page-hero
.page-hero-content {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    padding: 0 20px;

    text-align: center;

}


/* ==========================================================
   AKADEMIK
========================================================== */

.guru-page .guru-page-hero
.page-kicker {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-bottom: 16px;

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

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


/* garis kiri */

.guru-page .guru-page-hero
.page-kicker::before {

    content: "";

    width: 28px;

    height: 2px;

    background: #d4af37;

}


/* garis kanan */

.guru-page .guru-page-hero
.page-kicker::after {

    content: "";

    width: 28px;

    height: 2px;

    background: #d4af37;

}


/* ==========================================================
   JUDUL
========================================================== */

.guru-page .guru-page-hero
.page-hero-content h1 {

    max-width: 850px;

    margin: 0 auto;

    color: #fff;

    font-size:
        clamp(40px, 5vw, 62px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 800;

}


/* kata Kependidikan */

.guru-page .guru-page-hero
.page-hero-content h1 span {

    color: #d9edf1;

}


/* ==========================================================
   NARASI
========================================================== */

.guru-page .guru-page-hero
.page-hero-content p {

    max-width: 650px;

    margin: 18px auto 0;

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

    font-size: 14px;

    line-height: 1.7;

}


/* ==========================================================
   ANIMASI BACKGROUND
========================================================== */

@keyframes guruHeroFloat {

    0% {

        transform:
            translate(0, 0)
            scale(1);

    }

    50% {

        transform:
            translate(-45px, 35px)
            scale(1.08);

    }

    100% {

        transform:
            translate(0, 0)
            scale(1);

    }

}


@keyframes guruHeroFloatReverse {

    0% {

        transform:
            translate(0, 0)
            rotate(0deg);

    }

    50% {

        transform:
            translate(45px, -25px)
            rotate(8deg);

    }

    100% {

        transform:
            translate(0, 0)
            rotate(0deg);

    }

}


/* ==========================================================
   BREADCRUMB DISEMBUNYIKAN
========================================================== */

.guru-page .breadcrumb-section {

    display: none !important;

}


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

@media (max-width: 600px) {

    .guru-page .guru-page-hero {

        min-height: 320px;

        padding: 55px 0;

    }


    .guru-page .guru-page-hero
    .page-hero-content {

        padding: 0 18px;

    }


    .guru-page .guru-page-hero
    .page-kicker {

        margin-bottom: 14px;

        font-size: 9px;

        letter-spacing: 2px;

    }


    .guru-page .guru-page-hero
    .page-kicker::before,
    .guru-page .guru-page-hero
    .page-kicker::after {

        width: 20px;

    }


    .guru-page .guru-page-hero
    .page-hero-content h1 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.3px;

    }


    .guru-page .guru-page-hero
    .page-hero-content p {

        max-width: 340px;

        margin-top: 16px;

        font-size: 12px;

        line-height: 1.65;

    }


    .guru-page .guru-page-hero::before {

        width: 330px;

        height: 330px;

        right: -150px;

        top: -150px;

    }


    .guru-page .guru-page-hero::after {

        width: 250px;

        height: 250px;

        left: -120px;

        bottom: -170px;

    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .guru-page .guru-page-hero::before,
    .guru-page .guru-page-hero::after {

        animation: none;

    }

}
/* ==========================================================
   KEPALA SEKOLAH
   STYLE SAMA DENGAN CARD GURU
   MODERN • CENTER • ANIMATED
========================================================== */

.guru-page .pimpinan-card {

    position: relative;

    overflow: hidden;

    background: #fff;

    border: 1px solid var(--guru-border);

    border-radius: 16px;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;

}


/* ==========================================================
   KEPALA SEKOLAH - CARD UTAMA
========================================================== */

.guru-page .pimpinan-grid
.pimpinan-card:first-child {

    opacity: 0;

    animation:
        pimpinanFadeUp .75s cubic-bezier(.22,1,.36,1)
        forwards;

}


/* ==========================================================
   ANIMASI MASUK
========================================================== */

@keyframes pimpinanFadeUp {

    0% {

        opacity: 0;

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

    }

    60% {

        opacity: 1;

        transform:
            translateY(-3px)
            scale(1.005);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ==========================================================
   HOVER
========================================================== */

.guru-page .pimpinan-grid
.pimpinan-card:first-child:hover {

    transform: translateY(-8px);

    border-color:
        rgba(21,94,117,.25);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.10);

}


/* ==========================================================
   FOTO
========================================================== */

.guru-page .pimpinan-grid
.pimpinan-card:first-child
.pimpinan-photo {

    position: relative;

    width: 100%;

    height: 320px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #eef4f6,
            #f8fafb
        );

}


/* ==========================================================
   FOTO IMAGE
========================================================== */

.guru-page .pimpinan-grid
.pimpinan-card:first-child
.pimpinan-photo img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform .7s cubic-bezier(.22,1,.36,1),
        filter .4s ease;

}


/* ==========================================================
   FOTO BERGERAK SAAT HOVER
========================================================== */

.guru-page .pimpinan-grid
.pimpinan-card:first-child:hover
.pimpinan-photo img {

    transform: scale(1.06);

    filter: brightness(.96);

}


/* ==========================================================
   GRADIENT FOTO
========================================================== */

.guru-page .pimpinan-grid
.pimpinan-card:first-child
.pimpinan-photo::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 35%;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.12)
        );

    pointer-events: none;

}


/* ==========================================================
   CONTENT
========================================================== */

.guru-page .pimpinan-grid
.pimpinan-card:first-child
.pimpinan-content {

    padding: 22px 20px 24px;

    text-align: center;

}


/* ==========================================================
   LABEL
========================================================== */

.guru-page .pimpinan-grid
.pimpinan-card:first-child
.pimpinan-label {

    display: block;

    margin-bottom: 8px;

    color: var(--guru-primary);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;

    transition:
        letter-spacing .3s ease;

}


/* LABEL HOVER */

.guru-page .pimpinan-grid
.pimpinan-card:first-child:hover
.pimpinan-label {

    letter-spacing: 2.3px;

}


/* ==========================================================
   NAMA KEPALA SEKOLAH
========================================================== */

.guru-page .pimpinan-grid
.pimpinan-card:first-child
.pimpinan-content h3 {

    margin: 0;

    color: var(--guru-text);

    font-size: 20px;

    line-height: 1.4;

    font-weight: 800;

    text-align: center;

}


/* ==========================================================
   JABATAN
========================================================== */

.guru-page .pimpinan-grid
.pimpinan-card:first-child
.pimpinan-content p {

    margin: 7px 0 0;

    color: var(--guru-muted);

    font-size: 12px;

    line-height: 1.6;

    text-align: center;

}


/* ==========================================================
   ANIMASI CONTENT
========================================================== */

.guru-page .pimpinan-grid
.pimpinan-card:first-child
.pimpinan-content {

    transition:
        transform .35s ease;

}


.guru-page .pimpinan-grid
.pimpinan-card:first-child:hover
.pimpinan-content {

    transform: translateY(-2px);

}


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

@media (min-width: 601px)
and (max-width: 900px) {

    .guru-page .pimpinan-grid
    .pimpinan-card:first-child
    .pimpinan-photo {

        height: 280px;

    }

}


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

@media (max-width: 600px) {

    .guru-page .pimpinan-grid
    .pimpinan-card:first-child
    .pimpinan-photo {

        height: 280px;

    }

    .guru-page .pimpinan-grid
    .pimpinan-card:first-child
    .pimpinan-content {

        padding: 20px 18px 22px;

        text-align: center;

    }

    .guru-page .pimpinan-grid
    .pimpinan-card:first-child
    .pimpinan-content h3 {

        font-size: 18px;

    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .guru-page .pimpinan-grid
    .pimpinan-card:first-child {

        animation: none !important;

        opacity: 1;

    }

    .guru-page .pimpinan-grid
    .pimpinan-card:first-child:hover {

        transform: none;

    }

    .guru-page .pimpinan-grid
    .pimpinan-card:first-child
    .pimpinan-photo img {

        transition: none;

    }

}
/* ==========================================================
   KEPALA SEKOLAH
   STYLE SAMA DENGAN CARD GURU
========================================================== */

.guru-page .pimpinan-kepala-wrapper {

    width: 100%;

    display: flex;

    justify-content: center;

    margin-bottom: 30px;

}


/* ==========================================================
   CARD KEPALA SEKOLAH
========================================================== */

.guru-page .pimpinan-kepala {

    position: relative;

    width: 100%;

    max-width: 360px;

    overflow: hidden;

    background: #fff;

    border: 1px solid var(--guru-border);

    border-radius: 16px;

    opacity: 0;

    animation:
        pimpinanKepalaFadeUp
        .75s
        cubic-bezier(.22,1,.36,1)
        forwards;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;

}


/* ==========================================================
   ANIMASI MASUK
========================================================== */

@keyframes pimpinanKepalaFadeUp {

    0% {

        opacity: 0;

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

    }

    60% {

        opacity: 1;

        transform:
            translateY(-3px)
            scale(1.005);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ==========================================================
   HOVER CARD
========================================================== */

.guru-page .pimpinan-kepala:hover {

    transform: translateY(-8px);

    border-color:
        rgba(21,94,117,.25);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.10);

}


/* ==========================================================
   FOTO
========================================================== */

.guru-page .pimpinan-kepala
.pimpinan-photo {

    position: relative;

    width: 100%;

    height: 300px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #eef4f6,
            #f8fafb
        );

}


/* ==========================================================
   IMAGE
========================================================== */

.guru-page .pimpinan-kepala
.pimpinan-photo img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform .65s
        cubic-bezier(.22,1,.36,1),
        filter .4s ease;

}


/* ==========================================================
   ZOOM FOTO
========================================================== */

.guru-page .pimpinan-kepala:hover
.pimpinan-photo img {

    transform: scale(1.06);

    filter: brightness(.96);

}


/* ==========================================================
   GRADIENT FOTO
========================================================== */

.guru-page .pimpinan-kepala
.pimpinan-photo::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 30%;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.10)
        );

    pointer-events: none;

}


/* ==========================================================
   CONTENT
========================================================== */

.guru-page .pimpinan-kepala
.pimpinan-content {

    padding: 20px 18px 23px;

    text-align: center;

}


/* ==========================================================
   LABEL
========================================================== */

.guru-page .pimpinan-kepala
.pimpinan-label {

    display: block;

    margin-bottom: 8px;

    color: var(--guru-primary);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;

    line-height: 1.4;

    text-transform: uppercase;

    transition:
        letter-spacing .3s ease;

}


.guru-page .pimpinan-kepala:hover
.pimpinan-label {

    letter-spacing: 2.2px;

}


/* ==========================================================
   NAMA
========================================================== */

.guru-page .pimpinan-kepala
.pimpinan-content h3 {

    margin: 0;

    color: var(--guru-text);

    font-size: 19px;

    font-weight: 800;

    line-height: 1.4;

    text-align: center;

}


/* ==========================================================
   NIP
========================================================== */

.guru-page .pimpinan-kepala
.pimpinan-content p {

    margin: 7px 0 0;

    color: var(--guru-muted);

    font-size: 11px;

    line-height: 1.6;

    text-align: center;

}


/* ==========================================================
   CONTENT HOVER
========================================================== */

.guru-page .pimpinan-kepala
.pimpinan-content {

    transition:
        transform .35s ease;

}


.guru-page .pimpinan-kepala:hover
.pimpinan-content {

    transform: translateY(-2px);

}


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

@media (min-width: 601px)
and (max-width: 900px) {

    .guru-page .pimpinan-kepala {

        max-width: 340px;

    }

    .guru-page .pimpinan-kepala
    .pimpinan-photo {

        height: 280px;

    }

}


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

@media (max-width: 600px) {

    .guru-page .pimpinan-kepala-wrapper {

        margin-bottom: 25px;

    }

    .guru-page .pimpinan-kepala {

        max-width: 100%;

        border-radius: 15px;

    }

    .guru-page .pimpinan-kepala
    .pimpinan-photo {

        height: 280px;

    }

    .guru-page .pimpinan-kepala
    .pimpinan-content {

        padding: 19px 17px 21px;

    }

    .guru-page .pimpinan-kepala
    .pimpinan-content h3 {

        font-size: 18px;

    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .guru-page .pimpinan-kepala {

        animation: none !important;

        opacity: 1;

    }

    .guru-page .pimpinan-kepala:hover {

        transform: none;

    }

    .guru-page .pimpinan-kepala
    .pimpinan-photo img {

        transition: none;

    }

}
/* ==========================================================
   INFORMASI PENUTUP
   MODERN • CENTER • NO TABLE • ANIMATED
========================================================== */

.guru-page .guru-info-section {

    padding: 55px 0 80px;

    background: #fff;

}


/* ==========================================================
   INFO BOX
========================================================== */

.guru-page .guru-info-box {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    max-width: 850px;

    margin: 0 auto;

    padding: 42px 35px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f4f8fa,
            #ffffff
        );

    border: 1px solid var(--guru-border);

    border-radius: 20px;

    overflow: hidden;

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

    animation:
        guruInfoAppear .8s
        cubic-bezier(.22,1,.36,1)
        both;

}


/* ==========================================================
   BACKGROUND GERAK OTOMATIS
========================================================== */

.guru-page .guru-info-box::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    top: -170px;

    right: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(21,94,117,.08),
            transparent 70%
        );

    animation:
        guruInfoFloat 9s
        ease-in-out
        infinite;

    pointer-events: none;

}


.guru-page .guru-info-box::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    bottom: -150px;

    left: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.07),
            transparent 70%
        );

    animation:
        guruInfoFloatReverse 11s
        ease-in-out
        infinite;

    pointer-events: none;

}


/* ==========================================================
   ICON
========================================================== */

.guru-page .guru-info-icon {

    position: relative;

    z-index: 2;

    width: 58px;

    height: 58px;

    display: grid;

    place-items: center;

    margin-bottom: 17px;

    color: var(--guru-primary);

    background: #fff;

    border: 1px solid var(--guru-border);

    border-radius: 15px;

    font-size: 21px;

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

    animation:
        guruInfoIconFloat 3.5s
        ease-in-out
        infinite;

}


/* ==========================================================
   CONTENT
========================================================== */

.guru-page .guru-info-content {

    position: relative;

    z-index: 2;

    max-width: 650px;

    text-align: center;

}


/* ==========================================================
   KICKER
========================================================== */

.guru-page .guru-info-content
.section-kicker {

    display: block;

    margin-bottom: 10px;

    color: var(--guru-primary);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}


/* ==========================================================
   JUDUL
========================================================== */

.guru-page .guru-info-box h2 {

    margin: 0;

    color: var(--guru-text);

    font-size: 25px;

    line-height: 1.35;

    font-weight: 800;

}


/* ==========================================================
   PARAGRAF
========================================================== */

.guru-page .guru-info-box p {

    max-width: 560px;

    margin: 12px auto 0;

    color: var(--guru-muted);

    font-size: 12px;

    line-height: 1.7;

}


/* ==========================================================
   TOMBOL
========================================================== */

.guru-page .guru-info-box
.outline-button {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 42px;

    margin-top: 22px;

    padding: 0 20px;

    color: var(--guru-primary);

    background: #fff;

    border: 1px solid rgba(21,94,117,.22);

    border-radius: 9px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;

}


.guru-page .guru-info-box
.outline-button:hover {

    color: #fff;

    background: var(--guru-primary);

    border-color: var(--guru-primary);

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px
        rgba(21,94,117,.18);

}


/* ==========================================================
   PANAH
========================================================== */

.guru-page .guru-info-box
.outline-button i {

    transition:
        transform .3s ease;

}


.guru-page .guru-info-box
.outline-button:hover i {

    transform: translateX(4px);

}


/* ==========================================================
   ANIMASI MUNCUL
========================================================== */

@keyframes guruInfoAppear {

    from {

        opacity: 0;

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

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ==========================================================
   BACKGROUND BERGERAK
========================================================== */

@keyframes guruInfoFloat {

    0% {

        transform:
            translate(0,0)
            scale(1);

    }

    50% {

        transform:
            translate(-35px,25px)
            scale(1.08);

    }

    100% {

        transform:
            translate(0,0)
            scale(1);

    }

}


@keyframes guruInfoFloatReverse {

    0% {

        transform:
            translate(0,0);

    }

    50% {

        transform:
            translate(30px,-20px);

    }

    100% {

        transform:
            translate(0,0);

    }

}


/* ==========================================================
   ICON BERGERAK OTOMATIS
========================================================== */

@keyframes guruInfoIconFloat {

    0% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-5px);

    }

    100% {

        transform:
            translateY(0);

    }

}


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

@media (max-width: 600px) {

    .guru-page .guru-info-section {

        padding: 45px 0 60px;

    }

    .guru-page .guru-info-box {

        max-width: 100%;

        padding: 32px 20px;

        border-radius: 16px;

    }

    .guru-page .guru-info-icon {

        width: 52px;

        height: 52px;

        font-size: 19px;

    }

    .guru-page .guru-info-box h2 {

        font-size: 21px;

    }

    .guru-page .guru-info-box p {

        font-size: 11px;

    }

    .guru-page .guru-info-box
    .outline-button {

        width: auto;

        min-width: 170px;

    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .guru-page .guru-info-box,
    .guru-page .guru-info-box::before,
    .guru-page .guru-info-box::after,
    .guru-page .guru-info-icon {

        animation: none !important;

    }

}
/* ==========================================================
   TYPOGRAPHY GLOBAL
   JUDUL MODERN - TITLE CASE
========================================================== */

/* Semua judul utama */
.guru-page h1,
.guru-page h2,
.guru-page h3 {

    text-transform: none;

}


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

.guru-page .page-hero h1 {

    text-transform: none;

}


/* ==========================================================
   JUDUL SECTION
========================================================== */

.guru-page .section-header-row h2,
.guru-page .guru-modern-header h2,
.guru-page .guru-intro-content h2,
.guru-page .guru-info-box h2,
.guru-page .tendik-heading h2 {

    text-transform: none;

}


/* ==========================================================
   JUDUL KARTU
========================================================== */

.guru-page .guru-card h3,
.guru-page .pimpinan-card h3,
.guru-page .tendik-modern-card h3 {

    text-transform: none;

}


/* ==========================================================
   LABEL KECIL
   TETAP HURUF BESAR
========================================================== */

.guru-page .page-kicker,
.guru-page .section-kicker,
.guru-page .pimpinan-label,
.guru-page .tendik-modern-content > span {

    text-transform: uppercase;

}


/* ==========================================================
   JAJARAN PIMPINAN SEKOLAH
========================================================== */

.guru-page .pimpinan-section h2 {

    text-transform: none;

}


/* ==========================================================
   KEPALA SEKOLAH
========================================================== */

.guru-page .pimpinan-kepala
.pimpinan-content h3 {

    text-transform: none;

}


/* ==========================================================
   WAKIL KEPALA SEKOLAH
========================================================== */

.guru-page .pimpinan-wakil
.pimpinan-content h3 {

    text-transform: none;

}


/* ==========================================================
   GURU
========================================================== */

.guru-page .guru-list-section h2 {

    text-transform: none;

}


/* ==========================================================
   TENAGA KEPENDIDIKAN
========================================================== */

.guru-page .tendik-section h2 {

    text-transform: none;

}


/* ==========================================================
   INFORMASI PENUTUP
========================================================== */

.guru-page .guru-info-box h2 {

    text-transform: none;

}


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

@media (max-width: 600px) {

    .guru-page h1,
    .guru-page h2,
    .guru-page h3 {

        text-transform: none;

    }

}
/* ==========================================================
   PROFIL SEKOLAH
   MODERN GOVERNMENT STYLE
========================================================== */

.profile-page {

    --profile-primary: #0F4C81;
    --profile-primary-dark: #082F56;
    --profile-primary-light: #1769AA;

    --profile-gold: #D4A72C;
    --profile-gold-light: #F0C75E;

    --profile-text: #172B3A;
    --profile-muted: #687785;

    --profile-bg: #F5F8FB;
    --profile-white: #FFFFFF;

    --profile-border: rgba(15,76,129,.12);

    color: var(--profile-text);

    background: var(--profile-white);

    overflow: hidden;

}


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

.profile-page .profile-hero {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 390px;

    padding: 75px 20px;

    overflow: hidden;

    color: #fff;

    background:

        linear-gradient(
            135deg,
            rgba(8,47,86,.98),
            rgba(15,76,129,.94)
        );

}


/* ----------------------------------------------------------
   BACKGROUND CAHAYA
---------------------------------------------------------- */

.profile-page .profile-hero::before {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    top: -320px;
    right: -180px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(240,199,94,.22) 0%,
            rgba(240,199,94,.08) 35%,
            transparent 70%
        );

    animation:

        profileGlow 9s ease-in-out infinite alternate;

}


/* ----------------------------------------------------------
   BACKGROUND CAHAYA KEDUA
---------------------------------------------------------- */

.profile-page .profile-hero::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -250px;
    bottom: -280px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(23,105,170,.35),
            transparent 70%
        );

    animation:

        profileGlowReverse 11s ease-in-out infinite alternate;

}


/* ==========================================================
   HERO CONTENT
========================================================== */

.profile-page .profile-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 850px;

    margin: auto;

    text-align: center;

    animation:

        profileFadeUp .8s ease both;

}


/* ==========================================================
   LOGO
========================================================== */

.profile-page .profile-logo {

    width: 92px;
    height: 92px;

    margin: 0 auto 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 9px;

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

    border: 3px solid rgba(240,199,94,.85);

    border-radius: 50%;

    box-shadow:

        0 12px 35px rgba(0,0,0,.22);

    animation:

        profileLogoFloat 4s ease-in-out infinite;

}


.profile-page .profile-logo img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 50%;

}


.profile-page .profile-logo-default {

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--profile-primary);

    font-size: 32px;

    background: #fff;

    border-radius: 50%;

}


/* ==========================================================
   KICKER
========================================================== */

.profile-page .profile-kicker {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-bottom: 13px;

    color: var(--profile-gold-light);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


.profile-page .profile-kicker::before,
.profile-page .profile-kicker::after {

    content: "";

    width: 28px;
    height: 1px;

    background: rgba(240,199,94,.7);

}


/* ==========================================================
   HERO TITLE
========================================================== */

.profile-page .profile-hero h1 {

    margin: 0;

    color: #fff;

    font-size: clamp(32px, 5vw, 52px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.5px;

    text-shadow:

        0 4px 20px rgba(0,0,0,.18);

}


.profile-page .profile-hero p {

    max-width: 650px;

    margin: 18px auto 0;

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

    font-size: 14px;

    line-height: 1.8;

}


/* ==========================================================
   PROFIL SINGKAT
========================================================== */

.profile-page .profile-about {

    padding: 75px 0;

    background: #fff;

}


.profile-page .profile-about-box {

    position: relative;

    display: grid;

    grid-template-columns: .75fr 1.25fr;

    gap: 55px;

    max-width: 1050px;

    margin: auto;

    padding: 42px;

    background:

        linear-gradient(
            135deg,
            #f7fafc,
            #ffffff
        );

    border: 1px solid var(--profile-border);

    border-radius: 20px;

    box-shadow:

        0 15px 45px rgba(15,76,129,.07);

    overflow: hidden;

    animation:

        profileFadeUp .8s ease both;

}


.profile-page .profile-about-box::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background:

        linear-gradient(
            180deg,
            var(--profile-primary),
            var(--profile-gold)
        );

}


.profile-page .profile-about-heading {

    position: relative;

    padding-left: 5px;

}


.profile-page .section-kicker {

    display: inline-block;

    color: var(--profile-primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.profile-page .profile-about-heading h2 {

    margin: 12px 0 0;

    color: var(--profile-text);

    font-size: 28px;

    line-height: 1.3;

}


.profile-page .profile-about-content {

    display: flex;

    align-items: center;

}


.profile-page .profile-about-content p {

    margin: 0;

    color: var(--profile-muted);

    font-size: 14px;

    line-height: 1.9;

}


/* ==========================================================
   IDENTITAS
========================================================== */

.profile-page .profile-identity-section {

    padding: 75px 0 90px;

    background:

        linear-gradient(
            180deg,
            #F5F8FB 0%,
            #EEF4F8 100%
        );

}


.profile-page .profile-section-heading {

    margin-bottom: 30px;

    text-align: center;

}


.profile-page .profile-section-heading h2 {

    margin: 8px 0 0;

    color: var(--profile-text);

    font-size: 31px;

    line-height: 1.25;

}


/* ==========================================================
   GRID IDENTITAS
========================================================== */

.profile-page .profile-identity-grid {

    display: grid;

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

    gap: 15px;

    max-width: 1050px;

    margin: auto;

}


/* ==========================================================
   DATA CARD
========================================================== */

.profile-page .profile-data {

    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 105px;

    padding: 20px;

    background: #fff;

    border: 1px solid var(--profile-border);

    border-radius: 14px;

    box-shadow:

        0 8px 25px rgba(15,76,129,.055);

    transition:

        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

    animation:

        profileFadeUp .7s ease both;

}


.profile-page .profile-data:hover {

    transform: translateY(-6px);

    border-color: rgba(15,76,129,.25);

    box-shadow:

        0 15px 35px rgba(15,76,129,.12);

}


/* ==========================================================
   ICON
========================================================== */

.profile-page .profile-data-icon {

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--profile-primary);

    background:

        rgba(15,76,129,.07);

    border-radius: 11px;

    font-size: 19px;

    transition:

        transform .3s ease,
        background .3s ease;

}


.profile-page .profile-data:hover
.profile-data-icon {

    transform: scale(1.08);

    background:

        rgba(15,76,129,.12);

}


/* ==========================================================
   LABEL DATA
========================================================== */

.profile-page .profile-data small {

    display: block;

    margin-bottom: 5px;

    color: var(--profile-muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.profile-page .profile-data strong {

    display: block;

    color: var(--profile-text);

    font-size: 14px;

    line-height: 1.4;

    word-break: break-word;

}


/* ==========================================================
   ANIMASI CARD BERURUTAN
========================================================== */

.profile-page .profile-data:nth-child(1) {

    animation-delay: .05s;

}

.profile-page .profile-data:nth-child(2) {

    animation-delay: .12s;

}

.profile-page .profile-data:nth-child(3) {

    animation-delay: .19s;

}

.profile-page .profile-data:nth-child(4) {

    animation-delay: .26s;

}


/* ==========================================================
   GARIS AKSEN
========================================================== */

.profile-page .profile-data::after {

    content: "";

    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 0;

    height: 2px;

    background:

        linear-gradient(
            90deg,
            var(--profile-primary),
            var(--profile-gold)
        );

    transform: scaleX(0);

    transform-origin: left;

    transition:

        transform .35s ease;

}


.profile-page .profile-data:hover::after {

    transform: scaleX(1);

}


/* ==========================================================
   ANIMASI
========================================================== */

@keyframes profileFadeUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


@keyframes profileLogoFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-7px);

    }

}


@keyframes profileGlow {

    from {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    to {

        transform:
            translate3d(-70px,50px,0)
            scale(1.15);

    }

}


@keyframes profileGlowReverse {

    from {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    to {

        transform:
            translate3d(80px,-40px,0)
            scale(1.12);

    }

}


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

@media (max-width: 900px) {

    .profile-page .profile-hero {

        min-height: 350px;

        padding: 65px 20px;

    }


    .profile-page .profile-about-box {

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 35px;

    }


    .profile-page .profile-identity-grid {

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

    }

}


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

@media (max-width: 600px) {

    .profile-page .profile-hero {

        min-height: 320px;

        padding: 55px 18px;

    }


    .profile-page .profile-logo {

        width: 78px;
        height: 78px;

        margin-bottom: 18px;

    }


    .profile-page .profile-logo-default {

        font-size: 27px;

    }


    .profile-page .profile-kicker {

        font-size: 9px;

        letter-spacing: 2px;

    }


    .profile-page .profile-kicker::before,
    .profile-page .profile-kicker::after {

        width: 18px;

    }


    .profile-page .profile-hero h1 {

        font-size: 31px;

        letter-spacing: -1px;

    }


    .profile-page .profile-hero p {

        font-size: 12px;

        line-height: 1.7;

    }


    .profile-page .profile-about {

        padding: 50px 0;

    }


    .profile-page .profile-about-box {

        padding: 27px 22px;

        border-radius: 15px;

    }


    .profile-page .profile-about-heading h2 {

        font-size: 24px;

    }


    .profile-page .profile-about-content p {

        font-size: 13px;

        line-height: 1.8;

    }


    .profile-page .profile-identity-section {

        padding: 50px 0 60px;

    }


    .profile-page .profile-section-heading {

        margin-bottom: 22px;

    }


    .profile-page .profile-section-heading h2 {

        font-size: 26px;

    }


    .profile-page .profile-identity-grid {

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .profile-page .profile-data {

        min-height: 85px;

        padding: 17px;

    }


    .profile-page .profile-data-icon {

        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 17px;

    }


    .profile-page .profile-data strong {

        font-size: 13px;

    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .profile-page *,
    .profile-page *::before,
    .profile-page *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;

    }

}
/* ==========================================================
   PROFIL SINGKAT
========================================================== */

.profile-page .profile-about {

    padding: 70px 0;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );

}


.profile-page .profile-about-box {

    position: relative;

    display: grid;

    grid-template-columns: 340px 1fr;

    gap: 55px;

    align-items: center;

    padding: 42px 48px;

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

    border: 1px solid rgba(15,76,129,.10);

    border-radius: 18px;

    box-shadow:
        0 15px 45px rgba(15,76,129,.08);

    overflow: hidden;

    animation:
        profileAboutIn .8s ease both;

}


/* AKSEN SAMPING */

.profile-page .profile-about-box::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background:
        linear-gradient(
            180deg,
            #0F4C81,
            #1B6CA8
        );

}


/* HEADER */

.profile-page .profile-about-heading {

    display: flex;

    align-items: center;

    gap: 18px;

}


.profile-page .profile-about-icon {

    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    display: grid;

    place-items: center;

    color: #0F4C81;

    background:
        linear-gradient(
            135deg,
            #eef5fa,
            #ffffff
        );

    border: 1px solid rgba(15,76,129,.12);

    border-radius: 14px;

    font-size: 21px;

    animation:
        profileIconFloat 3s ease-in-out infinite;

}


.profile-page .profile-about-heading .section-kicker {

    display: block;

    margin-bottom: 7px;

    color: #0F4C81;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.profile-page .profile-about-heading h2 {

    margin: 0;

    color: #17212b;

    font-size: 25px;

    line-height: 1.25;

    font-weight: 700;

}


/* NARASI */

.profile-page .profile-about-content {

    position: relative;

}


.profile-page .profile-about-content p {

    margin: 0;

    color: #5f6b76;

    font-size: 14px;

    line-height: 1.9;

    max-width: 800px;

}


/* GARIS AKSEN */

.profile-page .profile-about-line {

    position: absolute;

    right: 0;
    bottom: 0;

    width: 90px;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #0F4C81
        );

    opacity: .45;

    animation:
        profileLineMove 3s ease-in-out infinite;

}


/* ==========================================================
   ANIMASI
========================================================== */

@keyframes profileAboutIn {

    from {

        opacity: 0;

        transform:
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes profileIconFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-4px);

    }

}


@keyframes profileLineMove {

    0%,
    100% {

        transform:
            translateX(0);

        opacity: .35;

    }

    50% {

        transform:
            translateX(-15px);

        opacity: .8;

    }

}


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

@media (max-width: 900px) {

    .profile-page .profile-about-box {

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 35px;

    }

}


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

@media (max-width: 600px) {

    .profile-page .profile-about {

        padding: 50px 0;

    }


    .profile-page .profile-about-box {

        gap: 22px;

        padding: 28px 22px;

        border-radius: 15px;

    }


    .profile-page .profile-about-heading {

        gap: 13px;

    }


    .profile-page .profile-about-icon {

        width: 46px;
        height: 46px;

        flex-basis: 46px;

        font-size: 18px;

    }


    .profile-page .profile-about-heading h2 {

        font-size: 20px;

    }


    .profile-page .profile-about-content p {

        font-size: 13px;

        line-height: 1.8;

    }


    .profile-page .profile-about-line {

        width: 55px;

    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .profile-page .profile-about-box,
    .profile-page .profile-about-icon,
    .profile-page .profile-about-line {

        animation: none !important;

    }

}
/* ==========================================================
   PROFIL HERO - MODERN PEMERINTAH
========================================================== */

.profile-page .profile-hero {

    position: relative;

    min-height: 330px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 55px 20px;

    overflow: hidden;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(7, 48, 82, .94),
            rgba(15, 76, 129, .88)
        ),
        url("https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&w=1800&q=80")
        center center / cover no-repeat;

}


/* GERAK BACKGROUND */

.profile-page .profile-hero::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -260px;
    right: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.12),
            transparent 65%
        );

    animation:
        profileFloat 10s ease-in-out infinite;

}


.profile-page .profile-hero::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -230px;
    left: -120px;

    border-radius: 50%;

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

    animation:
        profileFloatReverse 12s ease-in-out infinite;

}


.profile-page .profile-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: auto;

    animation:
        profileFadeUp .8s ease both;

}


/* ==========================================================
   LABEL
========================================================== */

.profile-page .profile-kicker {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 13px;

    padding: 7px 15px;

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

    border-radius: 50px;

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

    backdrop-filter: blur(8px);

    color: #fff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* ==========================================================
   JUDUL
========================================================== */

.profile-page .profile-hero h1 {

    margin: 0;

    color: #fff;

    font-size: clamp(30px, 5vw, 48px);

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1.2px;

    text-transform: uppercase;

    text-shadow:
        0 4px 20px rgba(0,0,0,.18);

}


/* ==========================================================
   SUBJUDUL
========================================================== */

.profile-page .profile-hero p {

    max-width: 650px;

    margin: 16px auto 0;

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

    font-size: 14px;

    line-height: 1.7;

    text-transform: uppercase;

    letter-spacing: .2px;

}


/* ==========================================================
   ANIMASI
========================================================== */

@keyframes profileFadeUp {

    from {

        opacity: 0;

        transform: translateY(22px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


@keyframes profileFloat {

    0%,
    100% {

        transform: translate(0,0);

    }

    50% {

        transform: translate(-30px,25px);

    }

}


@keyframes profileFloatReverse {

    0%,
    100% {

        transform: translate(0,0);

    }

    50% {

        transform: translate(25px,-20px);

    }

}


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

@media (max-width: 600px) {

    .profile-page .profile-hero {

        min-height: 290px;

        padding: 50px 18px;

    }


    .profile-page .profile-kicker {

        font-size: 9px;

        padding: 6px 12px;

        letter-spacing: 1.5px;

    }


    .profile-page .profile-hero h1 {

        font-size: 29px;

        line-height: 1.15;

    }


    .profile-page .profile-hero p {

        margin-top: 13px;

        font-size: 11px;

        line-height: 1.65;

    }

}


@media (prefers-reduced-motion: reduce) {

    .profile-page .profile-hero::before,
    .profile-page .profile-hero::after,
    .profile-page .profile-hero-content {

        animation: none !important;

    }

}
/* ==========================================================
   PROFIL SEKOLAH
   HERO MODERN - FOTO + ANIMASI
========================================================== */

.profile-page .profile-hero {

    position: relative;

    min-height: 340px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 55px 20px;

    overflow: hidden;

    text-align: center;

    isolation: isolate;

    background-color: #123f5f;

}


/* ==========================================================
   FOTO BACKGROUND
========================================================== */

.profile-page .profile-hero::before {

    content: "";

    position: absolute;

    inset: -30px;

    z-index: -2;

    background-image:
        url("https://pramukadiy.or.id/assets/uploads/2023/11/20231111_204600_0000-rkhW5pNFC6QX.png");

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    animation:
        profileBackgroundMove 18s ease-in-out infinite alternate;

    transform-origin: center center;

}


/* ==========================================================
   OVERLAY FOTO
========================================================== */

.profile-page .profile-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            135deg,
            rgba(5, 42, 70, .68),
            rgba(15, 76, 129, .38)
        );

}


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

.profile-page .profile-hero-content {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 820px;

    margin: 0 auto;

    animation:
        profileContentIn .8s ease both;

}


/* ==========================================================
   LABEL
========================================================== */

.profile-page .profile-kicker {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 14px;

    padding: 7px 16px;

    color: #fff;

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

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

    border-radius: 50px;

    backdrop-filter: blur(8px);

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* ==========================================================
   JUDUL
========================================================== */

.profile-page .profile-hero h1 {

    margin: 0;

    color: #fff;

    font-size: clamp(
        30px,
        5vw,
        48px
    );

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1px;

    text-transform: uppercase;

    text-shadow:
        0 3px 20px rgba(0,0,0,.35);

}


/* ==========================================================
   NARASI
========================================================== */

.profile-page .profile-hero p {

    max-width: 680px;

    margin: 16px auto 0;

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

    font-size: 13px;

    line-height: 1.75;

    text-transform: uppercase;

    text-shadow:
        0 2px 10px rgba(0,0,0,.35);

}


/* ==========================================================
   ANIMASI FOTO
========================================================== */

@keyframes profileBackgroundMove {

    0% {

        transform:
            scale(1.02)
            translate3d(0,0,0);

    }

    25% {

        transform:
            scale(1.06)
            translate3d(-12px,-6px,0);

    }

    50% {

        transform:
            scale(1.09)
            translate3d(8px,-10px,0);

    }

    75% {

        transform:
            scale(1.06)
            translate3d(12px,6px,0);

    }

    100% {

        transform:
            scale(1.03)
            translate3d(-5px,10px,0);

    }

}


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

@keyframes profileContentIn {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ==========================================================
   AKSEN CAHAYA BERGERAK
========================================================== */

.profile-page .profile-hero-content::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    top: -100px;

    right: -100px;

    border-radius: 50%;

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

    filter: blur(3px);

    pointer-events: none;

    animation:
        profileLightMove 8s ease-in-out infinite;

}


@keyframes profileLightMove {

    0%,
    100% {

        transform:
            translate(0,0);

        opacity: .4;

    }

    50% {

        transform:
            translate(-35px,25px);

        opacity: .8;

    }

}


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

@media (max-width: 600px) {

    .profile-page .profile-hero {

        min-height: 300px;

        padding:
            48px
            18px;

    }


    .profile-page .profile-kicker {

        margin-bottom: 12px;

        padding:
            6px 13px;

        font-size: 9px;

        letter-spacing: 1.5px;

    }


    .profile-page .profile-hero h1 {

        font-size: 29px;

        line-height: 1.15;

        letter-spacing: -.6px;

    }


    .profile-page .profile-hero p {

        margin-top: 13px;

        font-size: 10px;

        line-height: 1.7;

    }


}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .profile-page .profile-hero::before,
    .profile-page .profile-hero-content,
    .profile-page .profile-hero-content::after {

        animation: none !important;

    }

}
/* ==========================================================
   PROFIL SEKOLAH
   MODERN GOVERNMENT STYLE
========================================================== */

.profile-page .profile-about {

    position: relative;

    padding: 78px 0 85px;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );

    overflow: hidden;

}


/* ==========================================================
   BACKGROUND DECORATION
========================================================== */

.profile-page .profile-about::before {

    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    top: -260px;
    right: -180px;

    background:
        radial-gradient(
            circle,
            rgba(15,76,129,.08) 0%,
            rgba(15,76,129,.035) 35%,
            transparent 70%
        );

    border-radius: 50%;

    animation:
        profileBgFloat 12s ease-in-out infinite;

}


.profile-page .profile-about::after {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    bottom: -150px;
    left: -100px;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.06),
            transparent 70%
        );

    border-radius: 50%;

    animation:
        profileBgFloatReverse 15s ease-in-out infinite;

}


/* ==========================================================
   CONTAINER
========================================================== */

.profile-page .profile-about .container {

    position: relative;

    z-index: 2;

}


/* ==========================================================
   MAIN CARD
========================================================== */

.profile-page .profile-about-box {

    position: relative;

    max-width: 1080px;

    margin: 0 auto;

    padding: 48px 55px 45px;

    background:

        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfcfd 100%
        );

    border:

        1px solid
        rgba(15,76,129,.10);

    border-radius: 20px;

    box-shadow:

        0 18px 50px
        rgba(20,45,65,.07),

        0 2px 8px
        rgba(20,45,65,.04);

    overflow: hidden;

    animation:
        profileCardReveal .8s ease both;

}


/* ==========================================================
   GARIS PEMERINTAH
========================================================== */

.profile-page .profile-about-box::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:

        linear-gradient(
            90deg,
            #0A3B66 0%,
            #0F4C81 45%,
            #D4AF37 100%
        );

}


/* GARIS SAMPING HALUS */

.profile-page .profile-about-box::after {

    content: "";

    position: absolute;

    left: 0;
    top: 35px;
    bottom: 35px;

    width: 3px;

    background:

        linear-gradient(
            180deg,
            #0F4C81,
            #1B6CA8,
            transparent
        );

    border-radius: 0 5px 5px 0;

}


/* ==========================================================
   HEADER
========================================================== */

.profile-page .profile-about-heading {

    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 30px;

}


/* ==========================================================
   ICON
========================================================== */

.profile-page .profile-about-icon {

    position: relative;

    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: flex;

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

    color: #0F4C81;

    background:

        linear-gradient(
            145deg,
            #eef5fa,
            #ffffff
        );

    border:

        1px solid
        rgba(15,76,129,.13);

    border-radius: 15px;

    font-size: 22px;

    box-shadow:

        0 8px 20px
        rgba(15,76,129,.08);

    transition:

        transform .35s ease,
        box-shadow .35s ease;

}


.profile-page .profile-about-box:hover
.profile-about-icon {

    transform:
        translateY(-4px)
        rotate(-2deg);

    box-shadow:

        0 12px 25px
        rgba(15,76,129,.13);

}


/* ==========================================================
   LABEL
========================================================== */

.profile-page .profile-about-heading
.section-kicker {

    display: block;

    margin-bottom: 6px;

    color: #0F4C81;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* ==========================================================
   JUDUL
========================================================== */

.profile-page .profile-about-heading h2 {

    margin: 0;

    color: #172B3A;

    font-size: 29px;

    font-weight: 750;

    line-height: 1.25;

    letter-spacing: -.4px;

    text-transform: uppercase;

}


/* ==========================================================
   NARASI
========================================================== */

.profile-page .profile-about-content {

    position: relative;

    max-width: 900px;

    margin-left: 78px;

}


.profile-page .profile-about-content p {

    position: relative;

    margin: 0;

    color: #586875;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.9;

    letter-spacing: .05px;

}


/* ==========================================================
   HIGHLIGHT AWAL NARASI
========================================================== */

.profile-page .profile-about-content p::first-letter {

    color: #0F4C81;

    font-size: 22px;

    font-weight: 700;

}


/* ==========================================================
   GARIS BAWAH
========================================================== */

.profile-page .profile-about-line {

    position: relative;

    width: 65px;
    height: 3px;

    margin-top: 32px;

    margin-left: 78px;

    background:

        linear-gradient(
            90deg,
            #0F4C81 0%,
            #1B6CA8 70%,
            #D4AF37 100%
        );

    border-radius: 10px;

    animation:
        profileLinePulse 4s ease-in-out infinite;

}


/* ==========================================================
   HOVER CARD
========================================================== */

.profile-page .profile-about-box {

    transition:

        transform .35s ease,
        box-shadow .35s ease;

}


.profile-page .profile-about-box:hover {

    transform:
        translateY(-3px);

    box-shadow:

        0 24px 60px
        rgba(20,45,65,.09),

        0 3px 10px
        rgba(20,45,65,.04);

}


/* ==========================================================
   ANIMASI CARD
========================================================== */

@keyframes profileCardReveal {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ==========================================================
   ANIMASI BACKGROUND
========================================================== */

@keyframes profileBgFloat {

    0%,
    100% {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    50% {

        transform:
            translate3d(-25px,20px,0)
            scale(1.06);

    }

}


@keyframes profileBgFloatReverse {

    0%,
    100% {

        transform:
            translate3d(0,0,0);

    }

    50% {

        transform:
            translate3d(25px,-15px,0);

    }

}


/* ==========================================================
   ANIMASI GARIS
========================================================== */

@keyframes profileLinePulse {

    0%,
    100% {

        width: 65px;

        opacity: .8;

    }

    50% {

        width: 100px;

        opacity: 1;

    }

}


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

@media (max-width: 900px) {

    .profile-page .profile-about {

        padding: 60px 0 65px;

    }


    .profile-page .profile-about-box {

        padding: 40px 35px;

    }


    .profile-page .profile-about-content {

        margin-left: 0;

    }


    .profile-page .profile-about-line {

        margin-left: 0;

    }

}


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

@media (max-width: 600px) {

    .profile-page .profile-about {

        padding: 45px 0 50px;

    }


    .profile-page .profile-about-box {

        padding: 32px 23px 30px;

        border-radius: 16px;

    }


    .profile-page .profile-about-box::after {

        top: 25px;

        bottom: 25px;

    }


    .profile-page .profile-about-heading {

        gap: 14px;

        margin-bottom: 22px;

    }


    .profile-page .profile-about-icon {

        width: 46px;
        height: 46px;

        flex-basis: 46px;

        border-radius: 12px;

        font-size: 18px;

    }


    .profile-page .profile-about-heading
    .section-kicker {

        font-size: 9px;

        letter-spacing: 1.5px;

    }


    .profile-page .profile-about-heading h2 {

        font-size: 21px;

        letter-spacing: -.2px;

    }


    .profile-page .profile-about-content p {

        font-size: 13px;

        line-height: 1.8;

        text-align: left;

    }


    .profile-page .profile-about-line {

        margin-top: 24px;

    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .profile-page .profile-about *,
    .profile-page .profile-about::before,
    .profile-page .profile-about::after {

        animation: none !important;

        transition: none !important;

    }

}
/* ==========================================================
   PROFIL SINGKAT
   MODERN GOVERNMENT STYLE
========================================================== */

.profile-page .profile-about {

    position: relative;

    padding: 70px 0 80px;

    background: #f7f9fb;

    overflow: hidden;

}


/* ==========================================================
   BACKGROUND AKSEN
========================================================== */

.profile-page .profile-about::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -250px;
    right: -170px;

    background:
        radial-gradient(
            circle,
            rgba(15,76,129,.08) 0%,
            rgba(15,76,129,.03) 45%,
            transparent 72%
        );

    border-radius: 50%;

    animation:
        profileAboutFloat 12s ease-in-out infinite;

}


/* ==========================================================
   CONTAINER
========================================================== */

.profile-page .profile-about .container {

    position: relative;

    z-index: 2;

}


/* ==========================================================
   BLOK PROFIL
========================================================== */

.profile-page .profile-about-box {

    position: relative;

    max-width: 900px;

    margin: 0 auto;

    padding: 42px 48px;

    background: #ffffff;

    border: 1px solid #e5e9ed;

    border-radius: 16px;

    box-shadow:
        0 10px 35px
        rgba(20,45,65,.06);

    text-align: left;

    overflow: hidden;

    animation:
        profileAboutReveal .7s ease both;

}


/* ==========================================================
   GARIS ATAS
========================================================== */

.profile-page .profile-about-box::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #0A3B66 0%,
            #0F4C81 65%,
            #D4AF37 100%
        );

}


/* ==========================================================
   LABEL
========================================================== */

.profile-page .profile-about-kicker {

    display: block;

    margin-bottom: 8px;

    color: #0F4C81;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    line-height: 1.4;

    text-transform: uppercase;

}


/* ==========================================================
   JUDUL
========================================================== */

.profile-page .profile-about-title {

    margin: 0;

    color: #172B3A;

    font-size: 30px;

    font-weight: 750;

    line-height: 1.25;

    letter-spacing: -.4px;

    text-align: left;

    text-transform: uppercase;

}


/* ==========================================================
   GARIS AKSEN
========================================================== */

.profile-page .profile-about-accent {

    width: 60px;

    height: 3px;

    margin-top: 18px;

    margin-bottom: 25px;

    background:
        linear-gradient(
            90deg,
            #0F4C81,
            #1B6CA8
        );

    border-radius: 10px;

    animation:
        profileAccentMove 4s ease-in-out infinite;

}


/* ==========================================================
   NARASI
========================================================== */

.profile-page .profile-about-content {

    width: 100%;

    max-width: 820px;

    margin: 0;

    padding: 0;

    text-align: left;

}


/* ==========================================================
   PARAGRAF
========================================================== */

.profile-page .profile-about-content p {

    margin: 0;

    padding: 0;

    color: #596A77;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.9;

    letter-spacing: .05px;

    text-align: left;

}


/* ==========================================================
   HOVER HALUS
========================================================== */

.profile-page .profile-about-box {

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.profile-page .profile-about-box:hover {

    transform:
        translateY(-3px);

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

}


/* ==========================================================
   ANIMASI BLOK
========================================================== */

@keyframes profileAboutReveal {

    from {

        opacity: 0;

        transform:
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ==========================================================
   ANIMASI BACKGROUND
========================================================== */

@keyframes profileAboutFloat {

    0%,
    100% {

        transform:
            translate(0,0);

    }

    50% {

        transform:
            translate(-25px,20px);

    }

}


/* ==========================================================
   ANIMASI GARIS
========================================================== */

@keyframes profileAccentMove {

    0%,
    100% {

        width: 60px;

    }

    50% {

        width: 90px;

    }

}


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

@media (max-width: 900px) {

    .profile-page .profile-about {

        padding: 60px 0;

    }


    .profile-page .profile-about-box {

        max-width: 100%;

        padding: 38px 35px;

    }

}


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

@media (max-width: 600px) {

    .profile-page .profile-about {

        padding: 45px 0 55px;

    }


    .profile-page .profile-about-box {

        padding: 32px 24px;

        border-radius: 14px;

    }


    .profile-page .profile-about-kicker {

        font-size: 9px;

        letter-spacing: 1.5px;

    }


    .profile-page .profile-about-title {

        font-size: 22px;

        line-height: 1.3;

    }


    .profile-page .profile-about-accent {

        margin-top: 15px;

        margin-bottom: 20px;

    }


    .profile-page .profile-about-content p {

        font-size: 13px;

        line-height: 1.8;

        text-align: left;

    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .profile-page .profile-about *,
    .profile-page .profile-about::before {

        animation: none !important;

        transition: none !important;

    }

}
/* ==========================================================
   PROFIL SEKOLAH
   MODERN GOVERNMENT STYLE
========================================================== */

.profile-about{

    position:relative;

    padding:90px 0 110px;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 55%,
            #f5f8fb 100%
        );

    overflow:hidden;

}


/* ==========================================================
   AKSEN BACKGROUND
========================================================== */

.profile-about::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-180px;
    top:-160px;

    background:
        radial-gradient(
            circle,
            rgba(15,76,129,.10) 0%,
            rgba(15,76,129,.04) 45%,
            transparent 72%
        );

    border-radius:50%;

    animation:
        profileFloat 8s ease-in-out infinite;

}


.profile-about::after{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    left:-150px;
    bottom:-130px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(244,197,66,.10),
            transparent 70%
        );

    animation:
        profileFloatReverse 10s ease-in-out infinite;

}


/* ==========================================================
   CONTAINER
========================================================== */

.profile-about .container{

    position:relative;

    z-index:2;

    max-width:1200px;

    margin:auto;

    padding:0 24px;

}


/* ==========================================================
   HEADER
========================================================== */

.profile-about-header{

    text-align:center;

    max-width:900px;

    margin:0 auto 55px;

}


/* ==========================================================
   KICKER
========================================================== */

.profile-kicker{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:9px 20px;

    border-radius:50px;

    background:#ffffff;

    border:1px solid #e3eaf1;

    color:#0F4C81;

    font-size:13px;

    font-weight:800;

    letter-spacing:1.3px;

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

}


.profile-kicker::before{

    content:"";

    width:9px;
    height:9px;

    border-radius:50%;

    background:#0F4C81;

    box-shadow:
        0 0 0 5px rgba(15,76,129,.10);

}


/* ==========================================================
   JUDUL
========================================================== */

.profile-about-header h2{

    margin:22px 0 16px;

    color:#123B63;

    font-size:clamp(
        34px,
        5vw,
        58px
    );

    line-height:1.05;

    font-weight:900;

    letter-spacing:-1.8px;

    text-transform:uppercase;

}


/* ==========================================================
   GARIS JUDUL
========================================================== */

.profile-title-line{

    width:130px;

    height:4px;

    margin:auto;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            #0F4C81,
            #2FA7DF,
            #F4C542
        );

    animation:
        lineMove 3s ease-in-out infinite;

}


/* ==========================================================
   GRID FOTO + NARASI
========================================================== */

.profile-about-grid{

    display:grid;

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

    align-items:center;

    gap:75px;

}


/* ==========================================================
   FOTO
========================================================== */

.profile-about-image{

    position:relative;

    min-height:470px;

    display:flex;

    align-items:center;

    justify-content:center;

}


/* frame dekorasi */

.profile-about-image::before{

    content:"";

    position:absolute;

    width:86%;

    height:88%;

    border:2px solid rgba(15,76,129,.15);

    transform:
        rotate(-3deg);

    border-radius:20px;

    animation:
        imageFrame 7s ease-in-out infinite;

}


/* ==========================================================
   GAMBAR
========================================================== */

.profile-about-image img{

    position:relative;

    z-index:2;

    width:88%;

    height:450px;

    object-fit:cover;

    border-radius:18px;

    box-shadow:
        0 25px 60px
        rgba(20,50,80,.18);

    transition:
        transform .5s ease,
        box-shadow .5s ease;

}


.profile-about-image:hover img{

    transform:
        translateY(-8px)
        scale(1.015);

    box-shadow:
        0 35px 75px
        rgba(15,76,129,.22);

}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.profile-image-placeholder{

    position:relative;

    z-index:2;

    width:88%;

    height:450px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:15px;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            #eef4f8,
            #ffffff
        );

    border:1px solid #dce6ee;

    color:#0F4C81;

    box-shadow:
        0 25px 60px
        rgba(20,50,80,.12);

}


.profile-image-placeholder i{

    font-size:55px;

}


.profile-image-placeholder span{

    font-size:12px;

    font-weight:800;

    letter-spacing:1.5px;

}


/* ==========================================================
   NARASI
========================================================== */

.profile-about-content{

    position:relative;

    padding-left:30px;

    border-left:4px solid transparent;

    border-image:
        linear-gradient(
            180deg,
            #0F4C81,
            #2FA7DF,
            #F4C542
        ) 1;

}


.profile-about-content p{

    margin:0;

    color:#536B80;

    font-size:18px;

    line-height:2;

    font-weight:500;

    text-align:left;

}


.profile-about-content p::first-letter{

    color:#0F4C81;

    font-size:42px;

    font-weight:900;

    float:left;

    line-height:.8;

    margin-right:5px;

}


/* ==========================================================
   ANIMASI
========================================================== */

@keyframes profileFloat{

    0%,
    100%{

        transform:
            translate(0,0);

    }

    50%{

        transform:
            translate(-25px,25px);

    }

}


@keyframes profileFloatReverse{

    0%,
    100%{

        transform:
            translate(0,0);

    }

    50%{

        transform:
            translate(25px,-20px);

    }

}


@keyframes lineMove{

    0%,
    100%{

        width:90px;

    }

    50%{

        width:150px;

    }

}


@keyframes imageFrame{

    0%,
    100%{

        transform:
            rotate(-3deg)
            translateY(0);

    }

    50%{

        transform:
            rotate(2deg)
            translateY(-8px);

    }

}


/* ==========================================================
   TABLE / KOMPONEN LAMA
   SEMBUNYIKAN
========================================================== */

.profile-page table,
.profile-page .school-data-grid,
.profile-page .school-data-section,
.profile-page .profile-identity-grid,
.profile-page .profile-data{

    display:none !important;

}


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

@media (max-width:991px){

    .profile-about{

        padding:70px 0 80px;

    }


    .profile-about-grid{

        grid-template-columns:1fr;

        gap:45px;

    }


    .profile-about-image{

        min-height:400px;

    }


    .profile-about-image img,
    .profile-image-placeholder{

        width:90%;

        height:390px;

    }


    .profile-about-content{

        padding-left:24px;

    }

}


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

@media (max-width:600px){

    .profile-about{

        padding:55px 0 65px;

    }


    .profile-about .container{

        padding:0 18px;

    }


    .profile-about-header{

        margin-bottom:35px;

    }


    .profile-about-header h2{

        font-size:30px;

        letter-spacing:-.8px;

    }


    .profile-kicker{

        font-size:11px;

        padding:8px 15px;

    }


    .profile-about-grid{

        gap:30px;

    }


    .profile-about-image{

        min-height:300px;

    }


    .profile-about-image::before{

        width:90%;

        height:90%;

    }


    .profile-about-image img,
    .profile-image-placeholder{

        width:92%;

        height:300px;

    }


    .profile-about-content{

        padding-left:18px;

        border-left-width:3px;

    }


    .profile-about-content p{

        font-size:15px;

        line-height:1.8;

    }


    .profile-about-content p::first-letter{

        font-size:34px;

    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .profile-about *,
    .profile-about::before,
    .profile-about::after{

        animation:none !important;

        transition:none !important;

    }

}
/* ==========================================================
   PROFIL SEKOLAH
   MODERN GOVERNMENT - CLEAN & ELEGANT
========================================================== */

.profile-about{

    position:relative;

    padding:70px 0 85px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(247,250,252,.96),
            rgba(255,255,255,.98)
        );

}


/* ==========================================================
   BACKGROUND FOTO SEKOLAH
========================================================== */

.profile-about::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            90deg,
            rgba(248,250,252,.97) 0%,
            rgba(248,250,252,.88) 45%,
            rgba(255,255,255,.80) 100%
        ),
        url("https://file.data.kemendikdasmen.go.id/sekolahkita/70/7003/70034955-2.jpg");

    background-size:cover;

    background-position:center;

    opacity:.14;

    filter:
        saturate(.75)
        blur(1px);

    transform:scale(1.05);

    animation:
        profileBackgroundMove 18s ease-in-out infinite alternate;

}


/* ==========================================================
   AKSEN CAHAYA
========================================================== */

.profile-about::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-230px;
    top:-250px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(15,76,129,.10),
            rgba(15,76,129,.03) 45%,
            transparent 70%
        );

    animation:
        profileGlow 8s ease-in-out infinite;

}


/* ==========================================================
   CONTAINER
========================================================== */

.profile-about .container{

    position:relative;

    z-index:3;

    max-width:1200px;

    margin:auto;

    padding-left:24px;
    padding-right:24px;

}


/* ==========================================================
   HEADER
========================================================== */

.profile-about-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 45px;

}


/* ==========================================================
   LABEL
========================================================== */

.profile-kicker{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:8px 17px;

    border-radius:50px;

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

    border:1px solid
        rgba(15,76,129,.12);

    color:#0F4C81;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.4px;

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

}


/* titik */

.profile-kicker::before{

    content:"";

    width:7px;
    height:7px;

    border-radius:50%;

    background:#0F4C81;

    box-shadow:
        0 0 0 5px
        rgba(15,76,129,.08);

}


/* ==========================================================
   JUDUL DIPERKECIL
========================================================== */

.profile-about-header h2{

    margin:18px 0 13px;

    color:#123B63;

    font-size:clamp(
        28px,
        3.5vw,
        42px
    );

    line-height:1.15;

    font-weight:850;

    letter-spacing:-.8px;

    text-transform:uppercase;

}


/* ==========================================================
   GARIS JUDUL
========================================================== */

.profile-title-line{

    width:85px;

    height:3px;

    margin:auto;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #0F4C81,
            #2E9BD2,
            #D8B43C
        );

    animation:
        titleLineMove 3s ease-in-out infinite;

}


/* ==========================================================
   FOTO + NARASI
========================================================== */

.profile-about-grid{

    display:grid;

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

    align-items:center;

    gap:65px;

}


/* ==========================================================
   AREA FOTO
========================================================== */

.profile-about-image{

    position:relative;

    width:100%;

    min-height:430px;

    display:flex;

    align-items:center;

    justify-content:center;

}


/* ==========================================================
   BINGKAI BERCak / ORGANIC
========================================================== */

.profile-about-image::before{

    content:"";

    position:absolute;

    width:82%;

    height:82%;

    border:2px solid
        rgba(15,76,129,.20);

    border-radius:
        42% 58% 57% 43%
        /
        47% 43% 57% 53%;

    transform:
        rotate(-5deg);

    animation:
        organicFrame 9s ease-in-out infinite;

}


/* frame kedua */

.profile-about-image::after{

    content:"";

    position:absolute;

    width:76%;

    height:76%;

    border:1px dashed
        rgba(212,175,55,.40);

    border-radius:
        55% 45% 42% 58%
        /
        50% 56% 44% 50%;

    transform:
        rotate(5deg);

    animation:
        organicFrameReverse 11s ease-in-out infinite;

}


/* ==========================================================
   FOTO UTAMA
========================================================== */

.profile-about-image img{

    position:relative;

    z-index:3;

    width:84%;

    height:410px;

    object-fit:cover;

    border-radius:
        46% 54% 48% 52%
        /
        52% 45% 55% 48%;

    border:8px solid
        rgba(255,255,255,.95);

    box-shadow:
        0 25px 60px
        rgba(15,76,129,.18);

    transition:
        transform .5s ease,
        box-shadow .5s ease;

}


/* hover */

.profile-about-image:hover img{

    transform:
        scale(1.025)
        translateY(-6px);

    box-shadow:
        0 35px 75px
        rgba(15,76,129,.25);

}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.profile-image-placeholder{

    position:relative;

    z-index:3;

    width:84%;

    height:410px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    border-radius:
        46% 54% 48% 52%
        /
        52% 45% 55% 48%;

    background:
        linear-gradient(
            145deg,
            #edf4f8,
            #ffffff
        );

    border:8px solid #fff;

    color:#0F4C81;

    box-shadow:
        0 25px 60px
        rgba(15,76,129,.15);

}


.profile-image-placeholder i{

    font-size:48px;

}


.profile-image-placeholder span{

    font-size:11px;

    font-weight:800;

    letter-spacing:1.4px;

}


/* ==========================================================
   NARASI
========================================================== */

.profile-about-content{

    position:relative;

    padding-left:25px;

    border-left:3px solid transparent;

    border-image:
        linear-gradient(
            180deg,
            #0F4C81,
            #2E9BD2,
            #D8B43C
        ) 1;

}


/* ==========================================================
   PARAGRAF
========================================================== */

.profile-about-content p{

    margin:0;

    max-width:570px;

    color:#52697D;

    font-size:17px;

    line-height:1.95;

    font-weight:500;

    text-align:left;

}


/* ==========================================================
   HURUF AWAL NARASI
========================================================== */

.profile-about-content p::first-letter{

    color:#0F4C81;

    font-size:39px;

    font-weight:900;

    float:left;

    line-height:.85;

    margin-right:5px;

}


/* ==========================================================
   SEMBUNYIKAN TABEL / KOMPONEN LAMA
========================================================== */

.profile-page table,
.profile-page .school-data-grid,
.profile-page .school-data-section,
.profile-page .profile-identity-section,
.profile-page .profile-identity-grid,
.profile-page .profile-data{

    display:none !important;

}


/* ==========================================================
   ANIMASI BACKGROUND
========================================================== */

@keyframes profileBackgroundMove{

    0%{

        background-position:
            center center;

    }

    100%{

        background-position:
            55% 45%;

    }

}


/* ==========================================================
   ANIMASI CAHAYA
========================================================== */

@keyframes profileGlow{

    0%,
    100%{

        transform:
            translate(0,0)
            scale(1);

    }

    50%{

        transform:
            translate(-25px,25px)
            scale(1.08);

    }

}


/* ==========================================================
   ANIMASI BINGKAI BERCak
========================================================== */

@keyframes organicFrame{

    0%,
    100%{

        transform:
            rotate(-5deg)
            scale(1);

    }

    50%{

        transform:
            rotate(-1deg)
            scale(1.025);

    }

}


@keyframes organicFrameReverse{

    0%,
    100%{

        transform:
            rotate(5deg)
            scale(1);

    }

    50%{

        transform:
            rotate(9deg)
            scale(.98);

    }

}


/* ==========================================================
   ANIMASI GARIS
========================================================== */

@keyframes titleLineMove{

    0%,
    100%{

        width:70px;

    }

    50%{

        width:115px;

    }

}


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

@media (max-width:991px){

    .profile-about{

        padding:60px 0 75px;

    }


    .profile-about-grid{

        grid-template-columns:1fr;

        gap:45px;

    }


    .profile-about-image{

        min-height:390px;

    }


    .profile-about-image img,
    .profile-image-placeholder{

        width:80%;

        height:370px;

    }


    .profile-about-content{

        max-width:750px;

        margin:auto;

    }

}


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

@media (max-width:600px){

    .profile-about{

        padding:50px 0 60px;

    }


    .profile-about .container{

        padding:
            0 18px;

    }


    .profile-about-header{

        margin-bottom:32px;

    }


    .profile-about-header h2{

        font-size:27px;

        letter-spacing:-.5px;

    }


    .profile-kicker{

        font-size:10px;

        padding:7px 14px;

    }


    .profile-about-grid{

        gap:30px;

    }


    .profile-about-image{

        min-height:290px;

    }


    .profile-about-image::before{

        width:82%;

        height:82%;

    }


    .profile-about-image::after{

        width:76%;

        height:76%;

    }


    .profile-about-image img,
    .profile-image-placeholder{

        width:82%;

        height:280px;

        border-width:6px;

    }


    .profile-about-content{

        padding-left:17px;

    }


    .profile-about-content p{

        font-size:15px;

        line-height:1.8;

    }


    .profile-about-content p::first-letter{

        font-size:33px;

    }

}


/* ==========================================================
   MATIKAN ANIMASI JIKA USER MEMILIH REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .profile-about::before,
    .profile-about::after,
    .profile-about-image::before,
    .profile-about-image::after,
    .profile-title-line{

        animation:none !important;

    }

}
/* ==========================================================
   PROFIL SEKOLAH — MODERN PEMERINTAH
   OVERRIDE CSS LAMA
========================================================== */

.profile-about{
    position:relative;
    padding:80px 0;
    overflow:hidden;

    /* background lembut */
    background:
        linear-gradient(
            135deg,
            rgba(245,249,252,.98),
            rgba(255,255,255,.96)
        );
}


/* ----------------------------------------------------------
   BACKGROUND AKSEN
---------------------------------------------------------- */

.profile-about::before{
    content:"";
    position:absolute;

    width:420px;
    height:420px;

    top:-180px;
    right:-120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(15,76,129,.12) 0%,
            rgba(15,76,129,.04) 45%,
            transparent 70%
        );

    pointer-events:none;
}

.profile-about::after{
    content:"";

    position:absolute;

    width:260px;
    height:260px;

    bottom:-140px;
    left:-100px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(244,197,66,.15),
            transparent 70%
        );

    pointer-events:none;
}


/* ----------------------------------------------------------
   CONTAINER
---------------------------------------------------------- */

.profile-about .container{
    position:relative;
    z-index:2;

    max-width:1200px;
}


/* ----------------------------------------------------------
   BOX UTAMA
---------------------------------------------------------- */

.profile-about-box{

    position:relative;

    display:grid;

    grid-template-columns:
        minmax(280px, .8fr)
        minmax(400px, 1.2fr);

    gap:70px;

    align-items:center;

    padding:65px 70px;

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

    border:1px solid rgba(15,76,129,.10);

    border-radius:24px;

    box-shadow:
        0 20px 55px rgba(15,42,70,.10);

    overflow:hidden;

    animation:
        profileBoxIn .8s ease both;
}


/* garis atas dua warna */

.profile-about-box::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:4px;

    background:
        linear-gradient(
            90deg,
            #0F4C81 0%,
            #1B6CA8 55%,
            #D4AF37 100%
        );
}


/* aksen kiri */

.profile-about-box::after{

    content:"";

    position:absolute;

    left:0;
    top:55px;

    width:4px;
    height:150px;

    background:
        linear-gradient(
            180deg,
            #0F4C81,
            #D4AF37
        );

    border-radius:
        0 5px 5px 0;

    opacity:.9;
}


/* ----------------------------------------------------------
   BAGIAN KIRI
---------------------------------------------------------- */

.profile-about-heading{

    position:relative;

    display:flex;

    align-items:center;

    gap:22px;

    z-index:3;
}


/* ICON */

.profile-about-icon{

    flex:0 0 68px;

    width:68px;
    height:68px;

    display:flex;

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

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            #F4F8FC,
            #FFFFFF
        );

    border:1px solid rgba(15,76,129,.12);

    box-shadow:
        0 10px 25px rgba(15,76,129,.10);
}


.profile-about-icon i{

    font-size:28px;

    color:#0F4C81;

    animation:
        iconFloat 3s ease-in-out infinite;
}


/* LABEL */

.profile-about-heading .section-kicker{

    display:inline-flex;

    align-items:center;

    gap:9px;

    margin-bottom:10px;

    font-size:12px;

    font-weight:800;

    letter-spacing:1.8px;

    color:#0F6EA8;

}


/* titik label */

.profile-about-heading .section-kicker::before{

    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:#D4AF37;

    box-shadow:
        0 0 0 5px rgba(212,175,55,.12);
}


/* ----------------------------------------------------------
   JUDUL
---------------------------------------------------------- */

.profile-about-heading h2{

    margin:0;

    max-width:360px;

    font-size:34px;

    line-height:1.15;

    font-weight:800;

    letter-spacing:-.8px;

    color:#17324D;

    text-transform:uppercase;
}


/* ----------------------------------------------------------
   NARASI
---------------------------------------------------------- */

.profile-about-content{

    position:relative;

    z-index:3;

    padding-left:20px;

    border-left:1px solid rgba(15,76,129,.12);
}


.profile-about-content p{

    margin:0;

    max-width:650px;

    font-size:17px;

    line-height:1.9;

    color:#52677B;

    text-align:justify;

    font-weight:450;

    letter-spacing:.1px;
}


/* huruf pertama */

.profile-about-content p::first-letter{

    font-size:30px;

    font-weight:800;

    color:#0F4C81;
}


/* ----------------------------------------------------------
   GARIS AKSEN
---------------------------------------------------------- */

.profile-about-line{

    position:absolute;

    left:70px;
    bottom:35px;

    width:120px;
    height:3px;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            #0F4C81 0%,
            #1B6CA8 65%,
            #D4AF37 100%
        );
}


/* ----------------------------------------------------------
   ANIMASI
---------------------------------------------------------- */

@keyframes profileBoxIn{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


@keyframes iconFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-5px);
    }

}


/* ==========================================================
   JIKA FOTO PROFIL ADA
   BINGKAI BERCak 2 WARNA
========================================================== */

.profile-photo,
.profile-image,
.profile-about-photo{

    position:relative;

    display:inline-block;

    padding:14px;

    z-index:2;
}


/* bingkai biru */

.profile-photo::before,
.profile-image::before,
.profile-about-photo::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            #0F4C81 0%,
            #1B6CA8 48%,
            #D4AF37 100%
        );

    z-index:-2;

    transform:
        rotate(-3deg);
}


/* bercak warna kedua */

.profile-photo::after,
.profile-image::after,
.profile-about-photo::after{

    content:"";

    position:absolute;

    width:90px;
    height:90px;

    right:-20px;
    bottom:-18px;

    border-radius:
        55% 45% 60% 40%;

    background:
        radial-gradient(
            circle at 30% 30%,
            #D4AF37 0 20%,
            #F4C542 21% 45%,
            transparent 46%
        );

    opacity:.85;

    z-index:-1;

    animation:
        blobMove 5s ease-in-out infinite;
}


/* gambar */

.profile-photo img,
.profile-image img,
.profile-about-photo img{

    display:block;

    width:100%;
    height:auto;

    border-radius:22px;

    object-fit:cover;

    border:6px solid #fff;

    box-shadow:
        0 18px 40px rgba(15,42,70,.18);
}


/* animasi bercak */

@keyframes blobMove{

    0%,
    100%{
        transform:
            translate(0,0)
            rotate(0deg);
    }

    50%{
        transform:
            translate(-8px,-8px)
            rotate(8deg);
    }

}


/* ==========================================================
   HOVER
========================================================== */

.profile-about-box{

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


.profile-about-box:hover{

    transform:translateY(-5px);

    box-shadow:
        0 28px 65px rgba(15,42,70,.14);
}


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

@media(max-width:900px){

    .profile-about{

        padding:55px 0;

    }


    .profile-about-box{

        grid-template-columns:1fr;

        gap:35px;

        padding:45px 30px;

        border-radius:20px;

    }


    .profile-about-heading h2{

        font-size:28px;

    }


    .profile-about-content{

        padding-left:0;

        border-left:0;

        padding-top:5px;

    }


    .profile-about-content p{

        font-size:16px;

        line-height:1.8;

        text-align:left;

    }


    .profile-about-line{

        left:30px;

        bottom:25px;

    }

}


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

@media(max-width:576px){

    .profile-about{

        padding:40px 0;

    }


    .profile-about-box{

        padding:35px 22px;

        gap:28px;

    }


    .profile-about-heading{

        gap:15px;

        align-items:flex-start;

    }


    .profile-about-icon{

        flex:0 0 55px;

        width:55px;
        height:55px;

        border-radius:15px;

    }


    .profile-about-icon i{

        font-size:23px;

    }


    .profile-about-heading h2{

        font-size:23px;

        line-height:1.2;

        letter-spacing:-.4px;

    }


    .profile-about-heading .section-kicker{

        font-size:10px;

        letter-spacing:1.3px;

    }


    .profile-about-content p{

        font-size:15px;

        line-height:1.75;

    }


    .profile-about-line{

        left:22px;

        width:90px;

    }

}
/* ==========================================================
   PROFIL SEKOLAH — FINAL MODERN PEMERINTAH
   KHUSUS UNTUK HTML PROFILE-ABOUT TERBARU
========================================================== */


/* ==========================================================
   SECTION UTAMA
========================================================== */

.profile-about{
    position:relative !important;

    padding:70px 0 90px !important;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(15,76,129,.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(244,197,66,.07),
            transparent 30%
        ),
        #f5f8fb !important;

    overflow:hidden !important;
}


/* dekorasi background */

.profile-about::before{
    content:"" !important;

    position:absolute !important;

    width:500px !important;
    height:500px !important;

    right:-250px !important;
    top:-250px !important;

    border-radius:50% !important;

    border:
        1px solid rgba(15,76,129,.08) !important;

    box-shadow:
        0 0 0 60px rgba(15,76,129,.025),
        0 0 0 120px rgba(15,76,129,.018) !important;

    animation:
        profileBgMove 10s ease-in-out infinite !important;

    pointer-events:none !important;
}


.profile-about::after{
    content:"" !important;

    position:absolute !important;

    width:260px !important;
    height:260px !important;

    left:-130px !important;
    bottom:-130px !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(244,197,66,.12),
            transparent 70%
        ) !important;

    animation:
        profileBgMove2 8s ease-in-out infinite !important;

    pointer-events:none !important;
}


/* ==========================================================
   CONTAINER
========================================================== */

.profile-about .container{
    position:relative !important;

    z-index:5 !important;

    max-width:1180px !important;

    margin:0 auto !important;
}


/* ==========================================================
   HEADER
========================================================== */

.profile-about-header{
    position:relative !important;

    text-align:center !important;

    max-width:850px !important;

    margin:0 auto 50px !important;

    z-index:10 !important;
}


/* ==========================================================
   LABEL
========================================================== */

.profile-about .profile-kicker{
    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:9px !important;

    padding:8px 16px !important;

    margin-bottom:14px !important;

    background:#ffffff !important;

    border:
        1px solid rgba(15,76,129,.12) !important;

    border-radius:50px !important;

    color:#0F4C81 !important;

    font-size:11px !important;

    font-weight:800 !important;

    letter-spacing:1.5px !important;

    text-transform:uppercase !important;

    opacity:1 !important;

    box-shadow:
        0 8px 25px rgba(15,76,129,.07) !important;
}


/* titik emas */

.profile-about .profile-kicker::before{
    content:"" !important;

    width:8px !important;
    height:8px !important;

    min-width:8px !important;

    border-radius:50% !important;

    background:#F4C542 !important;

    box-shadow:
        0 0 0 4px rgba(244,197,66,.13) !important;

    animation:
        profilePulse 2s ease-in-out infinite !important;
}


/* ==========================================================
   JUDUL
========================================================== */

.profile-about-header h2{
    margin:0 !important;

    padding:0 !important;

    color:#123f68 !important;

    font-size:clamp(
        27px,
        3.5vw,
        42px
    ) !important;

    line-height:1.15 !important;

    font-weight:800 !important;

    letter-spacing:-1px !important;

    text-transform:uppercase !important;
}


/* ==========================================================
   GARIS JUDUL
========================================================== */

.profile-title-line{
    width:75px !important;

    height:4px !important;

    margin:18px auto 0 !important;

    border-radius:10px !important;

    background:
        linear-gradient(
            90deg,
            #0F4C81 0%,
            #1685c7 55%,
            #F4C542 100%
        ) !important;

    animation:
        profileLineMove 3s ease-in-out infinite !important;
}


/* ==========================================================
   GRID FOTO + NARASI
========================================================== */

.profile-about-grid{
    position:relative !important;

    display:grid !important;

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

    align-items:center !important;

    gap:75px !important;

    max-width:1100px !important;

    margin:0 auto !important;

    z-index:10 !important;
}


/* ==========================================================
   FOTO SEKOLAH
========================================================== */

.profile-about-image{
    position:relative !important;

    width:390px !important;

    height:390px !important;

    margin:auto !important;

    border-radius:50% !important;

    overflow:visible !important;

    background:#ffffff !important;

    padding:10px !important;

    box-shadow:
        0 25px 55px rgba(15,76,129,.16) !important;

    animation:
        schoolPhotoFloat 5s ease-in-out infinite !important;
}


/* FOTO */

.profile-about-image img{
    display:block !important;

    width:100% !important;

    height:100% !important;

    object-fit:cover !important;

    border-radius:50% !important;

    border:5px solid #ffffff !important;

    box-sizing:border-box !important;
}


/* ==========================================================
   BINGKAI BERCak / AKSEN WARNA
========================================================== */

.profile-about-image::before{
    content:"" !important;

    position:absolute !important;

    inset:-15px !important;

    z-index:-1 !important;

    border-radius:48% 52% 55% 45% /
                   52% 46% 54% 48% !important;

    border:
        3px solid #0F4C81 !important;

    animation:
        photoBorderMove 8s ease-in-out infinite !important;
}


/* BINGKAI KEDUA */

.profile-about-image::after{
    content:"" !important;

    position:absolute !important;

    width:90px !important;
    height:90px !important;

    right:-28px !important;
    bottom:20px !important;

    z-index:-2 !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(244,197,66,.85) 0 18%,
            rgba(244,197,66,.25) 19% 40%,
            transparent 41%
        ) !important;

    opacity:.9 !important;

    animation:
        accentMove 4s ease-in-out infinite !important;
}


/* ==========================================================
   PLACEHOLDER FOTO
========================================================== */

.profile-image-placeholder{
    width:100% !important;
    height:100% !important;

    border-radius:50% !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;

    gap:10px !important;

    background:
        linear-gradient(
            145deg,
            #eef5fa,
            #ffffff
        ) !important;

    color:#0F4C81 !important;

    border:5px solid #ffffff !important;

    box-sizing:border-box !important;
}


.profile-image-placeholder i{
    font-size:48px !important;
}


.profile-image-placeholder span{
    font-size:11px !important;

    font-weight:800 !important;

    letter-spacing:1.5px !important;
}


/* ==========================================================
   NARASI
========================================================== */

.profile-about-content{
    position:relative !important;

    max-width:650px !important;

    padding-left:28px !important;

    border-left:
        3px solid #0F4C81 !important;
}


/* aksen emas kecil */

.profile-about-content::before{
    content:"" !important;

    position:absolute !important;

    left:-3px !important;

    top:0 !important;

    width:3px !important;

    height:65px !important;

    background:#F4C542 !important;
}


/* PARAGRAF */

.profile-about-content p{
    margin:0 !important;

    color:#52687b !important;

    font-size:17px !important;

    line-height:1.95 !important;

    font-weight:500 !important;

    text-align:left !important;

    letter-spacing:.1px !important;
}


/* HURUF PERTAMA */

.profile-about-content p::first-letter{
    color:#0F4C81 !important;

    font-size:30px !important;

    font-weight:800 !important;
}


/* ==========================================================
   HILANGKAN GARIS LAMA JIKA ADA
========================================================== */

.profile-about-line{
    display:none !important;
}


/* ==========================================================
   ANIMASI
========================================================== */

@keyframes profileBgMove{

    0%{
        transform:translate(0,0) rotate(0deg);
    }

    50%{
        transform:translate(-25px,20px) rotate(8deg);
    }

    100%{
        transform:translate(0,0) rotate(0deg);
    }

}


@keyframes profileBgMove2{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(25px,-20px);
    }

    100%{
        transform:translate(0,0);
    }

}


@keyframes profilePulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.3);
    }

    100%{
        transform:scale(1);
    }

}


@keyframes profileLineMove{

    0%{
        width:65px;
    }

    50%{
        width:105px;
    }

    100%{
        width:65px;
    }

}


@keyframes schoolPhotoFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }

}


@keyframes photoBorderMove{

    0%{
        transform:rotate(0deg);
        border-radius:48% 52% 55% 45% /
                       52% 46% 54% 48%;
    }

    50%{
        transform:rotate(5deg);
        border-radius:54% 46% 48% 52% /
                       45% 54% 46% 55%;
    }

    100%{
        transform:rotate(0deg);
        border-radius:48% 52% 55% 45% /
                       52% 46% 54% 48%;
    }

}


@keyframes accentMove{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(8px,-10px);
    }

    100%{
        transform:translate(0,0);
    }

}


/* ==========================================================
   TABLE / BAGIAN LAMA — SEMBUNYIKAN
========================================================== */

.profile-identity-section,
.profile-values-section,
.profile-navigation-section,
.profile-contact-section,
.school-data-section,
.school-data-grid{
    display:none !important;
}


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

@media(max-width:900px){

    .profile-about{
        padding:55px 0 70px !important;
    }

    .profile-about-grid{
        grid-template-columns:1fr !important;

        gap:50px !important;
    }

    .profile-about-image{
        width:340px !important;
        height:340px !important;
    }

    .profile-about-content{
        max-width:800px !important;

        margin:auto !important;
    }

}


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

@media(max-width:600px){

    .profile-about{
        padding:40px 15px 60px !important;
    }

    .profile-about-header{
        margin-bottom:35px !important;
    }

    .profile-about-header h2{
        font-size:26px !important;
    }

    .profile-about-grid{
        gap:38px !important;
    }

    .profile-about-image{
        width:270px !important;
        height:270px !important;
    }

    .profile-about-content{
        padding-left:20px !important;
    }

    .profile-about-content p{
        font-size:15px !important;

        line-height:1.8 !important;
    }

}


/* ==========================================================
   HP SANGAT KECIL
========================================================== */

@media(max-width:400px){

    .profile-about-image{
        width:235px !important;
        height:235px !important;
    }

    .profile-about-header h2{
        font-size:23px !important;
    }

    .profile-about-content p{
        font-size:14px !important;
    }

}
/*==========================================================
  HEADER PROFIL / VISI / MISI
==========================================================*/

.profile-about-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 55px;

}


/* LABEL */

.profile-about-header .profile-kicker{

    display:inline-block;

    margin-bottom:14px;

    font-size:12px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}


/* JUDUL */

.profile-about-header h2{

    margin:0;

    font-size:clamp(
        30px,
        4vw,
        46px
    );

    line-height:1.2;

    font-weight:700;

}


/* GARIS */

.profile-title-line{

    width:70px;

    height:3px;

    margin:22px auto 0;

    border-radius:10px;

    background:currentColor;

}
/* ==========================================================
   VISI CONTENT
========================================================== */

.vision-content{

    display:flex;

    flex-direction:column;

    width:100%;

}


/* ==========================================================
   JUDUL VISI
========================================================== */

.vision-heading{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:30px;

}


/* ICON VISI */

.vision-icon{

    width:58px;

    height:58px;

    min-width:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    border:2px solid #0F4C81;

    color:#0F4C81;

    font-size:25px;

}


/* LABEL KECIL */

.vision-heading small{

    display:block;

    font-size:13px;

    font-weight:800;

    letter-spacing:2px;

    color:#0F4C81;

    margin-bottom:5px;

}


/* JUDUL */

.vision-heading h2{

    margin:0;

    font-size:28px;

    line-height:1.2;

    font-weight:800;

    color:#123F67;

}


/* ==========================================================
   PERNYATAAN VISI
========================================================== */

.vision-statement{

    position:relative;

    margin-left:0;

    padding-left:30px;

    border-left:3px solid #F4C542;

}


.vision-statement p{

    margin:0;

    font-size:22px;

    line-height:1.8;

    font-weight:600;

    color:#526B82;

}


/* ==========================================================
   TANDA KUTIP
========================================================== */

.quote-mark{

    display:none;

}


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

@media(max-width:991px){

    .vision-heading{

        gap:14px;

    }

    .vision-heading h2{

        font-size:24px;

    }

    .vision-statement{

        padding-left:22px;

    }

    .vision-statement p{

        font-size:19px;

        line-height:1.7;

    }

}


@media(max-width:600px){

    .vision-heading{

        align-items:flex-start;

    }

    .vision-icon{

        width:48px;

        height:48px;

        min-width:48px;

        font-size:20px;

    }

    .vision-heading h2{

        font-size:21px;

    }

    .vision-heading small{

        font-size:11px;

    }

    .vision-statement{

        padding-left:18px;

    }

    .vision-statement p{

        font-size:17px;

        line-height:1.7;

    }

}
/* ==========================================================
   OVERRIDE KHUSUS VISI
   Memindahkan "Visi SMP Negeri 2 Moyudan" ke ATAS
   TANPA MENGUBAH CSS LAMA
========================================================== */

.vision-page .vision-content{

    display:flex !important;

    flex-direction:column !important;

    width:100% !important;

    min-width:0 !important;

}


/* ==========================================================
   JUDUL VISI
========================================================== */

.vision-page .vision-heading{

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    width:100% !important;

    margin:0 0 28px 0 !important;

    padding:0 !important;

    gap:16px !important;

}


/* ==========================================================
   ICON VISI
========================================================== */

.vision-page .vision-icon{

    flex-shrink:0 !important;

}


/* ==========================================================
   BLOK TEKS JUDUL
========================================================== */

.vision-page .vision-heading > div{

    display:block !important;

    width:auto !important;

    flex:0 0 auto !important;

}


/* LABEL VISI */

.vision-page .vision-heading small{

    display:block !important;

    margin:0 0 5px 0 !important;

}


/* ==========================================================
   JUDUL
   Visi SMP Negeri 2 Moyudan
========================================================== */

.vision-page .vision-heading h2{

    display:block !important;

    margin:0 !important;

    padding:0 !important;

    white-space:normal !important;

    position:static !important;

}


/* ==========================================================
   TEKS PERNYATAAN VISI
   Dipaksa berada DI BAWAH judul
========================================================== */

.vision-page .vision-statement{

    display:block !important;

    width:100% !important;

    margin:0 !important;

    padding-left:30px !important;

    position:relative !important;

}


/* ==========================================================
   PARAGRAF VISI
========================================================== */

.vision-page .vision-statement p{

    display:block !important;

    width:100% !important;

    margin:0 !important;

}


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

@media(max-width:768px){

    .vision-page .vision-heading{

        margin-bottom:20px !important;

        gap:12px !important;

    }


    .vision-page .vision-heading h2{

        font-size:22px !important;

        line-height:1.3 !important;

    }


    .vision-page .vision-statement{

        padding-left:20px !important;

    }

}
/* ==========================================================
   SEJARAH SEKOLAH
   MODERN GOVERNMENT • MINIMALIS • PREMIUM
========================================================== */


/* ==========================================================
   VARIABLE KHUSUS SEJARAH
========================================================== */

.history-page{

    --gov-blue:#0F4C81;
    --gov-blue-dark:#0A3558;
    --gov-blue-light:#1B6CA8;

    --gov-gold:#D6A62E;
    --gov-gold-light:#F1D889;

    --gov-white:#FFFFFF;
    --gov-bg:#F5F7FA;
    --gov-soft:#EEF3F7;

    --gov-text:#17324D;
    --gov-muted:#667789;

    --gov-border:#E1E7ED;

    --gov-shadow:
        0 12px 35px
        rgba(15,76,129,.08);

    --gov-shadow-hover:
        0 20px 50px
        rgba(15,76,129,.15);

    background:
        var(--gov-bg);

    color:
        var(--gov-text);

}


/* ==========================================================
   GLOBAL
========================================================== */

.history-page *,
.history-page *::before,
.history-page *::after{

    box-sizing:border-box;

}


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

.history-hero{

    position:relative;

    min-height:
        430px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            var(--gov-blue-dark) 0%,
            var(--gov-blue) 55%,
            var(--gov-blue-light) 100%
        );

}


/* pola geometris pemerintah */

.history-hero::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-180px;
    top:-250px;

    border-radius:50%;

    border:
        80px solid
        rgba(255,255,255,.04);

}


.history-hero::after{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    left:-140px;
    bottom:-160px;

    border-radius:50%;

    background:
        rgba(214,166,46,.08);

}


/* ==========================================================
   HERO CONTENT
========================================================== */

.history-hero
.profile-hero-content{

    position:relative;

    z-index:3;

}


/* ==========================================================
   LOGO
========================================================== */

.history-hero .profile-logo{

    width:88px;
    height:88px;

    margin:
        0 auto 24px;

    display:flex;

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

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

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

    border-radius:18px;

    backdrop-filter:
        blur(10px);

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

}


.history-hero .profile-logo img{

    max-width:68px;
    max-height:68px;

    object-fit:contain;

}


.history-hero .profile-logo-default{

    width:100%;
    height:100%;

    display:flex;

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

    color:#fff;

    font-size:35px;

}


/* ==========================================================
   KICKER
========================================================== */

.history-hero .profile-kicker{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:15px;

    color:
        var(--gov-gold-light);

    font-size:11px;

    font-weight:800;

    letter-spacing:3px;

}


.history-hero .profile-kicker::before{

    content:"";

    width:28px;
    height:2px;

    background:
        var(--gov-gold);

}


/* ==========================================================
   HERO TITLE
========================================================== */

.history-hero h1{

    margin:0;

    color:#fff;

    font-size:
        clamp(
            38px,
            5vw,
            62px
        );

    line-height:1.08;

    font-weight:800;

    letter-spacing:-1px;

}


.history-hero p{

    max-width:720px;

    margin:
        22px auto 0;

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

    font-size:16px;

    line-height:1.8;

}


/* ==========================================================
   ABOUT SECTION
========================================================== */

.history-about{

    position:relative;

    padding:
        105px 0
        120px;

    background:
        var(--gov-bg);

}


/* ==========================================================
   ABOUT HEADER
========================================================== */

.history-about .profile-about-header{

    max-width:760px;

    margin:
        0 auto 75px;

    text-align:center;

}


.history-about .profile-kicker{

    color:
        var(--gov-blue);

    font-size:11px;

    font-weight:800;

    letter-spacing:2.5px;

}


.history-about h2{

    margin:
        12px 0;

    color:
        var(--gov-text);

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    line-height:1.2;

    font-weight:800;

}


.history-about .profile-title-line{

    width:55px;
    height:3px;

    margin:
        22px auto;

    background:
        var(--gov-gold);

    border-radius:20px;

}


.history-intro{

    max-width:650px;

    margin:
        15px auto 0;

    color:
        var(--gov-muted);

    font-size:15px;

    line-height:1.8;

}


/* ==========================================================
   TIMELINE
========================================================== */

.history-timeline{

    position:relative;

    max-width:1180px;

    margin:0 auto;

    padding:
        15px 0 30px;

}


/* ==========================================================
   TIMELINE LINE
========================================================== */

.history-line{

    position:absolute;

    top:0;
    bottom:0;

    left:50%;

    width:2px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--gov-blue),
            var(--gov-gold),
            var(--gov-blue),
            transparent
        );

    overflow:hidden;

}


/* animasi cahaya garis */

.history-line span{

    position:absolute;

    top:-120px;

    left:-2px;

    width:6px;

    height:120px;

    border-radius:20px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,.95),
            transparent
        );

    animation:
        historyLight
        4s
        linear
        infinite;

}


@keyframes historyLight{

    0%{

        top:-120px;

    }

    100%{

        top:100%;

    }

}


/* ==========================================================
   ITEM
========================================================== */

.history-item{

    position:relative;

    width:50%;

    padding:
        35px 65px;

}


.history-left{

    left:0;

    text-align:right;

}


.history-right{

    left:50%;

    text-align:left;

}


/* ==========================================================
   CARD
========================================================== */

.history-card{

    position:relative;

    width:100%;

    max-width:490px;

    display:inline-block;

    padding:32px;

    background:
        var(--gov-white);

    border:
        1px solid
        var(--gov-border);

    border-radius:16px;

    box-shadow:
        var(--gov-shadow);

    overflow:hidden;

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

}


.history-card:hover{

    transform:
        translateY(-7px);

    box-shadow:
        var(--gov-shadow-hover);

    border-color:
        rgba(15,76,129,.18);

}


/* ==========================================================
   GARIS ATAS CARD
========================================================== */

.history-card::after{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--gov-blue),
            var(--gov-gold)
        );

}


/* ==========================================================
   BERCak WARNA MINIMAL
========================================================== */

.history-blob{

    position:absolute;

    width:160px;
    height:160px;

    border-radius:50%;

    background:
        var(--history-color);

    opacity:.055;

    filter:blur(2px);

    pointer-events:none;

    transition:
        transform .5s ease;

}


.history-left .history-blob{

    right:-80px;
    top:-75px;

}


.history-right .history-blob{

    left:-80px;
    top:-75px;

}


.history-card:hover
.history-blob{

    transform:
        scale(1.25);

}


/* ==========================================================
   TAHUN
========================================================== */

.history-year{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:105px;

    padding:
        7px 17px;

    margin-bottom:18px;

    border-radius:6px;

    background:
        var(--gov-soft);

    color:
        var(--gov-blue);

    border-left:
        3px solid
        var(--gov-gold);

    font-size:13px;

    font-weight:800;

    letter-spacing:.5px;

}


/* ==========================================================
   ICON
========================================================== */

.history-card-icon{

    width:48px;
    height:48px;

    display:flex;

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

    margin-bottom:17px;

    border-radius:12px;

    background:
        rgba(15,76,129,.07);

    color:
        var(--gov-blue);

    font-size:20px;

    transition:
        transform .3s ease,
        background .3s ease;

}


.history-card:hover
.history-card-icon{

    transform:
        translateY(-3px);

    background:
        rgba(15,76,129,.12);

}


/* ==========================================================
   JUDUL
========================================================== */

.history-card h3{

    position:relative;

    margin:0;

    color:
        var(--gov-text);

    font-size:22px;

    line-height:1.35;

    font-weight:800;

}


/* ==========================================================
   GARIS CARD
========================================================== */

.history-card-line{

    width:42px;

    height:2px;

    margin:
        14px 0 17px;

    background:
        var(--gov-gold);

    border-radius:20px;

}


/* ==========================================================
   DESKRIPSI
========================================================== */

.history-card p{

    position:relative;

    margin:0;

    color:
        var(--gov-muted);

    font-size:14px;

    line-height:1.85;

}


/* ==========================================================
   FOTO
========================================================== */

.history-card-image{

    position:relative;

    margin-top:22px;

    overflow:hidden;

    border-radius:10px;

}


.history-card-image img{

    display:block;

    width:100%;

    height:220px;

    object-fit:cover;

    transition:
        transform .5s ease;

}


.history-card:hover
.history-card-image img{

    transform:
        scale(1.04);

}


/* ==========================================================
   DOT TIMELINE
========================================================== */

.history-dot{

    position:absolute;

    top:73px;

    width:30px;
    height:30px;

    display:flex;

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

    border-radius:50%;

    background:
        #fff;

    border:
        3px solid
        var(--gov-blue);

    z-index:10;

    box-shadow:
        0 0 0 7px
        rgba(15,76,129,.08),

        0 5px 20px
        rgba(15,76,129,.20);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.history-dot span{

    width:9px;
    height:9px;

    display:block;

    border-radius:50%;

    background:
        var(--gov-gold);

}


.history-item:hover
.history-dot{

    transform:
        scale(1.18);

    box-shadow:
        0 0 0 10px
        rgba(214,166,46,.10),

        0 8px 28px
        rgba(15,76,129,.28);

}


.history-left .history-dot{

    right:-15px;

}


.history-right .history-dot{

    left:-15px;

}


/* ==========================================================
   EMPTY
========================================================== */

.history-empty{

    max-width:620px;

    margin:
        20px auto;

    padding:
        70px 35px;

    text-align:center;

    background:#fff;

    border:
        1px solid
        var(--gov-border);

    border-radius:16px;

    box-shadow:
        var(--gov-shadow);

}


.history-empty-icon{

    width:70px;
    height:70px;

    display:flex;

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

    margin:
        0 auto 20px;

    border-radius:50%;

    background:
        var(--gov-soft);

    color:
        var(--gov-blue);

    font-size:30px;

}


.history-empty h3{

    margin:
        0 0 8px;

    color:
        var(--gov-text);

    font-size:22px;

}


.history-empty p{

    margin:0;

    color:
        var(--gov-muted);

}


/* ==========================================================
   CLOSING SECTION
========================================================== */

.history-closing{

    padding:
        100px 0;

    background:
        #fff;

}


.history-closing .profile-about-header{

    max-width:750px;

    margin:
        0 auto 65px;

    text-align:center;

}


.history-closing-grid{

    display:grid;

    grid-template-columns:
        minmax(280px, .8fr)
        minmax(0, 1.2fr);

    align-items:center;

    gap:80px;

    max-width:1050px;

    margin:0 auto;

}


/* ==========================================================
   CLOSING VISUAL
========================================================== */

.history-closing-visual{

    position:relative;

    min-height:320px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.history-closing-circle{

    position:relative;

    width:230px;
    height:230px;

    display:flex;

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

    border-radius:50%;

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

    box-shadow:
        0 25px 60px
        rgba(15,76,129,.25);

}


.history-closing-circle::before{

    content:"";

    position:absolute;

    inset:-15px;

    border-radius:50%;

    border:
        1px solid
        rgba(214,166,46,.35);

    animation:
        historyOrbit
        5s
        linear
        infinite;

}


@keyframes historyOrbit{

    from{

        transform:
            rotate(0deg);

    }

    to{

        transform:
            rotate(360deg);

    }

}


.history-closing-circle-inner{

    width:145px;
    height:145px;

    display:flex;

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

    border-radius:50%;

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

    color:
        var(--gov-gold-light);

    font-size:50px;

}


.history-closing-orb{

    position:absolute;

    width:18px;
    height:18px;

    border-radius:50%;

    background:
        var(--gov-gold);

    box-shadow:
        0 0 20px
        rgba(214,166,46,.5);

    animation:
        historyFloat
        4s
        ease-in-out
        infinite;

}


.orb-one{

    top:35px;
    right:70px;

}


.orb-two{

    bottom:45px;
    left:55px;

    width:12px;
    height:12px;

    animation-delay:1s;

}


.orb-three{

    top:80px;
    left:40px;

    width:10px;
    height:10px;

    animation-delay:2s;

}


@keyframes historyFloat{

    0%,
    100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-15px);

    }

}


/* ==========================================================
   CLOSING CONTENT
========================================================== */

.history-closing-content
.profile-kicker{

    color:
        var(--gov-blue);

}


.history-closing-content h3{

    margin:
        12px 0 20px;

    color:
        var(--gov-text);

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );

    line-height:1.2;

    font-weight:800;

}


.history-closing-content p{

    margin:
        0 0 16px;

    color:
        var(--gov-muted);

    font-size:15px;

    line-height:1.9;

}


/* ==========================================================
   STATISTIK
========================================================== */

.history-closing-stats{

    display:flex;

    gap:15px;

    margin-top:30px;

}


.history-stat{

    min-width:120px;

    padding:
        18px;

    background:
        var(--gov-bg);

    border:
        1px solid
        var(--gov-border);

    border-radius:10px;

}


.history-stat strong{

    display:block;

    color:
        var(--gov-blue);

    font-size:25px;

    font-weight:800;

}


.history-stat span{

    display:block;

    margin-top:5px;

    color:
        var(--gov-muted);

    font-size:11px;

}


/* ==========================================================
   IDENTITY
========================================================== */

.history-identity{

    padding:
        95px 0
        110px;

    background:
        var(--gov-bg);

}


.history-identity
.profile-section-heading{

    text-align:center;

    margin-bottom:55px;

}


.history-identity
.section-kicker{

    color:
        var(--gov-blue);

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

}


.history-identity
.profile-section-heading h2{

    color:
        var(--gov-text);

}


/* ==========================================================
   DATA CARD
========================================================== */

.history-identity .profile-data{

    background:#fff;

    border:
        1px solid
        var(--gov-border);

    border-radius:12px;

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

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.history-identity .profile-data:hover{

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(15,76,129,.12);

}


.history-identity .profile-data-icon{

    color:
        var(--gov-blue);

    background:
        var(--gov-soft);

}


/* ==========================================================
   FOOTER PAGE
========================================================== */

.history-page-footer{

    padding:
        30px 0;

    background:
        var(--gov-blue-dark);

}


.history-page-footer-inner{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    text-align:center;

}


.history-page-footer-icon{

    width:38px;
    height:38px;

    display:flex;

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

    border-radius:8px;

    background:
        rgba(214,166,46,.12);

    color:
        var(--gov-gold-light);

}


.history-page-footer p{

    margin:0;

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

    font-size:13px;

}


.history-page-footer span{

    display:block;

    margin-top:3px;

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

    font-size:11px;

}


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

@media(max-width:900px){

    .history-section,
    .history-about,
    .history-closing,
    .history-identity{

        padding-left:25px;
        padding-right:25px;

    }


    .history-closing-grid{

        grid-template-columns:1fr;

        gap:45px;

        text-align:center;

    }


    .history-closing-stats{

        justify-content:center;

    }


    .history-closing-visual{

        min-height:260px;

    }

}


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

@media(max-width:768px){

    .history-hero{

        min-height:390px;

    }


    .history-hero h1{

        font-size:38px;

    }


    .history-hero p{

        padding:
            0 15px;

        font-size:14px;

    }


    .history-about{

        padding:
            75px 20px
            85px;

    }


    .history-about
    .profile-about-header{

        margin-bottom:50px;

    }


    /* TIMELINE MOBILE */

    .history-timeline{

        padding-left:0;

    }


    .history-line{

        left:17px;

        transform:none;

    }


    .history-item,
    .history-left,
    .history-right{

        width:100%;

        left:0;

        padding:
            25px 0
            25px 48px;

        text-align:left;

    }


    .history-dot,
    .history-left .history-dot,
    .history-right .history-dot{

        left:3px;

        right:auto;

        top:60px;

    }


    .history-card{

        max-width:none;

        padding:25px;

        border-radius:13px;

    }


    .history-card h3{

        font-size:20px;

    }


    .history-card p{

        font-size:13px;

        line-height:1.8;

    }


    .history-card-image img{

        height:180px;

    }


    /* CLOSING */

    .history-closing{

        padding:
            75px 20px
            85px;

    }


    .history-closing-circle{

        width:190px;
        height:190px;

    }


    .history-closing-circle-inner{

        width:120px;
        height:120px;

        font-size:40px;

    }


    .history-closing-stats{

        display:grid;

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

        gap:8px;

    }


    .history-stat{

        min-width:0;

        padding:14px 8px;

    }


    .history-stat strong{

        font-size:21px;

    }


    .history-stat span{

        font-size:9px;

    }


    /* IDENTITY */

    .history-identity{

        padding:
            70px 20px
            80px;

    }


    /* FOOTER */

    .history-page-footer-inner{

        flex-direction:column;

        gap:8px;

    }

}


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

@media(max-width:480px){

    .history-hero h1{

        font-size:32px;

    }


    .history-hero .profile-logo{

        width:72px;
        height:72px;

    }


    .history-about h2{

        font-size:29px;

    }


    .history-card{

        padding:21px;

    }


    .history-year{

        min-width:90px;

        font-size:12px;

    }


    .history-card-icon{

        width:44px;
        height:44px;

        font-size:18px;

    }


    .history-closing-content h3{

        font-size:29px;

    }


    .history-closing-stats{

        grid-template-columns:1fr;

    }


    .history-stat{

        display:flex;

        align-items:center;

        justify-content:space-between;

        text-align:left;

    }


    .history-stat strong{

        font-size:22px;

    }


    .history-stat span{

        font-size:11px;

    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media(prefers-reduced-motion:reduce){

    .history-line span,
    .history-closing-circle::before,
    .history-closing-orb{

        animation:none;

    }


    .history-card,
    .history-dot,
    .history-card-icon{

        transition:none;

    }

}

/* ==========================================================
   FIX FINAL TIMELINE SEJARAH
   OVERRIDE CSS LAMA
========================================================== */


/* ==========================================================
   RESET KHUSUS HALAMAN SEJARAH
========================================================== */

.history-page .history-timeline{

    position:relative !important;

    display:block !important;

    width:100% !important;

    max-width:1180px !important;

    margin:0 auto !important;

    padding:30px 0 50px !important;

}


/* ==========================================================
   GARIS TENGAH
========================================================== */

.history-page .history-line{

    position:absolute !important;

    top:0 !important;
    bottom:0 !important;

    left:50% !important;

    width:3px !important;

    margin:0 !important;

    padding:0 !important;

    transform:translateX(-50%) !important;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            #0F4C81 8%,
            #0F4C81 45%,
            #D6A62E 50%,
            #0F4C81 55%,
            #0F4C81 92%,
            transparent 100%
        ) !important;

    z-index:1 !important;

}


/* ==========================================================
   CAHAYA BERGERAK
========================================================== */

.history-page .history-line span{

    position:absolute !important;

    top:-120px !important;

    left:-2px !important;

    width:7px !important;

    height:120px !important;

    display:block !important;

    border-radius:20px !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,.95),
            transparent
        ) !important;

    animation:
        historyLineMove
        4s
        linear
        infinite !important;

}


@keyframes historyLineMove{

    0%{

        top:-120px;

    }

    100%{

        top:100%;

    }

}


/* ==========================================================
   ITEM TIMELINE
========================================================== */

.history-page .history-item{

    position:relative !important;

    display:block !important;

    width:50% !important;

    min-width:0 !important;

    height:auto !important;

    margin:0 !important;

    padding:
        35px 65px !important;

    clear:both !important;

    z-index:2 !important;

}


/* ==========================================================
   KIRI
========================================================== */

.history-page .history-item.history-left{

    float:left !important;

    left:auto !important;

    right:auto !important;

    text-align:right !important;

}


/* ==========================================================
   KANAN
========================================================== */

.history-page .history-item.history-right{

    float:right !important;

    left:auto !important;

    right:auto !important;

    text-align:left !important;

}


/* ==========================================================
   CLEAR FLOAT
========================================================== */

.history-page .history-item::after{

    content:"";

    display:table;

    clear:both;

}


/* ==========================================================
   CARD
========================================================== */

.history-page .history-card{

    position:relative !important;

    display:block !important;

    width:100% !important;

    max-width:500px !important;

    min-width:0 !important;

    height:auto !important;

    margin:0 !important;

    padding:32px !important;

    overflow:hidden !important;

    box-sizing:border-box !important;

    background:#FFFFFF !important;

    border:
        1px solid #E0E7EE !important;

    border-radius:16px !important;

    text-align:left !important;

    box-shadow:
        0 12px 35px
        rgba(15,76,129,.08) !important;

    transition:
        transform .35s ease,
        box-shadow .35s ease !important;

}


/* kiri card menempel ke kanan */

.history-page .history-left .history-card{

    margin-left:auto !important;

    margin-right:0 !important;

}


/* kanan card menempel ke kiri */

.history-page .history-right .history-card{

    margin-left:0 !important;

    margin-right:auto !important;

}


/* hover */

.history-page .history-card:hover{

    transform:
        translateY(-6px) !important;

    box-shadow:
        0 20px 45px
        rgba(15,76,129,.14) !important;

}


/* ==========================================================
   GARIS EMAS CARD
========================================================== */

.history-page .history-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:
        linear-gradient(
            90deg,
            #0F4C81,
            #D6A62E
        );

}


/* ==========================================================
   BERCak WARNA
========================================================== */

.history-page .history-blob{

    position:absolute !important;

    width:180px !important;

    height:180px !important;

    border-radius:50% !important;

    background:
        var(--history-color) !important;

    opacity:.07 !important;

    filter:blur(3px) !important;

    pointer-events:none !important;

    z-index:0 !important;

    transition:
        transform .5s ease,
        opacity .5s ease !important;

}


.history-page .history-left .history-blob{

    right:-90px !important;

    top:-90px !important;

}


.history-page .history-right .history-blob{

    left:-90px !important;

    top:-90px !important;

}


.history-page .history-card:hover .history-blob{

    transform:scale(1.3) !important;

    opacity:.11 !important;

}


/* ==========================================================
   SEMUA ISI CARD
========================================================== */

.history-page .history-card > *{

    position:relative;

    z-index:2;

}


/* ==========================================================
   TAHUN
========================================================== */

.history-page .history-year{

    display:inline-flex !important;

    width:auto !important;

    min-width:105px !important;

    max-width:none !important;

    margin:
        0 0 18px !important;

    padding:
        8px 17px !important;

    box-sizing:border-box !important;

    white-space:nowrap !important;

    background:#EEF3F7 !important;

    border-left:
        4px solid #D6A62E !important;

    border-radius:6px !important;

    color:#0F4C81 !important;

    font-size:13px !important;

    font-weight:800 !important;

    line-height:1.3 !important;

}


/* ==========================================================
   ICON
========================================================== */

.history-page .history-card-icon{

    width:50px !important;

    height:50px !important;

    min-width:50px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    margin:
        0 0 17px !important;

    padding:0 !important;

    border-radius:12px !important;

    background:#EEF3F7 !important;

    color:#0F4C81 !important;

    font-size:21px !important;

}


/* ==========================================================
   JUDUL
========================================================== */

.history-page .history-card h3{

    display:block !important;

    width:100% !important;

    max-width:none !important;

    margin:
        0 0 14px !important;

    padding:0 !important;

    color:#17324D !important;

    font-size:22px !important;

    font-weight:800 !important;

    line-height:1.35 !important;

    word-break:normal !important;

    overflow-wrap:break-word !important;

}


/* ==========================================================
   GARIS KECIL
========================================================== */

.history-page .history-card-line{

    display:block !important;

    width:45px !important;

    height:2px !important;

    margin:
        0 0 17px !important;

    padding:0 !important;

    background:#D6A62E !important;

    border-radius:10px !important;

}


/* ==========================================================
   DESKRIPSI
========================================================== */

.history-page .history-card p{

    display:block !important;

    width:100% !important;

    max-width:none !important;

    margin:0 !important;

    padding:0 !important;

    color:#667789 !important;

    font-size:14px !important;

    font-weight:400 !important;

    line-height:1.85 !important;

    text-align:left !important;

    white-space:normal !important;

    word-break:normal !important;

    overflow-wrap:break-word !important;

}


/* ==========================================================
   FOTO
========================================================== */

.history-page .history-card-image{

    display:block !important;

    width:100% !important;

    margin-top:22px !important;

    overflow:hidden !important;

    border-radius:10px !important;

}


.history-page .history-card-image img{

    display:block !important;

    width:100% !important;

    max-width:100% !important;

    height:220px !important;

    object-fit:cover !important;

}


/* ==========================================================
   TITIK TIMELINE
========================================================== */

.history-page .history-dot{

    position:absolute !important;

    top:70px !important;

    width:34px !important;

    height:34px !important;

    min-width:34px !important;

    max-width:34px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    margin:0 !important;

    padding:0 !important;

    box-sizing:border-box !important;

    border:
        4px solid #0F4C81 !important;

    border-radius:50% !important;

    background:#FFFFFF !important;

    z-index:10 !important;

    box-shadow:
        0 0 0 8px rgba(15,76,129,.08),
        0 6px 20px rgba(15,76,129,.20) !important;

}


/* titik emas */

.history-page .history-dot span{

    display:block !important;

    width:10px !important;

    height:10px !important;

    min-width:10px !important;

    border-radius:50% !important;

    background:#D6A62E !important;

    animation:
        historyDotPulse
        2.2s
        ease-in-out
        infinite !important;

}


@keyframes historyDotPulse{

    0%,
    100%{

        transform:scale(1);

        box-shadow:
            0 0 0 0
            rgba(214,166,46,.25);

    }

    50%{

        transform:scale(1.35);

        box-shadow:
            0 0 0 8px
            rgba(214,166,46,.08);

    }

}


/* posisi titik kiri */

.history-page .history-left .history-dot{

    right:-17px !important;

    left:auto !important;

}


/* posisi titik kanan */

.history-page .history-right .history-dot{

    left:-17px !important;

    right:auto !important;

}


/* ==========================================================
   CLEAR SETELAH TIMELINE
========================================================== */

.history-page .history-timeline::after{

    content:"";

    display:block;

    clear:both;

}


/* ==========================================================
   HERO WAJIB MUNCUL
========================================================== */

.history-page .history-hero{

    position:relative !important;

    display:flex !important;

    width:100% !important;

    min-height:430px !important;

    visibility:visible !important;

    opacity:1 !important;

    overflow:hidden !important;

}


/* ==========================================================
   HERO CONTENT
========================================================== */

.history-page .history-hero
.profile-hero-content{

    position:relative !important;

    z-index:5 !important;

    width:100% !important;

    text-align:center !important;

}


/* ==========================================================
   HERO LOGO
========================================================== */

.history-page .history-hero
.profile-logo{

    margin-left:auto !important;

    margin-right:auto !important;

}


/* ==========================================================
   CLOSING
========================================================== */

.history-page .history-closing-grid{

    display:grid !important;

    grid-template-columns:
        minmax(300px,.8fr)
        minmax(0,1.2fr) !important;

    width:100% !important;

    max-width:1100px !important;

    margin:0 auto !important;

    gap:70px !important;

}


/* ==========================================================
   CLOSING STATS
========================================================== */

.history-page .history-closing-stats{

    display:flex !important;

    flex-wrap:wrap !important;

    gap:14px !important;

}


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

@media(max-width:768px){

    .history-page .history-timeline{

        width:100% !important;

        padding:
            20px 0 40px !important;

    }


    /* garis pindah kiri */

    .history-page .history-line{

        left:18px !important;

        transform:none !important;

        width:3px !important;

    }


    /* semua item satu kolom */

    .history-page .history-item,
    .history-page .history-item.history-left,
    .history-page .history-item.history-right{

        float:none !important;

        left:auto !important;

        right:auto !important;

        width:100% !important;

        min-width:0 !important;

        margin:0 !important;

        padding:
            25px 0 25px 55px !important;

        text-align:left !important;

    }


    /* card mobile */

    .history-page .history-card{

        width:100% !important;

        max-width:none !important;

        margin:0 !important;

        padding:25px !important;

    }


    /* dot mobile */

    .history-page .history-dot,
    .history-page .history-left .history-dot,
    .history-page .history-right .history-dot{

        left:2px !important;

        right:auto !important;

        top:50px !important;

        width:34px !important;

        height:34px !important;

    }


    .history-page .history-card h3{

        font-size:20px !important;

    }


    .history-page .history-card p{

        font-size:13px !important;

        line-height:1.8 !important;

    }


    .history-page .history-card-image img{

        height:190px !important;

    }


    .history-page .history-closing-grid{

        grid-template-columns:1fr !important;

        gap:40px !important;

    }


    .history-page .history-closing-stats{

        justify-content:center !important;

    }

}


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

@media(max-width:480px){

    .history-page .history-hero{

        min-height:390px !important;

    }


    .history-page .history-hero h1{

        font-size:34px !important;

    }


    .history-page .history-about{

        padding:
            70px 15px 80px !important;

    }


    .history-page .history-card{

        padding:22px !important;

    }


    .history-page .history-card h3{

        font-size:19px !important;

    }


    .history-page .history-card p{

        font-size:13px !important;

    }

}
/* ==========================================================
   PERJALANAN SEKOLAH
   HISTORY SUMMARY
========================================================== */

.history-page .history-summary{

    position:relative;

    width:100%;

    padding:
        85px 0;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #0A3558 0%,
            #0F4C81 55%,
            #123F63 100%
        );

}


/* ==========================================================
   EFEK LINGKARAN LATAR
========================================================== */

.history-page .history-summary::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-250px;
    right:-120px;

    border-radius:50%;

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

    box-shadow:
        0 0 0 45px
        rgba(255,255,255,.025),

        0 0 0 90px
        rgba(255,255,255,.018);

}


.history-page .history-summary::after{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    left:-150px;
    bottom:-150px;

    border-radius:50%;

    background:
        rgba(214,166,46,.08);

    filter:blur(2px);

}


/* ==========================================================
   CONTAINER
========================================================== */

.history-page .history-summary
.container{

    position:relative;

    z-index:3;

}


/* ==========================================================
   INNER
========================================================== */

.history-page .history-summary-inner{

    position:relative;

    display:grid;

    grid-template-columns:
        70px
        minmax(0,1fr)
        180px;

    align-items:center;

    gap:30px;

    max-width:1050px;

    margin:0 auto;

    padding:
        35px 40px;

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

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

    border-radius:18px;

    backdrop-filter:
        blur(12px);

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

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

}


/* ==========================================================
   ICON
========================================================== */

.history-page .history-summary-icon{

    width:65px;
    height:65px;

    display:flex;

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

    border-radius:16px;

    background:
        rgba(214,166,46,.12);

    border:
        1px solid
        rgba(214,166,46,.35);

    color:
        #F1D889;

    font-size:26px;

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

}


/* ==========================================================
   ICON ANIMATION
========================================================== */

.history-page .history-summary-icon i{

    display:block;

    animation:
        historySummaryIcon
        3s
        ease-in-out
        infinite;

}


@keyframes historySummaryIcon{

    0%,
    100%{

        transform:
            translateY(0)
            rotate(0deg);

    }

    50%{

        transform:
            translateY(-4px)
            rotate(5deg);

    }

}


/* ==========================================================
   CONTENT
========================================================== */

.history-page .history-summary-content{

    min-width:0;

}


.history-page .history-summary-content span{

    display:block;

    margin-bottom:7px;

    color:
        #F1D889;

    font-size:10px;

    font-weight:800;

    letter-spacing:2.5px;

    line-height:1.4;

}


.history-page .history-summary-content h2{

    margin:
        0 0 9px;

    color:
        #FFFFFF;

    font-size:
        clamp(
            24px,
            3vw,
            34px
        );

    line-height:1.2;

    font-weight:800;

    letter-spacing:-.4px;

}


.history-page .history-summary-content p{

    margin:0;

    max-width:620px;

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

    font-size:14px;

    line-height:1.8;

}


/* ==========================================================
   JUMLAH SEJARAH
========================================================== */

.history-page .history-summary-count{

    position:relative;

    min-width:150px;

    padding:
        20px;

    text-align:center;

    border-left:
        1px solid
        rgba(255,255,255,.15);

}


.history-page .history-summary-count::before{

    content:"";

    position:absolute;

    top:50%;

    left:-1px;

    width:2px;

    height:40px;

    transform:
        translateY(-50%);

    background:
        #D6A62E;

}


.history-page .history-summary-count strong{

    display:block;

    margin:0;

    color:
        #FFFFFF;

    font-size:
        clamp(
            34px,
            4vw,
            48px
        );

    line-height:1;

    font-weight:800;

}


.history-page .history-summary-count span{

    display:block;

    margin-top:9px;

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

    font-size:10px;

    font-weight:700;

    letter-spacing:1.3px;

    text-transform:uppercase;

}


/* ==========================================================
   GARIS AKSEN
========================================================== */

.history-page .history-summary-inner::before{

    content:"";

    position:absolute;

    top:0;

    left:40px;

    width:90px;

    height:3px;

    border-radius:
        0 0 5px 5px;

    background:
        linear-gradient(
            90deg,
            #D6A62E,
            #F1D889
        );

}


/* ==========================================================
   HOVER
========================================================== */

.history-page .history-summary-inner{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.history-page .history-summary-inner:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.18);

}


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

@media(max-width:900px){

    .history-page .history-summary{

        padding:
            70px 25px;

    }


    .history-page .history-summary-inner{

        grid-template-columns:
            60px
            minmax(0,1fr);

        gap:22px;

        padding:
            30px;

    }


    .history-page .history-summary-icon{

        width:58px;
        height:58px;

    }


    .history-page .history-summary-count{

        grid-column:
            1 / -1;

        display:flex;

        align-items:center;

        justify-content:center;

        gap:12px;

        padding:
            18px 0 0;

        border-left:0;

        border-top:
            1px solid
            rgba(255,255,255,.15);

    }


    .history-page .history-summary-count::before{

        top:0;

        left:50%;

        width:40px;

        height:2px;

        transform:
            translateX(-50%);

    }


    .history-page .history-summary-count strong{

        font-size:35px;

    }


    .history-page .history-summary-count span{

        margin-top:0;

    }

}


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

@media(max-width:600px){

    .history-page .history-summary{

        padding:
            55px 16px;

    }


    .history-page .history-summary-inner{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:20px;

        padding:
            35px 25px;

        text-align:center;

        border-radius:16px;

    }


    .history-page .history-summary-inner::before{

        left:50%;

        transform:
            translateX(-50%);

    }


    .history-page .history-summary-icon{

        width:62px;
        height:62px;

        border-radius:15px;

    }


    .history-page .history-summary-content{

        width:100%;

    }


    .history-page .history-summary-content span{

        font-size:9px;

        letter-spacing:2px;

    }


    .history-page .history-summary-content h2{

        font-size:27px;

    }


    .history-page .history-summary-content p{

        font-size:13px;

        line-height:1.8;

    }


    .history-page .history-summary-count{

        width:100%;

        min-width:0;

        flex-direction:column;

        gap:6px;

        padding:
            22px 0 0;

    }


    .history-page .history-summary-count strong{

        font-size:40px;

    }


    .history-page .history-summary-count span{

        font-size:9px;

    }

}


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

@media(max-width:400px){

    .history-page .history-summary-inner{

        padding:
            30px 20px;

    }


    .history-page .history-summary-content h2{

        font-size:24px;

    }


    .history-page .history-summary-content p{

        font-size:12px;

    }

}
/* ==========================================================
   MODERN MINIMALIS - HISTORY INTRO
   KHUSUS HALAMAN SEJARAH SEKOLAH
========================================================== */

.history-about .profile-about-header{
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}


/* LABEL */

.history-about .profile-about-header .profile-kicker{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 16px;

    margin-bottom: 14px;

    border-radius: 50px;

    background: rgba(15, 76, 129, 0.08);

    color: #0F4C81;

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

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


/* JUDUL */

.history-about .profile-about-header h2{
    margin: 0;

    color: #17324D;

    font-size: clamp(
        30px,
        4vw,
        48px
    );

    font-weight: 750;

    line-height: 1.15;

    letter-spacing: -0.8px;
}


/* GARIS AKSEN */

.history-about .profile-title-line{
    width: 55px;
    height: 4px;

    margin: 20px auto 22px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #0F4C81,
        #2A78B8
    );

    position: relative;
}


/* TITIK AKSEN */

.history-about .profile-title-line::after{
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    top: 50%;
    left: 50%;

    transform: translate(
        -50%,
        -50%
    );

    background: #ffffff;

    border: 2px solid #0F4C81;

    border-radius: 50%;
}


/* ==========================================================
   KALIMAT PERJALANAN
========================================================== */

.history-about .history-intro{

    position: relative;

    max-width: 680px;

    margin: 0 auto;

    padding: 20px 28px;

    color: #5E7184;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.8;

    letter-spacing: 0.1px;

    background: rgba(
        255,
        255,
        255,
        0.72
    );

    border: 1px solid rgba(
        15,
        76,
        129,
        0.08
    );

    border-radius: 14px;

    box-shadow:
        0 8px 30px rgba(
            15,
            76,
            129,
            0.06
        );

    backdrop-filter: blur(10px);

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


/* ==========================================================
   TEKS NAMA SEKOLAH
========================================================== */

.history-about .history-intro::first-line{
    color: #304A61;
}


/* ==========================================================
   AKSEN KIRI
========================================================== */

.history-about .history-intro::before{

    content: "";

    position: absolute;

    left: 0;
    top: 18px;
    bottom: 18px;

    width: 3px;

    border-radius: 10px;

    background: linear-gradient(
        180deg,
        #0F4C81,
        #4A8BC2
    );
}


/* ==========================================================
   HOVER
========================================================== */

.history-about .history-intro{

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

.history-about .history-intro:hover{

    transform: translateY(-3px);

    border-color: rgba(
        15,
        76,
        129,
        0.16
    );

    box-shadow:
        0 14px 35px rgba(
            15,
            76,
            129,
            0.10
        );
}


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

@media (max-width: 768px){

    .history-about .profile-about-header{
        padding-left: 15px;
        padding-right: 15px;
    }

    .history-about .profile-about-header h2{

        font-size: 32px;

        letter-spacing: -0.5px;
    }

    .history-about .history-intro{

        padding: 17px 20px;

        font-size: 14px;

        line-height: 1.7;
    }

}


@media (max-width: 480px){

    .history-about .profile-about-header h2{
        font-size: 28px;
    }

    .history-about .profile-about-header .profile-kicker{
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    .history-about .history-intro{
        padding: 16px 18px;
    }

}
/* ==========================================================
   HISTORY INTRO - FIX HORIZONTAL & RATA KANAN KIRI
========================================================== */

.history-about .profile-about-header .history-intro {
    display: block !important;

    width: 100% !important;
    max-width: 900px !important;

    box-sizing: border-box !important;

    margin: 22px auto 0 !important;

    padding: 20px 30px !important;

    /* FONT */
    font-family: "Plus Jakarta Sans", Arial, sans-serif !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    line-height: 1.8 !important;

    color: #5d7185 !important;

    /* RATA KANAN KIRI */
    text-align: justify !important;

    letter-spacing: 0 !important;

    /* CARD */
    background: rgba(255,255,255,.82) !important;

    border: 1px solid rgba(15,76,129,.12) !important;

    border-radius: 16px !important;

    box-shadow:
        0 10px 30px rgba(15,76,129,.07) !important;

    position: relative !important;

    overflow: hidden !important;

    /* PENTING */
    white-space: normal !important;
}


/* ==========================================================
   AKSEN GARIS KIRI
========================================================== */

.history-about .profile-about-header .history-intro::before {

    content: "";

    position: absolute;

    left: 0;
    top: 15px;
    bottom: 15px;

    width: 4px;

    background: linear-gradient(
        180deg,
        #0F4C81,
        #D4AF37
    );

    border-radius: 0 5px 5px 0;

}


/* ==========================================================
   TEKS NAMA SEKOLAH
========================================================== */

.history-about .history-intro strong {
    color: #0F4C81;
}


/* ==========================================================
   DESKTOP - LEBIH ELEGAN
========================================================== */

@media (min-width: 769px) {

    .history-about .profile-about-header .history-intro {

        font-size: 17px !important;

        padding: 20px 35px !important;

    }

}


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

@media (max-width: 768px) {

    .history-about .profile-about-header .history-intro {

        width: 100% !important;

        max-width: 100% !important;

        padding: 18px 24px !important;

        font-size: 15px !important;

        line-height: 1.75 !important;

        text-align: justify !important;

    }

}


/* ==========================================================
   HP
========================================================== */

@media (max-width: 480px) {

    .history-about .profile-about-header .history-intro {

        padding: 16px 20px !important;

        font-size: 14px !important;

        line-height: 1.7 !important;

    }

}
.history-about .profile-about-header .history-intro {
    display: block !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 22px auto 0 !important;

    text-align: center !important;

    padding: 20px 30px !important;
    box-sizing: border-box !important;
}
/* ==========================================================
   STRUKTUR ORGANISASI
   MODERN • MINIMALIS • RESPONSIVE
   CSS KHUSUS - TIDAK MENGUBAH HALAMAN LAIN
========================================================== */


/* ==========================================================
   SECTION ORGANISASI
========================================================== */

.organization-page .organization-section,
.organization-page .organization-tasks-section,
.organization-page .organization-information-section{

    padding:80px 0;

}


.organization-page .organization-description{

    max-width:760px;

    margin:18px auto 0;

    color:#64748b;

    font-size:15px;

    line-height:1.8;

}



/* ==========================================================
   BAGAN ORGANISASI
========================================================== */

.organization-page .organization-chart{

    width:100%;

    margin:55px auto 0;

    position:relative;

}



/* ==========================================================
   LEVEL UTAMA
========================================================== */

.organization-page .organization-level-main{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    position:relative;

}



/* ==========================================================
   KARTU ORGANISASI
========================================================== */

.organization-page .organization-card{

    position:relative;

    width:100%;

    max-width:330px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    padding:24px;

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

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

}


.organization-page .organization-card:hover{

    transform:translateY(-5px);

    border-color:#cbd5e1;

    box-shadow:
        0 15px 35px rgba(15,23,42,.10);

}



/* ==========================================================
   KARTU KEPALA SEKOLAH
========================================================== */

.organization-page .organization-card-main{

    max-width:390px;

    border:1px solid #dbe3ea;

    box-shadow:
        0 12px 35px rgba(15,23,42,.09);

}


.organization-page .organization-card-main:hover{

    transform:translateY(-6px);

}



/* ==========================================================
   FOTO
========================================================== */

.organization-page .organization-photo{

    width:90px;

    height:90px;

    margin:0 auto 18px;

    border-radius:50%;

    overflow:hidden;

    background:#f1f5f9;

    border:4px solid #f8fafc;

    box-shadow:
        0 5px 15px rgba(15,23,42,.08);

}


.organization-page .organization-photo img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}


.organization-page .organization-photo-default{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#64748b;

    font-size:30px;

}



/* ==========================================================
   INFORMASI KARTU
========================================================== */

.organization-page .organization-info{

    text-align:center;

}


.organization-page .organization-position{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    margin-bottom:10px;

    border-radius:999px;

    background:#f1f5f9;

    color:#475569;

    font-size:11px;

    font-weight:700;

    letter-spacing:.06em;

    text-transform:uppercase;

}


.organization-page .organization-info h3{

    margin:0;

    color:#0f172a;

    font-size:18px;

    line-height:1.4;

    font-weight:700;

}


.organization-page .organization-info p{

    margin:14px 0 0;

    color:#64748b;

    font-size:13px;

    line-height:1.75;

}



/* ==========================================================
   CONNECTOR / GARIS ORGANISASI
========================================================== */

.organization-page .organization-connector{

    height:45px;

    width:2px;

    margin:0 auto;

    background:#cbd5e1;

    position:relative;

}


.organization-page .organization-connector span{

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:8px;

    height:8px;

    border-radius:50%;

    background:#94a3b8;

}



/* ==========================================================
   ANAK ORGANISASI
========================================================== */

.organization-page .organization-level-children{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px, 1fr)
        );

    gap:24px;

    width:100%;

    max-width:1100px;

    margin:0 auto;

    position:relative;

}



/* ==========================================================
   GARIS ATAS UNTUK ANAK
========================================================== */

.organization-page .organization-level-children::before{

    content:"";

    position:absolute;

    top:-23px;

    left:10%;

    right:10%;

    height:1px;

    background:#cbd5e1;

}



/* ==========================================================
   KARTU ANAK
========================================================== */

.organization-page .organization-level-children
.organization-card{

    max-width:none;

}



/* ==========================================================
   SUB CHILDREN
========================================================== */

.organization-page .organization-subchildren{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:22px;

    padding-top:20px;

    border-top:1px dashed #cbd5e1;

}


.organization-page .organization-card-small{

    max-width:none;

    padding:18px;

    border-radius:14px;

}


.organization-page .organization-card-small
.organization-photo{

    width:65px;

    height:65px;

    margin-bottom:12px;

}


.organization-page .organization-card-small
.organization-info h3{

    font-size:15px;

}


.organization-page .organization-card-small
.organization-info p{

    font-size:12px;

}



/* ==========================================================
   DAFTAR TUGAS
========================================================== */

.organization-page .organization-task-grid{

    display:grid;

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

    gap:22px;

    margin-top:45px;

}



/* ==========================================================
   KARTU TUGAS
========================================================== */

.organization-page .organization-task-card{

    position:relative;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    padding:26px;

    min-height:250px;

    box-shadow:
        0 6px 22px rgba(15,23,42,.05);

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

}


.organization-page .organization-task-card:hover{

    transform:translateY(-5px);

    border-color:#cbd5e1;

    box-shadow:
        0 15px 35px rgba(15,23,42,.09);

}



/* ==========================================================
   ICON TUGAS
========================================================== */

.organization-page .organization-task-icon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#f1f5f9;

    color:#334155;

    font-size:21px;

    margin-bottom:18px;

}


.organization-page .organization-task-position{

    display:block;

    margin-bottom:8px;

    color:#64748b;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.06em;

}


.organization-page .organization-task-card h3{

    margin:0 0 12px;

    color:#0f172a;

    font-size:17px;

    line-height:1.45;

}


.organization-page .organization-task-card p{

    margin:0;

    color:#64748b;

    font-size:13px;

    line-height:1.8;

}



/* ==========================================================
   EMPTY STATE
========================================================== */

.organization-page .organization-empty{

    max-width:650px;

    margin:55px auto 0;

    padding:55px 30px;

    text-align:center;

    background:#ffffff;

    border:1px dashed #cbd5e1;

    border-radius:20px;

}


.organization-page .organization-empty-icon{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:#f1f5f9;

    color:#64748b;

    font-size:30px;

}


.organization-page .organization-empty h3{

    margin:0 0 10px;

    color:#0f172a;

    font-size:20px;

}


.organization-page .organization-empty p{

    margin:0;

    color:#64748b;

    font-size:14px;

    line-height:1.8;

}



/* ==========================================================
   INFORMASI SEKOLAH
========================================================== */

.organization-page .organization-address{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-top:22px;

    padding-top:18px;

    border-top:1px solid #e5e7eb;

    color:#64748b;

    font-size:13px;

    line-height:1.7;

}


.organization-page .organization-address i{

    flex-shrink:0;

    margin-top:3px;

    font-size:16px;

}



/* ==========================================================
   RINGKASAN ORGANISASI
========================================================== */

.organization-page .organization-summary-section{

    background:#f8fafc;

}


.organization-page .organization-summary-section
.profile-data{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:16px;

    box-shadow:
        0 5px 18px rgba(15,23,42,.04);

}



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

@media (max-width:991px){

    .organization-page .organization-task-grid{

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

    }


    .organization-page .organization-level-children{

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

    }

}



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

@media (max-width:767px){

    .organization-page .organization-section,
    .organization-page .organization-tasks-section,
    .organization-page .organization-information-section{

        padding:60px 0;

    }


    .organization-page .organization-card{

        padding:20px;

        border-radius:16px;

    }


    .organization-page .organization-card-main{

        max-width:100%;

    }


    .organization-page .organization-level-children{

        grid-template-columns:1fr;

        gap:18px;

    }


    .organization-page .organization-level-children::before{

        display:none;

    }


    .organization-page .organization-task-grid{

        grid-template-columns:1fr;

        gap:16px;

        margin-top:35px;

    }


    .organization-page .organization-task-card{

        min-height:auto;

        padding:22px;

    }


    .organization-page .organization-photo{

        width:75px;

        height:75px;

    }


    .organization-page .organization-info h3{

        font-size:16px;

    }


    .organization-page .organization-info p{

        font-size:12px;

    }


    .organization-page .organization-task-card h3{

        font-size:16px;

    }


    .organization-page .organization-task-card p{

        font-size:13px;

    }

}



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

@media (max-width:480px){

    .organization-page .organization-chart{

        margin-top:35px;

    }


    .organization-page .organization-card{

        padding:18px;

    }


    .organization-page .organization-position{

        font-size:10px;

    }


    .organization-page .organization-info h3{

        font-size:15px;

    }


    .organization-page .organization-info p{

        font-size:12px;

        line-height:1.7;

    }


    .organization-page .organization-task-card{

        padding:20px;

    }


    .organization-page .organization-task-icon{

        width:44px;

        height:44px;

        font-size:19px;

    }

}
/* ==========================================================
   FIX STRUKTUR ORGANISASI
   UKURAN KARTU + TEKS RATA KIRI
========================================================== */


/* ==========================================================
   KARTU ORGANISASI
========================================================== */

.organization-page .organization-card{

    max-width:100%;

    width:100%;

    min-width:0;

    padding:24px;

    box-sizing:border-box;

    overflow:hidden;

}


/* ==========================================================
   KARTU UTAMA / KEPALA SEKOLAH
========================================================== */

.organization-page .organization-card-main{

    max-width:470px;

    margin:0 auto;

    text-align:left;

    padding:28px 30px;

}


/* ==========================================================
   LEVEL ANAK
========================================================== */

.organization-page .organization-level-children{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    display:grid;

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

    gap:24px;

    align-items:start;

}


/* ==========================================================
   SEMUA ISI KARTU RATA KIRI
========================================================== */

.organization-page .organization-info{

    text-align:left;

}


.organization-page .organization-position{

    justify-content:flex-start;

    text-align:left;

    width:fit-content;

    max-width:100%;

    line-height:1.5;

}


.organization-page .organization-info h3{

    text-align:left;

    margin:0 0 12px;

    font-size:18px;

    line-height:1.45;

    word-break:normal;

    overflow-wrap:break-word;

}


.organization-page .organization-info p{

    text-align:left;

    margin:0;

    font-size:13px;

    line-height:1.75;

    color:#64748b;

}


/* ==========================================================
   FOTO / IKON
========================================================== */

.organization-page .organization-photo{

    width:72px;

    height:72px;

    margin:0 0 18px;

    flex-shrink:0;

}


/* ==========================================================
   KARTU KECIL / KOORDINATOR
========================================================== */

.organization-page .organization-card-small{

    width:100%;

    max-width:100%;

    padding:20px;

    text-align:left;

}


.organization-page .organization-card-small
.organization-photo{

    width:58px;

    height:58px;

    margin:0 0 14px;

}


.organization-page .organization-card-small
.organization-info{

    text-align:left;

}


.organization-page .organization-card-small
.organization-info h3{

    font-size:16px;

    line-height:1.45;

    text-align:left;

}


.organization-page .organization-card-small
.organization-info p{

    font-size:12.5px;

    line-height:1.7;

    text-align:left;

}



/* ==========================================================
   SUB CHILDREN
========================================================== */

.organization-page .organization-subchildren{

    width:100%;

    margin-top:20px;

    padding-top:18px;

    display:flex;

    flex-direction:column;

    gap:14px;

    box-sizing:border-box;

}


/* ==========================================================
   JABATAN PANJANG
========================================================== */

.organization-page .organization-position{

    white-space:normal;

    word-break:normal;

    overflow-wrap:anywhere;

    letter-spacing:.04em;

}


/* ==========================================================
   GARIS ORGANISASI
========================================================== */

.organization-page .organization-level-children::before{

    left:12%;

    right:12%;

}


/* ==========================================================
   TASK CARD
========================================================== */

.organization-page .organization-task-card{

    text-align:left;

}


.organization-page .organization-task-icon{

    margin-left:0;

    margin-right:0;

}


.organization-page .organization-task-position{

    text-align:left;

}


.organization-page .organization-task-card h3{

    text-align:left;

}


.organization-page .organization-task-card p{

    text-align:left;

}



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

@media (max-width:991px){

    .organization-page .organization-level-children{

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

        gap:20px;

    }


    .organization-page .organization-card{

        padding:22px;

    }


    .organization-page .organization-info h3{

        font-size:17px;

    }

}



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

@media (max-width:767px){

    .organization-page .organization-level-children{

        grid-template-columns:1fr;

        gap:18px;

    }


    .organization-page .organization-card-main{

        max-width:100%;

        padding:24px;

    }


    .organization-page .organization-card{

        padding:20px;

    }


    .organization-page .organization-photo{

        width:65px;

        height:65px;

    }


    .organization-page .organization-info h3{

        font-size:16px;

    }


    .organization-page .organization-info p{

        font-size:13px;

        line-height:1.7;

    }


    .organization-page .organization-level-children::before{

        display:none;

    }

}



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

@media (max-width:480px){

    .organization-page .organization-card{

        padding:18px;

        border-radius:15px;

    }


    .organization-page .organization-card-main{

        padding:20px;

    }


    .organization-page .organization-position{

        font-size:10px;

        padding:5px 10px;

    }


    .organization-page .organization-info h3{

        font-size:15px;

    }


    .organization-page .organization-info p{

        font-size:12px;

    }

}
/* ==========================================================
   STRUKTUR ORGANISASI
   MINIMALIS • KECIL • RAPI
========================================================== */


/* ==========================================================
   AREA BAGAN
========================================================== */

.organization-page .organization-chart{

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

    margin:0 auto;

    box-sizing:border-box;

}


/* ==========================================================
   KEPALA SEKOLAH
========================================================== */

.organization-page .organization-level-main{

    display:flex;

    justify-content:center;

    margin-bottom:18px;

}


.organization-page .organization-card-main{

    width:380px;

    max-width:100%;

    padding:18px 20px;

    display:flex;

    align-items:flex-start;

    gap:16px;

    text-align:left;

    box-sizing:border-box;

}


/* ==========================================================
   FOTO / ICON
========================================================== */

.organization-page .organization-photo{

    width:52px;

    height:52px;

    min-width:52px;

    margin:0;

    border-radius:50%;

    overflow:hidden;

}


.organization-page .organization-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

}


.organization-page .organization-photo-default{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

}


.organization-page .organization-photo-default i{

    font-size:22px;

}


/* ==========================================================
   ISI KARTU
========================================================== */

.organization-page .organization-info{

    min-width:0;

    flex:1;

    text-align:left;

}


.organization-page .organization-position{

    display:inline-block;

    width:auto;

    max-width:100%;

    margin-bottom:5px;

    padding:4px 9px;

    border-radius:20px;

    font-size:9px;

    font-weight:700;

    line-height:1.3;

    letter-spacing:.04em;

    text-align:left;

    white-space:normal;

    overflow-wrap:break-word;

}


.organization-page .organization-info h3{

    margin:0 0 5px;

    font-size:16px;

    line-height:1.35;

    text-align:left;

}


.organization-page .organization-info p{

    margin:0;

    font-size:11px;

    line-height:1.6;

    text-align:left;

    color:#64748b;

}


/* ==========================================================
   GARIS PENGHUBUNG
========================================================== */

.organization-page .organization-connector{

    height:20px;

    display:flex;

    justify-content:center;

    align-items:center;

}


.organization-page .organization-connector span{

    width:1px;

    height:20px;

    display:block;

}


/* ==========================================================
   LEVEL WAKIL / ANAK
========================================================== */

.organization-page .organization-level-children{

    width:100%;

    display:grid;

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

    gap:16px;

    align-items:start;

}


/* ==========================================================
   KARTU WAKIL
========================================================== */

.organization-page .organization-level-children
> .organization-card{

    width:100%;

    min-width:0;

    padding:16px;

    display:flex;

    align-items:flex-start;

    gap:12px;

    text-align:left;

    box-sizing:border-box;

}


/* ==========================================================
   FOTO WAKIL
========================================================== */

.organization-page .organization-level-children
> .organization-card
.organization-photo{

    width:44px;

    height:44px;

    min-width:44px;

}


/* ==========================================================
   JABATAN WAKIL
========================================================== */

.organization-page .organization-level-children
> .organization-card
.organization-position{

    font-size:8.5px;

    padding:4px 8px;

    line-height:1.35;

}


/* ==========================================================
   NAMA WAKIL
========================================================== */

.organization-page .organization-level-children
> .organization-card
.organization-info h3{

    font-size:14px;

    line-height:1.35;

    margin-bottom:5px;

}


/* ==========================================================
   TUGAS WAKIL
========================================================== */

.organization-page .organization-level-children
> .organization-card
.organization-info p{

    font-size:10.5px;

    line-height:1.55;

}


/* ==========================================================
   KOORDINATOR
========================================================== */

.organization-page .organization-subchildren{

    width:100%;

    margin-top:14px;

    padding-top:14px;

    display:block;

    box-sizing:border-box;

}


/* ==========================================================
   KARTU KOORDINATOR
========================================================== */

.organization-page .organization-card-small{

    width:100%;

    max-width:100%;

    padding:13px;

    margin:0;

    display:flex;

    align-items:flex-start;

    gap:10px;

    box-sizing:border-box;

    text-align:left;

}


/* ==========================================================
   ICON KOORDINATOR
========================================================== */

.organization-page .organization-card-small
.organization-photo{

    width:38px;

    height:38px;

    min-width:38px;

}


/* ==========================================================
   JABATAN KOORDINATOR
========================================================== */

.organization-page .organization-card-small
.organization-position{

    font-size:8px;

    padding:4px 7px;

    line-height:1.3;

}


/* ==========================================================
   NAMA KOORDINATOR
========================================================== */

.organization-page .organization-card-small
.organization-info h3{

    font-size:13px;

    line-height:1.35;

    margin-bottom:4px;

}


/* ==========================================================
   TUGAS KOORDINATOR
========================================================== */

.organization-page .organization-card-small
.organization-info p{

    font-size:10px;

    line-height:1.5;

}


/* ==========================================================
   TASK / TUGAS JABATAN
========================================================== */

.organization-page .organization-task-grid{

    display:grid;

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

    gap:16px;

}


.organization-page .organization-task-card{

    padding:18px;

    text-align:left;

    box-sizing:border-box;

}


.organization-page .organization-task-icon{

    width:38px;

    height:38px;

    margin:0 0 10px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.organization-page .organization-task-icon i{

    font-size:17px;

}


.organization-page .organization-task-position{

    display:inline-block;

    margin-bottom:6px;

    font-size:9px;

    font-weight:700;

    line-height:1.4;

    text-align:left;

}


.organization-page .organization-task-card h3{

    margin:0 0 7px;

    font-size:14px;

    line-height:1.4;

    text-align:left;

}


.organization-page .organization-task-card p{

    margin:0;

    font-size:11px;

    line-height:1.6;

    color:#64748b;

    text-align:left;

}


/* ==========================================================
   DESKRIPSI
========================================================== */

.organization-page .organization-description{

    max-width:650px;

    margin-left:auto;

    margin-right:auto;

    font-size:13px;

    line-height:1.7;

}


/* ==========================================================
   IDENTITAS
========================================================== */

.organization-page .profile-identity-grid{

    gap:14px;

}


.organization-page .profile-data{

    padding:15px;

}


.organization-page .profile-data-icon{

    width:38px;

    height:38px;

    min-width:38px;

}


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

@media (max-width:991px){

    .organization-page .organization-level-children{

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

    }


    .organization-page .organization-task-grid{

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

    }

}


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

@media (max-width:767px){

    .organization-page .organization-card-main{

        width:100%;

        padding:16px;

    }


    .organization-page .organization-level-children{

        grid-template-columns:1fr;

        gap:12px;

    }


    .organization-page .organization-task-grid{

        grid-template-columns:1fr;

    }


    .organization-page .organization-level-children
    > .organization-card{

        padding:14px;

    }

}


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

@media (max-width:480px){

    .organization-page .organization-card-main{

        gap:12px;

        padding:14px;

    }


    .organization-page .organization-photo{

        width:46px;

        height:46px;

        min-width:46px;

    }


    .organization-page .organization-info h3{

        font-size:14px;

    }


    .organization-page .organization-info p{

        font-size:10.5px;

    }


    .organization-page .organization-card-small{

        padding:11px;

    }

}
/* ==========================================================
   STRUKTUR ORGANISASI
   CSS KHUSUS - TIDAK MENGUBAH BAGIAN LAIN
========================================================== */

/* ----------------------------------------------------------
   SECTION
---------------------------------------------------------- */

.organization-section,
.organization-tasks-section,
.organization-information-section,
.organization-summary-section {

    position: relative;
}


/* ----------------------------------------------------------
   DESKRIPSI
---------------------------------------------------------- */

.organization-description {

    max-width: 720px;
    margin: 12px auto 0;

    font-size: 15px;
    line-height: 1.8;

    color: #64748b;

    text-align: center;

}


/* ----------------------------------------------------------
   BAGAN ORGANISASI
---------------------------------------------------------- */

.organization-chart {

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

    margin: 40px auto 0;

    text-align: center;

}


/* ----------------------------------------------------------
   LEVEL UTAMA
---------------------------------------------------------- */

.organization-level-main {

    display: flex;

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

    width: 100%;
}


/* ----------------------------------------------------------
   KARTU ORGANISASI
---------------------------------------------------------- */

.organization-card {

    position: relative;

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

    padding: 20px 18px;

    background: #ffffff;

    border: 1px solid #e8edf2;

    border-radius: 14px;

    box-shadow:
        0 5px 18px rgba(15, 76, 129, 0.07);

    text-align: center;

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

}


/* ----------------------------------------------------------
   HOVER
---------------------------------------------------------- */

.organization-card:hover {

    transform: translateY(-3px);

    border-color: rgba(15, 76, 129, 0.25);

    box-shadow:
        0 10px 25px rgba(15, 76, 129, 0.12);

}


/* ----------------------------------------------------------
   KARTU KEPALA SEKOLAH
---------------------------------------------------------- */

.organization-card-main {

    max-width: 330px;

    padding: 24px 22px;

    border: 1px solid rgba(15, 76, 129, 0.18);

    box-shadow:
        0 8px 25px rgba(15, 76, 129, 0.10);

}


/* ----------------------------------------------------------
   FOTO
---------------------------------------------------------- */

.organization-photo {

    width: 72px;
    height: 72px;

    margin: 0 auto 12px;

    overflow: hidden;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #eef5fa,
            #dfeaf3
        );

    border: 3px solid #ffffff;

    box-shadow:
        0 3px 12px rgba(0,0,0,.08);

}


/* ----------------------------------------------------------
   FOTO UTAMA
---------------------------------------------------------- */

.organization-card-main .organization-photo {

    width: 82px;
    height: 82px;

}


/* ----------------------------------------------------------
   GAMBAR
---------------------------------------------------------- */

.organization-photo img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


/* ----------------------------------------------------------
   FOTO DEFAULT
---------------------------------------------------------- */

.organization-photo-default {

    width: 100%;
    height: 100%;

    display: flex;

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

    color: #0F4C81;

    font-size: 28px;

}


/* ----------------------------------------------------------
   INFO
---------------------------------------------------------- */

.organization-info {

    min-width: 0;

}


/* ----------------------------------------------------------
   JABATAN
---------------------------------------------------------- */

.organization-position {

    display: inline-block;

    margin-bottom: 6px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;

    color: #0F4C81;

}


/* ----------------------------------------------------------
   NAMA
---------------------------------------------------------- */

.organization-info h3 {

    margin: 0;

    font-size: 17px;

    line-height: 1.4;

    font-weight: 700;

    color: #172033;

}


/* ----------------------------------------------------------
   TUGAS
---------------------------------------------------------- */

.organization-info p {

    margin: 10px 0 0;

    font-size: 13px;

    line-height: 1.7;

    color: #64748b;

}


/* ----------------------------------------------------------
   CONNECTOR
---------------------------------------------------------- */

.organization-connector {

    position: relative;

    width: 1px;
    height: 35px;

    margin: 0 auto;

    background: #cbd5e1;

}


/* titik connector */

.organization-connector::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 7px;
    height: 7px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #0F4C81;

}


/* ----------------------------------------------------------
   LEVEL ANAK
---------------------------------------------------------- */

.organization-level-children {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

    width: 100%;

    max-width: 1050px;

    margin: 0 auto;

    padding-top: 25px;

}


/* garis horizontal anak */

.organization-level-children::before {

    content: "";

    position: absolute;

    top: 0;

    left: 10%;

    right: 10%;

    height: 1px;

    background: #cbd5e1;

}


/* ----------------------------------------------------------
   KARTU ANAK
---------------------------------------------------------- */

.organization-level-children > .organization-card {

    max-width: none;

}


/* ----------------------------------------------------------
   SUB CHILDREN
---------------------------------------------------------- */

.organization-subchildren {

    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;

    margin-top: 18px;

    padding-top: 18px;

    border-top: 1px dashed #dbe3ea;

}


/* ----------------------------------------------------------
   KARTU KECIL
---------------------------------------------------------- */

.organization-card-small {

    max-width: none;

    padding: 15px;

    border-radius: 11px;

    background: #f9fbfc;

    box-shadow: none;

}


.organization-card-small .organization-photo {

    width: 54px;
    height: 54px;

}


.organization-card-small .organization-info h3 {

    font-size: 15px;

}


.organization-card-small .organization-info p {

    font-size: 12px;

}


/* ==========================================================
   TUGAS DAN TANGGUNG JAWAB
========================================================== */

.organization-task-grid {

    display: grid;

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

    gap: 20px;

    max-width: 1150px;

    margin: 40px auto 0;

}


.organization-task-card {

    position: relative;

    padding: 25px 22px;

    background: #ffffff;

    border: 1px solid #e8edf2;

    border-radius: 14px;

    text-align: center;

    box-shadow:
        0 5px 18px rgba(15, 76, 129, .06);

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

}


.organization-task-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(15, 76, 129, .10);

}


/* ----------------------------------------------------------
   ICON TUGAS
---------------------------------------------------------- */

.organization-task-icon {

    width: 48px;
    height: 48px;

    display: flex;

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

    margin: 0 auto 14px;

    border-radius: 12px;

    background: #eef5fa;

    color: #0F4C81;

    font-size: 21px;

}


.organization-task-position {

    display: block;

    margin-bottom: 6px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .5px;

    text-transform: uppercase;

    color: #0F4C81;

}


.organization-task-card h3 {

    margin: 0;

    font-size: 17px;

    line-height: 1.4;

    color: #172033;

}


.organization-task-card p {

    margin: 10px 0 0;

    font-size: 13px;

    line-height: 1.7;

    color: #64748b;

}


/* ==========================================================
   DATA KOSONG
========================================================== */

.organization-empty {

    max-width: 600px;

    margin: 40px auto;

    padding: 45px 25px;

    text-align: center;

    background: #ffffff;

    border: 1px dashed #cbd5e1;

    border-radius: 16px;

}


.organization-empty-icon {

    width: 60px;
    height: 60px;

    display: flex;

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

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #eef5fa;

    color: #0F4C81;

    font-size: 25px;

}


.organization-empty h3 {

    margin: 0;

    font-size: 19px;

    color: #172033;

}


.organization-empty p {

    margin: 10px auto 0;

    max-width: 480px;

    font-size: 14px;

    line-height: 1.7;

    color: #64748b;

}


/* ==========================================================
   INFORMASI ORGANISASI
========================================================== */

.organization-information-section {

    padding-top: 70px;

}


.organization-address {

    display: flex;

    gap: 10px;

    align-items: flex-start;

    margin-top: 20px;

    padding: 15px;

    border-radius: 10px;

    background: #f7f9fb;

    color: #64748b;

    font-size: 13px;

    line-height: 1.7;

}


.organization-address i {

    flex-shrink: 0;

    margin-top: 3px;

    color: #0F4C81;

}


/* ==========================================================
   RINGKASAN
========================================================== */

.organization-summary-section {

    padding-top: 60px;

}


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

@media (max-width: 991px) {

    .organization-task-grid {

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

    }


    .organization-level-children {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


/* ==========================================================
   RESPONSIVE MOBILE
========================================================== */

@media (max-width: 767px) {

    .organization-chart {

        margin-top: 30px;

    }


    .organization-card {

        max-width: 100%;

        padding: 18px 15px;

    }


    .organization-card-main {

        max-width: 300px;

        padding: 20px 18px;

    }


    .organization-photo {

        width: 62px;
        height: 62px;

    }


    .organization-card-main .organization-photo {

        width: 72px;
        height: 72px;

    }


    .organization-info h3 {

        font-size: 16px;

    }


    .organization-info p {

        font-size: 12px;

    }


    .organization-level-children {

        grid-template-columns: 1fr;

        gap: 15px;

        padding-top: 20px;

    }


    .organization-level-children::before {

        display: none;

    }


    .organization-task-grid {

        grid-template-columns: 1fr;

        gap: 15px;

        margin-top: 30px;

    }


    .organization-task-card {

        padding: 22px 18px;

    }


    .organization-task-card h3 {

        font-size: 16px;

    }


    .organization-description {

        font-size: 13px;

        line-height: 1.7;

    }

}


/* ==========================================================
   MOBILE KECIL
========================================================== */

@media (max-width: 480px) {

    .organization-card-main {

        max-width: 270px;

    }


    .organization-position {

        font-size: 10px;

    }


    .organization-info h3 {

        font-size: 15px;

    }


    .organization-info p {

        font-size: 11.5px;

    }


    .organization-task-card p {

        font-size: 12px;

    }

}
/* ==========================================================
   KHUSUS STRUKTUR ORGANISASI
   JANGAN MENGUBAH CSS BAGIAN PROFIL LAIN
========================================================== */


/* ==========================================================
   AREA BAGAN
========================================================== */

.organization-page .organization-chart {

    width: 100%;
    max-width: 1400px;

    margin: 45px auto 0;

    position: relative;

    text-align: center;

}


/* ==========================================================
   KEPALA SEKOLAH
========================================================== */

.organization-page .organization-level-main {

    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    width: 100%;

    margin: 0 auto;

}


.organization-page .organization-card-main {

    width: 330px !important;
    max-width: 330px !important;

    min-width: 330px;

    padding: 24px !important;

    box-sizing: border-box;

}


/* ==========================================================
   FOTO
========================================================== */

.organization-page .organization-photo {

    width: 68px;
    height: 68px;

    flex: 0 0 68px;

    margin: 0 auto 12px;

    overflow: hidden;

    border-radius: 50%;

    box-sizing: border-box;

}


.organization-page .organization-card-main .organization-photo {

    width: 78px;
    height: 78px;

    flex-basis: 78px;

}


/* ==========================================================
   FOTO IMAGE
========================================================== */

.organization-page .organization-photo img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


/* ==========================================================
   DEFAULT FOTO
========================================================== */

.organization-page .organization-photo-default {

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

}


/* ==========================================================
   INFO
   PENTING: SUPAYA TIDAK VERTIKAL
========================================================== */

.organization-page .organization-info {

    width: 100%;

    min-width: 0;

    display: block;

    text-align: center;

}


/* ==========================================================
   JABATAN
========================================================== */

.organization-page .organization-position {

    display: inline-block !important;

    width: auto !important;

    max-width: 100%;

    margin: 0 auto 7px;

    white-space: normal !important;

    writing-mode: horizontal-tb !important;

    text-orientation: mixed !important;

    word-break: normal !important;

    overflow-wrap: normal !important;

    transform: none !important;

    font-size: 10px;

    line-height: 1.35;

}


/* ==========================================================
   NAMA
========================================================== */

.organization-page .organization-info h3 {

    display: block;

    width: 100%;

    margin: 0;

    font-size: 17px;

    line-height: 1.4;

    text-align: center;

}


/* ==========================================================
   TUGAS
========================================================== */

.organization-page .organization-info p {

    display: block;

    width: 100%;

    margin: 9px 0 0;

    font-size: 12px;

    line-height: 1.65;

    text-align: center;

}


/* ==========================================================
   GARIS DARI KEPALA SEKOLAH KE 5 CABANG
========================================================== */

.organization-page .organization-connector {

    position: relative;

    width: 100%;
    height: 65px;

    margin: 0 auto;

    background: none;

}


/* garis vertikal dari kepala sekolah */

.organization-page .organization-connector::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 2px;
    height: 32px;

    transform: translateX(-50%);

    background: #cbd5e1;

}


/* garis horizontal */

.organization-page .organization-connector::after {

    content: "";

    position: absolute;

    top: 32px;

    left: 10%;
    right: 10%;

    width: auto;
    height: 2px;

    transform: none;

    border-radius: 0;

    background: #cbd5e1;

}


/* ==========================================================
   5 KARTU UTAMA
========================================================== */

.organization-page .organization-level-children {

    position: relative;

    display: grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    gap: 16px !important;

    width: 100%;

    max-width: 1360px;

    margin: 0 auto;

    padding: 0 20px !important;

    box-sizing: border-box;

}


/* matikan garis lama */

.organization-page .organization-level-children::before {

    display: none !important;

}


/* ==========================================================
   KARTU WAKA
========================================================== */

.organization-page
.organization-level-children
> .organization-card {

    position: relative;

    width: 100% !important;

    max-width: none !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 20px 15px !important;

    box-sizing: border-box;

    display: block !important;

    text-align: center;

}


/* ==========================================================
   GARIS VERTIKAL MASUK KE SETIAP KARTU
========================================================== */

.organization-page
.organization-level-children
> .organization-card::before {

    content: "";

    position: absolute;

    top: -32px;
    left: 50%;

    width: 2px;
    height: 32px;

    transform: translateX(-50%);

    background: #cbd5e1;

}


/* titik penghubung */

.organization-page
.organization-level-children
> .organization-card::after {

    content: "";

    position: absolute;

    top: -36px;
    left: 50%;

    width: 8px;
    height: 8px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #0F4C81;

}


/* ==========================================================
   FOTO KARTU WAKA
========================================================== */

.organization-page
.organization-level-children
> .organization-card
.organization-photo {

    width: 58px;
    height: 58px;

    flex-basis: 58px;

    margin-bottom: 11px;

}


/* ==========================================================
   JABATAN WAKA
========================================================== */

.organization-page
.organization-level-children
> .organization-card
.organization-position {

    display: inline-block !important;

    width: auto !important;

    max-width: 95%;

    padding: 5px 9px;

    border-radius: 20px;

    background: #f0f4f8;

    font-size: 9px;

    line-height: 1.3;

    letter-spacing: .35px;

}


/* ==========================================================
   NAMA WAKA
========================================================== */

.organization-page
.organization-level-children
> .organization-card
.organization-info
h3 {

    font-size: 15px;

    line-height: 1.35;

}


/* ==========================================================
   TUGAS WAKA
========================================================== */

.organization-page
.organization-level-children
> .organization-card
.organization-info
p {

    margin-top: 8px;

    font-size: 11.5px;

    line-height: 1.6;

}


/* ==========================================================
   KOORDINATOR DI BAWAH KARTU
========================================================== */

.organization-page .organization-subchildren {

    position: relative;

    width: 100%;

    margin: 24px 0 0;

    padding: 22px 0 0;

    border-top: 1px dashed #d5dde5;

    display: block;

}


/* garis penghubung ke koordinator */

.organization-page .organization-subchildren::before {

    content: "";

    position: absolute;

    top: -24px;
    left: 50%;

    width: 2px;
    height: 24px;

    transform: translateX(-50%);

    background: #cbd5e1;

}


/* ==========================================================
   KARTU KOORDINATOR
========================================================== */

.organization-page .organization-card-small {

    width: 100% !important;

    max-width: none !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 15px 12px !important;

    box-sizing: border-box;

    border-radius: 11px;

    background: #f9fbfd;

    box-shadow: none;

}


/* ==========================================================
   FOTO KOORDINATOR
========================================================== */

.organization-page .organization-card-small
.organization-photo {

    width: 48px;
    height: 48px;

    flex-basis: 48px;

    margin-bottom: 8px;

}


/* ==========================================================
   JABATAN KOORDINATOR
========================================================== */

.organization-page .organization-card-small
.organization-position {

    display: inline-block !important;

    width: auto !important;

    max-width: 95%;

    padding: 4px 7px;

    font-size: 8.5px;

    line-height: 1.3;

    white-space: normal !important;

    writing-mode: horizontal-tb !important;

}


/* ==========================================================
   NAMA KOORDINATOR
========================================================== */

.organization-page .organization-card-small
.organization-info
h3 {

    font-size: 13px;

    line-height: 1.35;

}


/* ==========================================================
   TUGAS KOORDINATOR
========================================================== */

.organization-page .organization-card-small
.organization-info
p {

    margin-top: 7px;

    font-size: 10.5px;

    line-height: 1.55;

}


/* ==========================================================
   HILANGKAN EFEK TRANSFORM YANG MENGGANGGU
========================================================== */

.organization-page
.organization-card:hover {

    transform: translateY(-3px);

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .organization-page
    .organization-level-children {

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        row-gap: 45px !important;

    }


    .organization-page
    .organization-level-children
    > .organization-card::before {

        top: -32px;

    }

}


/* ==========================================================
   TABLET KECIL
========================================================== */

@media (max-width: 768px) {

    .organization-page
    .organization-card-main {

        width: 290px !important;

        min-width: 290px;

        max-width: 290px !important;

    }


    .organization-page
    .organization-level-children {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 16px !important;

        padding: 0 12px !important;

    }


    .organization-page
    .organization-connector {

        height: 45px;

    }


    .organization-page
    .organization-connector::after {

        left: 15%;
        right: 15%;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 520px) {

    .organization-page
    .organization-chart {

        margin-top: 30px;

    }


    .organization-page
    .organization-card-main {

        width: 270px !important;

        min-width: 270px;

        max-width: 270px !important;

        padding: 20px 16px !important;

    }


    .organization-page
    .organization-level-children {

        grid-template-columns: 1fr !important;

        gap: 35px !important;

        padding: 0 15px !important;

    }


    .organization-page
    .organization-level-children
    > .organization-card {

        padding: 18px 15px !important;

    }


    .organization-page
    .organization-level-children
    > .organization-card::before {

        top: -25px;

        height: 25px;

    }


    .organization-page
    .organization-level-children
    > .organization-card::after {

        top: -29px;

    }


    .organization-page
    .organization-connector {

        height: 40px;

    }


    .organization-page
    .organization-connector::after {

        left: 20%;
        right: 20%;

    }

}
/* ==========================================================
   PERBAIKAN LEBAR & TEKS STRUKTUR ORGANISASI
   OVERRIDE TERAKHIR
========================================================== */

.organization-page .organization-chart {

    max-width: 1500px;

}


/* ==========================================================
   5 KOLOM
========================================================== */

.organization-page
.organization-level-children {

    grid-template-columns:
        repeat(5, minmax(190px, 1fr)) !important;

    gap: 18px !important;

    max-width: 1450px;

    padding-left: 10px !important;
    padding-right: 10px !important;

}


/* ==========================================================
   KARTU WAKA
========================================================== */

.organization-page
.organization-level-children
> .organization-card {

    min-width: 0 !important;

    padding: 22px 18px !important;

}


/* ==========================================================
   JABATAN
   JANGAN TERLALU KECIL
========================================================== */

.organization-page
.organization-level-children
> .organization-card
.organization-position {

    display: inline-block !important;

    max-width: 100%;

    padding: 6px 10px;

    font-size: 10px;

    line-height: 1.35;

    letter-spacing: .2px;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: break-word !important;

}


/* ==========================================================
   NAMA WAKA
========================================================== */

.organization-page
.organization-level-children
> .organization-card
.organization-info
h3 {

    font-size: 16px;

    line-height: 1.4;

    margin-top: 8px;

}


/* ==========================================================
   DESKRIPSI WAKA
========================================================== */

.organization-page
.organization-level-children
> .organization-card
.organization-info
p {

    font-size: 12px;

    line-height: 1.65;

    margin-top: 10px;

}


/* ==========================================================
   KOORDINATOR
========================================================== */

.organization-page
.organization-card-small {

    padding: 18px 15px !important;

}


/* ==========================================================
   JABATAN KOORDINATOR
========================================================== */

.organization-page
.organization-card-small
.organization-position {

    display: inline-block !important;

    width: auto !important;

    max-width: 100%;

    padding: 5px 8px;

    font-size: 9px;

    line-height: 1.35;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: break-word !important;

}


/* ==========================================================
   NAMA KOORDINATOR
========================================================== */

.organization-page
.organization-card-small
.organization-info
h3 {

    font-size: 15px;

    line-height: 1.4;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: normal !important;

}


/* ==========================================================
   TUGAS KOORDINATOR
========================================================== */

.organization-page
.organization-card-small
.organization-info
p {

    font-size: 11px;

    line-height: 1.6;

}


/* ==========================================================
   FOTO
========================================================== */

.organization-page
.organization-level-children
> .organization-card
.organization-photo {

    width: 60px;
    height: 60px;

    flex-basis: 60px;

}


/* ==========================================================
   KOORDINATOR FOTO
========================================================== */

.organization-page
.organization-card-small
.organization-photo {

    width: 50px;
    height: 50px;

    flex-basis: 50px;

}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (min-width: 1300px) {

    .organization-page
    .organization-level-children {

        grid-template-columns:
            repeat(5, minmax(210px, 1fr)) !important;

        gap: 20px !important;

    }


    .organization-page
    .organization-level-children
    > .organization-card {

        padding-left: 20px !important;
        padding-right: 20px !important;

    }


    .organization-page
    .organization-level-children
    > .organization-card
    .organization-info
    h3 {

        font-size: 17px;

    }


    .organization-page
    .organization-level-children
    > .organization-card
    .organization-info
    p {

        font-size: 12.5px;

    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 992px) and (max-width: 1299px) {

    .organization-page
    .organization-level-children {

        grid-template-columns:
            repeat(5, minmax(175px, 1fr)) !important;

        gap: 14px !important;

    }


    .organization-page
    .organization-level-children
    > .organization-card {

        padding-left: 13px !important;
        padding-right: 13px !important;

    }


    .organization-page
    .organization-level-children
    > .organization-card
    .organization-info
    h3 {

        font-size: 15px;

    }


    .organization-page
    .organization-level-children
    > .organization-card
    .organization-info
    p {

        font-size: 11.5px;

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px) {

    .organization-page
    .organization-level-children {

        grid-template-columns:
            repeat(3, minmax(190px, 1fr)) !important;

        gap: 18px !important;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .organization-page
    .organization-level-children {

        grid-template-columns: 1fr !important;

        gap: 30px !important;

    }


    .organization-page
    .organization-level-children
    > .organization-card {

        padding: 22px 20px !important;

    }


    .organization-page
    .organization-level-children
    > .organization-card
    .organization-info
    h3 {

        font-size: 17px;

    }


    .organization-page
    .organization-level-children
    > .organization-card
    .organization-info
    p {

        font-size: 13px;

    }


    .organization-page
    .organization-card-small
    .organization-info
    h3 {

        font-size: 15px;

    }

}
/* ==========================================================
   STRUKTUR ORGANISASI - CLEAN 3 COLUMN
   Khusus halaman struktur organisasi
========================================================== */

.organization-section {
    background: #f5f8fc;
    padding: 70px 0 90px;
    overflow: hidden;
}

.organization-section .container {
    max-width: 1250px;
    margin: 0 auto;
}


/* ==========================================================
   HEADER
========================================================== */

.organization-section .profile-about-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 50px;
}

.organization-section .profile-kicker {
    display: inline-block;
    margin-bottom: 10px;
}

.organization-section .profile-about-header h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1.25;
    color: #14213d;
}

.organization-section .profile-title-line {
    width: 70px;
    height: 4px;
    margin: 18px auto;
    border-radius: 10px;
    background: #0f4c81;
}

.organization-description {
    max-width: 700px;
    margin: 0 auto;
    color: #667892;
    font-size: 16px;
    line-height: 1.8;
}


/* ==========================================================
   BAGAN
========================================================== */

.organization-chart {
    width: 100%;
    position: relative;
}


/* ==========================================================
   KARTU UTAMA
========================================================== */

.organization-level-main {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

.organization-card-main {
    width: min(100%, 520px);
    min-height: 250px;
}


/* ==========================================================
   SEMUA CARD
========================================================== */

.organization-card {
    position: relative;
    width: 100%;
    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e1e8f0;
    border-radius: 20px;

    padding: 28px;

    box-shadow:
        0 10px 30px rgba(15, 76, 129, 0.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.organization-card:hover {
    transform: translateY(-4px);

    border-color: #c8d8e8;

    box-shadow:
        0 18px 40px rgba(15, 76, 129, 0.12);
}


/* ==========================================================
   FOTO
========================================================== */

.organization-photo {
    width: 72px;
    height: 72px;

    flex-shrink: 0;

    margin-bottom: 20px;

    border-radius: 50%;

    background: #f1f5f9;

    border: 5px solid #ffffff;

    box-shadow:
        0 8px 22px rgba(31, 61, 92, 0.12);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.organization-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.organization-photo-default {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #7186a1;
    font-size: 28px;
}


/* ==========================================================
   INFORMASI
========================================================== */

.organization-info {
    width: 100%;
    text-align: left;
}


/* JABATAN */

.organization-position {
    display: inline-block;

    max-width: 100%;

    margin-bottom: 14px;
    padding: 8px 13px;

    border-radius: 20px;

    background: #eef3f8;
    color: #50627a;

    font-size: 12px;
    font-weight: 800;

    line-height: 1.4;

    text-align: left;

    word-break: normal;
    overflow-wrap: break-word;
}


/* NAMA */

.organization-info h3 {
    margin: 0 0 12px;

    color: #172238;

    font-size: 20px;
    font-weight: 800;

    line-height: 1.4;

    text-align: left;

    word-break: normal;
    overflow-wrap: break-word;
}


/* TUGAS */

.organization-info p {
    margin: 0;

    color: #687b95;

    font-size: 15px;
    line-height: 1.75;

    text-align: left;

    word-break: normal;
    overflow-wrap: break-word;
}


/* ==========================================================
   GARIS DARI ATAS KE BAWAH
========================================================== */

.organization-connector {
    width: 100%;
    height: 65px;

    position: relative;

    display: flex;
    justify-content: center;
    align-items: stretch;
}

.organization-connector span {
    display: block;

    width: 2px;
    height: 65px;

    background: #b9cce0;

    position: relative;
}


/* titik pada ujung garis */

.organization-connector span::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 50%;

    width: 10px;
    height: 10px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #0f4c81;

    border: 3px solid #f5f8fc;

    box-sizing: content-box;
}


/* ==========================================================
   ANAK ORGANISASI
========================================================== */

.organization-level-children {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;

    position: relative;
}


/* ==========================================================
   GARIS HORIZONTAL ATAS ANAK
========================================================== */

.organization-level-children::before {
    content: "";

    position: absolute;

    top: -1px;
    left: calc(16.666% + 10px);
    right: calc(16.666% + 10px);

    height: 2px;

    background: #b9cce0;

    z-index: 0;
}


/* ==========================================================
   GARIS VERTIKAL MASING-MASING ANAK
========================================================== */

.organization-level-children .organization-card {
    z-index: 1;

    margin-top: 28px;
}

.organization-level-children .organization-card::before {
    content: "";

    position: absolute;

    top: -29px;
    left: 50%;

    width: 2px;
    height: 29px;

    transform: translateX(-50%);

    background: #b9cce0;
}


/* titik penghubung */

.organization-level-children .organization-card::after {
    content: "";

    position: absolute;

    top: -34px;
    left: 50%;

    width: 8px;
    height: 8px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #0f4c81;

    border: 3px solid #f5f8fc;
}


/* ==========================================================
   ANAK LEVEL BERIKUTNYA
========================================================== */

.organization-subchildren {
    width: 100%;

    margin-top: 28px;
    padding-top: 28px;

    border-top: 1px dashed #cbd7e4;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


/* ==========================================================
   CARD KECIL
========================================================== */

.organization-card-small {
    padding: 22px;

    border-radius: 16px;

    box-shadow:
        0 6px 20px rgba(15, 76, 129, 0.06);
}

.organization-card-small .organization-photo {
    width: 58px;
    height: 58px;

    margin-bottom: 16px;
}

.organization-card-small .organization-info h3 {
    font-size: 17px;
}

.organization-card-small .organization-info p {
    font-size: 14px;
    line-height: 1.7;
}


/* ==========================================================
   AGAR TULISAN TIDAK TERPOTONG
========================================================== */

.organization-section .organization-card,
.organization-section .organization-info,
.organization-section .organization-position,
.organization-section h3,
.organization-section p {
    min-width: 0;
}

.organization-section h3,
.organization-section p,
.organization-section .organization-position {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}


/* ==========================================================
   DATA KOSONG
========================================================== */

.organization-empty {
    max-width: 650px;

    margin: 0 auto;

    padding: 50px 30px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e1e8f0;

    border-radius: 20px;

    box-shadow:
        0 10px 30px rgba(15, 76, 129, 0.06);
}

.organization-empty-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eef4f9;

    color: #0f4c81;

    font-size: 30px;
}

.organization-empty h3 {
    margin: 0 0 10px;

    font-size: 22px;
    color: #172238;
}

.organization-empty p {
    margin: 0;

    color: #687b95;

    line-height: 1.7;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

    .organization-section .container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .organization-level-children {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }

    .organization-level-children::before {
        left: 25%;
        right: 25%;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .organization-section {
        padding: 50px 0 70px;
    }

    .organization-section .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .organization-section .profile-about-header {
        margin-bottom: 35px;
    }

    .organization-section .profile-about-header h2 {
        font-size: 27px;
    }

    .organization-description {
        font-size: 14px;
    }


    /* satu kolom agar tidak sempit */

    .organization-level-children {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    /* garis horizontal tidak diperlukan */

    .organization-level-children::before {
        display: none;
    }


    .organization-level-children .organization-card {
        margin-top: 0;
    }


    .organization-level-children .organization-card::before {
        top: -23px;
        height: 23px;
    }

    .organization-level-children .organization-card::after {
        top: -28px;
    }


    /* card */

    .organization-card {
        padding: 24px;
        border-radius: 17px;
    }

    .organization-card-main {
        width: 100%;
    }


    /* sub children */

    .organization-subchildren {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width: 480px) {

    .organization-section .profile-about-header h2 {
        font-size: 24px;
    }

    .organization-card {
        padding: 20px;
    }

    .organization-photo {
        width: 64px;
        height: 64px;
    }

    .organization-info h3 {
        font-size: 18px;
    }

    .organization-info p {
        font-size: 14px;
        line-height: 1.7;
    }

    .organization-position {
        font-size: 11px;
    }

}
/* ==========================================================
   STRUKTUR ORGANISASI - FINAL OVERRIDE
   3 KOLOM DESKTOP
   TULISAN RATA KIRI
   KARTU TIDAK SEMPIT
   GARIS ORGANISASI JELAS
========================================================== */


/* ==========================================================
   1. SECTION
========================================================== */

.organization-section{
    width:100%;
    padding:70px 0 90px;
    overflow:hidden;
}

.organization-section .container{
    width:min(1400px, calc(100% - 40px));
    margin:0 auto;
}


/* ==========================================================
   2. HEADER
========================================================== */

.organization-section .profile-about-header{
    max-width:900px;
    margin:0 auto 50px;
    text-align:center;
}

.organization-section .profile-kicker{
    display:inline-block;
    margin-bottom:10px;
}

.organization-section .profile-about-header h2{
    margin:0;
}

.organization-description{
    max-width:720px;
    margin:18px auto 0;
    line-height:1.8;
}


/* ==========================================================
   3. BAGAN UTAMA
========================================================== */

.organization-chart{
    width:100%;
    position:relative;
}


/* ==========================================================
   4. LEVEL UTAMA
========================================================== */

.organization-level-main{
    width:100%;
    display:flex;
    justify-content:center;
    position:relative;
    z-index:5;
}


/* ==========================================================
   5. KARTU UTAMA
========================================================== */

.organization-card-main{
    width:min(430px, 100%);
    min-height:250px;
}


/* ==========================================================
   6. KARTU ORGANISASI
========================================================== */

.organization-card{
    box-sizing:border-box;
    width:100%;
    min-width:0;

    padding:26px;

    background:#fff;

    border:1px solid #e2e8f0;
    border-radius:18px;

    box-shadow:
        0 8px 25px rgba(15,23,42,.06);

    text-align:left;

    position:relative;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.organization-card:hover{
    transform:translateY(-3px);

    border-color:#cbd5e1;

    box-shadow:
        0 14px 35px rgba(15,23,42,.10);
}


/* ==========================================================
   7. FOTO
========================================================== */

.organization-photo{
    width:78px;
    height:78px;

    flex:0 0 78px;

    border-radius:50%;

    background:#f1f5f9;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border:6px solid #f8fafc;

    box-shadow:
        0 5px 18px rgba(15,23,42,.08);
}

.organization-photo img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

.organization-photo-default{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#64748b;

    font-size:30px;
}


/* ==========================================================
   8. DATA / TULISAN
========================================================== */

.organization-info{
    min-width:0;

    margin-top:20px;

    text-align:left;
}

.organization-position{
    display:inline-block;

    max-width:100%;

    padding:8px 13px;

    margin-bottom:14px;

    background:#f1f5f9;

    border-radius:999px;

    color:#475569;

    font-size:12px;
    font-weight:800;

    line-height:1.35;

    letter-spacing:.2px;

    text-align:left;

    white-space:normal;
    overflow-wrap:anywhere;
}

.organization-info h3{
    margin:0 0 12px;

    color:#0f172a;

    font-size:20px;
    font-weight:800;

    line-height:1.35;

    text-align:left;

    overflow-wrap:anywhere;
}

.organization-info p{
    margin:0;

    color:#64748b;

    font-size:15px;

    line-height:1.75;

    text-align:left;

    overflow-wrap:anywhere;
}


/* ==========================================================
   9. CONNECTOR VERTIKAL
========================================================== */

.organization-connector{
    width:100%;
    height:70px;

    display:flex;

    justify-content:center;
    align-items:center;

    position:relative;

    z-index:1;
}

.organization-connector span{
    display:block;

    width:2px;
    height:70px;

    background:#cbd5e1;

    position:relative;
}


/* ==========================================================
   10. LEVEL ANAK
   MAKSIMAL 3 KOLOM
========================================================== */

.organization-level-children{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:30px;

    align-items:start;

    position:relative;

    padding-top:28px;
}


/* ==========================================================
   11. GARIS HORIZONTAL LEVEL ANAK
========================================================== */

.organization-level-children::before{
    content:"";

    position:absolute;

    top:0;

    left:calc(16.666% + 15px);
    right:calc(16.666% + 15px);

    height:2px;

    background:#cbd5e1;
}


/* ==========================================================
   12. GARIS VERTIKAL KE SETIAP KARTU ANAK
========================================================== */

.organization-level-children .organization-card{
    position:relative;
}


/*
   Garis dari garis horizontal
   menuju kartu
*/

.organization-level-children .organization-card::before{
    content:"";

    position:absolute;

    top:-29px;

    left:50%;

    width:2px;
    height:29px;

    background:#cbd5e1;

    transform:translateX(-50%);
}


/* ==========================================================
   13. SUB CHILDREN
========================================================== */

.organization-subchildren{
    width:100%;

    margin-top:30px;

    padding-top:28px;

    display:grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:20px;

    position:relative;
}


/* garis horizontal sub level */

.organization-subchildren::before{
    content:"";

    position:absolute;

    top:0;

    left:25%;
    right:25%;

    height:2px;

    background:#d5dde7;
}


/* garis vertikal menuju sub card */

.organization-subchildren .organization-card::before{
    content:"";

    position:absolute;

    top:-29px;

    left:50%;

    width:2px;
    height:29px;

    background:#d5dde7;

    transform:translateX(-50%);
}


/* ==========================================================
   14. KARTU LEVEL KECIL
========================================================== */

.organization-card-small{
    padding:22px;
}

.organization-card-small .organization-photo{
    width:64px;
    height:64px;

    flex-basis:64px;
}

.organization-card-small .organization-info{
    margin-top:16px;
}

.organization-card-small .organization-info h3{
    font-size:17px;
}

.organization-card-small .organization-info p{
    font-size:14px;
    line-height:1.65;
}


/* ==========================================================
   15. FOTO + DATA UNTUK KARTU ANAK
   AGAR TIDAK TERLALU SEMPIT
========================================================== */

.organization-level-children > .organization-card{
    min-height:270px;
}

.organization-level-children > .organization-card
.organization-info{
    width:100%;
}


/* ==========================================================
   16. EMPTY STATE
========================================================== */

.organization-empty{
    width:min(650px, 100%);

    margin:40px auto 0;

    padding:50px 35px;

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:20px;

    text-align:center;

    box-shadow:
        0 10px 30px rgba(15,23,42,.06);
}

.organization-empty-icon{
    width:70px;
    height:70px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#f1f5f9;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#64748b;

    font-size:30px;
}

.organization-empty h3{
    margin:0 0 12px;

    color:#0f172a;

    font-size:21px;
}

.organization-empty p{
    margin:0;

    color:#64748b;

    line-height:1.7;
}


/* ==========================================================
   17. TABLET
   2 KOLOM
========================================================== */

@media (max-width:1100px){

    .organization-section .container{
        width:min(100% - 32px, 1000px);
    }

    .organization-level-children{
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:24px;
    }

    .organization-level-children::before{
        left:25%;
        right:25%;
    }

    .organization-card{
        padding:23px;
    }

}


/* ==========================================================
   18. MOBILE BESAR
========================================================== */

@media (max-width:760px){

    .organization-section{
        padding:50px 0 70px;
    }

    .organization-section .container{
        width:calc(100% - 24px);
    }

    .organization-section .profile-about-header{
        margin-bottom:35px;
    }

    .organization-description{
        font-size:14px;
        line-height:1.7;
    }


    /* ------------------------------------------
       LEVEL ANAK
    ------------------------------------------ */

    .organization-level-children{
        grid-template-columns:1fr;

        gap:26px;

        padding-top:0;
    }


    /* hilangkan garis horizontal */
    .organization-level-children::before{
        display:none;
    }


    /* ------------------------------------------
       GARIS DARI CONNECTOR UTAMA
    ------------------------------------------ */

    .organization-level-children
    .organization-card::before{

        top:-26px;

        height:26px;
    }


    /* ------------------------------------------
       SUB CHILD
    ------------------------------------------ */

    .organization-subchildren{
        grid-template-columns:1fr;

        gap:20px;

        padding-top:0;
    }

    .organization-subchildren::before{
        display:none;
    }

    .organization-subchildren
    .organization-card::before{

        top:-20px;

        height:20px;
    }


    /* ------------------------------------------
       CARD
    ------------------------------------------ */

    .organization-card{
        padding:22px;

        border-radius:16px;
    }

    .organization-card-main{
        width:100%;
    }


    /* ------------------------------------------
       TEXT
    ------------------------------------------ */

    .organization-info h3{
        font-size:19px;
    }

    .organization-info p{
        font-size:14px;
        line-height:1.7;
    }

}


/* ==========================================================
   19. MOBILE KECIL
========================================================== */

@media (max-width:480px){

    .organization-section .container{
        width:calc(100% - 18px);
    }

    .organization-card{
        padding:18px;
    }

    .organization-photo{
        width:68px;
        height:68px;

        flex-basis:68px;
    }

    .organization-position{
        font-size:11px;

        padding:7px 11px;
    }

    .organization-info{
        margin-top:16px;
    }

    .organization-info h3{
        font-size:18px;
    }

    .organization-info p{
        font-size:14px;
    }

    .organization-connector{
        height:55px;
    }

    .organization-connector span{
        height:55px;
    }

}


/* ==========================================================
   20. PERBAIKAN KHUSUS TEKS PANJANG
========================================================== */

.organization-position,
.organization-info h3,
.organization-info p{
    word-break:normal;
    overflow-wrap:anywhere;
    hyphens:auto;
}


/* ==========================================================
   21. JANGAN BIARKAN KARTU MENYEMPIT
========================================================== */

.organization-level-children > .organization-card{
    min-width:0;
    width:100%;
}


/* ==========================================================
   22. DESKTOP BESAR
========================================================== */

@media (min-width:1200px){

    .organization-level-children{
        gap:34px;
    }

    .organization-card{
        padding:28px;
    }

    .organization-level-children > .organization-card{
        min-height:300px;
    }

}
/* ==========================================================
   FIX DESKTOP SAJA
   MOBILE TIDAK DIUBAH
========================================================== */

@media (min-width: 761px){

    /* ------------------------------------------
       CONTAINER
    ------------------------------------------ */

    .organization-section .container{
        width:calc(100% - 50px);
        max-width:1400px;
        margin-left:auto;
        margin-right:auto;
    }


    /* ------------------------------------------
       BAGAN
    ------------------------------------------ */

    .organization-chart{
        width:100%;
        max-width:1400px;
        margin:0 auto;
        overflow:visible;
    }


    /* ------------------------------------------
       LEVEL UTAMA
    ------------------------------------------ */

    .organization-level-main{
        width:100%;
        display:flex;
        justify-content:center;
    }


    .organization-card-main{
        width:430px;
        max-width:430px;
    }


    /* ------------------------------------------
       LEVEL ANAK
       3 KOLOM
    ------------------------------------------ */

    .organization-level-children{

        width:100%;

        display:grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap:30px;

        align-items:start;

        padding-top:35px;

        position:relative;
    }


    /* ------------------------------------------
       GARIS HORIZONTAL
    ------------------------------------------ */

    .organization-level-children::before{

        content:"";

        position:absolute;

        top:0;

        left:16.6667%;

        right:16.6667%;

        height:2px;

        background:#cbd5e1;
    }


    /* ------------------------------------------
       KARTU ANAK
    ------------------------------------------ */

    .organization-level-children > .organization-card{

        width:100%;

        min-width:0;

        min-height:320px;

        padding:28px;

        box-sizing:border-box;

        text-align:left;

        position:relative;
    }


    /* ------------------------------------------
       GARIS DARI GARIS UTAMA
       KE KARTU
    ------------------------------------------ */

    .organization-level-children
    > .organization-card::before{

        content:"";

        position:absolute;

        top:-35px;

        left:50%;

        width:2px;

        height:35px;

        background:#cbd5e1;

        transform:translateX(-50%);
    }


    /* ------------------------------------------
       FOTO
    ------------------------------------------ */

    .organization-level-children
    > .organization-card
    .organization-photo{

        width:78px;
        height:78px;

        flex:0 0 78px;

        margin-bottom:20px;
    }


    /* ------------------------------------------
       INFO
    ------------------------------------------ */

    .organization-level-children
    > .organization-card
    .organization-info{

        width:100%;

        margin-top:0;

        text-align:left;
    }


    /* ------------------------------------------
       JABATAN
    ------------------------------------------ */

    .organization-level-children
    > .organization-card
    .organization-position{

        display:inline-block;

        max-width:100%;

        margin-bottom:15px;

        padding:8px 13px;

        text-align:left;

        white-space:normal;

        overflow-wrap:anywhere;

        line-height:1.4;
    }


    /* ------------------------------------------
       NAMA
    ------------------------------------------ */

    .organization-level-children
    > .organization-card
    .organization-info h3{

        margin:0 0 13px;

        font-size:20px;

        line-height:1.4;

        text-align:left;

        overflow-wrap:anywhere;
    }


    /* ------------------------------------------
       TUGAS
    ------------------------------------------ */

    .organization-level-children
    > .organization-card
    .organization-info p{

        margin:0;

        font-size:15px;

        line-height:1.75;

        text-align:left;

        overflow-wrap:anywhere;
    }


    /* ==================================================
       SUB CHILD
    ================================================== */

    .organization-subchildren{

        width:100%;

        display:grid;

        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap:20px;

        margin-top:30px;

        padding-top:30px;

        position:relative;
    }


    /* garis horizontal sub */

    .organization-subchildren::before{

        content:"";

        position:absolute;

        top:0;

        left:25%;

        right:25%;

        height:2px;

        background:#d1d9e3;
    }


    /* garis vertikal sub */

    .organization-subchildren
    .organization-card::before{

        content:"";

        position:absolute;

        top:-30px;

        left:50%;

        width:2px;

        height:30px;

        background:#d1d9e3;

        transform:translateX(-50%);
    }


    /* ------------------------------------------
       SUB CARD
    ------------------------------------------ */

    .organization-card-small{

        min-width:0;

        width:100%;

        padding:22px;

        box-sizing:border-box;

        text-align:left;
    }


    .organization-card-small
    .organization-info{

        text-align:left;
    }


    .organization-card-small
    .organization-info h3{

        font-size:18px;

        line-height:1.4;

        text-align:left;
    }


    .organization-card-small
    .organization-info p{

        font-size:14px;

        line-height:1.7;

        text-align:left;
    }

}


/* ==========================================================
   DESKTOP LEBIH BESAR
========================================================== */

@media (min-width:1200px){

    .organization-section .container{
        width:calc(100% - 70px);
        max-width:1450px;
    }

    .organization-level-children{
        gap:34px;
    }

    .organization-level-children > .organization-card{
        min-height:340px;
        padding:30px;
    }

}


/* ==========================================================
   DESKTOP BESAR SEKALI
========================================================== */

@media (min-width:1500px){

    .organization-section .container{
        max-width:1500px;
    }

    .organization-level-children{
        gap:38px;
    }

}
/* ==========================================================
   ORGANIZATION DESKTOP - FORCE 3 COLUMN
   OVERRIDE SEMUA CSS LAMA
========================================================== */


/* ==========================================================
   DESKTOP
========================================================== */

@media screen and (min-width: 761px) {

    /* ------------------------------------------
       AREA UTAMA
    ------------------------------------------ */

    .organization-page
    .organization-section
    .organization-chart {

        width:100% !important;
        max-width:1400px !important;

        margin-left:auto !important;
        margin-right:auto !important;

        overflow:visible !important;
    }


    /* ------------------------------------------
       LEVEL UTAMA
    ------------------------------------------ */

    .organization-page
    .organization-level-main {

        width:100% !important;

        display:flex !important;

        justify-content:center !important;

        margin:0 !important;

        padding:0 !important;
    }


    /* ------------------------------------------
       CARD UTAMA
    ------------------------------------------ */

    .organization-page
    .organization-level-main
    .organization-card-main {

        width:430px !important;

        max-width:430px !important;

        min-width:430px !important;

        margin:0 auto !important;

        box-sizing:border-box !important;
    }


    /* ==================================================
       LEVEL ANAK
    ================================================== */

    .organization-page
    .organization-level-children {

        display:grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        width:100% !important;

        max-width:1400px !important;

        gap:30px !important;

        margin:0 !important;

        padding:40px 0 0 !important;

        box-sizing:border-box !important;

        align-items:start !important;

        position:relative !important;

        overflow:visible !important;
    }


    /* ==================================================
       HORIZONTAL CONNECTOR
    ================================================== */

    .organization-page
    .organization-level-children::before {

        content:"" !important;

        display:block !important;

        position:absolute !important;

        top:0 !important;

        left:16.666% !important;

        right:16.666% !important;

        width:auto !important;

        height:2px !important;

        background:#cbd5e1 !important;

        z-index:1 !important;
    }


    /* ==================================================
       SEMUA CARD ANAK
    ================================================== */

    .organization-page
    .organization-level-children
    > .organization-card {

        display:block !important;

        width:100% !important;

        max-width:none !important;

        min-width:0 !important;

        min-height:320px !important;

        margin:0 !important;

        padding:28px !important;

        box-sizing:border-box !important;

        text-align:left !important;

        position:relative !important;

        overflow:visible !important;
    }


    /* ==================================================
       CONNECTOR VERTIKAL
    ================================================== */

    .organization-page
    .organization-level-children
    > .organization-card::before {

        content:"" !important;

        display:block !important;

        position:absolute !important;

        top:-40px !important;

        left:50% !important;

        width:2px !important;

        height:40px !important;

        margin:0 !important;

        padding:0 !important;

        background:#cbd5e1 !important;

        transform:translateX(-50%) !important;

        z-index:2 !important;
    }


    /* ==================================================
       FOTO
    ================================================== */

    .organization-page
    .organization-level-children
    > .organization-card
    .organization-photo {

        width:78px !important;

        height:78px !important;

        min-width:78px !important;

        max-width:78px !important;

        margin:0 0 20px 0 !important;

        flex:none !important;

        box-sizing:border-box !important;
    }


    /* ==================================================
       INFO
    ================================================== */

    .organization-page
    .organization-level-children
    > .organization-card
    .organization-info {

        width:100% !important;

        max-width:none !important;

        margin:0 !important;

        padding:0 !important;

        text-align:left !important;

        box-sizing:border-box !important;
    }


    /* ==================================================
       JABATAN
    ================================================== */

    .organization-page
    .organization-level-children
    > .organization-card
    .organization-position {

        display:inline-block !important;

        width:auto !important;

        max-width:100% !important;

        margin:0 0 15px 0 !important;

        padding:8px 13px !important;

        box-sizing:border-box !important;

        text-align:left !important;

        white-space:normal !important;

        overflow-wrap:anywhere !important;

        word-break:normal !important;

        line-height:1.4 !important;
    }


    /* ==================================================
       NAMA
    ================================================== */

    .organization-page
    .organization-level-children
    > .organization-card
    .organization-info h3 {

        width:100% !important;

        margin:0 0 13px 0 !important;

        padding:0 !important;

        font-size:20px !important;

        line-height:1.4 !important;

        text-align:left !important;

        white-space:normal !important;

        overflow-wrap:anywhere !important;
    }


    /* ==================================================
       TUGAS
    ================================================== */

    .organization-page
    .organization-level-children
    > .organization-card
    .organization-info p {

        width:100% !important;

        margin:0 !important;

        padding:0 !important;

        font-size:15px !important;

        line-height:1.75 !important;

        text-align:left !important;

        white-space:normal !important;

        overflow-wrap:anywhere !important;
    }


    /* ==================================================
       SUB CHILDREN
    ================================================== */

    .organization-page
    .organization-subchildren {

        display:grid !important;

        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        width:100% !important;

        gap:20px !important;

        margin:30px 0 0 0 !important;

        padding:30px 0 0 !important;

        position:relative !important;

        box-sizing:border-box !important;
    }


    .organization-page
    .organization-subchildren::before {

        content:"" !important;

        display:block !important;

        position:absolute !important;

        top:0 !important;

        left:25% !important;

        right:25% !important;

        width:auto !important;

        height:2px !important;

        background:#d5dde7 !important;
    }


    .organization-page
    .organization-subchildren
    .organization-card {

        width:100% !important;

        min-width:0 !important;

        margin:0 !important;

        box-sizing:border-box !important;

        position:relative !important;
    }


    .organization-page
    .organization-subchildren
    .organization-card::before {

        content:"" !important;

        display:block !important;

        position:absolute !important;

        top:-30px !important;

        left:50% !important;

        width:2px !important;

        height:30px !important;

        background:#d5dde7 !important;

        transform:translateX(-50%) !important;
    }

}


/* ==========================================================
   DESKTOP LEBIH KECIL
   2 KOLOM
========================================================== */

@media screen and (min-width:761px) and (max-width:1100px) {

    .organization-page
    .organization-level-children {

        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap:24px !important;
    }

}


/* ==========================================================
   DESKTOP BESAR
   3 KOLOM LEBIH LEGA
========================================================== */

@media screen and (min-width:1101px) {

    .organization-page
    .organization-level-children {

        grid-template-columns:
            repeat(3, minmax(0,1fr)) !important;

        gap:34px !important;
    }

}


/* ==========================================================
   LAYAR BESAR
========================================================== */

@media screen and (min-width:1400px) {

    .organization-page
    .organization-level-children {

        gap:40px !important;
    }

    .organization-page
    .organization-level-children
    > .organization-card {

        padding:30px !important;
    }

}
/* ==========================================================
   FIX KOORDINATOR DESKTOP
   KARTU LEBIH LEBAR DAN TIDAK SEMPIT
========================================================== */

@media screen and (min-width:761px){

    /* ------------------------------------------
       AREA KOORDINATOR
    ------------------------------------------ */

    .organization-page
    .organization-subchildren{

        display:grid !important;

        /*
         * Koordinator dibuat 1 kolom
         * agar kartu mempunyai lebar penuh
         */
        grid-template-columns:1fr !important;

        width:100% !important;

        gap:22px !important;

        margin-top:30px !important;

        padding-top:30px !important;

        box-sizing:border-box !important;
    }


    /* ------------------------------------------
       HILANGKAN GARIS HORIZONTAL KECIL
    ------------------------------------------ */

    .organization-page
    .organization-subchildren::before{

        left:20% !important;

        right:20% !important;

        background:#cbd5e1 !important;
    }


    /* ------------------------------------------
       KARTU KOORDINATOR
    ------------------------------------------ */

    .organization-page
    .organization-subchildren
    > .organization-card{

        width:100% !important;

        min-width:0 !important;

        max-width:none !important;

        min-height:210px !important;

        padding:24px 26px !important;

        box-sizing:border-box !important;

        display:grid !important;

        grid-template-columns:
            78px minmax(0,1fr) !important;

        column-gap:22px !important;

        align-items:start !important;

        text-align:left !important;
    }


    /* ------------------------------------------
       FOTO KOORDINATOR
    ------------------------------------------ */

    .organization-page
    .organization-subchildren
    > .organization-card
    .organization-photo{

        width:78px !important;

        height:78px !important;

        min-width:78px !important;

        margin:0 !important;

        grid-column:1 !important;

        grid-row:1 / span 3 !important;
    }


    /* ------------------------------------------
       INFO KOORDINATOR
    ------------------------------------------ */

    .organization-page
    .organization-subchildren
    > .organization-card
    .organization-info{

        width:100% !important;

        margin:0 !important;

        padding:0 !important;

        grid-column:2 !important;

        text-align:left !important;
    }


    /* ------------------------------------------
       JABATAN KOORDINATOR
    ------------------------------------------ */

    .organization-page
    .organization-subchildren
    > .organization-card
    .organization-position{

        display:inline-block !important;

        max-width:100% !important;

        margin:0 0 12px 0 !important;

        padding:8px 13px !important;

        font-size:12px !important;

        line-height:1.4 !important;

        text-align:left !important;

        white-space:normal !important;

        overflow-wrap:anywhere !important;
    }


    /* ------------------------------------------
       NAMA KOORDINATOR
    ------------------------------------------ */

    .organization-page
    .organization-subchildren
    > .organization-card
    .organization-info h3{

        margin:0 0 10px 0 !important;

        font-size:19px !important;

        line-height:1.4 !important;

        text-align:left !important;

        white-space:normal !important;
    }


    /* ------------------------------------------
       TUGAS KOORDINATOR
    ------------------------------------------ */

    .organization-page
    .organization-subchildren
    > .organization-card
    .organization-info p{

        margin:0 !important;

        font-size:14px !important;

        line-height:1.7 !important;

        text-align:left !important;

        white-space:normal !important;

        overflow-wrap:anywhere !important;
    }

}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media screen and (min-width:1101px){

    .organization-page
    .organization-subchildren
    > .organization-card{

        min-height:220px !important;

        padding:26px 30px !important;

        grid-template-columns:
            82px minmax(0,1fr) !important;

        column-gap:25px !important;
    }


    .organization-page
    .organization-subchildren
    > .organization-card
    .organization-photo{

        width:82px !important;

        height:82px !important;

        min-width:82px !important;
    }

}


/* ==========================================================
   MOBILE
   JANGAN UBAH LAYOUT MOBILE YANG SUDAH BAGUS
========================================================== */

@media screen and (max-width:760px){

    .organization-page
    .organization-subchildren{

        display:grid !important;

        grid-template-columns:1fr !important;

        width:100% !important;
    }

    .organization-page
    .organization-subchildren
    > .organization-card{

        display:block !important;

        width:100% !important;
    }

}
/* ==========================================================
   KOORDINATOR - LEBIH RINGKAS
   TETAP LEBAR, TIDAK MAKAN TEMPAT
========================================================== */

@media screen and (min-width:761px){

    /* kartu koordinator */
    .organization-page
    .organization-subchildren
    > .organization-card{

        min-height:170px !important;

        padding:18px 22px !important;

        grid-template-columns:
            64px minmax(0,1fr) !important;

        column-gap:18px !important;

        align-items:start !important;
    }


    /* foto lebih kecil */
    .organization-page
    .organization-subchildren
    > .organization-card
    .organization-photo{

        width:64px !important;

        height:64px !important;

        min-width:64px !important;

        border-width:5px !important;
    }


    /* area tulisan */
    .organization-page
    .organization-subchildren
    > .organization-card
    .organization-info{

        margin:0 !important;

        padding:0 !important;
    }


    /* jabatan */
    .organization-page
    .organization-subchildren
    > .organization-card
    .organization-position{

        margin-bottom:7px !important;

        padding:6px 10px !important;

        font-size:10px !important;

        line-height:1.25 !important;
    }


    /* nama */
    .organization-page
    .organization-subchildren
    > .organization-card
    .organization-info h3{

        margin:0 0 6px 0 !important;

        font-size:17px !important;

        line-height:1.3 !important;
    }


    /* tugas */
    .organization-page
    .organization-subchildren
    > .organization-card
    .organization-info p{

        margin:0 !important;

        font-size:13px !important;

        line-height:1.5 !important;
    }

}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media screen and (min-width:1101px){

    .organization-page
    .organization-subchildren
    > .organization-card{

        min-height:165px !important;

        padding:18px 24px !important;

        grid-template-columns:
            66px minmax(0,1fr) !important;

        column-gap:20px !important;
    }


    .organization-page
    .organization-subchildren
    > .organization-card
    .organization-photo{

        width:66px !important;

        height:66px !important;

        min-width:66px !important;
    }

}


/* ==========================================================
   MOBILE
   TETAP PERTAHANKAN YANG SUDAH BAGUS
========================================================== */

@media screen and (max-width:760px){

    .organization-page
    .organization-subchildren
    > .organization-card{

        min-height:auto !important;

        padding:18px !important;

        display:block !important;
    }

}
/* ==========================================================
   ORGANIZATION TASK
   4 CARD KE SAMPING
========================================================== */

.organization-task-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    width: 100%;
}


/* ==========================================================
   CARD TETAP MENGIKUTI TINGGI KONTEN
========================================================== */

.organization-task-card {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .organization-task-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .organization-task-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

}


/* ==========================================================
   HP
========================================================== */

@media (max-width: 576px) {

    .organization-task-grid {
        grid-template-columns: 1fr !important;
    }

}
/* ==========================================================
   FIX TUGAS & TANGGUNG JAWAB
   4 CARD SEJAJAR
========================================================== */

.organization-task-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
}


/* ==========================================================
   CARD
========================================================== */

.organization-task-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}


/* ==========================================================
   DESKTOP / LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .organization-task-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .organization-task-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 576px) {

    .organization-task-grid {
        grid-template-columns: 1fr !important;
    }

}
/* ==========================================================
   FIX FINAL
   TUGAS DAN TANGGUNG JAWAB
   4 CARD SEJAJAR
========================================================== */

.profile-about.organization-tasks-section
.organization-task-grid {

    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    grid-auto-flow: row !important;

    gap: 24px !important;

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    align-items: stretch !important;
    justify-items: stretch !important;

    flex: none !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
}


/* ==========================================================
   PAKSA CARD MASUK KE DALAM GRID
========================================================== */

.profile-about.organization-tasks-section
.organization-task-grid
.organization-task-card {

    display: flex !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;

    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;

    grid-column: auto !important;
    grid-row: auto !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   JANGAN BIARKAN CARD BERADA DI TENGAH
========================================================== */

.profile-about.organization-tasks-section
.organization-task-grid
.organization-task-card {

    justify-self: stretch !important;
    align-self: stretch !important;
}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (min-width: 1201px) {

    .profile-about.organization-tasks-section
    .organization-task-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 993px) and (max-width: 1200px) {

    .profile-about.organization-tasks-section
    .organization-task-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (min-width: 577px) and (max-width: 992px) {

    .profile-about.organization-tasks-section
    .organization-task-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

    }

}


/* ==========================================================
   HP
========================================================== */

@media (max-width: 576px) {

    .profile-about.organization-tasks-section
    .organization-task-grid {

        grid-template-columns:
            1fr !important;

    }

}
/* ==========================================================
   OVERRIDE - TUGAS SETIAP JABATAN
   4 CARD SEJAJAR
========================================================== */

.organization-tasks-section .organization-task-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 24px !important;

    width: 100% !important;

    align-items: stretch !important;

    margin-top: 35px !important;
}


/* ==========================================================
   CARD TUGAS
========================================================== */

.organization-tasks-section .organization-task-card {
    width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    height: 100% !important;

    box-sizing: border-box !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;

    padding: 30px 24px !important;

    border-radius: 20px !important;

    background: #ffffff !important;

    border: 1px solid #e4eaf1 !important;

    box-shadow:
        0 8px 25px rgba(15, 58, 105, 0.07) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease !important;
}


/* ==========================================================
   HOVER
========================================================== */

.organization-tasks-section
.organization-task-card:hover {

    transform: translateY(-5px) !important;

    border-color: #0b477f !important;

    box-shadow:
        0 14px 32px rgba(15, 58, 105, 0.12) !important;
}


/* ==========================================================
   ICON TUGAS
========================================================== */

.organization-tasks-section .organization-task-icon {

    width: 58px !important;

    height: 58px !important;

    min-width: 58px !important;

    border-radius: 50% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    margin-bottom: 18px !important;

    background: #f0f5fa !important;

    color: #0b477f !important;

    font-size: 23px !important;
}


/* ==========================================================
   JABATAN
========================================================== */

.organization-tasks-section
.organization-task-position {

    display: inline-block !important;

    margin-bottom: 10px !important;

    padding: 6px 12px !important;

    border-radius: 30px !important;

    background: #f1f5f9 !important;

    color: #4d6178 !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;

    letter-spacing: 0.4px !important;

    text-transform: uppercase !important;
}


/* ==========================================================
   NAMA
========================================================== */

.organization-tasks-section
.organization-task-card h3 {

    margin: 0 0 13px !important;

    color: #152238 !important;

    font-size: 20px !important;

    font-weight: 700 !important;

    line-height: 1.35 !important;
}


/* ==========================================================
   DESKRIPSI TUGAS
========================================================== */

.organization-tasks-section
.organization-task-card p {

    margin: 0 !important;

    color: #667b96 !important;

    font-size: 14px !important;

    line-height: 1.75 !important;

    text-align: center !important;

    overflow-wrap: break-word !important;

    word-break: normal !important;
}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (min-width: 1400px) {

    .organization-tasks-section .organization-task-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 26px !important;

    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1199px) {

    .organization-tasks-section .organization-task-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 18px !important;

    }


    .organization-tasks-section
    .organization-task-card {

        padding: 26px 18px !important;

    }


    .organization-tasks-section
    .organization-task-card h3 {

        font-size: 18px !important;

    }


    .organization-tasks-section
    .organization-task-card p {

        font-size: 13px !important;

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px) {

    .organization-tasks-section .organization-task-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 20px !important;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 575px) {

    .organization-tasks-section .organization-task-grid {

        grid-template-columns:
            1fr !important;

        gap: 18px !important;

    }


    .organization-tasks-section
    .organization-task-card {

        padding: 26px 22px !important;

    }

}
/* ==========================================================
   STRUKTUR ORGANISASI - 4 CARD SEJAJAR
========================================================== */

.organization-level-children {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
}

.organization-level-children > .organization-card {
    width: 100% !important;
    margin: 0 !important;
}


/* ==========================================================
   RESPONSIVE TABLET
========================================================== */

@media (max-width: 991px) {

    .organization-level-children {
        grid-template-columns: repeat(2, 1fr) !important;
    }

}


/* ==========================================================
   RESPONSIVE HP
========================================================== */

@media (max-width: 575px) {

    .organization-level-children {
        grid-template-columns: 1fr !important;
    }

}
/* ==========================================================
   FIX KHUSUS CARD STRUKTUR ORGANISASI
   4 CARD KE SAMPING
========================================================== */

.organization-level-children {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
}

.organization-level-children > .organization-card {
    width: 100% !important;
    margin: 0 !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px) {

    .organization-level-children {
        grid-template-columns: repeat(2, 1fr) !important;
    }

}


/* ==========================================================
   HP
========================================================== */

@media (max-width: 575px) {

    .organization-level-children {
        grid-template-columns: 1fr !important;
    }

}
/* ==========================================================
   FIX CARD STRUKTUR SETELAH WAKIL KEPALA
   GURU MATA PELAJARAN, WALI KELAS, GURU BK, DLL
   MENJADI 4 CARD PER BARIS
========================================================== */


/* ----------------------------------------------------------
   ORGANIZATION CHART
---------------------------------------------------------- */

.organization-chart {
    width: 100%;
}


/* ----------------------------------------------------------
   CARD LEVEL UTAMA SELAIN CARD UTAMA PERTAMA
---------------------------------------------------------- */

.organization-chart
.organization-level-main:not(:has(.organization-card-main)) {
    display: inline-block !important;
    vertical-align: top !important;
    width: calc(25% - 18px) !important;
    margin: 0 20px 24px 0 !important;
    box-sizing: border-box !important;
}


/* Hilangkan margin card terakhir pada setiap baris */

.organization-chart
.organization-level-main:not(:has(.organization-card-main)):nth-of-type(4n) {
    margin-right: 0 !important;
}


/* ----------------------------------------------------------
   CARD DI DALAMNYA
---------------------------------------------------------- */

.organization-chart
.organization-level-main:not(:has(.organization-card-main))
.organization-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   ISI CARD
---------------------------------------------------------- */

.organization-chart
.organization-level-main:not(:has(.organization-card-main))
.organization-info {
    width: 100% !important;
    box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   FOTO
---------------------------------------------------------- */

.organization-chart
.organization-level-main:not(:has(.organization-card-main))
.organization-photo {
    flex-shrink: 0;
}


/* ----------------------------------------------------------
   DESKRIPSI JANGAN TERLALU PANJANG
---------------------------------------------------------- */

.organization-chart
.organization-level-main:not(:has(.organization-card-main))
.organization-info p {
    overflow-wrap: break-word;
    word-break: normal;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .organization-chart
    .organization-level-main:not(:has(.organization-card-main)) {
        width: calc(33.333% - 17px) !important;
        margin-right: 20px !important;
    }

}


/* ==========================================================
   TABLET KECIL
========================================================== */

@media (max-width: 800px) {

    .organization-chart
    .organization-level-main:not(:has(.organization-card-main)) {
        width: calc(50% - 10px) !important;
        margin-right: 20px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 575px) {

    .organization-chart
    .organization-level-main:not(:has(.organization-card-main)) {
        display: block !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }

}
/* ==========================================================
   KHUSUS 10 CARD DI BAWAH STRUKTUR UTAMA
   4 CARD SEJAJAR
========================================================== */

.organization-chart
.organization-level-main:not(:first-child) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
}


/* Card di dalam level tersebut */

.organization-chart
.organization-level-main:not(:first-child)
.organization-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}


/* ==========================================================
   JIKA CARD TERBACA SEBAGAI ELEMEN TERPISAH
========================================================== */

.organization-chart
.organization-level-main:not(:first-child)
.organization-card {
    min-width: 0 !important;
    box-sizing: border-box !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .organization-chart
    .organization-level-main:not(:first-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


/* ==========================================================
   HP
========================================================== */

@media (max-width: 600px) {

    .organization-chart
    .organization-level-main:not(:first-child) {
        grid-template-columns: 1fr !important;
    }

}
/* ==========================================================
   OVERRIDE KHUSUS
   4 CARD TUGAS / JABATAN SEJAJAR
========================================================== */

.organization-tasks-section .organization-task-grid {
    width: 100% !important;

    display: grid !important;

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 24px !important;

    align-items: stretch !important;

    justify-content: stretch !important;

    margin: 0 !important;
}


/* ==========================================================
   CARD TUGAS
========================================================== */

.organization-tasks-section .organization-task-card {
    width: 100% !important;

    max-width: none !important;

    min-width: 0 !important;

    margin: 0 !important;

    float: none !important;

    display: flex !important;

    flex-direction: column !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   JANGAN BIARKAN CARD BERPINDAH KE TENGAH / KIRI
========================================================== */

.organization-tasks-section .organization-task-card:nth-child(1),
.organization-tasks-section .organization-task-card:nth-child(2),
.organization-tasks-section .organization-task-card:nth-child(3),
.organization-tasks-section .organization-task-card:nth-child(4),
.organization-tasks-section .organization-task-card:nth-child(5),
.organization-tasks-section .organization-task-card:nth-child(6),
.organization-tasks-section .organization-task-card:nth-child(7),
.organization-tasks-section .organization-task-card:nth-child(8),
.organization-tasks-section .organization-task-card:nth-child(9),
.organization-tasks-section .organization-task-card:nth-child(10) {
    grid-column: auto !important;
    grid-row: auto !important;
}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (min-width: 1201px) {

    .organization-tasks-section .organization-task-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 993px) and (max-width: 1200px) {

    .organization-tasks-section .organization-task-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

        gap: 18px !important;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (min-width: 769px) and (max-width: 992px) {

    .organization-tasks-section .organization-task-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 20px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .organization-tasks-section .organization-task-grid {
        grid-template-columns: 1fr !important;

        gap: 16px !important;
    }

}


/* ==========================================================
   MOBILE KECIL
========================================================== */

@media (max-width: 480px) {

    .organization-tasks-section .organization-task-grid {
        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }

}
/* ==========================================================
   OVERRIDE — TUGAS DAN TANGGUNG JAWAB
   4 CARD KE SAMPING
========================================================== */

.organization-tasks-section .organization-task-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    align-items: stretch !important;
}


/* ==========================================================
   CARD TUGAS
========================================================== */

.organization-tasks-section .organization-task-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (min-width: 1201px) {

    .organization-tasks-section .organization-task-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .organization-tasks-section .organization-task-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .organization-tasks-section .organization-task-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 576px) {

    .organization-tasks-section .organization-task-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

}
/* ==========================================================
   FINAL OVERRIDE
   TUGAS SETIAP JABATAN — 4 CARD KE SAMPING
========================================================== */

.organization-tasks-section {
    width: 100%;
}

.organization-tasks-section .container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   GRID UTAMA
========================================================== */

.organization-tasks-section .organization-task-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    grid-auto-flow: row !important;

    gap: 24px !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    align-items: stretch !important;

    justify-items: stretch !important;
}


/* ==========================================================
   SEMUA CARD
========================================================== */

.organization-tasks-section .organization-task-card {
    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    max-width: none !important;

    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    height: 100% !important;
}


/* ==========================================================
   JANGAN ADA CARD YANG TERDORONG KE TENGAH
========================================================== */

.organization-tasks-section
.organization-task-grid
.organization-task-card {
    position: relative !important;

    left: auto !important;

    right: auto !important;

    transform: none !important;

    grid-column: auto !important;

    grid-row: auto !important;
}


/* ==========================================================
   ICON
========================================================== */

.organization-tasks-section .organization-task-icon {
    flex-shrink: 0;
}


/* ==========================================================
   JABATAN
========================================================== */

.organization-tasks-section .organization-task-position {
    display: block;

    line-height: 1.45;
}


/* ==========================================================
   JUDUL
========================================================== */

.organization-tasks-section .organization-task-card h3 {
    margin-top: 10px;
    margin-bottom: 10px;

    line-height: 1.35;
}


/* ==========================================================
   DESKRIPSI TUGAS
========================================================== */

.organization-tasks-section .organization-task-card p {
    margin-bottom: 0;

    line-height: 1.7;

    word-break: normal;

    overflow-wrap: break-word;
}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (min-width: 1201px) {

    .organization-tasks-section .organization-task-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 24px !important;
    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 993px) and (max-width: 1200px) {

    .organization-tasks-section .organization-task-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 20px !important;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (min-width: 577px) and (max-width: 992px) {

    .organization-tasks-section .organization-task-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 20px !important;
    }

}


/* ==========================================================
   HP
========================================================== */

@media (max-width: 576px) {

    .organization-tasks-section .organization-task-grid {
        grid-template-columns:
            1fr !important;

        gap: 16px !important;
    }

}
/* ==========================================================
   BERITA SEKOLAH
   MODERN - FORMAL - GAYA WEBSITE PEMERINTAH
========================================================== */

.news-page {
    background: #f6f8fb;
    color: #1f2937;
}


/* ==========================================================
   HERO
========================================================== */

.news-hero {
    position: relative;
    padding: 78px 0 82px;
    background:
        linear-gradient(
            135deg,
            #0f3d68 0%,
            #155d8f 55%,
            #1976a8 100%
        );
    overflow: hidden;
}

.news-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -160px;
    top: -220px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
}

.news-hero::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: -300px;
    bottom: -390px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
}

.news-hero .container {
    position: relative;
    z-index: 2;
}

.news-hero-content {
    max-width: 820px;
}

.news-kicker,
.section-kicker {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.news-kicker {
    color: rgba(255,255,255,.82);
}

.news-hero h1 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.15;
}

.news-hero p {
    max-width: 700px;
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: 16px;
    line-height: 1.8;
}


/* ==========================================================
   SECTION
========================================================== */

.news-section {
    padding: 72px 0 80px;
}

.news-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}

.news-section-header .section-kicker,
.news-section-heading .section-kicker {
    color: #17608d;
}

.news-section-header h2,
.news-section-heading h2 {
    margin: 0;
    color: #172b3a;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
}

.news-title-line {
    width: 54px;
    height: 3px;
    margin-top: 15px;
    border-radius: 3px;
    background: #17608d;
}


/* ==========================================================
   SEARCH & FILTER
========================================================== */

.news-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 18px;
    margin-bottom: 34px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(15, 61, 104, .06);
}

.news-search,
.news-category-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-search label,
.news-category-filter label {
    color: #374151;
    font-size: 13px;
    font-weight: 600;
}

.news-search input,
.news-category-filter select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    color: #273444;
    background: #ffffff;
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
    transition: .2s ease;
}

.news-search input:focus,
.news-category-filter select:focus {
    border-color: #17608d;
    box-shadow: 0 0 0 3px rgba(23, 96, 141, .10);
}


/* ==========================================================
   GRID BERITA
   3 CARD KE SAMPING
========================================================== */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}


/* ==========================================================
   CARD
========================================================== */

.news-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(15, 61, 104, .06);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.news-card:hover {
    transform: translateY(-5px);
    border-color: #d4e1eb;
    box-shadow: 0 14px 32px rgba(15, 61, 104, .12);
}


/* ==========================================================
   GAMBAR
========================================================== */

.news-card-image {
    position: relative;
    width: 100%;
    height: 215px;
    overflow: hidden;
    background: #e9eef3;
}

.news-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.news-card:hover .news-card-image img {
    transform: scale(1.035);
}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.news-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #8493a1;
    background:
        linear-gradient(
            135deg,
            #edf1f5,
            #dfe6ed
        );
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* ==========================================================
   KATEGORI
========================================================== */

.news-category {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 11px;
    color: #ffffff;
    background: rgba(15, 61, 104, .92);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    backdrop-filter: blur(5px);
}


/* ==========================================================
   KONTEN
========================================================== */

.news-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
}


/* ==========================================================
   META
========================================================== */

.news-meta {
    margin-bottom: 9px;
}

.news-meta span {
    color: #7a8794;
    font-size: 12px;
    font-weight: 500;
}


/* ==========================================================
   JUDUL
========================================================== */

.news-card h3 {
    display: -webkit-box;
    margin: 0 0 12px;
    overflow: hidden;
    color: #1d3345;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.news-card h3 a {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================
   ISI
========================================================== */

.news-card-content > p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #667482;
    font-size: 14px;
    line-height: 1.75;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


/* ==========================================================
   FOOTER CARD
========================================================== */

.news-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: auto;
    padding-top: 20px;
}

.news-author {
    min-width: 0;
    overflow: hidden;
    color: #7b8794;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-read-more {
    flex-shrink: 0;
    color: #17608d;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}

.news-read-more:hover {
    color: #0f3d68;
}


/* ==========================================================
   PAGINATION
========================================================== */

.news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 42px;
}

.news-pagination button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    color: #435363;
    background: #ffffff;
    border: 1px solid #dbe3ea;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

.news-pagination button:hover:not(:disabled) {
    color: #ffffff;
    background: #17608d;
    border-color: #17608d;
}

.news-pagination button.active {
    color: #ffffff;
    background: #17608d;
    border-color: #17608d;
}

.news-pagination button:disabled {
    opacity: .45;
    cursor: not-allowed;
}


/* ==========================================================
   HASIL KOSONG
========================================================== */

.news-empty,
.news-search-empty {
    grid-column: 1 / -1;
    padding: 55px 25px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
}

.news-empty h3,
.news-search-empty h3 {
    margin: 0 0 8px;
    color: #263b4d;
    font-size: 20px;
}

.news-empty p,
.news-search-empty p {
    margin: 0;
    color: #7a8794;
    font-size: 14px;
    line-height: 1.7;
}


/* ==========================================================
   INFORMASI BERITA
========================================================== */

.news-information-section {
    padding: 0 0 75px;
}

.news-section-heading {
    margin-bottom: 25px;
}

.news-information-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.news-information-item {
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 10px;
    box-shadow: 0 5px 18px rgba(15, 61, 104, .05);
}

.news-information-content {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.news-information-content small {
    color: #7a8794;
    font-size: 12px;
    font-weight: 600;
}

.news-information-content strong {
    color: #17364d;
    font-size: 20px;
    font-weight: 700;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-information-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================
   TABLET KECIL
========================================================== */

@media (max-width: 768px) {

    .news-hero {
        padding: 58px 0 62px;
    }

    .news-section {
        padding: 55px 0 65px;
    }

    .news-section-header {
        margin-bottom: 22px;
    }

    .news-section-header h2,
    .news-section-heading h2 {
        font-size: 26px;
    }

    .news-filter {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 16px;
    }

    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .news-card-image {
        height: 190px;
    }

    .news-card-content {
        padding: 18px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 576px) {

    .news-hero {
        padding: 48px 0 52px;
    }

    .news-hero h1 {
        font-size: 34px;
    }

    .news-hero p {
        font-size: 14px;
        line-height: 1.7;
    }

    .news-section {
        padding: 45px 0 55px;
    }

    .news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .news-card-image {
        height: 220px;
    }

    .news-card-content {
        padding: 20px;
    }

    .news-card h3 {
        font-size: 18px;
    }

    .news-information-grid {
        grid-template-columns: 1fr;
    }

    .news-pagination {
        margin-top: 32px;
    }

    .news-pagination button {
        min-width: 35px;
        height: 35px;
    }

}
/* ==========================================================
   OVERRIDE - HERO BERITA MINIMALIS & CENTER
========================================================== */

.news-hero {
    position: relative;
    padding: 72px 0 78px;
    text-align: center;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,.12),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #123f68 0%,
            #14577f 100%
        );
}


/* ==========================================================
   BACKGROUND INTER
========================================================== */

.news-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        34px 34px;

    opacity: .55;

    pointer-events: none;
}


.news-hero::after {
    content: "";
    position: absolute;

    width: 520px;
    height: 520px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 50%;

    box-shadow:
        0 0 0 70px rgba(255,255,255,.025),
        0 0 0 140px rgba(255,255,255,.018);

    pointer-events: none;
}


/* ==========================================================
   HERO CONTENT
========================================================== */

.news-hero .container {
    position: relative;
    z-index: 2;
}


.news-hero-content {
    max-width: 780px;
    margin: 0 auto;
}


.news-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    color:
        rgba(255,255,255,.82);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}


.news-hero h1 {
    margin: 0 auto 14px;

    color: #ffffff;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        clamp(
            34px,
            4vw,
            50px
        );

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -.8px;
}


.news-hero p {
    max-width: 680px;

    margin: 0 auto;

    color:
        rgba(255,255,255,.84);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 15px;

    line-height: 1.8;
}


/* ==========================================================
   SECTION HEADER
========================================================== */

.news-section-header {
    display: block;

    margin-bottom: 28px;

    text-align: center;
}


.news-section-header > div {
    width: 100%;
}


.news-section-header .section-kicker {
    display: block;

    margin-bottom: 9px;

    color: #17608d;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.8px;
}


.news-section-header h2 {
    margin: 0;

    color: #172b3a;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 28px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: -.3px;
}


.news-title-line {
    width: 42px;
    height: 3px;

    margin:
        13px auto 0;

    border-radius: 3px;

    background: #17608d;
}


/* ==========================================================
   BERITA TERBARU - RUNNING NEWS
========================================================== */

.news-latest-bar {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    min-height: 48px;

    margin:
        0 auto 35px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid #e1e7ed;

    border-radius: 9px;

    box-shadow:
        0 5px 18px
        rgba(15,61,104,.05);
}


.news-latest-label {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 145px;
    height: 48px;

    color: #ffffff;

    background: #17608d;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.news-latest-label::after {
    content: "";

    position: absolute;

    right: -9px;
    top: 0;

    width: 18px;
    height: 48px;

    background: #17608d;

    transform:
        skewX(-16deg);

    z-index: -1;
}


.news-latest-track {
    flex: 1;

    min-width: 0;

    overflow: hidden;

    padding-left: 24px;
}


.news-latest-content {
    display: inline-flex;
    align-items: center;

    gap: 70px;

    white-space: nowrap;

    animation:
        newsRunning
        28s
        linear
        infinite;
}


.news-latest-item {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: #506170;

    font-size: 13px;
    font-weight: 500;
}


.news-latest-item strong {
    color: #17608d;

    font-weight: 700;
}


.news-latest-item::before {
    content: "";

    width: 5px;
    height: 5px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #17608d;
}


@keyframes newsRunning {

    0% {
        transform:
            translateX(0);
    }

    100% {
        transform:
            translateX(-50%);
    }

}


/* ==========================================================
   STOP ANIMATION SAAT MOUSE DI ATAS
========================================================== */

.news-latest-bar:hover
.news-latest-content {
    animation-play-state: paused;
}


/* ==========================================================
   FONT INTER
========================================================== */

.news-page,
.news-page input,
.news-page select,
.news-page button {
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 768px) {

    .news-hero {
        padding:
            58px
            20px
            62px;
    }

    .news-hero h1 {
        font-size: 36px;
    }

    .news-hero p {
        font-size: 14px;
    }

    .news-latest-label {
        width: 120px;
        font-size: 10px;
    }

    .news-latest-track {
        padding-left: 18px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 576px) {

    .news-hero {
        padding:
            48px
            18px
            52px;
    }

    .news-hero h1 {
        font-size: 32px;
        letter-spacing: -.5px;
    }

    .news-hero p {
        font-size: 13px;
        line-height: 1.75;
    }

    .news-section-header h2 {
        font-size: 25px;
    }

    .news-latest-bar {
        min-height: 44px;
    }

    .news-latest-label {
        width: 105px;
        height: 44px;

        font-size: 9px;
    }

    .news-latest-label::after {
        height: 44px;
    }

    .news-latest-item {
        font-size: 12px;
    }

}
/* ==========================================================
   INFORMASI BERITA
   MODERN • PREMIUM • MINIMALIS • FORMAL
========================================================== */

.news-information-section {
    position: relative;
    padding: 10px 0 85px;
    background: #f6f8fb;
}


/* ==========================================================
   HEADING
========================================================== */

.news-section-heading {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
}

.news-section-heading .section-kicker {
    display: inline-block;
    margin-bottom: 10px;

    color: #17608d;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.news-section-heading h2 {
    margin: 0;

    color: #172b3a;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 30px;
    font-weight: 700;

    line-height: 1.3;
    letter-spacing: -.5px;
}

.news-section-heading::after {
    content: "";

    display: block;

    width: 44px;
    height: 3px;

    margin: 15px auto 0;

    border-radius: 4px;

    background: #17608d;
}


/* ==========================================================
   GRID
========================================================== */

.news-information-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    max-width: 1180px;
    margin: 0 auto;
}


/* ==========================================================
   CARD
========================================================== */

.news-information-item {
    position: relative;

    min-height: 145px;

    padding: 25px 24px 22px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfd 100%
        );

    border:
        1px solid #e3e9ef;

    border-radius: 12px;

    box-shadow:
        0 5px 20px
        rgba(18, 63, 104, .055);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


/* garis aksen atas */

.news-information-item::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #12466f,
            #237eac
        );

    transform:
        scaleX(.35);

    transform-origin: left;

    transition:
        transform .3s ease;
}


/* efek cahaya */

.news-information-item::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -65px;
    bottom: -75px;

    border-radius: 50%;

    background:
        rgba(23, 96, 141, .035);

    pointer-events: none;
}


/* hover */

.news-information-item:hover {
    transform:
        translateY(-4px);

    border-color:
        #d3e0ea;

    box-shadow:
        0 14px 32px
        rgba(18, 63, 104, .10);
}


.news-information-item:hover::before {
    transform:
        scaleX(1);
}


/* ==========================================================
   CONTENT
========================================================== */

.news-information-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 9px;
}


/* ==========================================================
   LABEL
========================================================== */

.news-information-content small {
    display: block;

    color: #7b8793;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .6px;

    text-transform: uppercase;
}


/* ==========================================================
   VALUE
========================================================== */

.news-information-content strong {
    display: block;

    color: #17364d;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 27px;
    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -.5px;
}


/* ==========================================================
   KHUSUS TANGGAL
========================================================== */

.news-information-item:nth-child(3)
.news-information-content strong {
    font-size: 21px;
}


/* ==========================================================
   KHUSUS ADMIN
========================================================== */

.news-information-item:nth-child(4)
.news-information-content strong {
    font-size: 19px;

    line-height: 1.45;
}


/* ==========================================================
   GARIS KECIL DI BAWAH VALUE
========================================================== */

.news-information-content strong::after {
    content: "";

    display: block;

    width: 24px;
    height: 2px;

    margin-top: 12px;

    border-radius: 2px;

    background: #17608d;

    opacity: .65;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1050px) {

    .news-information-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        max-width: 760px;
    }

}


/* ==========================================================
   TABLET KECIL
========================================================== */

@media (max-width: 768px) {

    .news-information-section {
        padding-bottom: 65px;
    }

    .news-section-heading {
        margin-bottom: 25px;
    }

    .news-section-heading h2 {
        font-size: 27px;
    }

    .news-information-grid {
        gap: 15px;
    }

    .news-information-item {
        min-height: 135px;
        padding: 21px 20px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 576px) {

    .news-information-section {
        padding:
            0
            0
            55px;
    }

    .news-section-heading {
        margin-bottom: 22px;
    }

    .news-section-heading .section-kicker {
        font-size: 10px;
    }

    .news-section-heading h2 {
        font-size: 24px;
    }

    .news-information-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .news-information-item {
        min-height: auto;
        padding: 20px;
    }

    .news-information-content strong {
        font-size: 25px;
    }

    .news-information-item:nth-child(3)
    .news-information-content strong {
        font-size: 20px;
    }

    .news-information-item:nth-child(4)
    .news-information-content strong {
        font-size: 18px;
    }

}
/* ==========================================================
   OVERRIDE KATEGORI BERITA
   BADGE COMPACT • MODERN • MINIMALIS
========================================================== */

/* Container gambar kartu */
.news-card-image {
    position: relative;
    overflow: hidden;
}


/* ==========================================================
   KATEGORI
========================================================== */

.news-card-category,
.news-category,
.news-card .category,
.news-card .news-category {
    position: absolute;

    top: 16px;
    left: 16px;

    width: auto !important;
    min-width: unset !important;

    height: auto !important;
    min-height: unset !important;

    padding:
        8px 13px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    color: #ffffff !important;

    background:
        rgba(15, 67, 108, .94) !important;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 7px !important;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;

    letter-spacing: .7px;

    text-transform: uppercase;

    white-space: nowrap;

    z-index: 5;

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.16);

    transition:
        all .25s ease;
}


/* ==========================================================
   HOVER
========================================================== */

.news-card:hover
.news-card-category,
.news-card:hover
.news-category,
.news-card:hover
.category {
    background:
        rgba(10, 57, 94, .97) !important;

    transform:
        translateY(-1px);
}


/* ==========================================================
   JIKA ADA ELEMEN CATEGORY DALAM WRAPPER
========================================================== */

.news-card-image
.category-label,
.news-card-image
.news-category-label,
.news-card-image
.category-badge {
    position: absolute;

    top: 16px;
    left: 16px;

    width: auto !important;
    height: auto !important;

    padding:
        8px 13px !important;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: #ffffff !important;

    background:
        rgba(15, 67, 108, .94) !important;

    border-radius: 7px !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    letter-spacing: .7px;

    line-height: 1.2 !important;

    white-space: nowrap;

    z-index: 5;

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.16);
}


/* ==========================================================
   TANGGAL
========================================================== */

.news-card-date {
    display: block;

    margin-bottom: 12px;

    color: #7b8b9b;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.4;
}


/* ==========================================================
   JUDUL BERITA
========================================================== */

.news-card-title {
    margin: 0;

    color: #20384d;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 22px;

    font-weight: 700;

    line-height: 1.45;

    letter-spacing: -.35px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 768px) {

    .news-card-category,
    .news-category,
    .news-card .category,
    .news-card .news-category,
    .news-card-image .category-label,
    .news-card-image .news-category-label,
    .news-card-image .category-badge {

        top: 12px;
        left: 12px;

        padding:
            7px 11px !important;

        font-size: 9px !important;

        border-radius: 6px !important;
    }

    .news-card-title {
        font-size: 20px;
    }

}


@media (max-width: 576px) {

    .news-card-category,
    .news-category,
    .news-card .category,
    .news-card .news-category,
    .news-card-image .category-label,
    .news-card-image .news-category-label,
    .news-card-image .category-badge {

        top: 10px;
        left: 10px;

        padding:
            6px 10px !important;

        font-size: 8px !important;
    }

    .news-card-title {
        font-size: 19px;
        line-height: 1.4;
    }

}
/* ==========================================================
   KATEGORI BERITA
   BACKGROUND MENGIKUTI TULISAN SAJA
========================================================== */

.news-card-category,
.news-category,
.news-card .category,
.news-card .news-category,
.news-card-image .category-label,
.news-card-image .news-category-label,
.news-card-image .category-badge {

    position: absolute !important;

    top: 16px !important;
    left: 16px !important;

    /* PENTING: TIDAK MEMANJANG */
    width: fit-content !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding:
        8px 13px !important;

    margin: 0 !important;

    background:
        #124b78 !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 6px !important;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 10px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: .6px !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;

    z-index: 10 !important;

    box-shadow:
        0 4px 10px
        rgba(0, 0, 0, .12) !important;
}


/* ==========================================================
   PASTIKAN TIDAK ADA HEIGHT / FLEX COLUMN DARI CSS LAMA
========================================================== */

.news-card-image
.news-card-category,
.news-card-image
.news-category,
.news-card-image
.category,
.news-card-image
.category-label,
.news-card-image
.category-badge {

    width: max-content !important;

    max-width: max-content !important;

    height: auto !important;

    max-height: none !important;

    flex: 0 0 auto !important;
}


/* ==========================================================
   HILANGKAN ELEMEN TAMBAHAN YANG MEMBUAT BLOK MEMANJANG
========================================================== */

.news-card-category::before,
.news-card-category::after,
.news-category::before,
.news-category::after,
.news-card .category::before,
.news-card .category::after,
.news-card .news-category::before,
.news-card .news-category::after {

    display: none !important;

    content: none !important;
}


/* ==========================================================
   HOVER
========================================================== */

.news-card:hover
.news-card-category,
.news-card:hover
.news-category,
.news-card:hover
.category,
.news-card:hover
.news-card-image .category-label {

    background:
        #0d3f66 !important;

    transform:
        translateY(-1px);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 768px) {

    .news-card-category,
    .news-category,
    .news-card .category,
    .news-card .news-category,
    .news-card-image .category-label,
    .news-card-image .news-category-label,
    .news-card-image .category-badge {

        top: 12px !important;
        left: 12px !important;

        padding:
            7px 11px !important;

        font-size: 9px !important;

        border-radius: 5px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 576px) {

    .news-card-category,
    .news-category,
    .news-card .category,
    .news-card .news-category,
    .news-card-image .category-label,
    .news-card-image .news-category-label,
    .news-card-image .category-badge {

        top: 10px !important;
        left: 10px !important;

        padding:
            6px 9px !important;

        font-size: 8px !important;

        border-radius: 5px !important;
    }

}
/* ==========================================================
   FIX FINAL - KATEGORI BERITA
   HANYA SELEBAR TULISAN
========================================================== */

.news-card-image {
    position: relative !important;
}


/* ==========================================================
   KATEGORI
========================================================== */

.news-card-image > .news-category {

    /* POSISI */
    position: absolute !important;

    top: 16px !important;
    left: 16px !important;

    /* UKURAN WAJIB MENGIKUTI TEKS */
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    /* JANGAN MEMENUHI CONTAINER */
    display: inline-block !important;

    flex: none !important;

    /* SPACING */
    padding: 7px 12px !important;
    margin: 0 !important;

    /* WARNA */
    background: #124b78 !important;

    color: #ffffff !important;

    /* BORDER */
    border: 0 !important;
    border-radius: 5px !important;

    /* TEXT */
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: .6px !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;

    text-align: center !important;

    box-sizing: border-box !important;

    /* POSISI DI ATAS FOTO */
    z-index: 20 !important;

    /* SHADOW */
    box-shadow:
        0 3px 9px
        rgba(0, 0, 0, .15) !important;

    /* RESET TRANSFORM */
    transform: none !important;
}


/* ==========================================================
   RESET ELEMEN TAMBAHAN
========================================================== */

.news-card-image > .news-category::before,
.news-card-image > .news-category::after {

    content: none !important;

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
}


/* ==========================================================
   HOVER
========================================================== */

.news-card:hover
.news-card-image > .news-category {

    background: #0d3f66 !important;

    transform: none !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 768px) {

    .news-card-image > .news-category {

        top: 12px !important;
        left: 12px !important;

        padding:
            6px 10px !important;

        font-size: 9px !important;

        border-radius: 5px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 576px) {

    .news-card-image > .news-category {

        top: 10px !important;
        left: 10px !important;

        padding:
            6px 9px !important;

        font-size: 8px !important;

        border-radius: 4px !important;
    }

}
/* ==========================================================
   FINAL FIX KATEGORI BERITA
   BIRU HANYA MENGIKUTI UKURAN TULISAN
========================================================== */


/* ----------------------------------------------------------
   CONTAINER FOTO
---------------------------------------------------------- */

.news-card-image {
    position: relative !important;
    overflow: hidden !important;
}


/* ----------------------------------------------------------
   RESET TOTAL NEWS CATEGORY
---------------------------------------------------------- */

.news-card-image > span.news-category {

    /* POSISI */
    position: absolute !important;

    top: 16px !important;
    left: 16px !important;

    right: auto !important;
    bottom: auto !important;

    inset-block-start: 16px !important;
    inset-block-end: auto !important;

    inset-inline-start: 16px !important;
    inset-inline-end: auto !important;


    /* UKURAN */
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    inline-size: max-content !important;
    block-size: auto !important;


    /* DISPLAY */
    display: block !important;

    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;

    align-self: flex-start !important;

    float: none !important;


    /* BOX */
    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
        8px 13px !important;


    /* WARNA */
    background-color:
        #15527f !important;

    background-image: none !important;

    color:
        #ffffff !important;


    /* BORDER */
    border: none !important;

    border-radius:
        6px !important;


    /* TEXT */
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        .4px !important;

    text-align:
        left !important;

    text-transform:
        uppercase !important;

    white-space:
        nowrap !important;

    writing-mode:
        horizontal-tb !important;

    word-break:
        normal !important;

    overflow:
        visible !important;


    /* EFEK */
    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, .12) !important;

    transform:
        none !important;

    z-index:
        50 !important;
}


/* ----------------------------------------------------------
   MATIKAN SEMUA ELEMEN TAMBAHAN
---------------------------------------------------------- */

.news-card-image > span.news-category::before,
.news-card-image > span.news-category::after {

    content: none !important;

    display: none !important;

    position: static !important;

    width: 0 !important;
    height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
}


/* ----------------------------------------------------------
   PASTIKAN TIDAK ADA HEIGHT DARI CSS LAMA
---------------------------------------------------------- */

.news-card-image > span.news-category {

    height: unset !important;
    min-height: unset !important;

    max-height: unset !important;

    top: 16px !important;
    bottom: unset !important;

    left: 16px !important;
    right: unset !important;
}


/* ----------------------------------------------------------
   HOVER
---------------------------------------------------------- */

.news-card:hover
.news-card-image > span.news-category {

    background-color:
        #15527f !important;

    transform:
        none !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 768px) {

    .news-card-image > span.news-category {

        top: 12px !important;
        left: 12px !important;

        padding:
            7px 11px !important;

        font-size:
            9px !important;

        line-height:
            1 !important;

        width: max-content !important;
        height: unset !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 576px) {

    .news-card-image > span.news-category {

        top: 10px !important;
        left: 10px !important;

        padding:
            6px 9px !important;

        font-size:
            8px !important;

        line-height:
            1 !important;

        width: max-content !important;
        height: unset !important;
    }

}
/* ==========================================================
   DETAIL BERITA
   GAYA KORAN / PORTAL PEMERINTAH INDONESIA
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.news-detail-page {

    background:
        #f4f7fa;

    color:
        #24364b;

    min-height:
        100vh;
}


/* ==========================================================
   HERO DETAIL
========================================================== */

.news-detail-hero {

    position:
        relative;

    background:
        #ffffff;

    border-bottom:
        1px solid #dce4ec;

    padding:
        48px 0 42px;
}


.news-detail-hero::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        4px;

    background:
        #124b78;
}


.news-detail-hero-content {

    max-width:
        940px;

    margin:
        0 auto;

    text-align:
        center;
}


/* ==========================================================
   KATEGORI
========================================================== */

.news-detail-hero .news-kicker {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        max-content;

    padding:
        7px 13px;

    margin-bottom:
        17px;

    background:
        #124b78;

    color:
        #ffffff;

    border-radius:
        4px;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .8px;

    line-height:
        1;

    text-transform:
        uppercase;
}


/* ==========================================================
   JUDUL UTAMA
========================================================== */

.news-detail-hero h1 {

    margin:
        0 auto;

    max-width:
        900px;

    color:
        #183b5b;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        clamp(30px, 4vw, 48px);

    font-weight:
        800;

    line-height:
        1.16;

    letter-spacing:
        -.8px;
}


/* ==========================================================
   META
========================================================== */

.news-detail-meta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        0;

    margin-top:
        20px;

    color:
        #728397;

    font-size:
        13px;

    font-weight:
        500;
}


.news-detail-meta span {

    display:
        inline-flex;

    align-items:
        center;
}


.news-detail-meta span + span::before {

    content:
        "•";

    margin:
        0 12px;

    color:
        #aeb9c5;
}


/* ==========================================================
   DETAIL SECTION
========================================================== */

.news-detail-section {

    padding:
        42px 0 70px;
}


/* ==========================================================
   LAYOUT
========================================================== */

.news-detail-layout {

    max-width:
        980px;

    margin:
        0 auto;
}


/* ==========================================================
   ARTIKEL
========================================================== */

.news-detail-content {

    background:
        #ffffff;

    border:
        1px solid #dfe6ed;

    border-radius:
        8px;

    overflow:
        hidden;

    box-shadow:
        0 8px 24px
        rgba(20, 48, 75, .06);
}


/* ==========================================================
   GAMBAR UTAMA
========================================================== */

.news-detail-image {

    width:
        100%;

    background:
        #edf2f6;

    overflow:
        hidden;
}


.news-detail-image img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    max-height:
        540px;

    object-fit:
        cover;
}


/* ==========================================================
   AREA ISI
========================================================== */

.news-detail-content > h2,
.news-detail-text,
.news-detail-info,
.news-detail-author,
.news-detail-back {

    margin-left:
        auto;

    margin-right:
        auto;

    width:
        calc(100% - 100px);

    max-width:
        820px;
}


/* ==========================================================
   INFO BAR
========================================================== */

.news-detail-info {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        26px 0 18px;

    border-bottom:
        1px solid #e5eaf0;
}


/* ==========================================================
   KATEGORI DETAIL
========================================================== */

.news-detail-category {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        6px 10px;

    background:
        #edf4f9;

    color:
        #124b78;

    border-left:
        3px solid #124b78;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;
}


/* ==========================================================
   TANGGAL DETAIL
========================================================== */

.news-detail-date {

    color:
        #7a8998;

    font-size:
        12px;

    font-weight:
        500;

    white-space:
        nowrap;
}


/* ==========================================================
   JUDUL DALAM ARTIKEL
========================================================== */

.news-detail-content > h2 {

    margin-top:
        30px;

    margin-bottom:
        25px;

    color:
        #183b5b;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        clamp(25px, 3vw, 34px);

    font-weight:
        800;

    line-height:
        1.28;

    letter-spacing:
        -.4px;
}


/* ==========================================================
   ISI ARTIKEL
========================================================== */

.news-detail-text {

    color:
        #4f6173;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        18px;

    line-height:
        1.9;

    text-align:
        justify;

    word-wrap:
        break-word;
}


/* ==========================================================
   PARAGRAF
========================================================== */

.news-detail-text p {

    margin:
        0 0 22px;
}


/* ==========================================================
   DROP CAP - SENTUHAN KORAN
========================================================== */

.news-detail-text::first-letter {

    float:
        left;

    margin:
        6px 10px 0 0;

    color:
        #124b78;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        58px;

    font-weight:
        700;

    line-height:
        .75;
}


/* ==========================================================
   PEMISAH
========================================================== */

.news-detail-text hr {

    margin:
        32px 0;

    border:
        0;

    border-top:
        1px solid #dce4eb;
}


/* ==========================================================
   LINK DALAM BERITA
========================================================== */

.news-detail-text a {

    color:
        #124b78;

    font-weight:
        600;

    text-decoration:
        underline;

    text-underline-offset:
        3px;
}


/* ==========================================================
   QUOTE
========================================================== */

.news-detail-text blockquote {

    margin:
        30px 0;

    padding:
        20px 24px;

    background:
        #f5f8fa;

    border-left:
        4px solid #124b78;

    color:
        #405568;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        19px;

    font-style:
        italic;

    line-height:
        1.7;
}


/* ==========================================================
   AUTHOR
========================================================== */

.news-detail-author {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        38px;

    padding:
        20px 0;

    border-top:
        1px solid #e3e9ef;

    color:
        #7b8997;

    font-size:
        13px;
}


.news-detail-author strong {

    color:
        #183b5b;

    font-weight:
        700;
}


/* ==========================================================
   TOMBOL KEMBALI
========================================================== */

.news-detail-back {

    padding:
        20px 0 38px;
}


.news-detail-back-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        0 18px;

    background:
        #124b78;

    color:
        #ffffff !important;

    border:
        1px solid #124b78;

    border-radius:
        5px;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none !important;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.news-detail-back-button:hover {

    background:
        #0d3f66;

    border-color:
        #0d3f66;
}


/* ==========================================================
   GARIS EDITORIAL
========================================================== */

.news-detail-content::after {

    content:
        "";

    display:
        block;

    width:
        100%;

    height:
        3px;

    background:
        #124b78;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .news-detail-hero {

        padding:
            40px 0 36px;
    }


    .news-detail-section {

        padding:
            32px 0 55px;
    }


    .news-detail-layout {

        width:
            calc(100% - 32px);
    }


    .news-detail-content > h2,
    .news-detail-text,
    .news-detail-info,
    .news-detail-author,
    .news-detail-back {

        width:
            calc(100% - 70px);
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .news-detail-hero {

        padding:
            32px 0 30px;
    }


    .news-detail-hero h1 {

        font-size:
            29px;

        line-height:
            1.22;

        letter-spacing:
            -.4px;
    }


    .news-detail-meta {

        font-size:
            11px;

        margin-top:
            15px;
    }


    .news-detail-section {

        padding:
            22px 0 40px;
    }


    .news-detail-layout {

        width:
            calc(100% - 20px);
    }


    .news-detail-content {

        border-radius:
            6px;
    }


    .news-detail-content > h2,
    .news-detail-text,
    .news-detail-info,
    .news-detail-author,
    .news-detail-back {

        width:
            calc(100% - 36px);
    }


    .news-detail-info {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;

        padding:
            20px 0 15px;
    }


    .news-detail-content > h2 {

        margin-top:
            24px;

        margin-bottom:
            20px;

        font-size:
            24px;
    }


    .news-detail-text {

        font-size:
            17px;

        line-height:
            1.8;

        text-align:
            left;
    }


    .news-detail-text::first-letter {

        font-size:
            50px;
    }


    .news-detail-author {

        margin-top:
            28px;

        padding:
            16px 0;
    }


    .news-detail-back {

        padding:
            15px 0 28px;
    }

}


/* ==========================================================
   MOBILE KECIL
========================================================== */

@media (max-width: 480px) {

    .news-detail-hero h1 {

        font-size:
            25px;
    }


    .news-detail-hero .news-kicker {

        font-size:
            9px;

        padding:
            6px 10px;
    }


    .news-detail-content > h2 {

        font-size:
            22px;
    }


    .news-detail-text {

        font-size:
            16px;

        line-height:
            1.75;
    }


    .news-detail-image img {

        max-height:
            320px;
    }

}
/* ==========================================================
   PENGUMUMAN SEKOLAH
   STYLE SELARAS DENGAN BERITA SEKOLAH
   SMP NEGERI 2 MOYUDAN
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.announcement-page {
    background: #f4f7fa;
    color: #24364b;
    min-height: 100vh;
    padding-bottom: 70px;
}

.announcement-page *,
.announcement-page *::before,
.announcement-page *::after {
    box-sizing: border-box;
}


/* ==========================================================
   CONTAINER
========================================================== */

.announcement-page .container {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}


/* ==========================================================
   HERO PENGUMUMAN
========================================================== */

.announcement-hero {
    position: relative;
    padding: 58px 0 52px;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fc 100%
        );
    border-bottom: 1px solid #e3e9ef;
}

.announcement-hero-content {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.announcement-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 13px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    color: #0d4b83;
}

.announcement-hero h1 {
    margin: 0;

    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 800;

    color: #17324d;
}

.announcement-hero p {
    max-width: 720px;

    margin: 15px auto 0;

    font-size: 16px;
    line-height: 1.8;
    color: #718096;
}


/* ==========================================================
   SECTION UTAMA
========================================================== */

.announcement-section {
    padding: 46px 0 0;
}

.announcement-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 25px;
}

.announcement-section-header > div {
    min-width: 0;
}

.announcement-section-header .section-kicker {
    display: block;

    margin-bottom: 7px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;

    color: #0d568f;
}

.announcement-section-header h2 {
    margin: 0;

    font-size: 29px;
    line-height: 1.25;
    font-weight: 800;

    color: #20364d;
}

.announcement-title-line {
    width: 48px;
    height: 3px;

    margin-top: 13px;

    border-radius: 20px;
    background: #0d4b83;
}


/* ==========================================================
   SEARCH & FILTER
========================================================== */

.announcement-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;

    gap: 16px;

    padding: 18px;

    margin-bottom: 28px;

    background: #ffffff;

    border: 1px solid #e1e8ef;
    border-radius: 14px;

    box-shadow:
        0 5px 18px rgba(31, 55, 79, 0.045);
}

.announcement-search,
.announcement-category-filter {
    min-width: 0;
}

.announcement-search label,
.announcement-category-filter label {
    display: block;

    margin-bottom: 7px;

    font-size: 12px;
    font-weight: 700;

    color: #526579;
}

.announcement-search input,
.announcement-category-filter select {
    width: 100%;
    height: 46px;

    padding: 0 14px;

    font-family: inherit;
    font-size: 14px;

    color: #263b50;
    background: #ffffff;

    border: 1px solid #d7e0e8;
    border-radius: 9px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.announcement-search input::placeholder {
    color: #9aa8b7;
}

.announcement-search input:focus,
.announcement-category-filter select:focus {
    border-color: #0d568f;

    box-shadow:
        0 0 0 3px rgba(13, 86, 143, 0.08);
}


/* ==========================================================
   GRID PENGUMUMAN
========================================================== */

.announcement-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;

    align-items: stretch;
}


/* ==========================================================
   CARD
========================================================== */

.announcement-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe7ee;
    border-radius: 15px;

    box-shadow:
        0 7px 22px rgba(28, 52, 76, 0.055);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.announcement-card:hover {
    transform: translateY(-4px);

    border-color: #cbd9e5;

    box-shadow:
        0 14px 34px rgba(28, 52, 76, 0.10);
}


/* ==========================================================
   BAGIAN ATAS CARD
========================================================== */

.announcement-card-top {
    position: relative;

    min-height: 150px;

    padding: 24px 24px 22px;

    background:
        linear-gradient(
            135deg,
            #0d4b83 0%,
            #165d96 100%
        );

    overflow: hidden;
}

.announcement-card-top::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -55px;
    top: -70px;

    border-radius: 50%;

    background: rgba(255,255,255,.06);
}

.announcement-card-top::before {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: 55px;
    bottom: -65px;

    border-radius: 50%;

    background: rgba(255,255,255,.045);
}


/* ==========================================================
   KATEGORI
========================================================== */

.announcement-category {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    width: fit-content;
    max-width: 100%;

    padding: 7px 11px;

    margin-bottom: 15px;

    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;

    color: #ffffff;

    background: rgba(255,255,255,.13);

    border: 1px solid rgba(255,255,255,.20);
    border-radius: 6px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.announcement-card-top h3 {
    position: relative;
    z-index: 2;

    margin: 0;

    font-size: 20px;
    line-height: 1.4;
    font-weight: 800;

    color: #ffffff;
}


/* ==========================================================
   CONTENT CARD
========================================================== */

.announcement-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 21px 24px 22px;
}


/* ==========================================================
   META / TANGGAL
========================================================== */

.announcement-meta {
    display: flex;
    align-items: center;

    margin-bottom: 11px;

    font-size: 12px;
    font-weight: 700;

    color: #7a8b9d;
}

.announcement-meta span {
    display: inline-flex;
    align-items: center;
}


/* ==========================================================
   JUDUL
========================================================== */

.announcement-card-content h3 {
    margin: 0 0 11px;

    font-size: 20px;
    line-height: 1.4;
    font-weight: 800;

    color: #23394f;
}


/* ==========================================================
   ISI
========================================================== */

.announcement-card-content p {
    display: -webkit-box;

    margin: 0;

    font-size: 14px;
    line-height: 1.75;

    color: #718096;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* ==========================================================
   FOOTER CARD
========================================================== */

.announcement-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: auto;
    padding-top: 21px;
}

.announcement-author {
    min-width: 0;

    font-size: 12px;
    font-weight: 600;

    color: #8493a2;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.announcement-read-more {
    flex-shrink: 0;

    font-size: 13px;
    font-weight: 800;

    color: #0d5d96;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}

.announcement-read-more:hover {
    color: #083f6d;
    transform: translateX(2px);
}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.announcement-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 150px;

    background:
        linear-gradient(
            135deg,
            #e8eef4,
            #dfe7ee
        );

    color: #6d7f91;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* ==========================================================
   HASIL PENCARIAN KOSONG
========================================================== */

.announcement-search-empty {
    width: 100%;

    padding: 50px 25px;

    margin-top: 25px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e1e8ef;
    border-radius: 14px;
}

.announcement-search-empty h3 {
    margin: 0 0 8px;

    font-size: 20px;
    font-weight: 800;

    color: #263b50;
}

.announcement-search-empty p {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #7b8b9a;
}


/* ==========================================================
   DATA KOSONG
========================================================== */

.announcement-empty {
    grid-column: 1 / -1;

    padding: 60px 25px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e1e8ef;
    border-radius: 14px;
}

.announcement-empty h3 {
    margin: 0 0 8px;

    font-size: 22px;
    font-weight: 800;

    color: #263b50;
}

.announcement-empty p {
    margin: 0;

    font-size: 14px;
    color: #7a8b9a;
}


/* ==========================================================
   INFORMASI PENGUMUMAN
========================================================== */

.announcement-information-section {
    padding: 52px 0 0;
}

.announcement-section-heading {
    margin-bottom: 22px;
}

.announcement-section-heading .section-kicker {
    display: block;

    margin-bottom: 7px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;

    color: #0d568f;
}

.announcement-section-heading h2 {
    margin: 0;

    font-size: 28px;
    line-height: 1.3;
    font-weight: 800;

    color: #20364d;
}


/* ==========================================================
   INFORMATION GRID
========================================================== */

.announcement-information-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}

.announcement-information-item {
    min-width: 0;

    padding: 22px 23px;

    background: #ffffff;

    border: 1px solid #dfe7ee;
    border-radius: 13px;

    box-shadow:
        0 5px 18px rgba(31, 55, 79, 0.045);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.announcement-information-item:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 24px rgba(31, 55, 79, 0.075);
}

.announcement-information-content small {
    display: block;

    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 700;

    color: #8190a0;
}

.announcement-information-content strong {
    display: block;

    font-size: 21px;
    line-height: 1.3;
    font-weight: 800;

    color: #174f82;

    overflow-wrap: anywhere;
}


/* ==========================================================
   PAGINATION
========================================================== */

.announcement-pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 38px;
}

.announcement-pagination a,
.announcement-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 38px;

    padding: 0 11px;

    font-size: 13px;
    font-weight: 700;

    color: #526579;

    background: #ffffff;

    border: 1px solid #d9e2ea;
    border-radius: 8px;

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.announcement-pagination a:hover {
    color: #ffffff;

    background: #0d4b83;

    border-color: #0d4b83;
}

.announcement-pagination .active {
    color: #ffffff;

    background: #0d4b83;

    border-color: #0d4b83;
}


/* ==========================================================
   RESPONSIVE LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .announcement-page .container {
        max-width: 1140px;
    }

    .announcement-grid {
        gap: 22px;
    }

    .announcement-card-content {
        padding: 20px;
    }

    .announcement-card-top {
        padding: 21px;
    }

}


/* ==========================================================
   RESPONSIVE TABLET
========================================================== */

@media (max-width: 992px) {

    .announcement-page .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .announcement-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    .announcement-information-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .announcement-filter {
        grid-template-columns: 1fr 220px;
    }

    .announcement-hero {
        padding: 45px 0 42px;
    }

}


/* ==========================================================
   RESPONSIVE MOBILE
========================================================== */

@media (max-width: 768px) {

    .announcement-page .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .announcement-hero {
        padding: 38px 0 36px;
    }

    .announcement-hero h1 {
        font-size: 31px;
    }

    .announcement-hero p {
        font-size: 14px;
        line-height: 1.7;
    }

    .announcement-section {
        padding-top: 34px;
    }

    .announcement-section-header {
        margin-bottom: 20px;
    }

    .announcement-section-header h2 {
        font-size: 24px;
    }

    .announcement-filter {
        grid-template-columns: 1fr;

        gap: 13px;

        padding: 15px;

        border-radius: 12px;
    }

    .announcement-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .announcement-card-top {
        min-height: 140px;

        padding: 20px;
    }

    .announcement-card-top h3 {
        font-size: 19px;
    }

    .announcement-card-content {
        padding: 19px 20px 20px;
    }

    .announcement-card-content h3 {
        font-size: 19px;
    }

    .announcement-card-content p {
        font-size: 14px;
    }

    .announcement-information-section {
        padding-top: 40px;
    }

    .announcement-section-heading h2 {
        font-size: 24px;
    }

    .announcement-information-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .announcement-information-item {
        padding: 18px 19px;
    }

}


/* ==========================================================
   MOBILE KECIL
========================================================== */

@media (max-width: 480px) {

    .announcement-hero h1 {
        font-size: 28px;
    }

    .announcement-kicker {
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .announcement-card-top {
        min-height: 135px;
    }

    .announcement-card-footer {
        align-items: flex-end;
    }

    .announcement-read-more {
        font-size: 12px;
    }

}


/* ==========================================================
   AKSESIBILITAS
========================================================== */

.announcement-search input:focus-visible,
.announcement-category-filter select:focus-visible,
.announcement-read-more:focus-visible,
.announcement-pagination a:focus-visible {
    outline: 2px solid #0d568f;
    outline-offset: 2px;
}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .announcement-card,
    .announcement-information-item,
    .announcement-read-more,
    .announcement-pagination a {
        transition: none;
    }

}
/* ==========================================================
   PENGUMUMAN SEKOLAH
   GAYA SELARAS DENGAN BERITA
   FORMAL • PEMERINTAH • MINIMALIS
========================================================== */

.announcement-page {
    width: 100%;
    background: #f6f8fb;
}


/* ==========================================================
   HERO PENGUMUMAN
========================================================== */

.announcement-hero {
    position: relative;
    width: 100%;
    padding: 58px 20px 52px;
    background:
        linear-gradient(
            135deg,
            #0b3d91 0%,
            #124f9f 48%,
            #1768b3 100%
        );
    color: #ffffff;
    overflow: hidden;
}


/* garis dekorasi halus */

.announcement-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,.22);
}


.announcement-hero::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -180px;
    top: -240px;
    border-radius: 50%;
    background: rgba(255,255,255,.055);
    pointer-events: none;
}


.announcement-hero .container {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   KONTEN HERO — TENGAH
========================================================== */

.announcement-hero-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}


/* ==========================================================
   LABEL
========================================================== */

.announcement-kicker {
    display: inline-block;
    margin-bottom: 12px;
    padding: 7px 14px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 4px;
    background: rgba(255,255,255,.08);

    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    line-height: 1.3;
}


/* ==========================================================
   JUDUL
========================================================== */

.announcement-hero h1 {
    margin: 0;

    color: #ffffff;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.5px;
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.announcement-hero p {
    max-width: 720px;
    margin: 15px auto 0;

    color: rgba(255,255,255,.88);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
}


/* ==========================================================
   STATUS PENGUMUMAN
========================================================== */

.announcement-hero-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 22px;
    padding: 9px 18px;

    border: 1px solid rgba(255,255,255,.3);
    border-radius: 5px;

    background: rgba(255,255,255,.09);

    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}


.announcement-hero-status strong {
    margin-right: 6px;

    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}


/* ==========================================================
   SECTION UTAMA
========================================================== */

.announcement-section {
    padding: 58px 0 70px;
    background: #f6f8fb;
}


.announcement-section .container {
    max-width: 1180px;
    margin: 0 auto;
}


/* ==========================================================
   HEADER SECTION
========================================================== */

.announcement-section-header {
    margin-bottom: 28px;
    text-align: center;
}


.announcement-section-header .section-kicker {
    display: inline-block;
    margin-bottom: 8px;

    color: #175ea8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


.announcement-section-header h2 {
    margin: 0;

    color: #16243a;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.2;
}


/* ==========================================================
   GARIS JUDUL
========================================================== */

.announcement-title-line {
    width: 46px;
    height: 3px;

    margin: 14px auto 0;

    background: #1768b3;
    border-radius: 2px;
}


/* ==========================================================
   PENCARIAN
========================================================== */

.announcement-filter {
    display: flex;
    align-items: flex-end;
    gap: 16px;

    max-width: 900px;
    margin: 0 auto 32px;
    padding: 16px;

    background: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;

    box-shadow: 0 4px 18px rgba(15,35,60,.05);
}


.announcement-search,
.announcement-category-filter {
    flex: 1;
}


.announcement-search label,
.announcement-category-filter label {
    display: block;
    margin-bottom: 7px;

    color: #34445a;
    font-size: 12px;
    font-weight: 700;
}


.announcement-search input,
.announcement-category-filter select {
    width: 100%;
    height: 44px;

    padding: 0 13px;

    border: 1px solid #d7dee8;
    border-radius: 5px;

    background: #ffffff;

    color: #25354b;
    font-size: 13px;

    outline: none;
    transition: .2s ease;
}


.announcement-search input:focus,
.announcement-category-filter select:focus {
    border-color: #1768b3;
    box-shadow: 0 0 0 3px rgba(23,104,179,.08);
}


/* ==========================================================
   GRID PENGUMUMAN
========================================================== */

.announcement-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}


/* ==========================================================
   CARD
========================================================== */

.announcement-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    background: #ffffff;

    border: 1px solid #e2e7ee;
    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 5px 20px rgba(15,35,60,.045);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.announcement-card:hover {
    transform: translateY(-3px);

    border-color: #cfd8e5;

    box-shadow:
        0 10px 28px rgba(15,35,60,.09);
}


/* ==========================================================
   BAGIAN ATAS CARD
========================================================== */

.announcement-card-header {
    padding: 17px 18px 14px;

    border-bottom: 1px solid #edf0f4;

    background: #ffffff;
}


/* ==========================================================
   KATEGORI
========================================================== */

.announcement-category {
    display: inline-block;

    padding: 5px 9px;

    border-radius: 3px;

    background: #edf4fb;

    color: #175ea8;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}


/* ==========================================================
   TANGGAL
========================================================== */

.announcement-date {
    margin-top: 10px;

    color: #7a8798;

    font-size: 11px;
    font-weight: 600;
}


/* ==========================================================
   ISI CARD
========================================================== */

.announcement-card-content {
    flex: 1;

    padding: 18px;
}


.announcement-card h3 {
    margin: 0 0 10px;

    color: #18283d;

    font-size: 18px;
    font-weight: 750;
    line-height: 1.4;
}


.announcement-card p {
    margin: 0;

    color: #657386;

    font-size: 13px;
    line-height: 1.75;
}


/* ==========================================================
   FOOTER CARD
========================================================== */

.announcement-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 18px;
    padding-top: 14px;

    border-top: 1px solid #edf0f4;
}


.announcement-author {
    color: #7a8798;
    font-size: 11px;
    font-weight: 600;
}


.announcement-read-more {
    color: #175ea8;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
}


.announcement-read-more:hover {
    color: #0b3d91;
}


/* ==========================================================
   HASIL PENCARIAN KOSONG
========================================================== */

.announcement-search-empty,
.announcement-empty {
    grid-column: 1 / -1;

    padding: 42px 20px;

    border: 1px solid #e1e6ed;
    border-radius: 8px;

    background: #ffffff;

    text-align: center;
}


.announcement-search-empty h3,
.announcement-empty h3 {
    margin: 0 0 8px;

    color: #24364d;

    font-size: 20px;
    font-weight: 750;
}


.announcement-search-empty p,
.announcement-empty p {
    margin: 0;

    color: #748196;

    font-size: 13px;
    line-height: 1.6;
}


/* ==========================================================
   INFORMASI PENGUMUMAN
========================================================== */

.announcement-information-section {
    padding: 55px 0 70px;

    background: #ffffff;

    border-top: 1px solid #e8edf3;
}


.announcement-section-heading {
    margin-bottom: 26px;

    text-align: center;
}


.announcement-section-heading .section-kicker {
    display: inline-block;

    margin-bottom: 8px;

    color: #175ea8;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


.announcement-section-heading h2 {
    margin: 0;

    color: #17263b;

    font-size: 28px;
    font-weight: 800;
}


/* ==========================================================
   INFORMASI GRID
========================================================== */

.announcement-information-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    max-width: 950px;

    margin: 0 auto;
}


.announcement-information-item {
    padding: 20px;

    border: 1px solid #e1e6ed;
    border-radius: 7px;

    background: #ffffff;

    text-align: center;

    box-shadow: 0 4px 16px rgba(15,35,60,.035);
}


.announcement-information-content small {
    display: block;

    margin-bottom: 6px;

    color: #7a8798;

    font-size: 11px;
    font-weight: 700;
}


.announcement-information-content strong {
    display: block;

    color: #175ea8;

    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}


/* ==========================================================
   RESPONSIVE TABLET
========================================================== */

@media (max-width: 992px) {

    .announcement-hero {
        padding: 50px 20px 46px;
    }

    .announcement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .announcement-information-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


/* ==========================================================
   RESPONSIVE MOBILE
========================================================== */

@media (max-width: 768px) {

    .announcement-hero {
        padding: 42px 16px 40px;
    }

    .announcement-hero h1 {
        font-size: 31px;
    }

    .announcement-hero p {
        font-size: 13px;
        line-height: 1.7;
    }

    .announcement-section {
        padding: 42px 0 55px;
    }

    .announcement-filter {
        flex-direction: column;
        align-items: stretch;

        margin-left: 0;
        margin-right: 0;
    }

    .announcement-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .announcement-information-grid {
        grid-template-columns: 1fr;
    }

    .announcement-section-heading h2 {
        font-size: 24px;
    }

}


/* ==========================================================
   MOBILE KECIL
========================================================== */

@media (max-width: 480px) {

    .announcement-hero {
        padding: 36px 14px;
    }

    .announcement-kicker {
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .announcement-hero h1 {
        font-size: 28px;
    }

    .announcement-hero-status {
        margin-top: 18px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .announcement-hero-status strong {
        font-size: 17px;
    }

    .announcement-card-content {
        padding: 16px;
    }

}
/* ==========================================================
   OVERRIDE HERO PENGUMUMAN - RATA TENGAH
========================================================== */

.announcement-hero {
    text-align: center !important;
}

.announcement-hero .container {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.announcement-hero-content {
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}

.announcement-kicker {
    margin-left: auto !important;
    margin-right: auto !important;
}

.announcement-hero h1 {
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}

.announcement-hero p {
    width: 100% !important;
    max-width: 720px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}

.announcement-hero-status {
    margin-left: auto !important;
    margin-right: auto !important;

    align-self: center !important;

    text-align: center !important;
    justify-content: center !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .announcement-hero-content {
        width: 100% !important;
        max-width: 100% !important;

        align-items: center !important;
        text-align: center !important;
    }

    .announcement-hero h1,
    .announcement-hero p {
        text-align: center !important;
    }

    .announcement-hero p {
        max-width: 95% !important;
    }

    .announcement-hero-status {
        align-self: center !important;
    }

}
/* ==========================================================
   HEADER PENGUMUMAN TERBARU
   RATA TENGAH
========================================================== */

.announcement-section-header {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 auto 30px !important;

    text-align: center !important;
}


.announcement-section-header > div {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}


/* ==========================================================
   LABEL
========================================================== */

.announcement-section-header .section-kicker {
    display: inline-block !important;

    width: auto !important;

    margin: 0 auto 9px !important;

    text-align: center !important;

    color: #175ea8 !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    line-height: 1.4 !important;
}


/* ==========================================================
   JUDUL
========================================================== */

.announcement-section-header h2 {
    width: 100% !important;

    margin: 0 auto !important;

    text-align: center !important;

    color: #17263b !important;

    font-size: clamp(26px, 3vw, 34px) !important;
    font-weight: 800 !important;

    line-height: 1.25 !important;
}


/* ==========================================================
   GARIS JUDUL
========================================================== */

.announcement-title-line {
    width: 46px !important;
    height: 3px !important;

    margin: 14px auto 0 !important;

    background: #1768b3 !important;

    border-radius: 2px !important;
}


/* ==========================================================
   FILTER TETAP TERATUR
========================================================== */

.announcement-filter {
    width: 100% !important;
    max-width: 900px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================
   GRID PENGUMUMAN
========================================================== */

.announcement-grid {
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================
   HEADER INFORMASI RESMI
========================================================== */

.announcement-section-heading {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}


.announcement-section-heading .section-kicker {
    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}


.announcement-section-heading h2 {
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .announcement-section-header {
        margin-bottom: 24px !important;
    }

    .announcement-section-header h2 {
        font-size: 26px !important;
    }

    .announcement-section-header .section-kicker {
        font-size: 10px !important;
    }

}
/* ==========================================================
   PENGUMUMAN SEKOLAH
   MODERN - FORMAL - GAYA PORTAL PEMERINTAH
   OVERRIDE FINAL
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.announcement-page {
    width: 100%;
    background: #f5f7fa;
    color: #172033;
    font-family: "Inter", Arial, sans-serif;
}


/* ==========================================================
   CONTAINER
========================================================== */

.announcement-page .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ==========================================================
   HERO
========================================================== */

.announcement-hero {
    position: relative;
    padding: 58px 0 60px;
    background:
        linear-gradient(
            135deg,
            #0b3d91 0%,
            #1457b8 52%,
            #1d6fd1 100%
        );
    overflow: hidden;
}


/* efek latar */

.announcement-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -170px;
    top: -210px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
}

.announcement-hero::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -140px;
    bottom: -180px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
}


/* ==========================================================
   HERO INNER
========================================================== */

.announcement-hero-inner {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    max-width: 820px;
    margin: 0 auto;
}


/* ==========================================================
   HERO TEXT
========================================================== */

.announcement-hero-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.announcement-kicker,
.announcement-hero .announcement-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

    margin-bottom: 12px;

    padding: 7px 13px;

    border: 1px solid rgba(255,255,255,.28);
    border-radius: 5px;

    background: rgba(255,255,255,.08);

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.7px;
    text-transform: uppercase;
}


.announcement-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;

    line-height: 1.15;
    letter-spacing: -.8px;

    text-align: center;
}


.announcement-hero p {
    max-width: 700px;

    margin: 15px auto 0;

    color: rgba(255,255,255,.88);

    font-size: 15px;
    font-weight: 400;

    line-height: 1.75;

    text-align: center;
}


/* ==========================================================
   ANGKA HERO
========================================================== */

.announcement-hero-number {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-top: 24px;
    padding: 11px 22px;

    min-width: 145px;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    text-align: center;
}


.announcement-hero-number strong {
    display: block;

    color: #ffffff;

    font-size: 25px;
    font-weight: 800;

    line-height: 1.1;
}


.announcement-hero-number span {
    display: block;

    margin-top: 4px;

    color: rgba(255,255,255,.82);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .4px;
}


/* ==========================================================
   SECTION DAFTAR
========================================================== */

.announcement-section {
    padding: 70px 0 75px;
    background: #f5f7fa;
}


/* ==========================================================
   HEADING
========================================================== */

.announcement-heading {
    width: 100%;

    margin-bottom: 32px;

    text-align: center;
}


.announcement-heading > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.announcement-heading .section-kicker {
    display: block;

    margin-bottom: 8px;

    color: #1457b8;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.8px;
    text-transform: uppercase;

    text-align: center;
}


.announcement-heading h2 {
    margin: 0;

    color: #172033;

    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;

    line-height: 1.25;

    text-align: center;
}


.announcement-heading-line {
    width: 52px;
    height: 3px;

    margin: 15px auto 0;

    background: #1457b8;
    border-radius: 20px;
}


/* ==========================================================
   FILTER
========================================================== */

.announcement-filter {
    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(220px, .8fr);

    gap: 18px;

    max-width: 980px;

    margin: 0 auto 35px;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #e1e6ed;
    border-radius: 10px;

    box-shadow:
        0 4px 18px rgba(15, 35, 65, .05);
}


/* ==========================================================
   LABEL
========================================================== */

.announcement-search label,
.announcement-category label {
    display: block;

    margin-bottom: 7px;

    color: #354052;

    font-size: 12px;
    font-weight: 700;
}


/* ==========================================================
   INPUT
========================================================== */

.announcement-search input,
.announcement-category select {
    width: 100%;
    height: 46px;

    padding: 0 14px;

    border: 1px solid #d7dde6;
    border-radius: 7px;

    background: #ffffff;

    color: #202938;

    font-family: inherit;
    font-size: 13px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.announcement-search input::placeholder {
    color: #9aa3b1;
}


.announcement-search input:focus,
.announcement-category select:focus {
    border-color: #1457b8;

    box-shadow:
        0 0 0 3px rgba(20,87,184,.09);
}


/* ==========================================================
   LIST
========================================================== */

.announcement-list {
    display: flex;
    flex-direction: column;

    max-width: 1040px;

    margin: 0 auto;

    gap: 14px;
}


/* ==========================================================
   ITEM
========================================================== */

.announcement-item {
    display: grid;

    grid-template-columns: 64px minmax(0, 1fr);

    width: 100%;

    background: #ffffff;

    border: 1px solid #e1e6ed;
    border-radius: 9px;

    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.announcement-item:hover {
    transform: translateY(-2px);

    border-color: #c9d5e5;

    box-shadow:
        0 9px 26px rgba(15,35,65,.08);
}


/* ==========================================================
   NOMOR
========================================================== */

.announcement-number {
    display: flex;

    align-items: flex-start;
    justify-content: center;

    padding-top: 25px;

    background: #f3f6fa;

    border-right: 1px solid #e3e8ef;
}


.announcement-number span {
    color: #1457b8;

    font-size: 17px;
    font-weight: 800;

    letter-spacing: -.3px;
}


/* ==========================================================
   MAIN
========================================================== */

.announcement-main {
    min-width: 0;

    padding: 22px 25px 21px;
}


/* ==========================================================
   TOP
========================================================== */

.announcement-top {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 9px;
}


.announcement-category {
    display: inline-flex;

    align-items: center;

    padding: 5px 9px;

    background: #eef4fc;

    border: 1px solid #dce8f8;
    border-radius: 4px;

    color: #1457b8;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .7px;
    text-transform: uppercase;
}


.announcement-top time {
    color: #7b8492;

    font-size: 11px;
    font-weight: 600;
}


/* ==========================================================
   TITLE
========================================================== */

.announcement-main h3 {
    margin: 0;

    color: #172033;

    font-size: 20px;
    font-weight: 750;

    line-height: 1.4;

    letter-spacing: -.2px;
}


.announcement-main p {
    max-width: 850px;

    margin: 10px 0 17px;

    color: #626d7d;

    font-size: 13px;
    line-height: 1.75;
}


/* ==========================================================
   BOTTOM
========================================================== */

.announcement-bottom {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 10px 20px;

    padding-top: 14px;

    border-top: 1px solid #edf0f4;
}


.announcement-period {
    color: #6d7684;

    font-size: 11px;
    line-height: 1.5;
}


.announcement-admin {
    color: #3e4857;

    font-size: 11px;
    font-weight: 700;
}


.announcement-link {
    display: inline-flex;

    align-items: center;
    gap: 5px;

    margin-left: auto;

    color: #1457b8;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;

    transition: color .2s ease;
}


.announcement-link:hover {
    color: #0b3d91;
}


.announcement-link span {
    font-size: 14px;

    transition:
        transform .2s ease;
}


.announcement-link:hover span {
    transform: translateX(3px);
}


/* ==========================================================
   EMPTY
========================================================== */

.announcement-empty,
.announcement-search-empty {
    max-width: 700px;

    margin: 25px auto;

    padding: 45px 25px;

    background: #ffffff;

    border: 1px solid #e1e6ed;
    border-radius: 10px;

    text-align: center;
}


.announcement-empty h3,
.announcement-search-empty h3 {
    margin: 0 0 8px;

    color: #172033;

    font-size: 20px;
    font-weight: 800;
}


.announcement-empty p,
.announcement-search-empty p {
    margin: 0;

    color: #727c8a;

    font-size: 13px;
    line-height: 1.7;
}


/* ==========================================================
   INFORMASI BAWAH
========================================================== */

.announcement-information {
    padding: 65px 0;

    background: #ffffff;

    border-top: 1px solid #e5e9ef;
}


.announcement-information-inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    max-width: 1040px;

    margin: 0 auto;

    padding: 30px 34px;

    background: #f5f7fa;

    border: 1px solid #e1e6ed;
    border-radius: 10px;
}


.announcement-information-inner > div:first-child {
    max-width: 720px;
}


.announcement-information-inner span {
    display: block;

    margin-bottom: 8px;

    color: #1457b8;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.6px;
}


.announcement-information-inner h2 {
    margin: 0 0 8px;

    color: #172033;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.35;
}


.announcement-information-inner p {
    margin: 0;

    color: #687384;

    font-size: 13px;

    line-height: 1.7;
}


.announcement-information-count {
    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 135px;

    padding: 15px 20px;

    background: #1457b8;

    border-radius: 8px;

    text-align: center;
}


.announcement-information-count strong {
    color: #ffffff;

    font-size: 30px;
    font-weight: 800;

    line-height: 1;
}


.announcement-information-count small {
    margin-top: 6px;

    color: rgba(255,255,255,.85);

    font-size: 10px;
    font-weight: 600;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .announcement-page .container {
        width: min(100% - 32px, 900px);
    }


    .announcement-hero {
        padding: 50px 0 52px;
    }


    .announcement-filter {
        grid-template-columns: 1fr;
    }


    .announcement-list {
        max-width: 100%;
    }


    .announcement-information-inner {
        align-items: flex-start;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .announcement-page .container {
        width: calc(100% - 28px);
    }


    .announcement-hero {
        padding: 42px 0 45px;
    }


    .announcement-hero h1 {
        font-size: 32px;
    }


    .announcement-hero p {
        font-size: 13px;
        line-height: 1.7;
    }


    .announcement-hero-number {
        margin-top: 20px;
    }


    .announcement-section {
        padding: 48px 0 55px;
    }


    .announcement-heading {
        margin-bottom: 25px;
    }


    .announcement-heading h2 {
        font-size: 25px;
    }


    .announcement-filter {
        padding: 14px;

        margin-bottom: 25px;

        gap: 13px;
    }


    .announcement-item {
        grid-template-columns: 48px minmax(0, 1fr);
    }


    .announcement-number {
        padding-top: 22px;
    }


    .announcement-number span {
        font-size: 14px;
    }


    .announcement-main {
        padding: 18px 17px;
    }


    .announcement-main h3 {
        font-size: 17px;
        line-height: 1.45;
    }


    .announcement-main p {
        font-size: 12px;

        line-height: 1.7;
    }


    .announcement-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }


    .announcement-link {
        margin-left: 0;
    }


    .announcement-information {
        padding: 45px 0;
    }


    .announcement-information-inner {
        flex-direction: column;

        gap: 22px;

        padding: 24px;
    }


    .announcement-information-count {
        align-self: center;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .announcement-page .container {
        width: calc(100% - 22px);
    }


    .announcement-hero {
        padding: 36px 0 40px;
    }


    .announcement-hero h1 {
        font-size: 29px;
    }


    .announcement-hero p {
        font-size: 12px;
    }


    .announcement-heading h2 {
        font-size: 23px;
    }


    .announcement-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }


    .announcement-number {
        padding-top: 20px;
    }


    .announcement-main {
        padding: 16px 14px;
    }


    .announcement-main h3 {
        font-size: 16px;
    }


    .announcement-category {
        font-size: 9px;
    }


    .announcement-top time {
        font-size: 10px;
    }


    .announcement-information-inner h2 {
        font-size: 19px;
    }

}


/* ==========================================================
   HILANGKAN STYLE LAMA YANG MEMBUAT HERO MENYAMPING
========================================================== */

.announcement-hero-inner {
    flex-direction: column !important;
    text-align: center !important;
}


.announcement-hero-text {
    text-align: center !important;
}


.announcement-hero-number {
    position: static !important;
}


/* ==========================================================
   PAKSA JUDUL RATA TENGAH
========================================================== */

.announcement-heading,
.announcement-heading > div,
.announcement-heading h2,
.announcement-heading .section-kicker {
    text-align: center !important;
}


.announcement-heading > div:first-child {
    align-items: center !important;
}


/* ==========================================================
   FORMAL FONT RENDERING
========================================================== */

.announcement-page,
.announcement-page input,
.announcement-page select,
.announcement-page button {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================
   ANIMASI HALUS
========================================================== */

@keyframes announcementFadeUp {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.announcement-item {
    animation:
        announcementFadeUp .45s ease both;
}


.announcement-item:nth-child(2) {
    animation-delay: .04s;
}


.announcement-item:nth-child(3) {
    animation-delay: .08s;
}


.announcement-item:nth-child(4) {
    animation-delay: .12s;
}


.announcement-item:nth-child(5) {
    animation-delay: .16s;
}
/* ==========================================================
   OVERRIDE HERO PENGUMUMAN
   LEBIH PENDEK DAN KOMPAK
========================================================== */

.announcement-hero {
    padding: 32px 0 34px !important;
}


/* Konten hero */

.announcement-hero-inner {
    max-width: 820px !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}


/* Label */

.announcement-hero .announcement-kicker {
    margin-bottom: 8px !important;

    padding: 5px 11px !important;

    font-size: 10px !important;

    letter-spacing: 1.5px !important;
}


/* Judul */

.announcement-hero h1 {
    margin: 0 !important;

    font-size: 34px !important;

    line-height: 1.15 !important;
}


/* Deskripsi */

.announcement-hero p {
    max-width: 680px !important;

    margin: 9px auto 0 !important;

    font-size: 13px !important;

    line-height: 1.6 !important;
}


/* ==========================================================
   JUMLAH PENGUMUMAN
========================================================== */

.announcement-hero-number {
    min-width: auto !important;

    margin-top: 15px !important;

    padding: 7px 17px !important;

    border-radius: 6px !important;

    flex-direction: row !important;

    gap: 7px !important;
}


.announcement-hero-number strong {
    font-size: 20px !important;

    line-height: 1 !important;
}


.announcement-hero-number span {
    margin-top: 0 !important;

    font-size: 10px !important;
}


/* ==========================================================
   HILANGKAN RUANG KOSONG DARI EFEK BACKGROUND
========================================================== */

.announcement-hero::before {
    width: 300px !important;
    height: 300px !important;

    right: -150px !important;
    top: -180px !important;
}


.announcement-hero::after {
    width: 220px !important;
    height: 220px !important;

    left: -120px !important;
    bottom: -160px !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 768px) {

    .announcement-hero {
        padding: 28px 0 30px !important;
    }

    .announcement-hero h1 {
        font-size: 30px !important;
    }

    .announcement-hero p {
        max-width: 600px !important;

        font-size: 12px !important;

        line-height: 1.6 !important;
    }

    .announcement-hero-number {
        margin-top: 13px !important;

        padding: 6px 14px !important;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width: 480px) {

    .announcement-hero {
        padding: 24px 0 27px !important;
    }

    .announcement-hero .announcement-kicker {
        font-size: 9px !important;

        letter-spacing: 1.2px !important;
    }

    .announcement-hero h1 {
        font-size: 27px !important;
    }

    .announcement-hero p {
        margin-top: 8px !important;

        font-size: 11.5px !important;

        line-height: 1.55 !important;
    }

    .announcement-hero-number {
        margin-top: 11px !important;

        padding: 6px 13px !important;
    }

    .announcement-hero-number strong {
        font-size: 18px !important;
    }

}
/* ==========================================================
   OVERRIDE KHUSUS CARD PENGUMUMAN
   TIDAK MENGUBAH HERO / SEARCH / FILTER / HEADING
========================================================== */


/* ==========================================================
   GRID CARD
========================================================== */

.announcement-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
}


/* ==========================================================
   CARD
========================================================== */

.announcement-list .announcement-item {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 390px !important;

    margin: 0 !important;
    padding: 24px !important;

    background: #ffffff !important;

    border: 1px solid #dce5ee !important;
    border-radius: 16px !important;

    overflow: hidden !important;

    box-shadow:
        0 7px 22px rgba(20, 49, 80, .055) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;
}


/* garis biru kecil hanya card */

.announcement-list .announcement-item::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 3px !important;

    background: #145b9c !important;
}


.announcement-list .announcement-item:hover {
    transform: translateY(-4px) !important;

    border-color: #c7d8e9 !important;

    box-shadow:
        0 16px 35px rgba(20, 49, 80, .10) !important;
}



/* ==========================================================
   NOMOR CARD
========================================================== */

.announcement-list
.announcement-item
.announcement-number {

    width: 100% !important;
    height: auto !important;

    margin: 0 0 18px !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}


.announcement-list
.announcement-item
.announcement-number span {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 32px !important;

    padding: 0 !important;

    border-radius: 8px !important;

    background: #eef5fc !important;

    border: 1px solid #d6e5f3 !important;

    color: #1261a6 !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    line-height: 1 !important;
}



/* ==========================================================
   ISI CARD
========================================================== */

.announcement-list
.announcement-item
.announcement-main {

    display: flex !important;

    flex: 1 !important;

    flex-direction: column !important;

    min-width: 0 !important;

    padding: 0 !important;
}



/* ==========================================================
   TOP CARD
========================================================== */

.announcement-list
.announcement-item
.announcement-top {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 8px !important;

    width: 100% !important;

    margin: 0 0 15px !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
}



/* ==========================================================
   KATEGORI DI DALAM CARD SAJA
   INI YANG PALING PENTING
========================================================== */

.announcement-list
.announcement-item
.announcement-top
.announcement-category {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: auto !important;

    max-width: 65% !important;

    min-height: 28px !important;

    height: auto !important;

    margin: 0 !important;

    padding: 5px 9px !important;

    border: 1px solid #d7e5f3 !important;

    border-radius: 7px !important;

    background: #eef5fc !important;

    color: #1261a6 !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    letter-spacing: .8px !important;

    line-height: 1.2 !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}



/* tanggal */

.announcement-list
.announcement-item
.announcement-top
time {

    flex-shrink: 0 !important;

    margin: 0 !important;

    color: #8492a5 !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;
}



/* ==========================================================
   JUDUL CARD
========================================================== */

.announcement-list
.announcement-item
.announcement-main
h3 {

    display: -webkit-box !important;

    margin: 0 0 12px !important;
    padding: 0 !important;

    color: #172033 !important;

    font-size: 18px !important;

    font-weight: 800 !important;

    line-height: 1.4 !important;

    letter-spacing: -.25px !important;

    overflow: hidden !important;

    -webkit-box-orient: vertical !important;

    -webkit-line-clamp: 3 !important;
}



/* ==========================================================
   NARASI CARD
========================================================== */

.announcement-list
.announcement-item
.announcement-main
p {

    display: -webkit-box !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #68778b !important;

    font-size: 13px !important;

    line-height: 1.7 !important;

    overflow: hidden !important;

    -webkit-box-orient: vertical !important;

    -webkit-line-clamp: 5 !important;
}



/* ==========================================================
   BAGIAN BAWAH CARD
========================================================== */

.announcement-list
.announcement-item
.announcement-bottom {

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 10px !important;

    width: 100% !important;

    margin-top: auto !important;

    padding: 18px 0 0 !important;

    border-top: 1px solid #edf1f5 !important;

    background: transparent !important;
}



/* periode */

.announcement-list
.announcement-item
.announcement-period {

    display: block !important;

    margin: 0 !important;

    color: #7b899b !important;

    font-size: 11px !important;

    line-height: 1.5 !important;
}



/* admin */

.announcement-list
.announcement-item
.announcement-admin {

    display: block !important;

    margin: 0 !important;

    color: #3b4a5e !important;

    font-size: 11px !important;

    font-weight: 700 !important;
}



/* ==========================================================
   TOMBOL LIHAT PENGUMUMAN
========================================================== */

.announcement-list
.announcement-item
.announcement-link {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    min-height: 38px !important;

    margin: 3px 0 0 !important;

    padding: 0 12px !important;

    border: 1px solid #d7e5f3 !important;

    border-radius: 8px !important;

    background: #f7fbff !important;

    color: #1261a6 !important;

    font-size: 12px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease !important;
}


.announcement-list
.announcement-item
.announcement-link:hover {

    background: #1261a6 !important;

    border-color: #1261a6 !important;

    color: #ffffff !important;
}


.announcement-list
.announcement-item
.announcement-link span {

    font-size: 15px !important;

    line-height: 1 !important;
}



/* ==========================================================
   EMPTY
========================================================== */

.announcement-list
.announcement-empty {

    grid-column: 1 / -1 !important;

    width: 100% !important;

    min-height: 250px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 30px !important;

    background: #ffffff !important;

    border: 1px solid #dce5ee !important;

    border-radius: 16px !important;

    text-align: center !important;
}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {

    .announcement-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr))
        !important;
    }

}


@media (max-width: 700px) {

    .announcement-list {
        grid-template-columns:
            1fr
        !important;

        gap: 15px !important;
    }

    .announcement-list
    .announcement-item {

        min-height: auto !important;

        padding: 20px !important;
    }

}


@media (max-width: 480px) {

    .announcement-list
    .announcement-item {

        padding: 18px !important;
    }

    .announcement-list
    .announcement-item
    .announcement-top {

        align-items: flex-start !important;

        flex-direction: column !important;
    }

    .announcement-list
    .announcement-item
    .announcement-top
    .announcement-category {

        max-width: 100% !important;
    }

}
/* ==========================================================
   PENGUMUMAN - FILTER SEARCH & KATEGORI
   KHUSUS SECTION PENGUMUMAN
========================================================== */

.announcement-filter {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: end;
    margin: 0 0 32px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #dfe6ee;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(20, 45, 80, 0.06);
    box-sizing: border-box;
}


/* ==========================================================
   SEARCH
========================================================== */

.announcement-search,
.announcement-category {
    width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}


.announcement-search label,
.announcement-category label {
    display: block;
    margin: 0 0 9px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #334155;
}


/* ==========================================================
   INPUT & SELECT
   SAMA TINGGI
========================================================== */

.announcement-search input,
.announcement-category select {
    width: 100%;
    height: 54px;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid #d4deea;
    border-radius: 11px;
    background: #ffffff;
    color: #1e293b;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 54px;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.announcement-search input::placeholder {
    color: #94a3b8;
    opacity: 1;
}


/* ==========================================================
   FOCUS
========================================================== */

.announcement-search input:focus,
.announcement-category select:focus {
    border-color: #1769c2;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(23, 105, 194, 0.10);
}


/* ==========================================================
   SELECT
========================================================== */

.announcement-category select {
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: auto;
    padding-right: 14px;
}


/* ==========================================================
   JANGAN PAKAI BINGKAI TAMBAHAN
   PADA KATEGORI
========================================================== */

.announcement-category {
    display: block;
}

.announcement-category select {
    margin: 0;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .announcement-filter {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 16px;
        padding: 20px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .announcement-filter {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px;
        margin-bottom: 26px;
        border-radius: 14px;
    }

    .announcement-search input,
    .announcement-category select {
        height: 52px;
        min-height: 52px;
        line-height: 52px;
    }

}


/* ==========================================================
   MOBILE KECIL
========================================================== */

@media (max-width: 480px) {

    .announcement-filter {
        padding: 15px;
        border-radius: 12px;
    }

    .announcement-search label,
    .announcement-category label {
        font-size: 13px;
    }

    .announcement-search input,
    .announcement-category select {
        height: 50px;
        min-height: 50px;
        font-size: 14px;
        line-height: 50px;
        border-radius: 10px;
    }

}
/* ==========================================================
   INFORMASI RESMI SEKOLAH
   MODERN • CENTER • ANIMASI HALUS
========================================================== */

.announcement-information {
    width: 100%;
    margin: 70px 0 0;
    padding: 0 0 75px;
    background: transparent;
    box-sizing: border-box;
}


/* ==========================================================
   WRAPPER
========================================================== */

.announcement-information-inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 35px 44px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background: #ffffff;
    border: 1px solid #dfe7f0;
    border-radius: 20px;

    box-shadow:
        0 12px 35px rgba(15, 48, 85, 0.07);

    overflow: hidden;
    box-sizing: border-box;
}


/* ==========================================================
   GARIS CAHAYA BERGERAK
========================================================== */

.announcement-information-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: -35%;
    width: 35%;
    height: 3px;

    background: linear-gradient(
        90deg,
        transparent,
        #1769c2,
        #4b91d1,
        transparent
    );

    animation: announcementLightMove 4s linear infinite;
}


@keyframes announcementLightMove {

    0% {
        left: -35%;
    }

    100% {
        left: 100%;
    }

}


/* ==========================================================
   GARIS BAWAH
========================================================== */

.announcement-information-inner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 70px;
    height: 3px;

    transform: translateX(-50%);

    background: #1769c2;
    border-radius: 10px;

    animation: announcementLinePulse 2.8s ease-in-out infinite;
}


@keyframes announcementLinePulse {

    0%,
    100% {
        width: 55px;
        opacity: .65;
    }

    50% {
        width: 100px;
        opacity: 1;
    }

}


/* ==========================================================
   LABEL
========================================================== */

.announcement-information-inner > div:first-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.announcement-information-inner > div:first-child > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
    line-height: 1;

    color: #1769c2;

    animation: announcementLabelMove 3s ease-in-out infinite;
}


@keyframes announcementLabelMove {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }

}


/* ==========================================================
   JUDUL
========================================================== */

.announcement-information-inner h2 {
    margin: 0;

    max-width: 700px;

    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.25;

    letter-spacing: -0.5px;

    color: #172033;
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.announcement-information-inner p {
    max-width: 680px;

    margin: 14px auto 0;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.75;

    color: #64748b;
}


/* ==========================================================
   JUMLAH PENGUMUMAN
========================================================== */

.announcement-information-count {
    position: relative;

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-top: 25px;
    padding: 13px 25px 12px;

    min-width: 145px;

    background: #f4f8fc;

    border: 1px solid #d9e5f1;
    border-radius: 13px;

    box-shadow:
        0 6px 18px rgba(23, 73, 122, 0.06);

    animation: announcementCountFloat 3.5s ease-in-out infinite;
}


@keyframes announcementCountFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

}


/* ==========================================================
   ANGKA
========================================================== */

.announcement-information-count strong {
    display: block;

    margin: 0;

    font-size: 28px;
    font-weight: 800;
    line-height: 1;

    color: #1769c2;
}


/* ==========================================================
   TEKS PENGUMUMAN AKTIF
========================================================== */

.announcement-information-count small {
    display: block;

    margin-top: 6px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: #64748b;
}


/* ==========================================================
   EFEK HOVER
========================================================== */

.announcement-information-inner:hover {
    box-shadow:
        0 18px 45px rgba(15, 48, 85, 0.11);

    transform: translateY(-2px);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.announcement-information-count:hover {
    background: #eef5fb;
    border-color: #c8dced;

    transform: translateY(-4px) scale(1.02);

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 768px) {

    .announcement-information {
        margin-top: 55px;
        padding-bottom: 55px;
    }

    .announcement-information-inner {
        max-width: 94%;
        padding: 38px 25px 38px;
        border-radius: 17px;
    }

    .announcement-information-inner h2 {
        font-size: 27px;
    }

    .announcement-information-inner p {
        font-size: 14px;
        line-height: 1.7;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 480px) {

    .announcement-information {
        margin-top: 45px;
        padding-bottom: 40px;
    }

    .announcement-information-inner {
        max-width: calc(100% - 24px);
        padding: 32px 20px 34px;
        border-radius: 15px;
    }

    .announcement-information-inner > div:first-child > span {
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    .announcement-information-inner h2 {
        font-size: 23px;
        line-height: 1.3;
    }

    .announcement-information-inner p {
        margin-top: 11px;
        font-size: 13px;
        line-height: 1.65;
    }

    .announcement-information-count {
        margin-top: 21px;
        min-width: 130px;
        padding: 12px 20px;
    }

    .announcement-information-count strong {
        font-size: 25px;
    }

    .announcement-information-count small {
        font-size: 10px;
    }

}
/* ==========================================================
   PENGUMUMAN
   LEBARKAN AREA DAFTAR AGAR LEBIH DEKAT KE PINGGIR
========================================================== */


/* ==========================================================
   SECTION PENGUMUMAN
========================================================== */

.announcement-section {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ==========================================================
   CONTAINER KHUSUS SECTION
========================================================== */

.announcement-section > .container {
    width: 100% !important;
    max-width: 1380px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 24px !important;
    padding-right: 24px !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   HEADER
========================================================== */

.announcement-heading {
    width: 100% !important;
    margin-bottom: 24px !important;
}


/* ==========================================================
   FILTER
   TETAP LEBAR PENUH
========================================================== */

.announcement-filter {
    width: 100% !important;
    box-sizing: border-box !important;
}


/* ==========================================================
   GRID PENGUMUMAN
========================================================== */

.announcement-list {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 18px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   CARD
========================================================== */

.announcement-list .announcement-item {
    width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    padding: 22px !important;
}


/* ==========================================================
   CARD TOP
========================================================== */

.announcement-list
.announcement-item
.announcement-top {

    width: 100% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 8px !important;
}


/* ==========================================================
   KATEGORI CARD
========================================================== */

.announcement-list
.announcement-item
.announcement-category {

    flex-shrink: 0 !important;

    width: auto !important;

    max-width: 60% !important;

    white-space: nowrap !important;
}


/* ==========================================================
   JUDUL
========================================================== */

.announcement-list
.announcement-item
.announcement-main h3 {

    width: 100% !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.announcement-list
.announcement-item
.announcement-main p {

    width: 100% !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   BAGIAN BAWAH
========================================================== */

.announcement-list
.announcement-item
.announcement-bottom {

    width: 100% !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .announcement-section > .container {
        max-width: 1180px !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .announcement-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 18px !important;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .announcement-section > .container {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .announcement-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 16px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .announcement-section > .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .announcement-list {
        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }

    .announcement-list
    .announcement-item {

        padding: 20px !important;
    }

}
/* ==========================================================
   FILTER PENGUMUMAN
   KHUSUS HALAMAN PENGUMUMAN
========================================================== */

.announcement-filter {
    width: 100%;
    max-width: 1100px;
    margin: 28px auto 34px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    gap: 20px;

    align-items: end;
}


/* ==========================================================
   KOLOM FILTER
========================================================== */

.announcement-search,
.announcement-category {
    width: 100%;
    min-width: 0;
}


/* ==========================================================
   LABEL
========================================================== */

.announcement-search label,
.announcement-category label {
    display: block;

    margin: 0 0 8px;

    font-family: "Inter", sans-serif;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: .04em;

    color: #334155;
}


/* ==========================================================
   INPUT & SELECT
========================================================== */

.announcement-search input,
.announcement-category select {
    display: block;

    width: 100%;
    height: 46px;

    box-sizing: border-box;

    padding: 0 15px;

    border: 1px solid #d7dee8;

    border-radius: 8px;

    background: #ffffff;

    color: #1e293b;

    font-family: "Inter", sans-serif;

    font-size: 13px;
    font-weight: 500;

    line-height: 46px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


/* ==========================================================
   SELECT
========================================================== */

.announcement-category select {

    cursor: pointer;

    appearance: auto;

    line-height: normal;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.announcement-search input::placeholder {
    color: #94a3b8;

    opacity: 1;
}


/* ==========================================================
   FOCUS
========================================================== */

.announcement-search input:focus,
.announcement-category select:focus {

    border-color: #64748b;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(100, 116, 139, .10);
}


/* ==========================================================
   HOVER
========================================================== */

.announcement-search input:hover,
.announcement-category select:hover {

    border-color: #aeb9c8;
}


/* ==========================================================
   JANGAN BIARKAN SELECT MEMBUAT GRID MELEBAR
========================================================== */

.announcement-category select {
    max-width: 100%;
}


/* ==========================================================
   RESPONSIVE TABLET
========================================================== */

@media (max-width: 768px) {

    .announcement-filter {

        grid-template-columns: 1fr;

        gap: 16px;

        margin-top: 24px;
        margin-bottom: 28px;
    }

}


/* ==========================================================
   RESPONSIVE MOBILE
========================================================== */

@media (max-width: 480px) {

    .announcement-filter {

        width: 100%;

        margin-top: 20px;
        margin-bottom: 24px;

        gap: 14px;
    }


    .announcement-search input,
    .announcement-category select {

        height: 44px;

        padding-left: 13px;
        padding-right: 13px;

        font-size: 12px;
    }


    .announcement-search label,
    .announcement-category label {

        margin-bottom: 7px;

        font-size: 11px;
    }

}
/* ==========================================================
   HERO PENGUMUMAN - MODERN GOVERNMENT STYLE
========================================================== */

.announcement-hero {
    position: relative;

    width: 100%;

    margin: 0;

    padding: 52px 0 48px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0f3d2e 0%,
            #14532d 48%,
            #166534 100%
        );

    color: #ffffff;
}


/* ==========================================================
   ELEMEN BACKGROUND BERGERAK
========================================================== */

.announcement-hero::before,
.announcement-hero::after {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background: rgba(255,255,255,.045);

    pointer-events: none;

    animation:
        announcementFloat 10s ease-in-out infinite;
}


.announcement-hero::before {

    top: -150px;
    right: 8%;

}


.announcement-hero::after {

    bottom: -190px;
    left: 5%;

    width: 320px;
    height: 320px;

    animation-delay: -4s;
}


/* ==========================================================
   CONTAINER
========================================================== */

.announcement-hero .container {

    position: relative;

    z-index: 2;
}


/* ==========================================================
   HERO INNER
========================================================== */

.announcement-hero-inner {

    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


/* ==========================================================
   HERO TEXT
========================================================== */

.announcement-hero-text {

    flex: 1;

    min-width: 0;

    animation:
        announcementTextIn .8s ease both;
}


/* ==========================================================
   KICKER
========================================================== */

.announcement-hero-text
.announcement-kicker {

    display: inline-flex;

    align-items: center;

    margin-bottom: 12px;

    padding: 6px 11px;

    border: 1px solid rgba(255,255,255,.20);

    border-radius: 6px;

    background: rgba(255,255,255,.08);

    color: rgba(255,255,255,.90);

    font-family: "Inter", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .14em;

    line-height: 1.3;

    text-transform: uppercase;
}


/* ==========================================================
   JUDUL
========================================================== */

.announcement-hero h1 {

    margin: 0;

    color: #ffffff;

    font-family: "Inter", sans-serif;

    font-size: clamp(34px, 4vw, 52px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -.035em;

    text-shadow:
        0 2px 15px rgba(0,0,0,.10);
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.announcement-hero-text p {

    max-width: 680px;

    margin: 15px 0 0;

    color: rgba(255,255,255,.82);

    font-family: "Inter", sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.75;

    letter-spacing: -.005em;
}


/* ==========================================================
   JUMLAH PENGUMUMAN
========================================================== */

.announcement-hero-number {

    flex: 0 0 180px;

    min-height: 132px;

    padding: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border: 1px solid rgba(255,255,255,.16);

    border-radius: 14px;

    background: rgba(255,255,255,.075);

    box-shadow:
        0 12px 30px rgba(0,0,0,.10);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    animation:
        announcementCardFloat 5s ease-in-out infinite;
}


/* ==========================================================
   ANGKA
========================================================== */

.announcement-hero-number strong {

    display: block;

    color: #ffffff;

    font-family: "Inter", sans-serif;

    font-size: 42px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -.04em;
}


/* ==========================================================
   LABEL ANGKA
========================================================== */

.announcement-hero-number span {

    display: block;

    margin-top: 9px;

    color: rgba(255,255,255,.78);

    font-family: "Inter", sans-serif;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.4;

    letter-spacing: .04em;

    text-transform: uppercase;
}


/* ==========================================================
   GARIS AKSEN
========================================================== */

.announcement-hero-text::after {

    content: "";

    display: block;

    width: 58px;
    height: 3px;

    margin-top: 22px;

    border-radius: 20px;

    background: rgba(255,255,255,.80);

    animation:
        announcementLineMove 3s ease-in-out infinite;
}


/* ==========================================================
   ANIMASI BACKGROUND
========================================================== */

@keyframes announcementFloat {

    0%,
    100% {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    50% {

        transform:
            translate3d(25px,-18px,0)
            scale(1.08);

    }

}


/* ==========================================================
   ANIMASI CARD
========================================================== */

@keyframes announcementCardFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-7px);

    }

}


/* ==========================================================
   ANIMASI TEXT
========================================================== */

@keyframes announcementTextIn {

    from {

        opacity: 0;

        transform:
            translateY(18px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ==========================================================
   ANIMASI GARIS
========================================================== */

@keyframes announcementLineMove {

    0%,
    100% {

        width: 58px;

        opacity: .70;

    }

    50% {

        width: 92px;

        opacity: 1;

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .announcement-hero {

        padding:
            44px 0
            42px;

    }


    .announcement-hero-inner {

        gap: 28px;

    }


    .announcement-hero-number {

        flex-basis: 155px;

        min-height: 120px;

    }


    .announcement-hero-number strong {

        font-size: 36px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .announcement-hero {

        padding:
            38px 0
            36px;

    }


    .announcement-hero-inner {

        flex-direction: column;

        align-items: center;

        text-align: center;

        gap: 24px;

    }


    .announcement-hero-text {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

    }


    .announcement-hero h1 {

        font-size: 34px;

        letter-spacing: -.03em;

    }


    .announcement-hero-text p {

        max-width: 580px;

        margin-top: 13px;

        font-size: 13px;

        line-height: 1.7;

    }


    .announcement-hero-text::after {

        margin-top: 19px;

    }


    .announcement-hero-number {

        width: 150px;

        min-height: 105px;

        padding: 15px;

        flex: none;

    }


    .announcement-hero-number strong {

        font-size: 34px;

    }


    .announcement-hero-number span {

        font-size: 10px;

    }

}


/* ==========================================================
   MOBILE KECIL
========================================================== */

@media (max-width: 420px) {

    .announcement-hero {

        padding:
            32px 0
            30px;

    }


    .announcement-hero h1 {

        font-size: 30px;

    }


    .announcement-hero-text p {

        font-size: 12px;

        line-height: 1.65;

    }


    .announcement-hero-number {

        width: 140px;

        min-height: 98px;

    }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .announcement-hero::before,
    .announcement-hero::after,
    .announcement-hero-number,
    .announcement-hero-text,
    .announcement-hero-text::after {

        animation: none !important;

    }

}
/* ==========================================================
   OVERRIDE HERO PENGUMUMAN - MODERN & COMPACT
   Tambahkan paling bawah CSS lama
========================================================== */

.announcement-hero {
    position: relative;
    overflow: hidden;
    padding: 58px 20px 54px !important;
    min-height: auto !important;
    height: auto !important;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(255,255,255,.08) 0,
            rgba(255,255,255,0) 28%
        ),
        linear-gradient(
            135deg,
            #075c35 0%,
            #0b673d 48%,
            #075631 100%
        );
}


/* ==========================================================
   EFEK BULATAN LATAR
========================================================== */

.announcement-hero::before {
    content: "";
    position: absolute;

    width: 330px;
    height: 330px;

    top: -190px;
    left: -80px;

    border-radius: 50%;

    background: rgba(255,255,255,.045);

    pointer-events: none;
}


.announcement-hero::after {
    content: "";
    position: absolute;

    width: 230px;
    height: 230px;

    right: -100px;
    bottom: -150px;

    border-radius: 50%;

    background: rgba(255,255,255,.035);

    pointer-events: none;
}


/* ==========================================================
   WRAPPER
========================================================== */

.announcement-hero .container {
    position: relative;
    z-index: 2;

    width: 100%;
}


/* ==========================================================
   KONTEN HERO
========================================================== */

.announcement-hero-inner {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    gap: 20px !important;
}


/* ==========================================================
   TEKS HERO
========================================================== */

.announcement-hero-text {
    width: 100%;
    max-width: 850px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* ==========================================================
   KICKER
========================================================== */

.announcement-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

    padding: 7px 15px !important;

    margin-bottom: 12px !important;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;

    background: rgba(255,255,255,.07);

    color: rgba(255,255,255,.90);

    font-size: 11px !important;
    font-weight: 700;

    letter-spacing: 1.5px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    animation: announcementKickerMove 4s ease-in-out infinite;
}


/* ==========================================================
   ICON KECIL DI KICKER
========================================================== */

.announcement-kicker::before {
    content: "▣";

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    margin-right: 8px;

    border-radius: 5px;

    background: rgba(255,255,255,.13);

    color: #ffffff;

    font-size: 9px;
}


/* ==========================================================
   JUDUL
========================================================== */

.announcement-hero h1 {
    margin: 0 !important;

    color: #ffffff;

    font-size: clamp(
        32px,
        4vw,
        48px
    ) !important;

    line-height: 1.08 !important;

    font-weight: 800 !important;

    letter-spacing: -1.2px;

    text-align: center;

    text-shadow:
        0 3px 14px rgba(0,0,0,.12);
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.announcement-hero p {
    max-width: 760px;

    margin: 15px auto 0 !important;

    color: rgba(255,255,255,.78);

    font-size: 15px !important;

    line-height: 1.7 !important;

    font-weight: 400;

    text-align: center;
}


/* ==========================================================
   GARIS BAWAH
========================================================== */

.announcement-hero-text::after {
    content: "";

    width: 70px;
    height: 4px;

    margin-top: 23px;

    border-radius: 20px;

    background: rgba(255,255,255,.75);

    animation: announcementLineMove 3s ease-in-out infinite;
}


/* ==========================================================
   BOX JUMLAH PENGUMUMAN
========================================================== */

.announcement-hero-number {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto !important;
    min-width: 185px !important;

    height: auto !important;
    min-height: 70px !important;

    padding: 13px 23px !important;

    margin-top: 2px;

    border: 1px solid rgba(255,255,255,.16);

    border-radius: 12px;

    background: rgba(255,255,255,.08);

    box-shadow:
        0 12px 30px rgba(0,0,0,.10);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    gap: 10px;

    animation: announcementFloat 4s ease-in-out infinite;
}


/* ==========================================================
   ICON PENGUMUMAN
========================================================== */

.announcement-hero-number::before {
    content: "▤";

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border-radius: 9px;

    background: rgba(255,255,255,.12);

    color: #ffffff;

    font-size: 16px;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08);
}


/* ==========================================================
   ANGKA
========================================================== */

.announcement-hero-number strong {
    margin: 0 !important;

    color: #ffffff;

    font-size: 26px !important;

    line-height: 1;

    font-weight: 800 !important;
}


/* ==========================================================
   LABEL
========================================================== */

.announcement-hero-number span {
    margin: 0 !important;

    color: rgba(255,255,255,.78);

    font-size: 10px !important;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* ==========================================================
   ANIMASI KICKER
========================================================== */

@keyframes announcementKickerMove {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }

}


/* ==========================================================
   ANIMASI GARIS
========================================================== */

@keyframes announcementLineMove {

    0%,
    100% {
        transform: scaleX(.75);
        opacity: .65;
    }

    50% {
        transform: scaleX(1.15);
        opacity: 1;
    }

}


/* ==========================================================
   ANIMASI BOX
========================================================== */

@keyframes announcementFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .announcement-hero {
        padding: 52px 20px 48px !important;
    }

    .announcement-hero h1 {
        font-size: 42px !important;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .announcement-hero {
        padding: 48px 20px 44px !important;
    }

    .announcement-hero h1 {
        font-size: 38px !important;
    }

    .announcement-hero p {
        max-width: 680px;

        font-size: 14px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .announcement-hero {
        padding: 42px 18px 40px !important;
    }

    .announcement-kicker {
        font-size: 10px !important;
        padding: 6px 12px !important;
    }

    .announcement-hero h1 {
        font-size: 32px !important;

        letter-spacing: -.7px;
    }

    .announcement-hero p {
        margin-top: 12px !important;

        font-size: 13px !important;

        line-height: 1.65 !important;
    }

    .announcement-hero-text::after {
        width: 55px;
        height: 3px;

        margin-top: 18px;
    }

    .announcement-hero-number {
        min-width: 165px !important;

        min-height: 60px !important;

        padding: 10px 16px !important;

        border-radius: 10px;
    }

    .announcement-hero-number::before {
        width: 29px;
        height: 29px;

        font-size: 13px;
    }

    .announcement-hero-number strong {
        font-size: 23px !important;
    }

    .announcement-hero-number span {
        font-size: 9px !important;
    }

}


/* ==========================================================
   MOBILE KECIL
========================================================== */

@media (max-width: 480px) {

    .announcement-hero {
        padding: 36px 15px 34px !important;
    }

    .announcement-hero h1 {
        font-size: 29px !important;
    }

    .announcement-hero p {
        font-size: 12.5px !important;
    }

    .announcement-hero-number {
        min-width: 155px !important;
    }

}
/* ==========================================================
   OVERRIDE HERO PENGUMUMAN
   MODERN - RINGKAS - TANPA BINGKAI JUMLAH
========================================================== */

.announcement-hero {
    position: relative;
    overflow: hidden;

    padding: 48px 20px 46px !important;

    min-height: 0 !important;
    height: auto !important;

    background:
        linear-gradient(
            135deg,
            #075a35 0%,
            #09643b 50%,
            #075531 100%
        ) !important;
}


/* ==========================================================
   HILANGKAN BENTUK / DEKORASI BERLEBIHAN
========================================================== */

.announcement-hero::before {
    width: 280px;
    height: 280px;

    top: -190px;
    left: -100px;

    background: rgba(255,255,255,.035);
}

.announcement-hero::after {
    width: 180px;
    height: 180px;

    right: -100px;
    bottom: -120px;

    background: rgba(255,255,255,.025);
}


/* ==========================================================
   INNER
========================================================== */

.announcement-hero-inner {
    display: block !important;

    width: 100%;
    max-width: 900px;

    margin: 0 auto !important;

    text-align: center;
}


/* ==========================================================
   TEXT
========================================================== */

.announcement-hero-text {
    width: 100%;
    max-width: 850px;

    margin: 0 auto !important;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* ==========================================================
   KICKER
========================================================== */

.announcement-kicker {
    display: inline-flex !important;

    width: auto !important;

    margin: 0 0 10px !important;

    padding: 6px 13px !important;

    border: 1px solid rgba(255,255,255,.20);
    border-radius: 7px;

    background: rgba(255,255,255,.06);

    font-size: 10px !important;
    line-height: 1.2;

    letter-spacing: 1.4px;

    color: rgba(255,255,255,.88);
}


/* ICON KECIL */

.announcement-kicker::before {
    content: "▣";

    width: 16px;
    height: 16px;

    margin-right: 6px;

    font-size: 8px;
}


/* ==========================================================
   JUDUL
========================================================== */

.announcement-hero h1 {
    margin: 0 !important;

    font-size: clamp(
        32px,
        4vw,
        46px
    ) !important;

    line-height: 1.08 !important;

    font-weight: 800 !important;

    letter-spacing: -1px;

    color: #ffffff;

    text-align: center;
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.announcement-hero p {
    max-width: 760px;

    margin: 12px auto 0 !important;

    font-size: 14px !important;

    line-height: 1.65 !important;

    color: rgba(255,255,255,.76);

    text-align: center;
}


/* ==========================================================
   GARIS MODERN
========================================================== */

.announcement-hero-text::after {
    content: "";

    display: block;

    width: 52px;
    height: 3px;

    margin-top: 18px;

    border-radius: 20px;

    background: rgba(255,255,255,.70);

    animation: announcementLine 3s ease-in-out infinite;
}


/* ==========================================================
   HAPUS BINGKAI PENGUMUMAN AKTIF
========================================================== */

.announcement-hero-number {
    display: block !important;

    width: auto !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 15px auto 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

    animation: none !important;

    text-align: center;
}


/* HAPUS ICON BINGKAI */

.announcement-hero-number::before {
    display: none !important;
}


/* ==========================================================
   ANGKA
========================================================== */

.announcement-hero-number strong {
    display: inline;

    margin: 0 5px 0 0 !important;

    font-size: 18px !important;

    line-height: 1;

    font-weight: 800 !important;

    color: #ffffff;
}


/* ==========================================================
   LABEL
========================================================== */

.announcement-hero-number span {
    display: inline;

    margin: 0 !important;

    font-size: 10px !important;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1.1px;

    text-transform: uppercase;

    color: rgba(255,255,255,.72);
}


/* ==========================================================
   ANIMASI HALUS
========================================================== */

@keyframes announcementLine {

    0%,
    100% {
        transform: scaleX(.75);
        opacity: .6;
    }

    50% {
        transform: scaleX(1.15);
        opacity: 1;
    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .announcement-hero {
        padding: 44px 20px 42px !important;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .announcement-hero {
        padding: 40px 18px 38px !important;
    }

    .announcement-hero h1 {
        font-size: 38px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .announcement-hero {
        padding: 36px 16px 34px !important;
    }

    .announcement-kicker {
        font-size: 9px !important;
        padding: 5px 11px !important;
    }

    .announcement-hero h1 {
        font-size: 32px !important;
        letter-spacing: -.6px;
    }

    .announcement-hero p {
        margin-top: 10px !important;

        font-size: 12.5px !important;

        line-height: 1.6 !important;
    }

    .announcement-hero-text::after {
        width: 45px;
        height: 3px;

        margin-top: 15px;
    }

    .announcement-hero-number {
        margin-top: 12px !important;
    }

    .announcement-hero-number strong {
        font-size: 17px !important;
    }

    .announcement-hero-number span {
        font-size: 9px !important;
    }

}


/* ==========================================================
   MOBILE KECIL
========================================================== */

@media (max-width: 480px) {

    .announcement-hero {
        padding: 32px 14px 30px !important;
    }

    .announcement-hero h1 {
        font-size: 29px !important;
    }

    .announcement-hero p {
        font-size: 12px !important;
    }

}
/* ==========================================================
   PENGUMUMAN DETAIL
   MODERN - FORMAL - PEMERINTAH
   KHUSUS detail.php
========================================================== */

.announcement-detail-page {
    background: #f4f7fb;
    min-height: 100vh;
    color: #17233c;
}


/* ==========================================================
   HERO
========================================================== */

.announcement-detail-hero {
    position: relative;
    background:
        linear-gradient(
            135deg,
            #073b70 0%,
            #0b4f8a 55%,
            #1264a3 100%
        );
    padding: 76px 0 82px;
    overflow: hidden;
}

.announcement-detail-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255,255,255,.045);
    top: -240px;
    left: -120px;
}

.announcement-detail-hero::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,.035);
    right: -120px;
    bottom: -180px;
}

.announcement-detail-hero .container {
    position: relative;
    z-index: 2;
}

.announcement-detail-hero-content {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}


/* ==========================================================
   KICKER
========================================================== */

.announcement-detail-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 18px;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;

    background: rgba(255,255,255,.08);

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    backdrop-filter: blur(8px);
}


/* ==========================================================
   JUDUL HERO
========================================================== */

.announcement-detail-hero h1 {
    margin: 22px auto 18px;

    max-width: 900px;

    color: #ffffff;

    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.15;

    font-weight: 800;
    letter-spacing: -1.2px;
}


/* ==========================================================
   META HERO
========================================================== */

.announcement-detail-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px 20px;

    color: rgba(255,255,255,.82);

    font-size: 14px;
    font-weight: 600;
}

.announcement-detail-meta span {
    display: inline-flex;
    align-items: center;
}

.announcement-detail-meta span + span::before {
    content: "";
    width: 5px;
    height: 5px;

    margin-right: 20px;

    border-radius: 50%;

    background: rgba(255,255,255,.55);
}


/* ==========================================================
   AREA DETAIL
========================================================== */

.announcement-detail-section {
    padding: 58px 0 80px;
    background: #f4f7fb;
}

.announcement-detail-layout {
    max-width: 980px;
    margin: 0 auto;
}


/* ==========================================================
   CARD UTAMA
========================================================== */

.announcement-detail-content {
    background: #ffffff;

    border: 1px solid #e1e8f0;
    border-radius: 20px;

    padding: 42px 48px 44px;

    box-shadow:
        0 12px 35px rgba(20, 45, 75, .07);

    position: relative;
}


/* ==========================================================
   GARIS ATAS
========================================================== */

.announcement-detail-content::before {
    content: "";

    position: absolute;

    top: 0;
    left: 48px;
    right: 48px;

    height: 4px;

    border-radius: 0 0 10px 10px;

    background: #0b4f8a;
}


/* ==========================================================
   INFORMASI ATAS
========================================================== */

.announcement-detail-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 24px;
}

.announcement-detail-category {
    display: inline-flex;
    align-items: center;

    min-height: 34px;

    padding: 7px 13px;

    background: #edf5ff;

    border: 1px solid #d6e7fa;
    border-radius: 7px;

    color: #0b5ca8;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .7px;
    text-transform: uppercase;
}

.announcement-detail-date {
    color: #718096;

    font-size: 13px;
    font-weight: 600;
}


/* ==========================================================
   JUDUL KONTEN
========================================================== */

.announcement-detail-content h2 {
    margin: 0 0 22px;

    color: #17233c;

    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -.6px;
}


/* ==========================================================
   ISI PENGUMUMAN
========================================================== */

.announcement-detail-text {
    color: #53657a;

    font-size: 16px;
    line-height: 1.9;

    letter-spacing: .05px;
}

.announcement-detail-text p {
    margin: 0 0 18px;
}

.announcement-detail-text p:last-child {
    margin-bottom: 0;
}

.announcement-detail-text strong {
    color: #24344d;
    font-weight: 750;
}

.announcement-detail-text ul,
.announcement-detail-text ol {
    margin: 18px 0;
    padding-left: 24px;
}

.announcement-detail-text li {
    margin-bottom: 8px;
}


/* ==========================================================
   INFORMASI PERIODE
========================================================== */

.announcement-detail-period {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 34px;
    padding: 18px 20px;

    background: #f6f9fc;

    border: 1px solid #e2e9f1;
    border-radius: 12px;
}

.announcement-detail-period-label {
    color: #718096;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .8px;
}

.announcement-detail-period-value {
    color: #26364e;

    font-size: 14px;
    font-weight: 700;

    text-align: right;
}


/* ==========================================================
   LAMPIRAN DOKUMEN
========================================================== */

.announcement-detail-attachment {
    margin-top: 30px;

    padding-top: 28px;

    border-top: 1px solid #e6ebf1;
}

.announcement-detail-attachment-title {
    margin-bottom: 14px;

    color: #26364e;

    font-size: 15px;
    font-weight: 800;
}

.announcement-detail-attachment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.announcement-detail-attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 14px 16px;

    background: #f8fafc;

    border: 1px solid #e1e8f0;
    border-radius: 10px;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.announcement-detail-attachment-item:hover {
    transform: translateY(-2px);

    border-color: #b9d2eb;

    box-shadow:
        0 8px 20px rgba(20,45,75,.07);
}

.announcement-detail-attachment-name {
    min-width: 0;

    color: #33445c;

    font-size: 14px;
    font-weight: 650;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.announcement-detail-attachment-download {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 14px;

    border-radius: 7px;

    background: #0b4f8a;

    color: #ffffff !important;

    font-size: 12px;
    font-weight: 750;

    text-decoration: none;

    transition:
        background .2s ease,
        transform .2s ease;
}

.announcement-detail-attachment-download:hover {
    background: #073b70;

    color: #ffffff !important;

    transform: translateY(-1px);
}


/* ==========================================================
   PENULIS
========================================================== */

.announcement-detail-author {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 34px;
    padding-top: 24px;

    border-top: 1px solid #e6ebf1;
}

.announcement-detail-author-label {
    color: #8996a7;

    font-size: 12px;
    font-weight: 650;

    text-transform: uppercase;
    letter-spacing: .7px;
}

.announcement-detail-author-name {
    color: #293b54;

    font-size: 14px;
    font-weight: 800;
}


/* ==========================================================
   TOMBOL KEMBALI
========================================================== */

.announcement-detail-back {
    margin-top: 32px;

    display: flex;
    justify-content: flex-start;
}

.announcement-detail-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0 20px;

    border: 1px solid #d6e0ea;
    border-radius: 9px;

    background: #ffffff;

    color: #29415e !important;

    font-size: 13px;
    font-weight: 750;

    text-decoration: none;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.announcement-detail-back-button:hover {
    background: #f4f8fc;

    border-color: #b9cddd;

    color: #0b4f8a !important;

    transform: translateY(-2px);

    box-shadow:
        0 6px 16px rgba(20,45,75,.08);
}


/* ==========================================================
   RESPONSIVE TABLET
========================================================== */

@media (max-width: 992px) {

    .announcement-detail-hero {
        padding: 64px 0 70px;
    }

    .announcement-detail-content {
        padding: 38px 34px 40px;
    }

    .announcement-detail-content::before {
        left: 34px;
        right: 34px;
    }

}


/* ==========================================================
   RESPONSIVE MOBILE
========================================================== */

@media (max-width: 768px) {

    .announcement-detail-hero {
        padding: 52px 20px 58px;
    }

    .announcement-detail-hero h1 {
        font-size: 31px;
        letter-spacing: -.6px;
    }

    .announcement-detail-meta {
        font-size: 12px;
        gap: 7px 14px;
    }

    .announcement-detail-meta span + span::before {
        margin-right: 14px;
    }

    .announcement-detail-section {
        padding: 35px 15px 55px;
    }

    .announcement-detail-content {
        padding: 32px 22px 30px;

        border-radius: 16px;
    }

    .announcement-detail-content::before {
        left: 22px;
        right: 22px;
    }

    .announcement-detail-content h2 {
        font-size: 25px;
    }

    .announcement-detail-text {
        font-size: 15px;
        line-height: 1.8;
    }

    .announcement-detail-period {
        flex-direction: column;
        align-items: flex-start;

        gap: 7px;
    }

    .announcement-detail-period-value {
        text-align: left;
    }

    .announcement-detail-attachment-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .announcement-detail-attachment-name {
        width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .announcement-detail-attachment-download {
        width: 100%;
    }

    .announcement-detail-author {
        align-items: flex-start;
        flex-direction: column;

        gap: 6px;
    }

    .announcement-detail-back-button {
        width: 100%;
    }

}


/* ==========================================================
   RESPONSIVE SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .announcement-detail-hero {
        padding: 44px 16px 50px;
    }

    .announcement-detail-kicker {
        padding: 7px 13px;

        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .announcement-detail-hero h1 {
        font-size: 27px;
    }

    .announcement-detail-content {
        padding: 28px 18px;
    }

    .announcement-detail-content::before {
        left: 18px;
        right: 18px;
    }

    .announcement-detail-info {
        gap: 8px;
    }

    .announcement-detail-category {
        font-size: 10px;
    }

    .announcement-detail-date {
        font-size: 12px;
    }

}
/* ==========================================================
   FLOATING WHATSAPP
=========================================================== */

.floating-whatsapp{

    position:fixed;

    right:24px;
    bottom:24px;

    z-index:9999;

    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#198754;

    color:#fff;

    text-decoration:none;

    box-shadow:
        0 8px 24px rgba(0,0,0,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


/* ICON */

.floating-whatsapp i{

    font-size:28px;

    line-height:1;

}


/* HOVER */

.floating-whatsapp:hover{

    color:#fff;

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.24);

}


/* LABEL */

.floating-whatsapp-text{

    position:absolute;

    right:68px;

    top:50%;

    transform:
        translateY(-50%);

    padding:
        8px 12px;

    border-radius:5px;

    background:#fff;

    border:1px solid #e2e8f0;

    color:#334155;

    font-size:11px;

    font-weight:600;

    white-space:nowrap;

    opacity:0;

    visibility:hidden;

    transition:
        opacity .2s ease,
        visibility .2s ease;

    box-shadow:
        0 5px 18px rgba(0,0,0,.10);

}


/* TAMPIL SAAT HOVER */

.floating-whatsapp:hover
.floating-whatsapp-text{

    opacity:1;

    visibility:visible;

}


/* ==========================================================
   MOBILE
=========================================================== */

@media (max-width:576px){

    .floating-whatsapp{

        right:16px;

        bottom:16px;

        width:52px;

        height:52px;

    }


    .floating-whatsapp i{

        font-size:25px;

    }


    .floating-whatsapp-text{

        display:none;

    }

}
/* ==========================================================
   OVERRIDE FLOATING WHATSAPP
   Naik agar tidak bertabrakan dengan tombol SCROLL TOP
=========================================================== */

.floating-whatsapp{

    right:24px;

    /*
    | Naikkan posisi dari bawah
    | agar tidak bertabrakan dengan tombol scroll-to-top
    */
    bottom:88px;

}


/* ==========================================================
   TABLET
=========================================================== */

@media (max-width:992px){

    .floating-whatsapp{

        right:20px;

        bottom:84px;

    }

}


/* ==========================================================
   MOBILE
=========================================================== */

@media (max-width:576px){

    .floating-whatsapp{

        right:16px;

        bottom:76px;

    }

}


/* ==========================================================
   MOBILE KECIL
=========================================================== */

@media (max-width:380px){

    .floating-whatsapp{

        right:14px;

        bottom:72px;

    }

}