*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI', sans-serif;
}

body{
    background:#f4f7fb;
    color:#111;
}

/* ================= TOP BAR ================= */

.top-bar{
    background:#002f7a;
    color:white;
    padding:8px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    font-size:14px;
    font-weight:700;
}

.top-bar i{
    margin-right:6px;
}

/* ================= HEADER / MENU UTAMA ================= */

.header{
    width:100%;
    background:#ffffff !important;
    color:#111111 !important;
    box-shadow:0 3px 12px rgba(0,0,0,0.08) !important;
    position:relative !important;
    z-index:9999 !important;
}

.header.header-fixed{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:99999 !important;
    animation:navbarTurun .2s ease;
}

#header-spacer{
    width:100%;
    height:0;
}

@keyframes navbarTurun{
    from{ transform:translateY(-100%); }
    to{ transform:translateY(0); }
}

.top-header{
    width:100%;
    padding:14px 4% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:28px !important;
    background:#ffffff !important;
    box-sizing:border-box !important;
}

.logo-sekolah,
.logo-area{
    display:flex !important;
    align-items:center !important;
    gap:13px !important;
    flex-shrink:0 !important;
}

.logo-sekolah a,
.logo-area a{
    display:flex !important;
    align-items:center !important;
    text-decoration:none !important;
}

.logo-sekolah img,
.logo-area img{
    width:58px !important;
    height:58px !important;
    object-fit:contain !important;
    margin-right:13px !important;
}

.logo-sekolah h1,
.logo-area h1{
    margin:0 !important;
    color:#003f9e !important;
    font-size:30px !important;
    font-weight:900 !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
}

.logo-sekolah p,
.logo-area p{
    margin-top:4px !important;
    color:#666666 !important;
    font-size:13px !important;
}

.navbar{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:18px !important;
    flex-wrap:nowrap !important;
}

.navbar a{
    color:#111111 !important;
    text-decoration:none !important;
    font-size:15px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    line-height:1.2 !important;
}

.navbar a:hover,
.navbar a.active{
    color:#003f9e !important;
}

.dropdown{
    position:relative !important;
}

.dropdown > a{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
}

.dropdown-menu{
    display:none !important;
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    min-width:280px !important;
    background:#ffffff !important;
    border-radius:10px !important;
    box-shadow:0 8px 22px rgba(0,0,0,0.18) !important;
    padding:8px 0 !important;
    margin-top:0 !important;
    z-index:99999 !important;
}

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

.dropdown-menu a{
    display:block !important;
    padding:12px 18px !important;
    color:#111111 !important;
    background:#ffffff !important;
    font-size:15px !important;
    font-weight:700 !important;
    text-align:left !important;
}

.dropdown-menu a:hover{
    background:#003f9e !important;
    color:#ffffff !important;
}

.btn-login-utama,
.login-btn{
    background:#f1b52a !important;
    color:#111111 !important;
    margin-left:8px !important;
    padding:12px 24px !important;
    border-radius:13px !important;
    font-size:15px !important;
    font-weight:900 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    transition:0.3s;
}

.btn-login-utama:hover,
.login-btn:hover{
    background:#d89d17 !important;
    color:#ffffff !important;
}

#menu-toggle{
    display:none !important;
}

.menu-icon{
    display:none !important;
    font-size:32px !important;
    color:#111111 !important;
    cursor:pointer !important;
}

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

.home-hero{
    position:relative;
    min-height:620px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-slider{
    position:absolute;
    inset:0;
    z-index:1;
}

.hero-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    animation:sliderFade 15s infinite;
}

.slide1{
    background:
    linear-gradient(rgba(0,32,90,0.55), rgba(0,32,90,0.35)),
    url('../images/background.jpg') center/cover no-repeat;
    animation-delay:0s;
}

.slide2{
    background:
    linear-gradient(rgba(0,32,90,0.55), rgba(0,32,90,0.35)),
    url('../images/background2.jpg') center/cover no-repeat;
    animation-delay:5s;
}

.slide3{
    background:
    linear-gradient(rgba(0,32,90,0.55), rgba(0,32,90,0.35)),
    url('../images/sekolah.jpg') center/cover no-repeat;
    animation-delay:10s;
}

@keyframes sliderFade{
    0%{ opacity:0; transform:scale(1); }
    8%{ opacity:1; }
    30%{ opacity:1; transform:scale(1.05); }
    38%{ opacity:0; }
    100%{ opacity:0; transform:scale(1); }
}

.home-hero-overlay{
    position:relative;
    z-index:2;
    width:100%;
    min-height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;
    padding:80px 20px;
}

