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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins', sans-serif;
    background:#e7edf5;
    color:#202020;
}


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

.navbar{
    height:90px;
    background:#142d60;

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

    padding:0 8%;
}

.logo-area{
    display:flex;
    align-items:center;
    gap:12px;

    color:white;
}

.logo-area img{
    width:48px;
    height:48px;

    object-fit:contain;
}

.logo-area h2{
    font-size:20px;
    font-weight:600;
}

.logo-area span{
    font-size:12px;
    color:#d9e1f0;
}

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

.nav-menu a{
    color:white;
    text-decoration:none;
    font-size:14px;
}

.login-btn{
    background:#2463bd;
    padding:9px 24px;
    border-radius:20px;
}


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

.hero{
    height:500px;
    position:relative;
    overflow:hidden;
}

.hero-image{
    position:absolute;

    width:100%;
    height:100%;

    object-fit:cover;
}

.hero-overlay{
    position:absolute;

    width:100%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        rgba(10,35,76,.65),
        rgba(10,35,76,.15)
    );
}

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

    padding-top:90px;
    margin-left:10%;

    color:white;
}

.welcome{
    display:inline-block;

    background:#174c9b;

    padding:6px 15px;
    border-radius:20px;

    font-size:11px;
}

.hero h1{
    font-size:42px;
    line-height:1.2;

    margin-top:15px;

    font-weight:700;
}

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

.hero-button{
    display:flex;
    gap:12px;

    margin-top:20px;
}

.hero-button a{
    text-decoration:none;

    padding:12px 22px;

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

    border-radius:5px;
}

.btn-putih{
    background:white;
    color:#222;
}

.btn-biru{
    background:#1252aa;
    color:white;
}


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

.kepala-sekolah{
    background:#dce5f0;
    padding:0 10% 30px;
}

.kepala-container{
    display:flex;
    align-items:center;

    gap:50px;
}

.foto-kepala{
    width:35%;
    height:280px;

    overflow:hidden;

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

.foto-kepala img{
    width:100%;
    height:100%;

    object-fit:contain;
    object-position:bottom;

    mix-blend-mode:multiply;
}

.sambutan{
    width:65%;
}

.sambutan h2{
    font-family:'Roboto Slab', serif;

    color:#23427a;

    font-size:25px;
    font-weight:600;

    margin-bottom:15px;
}

.sambutan p{
    font-size:14px;
    line-height:1.7;

    font-weight:500;
}

.sambutan h5{
    margin-top:15px;
    font-size:10px;
}


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

.tentang-section{
    padding:20px 10% 30px;
    background:#dce5f0;
}

.tentang-container{
    display:flex;
    gap:20px;
}

.tentang-card{
    width:40%;

    background:white;
    padding:25px;
}

.small-title{
    font-family:'Roboto Slab', serif;
    font-size:11px;
}

.tentang-card h2{
    font-size:19px;
    line-height:1.25;

    margin:15px 0;
}

.tentang-card p{
    font-size:11px;
    line-height:1.7;
}

.selengkapnya{
    display:inline-block;

    margin-top:15px;

    background:#2861b5;
    color:white;

    text-decoration:none;

    padding:9px 14px;
    border-radius:4px;

    font-size:10px;
}


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

.keunggulan-card{
    width:60%;

    background:#183b7b;
    color:white;

    padding:35px;

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

    gap:25px;
}

.keunggulan-item{
    display:flex;
    gap:15px;

    padding-bottom:20px;

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

.icon-box{
    min-width:50px;
    height:50px;

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

    background:#1251ae;

    border-radius:10px;

    font-size:25px;
}

.keunggulan-item h3{
    font-size:13px;
}

.keunggulan-item p{
    font-size:9px;

    margin-top:8px;

    line-height:1.5;
}


/* ================= STATISTIK ================= */

.statistik{
    background:#dce5f0;

    padding:25px 10% 40px;

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

    gap:20px;
}

.stat-card{
    background:white;

    display:flex;
    align-items:center;

    gap:15px;

    padding:15px;

    border-radius:6px;
}

.stat-icon{
    width:60px;
    height:60px;

    background:#e4ebf5;

    border-radius:50%;

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

    font-size:28px;
}

.stat-card h2{
    font-size:20px;
}

.stat-card p{
    font-size:11px;
}


/* ================= INFORMASI ================= */

.informasi{
    background:#dce5f0;

    padding:30px 10% 50px;
}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:20px;
}

.section-header h2{
    font-size:24px;
}

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

.lihat-semua{
    background:#245cad;
    color:white;

    text-decoration:none;

    padding:10px 18px;
    border-radius:20px;

    font-size:11px;
}

.berita-container{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:20px;
}

.berita-card{
    background:white;

    border-radius:8px;
    overflow:hidden;
}

.berita-card img{
    width:100%;
    height:170px;

    object-fit:cover;
}

.kategori{
    display:inline-block;

    margin:12px 15px 5px;

    background:#2861b5;
    color:white;

    padding:4px 10px;

    border-radius:4px;

    font-size:8px;
}

.berita-card h3{
    font-size:14px;

    padding:0 15px;

    line-height:1.4;
}

.berita-card small{
    display:block;

    padding:15px;

    font-size:9px;
    color:#777;
}


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

.jurusan-section{
    background:#dce5f0;

    padding:20px 10% 50px;
}

.judul-jurusan{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:20px;

    margin-bottom:30px;
}

.judul-jurusan h2{
    font-size:20px;
}

.line{
    width:120px;
    height:1px;

    background:#9aa7b8;
}

.jurusan-container{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:20px;
}

.jurusan-card{
    background:white;

    text-align:center;

    padding:25px 15px;

    border-radius:5px;
}

.jurusan-card img{
    width:60px;
    height:60px;

    object-fit:contain;
}

.jurusan-card h3{
    margin-top:12px;

    color:#244d87;

    font-size:16px;
}

.jurusan-card p{
    margin-top:8px;

    font-size:8px;
}

.jurusan-card a{
    display:block;

    margin-top:15px;

    font-size:8px;

    color:#245cad;
    text-decoration:none;
}


/* ================= KEUNGGULAN BAWAH ================= */

.keunggulan-bawah{
    margin:0 10%;

    background:#20518d;

    color:white;

    padding:15px 30px 25px;

    text-align:center;

    border-radius:3px;
}

.keunggulan-bawah h2{
    font-size:18px;
}

.keunggulan-bawah-container{
    margin-top:20px;

    display:grid;
    grid-template-columns:repeat(5,1fr);
}

.keunggulan-bawah-container div{
    border-right:1px solid rgba(255,255,255,.3);
}

.keunggulan-bawah-container div:last-child{
    border-right:none;
}

.keunggulan-bawah-container span{
    display:inline-flex;

    width:45px;
    height:40px;

    background:white;

    color:#1c4780;

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

    font-size:20px;
}

.keunggulan-bawah-container p{
    margin-top:8px;

    font-size:8px;
}


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

.kontak{
    background:#dce5f0;

    padding:60px 10%;
}

.kontak h2{
    font-size:23px;
}

.kontak > p{
    margin-top:5px;

    font-size:14px;
}

.kontak-box{
    margin-top:25px;

    background:white;

    padding:20px;

    display:flex;

    gap:40px;
}

.kontak-info{
    width:55%;
}

.kontak-info p{
    font-size:12px;

    margin-bottom:18px;

    line-height:1.6;
}

.map{
    width:45%;
}

.map img{
    width:100%;
    height:100%;

    min-height:250px;

    object-fit:cover;
}


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

footer{
    background:#183b7b;

    color:white;

    text-align:center;

    padding:45px;

    font-size:12px;
}


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

@media(max-width:900px){

    .navbar{
        padding:0 5%;
    }

    .nav-menu{
        gap:15px;
    }

    .tentang-container{
        flex-direction:column;
    }

    .tentang-card,
    .keunggulan-card{
        width:100%;
    }

    .jurusan-container{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:600px){

    .navbar{
        height:auto;

        padding:20px;

        flex-direction:column;

        gap:20px;
    }

    .nav-menu{
        flex-wrap:wrap;
        justify-content:center;
    }

    .hero{
        height:500px;
    }

    .hero-content{
        margin-left:7%;
    }

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

    .kepala-container{
        flex-direction:column;
    }

    .foto-kepala,
    .sambutan{
        width:100%;
    }

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

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

    .keunggulan-card{
        grid-template-columns:1fr;
    }

    .jurusan-container{
        grid-template-columns:1fr 1fr;
    }

    .keunggulan-bawah-container{
        grid-template-columns:1fr;
        gap:20px;
    }

    .kontak-box{
        flex-direction:column;
    }

    .kontak-info,
    .map{
        width:100%;
    }

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins', sans-serif;
    background:#e7edf5;
    color:#202020;
}


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

.navbar{
    height:90px;
    background:#142d60;

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

    padding:0 8%;
}

.logo-area{
    display:flex;
    align-items:center;
    gap:12px;

    color:white;
}

.logo-area img{
    width:48px;
    height:48px;

    object-fit:contain;
}

.logo-area h2{
    font-size:20px;
    font-weight:600;
}

.logo-area span{
    font-size:12px;
    color:#d9e1f0;
}

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

.nav-menu a{
    color:white;
    text-decoration:none;
    font-size:14px;
}

.login-btn{
    background:#2463bd;
    padding:9px 24px;
    border-radius:20px;
}


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

.hero{
    height:500px;
    position:relative;
    overflow:hidden;
}

.hero-image{
    position:absolute;

    width:100%;
    height:100%;

    object-fit:cover;
}

.hero-overlay{
    position:absolute;

    width:100%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        rgba(10,35,76,.65),
        rgba(10,35,76,.15)
    );
}

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

    padding-top:90px;
    margin-left:10%;

    color:white;
}

