/* ==========================================================
   YAYASAN MUTIARA AHLUSSUNNAH GRESIK
   ROMBAK.CSS
   Version : 3.0
   Compatible : index.html terbaru
========================================================== */


/* ==========================================================
   FONT
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/* ==========================================================
   ROOT
========================================================== */

:root{

    --primary:#012d69;
    --primary-dark:#011f4b;
    --primary-light:#0a4ba6;

    --secondary:#f8b400;
    --secondary-dark:#d99800;

    --white:#ffffff;

    --light:#f8fafc;
    --gray:#64748b;
    --dark:#0f172a;

    --border:#e2e8f0;

    --success:#22c55e;
    --danger:#ef4444;


    --radius:18px;
    --radius-lg:28px;
    --radius-xl:35px;


    --shadow-sm:
    0 5px 15px rgba(15,23,42,.08);


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


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


    --transition:.35s ease;


    --container:1200px;

}



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

*{

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

}


html{

    scroll-behavior:smooth;

}



body{

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

    background:#f8fafc;

    color:var(--dark);

    line-height:1.8;

    overflow-x:hidden;

}



img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

    transition:var(--transition);

}



ul{

    list-style:none;

}



button,
input,
textarea,
select{

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

}



section{

    padding:90px 20px;

}




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


.container{

    width:100%;

    max-width:var(--container);

    margin:auto;

}



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


.section-heading{

    text-align:center;

    max-width:850px;

    margin:0 auto 60px;

}


.section-heading span{

    display:inline-block;

    color:var(--secondary-dark);

    font-weight:700;

    letter-spacing:2px;

    font-size:.85rem;

    margin-bottom:12px;

}



.section-heading h2{

    color:var(--primary);

    font-size:clamp(2rem,4vw,3rem);

    line-height:1.3;

    margin-bottom:18px;

    font-weight:700;

}



.section-heading p{

    color:var(--gray);

    font-size:1.05rem;

    line-height:1.9;

}



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


.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;


    padding:14px 28px;


    border-radius:50px;


    font-weight:600;


    border:none;


    cursor:pointer;


    transition:var(--transition);

}



.btn-primary{

    background:var(--primary);

    color:#fff;

}



.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-4px);

    box-shadow:var(--shadow);

}



.btn-secondary{

    background:var(--secondary);

    color:#fff;

}



.btn-secondary:hover{

    background:var(--secondary-dark);

    transform:translateY(-4px);

    box-shadow:var(--shadow);

}



.btn-outline{

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

    color:var(--primary);

    background:#fff;

}



.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}



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


.card{

    background:#fff;

    padding:40px;

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

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

    transition:.35s;

}



.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}



/* ==========================================================
   SCROLL ANIMATION
========================================================== */


.animate{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}



.animate.show{

    opacity:1;

    transform:none;

}



.delay-1{

    transition-delay:.2s;

}



.delay-2{

    transition-delay:.4s;

}



.delay-3{

    transition-delay:.6s;

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

.header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:25px 20px;

}



.navbar{

    max-width:1200px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

}



.logo{

    display:flex;

    justify-content:center;

    align-items:center;

}



.logo img{

    height:95px;

    width:auto;

    filter:drop-shadow(0 8px 15px rgba(0,0,0,.25));

    transition:.35s ease;

}



.logo img:hover{

    transform:scale(1.05);

}



/* ==========================================================
   TOP IMAGE CARD
========================================================== */


.top-card{

    padding-top:150px;

    background:

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

}



.top-image-card{

    position:relative;

    max-width:1200px;

    height:520px;

    margin:auto;

    overflow:hidden;

    border-radius:35px;

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

}



.top-image-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s ease;

}



.top-image-card:hover img{

    transform:scale(1.05);

}



.top-image-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        180deg,
        rgba(1,45,105,.15),
        rgba(1,45,105,.55)
    );

}



/* ==========================================================
   TOP IMAGE DECORATION
========================================================== */


