/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #12345b;
    background: #ffffff;
}

/* Form controls use regular text weight; headings/buttons may remain emphasized. */
input,
textarea,
select {
    font-weight: 400;
}

a {
    text-decoration: none;
    color: inherit;
}

main {
    margin: 0;
    padding: 0;
}

main section {
    margin-top: 0;
}


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

.navbar {
    width: 100%;
    height: 78px;

    background: #ffffff;
    border-bottom: 1px solid #e8edf3;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    transition:
        background 0.3s ease,
        backdrop-filter 0.3s ease,
        box-shadow 0.3s ease;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.75);

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

    border-bottom: 1px solid rgba(232, 237, 243, 0.5);

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.08);
}

.nav-container {
    width: min(1200px, 92%);
    height: 100%;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

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

    line-height: 1.05;
}

.logo-text strong {
    font-size: 15px;
    color: #0c3768;
}

.logo-text span {
    font-size: 18px;
    font-weight: 800;
    color: #0c3768;
}


/* =========================================================
   MENU
========================================================= */

.nav-menu {
    display: flex;
    align-items: center;
    gap: 26px;
}

.nav-menu a {
    position: relative;

    padding: 30px 0;

    color: #173b63;

    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.nav-menu a::after {
    content: "";

    position: absolute;

    bottom: 18px;
    left: 0;

    width: 0;
    height: 3px;

    background: #f5b800;

    transition: width 0.25s ease;
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 100%;
}


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

.nav-ppdb {
    padding: 12px 23px;

    background: #f5b800;
    color: #12345b;

    border-radius: 25px;

    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}


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

.nav-toggle {
    display: none;

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 6px;

    background: #f5b800;
    color: #12345b;

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

    cursor: pointer;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease,
        background 0.25s ease;
}

.nav-toggle span {
    display: block;

    transition:
        transform 0.3s ease,
        opacity 0.2s ease;
}

.nav-toggle.active span {
    transform: rotate(90deg);
}


/* =========================================================
   HOME SLIDER
========================================================= */

.home-slider {
    position: relative !important;

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

    margin-top: 78px !important;

    overflow: hidden !important;

    background: #ffffff;

    perspective: 1400px;

    transform-style: preserve-3d;
}


/* =========================================================
   SLIDER ITEM
========================================================= */

.slider-item {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

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

    display: block !important;

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(70px)
        rotateY(-18deg)
        scale(0.96);

    transform-origin: center center;

    transition:
        opacity 0.9s cubic-bezier(0.65, 0, 0.35, 1),
        transform 1s cubic-bezier(0.65, 0, 0.35, 1),
        visibility 0.9s;

    pointer-events: none;

    z-index: 0;
}

.slider-item.active {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(0)
        rotateY(0deg)
        scale(1);

    pointer-events: auto;

    z-index: 2;
}


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

.slider-image {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

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

    display: block !important;

    background: #ffffff !important;

    overflow: hidden;

    transform: translateZ(0);
}

.slider-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   PRESTIGE IMAGE MOTION
========================================================= */

.slider-item.active .slider-image img {
    animation:
        prestigeImage 1.1s
        cubic-bezier(0.65, 0, 0.35, 1)
        both;
}

@keyframes prestigeImage {

    from {
        transform:
            scale(1.08)
            translateX(25px);
    }

    to {
        transform:
            scale(1)
            translateX(0);
    }
}


/* =========================================================
   SLIDER OVERLAY
========================================================= */

.slider-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 60px 8% 50px;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.75),
            rgba(0, 0, 0, 0)
        );

    color: #ffffff;

    z-index: 3;
}


/* =========================================================
   PRESTIGE TEXT MOTION
========================================================= */

.slider-item.active .slider-overlay h2 {
    animation:
        prestigeText 0.8s
        cubic-bezier(0.65, 0, 0.35, 1)
        0.12s
        both;
}

.slider-item.active .slider-overlay p {
    animation:
        prestigeText 0.8s
        cubic-bezier(0.65, 0, 0.35, 1)
        0.2s
        both;
}

.slider-item.active .slider-overlay .slider-button {
    animation:
        prestigeText 0.8s
        cubic-bezier(0.65, 0, 0.35, 1)
        0.28s
        both;
}

@keyframes prestigeText {

    from {
        opacity: 0;

        transform:
            translateY(25px)
            translateX(15px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            translateX(0);
    }
}


/* =========================================================
   SLIDER TEXT
========================================================= */

.slider-overlay h2 {
    margin: 0 0 10px;

    font-size: 36px;
}

.slider-overlay p {
    max-width: 700px;

    margin: 0 0 20px;

    font-size: 17px;
    line-height: 1.6;
}

.slider-button {
    display: inline-block;

    padding: 11px 20px;

    background: #2563eb;
    color: #ffffff;

    border-radius: 8px;

    font-weight: 600;
}

.slider-empty {
    width: 100%;
    height: 500px;

    display: flex;

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

    color: #6b7280;
}


/* =========================================================
   SLIDER ARROWS
========================================================= */

.home-slider .slider-arrow {
    position: absolute !important;

    top: 50% !important;
    bottom: auto !important;

    width: 48px !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

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

    transform: translateY(-50%) !important;

    border: 1px solid rgba(255, 255, 255, 0.45);

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.30);

    color: #ffffff;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;

    z-index: 50 !important;

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

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}

.home-slider .slider-prev {
    left: 25px !important;
    right: auto !important;
}

.home-slider .slider-next {
    right: 25px !important;
    left: auto !important;
}

.home-slider .slider-arrow:hover {
    background: rgba(0, 0, 0, 0.60);

    border-color: #ffffff;

    transform:
        translateY(-50%)
        scale(1.08) !important;
}


/* =========================================================
   SLIDER PAGINATION
========================================================= */

.slider-pagination {
    position: absolute;

    left: 50%;
    bottom: 22px;

    transform: translateX(-50%);

    display: flex;

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

    gap: 9px;

    width: auto;

    z-index: 60;

    pointer-events: none;
}

.slider-dot {
    display: block;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.5);

    transition:
        width 0.3s ease,
        background 0.3s ease;
}

.slider-dot.active {
    width: 28px;

    border-radius: 20px;

    background: #ffffff;
}


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

.hero {
    min-height: 570px;

    position: relative;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: flex-start;

    background:
        linear-gradient(
            90deg,
            rgba(4, 35, 70, 0.98) 0%,
            rgba(4, 35, 70, 0.90) 35%,
            rgba(4, 35, 70, 0.35) 70%,
            rgba(4, 35, 70, 0.10) 100%
        ),
        url("../images/hero.jpg");

    background-size: cover;
    background-position: center;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    width: min(1200px, 92%);

    margin: auto;

    padding: 0 0 80px;
}

.hero-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #f5b800;

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

    letter-spacing: 2px;
}

.hero h1 {
    max-width: 650px;

    color: #ffffff;

    font-size: clamp(38px, 5vw, 65px);

    line-height: 1.08;

    font-weight: 800;
}

.hero h1 span {
    display: inline-block;

    color: #f5b800;

    font-style: italic;
}