.welcome{
    display:inline-block;

    background:#174c9b;

    padding:6px 15px;
    border-radius:20px;

    font-size:11px;
}

.hero h1{
    font-size:42px;
    line-height:1.2;

    margin-top:15px;

    font-weight:700;
}

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

.hero-button{
    display:flex;
    gap:12px;

    margin-top:20px;
}

.hero-button a{
    text-decoration:none;

    padding:12px 22px;

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

    border-radius:5px;
}

.btn-putih{
    background:white;
    color:#222;
}

.btn-biru{
    background:#1252aa;
    color:white;
}


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

.kepala-sekolah{
    background:#dce5f0;
    padding:0 10% 30px;
}

.kepala-container{
    display:flex;
    align-items:center;

    gap:50px;
}

.foto-kepala{
    width:35%;
    height:280px;

    overflow:hidden;

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

.foto-kepala img{
    width:100%;
    height:100%;

    object-fit:contain;
    object-position:bottom;

    mix-blend-mode:multiply;
}

.sambutan{
    width:65%;
}

.sambutan h2{
    font-family:'Roboto Slab', serif;

    color:#23427a;

    font-size:25px;
    font-weight:600;

    margin-bottom:15px;
}

.sambutan p{
    font-size:14px;
    line-height:1.7;

    font-weight:500;
}

.sambutan h5{
    margin-top:15px;
    font-size:10px;
}


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

.tentang-section{
    padding:20px 10% 30px;
    background:#dce5f0;
}

.tentang-container{
    display:flex;
    gap:20px;
}

.tentang-card{
    width:40%;

    background:white;
    padding:25px;
}

.small-title{
    font-family:'Roboto Slab', serif;
    font-size:11px;
}

.tentang-card h2{
    font-size:19px;
    line-height:1.25;

    margin:15px 0;
}

.tentang-card p{
    font-size:11px;
    line-height:1.7;
}

.selengkapnya{
    display:inline-block;

    margin-top:15px;

    background:#2861b5;
    color:white;

    text-decoration:none;

    padding:9px 14px;
    border-radius:4px;

    font-size:10px;
}


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

.keunggulan-card{
    width:60%;

    background:#183b7b;
    color:white;

    padding:35px;

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

    gap:25px;
}

.keunggulan-item{
    display:flex;
    gap:15px;

    padding-bottom:20px;

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

.icon-box{
    min-width:50px;
    height:50px;

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

    background:#1251ae;

    border-radius:10px;

    font-size:25px;
}

.keunggulan-item h3{
    font-size:13px;
}

.keunggulan-item p{
    font-size:9px;

    margin-top:8px;

    line-height:1.5;
}


/* ================= STATISTIK ================= */

.statistik{
    background:#dce5f0;

    padding:25px 10% 40px;

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

    gap:20px;
}

.stat-card{
    background:white;

    display:flex;
    align-items:center;

    gap:15px;

    padding:15px;

    border-radius:6px;
}

.stat-icon{
    width:60px;
    height:60px;

    background:#e4ebf5;

    border-radius:50%;

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

    font-size:28px;
}

.stat-card h2{
    font-size:20px;
}

.stat-card p{
    font-size:11px;
}


/* ================= INFORMASI ================= */

.informasi{
    background:#dce5f0;

    padding:30px 10% 50px;
}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:20px;
}

.section-header h2{
    font-size:24px;
}

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

.lihat-semua{
    background:#245cad;
    color:white;

    text-decoration:none;

    padding:10px 18px;
    border-radius:20px;

    font-size:11px;
}

.berita-container{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:20px;
}

.berita-card{
    background:white;

    border-radius:8px;
    overflow:hidden;
}

.berita-card img{
    width:100%;
    height:170px;

    object-fit:cover;
}

.kategori{
    display:inline-block;

    margin:12px 15px 5px;

    background:#2861b5;
    color:white;

    padding:4px 10px;

    border-radius:4px;

    font-size:8px;
}

.berita-card h3{
    font-size:14px;

    padding:0 15px;

    line-height:1.4;
}

.berita-card small{
    display:block;

    padding:15px;

    font-size:9px;
    color:#777;
}


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

.jurusan-header{
    position:relative;

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

    margin-bottom:30px;
}

.judul-jurusan{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:20px;
}

.lihat-jurusan{
    position:absolute;
    right:0;

    background:#245cad;
    color:white;

    text-decoration:none;

    padding:10px 20px;

    border-radius:20px;

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

    transition:0.3s;
}

.lihat-jurusan:hover{
    background:#183b7b;
}

.jurusan-section{
    background:#dce5f0;

    padding:20px 10% 50px;
}

.judul-jurusan{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:20px;

    margin-bottom:30px;
}

.judul-jurusan h2{
    font-size:20px;
}

.line{
    width:120px;
    height:1px;

    background:#9aa7b8;
}

.jurusan-container{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:20px;
}

.jurusan-card{
    background:white;

    text-align:center;

    padding:25px 15px;

    border-radius:5px;
}

.jurusan-card img{
    width:60px;
    height:60px;

    object-fit:contain;
}

.jurusan-card h3{
    margin-top:12px;

    color:#244d87;

    font-size:16px;
}

.jurusan-card p{
    margin-top:8px;

    font-size:8px;
}

.jurusan-card a{
    display:block;

    margin-top:15px;

    font-size:8px;

    color:#245cad;
    text-decoration:none;
}


/* ================= KEUNGGULAN BAWAH ================= */

.keunggulan-bawah{
    margin:0 10%;

    background:#20518d;

    color:white;

    padding:15px 30px 25px;

    text-align:center;

    border-radius:3px;
}

.keunggulan-bawah h2{
    font-size:18px;
}

.keunggulan-bawah-container{
    margin-top:20px;

    display:grid;
    grid-template-columns:repeat(5,1fr);
}

.keunggulan-bawah-container div{
    border-right:1px solid rgba(255,255,255,.3);
}

.keunggulan-bawah-container div:last-child{
    border-right:none;
}

.keunggulan-bawah-container span{
    display:inline-flex;

    width:45px;
    height:40px;

    background:white;

    color:#1c4780;

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

    font-size:20px;
}

.keunggulan-bawah-container p{
    margin-top:8px;

    font-size:8px;
}


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

.kontak{
    background:#dce5f0;

    padding:60px 10%;
}

.kontak h2{
    font-size:23px;
}

.kontak > p{
    margin-top:5px;

    font-size:14px;
}

.kontak-box{
    margin-top:25px;

    background:white;

    padding:20px;

    display:flex;

    gap:40px;
}

.kontak-info{
    width:55%;
}

.kontak-info p{
    font-size:12px;

    margin-bottom:18px;

    line-height:1.6;
}

.map{
    width:45%;
}

.map img{
    width:100%;
    height:100%;

    min-height:250px;

    object-fit:cover;
}


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

footer{
    background:#183b7b;

    color:white;

    text-align:center;

    padding:45px;

    font-size:12px;
}


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

@media(max-width:900px){

    .navbar{
        padding:0 5%;
    }

    .nav-menu{
        gap:15px;
    }

    .tentang-container{
        flex-direction:column;
    }

    .tentang-card,
    .keunggulan-card{
        width:100%;
    }

    .jurusan-container{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:600px){

    .navbar{
        height:auto;

        padding:20px;

        flex-direction:column;

        gap:20px;
    }

    .nav-menu{
        flex-wrap:wrap;
        justify-content:center;
    }

    .hero{
        height:500px;
    }

    .hero-content{
        margin-left:7%;
    }

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

    .kepala-container{
        flex-direction:column;
    }

    .foto-kepala,
    .sambutan{
        width:100%;
    }

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

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

    .keunggulan-card{
        grid-template-columns:1fr;
    }

    .jurusan-container{
        grid-template-columns:1fr 1fr;
    }

    .keunggulan-bawah-container{
        grid-template-columns:1fr;
        gap:20px;
    }

    .kontak-box{
        flex-direction:column;
    }

    .kontak-info,
    .map{
        width:100%;
    }

}

/* ========================================
   HALAMAN INFORMASI TERBARU & GALERI
======================================== */


/* NAVBAR */

.navbar {
    width: 100%;
    background: #173568;
    padding: 15px 0;
}

.navbar-container {
    width: 90%;
    max-width: 1200px;
    margin: auto;

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

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

.logo-sekolah img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.logo-text h3 {
    color: white;
    font-size: 17px;
    margin: 0;
}

.logo-text span {
    color: white;
    font-size: 11px;
}


/* MENU */

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

.nav-menu a {
    color: white;
    text-decoration: none;
    font-size: 13px;
    transition: 0.3s;
}

.nav-menu a:hover {
    opacity: 0.7;
}


/* LOGIN */

.btn-login {
    background: #2466bd;
    padding: 10px 24px;
    border-radius: 20px;
}


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

.informasi-hero {
    background: linear-gradient(135deg, #1d4f83, #245b91);

    padding: 70px 20px 75px;

    text-align: center;

    color: white;
}

.informasi-hero h1 {
    font-size: 28px;
    font-weight: 700;

    margin-bottom: 12px;
}

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

    margin-bottom: 28px;
}


/* SEARCH */

.search-informasi {
    width: 500px;
    max-width: 90%;

    height: 48px;

    background: white;

    border-radius: 30px;

    margin: auto;

    display: flex;
    align-items: center;

    padding: 0 20px;

    box-sizing: border-box;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.search-informasi span {
    color: #999;

    font-size: 20px;

    margin-right: 10px;
}

.search-informasi input {
    width: 100%;

    border: none;

    outline: none;

    font-size: 13px;

    color: #333;
}


/* ========================================
   SECTION INFORMASI
======================================== */

.informasi-section {
    background: #e7edf5;

    padding: 50px 10% 70px;

    min-height: 700px;
}

/* ========================================
   TOMBOL LIHAT SEMUA
======================================== */

.lihat-semua{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    background:#245cad;

    color:white;
    text-decoration:none;

    padding:10px 18px;

    border-radius:20px;

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

    transition:0.3s;
}

.lihat-semua span{
    font-size:16px;
}

.lihat-semua:hover{
    background:#183b7b;
}

/* LABEL KATEGORI */

.kategori-label {
    display: inline-block;

    background: #2866bd;

    color: white;

    padding: 6px 16px;

    border-radius: 15px;

    font-size: 10px;

    font-weight: bold;

    margin-bottom: 25px;
}

.kategori-kegiatan {
    margin-top: 50px;
}


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

.informasi-grid {
    display: grid;

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

    gap: 22px;
}


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

.info-card {
    background: white;

    border-radius: 10px;

    overflow: hidden;

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

    transition: 0.3s;
}

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


/* FOTO */

.info-card img {
    width: 100%;

    height: 210px;

    object-fit: cover;

    display: block;
}


/* CONTENT */

.info-card-content {
    padding: 15px;
}


/* BADGE */

.info-badge {
    display: inline-block;

    background: #2866bd;

    color: white;

    padding: 6px 13px;

    border-radius: 7px;

    font-size: 9px;

    font-weight: bold;

    margin-bottom: 12px;
}


/* JUDUL */

.info-card-content h3 {
    color: #1e1e1e;

    font-size: 17px;

    line-height: 1.3;

    font-weight: 700;

    margin: 0 0 20px;
}


/* TANGGAL */

.tanggal {
    font-size: 11px;

    color: #888;

    margin: 0;
}


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

.footer {
    background: #193b75;

    padding: 30px;

    text-align: center;

    color: white;
}

.footer p {
    font-size: 12px;

    margin: 0;
}


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

@media (max-width: 900px) {

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

    .nav-menu {
        gap: 15px;
    }

}

/* FOTO INFORMASI BISA DIKLIK */

.berita-image-link {
    display: block;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
}

.berita-image-link img {
    display: block;
    width: 100%;
    cursor: pointer;
}


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

@media (max-width: 600px) {

    .navbar-container {
        flex-direction: column;

        gap: 20px;
    }

    .nav-menu {
        flex-wrap: wrap;

        justify-content: center;
    }

    .informasi-grid {
        grid-template-columns: 1fr;
    }

    .informasi-section {
        padding: 40px 7%;
    }

    .informasi-hero h1 {
        font-size: 22px;
    }

    .info-card img {
        height: 220px;
    }

}

/* ================= HALAMAN DAFTAR JURUSAN ================= */

.jurusan-hero{
    background:linear-gradient(135deg, #142d60, #1d4c7d);

    padding:45px 10%;

    color:white;
}

.jurusan-hero-content{
    max-width:600px;
}

.jurusan-hero h1{
    font-size:30px;

    line-height:1.3;

    margin-bottom:15px;
}

.jurusan-hero p{
    font-size:12px;

    line-height:1.8;

    color:#e5ebf5;

    max-width:550px;
}


/* DAFTAR PROGRAM */

.daftar-jurusan{
    background:#e7edf5;

    min-height:550px;

    padding:40px 10% 60px;
}

.daftar-header{
    text-align:center;

    margin-bottom:40px;
}

.daftar-header h2{
    font-size:24px;

    margin-bottom:8px;

    color:#202020;
}

.daftar-header p{
    font-size:12px;

    color:#555;
}


/* CONTAINER KARTU */

.daftar-jurusan-container{
    display:grid;

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

    gap:35px;

    max-width:750px;

    margin:auto;
}


/* KARTU */

.program-card{
    background:white;

    border:1px solid #d5dce6;

    border-radius:8px;

    padding:20px;

    display:flex;

    align-items:flex-start;

    gap:18px;

    transition:0.3s;

    box-shadow:0 3px 10px rgba(0,0,0,0.05);
}

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

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


.program-card img{
    width:60px;

    height:60px;

    object-fit:contain;

    flex-shrink:0;
}


.program-text h3{
    color:#245cad;

    font-size:17px;

    margin-bottom:3px;
}

.program-text h4{
    font-size:10px;

    color:#555;

    line-height:1.4;

    margin-bottom:8px;
}

.program-text p{
    font-size:9px;

    line-height:1.6;

    color:#666;

    margin-bottom:12px;
}


.program-text a{
    display:inline-block;

    background:#f1f4f8;

    color:#245cad;

    text-decoration:none;

    padding:5px 14px;

    border-radius:15px;

    font-size:9px;

    font-weight:600;

    transition:0.3s;
}

.program-text a:hover{
    background:#245cad;

    color:white;
}


/* RESPONSIVE HALAMAN JURUSAN */

@media(max-width:700px){

    .daftar-jurusan-container{
        grid-template-columns:1fr;
    }

    .jurusan-hero{
        padding:40px 7%;
    }

    .jurusan-hero h1{
        font-size:25px;
    }

}

/* ================= DETAIL JURUSAN ================= */

.detail-hero{
    width:100%;
    height:450px;

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

    position:relative;
}

.pplg-hero{
    background-image:url('../images/pplg-detail.jpg');
}

.detail-overlay{
    width:100%;
    height:100%;

    background:rgba(5,20,50,0.60);

    display:flex;
    align-items:center;
}

.detail-hero-content{
    max-width:1200px;
    width:90%;

    margin:auto;

    color:white;
}

.detail-hero-content h1{
    font-size:48px;
    margin-bottom:5px;
}

.detail-hero-content h3{
    font-size:20px;
    margin-bottom:15px;
}

.detail-hero-content p{
    max-width:600px;

    font-size:15px;
    line-height:1.8;

    margin-bottom:25px;
}

.kembali-btn{
    display:inline-block;

    padding:10px 20px;

    border:1px solid white;
    border-radius:20px;

    color:white;

    text-decoration:none;

    font-size:13px;
}


/* ================= TENTANG JURUSAN ================= */

.tentang-jurusan{
    width:85%;
    max-width:1200px;

    margin:60px auto;

    display:flex;

    align-items:center;

    gap:50px;
}

.tentang-text{
    flex:1;
}

.tentang-text span{
    color:#245cad;

    font-size:13px;

    font-weight:600;
}

.tentang-text h2{
    font-size:30px;

    margin:10px 0 20px;
}

.tentang-text p{
    font-size:14px;

    line-height:1.8;

    margin-bottom:15px;

    color:#555;
}

.tentang-image{
    flex:1;
}

.tentang-image img{
    width:100%;

    height:300px;

    object-fit:cover;

    border-radius:5px;
}


/* ================= YANG DIPELAJARI ================= */

.dipelajari{
    width:85%;

    max-width:1200px;

    margin:60px auto;

    text-align:center;
}

.dipelajari h2{
    margin-bottom:30px;

    font-size:25px;
}

.materi-container{
    display:grid;

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

    gap:10px;
}

.materi-card{
    border:1px solid #ddd;

    padding:20px 10px;

    min-height:180px;

    background:white;
}

.materi-card h3{
    font-size:30px;

    margin-bottom:10px;
}

.materi-card h4{
    font-size:13px;

    margin-bottom:10px;
}

.materi-card p{
    font-size:11px;

    line-height:1.6;

    color:#555;
}


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

@media(max-width:900px){

    .tentang-jurusan{
        flex-direction:column;
    }

    .materi-container{
        grid-template-columns:repeat(3, 1fr);
    }

}

@media(max-width:600px){

    .materi-container{
        grid-template-columns:repeat(2, 1fr);
    }

    .detail-hero-content h1{
        font-size:35px;
    }

}

/* =========================================
   DETAIL JURUSAN
========================================= */

.detail-hero{
    width:100%;
    height:500px;

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

    position:relative;
}


/* HERO KHUSUS TJKT */

.tjkt-hero{
    background-image:
    url('../images/hero-tjkt.jpg');
}


.detail-overlay{
    width:100%;
    height:100%;

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

    display:flex;
    align-items:center;
}


.detail-hero-content{
    width:85%;
    max-width:1100px;

    margin:auto;

    color:white;
}


.detail-hero-content h1{
    font-size:48px;

    margin-bottom:5px;

    font-weight:700;
}


.detail-hero-content h3{
    font-size:18px;

    margin-bottom:20px;

    font-weight:500;
}


.detail-hero-content p{
    width:550px;

    font-size:14px;

    line-height:1.8;

    margin-bottom:25px;
}


.kembali-btn{
    display:inline-block;

    padding:9px 18px;

    border:1px solid white;

    border-radius:20px;

    color:white;

    text-decoration:none;

    font-size:12px;
}


/* =========================================
   TENTANG JURUSAN
========================================= */

.tentang-jurusan{
    padding:60px 10%;
}


.tentang-content{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;
}


.tentang-text{
    width:50%;
}


.tentang-text span{
    color:#245cad;

    font-size:12px;

    font-weight:600;
}


.tentang-text h2{
    font-size:30px;

    margin:8px 0 20px;

    color:#1d3765;
}


.tentang-text p{
    font-size:14px;

    line-height:1.8;

    color:#444;

    margin-bottom:15px;
}


.tentang-image{
    width:45%;
}


.tentang-image img{
    width:100%;

    height:250px;

    object-fit:cover;

    border-radius:8px;
}


/* =========================================
   YANG DIPELAJARI
========================================= */

.dipelajari-section{
    padding:20px 8% 70px;

    text-align:center;
}


.dipelajari-section h2{
    font-size:24px;

    margin-bottom:30px;

    color:#1d3765;
}


.materi-container{
    display:grid;

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

    gap:10px;
}


.materi-card{
    border:1px solid #ddd;

    padding:20px 10px;

    min-height:180px;

    background:white;
}


.materi-icon{
    font-size:30px;

    margin-bottom:12px;
}


.materi-card h3{
    font-size:12px;

    margin-bottom:10px;

    color:#1d3765;
}


.materi-card p{
    font-size:10px;

    line-height:1.6;

    color:#555;
}


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

footer{
    background:#193b78;

    color:white;

    text-align:center;

    padding:30px;

    font-size:12px;
}

/* HERO KHUSUS TO */

.to-hero{
    background-image: url('../images/hero-to.jpg');
}

/* HERO KHUSUS TPFL */

.tpfl-hero{
    background-image: url('../images/hero-tpfl.jpg');
}

.jurusan-header{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:30px;
}

.judul-jurusan{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}

.lihat-jurusan{
    position:absolute;
    right:0;

    background:#245cad;
    color:white;

    text-decoration:none;

    padding:10px 20px;

    border-radius:20px;

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

.lihat-jurusan:hover{
    background:#183b7b;
}

/* ================= HALAMAN PRODUK ================= */

.produk-section {
    background: #eaf1f9;
    padding: 35px 10% 60px;
    min-height: 100vh;
}


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

.produk-header {
    max-width: 900px;
    margin: 0 auto 38px;

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

    gap: 30px;
}

.produk-header-text {
    flex: 1;
}

.produk-header h1 {
    margin: 0 0 8px;

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

    color: #171717;
}

.produk-header p {
    margin: 0;

    max-width: 650px;

    font-size: 12px;
    line-height: 1.55;

    color: #222;
}


/* ================= TOMBOL LIHAT ================= */

.lihat-produk {
    display: inline-flex;

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

    background: #1260dc;
    color: white;

    text-decoration: none;

    padding: 6px 15px;

    border-radius: 7px;

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

    white-space: nowrap;

    transition: 0.3s;
}

.lihat-produk:hover {
    background: #0d4fb8;
}


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

.produk-container {
    max-width: 900px;

    margin: 0 auto;

    display: grid;

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

    column-gap: 65px;
    row-gap: 32px;
}


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

.produk-item {
    width: 100%;
}


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

.produk-item > h3 {
    width: 75px;

    margin: 0 auto 10px;

    padding: 5px 12px;

    background: #1260dc;

    color: white;

    text-align: center;

    border-radius: 6px;

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


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

.produk-card {
    position: relative;

    width: 100%;
    min-height: 205px;

    box-sizing: border-box;

    padding: 10px 14px 30px;

    background: linear-gradient(
        145deg,
        #123f91,
        #061b43
    );

    border-radius: 8px;

    color: white;

    overflow: hidden;

    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);
}


/* ================= GAMBAR PRODUK ================= */

.produk-image {
    width: 100%;
    height: 180px;

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

    margin-bottom: 15px;
}

.produk-image img {
    display: block;

    width: 100%;
    max-width: 230px;
    height: 170px;

    object-fit: contain;
    object-position: center;

    border-radius: 8px;
}


/* ================= JUDUL ================= */

.produk-card h2 {
    margin: 0 0 5px;

    color: #f4d35e;

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

    text-align: center;
}


/* ================= DESKRIPSI ================= */

.produk-card p {
    margin: 0 auto;

    max-width: 245px;

    color: #f4d35e;

    font-size: 7px;

    line-height: 1.45;

    text-align: center;
}


/* ================= TOMBOL LIHAT DETAIL ================= */

.detail-btn {
    display: block;
    width: fit-content;

    margin-left: auto;
    margin-top: 15px;

    padding: 8px 16px;

    background: transparent;
    color: white;

    text-decoration: none;
    font-size: 14px;
    font-weight: 500;

    border-radius: 6px;

    transition: 0.3s;
}

.detail-btn:hover {
    background: white;
    color: #183b7b;
}


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

@media (max-width: 768px) {

    .produk-section {
        padding: 35px 7% 60px;
    }

    .produk-header {
        align-items: flex-start;
    }

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

        max-width: 450px;
    }
}


@media (max-width: 500px) {

    .produk-header {
        flex-direction: column;
    }

    .produk-header h1 {
        font-size: 19px;
    }

    .produk-header p {
        font-size: 11px;
    }

    .lihat-produk {
        align-self: flex-end;
    }
}

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

.jurusan-container{
    display:grid;

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

    gap:20px;

    max-width:1200px;

    margin:0 auto;
}


/* CARD */

.jurusan-card{
    background:white;

    text-align:center;

    padding:25px 15px;

    border-radius:6px;

    min-height:240px;

    display:flex;
    flex-direction:column;

    align-items:center;

    transition:0.3s;
}


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

    box-shadow:0 10px 25px rgba(0,0,0,0.12);
}


/* LOGO JURUSAN */

.jurusan-card img{
    width:65px;
    height:65px;

    object-fit:contain;

    margin-bottom:12px;
}


/* NAMA JURUSAN */

.jurusan-card h3{
    margin-top:5px;

    color:#244d87;

    font-size:17px;

    font-weight:700;
}


/* DESKRIPSI */

.jurusan-card p{
    margin-top:8px;

    font-size:10px;

    line-height:1.6;

    color:#444;

    min-height:35px;
}


/* LINK SELENGKAPNYA */

.jurusan-card a{
    display:inline-block;

    margin-top:auto;

    padding-top:15px;

    font-size:10px;

    color:#245cad;

    font-weight:600;

    text-decoration:none;
}


.jurusan-card a:hover{
    color:#183b7b;
}


/* ==================================================
   KEUNGGULAN SMKN 4
   SATU BOX BIRU MENYATU
================================================== */

.keunggulan-bawah{
    background:#20518d;

    margin:0 10% 60px;

    color:white;

    padding:20px 30px 25px;

    text-align:center;

    border-radius:5px;
}


/* JUDUL */

.keunggulan-bawah h2{
    font-size:20px;

    font-weight:700;

    margin:0 0 20px;
}


/* CONTAINER */

.keunggulan-bawah-container{
    display:grid;

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

    margin-top:0;
}


/* ITEM */

.keunggulan-bawah-container div{
    min-height:100px;

    display:flex;
    flex-direction:column;

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

    padding:10px;

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


.keunggulan-bawah-container div:last-child{
    border-right:none;
}


/* ICON */

.keunggulan-bawah-container span{
    display:flex;

    width:45px;
    height:40px;

    background:white;

    color:#1c4780;

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

    font-size:20px;

    border-radius:3px;
}


/* TEXT */

.keunggulan-bawah-container p{
    margin-top:10px;

    font-size:10px;

    line-height:1.5;

    color:white;
}


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

@media(max-width:900px){

    .jurusan-section{
        padding:50px 5%;
    }


    .jurusan-container{
        grid-template-columns:repeat(2, 1fr);
    }


    .judul-jurusan h2{
        font-size:20px;
    }


    .line{
        width:60px;
    }


    .keunggulan-bawah{
        margin:0 5% 50px;
    }


    .keunggulan-bawah-container{
        grid-template-columns:repeat(3, 1fr);
        gap:15px;
    }


    .keunggulan-bawah-container div{
        border-right:none;
    }

}


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

@media(max-width:600px){

    .jurusan-header{
        flex-direction:column;
        gap:20px;
    }


    .judul-jurusan{
        gap:10px;
    }


    .judul-jurusan h2{
        font-size:17px;

        white-space:normal;

        text-align:center;
    }


    .line{
        display:none;
    }


    .lihat-jurusan{
        position:static;

        padding:9px 20px;
    }


    .jurusan-container{
        grid-template-columns:1fr;
    }


    .jurusan-card{
        min-height:220px;
    }


    .keunggulan-bawah{
        margin:0 5% 40px;

        padding:20px;
    }


    .keunggulan-bawah h2{
        font-size:17px;
    }


    .keunggulan-bawah-container{
        grid-template-columns:1fr;

        gap:10px;
    }


    .keunggulan-bawah-container div{
        min-height:auto;

        padding:15px;

        border-right:none;
    }

}

/* ================= TOMBOL DETAIL ================= */

.produk-card {
    position: relative;
}

.produk-card .detail-btn {
    display: block;
    width: fit-content;

    margin-left: auto;
    margin-top: 15px;

    padding: 8px 16px;

    background: #2463bd;
    color: white !important;

    text-decoration: none !important;

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

    border-radius: 6px;
}

.produk-card .detail-btn:hover {
    background: #1b4f9c;
    color: white !important;
}


/* =====================================================
   PRODUK - SESUAI DESAIN FIGMA
===================================================== */

.produk-section {
    width: 100%;
    box-sizing: border-box;

    background: #eaf2fb;

    padding: 45px 20px 60px;
}


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

.produk-header {
    width: 700px;
    max-width: 100%;

    margin: 0 auto 30px;
}

.produk-judul {
    display: flex;

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

    gap: 25px;
}

.produk-judul > div {
    flex: 1;
}

.produk-judul h2 {
    margin: 0 0 7px;

    color: #151515;

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

.produk-judul p {
    margin: 0;

    color: #151515;

    font-size: 10px;
    line-height: 1.55;
}


/* =====================================================
   TOMBOL LIHAT
===================================================== */

.produk-section .lihat-produk {
    flex-shrink: 0;

    display: inline-block;

    padding: 6px 15px;

    background: #1765dc;
    color: white !important;

    text-decoration: none !important;

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

    border-radius: 7px;
}


/* =====================================================
   GRID PRODUK
===================================================== */

.produk-section .produk-container {
    width: 700px;
    max-width: 100%;

    margin: 0 auto;

    display: grid !important;

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

    column-gap: 40px;
    row-gap: 35px;
}


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

.produk-section .produk-item {
    width: 100%;
}


/* =====================================================
   LABEL JURUSAN
===================================================== */

.produk-section .produk-item > h3 {
    width: 135px;

    margin: 0 auto 10px;

    padding: 6px 0;

    box-sizing: border-box;

    background: #1765dc;
    color: white;

    text-align: center;

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

    border-radius: 7px;
}


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

.produk-section .produk-card {
    position: relative;

    width: 100%;
    height: 224px;

    box-sizing: border-box;

    padding: 10px 14px;

    background: linear-gradient(
        180deg,
        #103d86 0%,
        #061b45 100%
    );

    border-radius: 8px;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
}


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

.produk-section .produk-image {
    width: 100%;
    height: 82px;

    display: flex;

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

    margin-bottom: 3px;
}

.produk-section .produk-image img {
    display: block;

    width: 136px !important;
    height: 67px !important;

    max-width: none !important;

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

    border-radius: 0 !important;

    margin: 0 !important;
}


/* =====================================================
   BINTANG
===================================================== */

.produk-section .produk-star {
    position: absolute;

    left: 10px;
    top: 53px;

    color: #ffd52a;

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

    z-index: 2;
}


/* =====================================================
   LEBAH
===================================================== */

.produk-section .produk-bee {
    position: absolute;

    right: 10px;
    top: 48px;

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

    z-index: 2;
}


/* =====================================================
   JUDUL LANYARD
===================================================== */

.produk-section .produk-card h4 {
    margin: 0 0 5px;

    color: #ffd800;

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

    line-height: 1.2;

    text-align: center;
}


/* =====================================================
   DESKRIPSI
===================================================== */

.produk-section .produk-card p {
    width: 88%;

    margin: 0 auto;

    color: #ffd800;

    font-size: 7px;
    line-height: 1.35;

    text-align: center;
}


/* =====================================================
   TOMBOL DETAIL
   KANAN BAWAH
===================================================== */

.produk-section .produk-card .detail-btn {
    position: absolute;

    right: 10px;
    bottom: 9px;

    display: inline-block;

    padding: 4px 10px;

    background: white;
    color: #123c82 !important;

    border-radius: 10px;

    text-decoration: none !important;

    font-size: 7px;
    font-weight: 600;

    line-height: 1.2;
}


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

@media (max-width: 768px) {

    .produk-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .produk-judul {
        display: block;
    }

    .produk-section .lihat-produk {
        margin-top: 12px;
    }

    .produk-section .produk-container {
        grid-template-columns: 1fr !important;
    }

}

/* ================= PRODUK ================= */

.produk-section {
    width: 100%;
    box-sizing: border-box;
    background: #dce5f0;
    padding: 55px 8% 60px;
}

/* HEADER */
.produk-header {
    width: 100%;
    margin: 0 0 35px;
}

.produk-judul {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
}

.produk-judul > div {
    flex: 1;
}

.produk-judul h2 {
    margin: 0 0 8px;
    color: #222;
    font-size: 24px;
    font-weight: 700;
}

.produk-judul p {
    margin: 0;
    max-width: 850px;
    color: #333;
    font-size: 12px;
    line-height: 1.5;
}

.lihat-produk {
    flex-shrink: 0;
    padding: 8px 18px;
    background: #1765dc;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 600;
    border-radius: 8px;
}


/* GRID */
.produk-container {
    width: 100%;
    max-width: 1000px;
    margin: 0;

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

    gap: 35px 45px;
}


/* ITEM */
.produk-item {
    width: 100%;
}

.produk-item > h3 {
    width: 105px;
    margin: 0 auto 10px;
    padding: 6px 0;

    background: #1765dc;
    color: #fff;

    text-align: center;
    font-size: 15px;
    font-weight: 700;

    border-radius: 7px;
}


/* CARD */
.produk-card {
    position: relative;

    width: 100%;
    height: 225px;

    box-sizing: border-box;
    padding: 10px 15px;

    background: linear-gradient(
        180deg,
        #123f88 0%,
        #061b45 100%
    );

    border-radius: 8px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* FOTO */
.produk-image {
    width: 100%;
    height: 82px;

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

    margin-bottom: 3px;
}

.produk-image img {
    display: block;

    width: 136px !important;
    height: 67px !important;

    max-width: none !important;

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

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


/* BINTANG */
.produk-star {
    position: absolute;
    left: 10px;
    top: 52px;

    color: #ffd52a;
    font-size: 29px;
    line-height: 1;
}


/* LEBAH */
.produk-bee {
    position: absolute;
    right: 10px;
    top: 47px;

    font-size: 26px;
    line-height: 1;
}


/* JUDUL */
.produk-card h4 {
    margin: 0 0 5px;

    color: #ffd800;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}


/* DESKRIPSI */
.produk-card p {
    width: 88%;
    margin: 0 auto;

    color: #ffd800;

    font-size: 8px;
    line-height: 1.35;

    text-align: center;
}


/* TOMBOL KANAN BAWAH */
.produk-card .detail-btn {
    position: absolute;

    right: 10px;
    bottom: 9px;

    padding: 4px 10px;

    background: #fff;
    color: #123c82 !important;

    text-decoration: none !important;

    font-size: 7px;
    font-weight: 600;

    border-radius: 10px;
}


/* RESPONSIVE */
@media (max-width: 768px) {

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

    .produk-judul {
        display: block;
    }

    .lihat-produk {
        display: inline-block;
        margin-top: 12px;
    }

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


/* ================= POSISI PRODUK KE KIRI ================= */

.produk-section {
    padding-left: 10%;
    padding-right: 10%;
}

.produk-header {
    width: 100%;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}

.produk-judul {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
}

/* judul dan deskripsi sejajar dengan kotak biru atas */
.produk-judul h2,
.produk-judul p {
    margin-left: 0 !important;
}

/* container kartu tetap di tengah */
.produk-container {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* FIX POSISI PRODUK DI HOME */
.produk-section {
    width: 100% !important;
    padding-left: 8% !important;
    padding-right: 8% !important;
    box-sizing: border-box !important;
}

.produk-header {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.produk-judul {
    width: 100% !important;
    margin-left: 0 !important;
}

.produk-container {
    width: 100% !important;
    max-width: 1000px !important;
    margin-left: 0 !important;
    margin-right: auto !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 35px 45px !important;
}

/* BIAR FOTO NGGAK GEDE */
.produk-section .produk-card > img {
    display: block !important;
    width: 136px !important;
    height: 67px !important;
    object-fit: cover !important;
    margin: 0 auto 5px !important;
}


/* =====================================================
   HALAMAN PRODUK - SESUAI DESAIN FIGMA
===================================================== */

.produk-page-body {
    margin: 0 !important;
    padding: 0 !important;

    background: #f5f7fc !important;

    font-family: 'Poppins', sans-serif !important;
}


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

.produk-navbar {
    width: 100% !important;
    height: 62px !important;

    background: #062c6b !important;

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

    padding: 0 28px !important;

    box-sizing: border-box !important;
}


/* LOGO */

.produk-navbar-logo {
    width: 175px !important;

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

    gap: 9px !important;

    flex-shrink: 0 !important;
}

.produk-navbar-logo img {
    width: 35px !important;
    height: 35px !important;

    object-fit: contain !important;

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

    border-radius: 0 !important;
}

.produk-navbar-logo div {
    display: flex !important;
    flex-direction: column !important;
}

.produk-navbar-logo strong {
    color: #fff !important;

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

    font-weight: 600 !important;
}

.produk-navbar-logo span {
    color: #fff !important;

    font-size: 9px !important;
    line-height: 10px !important;
}


/* MENU */

.produk-navbar-menu {
    flex: 1 !important;

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

    gap: 25px !important;
}

.produk-navbar-menu a {
    color: #fff !important;

    text-decoration: none !important;

    font-size: 8px !important;

    white-space: nowrap !important;
}

.produk-navbar-menu a:hover {
    color: #fff !important;
}

.produk-menu-active {
    font-weight: 700 !important;
}


/* LOGIN */

.produk-login {
    margin-left: 22px !important;

    padding: 6px 14px !important;

    background: #1768df !important;

    color: #fff !important;

    border-radius: 12px !important;

    text-decoration: none !important;

    font-size: 8px !important;

    white-space: nowrap !important;
}


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

.produk-main {
    width: 100% !important;

    min-height: calc(100vh - 62px) !important;

    background: #f5f7fc !important;

    padding: 20px 0 80px !important;

    box-sizing: border-box !important;
}


/* =====================================================
   HEADER BIRU
===================================================== */

.produk-hero {
    width: 610px !important;
    max-width: calc(100% - 30px) !important;

    height: 160px !important;

    margin: 0 auto !important;

    background: #0757a4 !important;

    border-radius: 4px !important;

    display: flex !important;
    flex-direction: column !important;

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

    text-align: center !important;

    box-sizing: border-box !important;
}

.produk-hero h1 {
    margin: 0 0 10px !important;

    color: #ffd800 !important;

    font-size: 23px !important;

    font-weight: 600 !important;
}

.produk-hero p {
    margin: 0 !important;

    color: #fff !important;

    font-size: 11px !important;

    line-height: 1.5 !important;
}


/* =====================================================
   SEARCH
===================================================== */

.produk-search-box {
    position: relative !important;
    z-index: 5 !important;

    width: 450px !important;
    max-width: calc(100% - 50px) !important;

    height: 50px !important;

    margin: -16px auto 45px !important;

    background: #fff !important;

    border-radius: 25px !important;

    box-shadow: 0 3px 12px rgba(0, 0, 0, .08) !important;

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

    padding: 0 17px !important;

    box-sizing: border-box !important;
}

.produk-search-box span {
    color: #aaa !important;

    font-size: 19px !important;

    margin-right: 9px !important;
}

.produk-search-box input {
    width: 100% !important;

    border: none !important;
    outline: none !important;

    background: transparent !important;

    color: #555 !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: 9px !important;
}

.produk-search-box input::placeholder {
    color: #aaa !important;
}


/* =====================================================
   LIST PRODUK
===================================================== */

.produk-items {
    width: 460px !important;
    max-width: calc(100% - 40px) !important;

    margin: 0 auto !important;
}


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

.produk-page-item {
    width: 100% !important;

    margin: 0 0 25px !important;
}


/* LABEL PPLG / TJKT / TO / TPFL */

.produk-label {
    display: inline-block !important;

    min-width: 48px !important;

    padding: 5px 9px !important;

    margin: 0 0 8px !important;

    box-sizing: border-box !important;

    background: #1768df !important;

    color: #fff !important;

    border-radius: 5px !important;

    text-align: center !important;

    font-size: 8px !important;

    font-weight: 700 !important;
}


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

.produk-detail-card {
    position: relative !important;

    width: 100% !important;

    min-height: 300px !important;

    padding: 10px 12px 35px !important;

    box-sizing: border-box !important;

    background: linear-gradient(
        180deg,
        #073d8c 0%,
        #061d4b 100%
    ) !important;

    border-radius: 6px !important;

    overflow: hidden !important;
}


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

.produk-detail-card > img {
    display: block !important;

    width: 100% !important;

    height: 165px !important;

    margin: 0 auto 9px !important;

    padding: 0 !important;

    object-fit: cover !important;

    object-position: center !important;

    border-radius: 2px !important;
}


/* =====================================================
   JUDUL
===================================================== */

.produk-detail-card h2 {
    margin: 0 0 6px !important;

    color: #ffd800 !important;

    font-size: 12px !important;

    line-height: 15px !important;

    font-weight: 700 !important;
}


/* =====================================================
   DESKRIPSI
===================================================== */

.produk-detail-card p {
    width: 100% !important;

    margin: 0 !important;

    color: #ffd800 !important;

    font-size: 7px !important;

    line-height: 1.45 !important;

    text-align: left !important;
}


/* =====================================================
   TOMBOL DETAIL
===================================================== */

.produk-detail-button {
    position: absolute !important;

    right: 10px !important;
    bottom: 8px !important;

    padding: 4px 9px !important;

    background: #fff !important;

    color: #1760b8 !important;

    border-radius: 10px !important;

    text-decoration: none !important;

    font-size: 6px !important;

    font-weight: 600 !important;
}


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

@media (max-width: 700px) {

    .produk-navbar {
        padding: 0 15px !important;
    }

    .produk-navbar-logo {
        width: 120px !important;
    }

    .produk-navbar-menu {
        gap: 10px !important;
    }

    .produk-navbar-menu a {
        font-size: 7px !important;
    }

    .produk-login {
        margin-left: 10px !important;
    }

    .produk-hero {
        height: 150px !important;
    }

    .produk-items {
        width: 460px !important;
    }
}


/* =====================================================
   HALAMAN DETAIL PRODUK - SESUAI FIGMA
===================================================== */

.produk-detail-page {
    margin: 0;
    padding: 0;
    background: #f5f5f5;
}


/* ================= HEADER PRODUK ================= */

.produk-detail-page .produk-detail-header {
    width: 100%;
    height: 210px;

    background: #07569e;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    box-sizing: border-box;

    margin: 0 !important;
}

.produk-detail-page .produk-detail-header h1 {
    color: white;

    font-size: 30px;

    margin: 0 0 12px;

    font-weight: 700;
}

.produk-detail-page .produk-detail-header p {
    color: white;

    font-size: 13px;

    line-height: 1.6;

    margin: 0;
}


/* ================= SEARCH ================= */

.produk-detail-page .produk-search-detail {
    position: relative;

    width: 590px;
    max-width: 80%;

    height: 48px;

    margin: -1px auto 55px;

    background: white;

    border-radius: 25px;

    display: flex;
    align-items: center;

    padding: 0 20px;

    box-sizing: border-box;

    z-index: 5;

    box-shadow: none;
}

.produk-detail-page .produk-search-detail span {
    color: #aaa;

    font-size: 22px;

    margin-right: 10px;
}

.produk-detail-page .produk-search-detail input {
    width: 100%;

    border: none;
    outline: none;

    background: transparent;

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

    font-size: 11px;

    color: #333;
}

.produk-detail-page .produk-search-detail input::placeholder {
    color: #aaa;
}


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

.produk-detail-page .produk-detail-content {
    width: 100% !important;

    min-height: 650px !important;

    background: #f5f5f5 !important;

    padding: 0 0 70px !important;

    box-sizing: border-box !important;
}


/* ================= LABEL + KEMBALI ================= */

.produk-detail-page .produk-detail-top {
    width: 760px !important;

    max-width: calc(100% - 80px) !important;

    margin: 0 auto 48px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;
}

.produk-detail-page .produk-jurusan-label {
    display: inline-block !important;

    background: #1269df !important;

    color: white !important;

    font-size: 18px !important;

    font-weight: 700 !important;

    line-height: 1.4 !important;

    padding: 2px 28px !important;

    border-radius: 7px !important;

    margin-bottom: 15px !important;
}

.produk-detail-page .produk-kembali {
    display: inline-block !important;

    background: #fff200 !important;

    color: #1269df !important;

    text-decoration: none !important;

    font-size: 8px !important;

    font-weight: 600 !important;

    padding: 5px 10px !important;

    border-radius: 5px !important;
}


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

.produk-detail-page .produk-detail-card {
    position: relative !important;

    width: 490px !important;

    height: 485px !important;

    min-height: 485px !important;

    max-width: calc(100% - 40px) !important;

    margin: 0 auto !important;

    padding: 45px 55px !important;

    box-sizing: border-box !important;

    background: #07358f !important;

    border-radius: 7px !important;

    display: block !important;

    text-align: center !important;

    box-shadow: none !important;
}


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

.produk-detail-page .produk-detail-image {
    width: 300px !important;

    height: 190px !important;

    margin: 0 auto 18px !important;

    padding: 7px !important;

    box-sizing: border-box !important;

    background: #0965a8 !important;

    border-radius: 9px !important;
}

.produk-detail-page .produk-detail-image img {
    width: 100% !important;

    height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    border-radius: 5px !important;
}


/* ================= JUDUL ================= */

.produk-detail-page .produk-detail-card h2 {
    margin: 8px 0 12px !important;

    color: #ffe900 !important;

    font-size: 17px !important;

    font-weight: 700 !important;

    text-align: center !important;
}


/* ================= DESKRIPSI ================= */

.produk-detail-page .produk-detail-card p {
    width: 320px !important;

    max-width: 100% !important;

    margin: 0 auto !important;

    color: white !important;

    font-size: 9px !important;

    line-height: 1.55 !important;

    text-align: center !important;
}


/* ================= BINTANG ================= */

.produk-detail-page .produk-star {
    position: absolute !important;

    left: 28px !important;

    top: 250px !important;

    color: #ffd900 !important;

    font-size: 35px !important;

    line-height: 1 !important;
}


/* ================= LEBAH ================= */

.produk-detail-page .produk-bee {
    position: absolute !important;

    right: 27px !important;

    bottom: 27px !important;

    font-size: 32px !important;

    line-height: 1 !important;
}


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

.produk-detail-page footer {
    width: 100% !important;

    background: #07358f !important;

    color: white !important;

    text-align: center !important;

    padding: 28px !important;

    font-size: 8px !important;

    box-sizing: border-box !important;
}


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

@media (max-width: 700px) {

    .produk-detail-page .produk-detail-header {
        height: 190px;
    }

    .produk-detail-page .produk-detail-header h1 {
        font-size: 25px;
    }

    .produk-detail-page .produk-detail-header p {
        font-size: 11px;
    }

    .produk-detail-page .produk-search-detail {
        max-width: 90%;
    }

    .produk-detail-page .produk-detail-top {
        width: auto !important;

        max-width: none !important;

        margin-left: 25px !important;
        margin-right: 25px !important;
    }

    .produk-detail-page .produk-detail-card {
        width: calc(100% - 40px) !important;

        height: auto !important;

        min-height: 485px !important;
    }

}

/* =====================================================
   POPUP LOGIN
===================================================== */

.login-overlay {
    display: none;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

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

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

    z-index: 9999;
}


/* ================= POPUP ================= */

.login-modal {

    width: 385px;

    background: #f5f5f5;

    border-radius: 6px;

    padding: 25px 24px 20px;

    box-sizing: border-box;

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

}


/* ================= JUDUL ================= */

.login-modal h2 {

    margin: 0 0 15px;

    text-align: center;

    color: #07569e;

    font-size: 16px;

    font-weight: 700;

}


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

.login-modal label {

    display: block;

    margin-bottom: 5px;

    color: #222;

    font-size: 10px;

    font-weight: 500;

}


/* ================= INPUT ================= */

.login-modal input {

    width: 100%;

    height: 30px;

    box-sizing: border-box;

    border: 1px solid #aaa;

    border-radius: 3px;

    background: white;

    padding: 0 8px;

    margin-bottom: 13px;

    outline: none;

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

    font-size: 9px;

}


.login-modal input:focus {

    border-color: #07569e;

}


.login-modal input::placeholder {

    color: #c0c0c0;

}


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

.login-modal button {

    width: 75%;

    height: 30px;

    display: block;

    margin: 3px auto 0;

    border: none;

    border-radius: 3px;

    background: #07569e;

    color: white;

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

    font-size: 9px;

    cursor: pointer;

}


.login-modal button:hover {

    background: #06477f;

}


/* ================= TEKS LOGIN ADMIN ================= */

.login-admin-text {

    margin: 7px 0 0;

    text-align: center;

    font-size: 7px;

    color: #222;

}


.login-admin-text span {

    color: #07569e;

    font-weight: 600;

    cursor: pointer;

}


/* ================= POPUP LOGIN ADMIN ================= */

.login-admin-modal {

    padding-top: 25px;

}


.login-admin-modal h2 {

    margin-bottom: 17px;

}


.login-admin-modal button {

    width: 75%;

    margin-top: 5px;

}


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

@media (max-width: 600px) {

    .login-modal {

        width: calc(100% - 40px);

        max-width: 385px;

    }

}

/* =====================================================
   ADMIN INFORMASI UMUM
   ===================================================== */

* {
    box-sizing: border-box;
}


/* SIDEBAR */

.admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;

    width: 150px;
    height: 100vh;

    background: #063b87;

    color: white;

    padding: 16px 10px;

    z-index: 100;
}


/* LOGO */

.admin-logo {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 8px 25px;
}

.admin-logo img {
    width: 28px;
    height: 28px;

    object-fit: contain;
}

.admin-logo h3 {
    margin: 0;

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

.admin-logo span {
    display: block;

    font-size: 7px;

    margin-top: 1px;
}


/* MENU TITLE */

.menu-title {
    font-size: 7px;

    font-weight: 600;

    margin: 0 0 8px 4px;

    color: #dce8ff;
}


/* MENU */

.admin-menu {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.admin-menu a,
.admin-logout {
    display: flex;

    align-items: center;

    gap: 9px;

    width: 100%;

    padding: 8px 7px;

    color: white;

    text-decoration: none;

    border-radius: 4px;

    font-size: 8px;

    transition: 0.2s;
}


.admin-menu a:hover,
.admin-menu a.active {
    background: #1764d1;
}


/* ICON */

.menu-icon {
    width: 16px;

    text-align: center;

    font-size: 12px;

    flex-shrink: 0;
}


/* GARIS */

.sidebar-line {
    height: 1px;

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

    margin: 18px 7px;
}


/* LOGOUT */

.admin-logout:hover {
    background: rgba(255,255,255,0.1);
}


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

.admin-main {
    margin-left: 150px;

    min-height: 100vh;

    background: #f5f7fb;
}


/* TOPBAR */

.admin-topbar {
    height: 38px;

    background: #052b68;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 20px;

    color: white;
}


.hamburger {
    font-size: 14px;

    cursor: pointer;
}


.admin-greeting {
    font-size: 9px;

    font-weight: 500;
}


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

.informasi-admin-content {
    padding: 22px 22px 40px;

    max-width: 1000px;

    margin: 0 auto;
}


/* TITLE */

.informasi-title {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 20px;
}


.informasi-title-icon {
    width: 28px;
    height: 28px;

    border: 1px solid #cbd5e1;

    background: white;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #063b87;

    font-size: 15px;
}


.informasi-title h1 {
    margin: 0;

    color: #15345f;

    font-size: 16px;

    font-weight: 600;
}


.informasi-title p {
    margin: 3px 0 0;

    color: #333;

    font-size: 8px;
}


/* =====================================================
   TOOLBAR
   ===================================================== */

.informasi-toolbar {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;
}


.informasi-search {
    width: 185px;
    height: 28px;

    background: white;

    border: 1px solid #cbd5e1;

    border-radius: 6px;

    display: flex;

    align-items: center;

    padding: 0 9px;

    gap: 6px;
}


.informasi-search span {
    font-size: 14px;

    color: #9ca3af;
}


.informasi-search input {
    width: 100%;

    border: none;

    outline: none;

    background: transparent;

    font-family: Poppins, sans-serif;

    font-size: 8px;
}


.informasi-search input::placeholder {
    color: #aab0b8;
}


/* CATEGORY */

.informasi-category {
    width: 105px;
    height: 28px;

    border: 1px solid #cbd5e1;

    background: white;

    border-radius: 6px;

    padding: 0 8px;

    font-family: Poppins, sans-serif;

    font-size: 8px;

    color: #444;

    outline: none;
}


/* TAMBAH */

.btn-tambah {
    margin-left: auto;

    height: 28px;

    border: none;

    border-radius: 5px;

    background: #1261ca;

    color: white;

    padding: 0 12px;

    font-family: Poppins, sans-serif;

    font-size: 8px;

    cursor: pointer;
}


.btn-tambah:hover {
    background: #0c50ad;
}


/* =====================================================
   TABLE
   ===================================================== */

.informasi-table-wrapper {
    width: 100%;

    overflow-x: auto;

    background: white;

    border-radius: 6px;
}


.informasi-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

    font-family: Poppins, sans-serif;
}


.informasi-table th {
    background: #c5d8f7;

    color: #222;

    font-size: 8px;

    font-weight: 600;

    padding: 8px 5px;

    border: 1px solid #aebbd0;

    text-align: center;
}


.informasi-table td {
    border: 1px solid #d1d5db;

    padding: 5px;

    height: 50px;

    font-size: 7px;

    vertical-align: middle;
}


/* UKURAN KOLOM */

.informasi-table th:nth-child(1) {
    width: 60px;
}

.informasi-table th:nth-child(2) {
    width: 180px;
}

.informasi-table th:nth-child(3) {
    width: 75px;
}

.informasi-table th:nth-child(4) {
    width: 70px;
}

.informasi-table th:nth-child(5) {
    width: 55px;
}

.informasi-table th:nth-child(6) {
    width: 85px;
}


/* FOTO */

.table-photo {
    display: block;

    width: 34px;
    height: 34px;

    object-fit: cover;

    border-radius: 3px;

    margin: auto;
}


/* JUDUL */

.article-title {
    font-size: 7px;

    line-height: 1.45;

    color: #222;
}


/* TANGGAL */

.tanggal {
    color: #888;

    font-size: 6px;

    white-space: nowrap;
}


/* =====================================================
   KATEGORI
   ===================================================== */

.kategori {
    display: inline-block;

    padding: 3px 5px;

    border-radius: 3px;

    font-size: 6px;

    font-weight: 600;
}


.kategori.prestasi {
    background: #f7b5e9;

    color: #c42da4;
}


.kategori.kegiatan {
    background: #b8d4ff;

    color: #2363c4;
}


.kategori.berita {
    background: #baf2a8;

    color: #349120;
}


/* STATUS */

.status {
    font-size: 6px;

    color: #222;
}


/* =====================================================
   AKSI
   ===================================================== */

.aksi {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;
}


.aksi button {
    border: none;

    border-radius: 3px;

    padding: 3px 6px;

    font-family: Poppins, sans-serif;

    font-size: 6px;

    cursor: pointer;
}


.edit-btn {
    background: #f3f58a;

    color: #676800;
}


.hapus-btn {
    background: #ff9da7;

    color: #a7182c;
}


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

@media (max-width: 800px) {

    .admin-sidebar {
        width: 130px;
    }

    .admin-main {
        margin-left: 130px;
    }

    .informasi-admin-content {
        padding: 18px 12px;
    }

    .informasi-toolbar {
        flex-wrap: wrap;
    }

    .btn-tambah {
        margin-left: 0;
    }

}

/* ================= FORM TAMBAH INFORMASI ================= */

.informasi-form-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    margin-top: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    max-width: 900px;
}

.informasi-form-card form {
    width: 100%;
}

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

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #183b7b;
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d5dce8;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    outline: none;
    background: #fff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #2463bd;
}

.form-group textarea {
    resize: vertical;
}

.form-group small {
    display: block;
    margin-top: 6px;
    color: #777;
    font-size: 11px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 25px;
}

.btn-batal {
    text-decoration: none;
    padding: 11px 20px;
    border-radius: 8px;
    border: 1px solid #d5dce8;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
}

.form-actions .btn-tambah {
    border: none;
    cursor: pointer;
    padding: 11px 20px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
}

@media (max-width: 700px) {

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .informasi-form-card {
        padding: 20px;
    }

}

/* =========================================
   GALERI TERBARU DI BERANDA
========================================= */

.galeri-home {
    margin-top: 40px;
}

.galeri-home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.galeri-home-header h3 {
    margin: 0 0 5px;

    color: #142d60;

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

.galeri-home-header p {
    margin: 0;

    color: #777;

    font-size: 11px;
}

.galeri-home-header a {
    color: #2463bd;

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

    text-decoration: none;
}

.galeri-home-header a:hover {
    text-decoration: underline;
}


.galeri-home-container {
    display: grid;

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

    gap: 20px;
}


.galeri-home-card {
    overflow: hidden;

    background: #ffffff;

    border-radius: 8px;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.08);
}


.galeri-home-card img {
    width: 100%;
    height: 180px;

    display: block;

    object-fit: cover;
}


.galeri-home-content {
    padding: 15px;
}


.galeri-home-content span {
    display: inline-block;

    margin-bottom: 7px;

    color: #2463bd;

    font-size: 8px;
    font-weight: 600;
}


.galeri-home-content h4 {
    margin: 0 0 8px;

    color: #142d60;

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

    line-height: 1.4;
}


.galeri-home-content small {
    color: #999;

    font-size: 8px;
}


@media (max-width: 700px) {

    .galeri-home-container {
        grid-template-columns: 1fr;
    }

}