.top-image-card::before{

    content:"YAYASAN MUTIARA AHLUSSUNNAH GRESIK";

    position:absolute;

    z-index:2;

    left:50%;

    bottom:45px;

    transform:translateX(-50%);


    color:#fff;

    font-size:clamp(1.5rem,3vw,2.5rem);

    font-weight:800;

    text-align:center;

    width:90%;

    letter-spacing:.5px;

    text-shadow:

    0 5px 15px rgba(0,0,0,.35);

}



/* ==========================================================
   RESPONSIVE HEADER & TOP IMAGE
========================================================== */


@media(max-width:768px){


    .header{

        padding:18px;

    }



    .logo img{

        height:75px;

    }



    .top-card{

        padding-top:120px;

    }



    .top-image-card{

        height:320px;

        border-radius:25px;

    }


}


@media(max-width:480px){


    .logo img{

        height:65px;

    }



    .top-image-card{

        height:260px;

    }


}
/* ==========================================================
   PROFIL YAYASAN
========================================================== */


.profil{

    background:#ffffff;

}



.profil .section-heading{

    max-width:900px;

}



.profil .section-heading h2{

    font-size:clamp(2.2rem,4vw,3.2rem);

}



.profil .section-heading p{

    text-align:center;

}



/* ==========================================================
   VISI
========================================================== */


.visi{

    background:

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

}



.visi .card{

    max-width:900px;

    margin:auto;

    text-align:center;

    border-top:6px solid var(--primary);

}



.visi .section-heading{

    margin-bottom:25px;

}



.visi .card p{

    color:var(--gray);

    font-size:1.05rem;

    line-height:2;

    text-align:center;

}



/* ==========================================================
   MISI
========================================================== */


.misi{

    background:#ffffff;

}



.misi .card{

    max-width:900px;

    margin:auto;

    border-top:6px solid var(--secondary);

}



.misi .section-heading{

    margin-bottom:30px;

}



.misi ul{

    margin-top:20px;

}



.misi li{

    position:relative;

    padding-left:40px;

    margin-bottom:18px;

    color:var(--gray);

    font-size:1.05rem;

    line-height:1.9;

}



.misi li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:2px;

    width:26px;

    height:26px;

    border-radius:50%;


    display:flex;

    align-items:center;

    justify-content:center;


    background:var(--secondary);

    color:#fff;


    font-size:.85rem;

    font-weight:700;

}



/* ==========================================================
   HOVER EFFECT
========================================================== */


.visi .card:hover,
.misi .card:hover{

    transform:translateY(-10px);

}



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


@media(max-width:768px){


    .visi .card,
    .misi .card{

        padding:30px 22px;

    }



    .misi li{

        padding-left:35px;

        font-size:.95rem;

    }


}
/* ==========================================================
   JENJANG PENDIDIKAN
========================================================== */


.jenjang{

    background:

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

}



.jenjang-grid{

    display:grid;

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

    gap:30px;

}



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


.jenjang-card{

    background:#fff;

    border-radius:30px;

    overflow:hidden;

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

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

    transition:.4s ease;

    position:relative;

}



.jenjang-card:hover{

    transform:translateY(-12px);

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

}



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


.jenjang-image{

    height:230px;

    position:relative;

    overflow:hidden;

}



.jenjang-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    background:#f8fafc;

    padding:35px;

    transition:.45s;

}



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

    transform:scale(1.08);

}



.jenjang-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        180deg,
        transparent,
        rgba(1,45,105,.35)
    );

}



/* ==========================================================
   BADGE
========================================================== */


.jenjang-badge{

    position:absolute;

    top:18px;

    left:18px;

    z-index:2;


    background:var(--secondary);

    color:#fff;


    padding:7px 18px;

    border-radius:50px;


    font-size:.8rem;

    font-weight:600;

}



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


.jenjang-content{

    padding:30px;

}



.jenjang-content h3{

    color:var(--primary);

    font-size:1.5rem;

    margin-bottom:15px;

}



.jenjang-content p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:25px;

    min-height:80px;

}



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


.jenjang-footer{

    display:flex;

    gap:12px;

}



