/* ======================================================
   RESET & BASE
====================================================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    color:#333;
    line-height:1.6;
    background:#f5f7fa;
}

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

.section{
    padding:80px 0;
}

/* ======================================================
   NAVBAR
====================================================== */
.navbar{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    transition:all .35s ease;
}

.navbar.transparent{
    background:rgba(13,43,69,.15);
    backdrop-filter:blur(6px);
}

.navbar.scrolled{
    background:#0d2b45;
    box-shadow:0 4px 14px rgba(0,0,0,.15);
}

.nav-container{
    width:92%;
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:78px;
}

/* LOGO */
.logo{
    display:flex;
    align-items:center;
    gap:10px;
    color:white;
}

.logo-img{
    height:44px;
    width:auto;
}

.logo-text{
    line-height:1.1;
}

.logo-main{
    font-size:18px;
    font-weight:700;
}

.logo-sub{
    font-size:11px;
    opacity:.85;
}

/* MENU */
.menu{
    display:flex;
    align-items:center;
    gap:8px;
}

.menu a{
    color:white;
    text-decoration:none;
    font-size:14.5px;
    font-weight:500;
    padding:9px 15px;
    border-radius:8px;
    transition:.25s;
}

.menu a:hover{
    background:rgba(255,255,255,.1);
    color:#00d4ff;
}

.menu a.active{
    background:rgba(0,180,216,.18);
    color:#00d4ff;
}

/* LOGIN BUTTON */
.menu-login{
    margin-left:6px;
    border:1.5px solid #00d4ff;
    color:#00d4ff !important;
    font-weight:600;
}

.menu-login:hover{
    background:#00d4ff;
    color:#0d2b45 !important;
    box-shadow:0 0 12px rgba(0,212,255,.45);
}

.menu-toggle{
    display:none;
    font-size:26px;
    color:white;
    cursor:pointer;
}

/* ======================================================
   HERO
====================================================== */
.hero{
    position:relative;
    height:100vh;
    overflow:hidden;
}

.hero-slides{
    height:100%;
}

.hero-slide{
    position:absolute;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 1s ease;
}

.hero-slide.active{
    opacity:1;
}

.hero-overlay{
    width:100%;
    height:100%;
    background:rgba(0,0,0,.45);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
}

.hero-overlay h1{
    font-size:48px;
    margin-bottom:10px;
}

.hero-overlay p{
    font-size:20px;
}

.hero-prev,
.hero-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,.5);
    border:none;
    color:white;
    font-size:28px;
    padding:12px 16px;
    cursor:pointer;
}

.hero-prev{ left:20px; }
.hero-next{ right:20px; }

/* ======================================================
   PROFIL HOME SECTION
====================================================== */
.profil-hita{
    background:#fff;
}

.profil-wrap{
    display:flex;
    align-items:center;
    gap:60px;
}

.profil-img{
    flex:1;
}

.profil-img img{
    width:100%;
    border-radius:14px;
    box-shadow:0 10px 28px rgba(0,0,0,.08);
}

.profil-text{
    flex:1.2;
}

.profil-text h2{
    font-size:32px;
    color:#0d2b45;
    margin-bottom:18px;
}

.profil-text p{
    margin-bottom:16px;
    color:#444;
}

.profil-stats{
    display:flex;
    gap:26px;
    margin-top:20px;
}

.stat{
    background:#f5f9fc;
    padding:16px 22px;
    border-radius:10px;
    text-align:center;
    min-width:90px;
}

.stat-number{
    font-size:22px;
    font-weight:700;
    color:#0d2b45;
}

.stat-label{
    font-size:12px;
    opacity:.75;
}

.btn-profil{
    display:inline-block;
    margin-top:10px;
    padding:8px 16px;
    border-radius:8px;
    background:#0d2b45;
    color:white;
    text-decoration:none;
    font-size:14px;
    transition:.25s;
}

.btn-profil:hover{
    background:#00b4d8;
}

/* ======================================================
   PROFIL PAGE
====================================================== */
.page-title{
    font-size:34px;
    color:#0d2b45;
    margin-bottom:12px;
}

.lead{
    font-size:18px;
    color:#555;
    margin-bottom:30px;
    max-width:800px;
}

.profil-block{
    margin-bottom:28px;
}

.profil-block h2{
    font-size:22px;
    color:#0d2b45;
    margin-bottom:8px;
}

.profil-stats.center{
    justify-content:center;
    margin:30px 0 40px;
}

.profil-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:40px;
}

.profil-gallery img{
    width:100%;
    border-radius:10px;
    object-fit:cover;
    height:200px;
}

.profil-cta{
    background:#0d2b45;
    color:white;
    padding:30px;
    border-radius:14px;
    text-align:center;
}

.profil-cta h3{
    margin-bottom:8px;
}

.profil-cta p{
    margin-bottom:16px;
    opacity:.9;
}