.hero p {
    max-width: 520px;

    margin-top: 25px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-buttons {
    display: flex;

    gap: 15px;

    margin-top: 32px;
}

.btn {
    display: inline-flex;

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

    min-width: 150px;

    padding: 14px 24px;

    border-radius: 6px;

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

    text-transform: uppercase;
}

.btn-primary {
    background: #f5b800;
    color: #12345b;
}

.btn-outline {
    border: 1px solid #ffffff;

    color: #ffffff;
}


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

.footer {
    margin-top: 0;

    background: #092c52;

    color: #ffffff;
}

.footer-container {
    width: min(1200px, 92%);

    margin: auto;

    padding: 60px 0;

    display: grid;

    grid-template-columns:
        220px
        2fr
        1fr
        1.5fr
        1fr;

    gap: 40px;

    align-items: start;
}

.footer-map {
    width: 220px;
    height: 220px;

    overflow: hidden;

    border-radius: 8px;

    background: #173f67;
}

.footer-map iframe {
    width: 100%;
    height: 100%;

    border: 0;

    display: block;
}

.footer h3 {
    margin-bottom: 15px;
}

.footer h4 {
    margin-bottom: 20px;

    color: #f5b800;
}

.footer p {
    max-width: 300px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 14px;
    line-height: 1.7;
}

.footer a {
    display: block;

    margin-bottom: 10px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 14px;
}

.footer a:hover {
    color: #f5b800;
}

.footer-bottom {
    padding: 18px;

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

    text-align: center;

    color: rgba(255, 255, 255, 0.6);

    font-size: 12px;
}


/* =========================================================
   FORM
========================================================= */

.form-card {
    max-width: 800px;

    margin: 0 auto;
    padding: 28px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.06);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    color: #1f2937;

    font-weight: 600;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;

    padding: 11px 13px;

    border: 1px solid #d1d5db;
    border-radius: 8px;

    background: #ffffff;

    font-size: 14px;
    font-family: inherit;

    box-sizing: border-box;

    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-group textarea {
    resize: vertical;
}

.form-group small {
    display: block;

    margin-top: 7px;

    color: #6b7280;

    font-size: 13px;
}

.form-actions {
    display: flex;

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

    gap: 12px;

    margin-top: 28px;
    padding-top: 20px;

    border-top: 1px solid #e5e7eb;
}


/* =========================================================
   TENTANG KAMI
========================================================= */

main:has(.about-page) {
    background: #f4f7fb;
}

.about-page {
    width: min(1200px, 92%);

    margin: 0 auto;

    padding: 125px 0 80px;
}


/* =========================================================
   ABOUT HEADER
========================================================= */

.about-header {
    position: relative;

    margin-bottom: 45px;

    text-align: center;
}

.about-header h1 {
    margin: 0 0 12px;

    color: #12345b;

    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    font-weight: 800;
}

.about-header h1::after {
    content: "";

    display: block;

    width: 55px;
    height: 4px;

    margin: 14px auto 0;

    background: #f5b800;

    border-radius: 10px;
}

.about-header p {
    max-width: 700px;

    margin: 15px auto 0;

    color: #64748b;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   ABOUT SECTION
========================================================= */

.about-section {
    position: relative;

    margin-bottom: 30px;
    padding: 38px;

    background: #ffffff;

    border: 1px solid #12345b;
    border-radius: 14px;

    box-shadow:
        0 6px 20px rgba(9, 44, 82, 0.06);

    overflow: hidden;
}

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

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #12345b 0%,
            #12345b 75%,
            #f5b800 75%,
            #f5b800 100%
        );
}

.about-section-title {
    position: relative;

    margin: 0 0 28px;

    color: #12345b;

    text-align: center;

    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
}

.about-section-title::after {
    content: "";

    display: block;

    width: 38px;
    height: 3px;

    margin: 11px auto 0;

    background: #f5b800;

    border-radius: 10px;
}

