/* ============================================================
   e-SCHOOL EMTUPI
   SMA MUHAMMADIYAH 2 PALANG

   STYLE.CSS — MODERN PREMIUM EDITION
   Concept:
   Royal Blue • Cyan • Orange • Glass • Soft Glow
============================================================ */


/* ============================================================
   01. ROOT / DESIGN SYSTEM
============================================================ */

:root {

    /* ================= PRIMARY ================= */

    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-deep: #172554;
    --primary-soft: #eff6ff;

    /* ================= CYAN ================= */

    --cyan: #06b6d4;
    --cyan-dark: #0891b2;
    --cyan-soft: #ecfeff;

    /* ================= ORANGE ================= */

    --orange: #f97316;
    --orange-dark: #ea580c;
    --orange-light: #fb923c;
    --orange-soft: #fff7ed;

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

    --dark: #0f172a;
    --dark-2: #172033;
    --text: #334155;
    --muted: #64748b;
    --muted-light: #94a3b8;

    /* ================= BACKGROUND ================= */

    --white: #ffffff;
    --light: #f8fafc;
    --light-2: #f1f5f9;

    --blue-soft: #eff6ff;
    --cyan-bg: #f0fdff;

    /* ================= BORDER ================= */

    --border: #e2e8f0;
    --border-light: #edf2f7;

    --border-blue:
        rgba(37,99,235,.14);

    /* ================= GLASS ================= */

    --glass:
        rgba(255,255,255,.72);

    --glass-strong:
        rgba(255,255,255,.88);

    --glass-dark:
        rgba(15,23,42,.72);

    /* ================= SHADOW ================= */

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

    --shadow-sm:
        0 8px 25px rgba(15,23,42,.055);

    --shadow:
        0 16px 45px rgba(15,23,42,.08);

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

    --shadow-blue:
        0 20px 55px rgba(37,99,235,.18);

    --shadow-orange:
        0 20px 55px rgba(249,115,22,.16);

    /* ================= RADIUS ================= */

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 26px;
    --radius-xl: 36px;
    --radius-pill: 999px;

    /* ================= TRANSITION ================= */

    --transition:
        all .35s cubic-bezier(.4,0,.2,1);

    --transition-fast:
        all .2s ease;

    /* ================= CONTAINER ================= */

    --container:
        1320px;
}


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

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--text);

    background:
        #ffffff;

    line-height: 1.7;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    display: block;
}

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

    transition: var(--transition);
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus,
a:focus {
    outline: none;
}

::selection {
    background: var(--primary);
    color: var(--white);
}


/* ============================================================
   03. TYPOGRAPHY
============================================================ */

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

    margin-top: 0;

    font-family:
        "Poppins",
        sans-serif;

    color: var(--dark);

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -.35px;
}

p {
    color: var(--text);
}

.text-muted {
    color: var(--muted) !important;
}


/* ============================================================
   04. BOOTSTRAP OVERRIDE
============================================================ */

.btn {

    position: relative;

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

    font-weight: 700;

    border-radius:
        var(--radius-sm);

    padding:
        12px 21px;

    border-width: 1px;

    transition:
        var(--transition);

    overflow: hidden;
}

.btn::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transition:
        left .55s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {

    color: var(--white);

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

    border-color:
        var(--primary);

    box-shadow:
        0 10px 25px
        rgba(37,99,235,.20);
}

.btn-primary:hover {

    color: var(--white);

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            #1e40af
        );

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

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 35px
        rgba(37,99,235,.28);
}

.btn-outline-primary {

    color: var(--primary);

    border-color:
        rgba(37,99,235,.28);

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

    backdrop-filter:
        blur(10px);
}

.btn-outline-primary:hover {

    color: var(--white);

    background:
        var(--primary);

    border-color:
        var(--primary);

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 25px
        rgba(37,99,235,.20);
}

.btn-light {

    color: var(--primary);

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

    border:
        none;

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

.btn-light:hover {

    color: var(--orange-dark);

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px
        rgba(15,23,42,.20);
}

.btn-outline-light {

    color: var(--white);

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

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

    backdrop-filter:
        blur(8px);
}

.btn-outline-light:hover {

    color: var(--primary);

    background:
        var(--white);

    border-color:
        var(--white);

    transform:
        translateY(-3px);
}


/* ============================================================
   05. NAVBAR
============================================================ */

.main-navbar {

    position: relative;

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

    backdrop-filter:
        blur(22px)
        saturate(180%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(180%);

    border-bottom:
        1px solid
        rgba(226,232,240,.72);

    padding:
        14px 0;

    transition:
        var(--transition);

    z-index: 1050;
}

.main-navbar::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(37,99,235,.20),
            rgba(6,182,212,.20),
            rgba(249,115,22,.20),
            transparent
        );

    opacity: .7;
}

.main-navbar.scrolled {

    padding:
        9px 0;

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

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


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

.navbar-brand {

    display: flex;

    align-items: center;

    gap: 10px;
}

.brand-logo {

    position: relative;

    width: 48px;
    height: 48px;

    display: flex;

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

    flex-shrink: 0;

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

    border-radius:
        15px;

    overflow: hidden;

    box-shadow:
        0 9px 25px
        rgba(37,99,235,.20);
}

.brand-logo::after {

    content: "";

    position: absolute;

    width: 80px;
    height: 80px;

    top: -45px;
    right: -35px;

    border-radius: 50%;

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

.brand-logo img {

    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 5px;
}

.brand-logo span {

    position: relative;

    z-index: 2;

    color: var(--white);

    font-family:
        "Poppins",
        sans-serif;

    font-size: 17px;

    font-weight: 800;
}

.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1;
}

.brand-text strong {

    color: var(--dark);

    font-family:
        "Poppins",
        sans-serif;

    font-size: 22px;

    font-weight: 800;

    letter-spacing: -.2px;
}

.brand-text small {

    color: var(--muted);

    font-size: 16px;

    margin-top: 4px;

    letter-spacing: .15px;
}


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

.main-navbar .nav-link {

    position: relative;

    color:
        #475569;

    font-size:
        13px;

    font-weight:
        700;

    padding:
        10px 13px !important;

    border-radius:
        10px;

    transition:
        var(--transition);
}

.main-navbar .nav-link:hover {

    color:
        var(--primary);

    background:
        rgba(37,99,235,.055);
}

.main-navbar .nav-link.active {

    color:
        var(--primary);

    background:
        rgba(37,99,235,.07);
}

.main-navbar .nav-link::after {

    content: "";

    position: absolute;

    left: 13px;
    right: 13px;

    bottom: 3px;

    height: 2px;

    border-radius:
        999px;

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

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        var(--transition);
}

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

    transform:
        scaleX(1);
}


/* ============================================================
   08. NAV CTA
============================================================ */