.home-hero-text{
    max-width:900px;
    margin:auto;
    color:white;
}

.hero-kecil{
    display:block;
    color:#ffcc00;
    font-size:24px;
    font-weight:800;
    margin-bottom:20px;
}

.home-hero-text h1{
    font-size:78px;
    font-weight:900;
    color:white;
    margin-bottom:25px;
    line-height:1.1;
}

.home-hero-text p{
    font-size:25px;
    line-height:1.7;
    color:white;
    margin-bottom:35px;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.btn-hero{
    display:inline-block;
    padding:16px 34px;
    border-radius:10px;
    text-decoration:none;
    font-weight:bold;
    font-size:18px;
    transition:0.3s;
}

.btn-profil{
    border:2px solid white;
    color:white;
    background:transparent;
}

.btn-profil:hover{
    background:white;
    color:#254b8f;
}

.btn-ppdb{
    background:#f1b52a;
    color:white;
    border:2px solid #f1b52a;
}

.btn-ppdb:hover{
    background:#d89d17;
    border-color:#d89d17;
}

/* ================= INFO SEKOLAH ================= */

.info-sekolah,
.running-info{
    width:100%;
    margin:0;
    display:grid;
    grid-template-columns:180px 1fr 230px;
    align-items:center;
    background:#003f9e;
    color:white;
    border-radius:0;
    overflow:hidden;
    height:58px;
}

.info-label{
    height:100%;
    background:#f1b52a;
    color:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:800;
    font-size:18px;
    white-space:nowrap;
}

.info-sekolah marquee,
.running-info marquee{
    width:100%;
    padding:0 25px;
    font-size:17px;
    font-weight:700;
    line-height:58px;
}

.tanggal-info,
.info-date{
    height:100%;
    background:#f1b52a;
    color:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:17px;
    white-space:nowrap;
}

/* ================= FITUR ================= */

.fitur-section{
    width:86%;
    margin:25px auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;
}

.fitur-card{
    background:white;
    padding:25px;
    border-radius:12px;
    display:flex;
    gap:20px;
    align-items:center;
    box-shadow:0 5px 18px rgba(0,0,0,0.1);
}

.icon-fitur{
    width:85px;
    height:85px;
    min-width:85px;
    background:#003f9e;
    color:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
}

.fitur-card h3{
    font-size:22px;
    color:#111;
}

.fitur-card p{
    color:#555;
    font-size:14px;
    margin:8px 0;
}

.fitur-card a{
    color:#003f9e;
    text-decoration:none;
    font-weight:bold;
}

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

.konten-utama{
    width:86%;
    margin:30px auto;
    display:grid;
    grid-template-columns:2fr 1.1fr;
    gap:30px;
}

.judul-section{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.judul-section h2{
    color:#111;
    border-left:5px solid #003f9e;
    padding-left:10px;
}

.judul-section a{
    color:#003f9e;
    font-weight:bold;
    text-decoration:none;
}

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

.berita-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
}

.berita-card{
    background:white;
    border-radius:10px;
    overflow:hidden;
    text-decoration:none;
    color:#111;
    box-shadow:0 5px 18px rgba(0,0,0,0.1);
}

.berita-card img{
    width:100%;
    height:150px;
    object-fit:cover;
}

.berita-body{
    padding:15px;
}

.berita-body small{
    color:#555;
    font-size:13px;
}

.berita-body h3{
    color:#111;
    font-size:17px;
    margin:8px 0;
}

.berita-body p{
    color:#444;
    font-size:14px;
    line-height:1.5;
}

.berita-body span{
    display:block;
    color:#003f9e;
    font-weight:bold;
    margin-top:10px;
}

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

.footer{
    background:#002f7a;
    color:white;
    margin-top:40px;
}

.footer-content{
    width:86%;
    margin:auto;
    padding:35px 0;
    display:grid;
    grid-template-columns:1.4fr 1.2fr 1fr 1fr;
    gap:35px;
}

.footer-box img{
    width:75px;
    margin-bottom:10px;
}

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

.footer-box p,
.footer-box a{
    color:#dce8ff;
    font-size:15px;
    line-height:1.7;
    text-decoration:none;
    display:block;
}

.footer-box a:hover{
    color:#ffc107;
}

.sosmed{
    display:flex;
    gap:12px;
}

.sosmed a{
    width:40px;
    height:40px;
    background:white;
    color:#003f9e;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.footer-bottom{
    background:#001e52;
    text-align:center;
    padding:15px;
    font-size:14px;
}

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

@media(max-width:1100px){
    .top-header{
        padding:14px 5% !important;
        gap:20px !important;
    }

    .navbar{
        gap:18px !important;
    }

    .navbar a{
        font-size:14px !important;
    }

    .logo-sekolah h1,
    .logo-area h1{
        font-size:26px !important;
    }
}

@media(max-width:900px){
    .fitur-section,
    .konten-utama,
    .berita-grid,
    .footer-content{
        grid-template-columns:1fr;
    }

    .home-hero{
        min-height:480px;
    }

    .home-hero-overlay{
        min-height:480px;
    }

    .home-hero-text h1{
        font-size:42px;
    }

    .home-hero-text p{
        font-size:18px;
    }

    .info-sekolah,
    .running-info{
        grid-template-columns:1fr;
        height:auto;
    }

    .info-label,
    .tanggal-info,
    .info-date{
        height:50px;
    }

    .info-sekolah marquee,
    .running-info marquee{
        line-height:50px;
    }
}

/* =========================================================
   FINAL: BURGER MENU KHUSUS HP
   Desktop tetap normal. HP: logo kiri kecil, burger kanan.
========================================================= */

/* Hilangkan top-info dobel kalau masih ada di header */
.header .top-info{
    display:none !important;
}

/* Checkbox disembunyikan tapi tetap bisa diklik melalui label */
#menu-toggle{
    position:absolute !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
    pointer-events:none !important;
}