.jenjang-footer .btn{

    flex:1;

    padding:12px 15px;

    font-size:.85rem;

}



/* ==========================================================
   BOTTOM EFFECT
========================================================== */


.jenjang-card::before{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;


    height:5px;


    background:var(--secondary);


    transform:scaleX(0);

    transform-origin:left;


    transition:.35s;

}



.jenjang-card:hover::before{

    transform:scaleX(1);

}



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


@media(max-width:992px){


    .jenjang-grid{

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

    }


}



@media(max-width:768px){


    .jenjang{

        padding:70px 18px;

    }



    .jenjang-grid{

        grid-template-columns:1fr;

        gap:25px;

    }



    .jenjang-image{

        height:220px;

    }



    .jenjang-content{

        padding:25px;

    }



}



@media(max-width:480px){


    .jenjang-footer{

        flex-direction:column;

    }



    .jenjang-footer .btn{

        width:100%;

    }


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

.berita-card {

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3f8fd
        );

    border:
        1px solid
        rgba(1,45,105,.08) !important;

    border-radius:
        20px !important;

    box-shadow:
        0 10px 30px
        rgba(1,45,105,.07);

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

}


.berita-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 18px 40px
        rgba(1,45,105,.13);

}


.berita-card .card-img-top {

    width:
        100%;

    height:
        230px;

    object-fit:
        cover;

}


.berita-placeholder {

    height:
        230px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #012d69,
            #0759a8,
            #d6a84f
        );

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

    font-size:
        45px;

}


.berita-category {

    display:
        inline-block;

    width:
        fit-content;

    padding:
        6px 11px;

    border-radius:
        50px;

    background:
        rgba(1,45,105,.08);

    color:
        #012d69;

    font-size:
        .75rem;

    font-weight:
        700;

    margin-bottom:
        12px;

}


.berita-card-title {

    color:
        #012d69;

    font-size:
        1.25rem;

    line-height:
        1.4;

    font-weight:
        700;

    margin-bottom:
        8px;

}


.berita-card-date {

    color:
        #94a3b8;

    font-size:
        .82rem;

    margin-bottom:
        15px;

}


.berita-card-text {

    color:
        #64748b;

    line-height:
        1.7;

    margin-bottom:
        0;

}


.berita-read-more {

    display:
        inline-flex;

    align-items:
        center;

    color:
        #012d69;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        .2s ease;

}


.berita-read-more:hover {

    color:
        #d6a84f;

}


@media (max-width: 575.98px) {

    .berita-card .card-img-top,
    .berita-placeholder {

        height:
            210px;

    }

}


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

.berita-slider {

    display: flex;

    gap: 24px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

    scroll-snap-type: x mandatory;

    padding: 5px 2px 15px;
}

.berita-slider::-webkit-scrollbar {
    display: none;
}


/* CARD */

.berita-slider .berita-card {

    flex: 0 0 calc((100% - 48px) / 3);

    scroll-snap-align: start;

    background: #fff;

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

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(1, 45, 105, .07);

    transition: .25s ease;
}

.berita-slider .berita-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 16px 35px rgba(1, 45, 105, .12);
}


/* GAMBAR */

.berita-card-image {

    width: 100%;

    height: 210px;

    object-fit: cover;

    display: block;
}


/* PLACEHOLDER */

.berita-placeholder {

    height: 210px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #012d69,
            #0759a8,
            #d6a84f
        );

    color: #fff;

    font-size: 40px;
}


/* BODY */

.berita-card-body {

    padding: 24px;

    display: flex;

    flex-direction: column;

    min-height: 280px;
}


/* KATEGORI */

.berita-category {

    display: inline-block;

    width: fit-content;

    padding: 6px 10px;

    border-radius: 8px;

    background: rgba(1, 45, 105, .07);

    color: #012d69;

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 12px;
}


/* JUDUL */

.berita-card-title {

    color: #012d69;

    font-size: 20px;

    line-height: 1.4;

    font-weight: 700;

    margin-bottom: 10px;
}


/* TANGGAL */