.nav-cta {

    padding:
        10px 18px !important;

    color:
        var(--white) !important;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--orange-dark)
        );

    border:
        none;

    border-radius:
        12px;

    box-shadow:
        0 9px 23px
        rgba(249,115,22,.22);
}

.nav-cta:hover {

    color:
        var(--white) !important;

    background:
        linear-gradient(
            135deg,
            var(--orange-dark),
            #c2410c
        );

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 30px
        rgba(249,115,22,.30);
}

.nav-cta::after {
    display: none !important;
}


/* ============================================================
   09. NAVBAR TOGGLER
============================================================ */

.navbar-toggler {

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

    border-radius:
        11px;

    padding:
        7px 10px;

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

.navbar-toggler:hover {

    border-color:
        rgba(37,99,235,.25);

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

.navbar-toggler:focus {

    box-shadow:
        0 0 0 4px
        rgba(37,99,235,.10);
}


/* ============================================================
   10. HERO
============================================================ */

.hero-section {

    position: relative;

    height:
        750px;

    min-height:
        650px;

    overflow:
        hidden;

    background:
        var(--dark);
}

.hero-slide {

    position: relative;

    height:
        750px;

    min-height:
        650px;

    background-size:
        cover;

    background-position:
        center;
}

.hero-slide::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            115deg,
            rgba(7,16,38,.94) 0%,
            rgba(15,35,78,.82) 25%,
            rgba(15,35,78,.48) 45%,
            rgba(15,23,42,.18) 100%
        );

    z-index:
        0;
}


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

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        radial-gradient(
            circle at 78% 25%,
            rgba(6,182,212,.18),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 75%,
            rgba(249,115,22,.15),
            transparent 28%
        );
}

.hero-overlay::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -180px;
    top: -180px;

    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);
}

.hero-overlay::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(7,16,38,.42)
        );
}


/* ============================================================
   11. HERO CONTENT
============================================================ */

.hero-content {

    position: relative;

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        flex-start;

    z-index:
        2;

    padding-top:
        60px;

    max-width:
        920px;
}

.hero-content::before {

    content: "";

    position: absolute;

    left: -80px;
    top: 25%;

    width: 180px;
    height: 180px;

    border-radius:
        50%;

    background:
        rgba(37,99,235,.14);

    filter:
        blur(50px);

    pointer-events:
        none;
}


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

.hero-badge {

    position: relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px 16px;

    margin-bottom:
        20px;

    border-radius:
        var(--radius-pill);

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

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

    backdrop-filter:
        blur(15px);

    color:
        var(--white);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

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

.hero-badge i {

    color:
        var(--orange-light);

    filter:
        drop-shadow(
            0 0 8px
            rgba(249,115,22,.45)
        );
}


/* ============================================================
   13. HERO TITLE
============================================================ */

.hero-content h1 {

    position: relative;

    max-width:
        880px;

    margin-bottom:
        21px;

    color:
        var(--white);

    font-size:
        clamp(44px, 5.5vw, 76px);

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        -2.4px;

    text-shadow:
        0 5px 30px
        rgba(0,0,0,.18);
}

.hero-content h1 span {

    display:
        inline;

    color:
        var(--orange-light);

    text-shadow:
        0 0 25px
        rgba(249,115,22,.20);
}

.hero-content p {

    max-width:
        680px;

    margin-bottom:
        30px;

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

    font-size:
        16px;

    line-height:
        1.8;
}


/* ============================================================
   14. HERO BUTTONS
============================================================ */

.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;
}

.hero-buttons .btn {

    min-width:
        155px;
}


/* ============================================================
   15. HERO INDICATOR
============================================================ */

.hero-section .carousel-indicators {

    z-index:
        5;

    bottom:
        35px;

    justify-content:
        flex-start;

    padding-left:
        max(
            12px,
            calc((100% - var(--container)) / 2)
        );
}

.hero-section .carousel-indicators button {

    width:
        25px;

    height:
        4px;

    margin:
        0 4px;

    border:
        none;

    border-radius:
        999px;

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

    transition:
        var(--transition);
}

.hero-section .carousel-indicators button.active {

    width:
        58px;

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

    box-shadow:
        0 0 14px
        rgba(6,182,212,.35);
}


/* ============================================================
   16. HERO CONTROLS
============================================================ */

.hero-section .carousel-control-prev,
.hero-section .carousel-control-next {

    width:
        58px;

    height:
        58px;

    top:
        50%;

    transform:
        translateY(-50%);

    margin:
        0 25px;

    border-radius:
        50%;

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

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

    backdrop-filter:
        blur(12px);

    opacity:
        .65;

    transition:
        var(--transition);
}

.hero-section .carousel-control-prev:hover,
.hero-section .carousel-control-next:hover {

    opacity:
        1;

    background:
        var(--primary);

    border-color:
        var(--primary);

    transform:
        translateY(-50%)
        scale(1.08);

    box-shadow:
        0 12px 30px
        rgba(37,99,235,.25);
}


/* ============================================================
   17. QUICK INFO
============================================================ */

.quick-info {

    position:
        relative;

    margin-top:
        -70px;

    z-index:
        10;

    padding-bottom:
        35px;
}

.quick-info-card {

    position:
        relative;

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

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

    border-radius:
        var(--radius-lg);

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

    overflow:
        hidden;

    backdrop-filter:
        blur(22px)
        saturate(150%);
}

.quick-info-card::before {

    content: "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(37,99,235,.035),
            transparent 40%,
            rgba(249,115,22,.035)
        );
}

.quick-item {

    position:
        relative;

    min-height:
        115px;

    padding:
        22px 25px;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    border-right:
        1px solid
        rgba(226,232,240,.75);

    transition:
        var(--transition);
}

.quick-item:hover {

    background:
        rgba(239,246,255,.75);

    transform:
        translateY(-2px);
}

.quick-item:last-child {
    border-right:
        none;
}

.quick-icon {

    width:
        53px;

    height:
        53px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        16px;

    color:
        var(--white);

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

    box-shadow:
        0 10px 23px
        rgba(37,99,235,.18);

    transition:
        var(--transition);
}

.quick-item:hover .quick-icon {

    transform:
        rotate(-5deg)
        scale(1.06);
}

.quick-item:nth-child(3) .quick-icon {

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--orange-dark)
        );

    box-shadow:
        0 10px 23px
        rgba(249,115,22,.18);
}

.quick-item strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--dark);

    font-size:
        14px;

    font-weight:
        800;
}

.quick-item span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        12px;
}


/* ============================================================
   18. SECTIONS
============================================================ */

.section-padding {

    position:
        relative;

    padding:
        105px 0;
}

.section-padding.bg-light {

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #f1f5f9
        ) !important;
}


/* ============================================================
   19. SECTION LABEL
============================================================ */