.menu-icon{
    display:none !important;
}

@media screen and (max-width:768px){

    .top-bar{
        padding:7px 12px !important;
        gap:10px !important;
        font-size:11px !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        text-align:center !important;
    }

    .top-header{
        padding:12px 18px !important;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:8px !important;
        text-align:left !important;
        position:relative !important;
    }

    .logo-sekolah,
    .logo-area{
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:flex-start !important;
        text-align:left !important;
        flex:0 1 auto !important;
        width:auto !important;
        min-width:0 !important;
        margin:0 !important;
        gap:8px !important;
    }

    .logo-sekolah a,
    .logo-area a{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        text-align:left !important;
        text-decoration:none !important;
    }

    .logo-sekolah img,
    .logo-area img{
        width:46px !important;
        height:46px !important;
        margin:0 8px 0 0 !important;
        object-fit:contain !important;
        flex-shrink:0 !important;
    }

    .logo-sekolah h1,
    .logo-area h1{
        font-size:16px !important;
        line-height:1.05 !important;
        margin:0 !important;
        color:#003f9e !important;
        font-weight:900 !important;
        white-space:nowrap !important;
        text-align:left !important;
    }

    .logo-sekolah p,
    .logo-area p{
        font-size:10px !important;
        line-height:1.1 !important;
        margin:2px 0 0 0 !important;
        color:#666 !important;
        text-align:left !important;
        white-space:nowrap !important;
    }

    .menu-icon{
        display:block !important;
        position:relative !important;
        margin-left:auto !important;
        font-size:30px !important;
        color:#111 !important;
        cursor:pointer !important;
        flex-shrink:0 !important;
        z-index:100000 !important;
    }

    /* Default tertutup */
    #menu-toggle:not(:checked) ~ .navbar{
        display:none !important;
    }

    /* Terbuka saat burger diklik */
    #menu-toggle:checked ~ .navbar{
        display:flex !important;
    }

    .navbar{
        display:none !important;
        position:absolute !important;
        top:100% !important;
        right:12px !important;
        width:260px !important;
        max-width:calc(100vw - 24px) !important;
        background:#ffffff !important;
        box-shadow:0 10px 25px rgba(0,0,0,0.18) !important;
        border-radius:0 0 16px 16px !important;
        padding:10px 0 !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:0 !important;
        z-index:99999 !important;
        overflow:hidden !important;
        margin-left:0 !important;
        box-sizing:border-box !important;
    }

    .navbar a,
    .dropdown > a{
        display:block !important;
        width:100% !important;
        padding:13px 20px !important;
        font-size:15px !important;
        font-weight:800 !important;
        color:#111111 !important;
        text-align:center !important;
        box-sizing:border-box !important;
        text-decoration:none !important;
        white-space:normal !important;
    }

    .navbar a:hover,
    .dropdown > a:hover,
    .navbar a.active{
        background:#f4f7fb !important;
        color:#003f9e !important;
    }

    .dropdown{
        width:100% !important;
    }

    .dropdown-menu{
        position:static !important;
        display:none !important;
        width:100% !important;
        min-width:0 !important;
        background:#f4f7fb !important;
        box-shadow:none !important;
        border-radius:0 !important;
        padding:0 !important;
        margin:0 !important;
    }

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

    .dropdown-menu a{
        padding:12px 34px !important;
        background:#f4f7fb !important;
        color:#111111 !important;
        font-size:14px !important;
    }

    .dropdown-menu a:hover{
        background:#003f9e !important;
        color:#ffffff !important;
    }

    .navbar .btn-login-utama,
    .navbar .login-btn{
        width:calc(100% - 36px) !important;
        max-width:calc(100% - 36px) !important;
        margin:12px 18px !important;
        padding:12px 0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
        box-sizing:border-box !important;
        border-radius:14px !important;
        background:#f1b52a !important;
        color:#111111 !important;
        text-align:center !important;
        white-space:nowrap !important;
    }

    .navbar .btn-login-utama:hover,
    .navbar .login-btn:hover{
        background:#d89d17 !important;
        color:#ffffff !important;
    }
}
/* ===== PETA SEKOLAH RESPONSIVE ===== */