.berita-card-date {

    color: #64748b;

    font-size: 13px;

    margin-bottom: 15px;
}


/* RINGKASAN */

.berita-card-text {

    color: #64748b;

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 20px;
}


/* LINK */

.berita-read-more {

    display: inline-flex;

    align-items: center;

    color: #012d69;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    margin-top: auto;
}

.berita-read-more:hover {

    color: #d6a84f;
}


/* TABLET */

@media (max-width: 991.98px) {

    .berita-slider .berita-card {

        flex: 0 0 calc((100% - 24px) / 2);

    }

}


/* MOBILE */

@media (max-width: 575.98px) {

    .berita-slider {

        padding-left: 4px;

        padding-right: 4px;

    }

    .berita-slider .berita-card {

        flex: 0 0 82%;

    }

    .berita-card-image,
    .berita-placeholder {

        height: 200px;

    }

}








/* ==========================================================
   FASILITAS
========================================================== */


.fasilitas{

    background:

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

}



.fasilitas-grid{

    display:grid;

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

    gap:30px;

}



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


.fasilitas-card{

    background:#fff;

    border-radius:28px;

    overflow:hidden;

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

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

    transition:.4s ease;

}



.fasilitas-card:hover{

    transform:translateY(-10px);

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

}



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


.fasilitas-image{

    height:250px;

    position:relative;

    overflow:hidden;

}



.fasilitas-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s ease;

}



.fasilitas-card:hover img{

    transform:scale(1.08);

}



.fasilitas-overlay{

    position:absolute;

    inset:0;


    background:

    linear-gradient(
        180deg,
        rgba(1,45,105,.05),
        rgba(1,45,105,.65)
    );

}



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


.fasilitas-content{

    padding:30px;

}



.fasilitas-content h3{

    color:var(--primary);

    font-size:1.4rem;

    margin-bottom:15px;

}



.fasilitas-content p{

    color:var(--gray);

    text-align:justify;

    line-height:1.8;

}



/* ==========================================================
   DECORATION
========================================================== */


.fasilitas-card::after{

    content:"";

    display:block;

    height:5px;

    width:0;


    background:var(--secondary);

    transition:.35s;

}



.fasilitas-card:hover::after{

    width:100%;

}



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


@media(max-width:992px){


    .fasilitas-grid{

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

    }


}



@media(max-width:768px){


    .fasilitas{

        padding:70px 18px;

    }



    .fasilitas-grid{

        grid-template-columns:1fr;

        gap:25px;

    }



    .fasilitas-image{

        height:220px;

    }



    .fasilitas-content{

        padding:25px;

    }


}
/* ==========================================================
   FAQ
========================================================== */


.faq{

    background:#ffffff;

}



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


.faq-container{

    max-width:900px;

    margin:auto;

}



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


.faq-item{

    background:#fff;

    border-radius:22px;

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

    margin-bottom:18px;

    overflow:hidden;

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

    transition:.35s ease;

}



.faq-item:hover{

    box-shadow:var(--shadow);

}



/* ==========================================================
   QUESTION
========================================================== */


.faq-question{

    width:100%;

    padding:22px 28px;


    display:flex;

    align-items:center;

    justify-content:space-between;


    background:#fff;

    border:none;


    color:var(--primary);

    font-size:1rem;

    font-weight:600;


    cursor:pointer;

    text-align:left;


    transition:.35s;

}



.faq-question:hover{

    background:#f8fafc;

}



.faq-question i{

    font-style:normal;

    font-size:1.4rem;

    transition:.35s;

}



/* ==========================================================
   ACTIVE
========================================================== */


.faq-item.active .faq-question{

    background:var(--primary);

    color:#fff;

}



.faq-item.active .faq-question i{

    transform:rotate(180deg);

}



/* ==========================================================
   ANSWER
========================================================== */


.faq-answer{

    max-height:0;

    overflow:hidden;


    background:#fff;


    transition:

    max-height .45s ease;

}



.faq-answer p{

    padding:25px 28px;

    color:var(--gray);

    line-height:1.9;

}