.section-label {

    display:
        inline-flex;

    align-items:
        center;

    position:
        relative;

    margin-bottom:
        13px;

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1.7px;

    text-transform:
        uppercase;
}

.section-label::before {

    content:
        "";

    width:
        25px;

    height:
        3px;

    margin-right:
        9px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--cyan),
            var(--orange)
        );
}


/* ============================================================
   20. SECTION TITLE
============================================================ */

.section-title {

    margin-bottom:
        16px;

    color:
        var(--dark);

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

    font-weight:
        800;

    letter-spacing:
        -1px;
}

.section-title span {

    color:
        var(--primary);
}

.section-heading-center {

    max-width:
        760px;

    margin-left:
        auto;

    margin-right:
        auto;
}

.section-heading-center > p {

    color:
        var(--muted);

    font-size:
        14px;
}


/* ============================================================
   21. PRINCIPAL / SAMBUTAN
============================================================ */

.principal-photo {

    position:
        relative;

    padding:
        9px;

    border-radius:
        22px;

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

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

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    max-width:
        380px;

    margin:
        0 auto;
}


/* ============================================================
   ORNAMEN KANAN BAWAH
============================================================ */

.principal-photo::before {

    content:
        "";

    position:
        absolute;

    width:
        110px;

    height:
        110px;

    right:
        -30px;

    bottom:
        -30px;

    background:
        radial-gradient(
            circle,
            rgba(249,115,22,.32) 2px,
            transparent 2px
        );

    background-size:
        12px 12px;

    z-index:
        -1;
}


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

.principal-photo::after {

    content:
        "";

    position:
        absolute;

    width:
        90px;

    height:
        90px;

    left:
        -25px;

    top:
        40px;

    border-radius:
        50%;

    background:
        rgba(6,182,212,.13);

    filter:
        blur(20px);

    z-index:
        -1;
}


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

.principal-photo img {

    display:
        block;

    width:
        auto;

    max-width:
        100%;

    height:
        auto;

    max-height:
        480px;

    object-fit:
        contain;

    object-position:
        center;

    border-radius:
        26px;

    background:
        var(--white);
}


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

.principal-name {

    margin-top:
        28px;

    padding:
        18px 20px;

    border-left:
        4px solid
        var(--orange);

    background:
        linear-gradient(
            90deg,
            var(--orange-soft),
            #fff
        );

    border-radius:
        0 16px 16px 0;

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

    text-align:
        left;
}


.principal-name strong {

    display:
        block;

    color:
        var(--dark);

    font-size:
        15px;

    font-weight:
        800;

    text-align:
        left;
}


.principal-name span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        13px;

    margin-top:
        3px;

    text-align:
        left;
}

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

#profil .col-lg-7 {

    text-align:
        left;
}


/* ============================================================
   LABEL SAMBUTAN
============================================================ */

#profil .section-label {

    display:
        block;

    text-align:
        left;
}


/* ============================================================
   JUDUL / TEKS SAMBUTAN
============================================================ */

#profil .profil-sambutan {

    text-align:
        left;
}


/* ============================================================
   ISI PARAGRAF
============================================================ */

#profil .profil-sambutan p {

    text-align:
        left;

    margin-bottom:
        12px;
}


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

#profil .principal-name {

    width:
        100%;

    margin-top:
        28px;

    margin-left:
        0;

    margin-right:
        0;

    padding-top:
        18px;

    padding-right:
        24px;

    padding-bottom:
        18px;

    padding-left:
        30px;

    border-left:
        4px solid
        var(--orange);

    background:
        linear-gradient(
            90deg,
            var(--orange-soft),
            #fff
        );

    border-radius:
        0 16px 16px 0;

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

    text-align:
        left;

    box-sizing:
        border-box;
}


/* ============================================================
   NAMA
============================================================ */

#profil .principal-name strong {

    display:
        block;

    margin:
        0;

    padding:
        0;

    color:
        var(--dark);

    font-size:
        15px;

    font-weight:
        800;

    text-align:
        left;
}


/* ============================================================
   JABATAN
============================================================ */

#profil .principal-name span {

    display:
        block;

    margin-top:
        4px;

    padding:
        0;

    color:
        var(--muted);

    font-size:
        13px;

    text-align:
        left;
}


/* ============================================================
   22. SECTION HEADING
============================================================ */

.section-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        42px;
}


/* ============================================================
   23. NEWS CARD
============================================================ */

.news-card {

    position:
        relative;

    height:
        100%;

    overflow:
        hidden;

    background:
        var(--white);

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

    border-radius:
        var(--radius-lg);

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

    transition:
        var(--transition);
}

.news-card::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        3px;

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

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        var(--transition);

    z-index:
        3;
}

.news-card:hover {

    transform:
        translateY(-9px);

    border-color:
        rgba(37,99,235,.13);

    box-shadow:
        var(--shadow-lg);
}

.news-card:hover::before {

    transform:
        scaleX(1);
}

.news-image {

    position:
        relative;

    height:
        235px;

    overflow:
        hidden;

    background:
        var(--blue-soft);
}

.news-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(15,23,42,.16)
        );

    pointer-events:
        none;
}

.news-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

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

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

    transform:
        scale(1.08);
}

.news-category {

    position:
        absolute;

    left:
        16px;

    top:
        16px;

    z-index:
        2;

    padding:
        6px 11px;

    color:
        var(--white);

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--orange-dark)
        );

    border-radius:
        var(--radius-pill);

    font-size:
        10px;

    font-weight:
        800;

    box-shadow:
        0 8px 20px
        rgba(249,115,22,.24);
}

.news-content {

    padding:
        24px;
}

.news-date {

    margin-bottom:
        9px;

    color:
        var(--primary);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .3px;
}

.news-content h3 {

    display:
        -webkit-box;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;

    min-height:
        50px;

    margin-bottom:
        11px;

    font-size:
        18px;

    transition:
        var(--transition);
}

.news-card:hover .news-content h3 {

    color:
        var(--primary);
}

.news-content p {

    display:
        -webkit-box;

    -webkit-line-clamp:
        3;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;

    margin-bottom:
        17px;

    color:
        var(--muted);

    font-size:
        13px;
}

.news-content > a {

    color:
        var(--primary);

    font-size:
        12px;

    font-weight:
        800;
}

.news-content > a:hover {

    color:
        var(--orange);

    padding-left:
        3px;
}


/* ============================================================
   24. FEATURE CARD
============================================================ */

.feature-card {

    position:
        relative;

    height:
        100%;

    padding:
        31px 26px;

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

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

    border-radius:
        var(--radius-lg);

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

    transition:
        var(--transition);

    overflow:
        hidden;

    backdrop-filter:
        blur(10px);
}

.feature-card::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        4px;

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

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        var(--transition);
}