/* ======================================================
   FOOTER
====================================================== */
.footer{
    background:#0d2b45;
    color:white;
    text-align:center;
    padding:20px 0;
}

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

    .hero-overlay h1{
        font-size:40px;
    }

    .profil-wrap{
        gap:40px;
    }
}

@media(max-width:768px){

    /* NAVBAR */
    .menu{
        position:absolute;
        top:78px;
        right:0;
        background:#0d2b45;
        flex-direction:column;
        width:230px;
        padding:20px;
        display:none;
    }

    .menu.show{
        display:flex;
    }

    .menu a{
        width:100%;
    }

    .menu-toggle{
        display:block;
    }

    .logo-img{
        height:36px;
    }

    .logo-sub{
        display:none;
    }

    /* HERO */
    .hero{
        height:80vh;
    }

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

    .hero-overlay p{
        font-size:16px;
    }

    /* PROFIL HOME */
    .profil-wrap{
        flex-direction:column;
        gap:30px;
    }

    .profil-text{
        text-align:center;
    }

    .profil-stats{
        justify-content:center;
        flex-wrap:wrap;
    }

    /* PROFIL PAGE */
    .profil-gallery{
        grid-template-columns:1fr;
    }
}

@media(max-width:480px){

    .hero{
        height:75vh;
    }

    .hero-overlay h1{
        font-size:24px;
    }

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

    .stat{
        min-width:80px;
        padding:14px 16px;
    }
}

/* ======================================================
   VISI MISI
====================================================== */
.section-title{
    font-size:32px;
    color:#0d2b45;
    margin-bottom:40px;
}

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

.visi-misi-wrap{
    display:flex;
    gap:30px;
    justify-content:center;
}

.vm-card{
    background:white;
    padding:30px 28px;
    border-radius:14px;
    box-shadow:0 8px 26px rgba(0,0,0,.06);
    flex:1;
    max-width:420px;
    text-align:center;
    transition:.25s;
}

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

.vm-icon{
    width:60px;
    height:60px;
    margin:auto;
    margin-bottom:14px;
    border-radius:50%;
    background:#eaf6fb;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
}

.vm-card h3{
    color:#0d2b45;
    margin-bottom:10px;
}

.vm-card p{
    color:#555;
}

.vm-list{
    text-align:left;
    margin-top:10px;
    padding-left:0;
}

.vm-list li{
    position:relative;
    padding-left:18px;
    margin-bottom:10px;
    color:#555;
}

.vm-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#00b4d8;
}

/* responsive */
@media(max-width:768px){
    .visi-misi-wrap{
        flex-direction:column;
        align-items:center;
    }
}

/* ======================================================
   MANFAAT PAGE
====================================================== */
.manfaat-page{
    background:linear-gradient(180deg,#f8fbfe 0%, #ffffff 100%);
}
.manfaat-page .page-title,
.manfaat-page .lead{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

/* grid */
.manfaat-full-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin-top:34px;
}

/* card */
.manfaat-full-card{
    background:white;
    padding:32px 28px;
    border-radius:16px;
    text-align:center;
    transition:.3s;
    position:relative;
    box-shadow:0 12px 32px rgba(0,0,0,.06);
}

.manfaat-full-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 46px rgba(0,0,0,.12);
}

/* icon */
.manfaat-full-card .manfaat-icon{
    width:70px;
    height:70px;
    margin:auto;
    margin-bottom:16px;
    border-radius:50%;
    background:linear-gradient(135deg,#00b4d8,#48cae4);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:white;
    box-shadow:0 10px 24px rgba(0,180,216,.35);
}

/* title */
.manfaat-full-card h3{
    color:#0d2b45;
    margin-bottom:10px;
    font-size:18.5px;
}

/* text */
.manfaat-full-card p{
    color:#555;
    font-size:14.7px;
    line-height:1.6;
}

/* CTA */
.manfaat-cta{
    margin-top:60px;
    background:linear-gradient(135deg,#0d2b45,#123a5c);
    color:white;
    padding:42px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 18px 40px rgba(13,43,69,.25);
}

.manfaat-cta h3{
    font-size:22px;
    margin-bottom:10px;
}

.manfaat-cta p{
    margin-bottom:18px;
    opacity:.9;
    font-size:15px;
}

/* button inside CTA */
.manfaat-cta .btn-profil{
    background:white;
    color:#0d2b45;
    font-weight:600;
}

.manfaat-cta .btn-profil:hover{
    background:#00b4d8;
    color:white;
}

/* responsive */
@media(max-width:992px){
    .manfaat-full-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .manfaat-full-grid{
        grid-template-columns:1fr;
    }
}

/* ======================================================
   MANFAAT HOME MODERN
====================================================== */
.manfaat-home{
    background:#f8fbfe;
}

.manfaat-home-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:26px;
    margin-top:30px;
}

.manfaat-home-card{
    background:white;
    padding:28px 26px;
    border-radius:14px;
    box-shadow:0 10px 28px rgba(0,0,0,.06);
    text-align:center;
    transition:.25s;
}

.manfaat-home-card:hover{
    transform:translateY(-8px);
    box-shadow:0 16px 36px rgba(0,0,0,.10);
}

.manfaat-home-icon{
    width:64px;
    height:64px;
    margin:auto;
    margin-bottom:14px;
    border-radius:50%;
    background:linear-gradient(135deg,#00b4d8,#48cae4);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:white;
    box-shadow:0 6px 16px rgba(0,180,216,.35);
}

.manfaat-home-card h3{
    color:#0d2b45;
    margin-bottom:8px;
}

.manfaat-home-card p{
    color:#555;
    font-size:14.5px;
}

.manfaat-home-cta{
    text-align:center;
    margin-top:34px;
}

/* responsive */
@media(max-width:768px){
    .manfaat-home-grid{
        grid-template-columns:1fr;
    }
}
/* ======================================================
   PROGRAM HOME
====================================================== */
.program-home{
    background:#ffffff;
}

.program-home-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
    margin-top:30px;
}

.program-card{
    background:#f8fbfe;
    padding:28px 26px;
    border-radius:14px;
    text-align:center;
    transition:.3s;
    box-shadow:0 10px 28px rgba(0,0,0,.05);
}

.program-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 38px rgba(0,0,0,.10);
}