/* INI YANG MEMBUAT JAWABAN MUNCUL */

.faq-item.active .faq-answer{

    max-height:500px;

}



/* ==========================================================
   CTA FAQ
========================================================== */


.jenjang-cta{

    text-align:center;

    margin-top:50px;

}



.jenjang-cta p{

    color:var(--gray);

    margin-bottom:20px;

}



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


@media(max-width:768px){


    .faq{

        padding:70px 18px;

    }



    .faq-question{

        padding:18px 20px;

        font-size:.95rem;

    }



    .faq-answer p{

        padding:20px;

        font-size:.95rem;

    }


}
/* ==========================================================
   FORM PENGADUAN / SARAN
========================================================== */


.saran{

    background:

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

}



.saran-box{

    max-width:800px;

    margin:auto;


    background:#fff;

    padding:45px;


    border-radius:30px;


    box-shadow:var(--shadow);

}



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


.form-group{

    margin-bottom:22px;

}



.form-group label{

    display:block;

    margin-bottom:8px;


    color:var(--primary);

    font-weight:600;

}



.form-control{

    width:100%;


    padding:15px 18px;


    border-radius:15px;


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


    outline:none;


    font-size:.95rem;


    transition:.3s;

}



.form-control:focus{

    border-color:var(--primary);


    box-shadow:

    0 0 0 4px rgba(1,45,105,.10);

}



textarea.form-control{

    min-height:160px;

    resize:vertical;

}



input[type="file"].form-control{

    padding:12px;

}



.form-group small{

    color:var(--gray);

}



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


.footer{

    background:

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


    color:#fff;


    padding:80px 20px 30px;

}



.footer-grid{

    display:grid;


    grid-template-columns:

    2fr 1fr 1fr 1fr;


    gap:40px;


    margin-bottom:50px;

}



.footer img{

    filter:

    brightness(0)

    invert(1);

}



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


.footer h3{

    font-size:1.2rem;

    margin-bottom:20px;

}



.footer p{

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

    line-height:1.9;

}



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


.footer ul{

    display:flex;

    flex-direction:column;

    gap:12px;

}



.footer ul li a{

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

}



.footer ul li a:hover{

    color:var(--secondary);

    padding-left:8px;

}



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


.footer-contact li{

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

}



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


.footer-bottom{

    border-top:

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


    padding-top:25px;


    text-align:center;


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

}



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


@media(max-width:992px){


    .footer-grid{

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

    }


}



@media(max-width:768px){


    .saran{

        padding:70px 18px;

    }



    .saran-box{

        padding:28px 22px;

    }



    .footer{

        padding:60px 18px 25px;

    }



    .footer-grid{

        grid-template-columns:1fr;

        gap:35px;

    }


}
/* =========================================================
   TESTIMONI ALUMNI SLIDER
========================================================= */

.testimoni-slider {
    display: flex;
    gap: 24px;

    width: 100%;
    overflow-x: auto;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    padding: 5px 2px 20px;

    /* JANGAN pakai justify-content: center */
    justify-content: flex-start;

    box-sizing: border-box;
}

.testimoni-slider::-webkit-scrollbar {
    display: none;
}


.testimoni-card {
    flex: 0 0 calc(33.333333% - 16px);

    min-width: 0;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    overflow: hidden;

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

    scroll-snap-align: start;
    scroll-snap-stop: always;

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


.testimoni-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .09);
}


.testimoni-photo {
    width: 100%;
    height: 220px;
    overflow: hidden;
}


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


.testimoni-content {
    padding: 24px;
}


.testimoni-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: #012d69;
    margin: 0 0 14px;
}


.testimoni-text {
    color: #64748b;
    line-height: 1.8;
    margin: 0 0 22px;
}


.testimoni-author {
    display: flex;
    align-items: center;
    gap: 12px;
}


.testimoni-author img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}


.testimoni-author strong {
    display: block;
    color: #172033;
    font-size: 15px;
}


.testimoni-author small {
    display: block;
    color: #64748b;
    margin-top: 3px;
}