.about-section-description {
    max-width: 750px;

    margin: -10px auto 30px;

    color: #64748b;

    text-align: center;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   VISI & MISI
========================================================= */

.about-vision-mission {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;
}

.about-vision,
.about-mission {
    position: relative;

    padding: 28px;

    background: #f5f8fc;

    border: 1px solid #12345b;
    border-radius: 12px;

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

.about-vision:hover,
.about-mission:hover {
    transform: translateY(-4px);

    border-color: #12345b;

    box-shadow:
        0 10px 25px rgba(9, 44, 82, 0.08);
}

.about-vision h3,
.about-mission h3 {
    display: flex;

    align-items: center;

    margin: 0 0 15px;

    color: #12345b;

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

.about-vision h3::before,
.about-mission h3::before {
    content: "";

    display: inline-block;

    width: 5px;
    height: 22px;

    margin-right: 10px;

    background: #f5b800;

    border-radius: 5px;
}

.about-vision p,
.about-mission p {
    margin: 0;

    color: #475569;

    font-size: 14px;
    line-height: 1.85;

    white-space: pre-line;
}
.about-mission-list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.about-mission-item {
    display: grid;

    grid-template-columns: 28px 1fr;

    align-items: start;

    color: #475569;

    font-size: 14px;
    line-height: 1.85;
}

.about-mission-number {
    color: #12345b;

    font-weight: 600;
}

.about-mission-text {
    color: #475569;
}

/* =========================================================
   KEPALA SEKOLAH
========================================================= */

.about-principal {
    display: grid;

    grid-template-columns: 280px 1fr;

    gap: 40px;

    align-items: start;
}

.about-principal-photo,
.about-principal-placeholder {
    width: 240px;
    height: 300px;

    margin: 0 auto;

    display: block;

    object-fit: cover;

    border: 1px solid #12345b;
    border-radius: 12px;

    box-shadow:
        0 10px 25px rgba(9, 44, 82, 0.10);
}

.about-principal-placeholder {
    display: flex;

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

    background: #eef3f8;

    color: #64748b;

    font-size: 13px;

    box-shadow: none;
}

.about-principal-info {
    padding-top: 5px;
}

.about-principal-info h3 {
    margin: 0 0 8px;

    color: #12345b;

    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
}

.about-principal-nip {
    margin-bottom: 24px;

    color: #64748b;

    font-size: 13px;
}

.about-principal-info h4 {
    display: flex;

    align-items: center;

    margin: 22px 0 9px;

    color: #12345b;

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

.about-principal-info h4::before {
    content: "";

    width: 5px;
    height: 18px;

    margin-right: 9px;

    background: #f5b800;

    border-radius: 5px;
}

.about-principal-info p {
    margin: 0;

    color: #475569;

    font-size: 14px;
    line-height: 1.85;

    white-space: pre-line;
}


/* =========================================================
   GURU & TENAGA PENDIDIK
========================================================= */

.about-people-grid {
    display: grid;

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

    gap: 22px;
}

.about-person-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #12345b;
    border-radius: 12px;

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

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

    border-color: #12345b;

    box-shadow:
        0 12px 28px rgba(9, 44, 82, 0.10);
}


/* FOTO */

.about-person-photo,
.about-person-placeholder {
    width: 100%;
    height: 210px;

    display: block;

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

    background: #eef3f8;
}

.about-person-placeholder {
    display: flex;

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

    color: #64748b;

    font-size: 13px;
}


/* INFO */

.about-person-info {
    min-height: 145px;

    padding: 18px;
}

.about-person-info h3 {
    margin: 0 0 7px;

    color: #12345b;

    font-size: 17px;
    line-height: 1.35;
    font-weight: 800;
}

.about-person-position {
    margin-bottom: 7px;

    color: #12345b;

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

    line-height: 1.4;
}

.about-person-nip {
    color: #64748b;

    font-size: 12px;
}

.about-person-bio {
    margin-top: 12px;

    color: #475569;

    font-size: 13px;
    line-height: 1.7;

    white-space: pre-line;
}


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

.about-empty {
    grid-column: 1 / -1;

    padding: 35px;

    background: #f5f8fc;

    border: 1px dashed #12345b;
    border-radius: 10px;

    color: #64748b;

    text-align: center;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 900px) {

    .nav-container {
        position: relative;
    }

    .nav-toggle {
        display: flex;

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

    .logo-icon {
        width: 38px;
        height: 38px;
    }

    .nav-menu {
        display: none;

        position: absolute;

        top: 78px;
        left: 0;
        right: 0;

        padding: 15px 20px;

        background: #ffffff;

        border-top: 1px solid #e8edf3;

        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.08);

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        z-index: 999;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu a {
        padding: 15px 5px;

        font-size: 13px;
    }

    .nav-menu a::after {
        display: none;
    }

    .nav-ppdb {
        margin-left: auto;
        margin-right: 10px;
    }


    /* SLIDER */

    .home-slider {
        margin-top: 78px !important;

        height: 500px !important;
    }

    .slider-item,
    .slider-image {
        height: 500px !important;
    }


    /* HERO */

    .hero {
        min-height: 600px;
    }

    .hero-content {
        padding: 20px 0 60px;
    }


    /* FOOTER */

    .footer-container {
        grid-template-columns:
            220px 1fr;
    }


    /* TENTANG KAMI */

    .about-people-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .about-principal {
        grid-template-columns:
            230px 1fr;

        gap: 30px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 700px) {

    .about-page {
        width: 92%;

        padding:
            100px
            0
            55px;
    }

    .about-section {
        padding: 28px 20px;
    }

    .about-vision-mission {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .about-principal {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .about-principal-photo,
    .about-principal-placeholder {
        width: 220px;
        height: 275px;
    }

    .about-principal-info {
        padding-top: 0;

        text-align: left;
    }

    .about-people-grid {
        display: grid;

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

        gap: 12px;
    }

    .about-person-photo,
    .about-person-placeholder {
        height: 190px;
    }

    .about-person-info {
        padding: 14px;
    }

    .about-person-info h3 {
        font-size: 15px;
    }

    .about-person-position {
        font-size: 12px;
    }

}


/* =========================================================
   RESPONSIVE - SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

    .navbar {
        height: 68px;
    }

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

    .logo-text span {
        font-size: 15px;
    }

    .logo-icon {
        width: 40px;
        height: 40px;
    }

    .nav-ppdb {
        padding: 10px 15px;

        font-size: 10px;
    }


    /* SLIDER */

    .home-slider {
        margin-top: 68px !important;

        height: 420px !important;
    }

    .slider-item,
    .slider-image {
        height: 420px !important;
    }

    .slider-overlay {
        padding: 40px 6% 35px;
    }

    .slider-overlay h2 {
        font-size: 28px;
    }

    .slider-overlay p {
        font-size: 14px;
    }

    .home-slider .slider-arrow {
        width: 40px !important;
        height: 40px !important;

        font-size: 20px;
    }

    .home-slider .slider-prev {
        left: 12px !important;
    }

    .home-slider .slider-next {
        right: 12px !important;
    }

    .slider-pagination {
        bottom: 16px;
    }

    .slider-dot {
        width: 7px;
        height: 7px;
    }

    .slider-dot.active {
        width: 22px;
    }


    /* HERO */

    .hero {
        min-height: 600px;

        background:
            linear-gradient(
                rgba(4, 35, 70, 0.82),
                rgba(4, 35, 70, 0.92)
            ),
            url("../images/hero.jpg");

        background-position: center;
    }

    .hero-content {
        padding: 15px 0 60px;
    }

    .hero h1 {
        font-size: 39px;
    }

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


    /* HERO BUTTONS */

    .hero-buttons {
        flex-direction: column;

        align-items: flex-start;
    }

    .btn {
        width: 180px;
    }


    /* FOOTER */

    .footer-container {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .footer-map {
        width: 220px;
        height: 220px;
    }


    /* TENTANG KAMI */

    .about-page {
        width: 92%;

        padding-top: 90px;
    }

    .about-header {
        margin-bottom: 30px;
    }

    .about-header h1 {
        font-size: 32px;
    }

    .about-header p {
        font-size: 14px;
    }

    .about-section {
        padding: 24px 16px;
    }

    .about-section-title {
        font-size: 22px;
    }

    .about-vision,
    .about-mission {
        padding: 22px;
    }

    .about-principal-photo,
    .about-principal-placeholder {
        width: 200px;
        height: 250px;
    }

    .about-principal-info h3 {
        font-size: 24px;
    }

    /* GURU & TENAGA PENDIDIK - 2 KOLOM DI HP */

    .about-people-grid {
        display: grid;

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

        gap: 12px;
    }

    .about-person-photo,
    .about-person-placeholder {
        height: 190px;
    }

    .about-person-info {
        min-height: 125px;

        padding: 13px;
    }

    .about-person-info h3 {
        font-size: 14px;
    }

    .about-person-position {
        font-size: 11px;
    }

    .about-person-nip {
        font-size: 11px;
    }

    .about-person-bio {
        font-size: 12px;
    }

}


/* =====================================================
   MOBILE SLIDER BUTTON
===================================================== */

@media (max-width: 768px) {

    .home-slider .slider-arrow {
        opacity: 0.2;

        transition:
            opacity 0.3s ease,
            background 0.3s ease,
            transform 0.25s ease;
    }

    .home-slider .slider-arrow.touch-active {
        opacity: 0.5;
    }

}
/* =====================================================
   HOVER JUDUL PERPUSTAKAAN
===================================================== */

.about-section-title .library-title-link {
    position: relative;
    display: inline-block;
    color: #12345b;
    text-decoration: none;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.about-section-title .library-title-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 0;
    height: 3px;
    background: #f5b800;
    border-radius: 10px;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.about-section-title .library-title-link:hover {
    color: #f0ad00;
    transform: translateY(-3px) scale(1.04);
}

.about-section-title .library-title-link:hover::after {
    width: 70%;
}

.about-section-title .library-title-link:active {
    transform: translateY(0) scale(0.98);
}



/* Loading screen */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease, visibility .45s ease;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.page-loader-logo {
    width: 92px;
    height: 92px;
    object-fit: contain;
    animation: pageLoaderPulse 1.35s ease-in-out infinite;
}

.page-loader-spinner {
    width: 30px;
    height: 30px;
    margin-top: 18px;
    border: 3px solid #e5e7eb;
    border-top-color: #12345b;
    border-radius: 50%;
    animation: pageLoaderSpin .8s linear infinite;
}

.page-loader-content p {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
}

@keyframes pageLoaderPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes pageLoaderSpin {
    to { transform: rotate(360deg); }
}

/* Scroll reveal */
.scroll-reveal {
    opacity: 0;
    transform: translateY(38px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.scroll-reveal.from-left {
    transform: translateX(-42px);
}

.scroll-reveal.from-right {
    transform: translateX(42px);
}

.scroll-reveal.zoom {
    transform: scale(.94);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Hormati pengguna yang mematikan animasi */
@media (prefers-reduced-motion: reduce) {
    .page-loader-logo,
    .page-loader-spinner {
        animation: none;
    }

    .page-loader,
    .scroll-reveal {
        transition: none;
    }

    .scroll-reveal,
    .scroll-reveal.from-left,
    .scroll-reveal.from-right,
    .scroll-reveal.zoom {
        opacity: 1;
        transform: none;
    }
}

/* =====================================================
   FINAL PAGE LOADER
===================================================== */
.page-loader {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .45s ease, visibility .45s ease;
}

.page-loader.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.page-loader-inner {
    width: min(180px, 60vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.page-loader-logo {
    display: block !important;
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    animation: pageLoaderPulse 1.35s ease-in-out infinite;
}

.page-loader-spinner {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    border: 3px solid #e5e7eb !important;
    border-top-color: #12345b !important;
    border-radius: 50% !important;
    animation: pageLoaderSpin .8s linear infinite;
}

.page-loader-text {
    display: block !important;
    margin: 11px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    letter-spacing: .4px;
}

@keyframes pageLoaderPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes pageLoaderSpin {
    to { transform: rotate(360deg); }
}

/* =====================================================
   SMOOTH SCROLL REVEAL
===================================================== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal.delay-1 { transition-delay: .06s; }
.scroll-reveal.delay-2 { transition-delay: .12s; }
.scroll-reveal.delay-3 { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
    .page-loader-logo,
    .page-loader-spinner {
        animation: none !important;
    }

    .page-loader,
    .scroll-reveal {
        transition: none !important;
    }

    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =====================================================
   FINAL LOADER MOBILE FIX
===================================================== */

#page-loader {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#page-loader .page-loader-inner {
    position: relative !important;
    width: 180px !important;
    max-width: 80vw !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

#page-loader .page-loader-logo {
    display: block !important;
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    object-fit: contain !important;
}

#page-loader .page-loader-spinner {
    display: block !important;
    width: 27px !important;
    height: 27px !important;
    margin: 18px 0 0 !important;
    flex: 0 0 27px !important;
}

#page-loader .page-loader-text {
    display: block !important;
    margin: 11px 0 0 !important;
    padding: 0 !important;
}

@media (max-width: 700px) {
    #page-loader {
        min-width: 100vw !important;
        min-height: 100dvh !important;
    }

    #page-loader .page-loader-inner {
        transform: none !important;
    }
}


/* =====================================================
   FINAL HERO DESKTOP ANIMATION
===================================================== */

@media (min-width: 701px) {

    main .hero .hero-reveal {
        opacity: 0;
        transform: translateY(24px);
        transition:
            opacity 0.7s ease,
            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    main .hero .hero-delay-1 {
        transition-delay: 0.05s;
    }

    main .hero .hero-delay-2 {
        transition-delay: 0.15s;
    }

    main .hero .hero-delay-3 {
        transition-delay: 0.25s;
    }

    main .hero .hero-delay-4 {
        transition-delay: 0.35s;
    }

    main .hero .hero-reveal.hero-visible {
        opacity: 1;
        transform: translateY(0);
    }

}

/* =====================================================
   LOADER FINAL FIX
===================================================== */

#page-loader {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;

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

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    background: #fff !important;
    overflow: hidden !important;
}

#page-loader .page-loader-inner {
    width: 180px !important;
    max-width: 70vw !important;

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

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
    box-sizing: border-box !important;
}

#page-loader .page-loader-logo {
    display: block !important;

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

    margin: 0 auto !important;
    padding: 0 !important;

    object-fit: contain !important;
}

#page-loader .page-loader-spinner {
    display: block !important;

    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;

    margin: 18px auto 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    flex: 0 0 30px !important;

    border: 3px solid #e5e7eb !important;
    border-top-color: #12345b !important;
    border-radius: 50% !important;

    animation: pageLoaderSpin .8s linear infinite !important;
}

#page-loader .page-loader-text {
    display: block !important;

    margin: 12px auto 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    letter-spacing: .5px !important;

    text-align: center !important;
    white-space: nowrap !important;
}

@keyframes pageLoaderSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 700px) {

    #page-loader {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    #page-loader .page-loader-inner {
        width: 180px !important;
        max-width: 80vw !important;
    }

    #page-loader .page-loader-logo {
        width: 88px !important;
        height: 88px !important;
        max-width: 88px !important;
        max-height: 88px !important;
    }

}



/* =====================================================
   SCROLL REVEAL — DIRECTION AWARE
===================================================== */

.scroll-reveal {
    opacity: 0 !important;
    transform: translateY(-35px) !important;

    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;

    will-change: opacity, transform;
}


/* Scroll ke bawah:
   elemen fade-in dari ATAS */
.scroll-reveal.scroll-from-top {
    transform: translateY(-35px) !important;
}


/* Scroll ke atas:
   elemen fade-in dari BAWAH */
.scroll-reveal.scroll-from-bottom {
    transform: translateY(35px) !important;
}


/* Saat masuk viewport */
.scroll-reveal.revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}