/* ======================================================
   PROGRAM PAGE
====================================================== */
.program-page{
    background:linear-gradient(180deg,#f8fbfe 0%, #ffffff 100%);
}

.program-full-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin-top:36px;
}

.program-full-card{
    background:white;
    padding:32px 28px;
    border-radius:16px;
    text-align:center;
    transition:.3s;
    box-shadow:0 12px 32px rgba(0,0,0,.06);
}

.program-full-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 46px rgba(0,0,0,.12);
}

/* ICON (shared) */
.program-icon{
    width:70px;
    height:70px;
    margin:auto;
    margin-bottom:16px;
    border-radius:50%;
    background:linear-gradient(135deg,#00b4d8,#48cae4);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:white;
    box-shadow:0 10px 24px rgba(0,180,216,.35);
}

.program-card h3,
.program-full-card h3{
    color:#0d2b45;
    margin-bottom:10px;
}

.program-card p,
.program-full-card p{
    color:#555;
    font-size:14.7px;
    line-height:1.6;
}

/* CTA HOME */
.program-home-cta{
    text-align:center;
    margin-top:34px;
}

/* CTA PAGE */
.program-cta{
    margin-top:60px;
    background:linear-gradient(135deg,#0d2b45,#123a5c);
    color:white;
    padding:42px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 18px 40px rgba(13,43,69,.25);
}

.program-cta h3{
    font-size:22px;
    margin-bottom:10px;
}

.program-cta p{
    margin-bottom:18px;
    opacity:.9;
}

.program-cta .btn-profil{
    background:white;
    color:#0d2b45;
    font-weight:600;
}

.program-cta .btn-profil:hover{
    background:#00b4d8;
    color:white;
}

/* responsive */
@media(max-width:992px){
    .program-full-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .program-home-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){
    .program-full-grid{
        grid-template-columns:1fr;
    }
}

/* ======================================================
   PARTNER HOME
====================================================== */
.partner-home{
    background:#f8fbfe;
}

/* grid */
.partner-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
    margin-top:30px;
    align-items:center;
}

.partner-grid.full{
    grid-template-columns:repeat(5,1fr);
}

/* logo box */
.partner-logo{
    background:white;
    border-radius:14px;
    padding:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100px;
    box-shadow:0 8px 22px rgba(0,0,0,.05);
    transition:.25s;
}

.partner-logo img{
    max-width:100%;
    max-height:55px;
    object-fit:contain;
    filter:grayscale(100%);
    opacity:.8;
    transition:.25s;
}

.partner-logo:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 36px rgba(0,0,0,.10);
}

.partner-logo:hover img{
    filter:grayscale(0%);
    opacity:1;
}

/* CTA HOME */
.partner-home-cta{
    text-align:center;
    margin-top:34px;
}

/* ======================================================
   PARTNER PAGE
====================================================== */
.partner-page{
    background:linear-gradient(180deg,#f8fbfe 0%, #ffffff 100%);
}

.partner-cta{
    margin-top:60px;
    background:linear-gradient(135deg,#0d2b45,#123a5c);
    color:white;
    padding:42px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 18px 40px rgba(13,43,69,.25);
}

.partner-cta h3{
    font-size:22px;
    margin-bottom:10px;
}

.partner-cta p{
    margin-bottom:18px;
    opacity:.9;
}

.partner-cta .btn-profil{
    background:white;
    color:#0d2b45;
    font-weight:600;
}

.partner-cta .btn-profil:hover{
    background:#00b4d8;
    color:white;
}

/* responsive */
@media(max-width:992px){
    .partner-grid.full{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:768px){
    .partner-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:480px){
    .partner-grid,
    .partner-grid.full{
        grid-template-columns:1fr;
    }
}