.feature-card::after {

    content:
        "";

    position:
        absolute;

    width:
        140px;

    height:
        140px;

    right:
        -70px;

    bottom:
        -70px;

    border-radius:
        50%;

    background:
        rgba(37,99,235,.035);

    transition:
        var(--transition);
}

.feature-card:hover {

    transform:
        translateY(-9px);

    box-shadow:
        var(--shadow);

    border-color:
        rgba(37,99,235,.12);
}

.feature-card:hover::before {

    transform:
        scaleX(1);
}

.feature-card:hover::after {

    transform:
        scale(1.25);
}

.feature-icon {

    width:
        61px;

    height:
        61px;

    margin-bottom:
        23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;

    color:
        var(--white);

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

    box-shadow:
        0 12px 25px
        rgba(37,99,235,.18);

    font-size:
        21px;

    transition:
        var(--transition);
}

.feature-card:nth-child(2) .feature-icon,
.feature-card:nth-child(4) .feature-icon {

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--orange-dark)
        );

    box-shadow:
        0 12px 25px
        rgba(249,115,22,.18);
}

.feature-card:hover .feature-icon {

    transform:
        rotate(-6deg)
        scale(1.09);
}

.feature-card h3 {

    margin-bottom:
        10px;

    font-size:
        18px;
}

.feature-card p {

    margin-bottom:
        0;

    color:
        var(--muted);

    font-size:
        13px;
}


/* ============================================================
   25. SPMB SECTION
============================================================ */

.spmb-section {

    position:
        relative;

    padding:
        105px 0;

    background:
        linear-gradient(
            135deg,
            #eff6ff 0%,
            #f8fafc 45%,
            #ecfeff 70%,
            #fff7ed 100%
        );

    overflow:
        hidden;
}

.spmb-section::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    left:
        -240px;

    top:
        -200px;

    border-radius:
        50%;

    background:
        rgba(37,99,235,.09);

    filter:
        blur(2px);
}

.spmb-section::after {

    content:
        "";

    position:
        absolute;

    width:
        430px;

    height:
        430px;

    right:
        -180px;

    bottom:
        -190px;

    border-radius:
        50%;

    background:
        rgba(249,115,22,.08);
}


/* ============================================================
   26. SPMB CARD
============================================================ */

.spmb-card {

    position:
        relative;

    z-index:
        2;

    padding:
        58px;

    overflow:
        hidden;

    border-radius:
        var(--radius-xl);

    color:
        var(--white);

    background:
        linear-gradient(
            135deg,
            #172554 0%,
            #1e3a8a 32%,
            #2563eb 65%,
            #0891b2 100%
        );

    box-shadow:
        0 30px 75px
        rgba(30,58,138,.24);
}

.spmb-card::before {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    right:
        -190px;

    top:
        -190px;

    border-radius:
        50%;

    border:
        55px solid
        rgba(255,255,255,.045);

    box-shadow:
        0 0 0 35px
        rgba(255,255,255,.02);
}

.spmb-card::after {

    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    left:
        -100px;

    bottom:
        -130px;

    border-radius:
        50%;

    background:
        rgba(249,115,22,.14);
}

.spmb-card h2 {

    position:
        relative;

    z-index:
        2;

    color:
        var(--white);

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

    font-weight:
        800;

    margin-bottom:
        18px;

    letter-spacing:
        -1px;
}

.spmb-card h2 span {

    color:
        var(--orange-light);
}

.spmb-card p {

    position:
        relative;

    z-index:
        2;

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

.spmb-label {

    display:
        inline-block;

    margin-bottom:
        14px;

    padding:
        7px 13px;

    border-radius:
        var(--radius-pill);

    color:
        var(--white);

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

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

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1.3px;
}


/* ============================================================
   27. SPMB PERIOD
============================================================ */

.spmb-period {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin:
        26px 0;

    padding:
        18px;

    border-radius:
        17px;

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

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

    backdrop-filter:
        blur(12px);

    transition:
        var(--transition);
}

.spmb-period:hover {

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

    transform:
        translateX(4px);
}

.spmb-period-icon {

    width:
        49px;

    height:
        49px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--orange-dark)
        );

    color:
        var(--white);

    box-shadow:
        0 10px 23px
        rgba(249,115,22,.24);
}

.spmb-period-content strong {

    display:
        block;

    color:
        var(--white);

    font-size:
        14px;
}

.spmb-period-content span {

    display:
        block;

    color:
        var(--orange-light);

    font-size:
        13px;

    font-weight:
        800;
}

.spmb-period-content small {

    display:
        block;

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

    font-size:
        11px;

    margin-top:
        3px;
}


/* ============================================================
   28. SPMB STATUS
============================================================ */

.spmb-status {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin:
        25px 0;

    padding:
        18px;

    border-radius:
        17px;

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

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

    transition:
        var(--transition);
}

.spmb-status:hover {

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

.spmb-status-icon {

    width:
        49px;

    height:
        49px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        rgba(249,115,22,.18);

    color:
        var(--orange-light);
}

.spmb-status strong {

    display:
        block;

    color:
        var(--white);

    font-size:
        14px;
}

.spmb-status span {

    display:
        block;

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

    font-size:
        12px;
}


/* ============================================================
   29. SPMB BUTTONS
============================================================ */

.spmb-buttons {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;
}


/* ============================================================
   30. SPMB IMAGE
============================================================ */

.spmb-image {

    position:
        relative;

    padding:
        8px;

    border-radius:
        27px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.45),
            rgba(6,182,212,.30),
            rgba(249,115,22,.35)
        );

    transform:
        rotate(1.2deg);

    transition:
        var(--transition);

    box-shadow:
        0 25px 55px
        rgba(15,23,42,.14);
}

.spmb-image:hover {

    transform:
        rotate(0)
        translateY(-7px);
}

.spmb-image img {

    width:
        100%;

    height:
        365px;

    object-fit:
        cover;

    border-radius:
        21px;
}


/* ============================================================
   31. GALLERY
============================================================ */

.gallery-grid {

    row-gap:
        20px !important;
}

.gallery-item {

    position:
        relative;

    height:
        305px;

    overflow:
        hidden;

    border-radius:
        var(--radius-lg);

    background:
        var(--dark);

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

    transition:
        var(--transition);
}

.gallery-item::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

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

    border-radius:
        inherit;

    z-index:
        3;

    pointer-events:
        none;
}

.gallery-item img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

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

.gallery-item:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow-lg);
}

.gallery-item:hover img {

    transform:
        scale(1.10);
}

.gallery-overlay {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        flex-end;

    padding:
        25px;

    background:
        linear-gradient(
            180deg,
            transparent 20%,
            rgba(15,23,42,.18) 40%,
            rgba(15,23,42,.92) 100%
        );

    transition:
        var(--transition);

    z-index:
        2;
}

.gallery-item:hover .gallery-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(23,37,84,.08),
            rgba(15,23,42,.94)
        );
}