/* Tidak ada efek kiri / kanan */
.scroll-reveal.from-left,
.scroll-reveal.from-right,
.scroll-reveal.zoom {
    transform: translateY(-35px) !important;
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .scroll-reveal,
    .scroll-reveal.scroll-from-top,
    .scroll-reveal.scroll-from-bottom,
    .scroll-reveal.from-left,
    .scroll-reveal.from-right,
    .scroll-reveal.zoom {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

}



/* =====================================================
   SCROLL REVEAL — DIRECTION AWARE
===================================================== */

.scroll-reveal {
    opacity: 0 !important;
    transform: translateY(-35px) !important;

    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;

    will-change: opacity, transform;
}


/* Scroll ke bawah:
   elemen fade-in dari ATAS */
.scroll-reveal.scroll-from-top {
    transform: translateY(-35px) !important;
}


/* Scroll ke atas:
   elemen fade-in dari BAWAH */
.scroll-reveal.scroll-from-bottom {
    transform: translateY(35px) !important;
}


/* Saat masuk viewport */
.scroll-reveal.revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}


/* Tidak ada efek kiri / kanan */
.scroll-reveal.from-left,
.scroll-reveal.from-right,
.scroll-reveal.zoom {
    transform: translateY(-35px) !important;
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .scroll-reveal,
    .scroll-reveal.scroll-from-top,
    .scroll-reveal.scroll-from-bottom,
    .scroll-reveal.from-left,
    .scroll-reveal.from-right,
    .scroll-reveal.zoom {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

}



/* =====================================================
   RESTORE ORIGINAL HOVER EFFECTS
   Scroll animation tetap aktif, hover tetap aktif
===================================================== */

@media (hover: hover) {

    .about-person-card.scroll-reveal.revealed:hover {
        transform: translateY(-5px) !important;
    }

    .about-vision.scroll-reveal.revealed:hover,
    .about-mission.scroll-reveal.revealed:hover {
        transform: translateY(-4px) !important;
    }

}


/* =====================================================
   RESTORE ORIGINAL HOVER EFFECTS
   Scroll animation tetap aktif, hover tetap aktif
===================================================== */

@media (hover: hover) {

    .about-person-card.scroll-reveal.revealed:hover {
        transform: translateY(-5px) !important;
    }

    .about-vision.scroll-reveal.revealed:hover,
    .about-mission.scroll-reveal.revealed:hover {
        transform: translateY(-4px) !important;
    }

}

/* =========================================================
   META / BADGE KONTEN
========================================================= */

.content-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.content-meta > span {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 20px;
    background: #f5b800 !important;
    color: #12345b !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

/* =========================================================
   TENTANG KAMI DROPDOWN - FINAL
========================================================= */

.nav-menu .nav-dropdown {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.nav-menu .nav-dropdown-toggle {
    position: relative !important;

    width: auto !important;
    height: 78px !important;

    margin: 0 !important;
    padding: 30px 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    color: #173b63 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Garis kuning */
.nav-menu .nav-dropdown-toggle::after {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    bottom: 18px !important;

    width: 0 !important;
    height: 3px !important;

    background: #f5b800 !important;

    transition: width .25s ease !important;
}

.nav-menu .nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-menu .nav-dropdown-toggle.active::after {
    width: 100% !important;
}

/* Panah */
.nav-menu .dropdown-arrow {
    display: inline-block !important;

    margin-left: 5px !important;

    font-size: 11px !important;
    line-height: 1 !important;

    transition: transform .25s ease !important;
}

.nav-menu .nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg) !important;
}


/* =========================================================
   DROPDOWN BOX
========================================================= */

.nav-menu .nav-dropdown-menu {
    position: absolute !important;

    top: 78px !important;
    left: 50% !important;

    width: 190px !important;
    min-width: 190px !important;

    margin: 0 !important;
    padding: 7px 0 !important;

    background: #ffffff !important;

    border: 1px solid #e8edf3 !important;
    border-radius: 0 0 8px 8px !important;

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

    transform:
        translateX(-50%)
        translateY(8px) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    z-index: 99999 !important;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease !important;
}

/* Muncul saat hover */
.nav-menu .nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transform:
        translateX(-50%)
        translateY(0) !important;
}


/* =========================================================
   ITEM DROPDOWN
========================================================= */

.nav-menu .nav-dropdown-menu a {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 12px 18px !important;

    background: #ffffff !important;

    color: #173b63 !important;

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

    text-transform: uppercase !important;

    white-space: nowrap !important;
}

/* Matikan garis navbar pada submenu */
.nav-menu .nav-dropdown-menu a::after {
    display: none !important;
}

.nav-menu .nav-dropdown-menu a:hover,
.nav-menu .nav-dropdown-menu a.active {
    background: #f5f8fc !important;

    color: #12345b !important;
}


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

@media (max-width: 900px) {

    .nav-menu .nav-dropdown {
        display: block !important;

        width: 100% !important;

        height: auto !important;
    }

    .nav-menu .nav-dropdown-toggle {
        width: 100% !important;

        height: auto !important;

        padding: 15px 5px !important;

        text-align: left !important;

        font-size: 13px !important;
    }

    .nav-menu .nav-dropdown-toggle::after {
        display: none !important;
    }

    .nav-menu .dropdown-arrow {
        float: right !important;

        margin-top: 2px !important;
    }

    .nav-menu .nav-dropdown-menu {
        position: static !important;

        width: 100% !important;
        min-width: 0 !important;

        padding: 0 !important;

        background: #f5f8fc !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        transform: none !important;

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

        pointer-events: auto !important;

        display: none !important;
    }

    .nav-menu .nav-dropdown:focus-within .nav-dropdown-menu,
    .nav-menu .nav-dropdown.mobile-open .nav-dropdown-menu {
        display: block !important;
    }

    .nav-menu .nav-dropdown:focus-within .dropdown-arrow,
    .nav-menu .nav-dropdown.mobile-open .dropdown-arrow {
        transform: rotate(180deg) !important;
    }

    .nav-menu .nav-dropdown-menu a {
        padding: 12px 20px !important;

        font-size: 12px !important;
    }
}

/* =========================================================
   MIGRATED FROM INDEX.PHP — INLINE STYLE 1
   ========================================================= */

/* =========================================================
   HOME CONTENT
========================================================= */

.home-content-section{
    padding:45px 7%;
}

.home-content-heading{
    text-align:center;
    margin-bottom:22px;
}

.home-content-heading span{
    display:block;
    color:#f5b800;
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:8px;
}

.home-content-heading h2{
    margin:0;
    color:#12345b;
    font-size:34px;
}


/* =========================================================
   BERITA
========================================================= */

.home-news-section{
    padding-top:45px;
    padding-bottom:30px;
}

.home-gallery-section{
    padding-top:30px;
    padding-bottom:45px;
}

.home-news-grid{
    max-width:1200px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.home-news-card{
    background:#fff;

    border:1px solid #e5e7eb;
    border-radius:14px;

    overflow:hidden;

    box-shadow:
        0 8px 24px rgba(18,52,91,.08);

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

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

    box-shadow:
        0 14px 30px rgba(18,52,91,.14);
}

.home-news-image{
    height:190px;

    background:#eef3f8;

    overflow:hidden;
}

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

    object-fit:cover;
    display:block;
}

.home-news-content{
    padding:14px 18px 16px;
    height:112px;
    box-sizing:border-box;
    overflow:hidden;
}

.home-news-date{
    color:#64748b;
    font-size:12px;
    line-height:1.25;
    margin-bottom:5px;
}

.home-news-content h3{
    margin:0 0 5px;

    color:#12345b;

    font-size:19px;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.home-news-content p{
    margin:0;

    color:#475569;

    font-size:14px;
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}


/* =========================================================
   GALERI 3 POSISI TETAP
========================================================= */

.home-gallery-section{
    background:#f8fafc;
    overflow:hidden;
}

.home-gallery-wrapper{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    position:relative;
}

.home-gallery-grid{
    width:100%;
    height:390px;
    position:relative;
    display:block;
    padding:0;
    overflow:hidden;
    transform:none !important;
    touch-action:pan-y;
    user-select:none;
}


/* =========================================================
   CARD
========================================================= */

.home-gallery-card{
    position:absolute;

    top:50%;

    width:min(30vw,420px);
    height:270px;

    margin:0;

    border-radius:20px;

    overflow:hidden;

    background:#e5e7eb;

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

    opacity:0;

    pointer-events:none;

    transform:
        translate(-50%,-50%)
        scale(.72);

    filter:saturate(.75);

    transition:
        left .65s cubic-bezier(.22,.61,.36,1),
        transform .65s cubic-bezier(.22,.61,.36,1),
        opacity .65s ease,
        filter .65s ease,
        box-shadow .65s ease;

    z-index:1;
}


/* =========================================================
   FOTO
========================================================= */

.home-gallery-card img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .65s ease;
}

.home-gallery-card:hover img{
    transform:scale(1.03);
}


/* =========================================================
   TENGAH
========================================================= */

.home-gallery-card.gallery-active{

    left:50%;

    width:min(42vw,570px);
    height:350px;

    opacity:1;

    pointer-events:auto;

    transform:
        translate(-50%,-50%)
        scale(1);

    filter:saturate(1);

    box-shadow:
        -35px 0 40px -25px rgba(18,52,91,.28), 35px 0 40px -25px rgba(18,52,91,.28);

    z-index:5;
}


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

.home-gallery-card.gallery-left{

    left:28%;

    opacity:.48;

    pointer-events:auto;

    transform:
        translate(-50%,-50%)
        scale(.78)
        rotateY(8deg);

    filter:blur(3px) saturate(.65);

    z-index:3;
}


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

.home-gallery-card.gallery-right{

    left:72%;

    opacity:.48;

    pointer-events:auto;

    transform:
        translate(-50%,-50%)
        scale(.78)
        rotateY(-8deg);

    filter:blur(3px) saturate(.65);

    z-index:3;
}


/* =========================================================
   CARD LAINNYA
========================================================= */

.home-gallery-card.gallery-far-left,
.home-gallery-card.gallery-far-right{

    left:50%;

    opacity:0;

    pointer-events:none;

    transform:
        translate(-50%,-50%)
        scale(.6);

    z-index:1;
}


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

.home-gallery-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:
        75px
        22px
        22px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.82)
        );

    color:#fff;

    opacity:.7;

    transition:
        opacity .5s ease;
}