.testimoni-video {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 20px;

    color: #012d69;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}


.testimoni-video:hover {
    text-decoration: underline;
}


/* PANAH */

.testimoni-arrow {
    width: 42px;
    height: 42px;

    border: 1px solid #dbe1e8;
    border-radius: 50%;

    background: #fff;
    color: #012d69;

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

    cursor: pointer;

    transition: .2s ease;

    flex-shrink: 0;
}


.testimoni-arrow:hover {
    background: #012d69;
    color: #fff;
    border-color: #012d69;
}


/* TABLET */

@media (max-width: 991.98px) {

    .testimoni-card {
        flex: 0 0 calc(50% - 12px);
    }

}


/* HP */

@media (max-width: 575.98px) {

    .testimoni-slider {
        gap: 16px;
        padding-left: 0;
        padding-right: 0;
    }

    .testimoni-card {
        /*
         * 100% dikurangi gap supaya:
         * lebar kartu + gap = lebar slider
         */
        flex: 0 0 calc(100% - 16px);
    }

    .testimoni-photo {
        height: 200px;
    }

    .testimoni-content {
        padding: 20px;
    }

}



/* =========================================================
   ALUMNI
   Biru khas Yayasan + transisi emas
========================================================= */

.alumni-slider {
    display: flex;
    gap: 24px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

    scroll-snap-type: x mandatory;

    padding: 8px 3px 18px;
}

.alumni-slider::-webkit-scrollbar {
    display: none;
}


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

.alumni-card {
    flex: 0 0 calc(33.333% - 16px);

    position: relative;

    overflow: hidden;

    scroll-snap-align: start;

    padding: 28px;

    border-radius: 22px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #012d69 0%,
            #064a88 52%,
            #b88727 135%
        );

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

    box-shadow:
        0 10px 30px rgba(1, 45, 105, .18);

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


/* Ornamen halus */

.alumni-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    right: -80px;
    top: -80px;

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

    pointer-events: none;
}


.alumni-card::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    left: -70px;
    bottom: -70px;

    background:
        rgba(214, 168, 79, .10);

    pointer-events: none;
}


.alumni-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 40px rgba(1, 45, 105, .27);
}


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

.alumni-icon {
    width: 54px;
    height: 54px;

    display: flex;

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

    margin-bottom: 20px;

    border-radius: 16px;

    background:
        rgba(214, 168, 79, .18);

    border:
        1px solid
        rgba(214, 168, 79, .38);

    color: #f0c96b;

    font-size: 21px;

    position: relative;

    z-index: 1;
}


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

.alumni-content {
    position: relative;

    z-index: 1;
}


.alumni-content h3 {
    color: #fff;

    font-size: 19px;

    line-height: 1.4;

    font-weight: 700;

    margin-bottom: 13px;
}


/* =========================================================
   META
========================================================= */

.alumni-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 20px;
}


.alumni-meta span {
    display: inline-flex;

    align-items: center;

    font-size: 12px;

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

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

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

    padding:
        6px 10px;

    border-radius:
        8px;
}


.alumni-meta i {
    color: #d6a84f;

    margin-right: 5px;
}


/* =========================================================
   DITERIMA DI
========================================================= */