.gallery-overlay-content {

    width:
        100%;

    transform:
        translateY(8px);

    transition:
        var(--transition);
}

.gallery-item:hover .gallery-overlay-content {

    transform:
        translateY(0);
}

.gallery-overlay i {

    width:
        43px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        13px;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--orange-dark)
        );

    color:
        var(--white);

    box-shadow:
        0 10px 25px
        rgba(249,115,22,.28);
}

.gallery-overlay h5 {

    margin-bottom:
        5px;

    color:
        var(--white);

    font-size:
        17px;

    font-weight:
        700;
}

.gallery-overlay small {

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

    font-size:
        11px;
}


/* ============================================================
   32. TESTIMONI SECTION
============================================================ */

.testimoni-section {

    position:
        relative;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #eff6ff 55%,
            #ecfeff
        );

    overflow:
        hidden;
}

.testimoni-section::before {

    content:
        "";

    position:
        absolute;

    width:
        330px;

    height:
        330px;

    left:
        -170px;

    top:
        90px;

    border-radius:
        50%;

    background:
        rgba(37,99,235,.065);

    filter:
        blur(1px);
}

.testimoni-section::after {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    right:
        -150px;

    bottom:
        70px;

    border-radius:
        50%;

    background:
        rgba(249,115,22,.06);
}


/* ============================================================
   33. TESTIMONI SLIDER
============================================================ */

.testimoni-slider-wrapper {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    z-index:
        2;
}

.testimoni-viewport {

    width:
        100%;

    overflow:
        hidden;

    padding:
        10px 5px 22px;
}

.testimoni-track {

    display:
        flex;

    gap:
        20px;

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

    will-change:
        transform;
}

.testimoni-slide-item {

    flex:
        0 0
        calc(
            33.333333% - 13.333px
        );

    min-width:
        0;
}


/* ============================================================
   34. TESTIMONI CARD
============================================================ */

.testimoni-card {

    position:
        relative;

    height:
        100%;

    padding:
        33px 20px 20px;

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

    border:
        1px solid
        rgba(226,232,240,.85);

    border-radius:
        var(--radius-lg);

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

    transition:
        var(--transition);

    backdrop-filter:
        blur(12px);
}

.testimoni-card:hover {

    transform:
        translateY(-8px);

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

    border-color:
        rgba(37,99,235,.15);
}

.testimoni-card::before {

    content:
        "";

    position:
        absolute;

    left:
        25px;

    right:
        25px;

    top:
        0;

    height:
        3px;

    border-radius:
        0 0 999px 999px;

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

    opacity:
        0;

    transition:
        var(--transition);
}

.testimoni-card:hover::before {

    opacity:
        1;
}


/* ============================================================
   35. TESTIMONI PHOTO
============================================================ */

.testimoni-photo-wrapper {

    width:
        82px;

    height:
        82px;

    margin:
        0 auto 20px;

    position:
        relative;
}

.testimoni-photo {

    width:
        82px;

    height:
        82px;

    object-fit:
        cover;

    border-radius:
        50%;

    border:
        4px solid
        var(--white);

    box-shadow:
        0 10px 25px
        rgba(15,23,42,.13);
}

.testimoni-photo-placeholder {

    width:
        82px;

    height:
        82px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

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

    color:
        var(--white);

    font-size:
        25px;

    box-shadow:
        0 10px 25px
        rgba(37,99,235,.20);
}


/* ============================================================
   36. TESTIMONI QUOTE
============================================================ */

.testimoni-quote {

    position:
        absolute;

    top:
        25px;

    right:
        25px;

    width:
        41px;

    height:
        41px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    color:
        var(--orange);

    background:
        var(--orange-soft);

    font-size:
        16px;

    box-shadow:
        var(--shadow-xs);
}


/* ============================================================
   37. TESTIMONI CONTENT
============================================================ */

.testimoni-content {

    min-height:
        110px;

    margin-bottom:
        20px;
}

.testimoni-content p {

    margin-bottom:
        0;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.85;
}


/* ============================================================
   38. TESTIMONI AUTHOR
============================================================ */

.testimoni-author {

    padding-top:
        18px;

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

    text-align:
        center;
}

.testimoni-author h4 {

    margin-bottom:
        9px;

    color:
        var(--dark);

    font-size:
        16px;
}

.testimoni-alumni-info,
.testimoni-class,
.testimoni-job {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--muted);

    font-size:
        11px;

    margin-top:
        4px;
}

.testimoni-alumni-info i {

    color:
        var(--primary);
}

.testimoni-class i {

    color:
        var(--orange);
}

.testimoni-job i {

    color:
        var(--cyan-dark);
}


/* ============================================================
   39. TESTIMONI CONTROLS
============================================================ */

.testimoni-control {

    width:
        49px;

    height:
        49px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

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

    color:
        var(--primary);

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

    transition:
        var(--transition);

    z-index:
        5;
}

.testimoni-control:hover {

    background:
        var(--primary);

    border-color:
        var(--primary);

    color:
        var(--white);

    transform:
        scale(1.08);

    box-shadow:
        var(--shadow-blue);
}


/* ============================================================
   40. TESTIMONI INDICATOR
============================================================ */

.testimoni-indicator-wrapper {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        15px;
}

.testimoni-indicator {

    width:
        8px;

    height:
        8px;

    padding:
        0;

    border:
        none;

    border-radius:
        999px;

    background:
        #cbd5e1;

    transition:
        var(--transition);
}

.testimoni-indicator.active {

    width:
        27px;

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

    box-shadow:
        0 0 10px
        rgba(37,99,235,.18);
}


/* ============================================================
   41. CONTACT
============================================================ */

.contact-card {

    position:
        relative;

    height:
        100%;

    padding:
        33px 25px;

    text-align:
        center;

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

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

    border-radius:
        var(--radius-lg);

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

    transition:
        var(--transition);

    overflow:
        hidden;
}

.contact-card::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        3px;

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

    transform:
        scaleX(0);

    transition:
        var(--transition);
}

.contact-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        var(--shadow);

    border-color:
        rgba(37,99,235,.12);
}

.contact-card:hover::before {

    transform:
        scaleX(1);
}

.contact-icon {

    width:
        65px;

    height:
        65px;

    margin:
        0 auto 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        20px;

    color:
        var(--white);

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

    box-shadow:
        0 12px 25px
        rgba(37,99,235,.18);

    font-size:
        22px;

    transition:
        var(--transition);
}

.contact-card:nth-child(2) .contact-icon {

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--orange-dark)
        );

    box-shadow:
        0 12px 25px
        rgba(249,115,22,.18);
}

.contact-card:hover .contact-icon {

    transform:
        translateY(-4px)
        rotate(-5deg)
        scale(1.05);
}