.lokasi-section{
    width:100%;
    padding:45px 0 55px;
    background:#f4f7fb;
}

.lokasi-container{
    width:86%;
    margin:auto;
    background:#ffffff;
    padding:30px;
    border-radius:14px;
    box-shadow:0 5px 18px rgba(0,0,0,0.08);
}

.lokasi-container h2{
    color:#111;
    font-size:28px;
    margin-bottom:22px;
    border-left:5px solid #003f9e;
    padding-left:12px;
}

.map-box{
    width:75%;
    max-width:950px;
    height:380px;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 5px 18px rgba(0,0,0,0.12);
    background:white;
}

.map-box iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
}

/* ===== HP ===== */
@media screen and (max-width:768px){

    .lokasi-section{
        padding:30px 0;
    }

    .lokasi-container{
        width:92%;
        padding:20px;
    }

    .lokasi-container h2{
        font-size:24px;
        text-align:left;
    }

    .map-box{
        width:100%;
        max-width:100%;
        height:230px;
    }
}
/* ===== KEMBALIKAN UKURAN BERITA SEPERTI AWAL ===== */

.konten-utama{
    width:86% !important;
    margin:30px auto !important;
    display:grid !important;
    grid-template-columns:2fr 1.1fr !important;
    gap:30px !important;
    align-items:start !important;
}

.berita-terbaru{
    width:100% !important;
}

.berita-grid{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:18px !important;
}

.berita-card{
    background:white !important;
    border-radius:10px !important;
    overflow:hidden !important;
    text-decoration:none !important;
    color:#111 !important;
    box-shadow:0 5px 18px rgba(0,0,0,0.1) !important;
}

.berita-card img{
    width:100% !important;
    height:150px !important;
    object-fit:cover !important;
}

.berita-body{
    padding:15px !important;
}

.berita-body h3{
    font-size:17px !important;
    margin:8px 0 !important;
}

.berita-body p{
    font-size:14px !important;
    line-height:1.5 !important;
}

/* HP tetap rapi */
@media screen and (max-width:768px){

    .konten-utama{
        width:92% !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:25px !important;
    }

    .berita-grid{
        grid-template-columns:1fr !important;
    }

    .berita-card img{
        height:180px !important;
    }
}

/* ===== PRESTASI SISWA MODEL BERITA ===== */
.prestasi-section{
    width:100% !important;
    margin:35px 0 10px !important;
}

.prestasi-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:24px !important;
    width:100% !important;
}

.prestasi-card{
    background:#ffffff !important;
    border-radius:14px !important;
    overflow:hidden !important;
    box-shadow:0 5px 18px rgba(0,0,0,0.1) !important;
    text-decoration:none !important;
    color:#111 !important;
    display:block !important;
}

.prestasi-card img{
    width:100% !important;
    height:190px !important;
    object-fit:cover !important;
    display:block !important;
}

.prestasi-body{
    padding:18px !important;
}

.prestasi-body small{
    display:block !important;
    color:#555 !important;
    margin-bottom:8px !important;
    font-size:14px !important;
}

.prestasi-body h3{
    color:#111 !important;
    font-size:20px !important;
    margin:10px 0 8px !important;
    font-weight:900 !important;
}

.prestasi-body p{
    color:#444 !important;
    font-size:15px !important;
    line-height:1.5 !important;
}

.prestasi-body span{
    display:block !important;
    margin-top:14px !important;
    color:#003f9e !important;
    font-weight:900 !important;
    font-size:16px !important;
}