.alumni-result {
    padding: 18px;

    margin-bottom: 18px;

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

    border-left:
        4px solid #d6a84f;

    border-radius:
        0 14px 14px 0;

    backdrop-filter:
        blur(6px);

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


.alumni-result small {
    display: block;

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

    font-size: 12px;

    margin-bottom: 6px;
}


.alumni-result strong {
    display: block;

    color: #fff;

    font-size: 16px;

    line-height: 1.5;
}


.alumni-result span {
    display: block;

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

    font-size: 13px;

    line-height: 1.5;

    margin-top: 5px;
}


/* =========================================================
   KOTA
========================================================= */

.alumni-city {
    color:
        rgba(255, 255, 255, .82);

    font-size: 13px;
}


.alumni-city i {
    color: #d6a84f;

    margin-right: 6px;
}


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

.alumni-arrow {
    width: 44px;
    height: 44px;

    margin:
        0 4px;

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

    border-radius: 50%;

    background: #fff;

    color: #012d69;

    cursor: pointer;

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


.alumni-arrow:hover {
    background: #012d69;

    color: #fff;

    border-color: #012d69;

    transform: translateY(-2px);
}


.alumni-arrow:active {
    transform: scale(.95);
}


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

@media (max-width: 991.98px) {

    .alumni-card {
        flex: 0 0 calc((100% - 48px) / 3);

    }

}


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

@media (max-width: 575.98px) {

    .alumni-slider {
        gap: 16px;

        padding-left: 2px;
        padding-right: 2px;
    }


    .alumni-card {
        flex: 0 0 88%;

        padding: 24px;

        border-radius: 20px;
    }


    .alumni-content h3 {
        font-size: 18px;
    }


    .alumni-result {
        padding: 16px;
    }

}

/* =========================================================
   ALUMNI
========================================================= */

.alumni-slider {
    display: flex;
    gap: 24px;

    overflow-x: auto;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;

    padding: 8px 12px 25px;
overflow-y: hidden;
    
}

.alumni-slider::-webkit-scrollbar {
    display: none;
}


/* CARD DESKTOP */

.alumni-card {
    flex: 0 0 350px;
    min-width: 350px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            rgba(1, 45, 105, .96),
            rgba(7, 89, 168, .92) 58%,
            rgba(214, 168, 79, .92)
        );

    color: #fff;

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

    border-radius: 22px;

    padding: 28px;

    scroll-snap-align: start;

    box-shadow:
        0 14px 35px
        rgba(1,45,105,.16);

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


.alumni-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 45px
        rgba(1,45,105,.22);
}


/* ICON */

.alumni-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 15px;

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

    color: #fff;

    font-size: 21px;

    margin-bottom: 20px;

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


/* CONTENT */

.alumni-content h3 {
    font-size: 20px;

    font-weight: 700;

    margin-bottom: 12px;

    color: #fff;
}


/* META */

.alumni-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 22px;
}


.alumni-meta span {
    font-size: 13px;

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

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

    padding: 6px 10px;

    border-radius: 8px;

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


.alumni-meta i {
    margin-right: 4px;
}


/* HASIL */

.alumni-result {
    padding: 18px;

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

    border-radius: 14px;

    margin-bottom: 18px;

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


.alumni-result small {
    display: block;

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

    margin-bottom: 5px;
}


.alumni-result strong {
    display: block;

    font-size: 17px;

    color: #fff;
}


.alumni-result span {
    display: block;

    margin-top: 4px;

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

    font-size: 14px;
}


/* KOTA */

.alumni-city {
    color:
        rgba(255,255,255,.78);

    font-size: 14px;
}


.alumni-city i {
    color: #f3d58b;

    margin-right: 5px;
}


/* PANAH */

.alumni-arrow {
    width: 42px;
    height: 42px;

    margin: 0 4px;

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

    border-radius: 50%;

    background: #fff;

    color: #012d69;

    cursor: pointer;

    transition: .2s ease;
}


.alumni-arrow:hover {
    background: #012d69;

    color: #fff;

    border-color: #012d69;
}


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

@media (max-width: 991.98px) {

    .alumni-card {
        flex: 0 0 320px;

        min-width: 320px;
    }

}


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

@media (max-width: 575.98px) {

    .alumni-card {
        flex: 0 0 88%;

        min-width: 88%;

        padding: 24px;
    }

}
/* =========================================================
   FIX OVERFLOW ALUMNI
========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.alumni-slider {
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    display: flex;
    gap: 24px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;

    padding: 8px 4px 25px;

    margin: 0;
}

.alumni-slider::-webkit-scrollbar {
    display: none;
}

.alumni-card {
    flex: 0 0 350px;
    width: 350px;
    min-width: 350px;

    box-sizing: border-box;

    scroll-snap-align: start;
}
.testimoni-video {
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 14px;
}

.testimoni-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}