.contact-card h3 {

    margin-bottom:
        8px;

    font-size:
        18px;
}

.contact-card p {

    margin-bottom:
        0;

    color:
        var(--muted);

    font-size:
        13px;
}


/* ============================================================
   42. FOOTER
============================================================ */

.footer {

    position:
        relative;

    padding:
        80px 0 0;

    overflow:
        hidden;

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

    background:
        linear-gradient(
            135deg,
            #071126,
            #0f172a 45%,
            #172554 100%
        );
}

.footer::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -220px;

    top:
        -250px;

    border-radius:
        50%;

    background:
        rgba(37,99,235,.10);

    filter:
        blur(3px);
}

.footer::after {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    left:
        -150px;

    bottom:
        -160px;

    border-radius:
        50%;

    background:
        rgba(249,115,22,.075);
}

.footer .container {

    position:
        relative;

    z-index:
        2;
}

.footer-brand {

    display:
        flex;

    align-items:
        center;

    margin-bottom:
        21px;
}

.footer .brand-logo {

    width:
        49px;

    height:
        49px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--cyan),
            var(--orange)
        );
}

.footer .brand-text strong {

    color:
        var(--white);
}

.footer .brand-text small {

    color:
        rgba(255,255,255,.50);
}

.footer p {

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

    font-size:
        13px;
}

.footer h4 {

    position:
        relative;

    margin-bottom:
        23px;

    color:
        var(--white);

    font-size:
        16px;
}

.footer h4::after {

    content:
        "";

    display:
        block;

    width:
        35px;

    height:
        3px;

    margin-top:
        9px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--cyan),
            var(--orange)
        );
}


/* ============================================================
   43. FOOTER LINKS
============================================================ */

.footer-links {

    padding:
        0;

    margin:
        0;

    list-style:
        none;
}

.footer-links li {

    margin-bottom:
        10px;
}

.footer-links a {

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

    font-size:
        13px;
}

.footer-links a:hover {

    color:
        var(--orange-light);

    padding-left:
        5px;
}


/* ============================================================
   44. SOCIAL
============================================================ */

.social-links {

    display:
        flex;

    gap:
        9px;
}

.social-links a {

    width:
        41px;

    height:
        41px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

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

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

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

    transition:
        var(--transition);
}

.social-links a:hover {

    color:
        var(--white);

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

    border-color:
        transparent;

    transform:
        translateY(-4px);

    box-shadow:
        0 10px 25px
        rgba(37,99,235,.20);
}


/* ============================================================
   45. FOOTER BOTTOM
============================================================ */

.footer-bottom {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        58px;

    padding:
        23px 0;

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

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

    font-size:
        11px;
}


/* ============================================================
   46. SCROLLBAR
============================================================ */

::-webkit-scrollbar {

    width:
        9px;
}

::-webkit-scrollbar-track {

    background:
        #f1f5f9;
}

::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            180deg,
            var(--primary),
            var(--cyan),
            var(--orange)
        );

    border-radius:
        999px;
}

::-webkit-scrollbar-thumb:hover {

    background:
        linear-gradient(
            180deg,
            var(--primary-dark),
            var(--orange-dark)
        );
}


/* ============================================================
   47. RESPONSIVE — LARGE TABLET
============================================================ */

@media (max-width: 1199.98px) {

    .hero-section,
    .hero-slide {

        height:
            690px;

        min-height:
            630px;
    }

    .hero-content h1 {

        font-size:
            58px;
    }

    .section-padding {

        padding:
            88px 0;
    }

    .spmb-card {

        padding:
            48px;
    }

    .testimoni-slide-item {

        flex-basis:
            calc(50% - 10px);
    }
}


/* ============================================================
   48. RESPONSIVE — TABLET
============================================================ */

@media (max-width: 991.98px) {

    /* NAVBAR */

    .main-navbar {

        padding:
            10px 0;
    }

    .navbar-collapse {

        margin-top:
            15px;

        padding:
            12px;

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

        border-radius:
            17px;

        box-shadow:
            var(--shadow);

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

        backdrop-filter:
            blur(18px);
    }

    .main-navbar .nav-link {

        padding:
            10px 12px !important;
    }

    .main-navbar .nav-link::after {

        display:
            none;
    }

    .nav-cta {

        display:
            inline-block;

        margin-top:
            8px;
    }


    /* HERO */

    .hero-section,
    .hero-slide {

        height:
            630px;

        min-height:
            590px;
    }

    .hero-slide::before {

        background:
            linear-gradient(
                100deg,
                rgba(7,16,38,.92),
                rgba(15,35,78,.66)
            );
    }

    .hero-content h1 {

        max-width:
            700px;

        font-size:
            49px;
    }

    .hero-content p {

        font-size:
            15px;
    }


    /* QUICK INFO */

    .quick-info {

        margin-top:
            -40px;
    }

    .quick-item {

        min-height:
            100px;

        padding:
            18px;
    }


    /* PROFILE */

    .principal-photo {

        max-width:
            600px;

        margin:
            0 auto;
    }

    .principal-photo img {

        height:
            420px;
    }


    /* SPMB */

    .spmb-card {

        padding:
            42px;
    }

    .spmb-image {

        max-width:
            600px;

        margin:
            0 auto;
    }


    /* GALLERY */

    .gallery-item {

        height:
            275px;
    }


    /* CONTACT */

    .contact-card {

        padding:
            28px 20px;
    }
}


/* ============================================================
   49. RESPONSIVE — MOBILE
============================================================ */