@media screen and (max-width:992px){
    .prestasi-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

@media screen and (max-width:768px){
    .prestasi-section{
        width:100% !important;
        margin:30px 0 !important;
    }

    .prestasi-grid{
        grid-template-columns:1fr !important;
    }

    .prestasi-card img{
        height:210px !important;
    }
}


/* ===== FINAL SPACE BAWAH PRESTASI SEBELUM FOOTER ===== */
.prestasi-section{
    margin-bottom:90px !important;
    padding-bottom:35px !important;
}

.prestasi-grid{
    margin-bottom:45px !important;
}

@media screen and (max-width:768px){
    .prestasi-section{
        margin-bottom:65px !important;
        padding-bottom:30px !important;
    }

    .prestasi-grid{
        margin-bottom:35px !important;
    }
}
/* ===== JUDUL SECTION MODEL BESAR TENGAH ===== */

.section-title-modern{
    text-align:center;
    margin:55px auto 35px;
}

.section-title-modern .label-kecil{
    display:inline-block;
    color:#003f9e;
    font-size:22px;
    font-weight:900;
    letter-spacing:8px;
    text-transform:uppercase;
    border-bottom:3px solid #003f9e;
    padding-bottom:4px;
    margin-bottom:12px;
}

.section-title-modern .label-kecil i{
    margin-right:8px;
    letter-spacing:0;
}

.section-title-modern h2{
    margin:0;
    font-size:56px;
    font-weight:900;
    color:#111;
    line-height:1.1;
}

.section-title-modern h2 span{
    color:#003f9e;
}

/* HP */
@media screen and (max-width:768px){

    .section-title-modern{
        margin:35px auto 25px;
    }

    .section-title-modern .label-kecil{
        font-size:15px;
        letter-spacing:5px;
    }

    .section-title-modern h2{
        font-size:34px;
    }
}

/* ===== MENU LULUSAN TERBAIK + LOGO LEBIH KE KIRI ===== */
.top-header{
    padding-left:4% !important;
    padding-right:4% !important;
}

.navbar{
    gap:18px !important;
}

.lulusan-page{
    background:#f4f7fb;
}

.lulusan-hero{
    background:
    linear-gradient(rgba(0,32,90,0.72), rgba(0,32,90,0.72)),
    url('../images/background.jpg') center/cover no-repeat;
    min-height:310px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:70px 20px;
    color:#fff;
}

.lulusan-hero span{
    display:inline-block;
    color:#ffcc00;
    font-size:18px;
    font-weight:900;
    letter-spacing:5px;
    text-transform:uppercase;
    margin-bottom:14px;
}

.lulusan-hero h1{
    font-size:48px;
    font-weight:900;
    margin:0 0 12px;
}

.lulusan-hero p{
    max-width:760px;
    margin:0 auto;
    font-size:18px;
    line-height:1.7;
}

.lulusan-section{
    width:86%;
    margin:55px auto 80px;
}

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

.lulusan-card{
    background:#ffffff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,0.12);
    transition:.3s;
}

.lulusan-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 32px rgba(0,0,0,0.18);
}

.lulusan-card img{
    width:100%;
    height:330px;
    object-fit:cover;
    object-position:center;
    display:block;
    background:#e9eef8;
}

.lulusan-body{
    padding:22px;
}

.lulusan-badge{
    display:inline-block;
    background:#003f9e;
    color:#ffffff;
    padding:7px 13px;
    border-radius:999px;
    font-size:13px;
    font-weight:900;
    margin-bottom:12px;
}

.lulusan-body h3{
    margin:0 0 9px;
    color:#111;
    font-size:22px;
    font-weight:900;
}

.lulusan-body p{
    color:#444;
    font-size:15px;
    line-height:1.6;
    margin:6px 0;
}

.lulusan-univ{
    color:#003f9e !important;
    font-weight:900;
}

.lulusan-note{
    margin-top:28px;
    background:#ffffff;
    border-left:6px solid #f1b52a;
    padding:18px 22px;
    border-radius:12px;
    color:#333;
    box-shadow:0 5px 18px rgba(0,0,0,0.08);
}

@media(max-width:1100px){
    .top-header{
        padding-left:3% !important;
        padding-right:3% !important;
    }

    .navbar{
        gap:12px !important;
    }

    .navbar a{
        font-size:13px !important;
    }
}

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

@media(max-width:768px){
    .top-header{
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .lulusan-hero{
        min-height:250px;
        padding:55px 18px;
    }

    .lulusan-hero h1{
        font-size:34px;
    }

    .lulusan-hero p{
        font-size:15px;
    }

    .lulusan-section{
        width:92%;
        margin:35px auto 60px;
    }

    .lulusan-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .lulusan-card img{
        height:auto;
        max-height:none;
        object-fit:contain;
        background:#09111f;
    }
}