.gallery-active .home-gallery-overlay{
    opacity:1;
}

.home-gallery-overlay h3{

    margin:0 0 6px;

    font-size:18px;
    line-height:1.35;
}

.home-gallery-overlay span{

    font-size:12px;

    opacity:.9;
}


/* =========================================================
   TOMBOL NAVIGASI
========================================================= */

.gallery-navigation{

    display:flex;

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

    gap:12px;

    margin-top:0;
}

.gallery-nav-button{

    width:44px;
    height:44px;

    padding:0;

    border:none;

    border-radius:50%;

    background:#12345b;

    color:#fff;

    display:flex;

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

    font-size:20px;

    line-height:1;

    cursor:pointer;

    box-shadow:
        0 8px 20px rgba(18,52,91,.18);

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

.gallery-nav-button:hover{

    transform:translateY(-2px);

    background:#0d2948;

    box-shadow:
        0 12px 25px rgba(18,52,91,.25);
}

.gallery-nav-button:active{

    transform:scale(.93);
}


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

.gallery-dots{

    display:flex;

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

    gap:7px;

    margin-top:18px;
}

.gallery-dot{

    width:7px;
    height:7px;

    padding:0;

    border:0;

    border-radius:50%;

    background:#cbd5e1;

    cursor:pointer;

    transition:
        width .3s ease,
        background .3s ease;
}

.gallery-dot.active{

    width:24px;

    border-radius:20px;

    background:#f5b800;
}


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

.home-empty-content{

    max-width:1200px;

    margin:0 auto;

    padding:30px;

    text-align:center;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:12px;

    color:#64748b;
}


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

@media(max-width:850px){

    .home-news-grid{

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

    }


    .home-gallery-grid{

        height:360px;

    }


    .home-gallery-card{

        width:42vw;
        height:240px;

    }


    .home-gallery-card.gallery-active{

        width:58vw;
        height:300px;

    }


    .home-gallery-card.gallery-left{

        left:22%;

    }


    .home-gallery-card.gallery-right{

        left:78%;

    }

}


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

@media(max-width:560px){

    .home-content-section{

        padding:38px 5%;

    }

    .home-news-section{
        padding-top:38px;
        padding-bottom:24px;
    }

    .home-gallery-section{
        padding-top:24px;
        padding-bottom:38px;
    }


    .home-content-heading h2{

        font-size:28px;

    }


    .home-news-grid{

        grid-template-columns:1fr;

    }


    .home-gallery-section{

        padding-left:0;
        padding-right:0;

    }


    .home-gallery-section .home-content-heading{

        padding-left:5%;
        padding-right:5%;

    }


    .home-gallery-grid{

        height:300px;

    }


    .home-gallery-card{

        width:58vw;

        height:190px;

        border-radius:16px;

    }


    .home-gallery-card.gallery-active{

        width:78vw;

        height:245px;

    }


    .home-gallery-card.gallery-left{

        left:18%;

        transform:
            translate(-50%,-50%)
            scale(.72)
            rotateY(8deg);

    }


    .home-gallery-card.gallery-right{

        left:82%;

        transform:
            translate(-50%,-50%)
            scale(.72)
            rotateY(-8deg);

    }


    .gallery-nav-button{

        width:40px;
        height:40px;

        font-size:18px;

    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    .home-gallery-grid,
    .home-gallery-card,
    .home-gallery-card img,
    .home-gallery-overlay{

        transition:none !important;

    }

}
/* =========================================================
   DROPDOWN TENTANG KAMI
========================================================= */

.nav-menu .nav-dropdown {
    position: relative !important;

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

    height: 100% !important;
}


/* =========================================================
   TOMBOL TENTANG KAMI
========================================================= */

.nav-menu .nav-dropdown-toggle {
    position: relative !important;

    width: auto !important;
    height: 78px !important;

    margin: 0 !important;
    padding: 30px 0 !important;

    border: none !important;
    border-radius: 0 !important;
    outline: none !important;

    background: transparent !important;

    color: #173b63 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}


/* Garis kuning bawah */

.nav-menu .nav-dropdown-toggle::after {
    content: "";

    position: absolute !important;

    left: 0 !important;
    bottom: 18px !important;

    width: 0 !important;
    height: 3px !important;

    background: #f5b800 !important;

    transition: width .25s ease !important;
}

.nav-menu .nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-menu .nav-dropdown-toggle.active::after {
    width: 100% !important;
}


/* =========================================================
   PANAH
========================================================= */

.nav-menu .dropdown-arrow {
    display: inline-block !important;

    margin-left: 5px !important;

    font-size: 11px !important;
    line-height: 1 !important;

    transition: transform .25s ease !important;
}

.nav-menu .nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg) !important;
}


/* =========================================================
   BOX DROPDOWN
========================================================= */

.nav-menu .nav-dropdown-menu {
    position: absolute !important;

    top: 78px !important;
    left: 50% !important;

    width: 190px !important;
    min-width: 190px !important;

    margin: 0 !important;
    padding: 7px 0 !important;

    background: #ffffff !important;

    border: 1px solid #e8edf3 !important;
    border-radius: 0 0 8px 8px !important;

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

    transform:
        translateX(-50%)
        translateY(8px) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    z-index: 99999 !important;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease !important;
}


/* Muncul ketika hover */

.nav-menu .nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transform:
        translateX(-50%)
        translateY(0) !important;
}