@media (max-width: 767.98px) {

    html {

        scroll-padding-top:
            75px;
    }


    /* BRAND */

    .brand-logo {

        width:
            43px;

        height:
            43px;

        border-radius:
            12px;
    }

    .brand-text strong {

        font-size:
            14px;
    }

    .brand-text small {

        font-size:
            9px;
    }


    /* HERO */

    .hero-section,
    .hero-slide {

        height:
            620px;

        min-height:
            600px;
    }

    .hero-content {

        padding:
            80px 20px 50px;
    }

    .hero-content h1 {

        font-size:
            39px;

        line-height:
            1.15;

        letter-spacing:
            -1px;
    }

    .hero-content p {

        font-size:
            14px;

        line-height:
            1.75;
    }

    .hero-badge {

        font-size:
            9px;

        padding:
            7px 11px;
    }

    .hero-buttons {

        width:
            100%;

        flex-direction:
            column;

        align-items:
            stretch;
    }

    .hero-buttons .btn {

        width:
            100%;

        min-width:
            auto;
    }

    .hero-section .carousel-control-prev,
    .hero-section .carousel-control-next {

        display:
            none;
    }

    .hero-section .carousel-indicators {

        bottom:
            20px;

        justify-content:
            center;

        padding-left:
            0;
    }


    /* QUICK INFO */

    .quick-info {

        margin-top:
            -27px;

        padding-left:
            12px;

        padding-right:
            12px;
    }

    .quick-info-card {

        border-radius:
            21px;
    }

    .quick-item {

        min-height:
            auto;

        padding:
            18px 20px;

        border-right:
            none;

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

    .quick-item:last-child {

        border-bottom:
            none;
    }


    /* SECTIONS */

    .section-padding {

        padding:
            70px 0;
    }

    .section-title {

        font-size:
            31px;
    }

    .section-heading {

        flex-direction:
            column;

        align-items:
            flex-start;

        margin-bottom:
            30px;
    }


    /* PRINCIPAL */

    .principal-photo img {

        height:
            350px;
    }


    /* NEWS */

    .news-image {

        height:
            220px;
    }


    /* FEATURE */

    .feature-card {

        padding:
            26px 22px;
    }


    /* SPMB */

    .spmb-section {

        padding:
            70px 0;
    }

    .spmb-card {

        padding:
            31px 22px;

        border-radius:
            26px;
    }

    .spmb-card h2 {

        font-size:
            31px;
    }

    .spmb-buttons {

        flex-direction:
            column;
    }

    .spmb-buttons .btn {

        width:
            100%;
    }

    .spmb-image img {

        height:
            300px;
    }


    /* GALLERY */

    .gallery-item {

        height:
            260px;
    }


    /* TESTIMONI */

    .testimoni-slide-item {

        flex-basis:
            100%;
    }

    .testimoni-control {

        width:
            42px;

        height:
            42px;
    }

    .testimoni-slider-wrapper {

        gap:
            7px;
    }


    /* CONTACT */

    .contact-card {

        padding:
            25px 20px;
    }


    /* FOOTER */

    .footer {

        padding-top:
            60px;
    }

    .footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        margin-top:
            40px;
    }
}


/* ============================================================
   50. RESPONSIVE — SMALL MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .container {

        padding-left:
            18px;

        padding-right:
            18px;
    }


    /* HERO */

    .hero-section,
    .hero-slide {

        height:
            590px;

        min-height:
            570px;
    }

    .hero-content {

        padding-top:
            75px;
    }

    .hero-content h1 {

        font-size:
            34px;

        line-height:
            1.18;
    }

    .hero-content p {

        font-size:
            13px;
    }


    /* QUICK */

    .quick-item {

        padding:
            16px;
    }

    .quick-icon {

        width:
            46px;

        height:
            46px;

        border-radius:
            14px;
    }


    /* SECTION */

    .section-padding {

        padding:
            60px 0;
    }

    .section-title {

        font-size:
            28px;
    }


    /* PRINCIPAL */

    .principal-photo {

        padding:
            7px;
    }

    .principal-photo img {

        height:
            300px;

        border-radius:
            19px;
    }


    /* NEWS */

    .news-image {

        height:
            205px;
    }


    /* GALLERY */

    .gallery-item {

        height:
            230px;
    }


    /* TESTIMONI */

    .testimoni-card {

        padding:
            28px 20px 22px;
    }

    .testimoni-content {

        min-height:
            0;
    }


    /* SPMB */

    .spmb-period {

        align-items:
            flex-start;
    }

    .spmb-period-content small {

        line-height:
            1.5;
    }


    /* FOOTER */

    .footer-bottom {

        font-size:
            10px;
    }
}


/* ============================================================
   51. EXTRA SMALL DEVICES
============================================================ */

@media (max-width: 380px) {

    .brand-text small {

        display:
            none;
    }

    .hero-content h1 {

        font-size:
            31px;
    }

    .hero-content p {

        font-size:
            12px;
    }

    .hero-badge {

        max-width:
            100%;

        font-size:
            8px;
    }

    .section-title {

        font-size:
            26px;
    }

    .quick-item strong {

        font-size:
            13px;
    }

    .quick-item span {

        font-size:
            11px;
    }
}


/* ============================================================
   52. ACCESSIBILITY
============================================================ */

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

    html {

        scroll-behavior:
            auto !important;
    }

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

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }
}


/* ============================================================
   53. GPU / RENDERING POLISH
============================================================ */

.news-card,
.feature-card,
.contact-card,
.testimoni-card,
.gallery-item,
.spmb-card,
.quick-info-card,
.principal-photo,
.spmb-image {

    -webkit-backface-visibility:
        hidden;

    backface-visibility:
        hidden;

    transform:
        translateZ(0);
}


/* ============================================================
   54. IMAGE FALLBACK
============================================================ */

img {

    image-rendering:
        auto;
}


/* ============================================================
   55. BACKGROUND UTILITIES
============================================================ */

.bg-light {

    background-color:
        var(--light) !important;
}


/* ============================================================
   56. SECTION POSITIONING
============================================================ */

section {

    position:
        relative;
}


/* ============================================================
   57. CONTAINER WIDTH
============================================================ */

@media (min-width: 1400px) {

    .container {

        max-width:
            var(--container);
    }
}


/* ============================================================
   58. MOBILE TEXT SAFETY
============================================================ */

@media (max-width: 767.98px) {

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

        word-break:
            normal;

        overflow-wrap:
            break-word;
    }

    p {

        overflow-wrap:
            break-word;
    }
}


/* ============================================================
   59. FINAL POLISH
============================================================ */

::placeholder {

    color:
        var(--muted-light);
}

button {

    font-family:
        inherit;
}

input,
textarea,
select {

    font-family:
        inherit;
}

/* ============================================================
   TEXT ALIGNMENT MODERN - CENTER VERSION
   e-SCHOOL EMTUPI
   ============================================================ */

/* ============================================================
   GLOBAL SECTION HEADING
============================================================ */

.section-heading-center {
    text-align: center;
}

.section-heading-center .section-label {
    display: block;
    text-align: center;
}

.section-heading-center .section-title {
    text-align: center;
}

.section-heading-center p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   SECTION LABEL & TITLE
============================================================ */

.section-label {
    text-align: center;
}

.section-title {
    text-align: center;
}

.section-title span {
    text-align: center;
}


/* ============================================================
   PRINCIPAL / PROFIL KEPALA SEKOLAH
============================================================ */

.principal-section {
    text-align: center;
}

.principal-section .section-label {
    display: block;
    text-align: center;
}

.principal-section .section-title {
    text-align: center;
}

.principal-section .lead {
    text-align: center;
    line-height: 1.8;
}

.principal-section p {
    text-align: center;
    line-height: 1.8;
}


/* Nama Kepala Sekolah */

.principal-name {
    border-left: 0;
    border-top: 3px solid var(--primary);

    padding-left: 0;
    padding-top: 15px;

    margin: 30px auto 0;

    max-width: 350px;

    text-align: center;
}

.principal-name strong,
.principal-name span {
    display: block;
    text-align: center;
}

.principal-name strong {
    font-size: 18px;
}

.principal-name span {
    margin-top: 6px;
}


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

.news-content {
    text-align: center;
}

.news-date {
    text-align: center;
}

.news-content h3 {
    text-align: center;
}

.news-content p {
    text-align: center;
}

.news-content a {
    display: inline-block;
    text-align: center;
}


/* ============================================================
   FEATURE
============================================================ */

.feature-card {
    text-align: center;
}

.feature-icon {
    margin-left: auto;
    margin-right: auto;
}

.feature-card h3 {
    text-align: center;
}

.feature-card p {
    text-align: center;
}


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

.gallery-overlay-content {
    text-align: center;
}

.gallery-overlay-content h5,
.gallery-overlay-content small {
    text-align: center;
}


/* ============================================================
   TESTIMONI SECTION
============================================================ */

.testimoni-section {
    text-align: center;
}

.testimoni-section .section-heading-center {
    text-align: center;
}

.testimoni-section .section-label {
    display: block;
    text-align: center;
}

.testimoni-section .section-title {
    text-align: center;
}

.testimoni-section .section-heading-center p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


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

.testimoni-card {
    text-align: center;
}

.testimoni-content {
    text-align: center;
}

.testimoni-content p {
    text-align: center;
}

.testimoni-author {
    text-align: center;
}

.testimoni-author h4 {
    text-align: center;
}

.testimoni-alumni-info {
    text-align: center;
}

.testimoni-job {
    text-align: center;
}


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

.testimoni-photo-wrapper {
    margin-left: auto;
    margin-right: auto;
}

.testimoni-photo-placeholder {
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   QUOTE
============================================================ */

.testimoni-quote {
    text-align: center;
}


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

.testimoni-empty {
    text-align: center;
}

.testimoni-empty h4 {
    text-align: center;
}

.testimoni-empty p {
    text-align: center;
}


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

.contact-card {
    text-align: center;
}

.contact-icon {
    margin-left: auto;
    margin-right: auto;
}

.contact-card h3 {
    text-align: center;
}

.contact-card p {
    text-align: center;
}


/* ============================================================
   QUICK INFO
============================================================ */

/*
   Bagian quick info tetap horizontal,
   tetapi teks dibuat lebih rapi.
*/

.quick-item {
    text-align: center;
}

.quick-item > div:last-child {
    flex: 1;
}

.quick-item strong,
.quick-item span {
    text-align: center;
}


/* Icon tetap di tengah */

.quick-icon {
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   SPMB
============================================================ */

/*
   SPMB tetap menggunakan layout kiri-kanan.
   Hanya heading utama dibuat lebih rapi.
*/

.spmb-card h2 {
    text-align: left;
}

.spmb-card p {
    text-align: left;
}

.spmb-label {
    text-align: left;
}


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

/*
   Hero tetap kiri karena ini memberikan
   kesan modern / premium.
*/

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


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

@media (max-width: 767px) {

    /* Semua section heading center */

    .section-heading,
    .section-heading-center {
        text-align: center;
    }

    .section-heading .section-title {
        text-align: center;
    }

    .section-heading p {
        text-align: center;
    }


    /* Profil */

    .principal-section {
        text-align: center;
    }

    .principal-section p,
    .principal-section .lead {
        text-align: center;
    }


    /* News */

    .news-content,
    .news-content h3,
    .news-content p {
        text-align: center;
    }


    /* Feature */

    .feature-card,
    .feature-card h3,
    .feature-card p {
        text-align: center;
    }


    /* SPMB mobile */

    .spmb-card h2,
    .spmb-card p,
    .spmb-label {
        text-align: center;
    }

    .spmb-buttons {
        justify-content: center;
    }


    /* Contact */

    .contact-card,
    .contact-card h3,
    .contact-card p {
        text-align: center;
    }


    /* Footer */

    .footer,
    .footer p,
    .footer h4,
    .footer-links {
        text-align: center;
    }

}


/* ============================================================
   EXTRA POLISH
============================================================ */

/* Membuat paragraf section terlihat lebih elegan */

.section-heading-center p,
.principal-section p,
.testimonial-card p,
.testimoni-content p,
.contact-card p,
.feature-card p,
.news-content p {
    text-wrap: balance;
}


/* Heading lebih seimbang */

.section-heading-center .section-title,
.principal-section .section-title {
    text-wrap: balance;
}


/* Nama kepala sekolah */

.principal-name strong {
    font-family: "Poppins", sans-serif;
}


/* Testimoni */

.testimoni-author h4 {
    font-family: "Poppins", sans-serif;
}


/* ============================================================
   CENTER ALIGN UNTUK ELEMEN BOOTSTRAP
============================================================ */

.text-start.section-center,
.section-center {
    text-align: center !important;
}

.section-center > *,
.section-center p,
.section-center h1,
.section-center h2,
.section-center h3,
.section-center h4 {
    text-align: center;
}


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

.section-heading-center .btn,
.testimoni-section .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   FINAL MOBILE CENTER
============================================================ */

@media (max-width: 575.98px) {

    .principal-name {
        max-width: 100%;
    }

    .section-title {
        font-size: 30px;
        line-height: 1.25;
    }

    .section-heading-center p {
        font-size: 14px;
        line-height: 1.8;
    }

    .testimoni-section .section-title {
        font-size: 30px;
    }

}

/* =========================================================
   FOOTER - TEXT ALIGN LEFT
========================================================= */

.footer {
    text-align: left;
}

.footer .footer-brand {
    text-align: left;
}

.footer .brand-text {
    text-align: left;
}

.footer p {
    text-align: left;
}

.footer h4 {
    text-align: left;
}

.footer .footer-links {
    text-align: left;
    padding-left: 0;
}

.footer .footer-links li {
    text-align: left;
}

.footer .social-links {
    justify-content: flex-start;
    text-align: left;
}

.footer .footer-bottom {
    text-align: left;
}

.footer .social-links {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.footer-bottom {
    text-align: center;
    justify-content: center;
}

/* =========================================================
   CONTACT WHATSAPP
========================================================= */

.contact-whatsapp {
    display: block;
    cursor: pointer;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.contact-whatsapp:hover {
    transform: translateY(-5px);
    text-decoration: none;
}

.contact-whatsapp .contact-icon {
    transition: transform .25s ease;
}

.contact-whatsapp:hover .contact-icon {
    transform: scale(1.08);
}
/* =========================================================
   CONTACT LINK
========================================================= */

.contact-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;

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

.contact-link:hover {
    color: inherit;
    text-decoration: none;

    transform: translateY(-5px);
}

.contact-link .contact-icon {
    transition:
        transform .25s ease;
}

.contact-link:hover .contact-icon {
    transform: scale(1.08);
}

/* ============================================================
   END — MODERN PREMIUM EMTUPI
============================================================ */