/* =========================================================
   ITEM DROPDOWN
========================================================= */

.nav-menu .nav-dropdown-menu a {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 12px 18px !important;

    background: #ffffff !important;

    color: #173b63 !important;

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

    text-transform: uppercase !important;

    white-space: nowrap !important;
}


/* Matikan garis kuning bawaan menu */

.nav-menu .nav-dropdown-menu a::after {
    display: none !important;
}


/* Hover submenu */

.nav-menu .nav-dropdown-menu a:hover {
    background: #f5f8fc !important;

    color: #12345b !important;
}


/* Item aktif */

.nav-menu .nav-dropdown-menu a.active {
    background: #f5f8fc !important;

    color: #12345b !important;
}


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

@media (max-width: 900px) {

    .nav-menu .nav-dropdown {
        display: block !important;

        width: 100% !important;

        height: auto !important;
    }


    .nav-menu .nav-dropdown-toggle {
        width: 100% !important;

        height: auto !important;

        padding: 15px 5px !important;

        text-align: left !important;

        font-size: 13px !important;
    }


    .nav-menu .nav-dropdown-toggle::after {
        display: none !important;
    }


    .nav-menu .dropdown-arrow {
        float: right !important;

        margin-top: 2px !important;
    }


    .nav-menu .nav-dropdown-menu {
        position: static !important;

        width: 100% !important;
        min-width: 0 !important;

        padding: 0 !important;

        background: #f5f8fc !important;

        border: none !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        transform: none !important;

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

        pointer-events: auto !important;

        display: none !important;
    }


    /* Buka dropdown ketika tombol disentuh/difokuskan */

    .nav-menu .nav-dropdown:focus-within
    .nav-dropdown-menu {
        display: block !important;
    }


    .nav-menu .nav-dropdown:focus-within
    .dropdown-arrow {
        transform: rotate(180deg) !important;
    }


    .nav-menu .nav-dropdown-menu a {
        padding: 12px 20px !important;

        font-size: 12px !important;
    }

}



/* =========================================================
   MIGRATED FROM BERITA.PHP — INLINE STYLE 1
   ========================================================= */

.berita-grid {

            display: grid;

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

            gap: 24px;

            margin-top: 28px;

        }


        .berita-card {

            background: #ffffff;

            border: 1px solid #d9e2ec;

            border-radius: 14px;

            overflow: hidden;

            box-shadow:
                0 8px 24px
                rgba(
                    18,
                    52,
                    91,
                    0.08
                );

            transition:
                transform 0.4s ease,
                box-shadow 0.4s ease;

        }


        .berita-card:hover {

            transform:
                translateY(-5px);

            box-shadow:
                0 14px 30px
                rgba(
                    18,
                    52,
                    91,
                    0.14
                );

        }


        .berita-photo {

            width: 100%;

            height: 240px;

            background: #eef3f8;

            overflow: hidden;

        }


        .berita-photo img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            display: block;

            transition:
                transform 0.5s ease;

        }


        .berita-card:hover
        .berita-photo img {

            transform:
                scale(1.04);

        }


        .berita-content {

            padding: 18px 22px 20px;

        }


        .berita-title {

            margin: 0 0 6px;

            color: #12345b;

            font-size: 20px;

            line-height: 1.4;

            transition:
                transform 0.4s ease;

        }


        .berita-card:hover
        .berita-title {

            transform:
                translateY(-4px);

        }


        .berita-content .content-meta {

            margin-bottom: 7px;

            transition:
                transform 0.4s ease;

        }


        .berita-card:hover
        .berita-content .content-meta {

            transform:
                translateY(-3px);

        }


        .berita-description {

            margin: 0;

            color: #475569;

            font-size: 14px;

            line-height: 1.5;

            transition:
                transform 0.4s ease;

        }


        .berita-card:hover
        .berita-description {

            transform:
                translateY(-2px);

        }


        @media (max-width: 700px) {


            .berita-grid {

                grid-template-columns: 1fr;

                gap: 18px;

            }


            .berita-photo {

                height: 220px;

            }


            .berita-content {

                padding: 16px 18px 18px;

            }


            .berita-title {

                font-size: 18px;

            }


        }


        @media (max-width: 480px) {


            .berita-photo {

                height: 200px;

            }


        }



/* =========================================================
   MIGRATED FROM GALERI.PHP — INLINE STYLE 1
   ========================================================= */

.gallery-grid {

            display: grid;

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

            gap: 24px;

            margin-top: 28px;

        }


        .gallery-card {

            background: #ffffff;

            border: 1px solid #d9e2ec;

            border-radius: 14px;

            overflow: hidden;

            box-shadow:
                0 8px 24px
                rgba(
                    18,
                    52,
                    91,
                    0.08
                );

            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease;

        }


        /*
         * HOVER TETAP DIPERTAHANKAN
         */

        .gallery-card:hover {

            transform:
                translateY(-5px);

            box-shadow:
                0 14px 30px
                rgba(
                    18,
                    52,
                    91,
                    0.14
                );

        }


        .gallery-photo {

            width: 100%;

            height: 240px;

            background: #eef3f8;

            overflow: hidden;

        }


        .gallery-photo img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            display: block;

            transition:
                transform 0.4s ease;

        }


        /*
         * HOVER FOTO TETAP
         */

        .gallery-card:hover
        .gallery-photo img {

            transform:
                scale(1.04);

        }


        .gallery-content {

            padding: 22px;

        }


        .gallery-title {

            margin: 0 0 12px;

            color: #12345b;

            font-size: 20px;

            line-height: 1.4;

        }


        .gallery-date {

            margin-bottom: 14px;

            color: #f0ad00;

            font-size: 13px;

            font-weight: 700;

        }


        .gallery-description {

            margin: 0;

            color: #475569;

            font-size: 14px;

            line-height: 1.8;

        }


        @media (max-width: 700px) {


            .gallery-grid {

                grid-template-columns: 1fr;

                gap: 18px;

            }


            .gallery-photo {

                height: 220px;

            }


            .gallery-content {

                padding: 18px;

            }


            .gallery-title {

                font-size: 18px;

            }


        }


        @media (max-width: 480px) {


            .gallery-photo {

                height: 200px;

            }


        }



/* =========================================================
   MIGRATED FROM PERPUSTAKAAN.PHP — INLINE STYLE 1
   ========================================================= */

.library-title-link {
        position: relative;
        display: inline-block;
        color: #12345b;
        text-decoration: none;
        transition: all 0.25s ease;
    }

    .library-title-link:hover {
        color: #12345b;
        transform: translateY(-4px);
        text-shadow: 0 6px 15px rgba(18, 52, 91, 0.2);
    }

    .library-title-link::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -9px;
        width: 0;
        height: 4px;
        background: #f5b800;
        border-radius: 10px;
        transform: translateX(-50%);
        transition: width 0.3s ease;
    }

    .library-title-link:hover::after {
        width: 70%;
    }

    .library-title-link:active {
        transform: translateY(-1px) scale(0.97);
    }



/* =========================================================
   MIGRATED FROM PRESTASI.PHP — INLINE STYLE 1
   ========================================================= */

.prestasi-grid {

            display: grid;

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

            gap: 24px;

            margin-top: 28px;

        }


        .prestasi-card {

            background: #ffffff;

            border: 1px solid #d9e2ec;

            border-radius: 14px;

            overflow: hidden;

            box-shadow:
                0 8px 24px
                rgba(
                    18,
                    52,
                    91,
                    0.08
                );

            transition:
                transform 0.4s ease,
                box-shadow 0.4s ease;

        }


        .prestasi-card:hover {

            transform:
                translateY(-5px);

            box-shadow:
                0 14px 30px
                rgba(
                    18,
                    52,
                    91,
                    0.14
                );

        }


        .prestasi-photo {

            width: 100%;

            height: 240px;

            background: #eef3f8;

            overflow: hidden;

        }


        .prestasi-photo img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            display: block;

            transition:
                transform 0.5s ease;

        }


        .prestasi-card:hover
        .prestasi-photo img {

            transform:
                scale(1.04);

        }


        .prestasi-content {

            padding: 22px;

        }


        .prestasi-title {

            margin: 0 0 12px;

            color: #12345b;

            font-size: 20px;

            line-height: 1.4;

            transition:
                transform 0.4s ease;

        }


        .prestasi-card:hover
        .prestasi-title {

            transform:
                translateY(-4px);

        }


        .prestasi-meta {

            display: flex;

            flex-wrap: wrap;

            gap: 8px;

            margin-bottom: 14px;

            transition:
                transform 0.4s ease;

        }


        .prestasi-card:hover
        .prestasi-meta {

            transform:
                translateY(-3px);

        }


        .prestasi-meta span {

            display: inline-flex;

            align-items: center;

            padding: 5px 10px;

            border-radius: 20px;

            background: #f5b800;

            color: #12345b;

            font-size: 12px;

            font-weight: 600;

            transition:
                transform 0.4s ease;

        }


        .prestasi-card:hover
        .prestasi-meta span {

            transform:
                translateY(-2px);

        }


        .prestasi-description {

            margin: 0;

            color: #475569;

            font-size: 14px;

            line-height: 1.8;

            transition:
                transform 0.4s ease;

        }


        .prestasi-card:hover
        .prestasi-description {

            transform:
                translateY(-2px);

        }


        @media (max-width: 700px) {


            .prestasi-grid {

                grid-template-columns: 1fr;

                gap: 18px;

            }


            .prestasi-photo {

                height: 220px;

            }


            .prestasi-content {

                padding: 18px;

            }


            .prestasi-title {

                font-size: 18px;

            }


        }


        @media (max-width: 480px) {


            .prestasi-photo {

                height: 200px;

            }


        }


/* =========================================================
   EKSKUL
   Follows the existing public-site visual language.
   ========================================================= */

.ekskul-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ekskul-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .05);
}

.ekskul-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f4f6;
}

.ekskul-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ekskul-content {
    padding: 20px;
}

.ekskul-content h2 {
    margin: 0 0 10px;
    color: #12345b;
    font-size: 20px;
}

.ekskul-content p,
.ekskul-detail {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.7;
}

.ekskul-detail {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eef0f3;
}

.home-ekskul-section .home-ekskul-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.home-ekskul-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.home-ekskul-card-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f4f6;
}

.home-ekskul-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.home-ekskul-card-content {
    padding: 18px;
}

.home-ekskul-card-content h3 {
    margin: 0 0 8px;
    color: #12345b;
    font-size: 18px;
}

.home-ekskul-card-content p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

.home-ekskul-more {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

@media (max-width: 900px) {
    .ekskul-grid,
    .home-ekskul-section .home-ekskul-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .ekskul-grid,
    .home-ekskul-section .home-ekskul-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   HOME - SAMBUTAN KEPALA SEKOLAH
========================================================= */

.principal-slide {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    align-items: stretch;
    /* Satu bidang warna agar batas kolom tidak terasa seperti dua panel. */
    background: linear-gradient(90deg, #0f2948 0%, #12345b 46%, #12345b 68%, #12345b 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.principal-slide-photo {
    grid-column: 2;
    grid-row: 1;
    min-height: 500px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding: 25px 7% 0;
    background:
        radial-gradient(circle at 52% 58%, rgba(245,184,0,.24) 0 22%, transparent 22.5%),
        radial-gradient(circle at 50% 62%, rgba(245,184,0,.10) 0 34%, transparent 34.5%),
        linear-gradient(180deg, rgba(18,63,111,.72) 0%, rgba(11,49,90,.38) 100%);
    position: relative;
}

/* Pelembut batas kiri area foto: transisi navy -> biru dibuat bertahap. */
.principal-slide-photo::marker {
    content: none;
}

.principal-slide-photo > * {
    position: relative;
    z-index: 2;
}

.principal-slide-photo::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    border: 2px solid rgba(245,184,0,.65);
    border-radius: 50%;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 1;
}

.principal-slide-photo::after {
    content: "";
    position: absolute;
    width: 78px;
    height: 78px;
    right: 8%;
    top: 16%;
    background-image: radial-gradient(#f5b800 1.5px, transparent 1.5px);
    background-size: 13px 13px;
    opacity: .72;
    z-index: 3;
}

/* Overlay gradasi di sisi kiri area foto supaya tidak ada garis vertikal keras. */
.principal-slide-photo {
    isolation: isolate;
    box-shadow: inset 45px 0 70px -55px rgba(11,49,90,.95);
}

.principal-slide-photo::selection {
    background: transparent;
}

.principal-slide-photo img {
    width: 100%;
    height: 100%;
    max-width: 420px;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 20px 28px rgba(0,0,0,.22));
}

.principal-slide-content {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding: 55px 8%;
    max-width: 900px;
    z-index: 3;
}

.principal-slide-label {
    display: inline-block;
    margin-bottom: 14px;
    color: #f5b800;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
}

.principal-slide-content h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(32px, 4vw, 58px);
    line-height: 1.08;
}

.principal-slide-content p {
    max-width: 700px;
    margin: 0;
    color: rgba(255,255,255,.92);
    font-size: 17px;
    line-height: 1.75;
}

.slider-item.active .principal-slide-content {
    animation: prestigeText .8s cubic-bezier(.65,0,.35,1) .12s both;
}

.slider-item.active .principal-slide-photo img {
    animation: prestigePrincipalPhoto 1s cubic-bezier(.65,0,.35,1) both;
}

@keyframes prestigePrincipalPhoto {
    from {
        opacity: 0;
        transform: translateY(24px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.vision-highlight {
    color: #f5b800;
    font-style: italic;
}

/* =========================================================
   HOME - LINK CARD
========================================================= */

.home-news-link,
.home-gallery-link {
    color: inherit;
    text-decoration: none;
}

.home-news-link:focus-visible,
.home-gallery-link:focus-visible {
    outline: 3px solid rgba(37,99,235,.45);
    outline-offset: 4px;
}

/* Visi berasal dari Admin -> Tentang Kami -> Visi & Misi. */
.hero h1 {
    max-width: 850px;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 850px) {
    .principal-slide {
        grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr);
        background: linear-gradient(90deg, #0b315a 0%, #0d345d 46%, #103962 68%, #123f6f 100%);
    }

    .principal-slide-photo {
        min-height: 500px;
        padding-left: 0;
        padding-right: 12px;
    }

    .principal-slide-content {
        padding-left: 6%;
        padding-right: 3%;
    }
}

@media (max-width: 600px) {
    .principal-slide {
        display: block !important;
        background: linear-gradient(180deg, #0b315a 0%, #0d345d 100%);
    }

    .principal-slide-content {
        position: relative;
        min-height: 250px;
        padding: 32px 7% 20px;
    }

    .principal-slide-content h2 {
        font-size: 30px;
        margin-bottom: 10px;
    }

    .principal-slide-content p {
        font-size: 13px;
        line-height: 1.55;
        max-height: 95px;
        overflow: hidden;
    }

    .principal-slide-label {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .principal-slide-photo {
        min-height: 170px;
        height: 170px;
        padding: 8px 18% 0;
        align-items: flex-end;
        background: linear-gradient(180deg, #123f6f 0%, #0b315a 100%);
    }

    .principal-slide-photo img {
        max-width: 230px;
    }

    .hero h1 {
        font-size: clamp(31px, 8vw, 42px);
        line-height: 1.12;
    }
}


/* =========================================================
   MOBILE DROPDOWN CLICK FIX
========================================================= */

@media (max-width: 900px) {

    .nav-menu .nav-dropdown {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .nav-menu .nav-dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

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

        padding: 15px 5px !important;
        margin: 0 !important;

        text-align: left !important;

        border: 0 !important;
        background: transparent !important;

        cursor: pointer !important;
    }

    .nav-menu .nav-dropdown-menu {
        position: static !important;

        display: none !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 0 0 15px !important;

        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        transform: none !important;

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

        pointer-events: auto !important;
    }

    /* HANYA terbuka ketika tombol Tentang Kami diklik */
    .nav-menu .nav-dropdown.mobile-open > .nav-dropdown-menu {
        display: block !important;

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

        transform: none !important;
    }

    .nav-menu .nav-dropdown.mobile-open .dropdown-arrow {
        transform: rotate(180deg) !important;
    }

    .nav-menu .nav-dropdown-menu a {
        display: block !important;

        width: 100% !important;

        padding: 12px 10px !important;

        font-size: 12px !important;
    }

    /* Matikan efek hover desktop di HP */
    .nav-menu .nav-dropdown:hover .nav-dropdown-menu {
        display: none !important;

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

        transform: none !important;
    }

    .nav-menu .nav-dropdown.mobile-open:hover .nav-dropdown-menu {
        display: block !important;
    }

}


.public-pagination{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:32px 0 5px}.public-pagination a,.public-pagination span{min-width:38px;height:38px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #d9e2ec;border-radius:8px;background:#fff;color:#12345b;text-decoration:none;font-size:14px;font-weight:600}.public-pagination a:hover{background:#f8fafc;border-color:#b9c7d8}.public-pagination .current{background:#12345b;border-color:#12345b;color:#fff}.public-pagination .prev-next{padding:0 14px}


/* Home: tombol menuju seluruh berita */
.home-news-more{display:flex;justify-content:center;margin-top:26px}
.home-news-more .btn{
    min-width:210px;
    text-align:center;
    justify-content:center;
}

.home-news-more .btn-outline{
    border:1px solid #12345b;
    color:#12345b;
    background:transparent;
}

.home-news-more .btn-outline:hover{
    background:#12345b;
    border-color:#12345b;
    color:#ffffff;
}

/* =========================================================
   BERITA DETAIL + CLICKABLE CARDS
========================================================= */

/* =========================================================
   BERITA DETAIL + CLICKABLE CARDS
========================================================= */

.berita-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.berita-card-link:visited {
    color: inherit;
}

.berita-detail-section {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.berita-detail-back {
    display: inline-block;
    margin-bottom: 22px;
    color: #12345b;
    text-decoration: none;
    font-weight: 700;
    transition: transform .2s ease, color .2s ease;
}

.berita-detail-back:hover {
    color: #f0ad00;
    transform: translateX(-3px);
}

.berita-detail-card {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
    align-items: stretch;
    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(18,52,91,.08);
}

.berita-detail-photo {
    width: 100%;
    height: 100%;
    min-height: 420px;
    background: #eef3f8;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.berita-detail-photo img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    display: block;
}

.berita-detail-content {
    padding: 30px 32px;
    align-self: start;
}

.berita-detail-meta {
    color: #f0ad00;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.berita-detail-title {
    margin: 0 0 14px;
    color: #12345b;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
}

.berita-detail-excerpt {
    margin: 0 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
    color: #64748b;
    font-size: 16px;
    line-height: 1.7;
}

.berita-detail-body {
    color: #334155;
    font-size: 16px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .berita-detail-card {
        grid-template-columns: 1fr;
    }

    .berita-detail-photo {
        min-height: 0;
    }

    .berita-detail-photo img {
        width: 100%;
        height: auto;
    }

    .berita-detail-content {
        padding: 22px 18px;
    }

    .berita-detail-title {
        font-size: 28px;
    }

    .berita-detail-body {
        font-size: 15px;
        line-height: 1.8;
    }
}

/* =========================================================
   GURU & TENAGA PENDIDIK - INFO CARD LEBIH RINGKAS
   ========================================================= */
.about-section .about-person-photo {
    object-fit: cover;
    object-position: center top;
}

.about-section .about-person-info {
    min-height: 0;
    padding: 15px 16px 16px;
}

.about-section .about-person-info h3 {
    margin: 0 0 5px;
    line-height: 1.28;
    font-weight: 800;
}

.about-section .about-person-position {
    margin: 0 0 5px;
    font-weight: 400;
    line-height: 1.35;
}

.about-section .about-person-nip {
    line-height: 1.35;
}

.about-section .about-person-bio {
    margin-top: 6px;
    line-height: 1.45;
}

/* =========================================================
   SCANNER SCROLL FIX
   Mouse wheel + touch scroll harus menggerakkan halaman.
   ========================================================= */
body.scanner-page,
body.scanner-page html {
    overflow: auto !important;
    height: auto !important;
    min-height: 100% !important;
}

body.scanner-page {
    overscroll-behavior: auto !important;
}

body.scanner-page .app,
body.scanner-page .app-body,
body.scanner-page .main-content,
body.scanner-page main {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

body.scanner-page .content {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}