pentaru-premium.css

/* =====================================================
   PENTARU PREMIUM CSS
   Akademi Teknologi Maritim Patimban Subang
   ===================================================== */


/* =====================================================
   1. GLOBAL
===================================================== */
/* =====================================================
   PENTARU PREMIUM CSS
   Akademi Teknologi Maritim Patimban Subang
   Landing Page PENTARU 2026
===================================================== */


/* =====================================================
   1. GLOBAL
===================================================== */


:root{

    --primary:#062d55;
    --primary-dark:#041a34;
    --secondary:#0a74be;
    --accent:#ffc857;

    --white:#ffffff;
    --light:#f5f9ff;
    --border:#e3edf6;

    --text:#162b45;
    --muted:#718096;

    --shadow-sm:
    0 10px 30px rgba(5,45,85,.08);

    --shadow-lg:
    0 25px 70px rgba(5,45,85,.16);

    --radius-sm:14px;
    --radius-md:22px;
    --radius-lg:32px;

}


/* RESET */

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

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body.public{

    margin:0;

    padding:0;

    font-family:
    "Inter",
    "Plus Jakarta Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;

    font-size:15px;

    line-height:1.6;

    color:var(--text);

    background:#fff;

    overflow-x:hidden;

}


body.public a{

    text-decoration:none;

    color:inherit;

}


body.public img{

    max-width:100%;

    height:auto;

    display:block;

}



.container{

    width:min(1200px, calc(100% - 40px));

    margin-left:auto;

    margin-right:auto;

}



/* HEADING GLOBAL */

body.public h1,
body.public h2,
body.public h3,
body.public h4{

    margin-top:0;

    font-family:
    "Plus Jakarta Sans",
    "Inter",
    sans-serif;

    font-weight:900;

    letter-spacing:-.03em;

    color:var(--primary-dark);

}



/* BUTTON GLOBAL */


.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 30px;

    border-radius:50px;

    font-weight:800;

    cursor:pointer;

    transition:.35s ease;

    border:none;

}


.btn:hover{

    transform:translateY(-3px);

}



/* PRIMARY BUTTON */

.btn-primary-premium{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:15px 30px;

    border-radius:50px;

    background:
    linear-gradient(
        135deg,
        var(--accent),
        #ffb300
    );

    color:#082346;

    font-weight:900;

    box-shadow:
    0 15px 35px rgba(255,200,87,.35);

    transition:.35s ease;

}


/* SECTION GLOBAL */


.premium-section{

    padding:90px 0;

}



/* PREMIUM HEADING */


.premium-heading{

    text-align:center;

    margin-bottom:45px;

}


.premium-heading span{

    display:inline-block;

    margin-bottom:12px;

    color:var(--secondary);

    font-size:12px;

    font-weight:900;

    letter-spacing:2px;

    text-transform:uppercase;

}


.premium-heading h2{

    font-size:38px;

    line-height:1.15;

}


.premium-heading p{

    max-width:650px;

    margin:15px auto 0;

    color:var(--muted);

    font-size:16px;

}



/* CARD GLOBAL */


.premium-card{

    background:#fff;

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

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

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

}



/* GLASS EFFECT */

.glass{

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

    backdrop-filter:blur(15px);

}



/* MOBILE GLOBAL */

@media(max-width:768px){

    .container{

        width:calc(100% - 30px);

    }


    .premium-section{

        padding:45px 0;

    }


    .premium-heading h2{

        font-size:26px;

    }


}
/* =====================================================
   2. HEADER
===================================================== */
/* =====================================================
   2. HEADER
===================================================== */


/* HEADER WRAPPER */

.topbar{

    position:fixed;

    top:15px;

    left:0;

    width:100%;

    z-index:999;

    transition:.35s ease;

}



/* HEADER CONTAINER */


.nav-wrap{

    width:min(1200px, calc(100% - 40px));

    min-height:72px;

    margin:auto;

    padding:12px 22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;


    background:

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


    backdrop-filter:

    blur(18px);


    border:

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


    border-radius:22px;


    box-shadow:

    0 15px 45px rgba(0,35,80,.12);

}



/* BRAND */


.brand{

    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

}


.brand img{

    width:52px;

    height:52px;

    object-fit:contain;

}



.brand-copy{

    display:flex;

    flex-direction:column;

    line-height:1.1;

}


.brand-copy b{

    font-size:22px;

    font-weight:900;

    letter-spacing:-.5px;

    color:var(--primary-dark);

}



.brand-copy span{

    font-size:11px;

    color:var(--muted);

    font-weight:700;

    letter-spacing:.5px;

}



/* NAV MENU */


.main-nav{

    display:flex;

    align-items:center;

    gap:28px;

}



.main-nav a{

    position:relative;

    font-size:14px;

    font-weight:700;

    color:var(--text);

    transition:.3s;

}



.main-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    border-radius:20px;

    background:var(--accent);

    transition:.3s;

}



.main-nav a:hover{

    color:var(--secondary);

}



.main-nav a:hover::after{

    width:100%;

}



/* HEADER RIGHT AREA */


.header-actions{

    display:flex;

    align-items:center;

    gap:12px;

}



/* CLOCK / INFO */


.header-clock{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 15px;

    border-radius:50px;

    background:#f4f8fd;

    color:var(--primary);

}



.header-clock span{

    font-size:11px;

    font-weight:700;

    color:var(--muted);

}



.header-clock b{

    font-size:13px;

    font-weight:900;

}



/* ADMIN BUTTON */


.admin-header-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:50px;

    background:

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


    color:#fff!important;

    font-size:13px;

    font-weight:900;

    box-shadow:

    0 12px 30px rgba(10,116,190,.25);

    transition:.35s;

}



.admin-header-btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 18px 40px rgba(10,116,190,.35);

}



/* PARTNER LOGOS */


.header-partner-logos{

    display:flex;

    align-items:center;

    gap:8px;

}



.header-partner-logos img{

    width:35px;

    height:35px;

    object-fit:contain;

}



/* HEADER SCROLL STATE */


.topbar.scrolled .nav-wrap{

    background:#fff;

    box-shadow:

    0 20px 50px rgba(0,35,80,.18);

}



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


@media(max-width:900px){


    .main-nav{

        display:none;

    }


    .nav-wrap{

        min-height:60px;

        padding:10px 15px;

    }


    .brand img{

        width:42px;

        height:42px;

    }


    .brand-copy b{

        font-size:17px;

    }


    .brand-copy span{

        display:none;

    }


    .header-clock{

        display:none;

    }


    .admin-header-btn{

        padding:10px 16px;

        font-size:11px;

    }


}



@media(max-width:390px){


    .brand-copy b{

        font-size:15px;

    }


    .admin-header-btn{

        padding:9px 12px;

    }


}

/* Final hero summary cleanup: keep CTA, metrics, and logo strip separated. */
body.public .poster-hero{
    padding-top:96px!important;
    padding-bottom:96px!important;
}

body.public .poster-hero-shell{
    width:min(1320px,calc(100% - 54px))!important;
}

body.public .poster-hero-image{
    display:block!important;
    width:100%!important;
    min-height:520px!important;
    max-height:640px!important;
    object-fit:cover!important;
    border-radius:32px!important;
}

body.public .poster-hero-actions{
    z-index:12!important;
    bottom:-58px!important;
    width:min(990px,calc(100% - 92px))!important;
    min-height:92px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:22px!important;
    padding:20px 28px!important;
    border:1px solid rgba(5,42,87,.10)!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 22px 58px rgba(5,36,76,.15)!important;
    backdrop-filter:blur(14px)!important;
}

body.public .poster-hero-actions > div{
    min-width:0!important;
}

body.public .poster-hero-actions span{
    margin:0 0 6px!important;
    color:#687d91!important;
    font-size:13px!important;
    line-height:1.2!important;
    font-weight:800!important;
}

body.public .poster-hero-actions b{
    display:block!important;
    max-width:520px!important;
    color:#041f3c!important;
    font-size:24px!important;
    line-height:1.18!important;
    font-weight:950!important;
    letter-spacing:-.45px!important;
    white-space:normal!important;
}

body.public .poster-hero-actions nav{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    min-width:max-content!important;
}

body.public .poster-hero-actions .btn{
    min-width:160px!important;
    height:52px!important;
    padding:0 24px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    font-size:15px!important;
    font-weight:900!important;
}

body.public .premium-metrics{
    position:relative!important;
    z-index:3!important;
    margin-top:0!important;
    padding:0 0 66px!important;
}

body.public .premium-metrics > .container:first-child{
    width:min(1180px,calc(100% - 54px))!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:0!important;
    border-radius:28px!important;
    overflow:hidden!important;
    background:#fff!important;
    box-shadow:0 24px 70px rgba(5,36,76,.10)!important;
    border:1px solid rgba(5,42,87,.08)!important;
}

body.public .premium-metrics article{
    min-height:150px!important;
    padding:24px 20px!important;
}

body.public .premium-metrics i{
    width:58px!important;
    height:58px!important;
    margin-bottom:14px!important;
}

body.public .premium-metrics strong{
    font-size:30px!important;
    line-height:1.08!important;
    white-space:normal!important;
}

body.public .premium-metrics span{
    font-size:14px!important;
    line-height:1.35!important;
}

body.public .metrics-logo-strip{
    margin-top:20px!important;
}

@media(max-width:980px){
    body.public .poster-hero{
        padding-top:84px!important;
        padding-bottom:36px!important;
    }

    body.public .poster-hero-actions{
        position:relative!important;
        left:auto!important;
        bottom:auto!important;
        transform:none!important;
        width:min(100% - 26px,990px)!important;
        margin:-34px auto 28px!important;
        grid-template-columns:1fr!important;
        text-align:center!important;
    }

    body.public .poster-hero-actions b{
        max-width:none!important;
    }

    body.public .poster-hero-actions nav{
        width:100%!important;
        min-width:0!important;
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
    }

    body.public .poster-hero-actions .btn{
        width:100%!important;
        min-width:0!important;
    }

    body.public .premium-metrics > .container:first-child{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}

/* Absolute-off fix: place the hero CTA below the poster, never overlapping it. */
body.public .poster-hero{
    padding-bottom:54px!important;
}

body.public .poster-hero-actions{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    top:auto!important;
    transform:none!important;
    width:min(990px,calc(100% - 92px))!important;
    margin:34px auto 0!important;
}

body.public .premium-metrics{
    margin-top:0!important;
}

@media(max-width:980px){
    body.public .poster-hero-actions{
        width:min(100% - 26px,990px)!important;
        margin:24px auto 28px!important;
    }
}

/* Global font override */
html,body,button,input,select,textarea,a,p,span,small,strong,b,i,em,label,th,td,h1,h2,h3,h4,h5,h6{
    font-family:Cambria,"Times New Roman",serif!important;
}

@media(max-width:560px){
    body.public .poster-hero-shell{
        width:min(100% - 24px,1320px)!important;
    }

    body.public .poster-hero-image{
        min-height:380px!important;
        border-radius:24px!important;
    }

    body.public .poster-hero-actions{
        padding:18px!important;
        border-radius:20px!important;
    }

    body.public .poster-hero-actions b{
        font-size:20px!important;
    }

    body.public .poster-hero-actions nav{
        grid-template-columns:1fr!important;
    }

    body.public .premium-metrics > .container:first-child{
        width:min(100% - 24px,1180px)!important;
        grid-template-columns:1fr!important;
    }
}

/* Last rule: CTA sits below the poster, not on top of it. */
body.public .poster-hero{
    padding-bottom:54px!important;
}

body.public .poster-hero-actions{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    top:auto!important;
    transform:none!important;
    width:min(990px,calc(100% - 92px))!important;
    margin:34px auto 0!important;
}

body.public .premium-metrics{
    margin-top:0!important;
}

@media(max-width:980px){
    body.public .poster-hero-actions{
        width:min(100% - 26px,990px)!important;
        margin:24px auto 28px!important;
    }
}

/* Last rule: CTA sits below the poster, not on top of it. */
body.public .poster-hero{
    padding-bottom:54px!important;
}

body.public .poster-hero-actions{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    top:auto!important;
    transform:none!important;
    width:min(990px,calc(100% - 92px))!important;
    margin:34px auto 0!important;
}

body.public .premium-metrics{
    margin-top:0!important;
}

@media(max-width:980px){
    body.public .poster-hero-actions{
        width:min(100% - 26px,990px)!important;
        margin:24px auto 28px!important;
    }
}

/* Lower the floating hero CTA so it does not stick to the poster edge. */
body.public .poster-hero{
    padding-bottom:220px!important;
}

body.public .poster-hero-actions{
    bottom:-178px!important;
}

@media(max-width:980px){
    body.public .poster-hero{
        padding-bottom:44px!important;
    }

    body.public .poster-hero-actions{
        bottom:auto!important;
        margin:18px auto 34px!important;
    }
}

/* Footer cleanup: match the current footer markup and lock social icon sizes. */
body.public .premium-footer{
    position:relative!important;
    padding:58px 0 22px!important;
    background:
        radial-gradient(circle at 88% 0,rgba(8,115,189,.28),transparent 28%),
        linear-gradient(180deg,#062d55 0%,#041f3c 16%,#031b35 100%)!important;
    color:#fff!important;
    overflow:hidden!important;
}

body.public .premium-footer::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:18px;
    background:linear-gradient(90deg,#0a74be,#0873bd,#1e91d6);
    opacity:.95;
}

body.public .footer-clean-shell{
    position:relative!important;
    z-index:1!important;
    width:min(1180px,calc(100% - 44px))!important;
    padding-left:0!important;
    padding-right:0!important;
}

body.public .footer-clean-grid{
    display:grid!important;
    grid-template-columns:1.2fr minmax(260px,.9fr) auto!important;
    align-items:center!important;
    gap:34px!important;
    text-align:left!important;
}

body.public .footer-clean-brand{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:18px!important;
    min-width:0!important;
}

body.public .footer-clean-brand img{
    width:82px!important;
    height:82px!important;
    flex:0 0 82px!important;
    object-fit:contain!important;
    padding:8px!important;
    border-radius:20px!important;
    background:#fff!important;
    box-shadow:0 18px 42px rgba(0,0,0,.20)!important;
}

body.public .footer-clean-brand span{
    display:block!important;
    margin:0!important;
    min-width:0!important;
}

body.public .footer-clean-brand b{
    display:block!important;
    color:#fff!important;
    font-size:18px!important;
    line-height:1.15!important;
    font-weight:950!important;
    letter-spacing:-.2px!important;
}

body.public .footer-clean-brand small{
    display:block!important;
    margin-top:5px!important;
    color:#b8d5ef!important;
    font-size:12px!important;
    line-height:1.3!important;
    font-weight:700!important;
    letter-spacing:.4px!important;
}

body.public .footer-clean-copy{
    padding:0!important;
    border:0!important;
}

body.public .footer-clean-copy strong{
    display:block!important;
    color:#fff!important;
    font-size:17px!important;
    line-height:1.3!important;
    font-weight:900!important;
}

body.public .footer-clean-copy p{
    margin:10px 0 0!important;
    color:#8fb0cb!important;
    font-size:13px!important;
    line-height:1.5!important;
}

body.public .footer-clean-social{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    margin:0!important;
}

body.public .footer-clean-social .social-link{
    width:46px!important;
    height:46px!important;
    flex:0 0 46px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:15px!important;
    color:#fff!important;
    text-decoration:none!important;
    box-shadow:0 16px 34px rgba(0,0,0,.20)!important;
    transition:transform .2s ease, filter .2s ease!important;
}

body.public .footer-clean-social .social-link:hover{
    transform:translateY(-4px)!important;
    filter:brightness(1.08)!important;
}

body.public .footer-clean-social svg{
    width:22px!important;
    height:22px!important;
    display:block!important;
    flex:0 0 22px!important;
    fill:currentColor!important;
}

body.public .footer-clean-social .instagram{
    background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af)!important;
}

body.public .footer-clean-social .tiktok{
    background:#050505!important;
}

body.public .footer-clean-social .facebook{
    background:#1877f2!important;
}

body.public .footer-clean-social .youtube{
    background:#ff0000!important;
}

body.public .footer-bottom{
    margin-top:34px!important;
    padding-top:18px!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
    color:#8fb0cb!important;
    font-size:12px!important;
    text-align:center!important;
}

@media(max-width:820px){
    body.public .footer-clean-grid{
        grid-template-columns:1fr!important;
        justify-items:center!important;
        text-align:center!important;
        gap:24px!important;
    }

    body.public .footer-clean-brand{
        justify-content:center!important;
    }

    body.public .footer-clean-social{
        justify-content:center!important;
        flex-wrap:wrap!important;
    }
}

@media(max-width:460px){
    body.public .premium-footer{
        padding-top:46px!important;
    }

    body.public .footer-clean-brand{
        flex-direction:column!important;
        gap:12px!important;
    }

    body.public .footer-clean-brand img{
        width:72px!important;
        height:72px!important;
        flex-basis:72px!important;
    }
}

/* Requirements cleanup: turn document list into readable cards. */
body.public .requirements-section{
    padding:82px 0!important;
    background:
        radial-gradient(circle at 78% 8%,rgba(8,115,189,.08),transparent 30%),
        linear-gradient(180deg,#f5f9ff 0%,#ffffff 100%)!important;
}

body.public .requirements-wrap{
    width:min(1180px,calc(100% - 44px))!important;
    display:grid!important;
    grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr)!important;
    gap:38px!important;
    align-items:center!important;
    padding-left:0!important;
    padding-right:0!important;
}

body.public .requirements-intro{
    min-height:360px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:46px!important;
    border-radius:30px!important;
    box-shadow:0 28px 80px rgba(5,45,90,.16)!important;
}

body.public .requirements-intro h2{
    max-width:520px!important;
    font-size:clamp(34px,3.4vw,46px)!important;
    line-height:1.12!important;
    letter-spacing:-1.2px!important;
}

body.public .requirements-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
}

body.public .requirements-grid .requirement-card{
    min-height:96px!important;
    display:flex!important;
    align-items:center!important;
    gap:16px!important;
    padding:18px 20px!important;
    border:1px solid rgba(5,42,87,.10)!important;
    border-radius:20px!important;
    background:#fff!important;
    box-shadow:0 16px 42px rgba(5,45,90,.07)!important;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease!important;
}

body.public .requirements-grid .requirement-card:hover{
    transform:translateY(-4px)!important;
    border-color:rgba(8,115,189,.24)!important;
    box-shadow:0 22px 56px rgba(5,45,90,.12)!important;
}

body.public .requirements-grid .requirement-card b{
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:16px!important;
    background:linear-gradient(135deg,#062d55,#0873bd)!important;
    color:#fff!important;
    font-size:13px!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:.6px!important;
    box-shadow:0 12px 28px rgba(8,115,189,.22)!important;
}

body.public .requirements-grid .requirement-card:nth-child(2n) b{
    background:linear-gradient(135deg,#ffc247,#f59e0b)!important;
    color:#082346!important;
}

body.public .requirements-grid .requirement-card span{
    display:block!important;
    margin:0!important;
    color:#102a43!important;
    font-size:15px!important;
    line-height:1.35!important;
    font-weight:800!important;
    letter-spacing:-.1px!important;
}

@media(max-width:980px){
    body.public .requirements-wrap{
        grid-template-columns:1fr!important;
        align-items:stretch!important;
    }

    body.public .requirements-intro{
        min-height:auto!important;
    }
}

@media(max-width:680px){
    body.public .requirements-section{
        padding:58px 0!important;
    }

    body.public .requirements-wrap{
        width:min(100% - 28px,1180px)!important;
        gap:22px!important;
    }

    body.public .requirements-intro{
        padding:28px!important;
        border-radius:24px!important;
    }

    body.public .requirements-intro h2{
        font-size:28px!important;
    }

    body.public .requirements-grid{
        grid-template-columns:1fr!important;
        gap:12px!important;
    }

    body.public .requirements-grid .requirement-card{
        min-height:82px!important;
        padding:16px!important;
    }
}

/* Landing logo strip fix: keep institution logos compact and aligned. */
body.public .premium-metrics{
    display:block!important;
}

body.public .premium-metrics > .container:first-child{
    width:min(1200px,calc(100% - 40px))!important;
    padding-left:0!important;
    padding-right:0!important;
}

body.public .metrics-logo-strip{
    width:min(820px,calc(100% - 40px))!important;
    margin:18px auto 0!important;
    padding:14px 18px!important;
    display:grid!important;
    grid-template-columns:minmax(150px,auto) 1fr!important;
    align-items:center!important;
    gap:20px!important;
    border:1px solid rgba(5,42,87,.10)!important;
    border-radius:20px!important;
    background:linear-gradient(180deg,#fff,#f9fcff)!important;
    box-shadow:0 18px 44px rgba(5,36,76,.10)!important;
    overflow:hidden!important;
}

body.public .metrics-logo-strip > span{
    display:block!important;
    max-width:190px!important;
    color:#687d91!important;
    font-size:11px!important;
    line-height:1.35!important;
    font-weight:900!important;
    letter-spacing:.9px!important;
    text-transform:uppercase!important;
    text-align:left!important;
}

body.public .metrics-logo-strip > div{
    display:grid!important;
    grid-template-columns:56px 126px 104px 64px!important;
    align-items:center!important;
    justify-content:end!important;
    gap:18px!important;
    min-width:0!important;
}

body.public .metrics-logo-strip img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:44px!important;
    max-height:44px!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:drop-shadow(0 7px 11px rgba(5,36,76,.08))!important;
}

body.public .metrics-logo-strip img:first-child,
body.public .metrics-logo-strip img:nth-child(4){
    height:48px!important;
    max-height:48px!important;
}

@media(max-width:760px){
    body.public .metrics-logo-strip{
        width:min(100% - 24px,820px)!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        text-align:center!important;
    }

    body.public .metrics-logo-strip > span{
        max-width:none!important;
        text-align:center!important;
    }

    body.public .metrics-logo-strip > div{
        grid-template-columns:48px 104px 88px 54px!important;
        justify-content:center!important;
        gap:12px!important;
    }

    body.public .metrics-logo-strip img{
        height:38px!important;
        max-height:38px!important;
    }

    body.public .metrics-logo-strip img:first-child,
    body.public .metrics-logo-strip img:nth-child(4){
        height:42px!important;
        max-height:42px!important;
    }
}

@media(max-width:430px){
    body.public .metrics-logo-strip > div{
        grid-template-columns:42px 92px 78px 48px!important;
        gap:10px!important;
    }
}

/* Premium advantage cards */
body.public .advantage-section{
    position:relative!important;
    padding:78px 0 92px!important;
    background:
        linear-gradient(180deg,#f6faff 0%,#ffffff 46%,#f7fbff 100%)!important;
    overflow:hidden!important;
}

body.public .advantage-section::before{
    content:"";
    position:absolute;
    inset:34px auto auto 50%;
    width:min(820px,70vw);
    height:260px;
    transform:translateX(-50%);
    border:1px solid rgba(8,115,189,.10);
    border-radius:999px;
    background:linear-gradient(90deg,rgba(8,115,189,.06),rgba(255,194,71,.10),rgba(8,115,189,.04));
    pointer-events:none;
}

body.public .advantage-section > .container{
    position:relative!important;
    z-index:1!important;
    width:min(1180px,calc(100% - 44px))!important;
    padding-left:0!important;
    padding-right:0!important;
}

body.public .advantage-section .premium-heading{
    max-width:880px!important;
    margin:0 auto 34px!important;
}

body.public .advantage-section .premium-heading span{
    padding:7px 13px!important;
    border:1px solid rgba(8,115,189,.14)!important;
    border-radius:999px!important;
    background:#fff!important;
    box-shadow:0 10px 28px rgba(5,36,76,.06)!important;
    color:#0873bd!important;
}

body.public .advantage-section .premium-heading h2{
    margin:14px auto 0!important;
    max-width:980px!important;
    color:#041f3c!important;
    font-size:clamp(32px,3.8vw,52px)!important;
    line-height:1.08!important;
    letter-spacing:-1.4px!important;
}

body.public .premium-advantages{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:18px!important;
    margin-top:36px!important;
}

body.public .premium-advantages article{
    position:relative!important;
    min-height:245px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    gap:22px!important;
    padding:24px!important;
    border:1px solid rgba(5,42,87,.10)!important;
    border-radius:24px!important;
    background:
        radial-gradient(circle at 84% 0,rgba(255,194,71,.18),transparent 32%),
        linear-gradient(180deg,#ffffff 0%,#f7fbff 100%)!important;
    box-shadow:0 22px 60px rgba(5,36,76,.10)!important;
    overflow:hidden!important;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease!important;
}

body.public .premium-advantages article::after{
    content:"";
    position:absolute;
    right:-42px;
    bottom:-54px;
    width:140px;
    height:140px;
    border:26px solid rgba(8,115,189,.07);
    border-radius:50%;
}

body.public .premium-advantages article:hover{
    transform:translateY(-6px)!important;
    border-color:rgba(8,115,189,.22)!important;
    box-shadow:0 28px 70px rgba(5,36,76,.15)!important;
}

body.public .premium-advantages i{
    position:relative!important;
    z-index:1!important;
    width:54px!important;
    height:54px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,#062d55,#0873bd)!important;
    color:#fff!important;
    font-size:14px!important;
    line-height:1!important;
    font-style:normal!important;
    font-weight:950!important;
    letter-spacing:.6px!important;
    box-shadow:0 16px 34px rgba(8,115,189,.24)!important;
}

body.public .premium-advantages article:nth-child(2) i,
body.public .premium-advantages article:nth-child(4) i{
    background:linear-gradient(135deg,#ffc247,#f59e0b)!important;
    color:#082346!important;
}

body.public .premium-advantages div{
    position:relative!important;
    z-index:1!important;
}

body.public .premium-advantages h3{
    margin:0 0 10px!important;
    color:#062d55!important;
    font-size:20px!important;
    line-height:1.2!important;
    font-weight:950!important;
    letter-spacing:-.35px!important;
}

body.public .premium-advantages p{
    margin:0!important;
    color:#60748a!important;
    font-size:14px!important;
    line-height:1.65!important;
    font-weight:600!important;
}

@media(max-width:980px){
    body.public .premium-advantages{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}

@media(max-width:620px){
    body.public .advantage-section{
        padding:56px 0 64px!important;
    }

    body.public .advantage-section > .container{
        width:min(100% - 28px,1180px)!important;
    }

    body.public .advantage-section .premium-heading h2{
        font-size:30px!important;
        letter-spacing:-.8px!important;
    }

    body.public .premium-advantages{
        grid-template-columns:1fr!important;
        gap:14px!important;
    }

    body.public .premium-advantages article{
        min-height:190px!important;
        padding:22px!important;
    }
}
/* =====================================================
   3. HERO
===================================================== */
/* =====================================================
   3. HERO
===================================================== */


/* HERO SECTION */


.poster-hero{

    position:relative;

    padding-top:120px;

    padding-bottom:40px;

}



/* HERO CONTAINER */


.poster-hero-shell{

    width:min(1200px, calc(100% - 40px));

    margin:auto;

    position:relative;

}



/* HERO IMAGE */


.poster-hero-image{

    width:100%;

    min-height:560px;

    object-fit:cover;

    object-position:center;

    border-radius:34px;


    box-shadow:

    0 35px 90px rgba(3,35,75,.22);


}



/* HERO OVERLAY */


.poster-hero-shell::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:34px;

    background:

    linear-gradient(

        90deg,

        rgba(4,26,52,.45),

        rgba(4,26,52,.05)

    );



    pointer-events:none;

}



/* HERO CONTENT */


.poster-hero-content{

    position:absolute;

    top:50%;

    left:60px;

    transform:translateY(-50%);

    max-width:560px;

    z-index:2;

    color:#fff;

}



.poster-hero-content span{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    margin-bottom:20px;


    background:

    rgba(255,200,87,.18);


    border:

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


    border-radius:50px;


    backdrop-filter:blur(10px);


    color:#ffd76a;

    font-size:12px;

    font-weight:900;

    letter-spacing:1.5px;

    text-transform:uppercase;

}



.poster-hero-content h1{

    color:#fff;

    font-size:52px;

    line-height:1.08;

    letter-spacing:-2px;

    margin-bottom:18px;

}



.poster-hero-content p{

    color:#e5f1ff;

    font-size:17px;

    line-height:1.8;

    max-width:500px;

}





/* HERO BUTTON AREA */


.poster-hero-actions{

    position:absolute;

    left:50%;

    bottom:-45px;

    transform:translateX(-50%);


    width:min(900px,90%);


    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;


    padding:22px 28px;


    background:#fff;


    border-radius:25px;


    box-shadow:

    0 25px 60px rgba(0,40,90,.18);


    z-index:5;

}





.poster-hero-actions b{

    display:block;

    font-size:20px;

    font-weight:900;

    color:var(--primary-dark);

}



.poster-hero-actions span{

    display:block;

    margin-top:3px;

    color:var(--muted);

    font-size:13px;

}





/* HERO BUTTON GROUP */


.poster-hero-actions nav{

    display:flex;

    gap:12px;

}




.poster-hero-actions .btn-primary-premium{

    min-width:170px;

}





.btn-outline-premium{

    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:14px 26px;


    border-radius:50px;


    border:

    2px solid var(--primary);


    color:var(--primary);


    font-weight:900;


    transition:.3s;

}



.btn-outline-premium:hover{

    background:var(--primary);

    color:#fff;

}



/* HERO BADGE */


.hero-badge{

    position:absolute;

    top:40px;

    right:40px;

    z-index:3;


    padding:12px 20px;


    background:

    linear-gradient(
        135deg,
        var(--accent),
        #ffb300
    );


    border-radius:50px;


    color:#062346;


    font-weight:900;

    font-size:13px;


    box-shadow:

    0 15px 35px rgba(255,200,87,.35);

}




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


@media(max-width:900px){


    .poster-hero{

        padding-top:90px;

    }



    .poster-hero-shell{

        width:calc(100% - 30px);

    }



    .poster-hero-image{

        min-height:420px;

        border-radius:22px;

    }



    .poster-hero-content{

        left:25px;

        right:25px;

        max-width:none;

    }



    .poster-hero-content h1{

        font-size:34px;

        letter-spacing:-1px;

    }



    .poster-hero-content p{

        font-size:14px;

    }



    .poster-hero-actions{

        position:relative;

        left:auto;

        bottom:auto;

        transform:none;


        width:calc(100% - 30px);


        margin:-20px auto 0;


        flex-direction:column;

        align-items:stretch;


        padding:20px;

    }



    .poster-hero-actions nav{

        display:grid;

        grid-template-columns:1fr;

    }



    .poster-hero-actions .btn,
    .btn-outline-premium{

        width:100%;

    }



    .hero-badge{

        top:20px;

        right:20px;

        font-size:11px;

    }


}



@media(max-width:390px){


    .poster-hero-content h1{

        font-size:28px;

    }


    .poster-hero-image{

        min-height:360px;

    }


}
/* =====================================================
   4. METRIC
===================================================== */
/* =====================================================
   METRIC
===================================================== */

.premium-metrics{
    position:relative;
    z-index:5;
    margin-top:-35px;
    padding:0 0 70px;
}


.premium-metrics .container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    background:#ffffff;
    border-radius:26px;
    overflow:hidden;
    box-shadow:
        0 25px 70px rgba(4,35,75,.12);
    border:1px solid #e6eef7;
}


.premium-metrics article{
    position:relative;
    min-height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:25px 15px;
}


.premium-metrics article:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:25%;
    height:50%;
    width:1px;
    background:#e4edf6;
}


.premium-metrics i{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    margin-bottom:14px;

    background:
        linear-gradient(
            135deg,
            #0a74be,
            #063b70
        );

    color:#ffffff;
    font-size:24px;
    font-style:normal;
}


.premium-metrics strong{
    display:block;
    color:#062d55;
    font-size:30px;
    line-height:1;
    font-weight:900;
    letter-spacing:-1px;
    margin-bottom:8px;
}


.premium-metrics span{
    display:block;
    color:#6f8297;
    font-size:14px;
    font-weight:600;
}



/* Highlight metric pertama */

.premium-metrics article:first-child i{
    background:
    linear-gradient(
        135deg,
        #ffc857,
        #ffb300
    );

    color:#082346;
}


.premium-metrics article:first-child strong{
    color:#0a74be;
}



/* Hover Effect */

.premium-metrics article{
    transition:.35s ease;
}


.premium-metrics article:hover{
    transform:translateY(-8px);
}


.premium-metrics article:hover i{
    transform:scale(1.08);
}


.premium-metrics i{
    transition:.35s ease;
}
/* =====================================================
   RESPONSIVE - METRIC
===================================================== */


@media(max-width:900px){

    .premium-metrics{
        margin-top:-20px;
        padding-bottom:50px;
    }


    .premium-metrics .container{
        grid-template-columns:repeat(2,1fr);
        border-radius:20px;
    }


    .premium-metrics article{
        min-height:120px;
    }


    .premium-metrics article:nth-child(2)::after{
        display:none;
    }

}



@media(max-width:520px){

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


    .premium-metrics article{
        min-height:110px;
    }


    .premium-metrics article::after{
        display:none!important;
    }


    .premium-metrics strong{
        font-size:26px;
    }


    .premium-metrics span{
        font-size:13px;
    }

}
/* =====================================================
   5. FLOW PENDAFTARAN
===================================================== */
/* =====================================================
   FLOW PENDAFTARAN
===================================================== */


.flow-section{

    position:relative;
    padding:90px 0;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f5f9ff 100%
    );

}


/* Heading */

.flow-section .premium-heading{
    text-align:center;
    margin-bottom:45px;
}


.premium-heading span{

    display:inline-block;

    color:#0a74be;

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

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:12px;

}


.premium-heading h2{

    margin:0;

    color:#062d55;

    font-size:38px;

    font-weight:900;

    letter-spacing:-1px;

}



/* FLOW WRAPPER */

.premium-flow{

    position:relative;

    display:grid;

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

    gap:20px;

}



/* CONNECTOR */

.premium-flow::before{

    content:"";

    position:absolute;

    top:55px;

    left:10%;

    right:10%;

    height:3px;

    background:

    linear-gradient(
        90deg,
        #ffc857,
        #0a74be
    );

    z-index:0;

}



/* CARD */

.premium-flow article{

    position:relative;

    z-index:2;

    background:#ffffff;

    border-radius:24px;

    padding:28px 18px;

    text-align:center;

    border:1px solid #e5eef8;

    box-shadow:

    0 18px 50px rgba(5,45,90,.08);

    transition:.35s ease;

}



/* NUMBER */

.premium-flow article>b{

    position:absolute;

    top:-14px;

    left:50%;

    transform:translateX(-50%);

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;

    background:#ffc857;

    color:#082346;

    font-size:13px;

    font-weight:900;

}



/* ICON */

.premium-flow i{

    width:70px;

    height:70px;

    margin:15px auto 18px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:22px;


    background:

    linear-gradient(
        135deg,
        #0a74be,
        #063b70
    );


    color:#ffffff;

    font-size:30px;

    font-style:normal;

}



/* TITLE */

.premium-flow h3{

    margin:0 0 10px;

    font-size:16px;

    font-weight:900;

    color:#062d55;

}



/* DESCRIPTION */

.premium-flow p{

    margin:0;

    color:#6e8094;

    font-size:13px;

    line-height:1.6;

}



/* ACTIVE STEP */

.premium-flow article:first-child{

    border-color:#ffc857;

}



.premium-flow article:first-child i{

    background:

    linear-gradient(
        135deg,
        #ffc857,
        #ffb300
    );

    color:#082346;

}



/* HOVER */

.premium-flow article:hover{

    transform:translateY(-10px);

    box-shadow:

    0 25px 60px rgba(5,45,90,.15);

}


.premium-flow article:hover i{

    transform:scale(1.08);

}


.premium-flow i{

    transition:.35s ease;

}
/* =====================================================
   RESPONSIVE - FLOW PENDAFTARAN
===================================================== */
@media(max-width:1100px){

    .premium-flow{

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

    }


    .premium-flow::before{

        display:none;

    }

}



@media(max-width:768px){


    .flow-section{

        padding:60px 0;

    }


    .premium-heading h2{

        font-size:26px;

    }


    .premium-flow{

        grid-template-columns:1fr;

        gap:18px;

        padding:0 15px;

    }



    .premium-flow article{

        display:grid;

        grid-template-columns:75px 1fr;

        align-items:center;

        text-align:left;

        padding:18px;

        min-height:110px;

    }



    .premium-flow article>b{

        top:10px;

        left:10px;

        transform:none;

    }



    .premium-flow i{

        margin:0;

        width:58px;

        height:58px;

        border-radius:18px;

        font-size:24px;

    }



    .premium-flow h3{

        font-size:15px;

    }


    .premium-flow p{

        font-size:12px;

    }


}
/* =====================================================
   6. PROGRAM STUDI
===================================================== */
/* =====================================================
   PROGRAM STUDI
===================================================== */


.program-section{

    position:relative;

    padding:90px 0;

    background:

    radial-gradient(
        circle at top left,
        #f3f8ff,
        #ffffff 45%,
        #eef6ff
    );

}



.program-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:30px;

    align-items:stretch;

}



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


.program-card-premium{

    position:relative;

    overflow:hidden;

    min-height:560px;

    border-radius:32px;

    background:#062d55;

    color:#ffffff;

    box-shadow:

    0 30px 80px rgba(4,35,75,.18);

}



/* BACKGROUND IMAGE */


.program-bg{

    position:absolute;

    inset:0;

    background:

    url("hero-cadets-port.png")

    center/cover no-repeat;

    transform:scale(1.04);

}



/* OVERLAY */

.program-overlay{

    position:absolute;

    inset:0;


    background:

    linear-gradient(
        110deg,
        rgba(4,26,52,.96),
        rgba(6,49,92,.85),
        rgba(6,49,92,.35)
    );

}




/* CONTENT */


.program-content{

    position:relative;

    z-index:2;

    padding:38px;

}



.program-topline{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

}



.program-topline span{

    color:#9fdcff;

    font-size:12px;

    font-weight:900;

    letter-spacing:2px;

    text-transform:uppercase;

}



.program-badge{

    padding:10px 18px;

    border-radius:50px;

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

    backdrop-filter:blur(10px);

    font-size:13px;

    font-weight:800;

}



/* TITLE */


.program-content h2{

    margin:0 0 18px;


    font-size:42px;

    line-height:1.12;

    letter-spacing:-1.5px;

    font-weight:900;

}



.program-content p{

    color:#dbe8f5;

    font-size:15px;

    line-height:1.8;

}



/* CODE */

.program-code{

    margin:28px 0;


    padding:16px 20px;


    border-radius:18px;


    background:

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


    border:

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


    backdrop-filter:blur(10px);


    font-weight:800;

}



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


.program-feature-grid{

    display:grid;

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

    gap:15px;

}



.program-feature-grid li{

    list-style:none;

    display:flex;

    gap:12px;


    padding:16px;


    border-radius:18px;


    background:

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


    border:

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

}



.program-feature-grid b{

    width:42px;

    height:42px;


    flex-shrink:0;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:14px;


    background:

    linear-gradient(
        135deg,
        #ffc857,
        #ffb300
    );


    color:#082346;


    font-weight:900;

}



.program-feature-grid span{

    color:#edf5ff;

    font-size:13px;

    line-height:1.5;

}




/* ==============================
   PROGRAM SIDE INFO
============================== */


.program-info-card{

    display:flex;

    flex-direction:column;

    justify-content:center;


    padding:35px;


    border-radius:32px;


    background:#ffffff;


    border:1px solid #e3edf7;


    box-shadow:

    0 25px 60px rgba(6,45,90,.08);

}



.program-info-card .label{

    color:#0a74be;

    font-size:12px;

    font-weight:900;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:12px;

}



.program-info-card h3{

    margin:0 0 15px;


    color:#062d55;


    font-size:32px;


    line-height:1.2;


    font-weight:900;

}



.program-info-card p{

    color:#6c8095;

    line-height:1.8;

    font-size:15px;

}



/* ICON BENEFIT */


.program-benefits{

    margin-top:25px;

    display:grid;

    gap:14px;

}



.program-benefits article{

    display:flex;

    gap:15px;

    align-items:center;


    padding:16px;


    border-radius:18px;


    background:#f5f9ff;

}



.program-benefits i{

    width:45px;

    height:45px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:14px;


    background:#0a74be;


    color:#ffffff;


    font-style:normal;

}



.program-benefits strong{

    display:block;

    color:#062d55;

    font-size:14px;

}



.program-benefits span{

    color:#718397;

    font-size:12px;

}
/* =====================================================
   RESPONSIVE - PROGRAM STUDI
===================================================== */


@media(max-width:1050px){

    .program-grid{

        grid-template-columns:1fr;

    }


}



@media(max-width:768px){


    .program-section{

        padding:60px 0;

    }


    .program-card-premium{

        min-height:auto;

        border-radius:24px;

    }


    .program-content{

        padding:25px;

    }



    .program-content h2{

        font-size:30px;

    }



    .program-feature-grid{

        grid-template-columns:1fr;

    }



    .program-info-card{

        padding:25px;

        border-radius:24px;

    }



    .program-info-card h3{

        font-size:25px;

    }


}
/* =====================================================
   7. GELOMBANG PENDAFTARAN
===================================================== */
/* =====================================================
   GELOMBANG PENDAFTARAN
===================================================== */


.wave-section{

    position:relative;

    padding:90px 0;

    background:#ffffff;

}



.wave-wrapper{

    display:grid;

    grid-template-columns:.85fr 1.15fr;

    gap:35px;

    align-items:center;

}



/* ==============================
   LEFT TITLE CARD
============================== */


.wave-intro{

    position:relative;

    overflow:hidden;


    padding:40px;


    border-radius:32px;


    background:

    linear-gradient(
        145deg,
        #062d55,
        #0a74be
    );


    color:#ffffff;


    box-shadow:

    0 30px 80px rgba(4,45,90,.2);

}



.wave-intro::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    right:-100px;

    bottom:-100px;

    border-radius:50%;

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

}



.wave-intro span{

    position:relative;

    z-index:2;


    display:block;


    color:#ffc857;


    font-size:12px;


    font-weight:900;


    letter-spacing:2px;


    text-transform:uppercase;


    margin-bottom:15px;

}



.wave-intro h2{

    position:relative;

    z-index:2;


    margin:0 0 18px;


    font-size:38px;


    line-height:1.15;


    font-weight:900;

}



.wave-intro p{

    position:relative;

    z-index:2;


    color:#d9e9f7;


    font-size:15px;


    line-height:1.8;

}



/* YEAR BADGE */


.wave-year{

    position:relative;

    z-index:2;


    margin-top:30px;


    display:inline-flex;


    align-items:center;

    justify-content:center;


    width:90px;

    height:90px;


    border-radius:28px;


    background:

    linear-gradient(
        135deg,
        #ffc857,
        #ffb300
    );


    color:#082346;


    font-size:22px;


    font-weight:900;

}





/* ==============================
   WAVE LIST
============================== */


.wave-list{

    display:grid;

    gap:18px;

}



.wave-item{

    display:grid;

    grid-template-columns:95px 1fr auto;

    gap:20px;

    align-items:center;


    padding:22px;


    border-radius:28px;


    background:#ffffff;


    border:1px solid #e1edf7;


    box-shadow:

    0 15px 45px rgba(5,45,90,.07);


    transition:.35s ease;

}



.wave-item:hover{

    transform:translateY(-5px);

    box-shadow:

    0 25px 60px rgba(5,45,90,.12);

}




/* ACTIVE */

.wave-item.active{

    border-color:#ffc857;


    background:

    linear-gradient(
        135deg,
        #fff9eb,
        #ffffff
    );


}




/* LABEL */

.wave-label{

    width:95px;

    height:95px;


    display:flex;

    align-items:center;

    justify-content:center;


    text-align:center;


    border-radius:25px;


    background:

    linear-gradient(
        135deg,
        #082f60,
        #0a74be
    );


    color:#ffffff;


    font-size:14px;


    line-height:1.4;


    font-weight:900;

}



.wave-item.active .wave-label{

    background:

    linear-gradient(
        135deg,
        #ffc857,
        #ffb300
    );


    color:#082346;

}




/* INFO */


.wave-info h3{

    margin:0 0 8px;


    color:#062d55;


    font-size:24px;


    font-weight:900;

}



.wave-info p{

    margin:0;


    color:#718397;


    font-size:14px;

}





/* DATE */


.wave-date{

    display:flex;

    align-items:center;

    gap:10px;

}



.wave-date time{

    min-width:75px;


    padding:12px;


    border-radius:18px;


    background:#f4f8fc;


    text-align:center;

}



.wave-date small{

    display:block;


    font-size:10px;


    color:#8293a5;


    font-weight:800;


    text-transform:uppercase;

}



.wave-date strong{

    display:block;


    margin-top:5px;


    font-size:24px;


    line-height:1;


    color:#062d55;

}



.wave-date i{

    font-style:normal;


    color:#0a74be;


    font-weight:900;

}



/* NOTE */

.wave-note{

    margin-top:25px;


    padding:15px 20px;


    border-radius:18px;


    background:#f5f9ff;


    border:1px dashed #cbdbea;


    text-align:center;


    color:#728398;


    font-size:13px;

}
/* =====================================================
   RESPONSIVE - GELOMBANG
===================================================== */


@media(max-width:1050px){

    .wave-wrapper{

        grid-template-columns:1fr;

    }


}



@media(max-width:768px){


    .wave-section{

        padding:60px 0;

    }



    .wave-intro{

        padding:28px;

        border-radius:24px;

    }



    .wave-intro h2{

        font-size:28px;

    }



    .wave-item{

        grid-template-columns:1fr;

        text-align:center;

        gap:15px;

    }



    .wave-label{

        width:100%;

        height:55px;

        border-radius:16px;

    }



    .wave-date{

        justify-content:center;

    }


}



@media(max-width:420px){


    .wave-date{

        flex-direction:column;

    }


}
/* =====================================================
   8. REQUIREMENT
===================================================== */
/* =====================================================
   REQUIREMENT
===================================================== */


.requirements-section{

    position:relative;

    padding:90px 0;

    background:

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

}



.requirements-wrap{

    display:grid;

    grid-template-columns:.85fr 1.15fr;

    gap:35px;

    align-items:stretch;

}



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


.requirements-intro{

    position:relative;

    overflow:hidden;

    padding:42px;

    border-radius:32px;


    background:

    linear-gradient(
        145deg,
        #062d55,
        #0a74be
    );


    color:#ffffff;


    box-shadow:

    0 30px 80px rgba(5,45,90,.18);

}



.requirements-intro::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-80px;

    bottom:-80px;

    border-radius:50%;

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

}



.requirements-intro span{

    position:relative;

    z-index:2;

    display:block;


    color:#ffc857;


    font-size:12px;


    font-weight:900;


    letter-spacing:2px;


    text-transform:uppercase;


    margin-bottom:15px;

}



.requirements-intro h2{

    position:relative;

    z-index:2;


    margin:0 0 18px;


    font-size:38px;


    line-height:1.15;


    font-weight:900;

}



.requirements-intro p{

    position:relative;

    z-index:2;


    color:#d9e8f7;


    font-size:15px;


    line-height:1.8;

}



.requirements-note{

    position:relative;

    z-index:2;


    margin-top:30px;


    padding:15px 18px;


    border-radius:18px;


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


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


    font-size:13px;

}



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


.requirements-grid{

    display:grid;

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

    gap:18px;

}



.requirement-card{

    display:flex;

    align-items:center;

    gap:18px;


    padding:22px;


    border-radius:24px;


    background:#ffffff;


    border:1px solid #e3edf7;


    box-shadow:

    0 15px 45px rgba(5,45,90,.06);


    transition:.35s ease;

}



.requirement-card:hover{

    transform:translateY(-7px);


    box-shadow:

    0 25px 60px rgba(5,45,90,.12);

}



/* ICON */

.requirement-card i{

    width:60px;

    height:60px;


    flex-shrink:0;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:18px;


    background:

    linear-gradient(
        135deg,
        #0a74be,
        #063b70
    );


    color:#ffffff;


    font-size:26px;


    font-style:normal;

}



.requirement-card:first-child i{

    background:

    linear-gradient(
        135deg,
        #ffc857,
        #ffb300
    );


    color:#082346;

}



/* TEXT */

.requirement-card h3{

    margin:0 0 6px;


    font-size:16px;


    font-weight:900;


    color:#062d55;

}



.requirement-card span{

    display:block;


    color:#718397;


    font-size:13px;


    line-height:1.5;

}



/* FOOT NOTE */

.requirements-footer{

    margin-top:25px;


    padding:16px 20px;


    border-radius:18px;


    background:#f5f9ff;


    color:#687b90;


    text-align:center;


    font-size:13px;


    border:1px dashed #cbdbea;

}
/* =====================================================
   RESPONSIVE - REQUIREMENT
===================================================== */


@media(max-width:1050px){

    .requirements-wrap{

        grid-template-columns:1fr;

    }

}



@media(max-width:768px){


    .requirements-section{

        padding:60px 0;

    }



    .requirements-intro{

        padding:28px;

        border-radius:24px;

    }



    .requirements-intro h2{

        font-size:28px;

    }



    .requirements-grid{

        grid-template-columns:1fr;

    }



    .requirement-card{

        padding:18px;

    }



    .requirement-card i{

        width:52px;

        height:52px;

        border-radius:15px;

        font-size:22px;

    }

}
/* =====================================================
   9. CTA
===================================================== */
/* =====================================================
   CTA
===================================================== */


.premium-cta{

    position:relative;

    padding:90px 0;

    overflow:hidden;

}



.premium-cta::before{

    content:"";

    position:absolute;

    inset:0;


    background:

    linear-gradient(
        135deg,
        #062d55,
        #0a74be
    );


}



.premium-cta::after{

    content:"";

    position:absolute;


    width:450px;

    height:450px;


    right:-150px;

    top:-150px;


    border-radius:50%;


    background:

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

}



.premium-cta .container{

    position:relative;

    z-index:2;


    display:flex;

    align-items:center;

    justify-content:space-between;


    gap:30px;

}





/* TEXT */

.premium-cta-content span{

    display:block;


    color:#ffc857;


    font-size:12px;


    font-weight:900;


    letter-spacing:2px;


    text-transform:uppercase;


    margin-bottom:15px;

}



.premium-cta h2{

    margin:0 0 15px;


    color:#ffffff;


    font-size:42px;


    line-height:1.15;


    font-weight:900;


    letter-spacing:-1px;

}



.premium-cta p{

    margin:0;


    color:#dceaf7;


    font-size:16px;


    line-height:1.7;

}





/* BUTTON AREA */

.premium-cta-actions{

    display:flex;

    gap:15px;

    flex-shrink:0;

}



/* PRIMARY */

.btn-primary-premium{

    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:17px 32px;


    border-radius:50px;


    background:

    linear-gradient(
        135deg,
        #ffc857,
        #ffb300
    );


    color:#082346;


    font-size:15px;


    font-weight:900;


    text-decoration:none;


    transition:.35s ease;

}



.btn-primary-premium:hover{

    transform:translateY(-5px);


    box-shadow:

    0 20px 45px rgba(255,200,87,.35);

}





/* SECONDARY */

.btn-outline-premium{


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:17px 32px;


    border-radius:50px;


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


    background:

    rgba(255,255,255,.1);


    color:#ffffff;


    backdrop-filter:blur(10px);


    font-size:15px;


    font-weight:800;


    text-decoration:none;


    transition:.35s ease;

}



.btn-outline-premium:hover{


    background:#ffffff;


    color:#062d55;


    transform:translateY(-5px);

}





/* TRUST BADGE */

.cta-trust{

    display:flex;

    gap:12px;


    margin-top:25px;

}



.cta-trust span{


    display:flex;

    align-items:center;


    padding:8px 14px;


    border-radius:50px;


    background:

    rgba(255,255,255,.1);


    border:

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


    color:#ffffff;


    font-size:12px;


    font-weight:700;

}
/* =====================================================
   RESPONSIVE - CTA
===================================================== */


@media(max-width:900px){


    .premium-cta .container{


        flex-direction:column;


        text-align:center;


    }



    .premium-cta h2{


        font-size:32px;


    }



    .premium-cta-actions{


        width:100%;


        justify-content:center;


    }


}



@media(max-width:600px){


    .premium-cta{


        padding:60px 0;

    }



    .premium-cta h2{


        font-size:26px;


    }



    .premium-cta p{


        font-size:14px;

    }



    .premium-cta-actions{


        flex-direction:column;


        width:100%;


    }



    .btn-primary-premium,
    .btn-outline-premium{


        width:100%;


        padding:15px;


    }



    .cta-trust{


        justify-content:center;

        flex-wrap:wrap;

    }


}
/* =====================================================
   10. FOOTER
===================================================== */
/* =====================================================
   FOOTER
===================================================== */


.footer-clean{

    position:relative;

    overflow:hidden;

    padding:70px 0 25px;


    background:

    linear-gradient(
        145deg,
        #041a34,
        #062d55,
        #083f78
    );


    color:#ffffff;

}




/* WAVE TOP */

.footer-clean::before{

    content:"";

    position:absolute;

    top:-80px;

    left:-10%;


    width:120%;

    height:120px;


    background:#ffffff;


    border-radius:50% 50% 0 0 / 100% 100% 0 0;

}





.footer-clean-shell{

    position:relative;

    z-index:2;

}



/* GRID */

.footer-clean-grid{

    display:grid;


    grid-template-columns:

    1.4fr .8fr .8fr;


    gap:45px;

}





/* BRAND */

.footer-clean-brand{

    display:flex;

    align-items:flex-start;

    gap:18px;

}



.footer-clean-brand img{

    width:75px;

    height:75px;

    object-fit:contain;


    background:#ffffff;


    border-radius:18px;


    padding:8px;

}




.footer-clean-brand strong{


    display:block;


    font-size:26px;


    font-weight:900;


    letter-spacing:-.5px;


}



.footer-clean-brand span{


    display:block;


    margin-top:8px;


    color:#c9dced;


    font-size:14px;


    line-height:1.6;


}





/* TITLE */

.footer-clean h3{


    margin:0 0 20px;


    color:#ffc857;


    font-size:15px;


    font-weight:900;


    letter-spacing:1px;


    text-transform:uppercase;


}





/* LINK */

.footer-clean ul{


    list-style:none;


    padding:0;

    margin:0;


}



.footer-clean ul li{


    margin-bottom:12px;


}



.footer-clean ul a{


    color:#d9e8f7;


    text-decoration:none;


    font-size:14px;


    transition:.3s;


}



.footer-clean ul a:hover{


    color:#ffc857;


    padding-left:5px;


}






/* CONTACT */

.footer-contact p{


    margin:0 0 12px;


    color:#d9e8f7;


    font-size:14px;


    line-height:1.6;


}





/* SOCIAL */

.footer-social{


    display:flex;


    gap:10px;


    margin-top:20px;


}



.footer-social a{


    width:40px;


    height:40px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:

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


    color:#ffffff;


    text-decoration:none;


    font-weight:900;


    transition:.3s;


}



.footer-social a:hover{


    background:#ffc857;


    color:#082346;


    transform:translateY(-5px);


}






/* COPYRIGHT */

.footer-bottom{


    position:relative;


    z-index:2;


    margin-top:45px;


    padding-top:20px;


    border-top:

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


    text-align:center;


    color:#bcd0e3;


    font-size:13px;


}
/* =====================================================
   RESPONSIVE - FOOTER
===================================================== */


@media(max-width:900px){


    .footer-clean-grid{


        grid-template-columns:1fr;


        text-align:center;


        gap:30px;


    }



    .footer-clean-brand{


        justify-content:center;


    }



    .footer-social{


        justify-content:center;


    }


}




@media(max-width:600px){


    .footer-clean{


        padding:60px 0 20px;


    }



    .footer-clean-brand{


        flex-direction:column;


        align-items:center;


    }



    .footer-clean-brand strong{


        font-size:22px;


    }



    .footer-clean-brand span{


        font-size:13px;


    }


}
/* =====================================================
   11. RESPONSIVE
===================================================== */
/* =====================================================
   RESPONSIVE PREMIUM PENTARU
===================================================== */


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

@media(max-width:1100px){

    .program-grid,
    .premium-program-wrapper{
        grid-template-columns:1fr!important;
    }


    .hero-content{
        max-width:100%;
    }


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


    .requirements-wrap{
        grid-template-columns:1fr;
    }


    .footer-clean-grid{
        grid-template-columns:1fr 1fr;
    }

}




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

@media(max-width:768px){


html,
body{
    overflow-x:hidden!important;
}



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


.container{
    width:100%!important;
    padding-left:18px!important;
    padding-right:18px!important;
}


section{
    padding-top:45px!important;
    padding-bottom:45px!important;
}




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


.topbar{
    padding:10px 12px!important;
}


.nav-wrap{

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

    min-height:58px;

    padding:8px 12px!important;

    border-radius:16px!important;

}


.brand img{

    width:42px!important;
    height:42px!important;

}


.brand-copy b{

    font-size:17px!important;

}


.header-clock{

    display:none!important;

}


.admin-header-btn{

    padding:9px 14px!important;

    font-size:11px!important;

}




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


.poster-hero{

    padding-top:80px!important;

}


.poster-hero-shell{

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

}


.poster-hero-image{

    width:100%!important;

    min-height:380px!important;

    aspect-ratio:9/16;

    object-fit:cover!important;

    border-radius:22px!important;

}



.poster-hero-actions{

    flex-direction:column;

    gap:15px;

    padding:18px!important;

}



.poster-hero-actions nav{

    width:100%;

    display:grid;

    grid-template-columns:1fr;

}



.poster-hero-actions .btn{

    width:100%;

}




/* ================= METRIC ================= */


.premium-metrics .container{

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

    gap:10px;

}


.premium-metrics article{

    min-height:100px;

    padding:12px 8px;

}


.premium-metrics strong{

    font-size:18px!important;

}


.premium-metrics span{

    font-size:11px!important;

}




/* ================= FLOW PENDAFTARAN ================= */


.premium-flow{

    grid-template-columns:1fr!important;

    gap:14px;

    padding:18px!important;

}


.premium-flow article{

    min-height:90px;

    display:grid;

    grid-template-columns:55px 1fr;

    text-align:left;

    align-items:center;

}



.premium-flow i{

    width:50px;

    height:50px;

    font-size:20px;

}


.premium-flow h3{

    font-size:13px!important;

}




/* ================= PROGRAM STUDI ================= */


.program-card-premium,
.program-card-v2{

    padding:22px!important;

    border-radius:22px!important;

}


.program-card-premium h2,
.program-content h2{

    font-size:26px!important;

}


.program-feature-grid,
.program-features{

    grid-template-columns:1fr!important;

}


.feature-box,
.program-feature-grid li{

    padding:14px!important;

}




/* ================= GELOMBANG ================= */


.wave-premium-card,
.wave-card-v2{

    padding:20px!important;

    border-radius:22px!important;

}



.wave-title h2{

    font-size:25px!important;

}



.calendar-wave,
.wave-item-v2{

    grid-template-columns:1fr!important;

    padding:16px!important;

    text-align:center;

}


.calendar-wave>b,
.wave-month{

    width:100%!important;

    height:55px!important;

}



.calendar-dates,
.wave-dates{

    justify-content:center;

    flex-wrap:wrap;

}



.calendar-dates time,
.wave-dates time{

    min-width:70px;

    height:55px;

}




/* ================= REQUIREMENT ================= */


.requirements-wrap{

    grid-template-columns:1fr!important;

}



.requirements-intro{

    padding:22px!important;

}



.requirements-intro h2{

    font-size:26px!important;

}



.requirements-grid{

    grid-template-columns:1fr!important;

}




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


.premium-cta .container{

    flex-direction:column;

    text-align:center;

    gap:20px;

}



.premium-cta h2{

    font-size:22px!important;

}



.premium-cta .btn-primary-premium{

    width:100%;

}




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


.footer-clean-grid{

    grid-template-columns:1fr!important;

    text-align:center;

}



.footer-clean-brand{

    justify-content:center;

    flex-direction:column;

}



.footer-clean-social{

    justify-content:center;

}



}




/* =====================================================
   SMALL PHONE
===================================================== */

@media(max-width:390px){


.brand-copy b{

    font-size:15px!important;

}


.admin-header-btn{

    padding:8px 10px!important;

}



.poster-hero-image{

    min-height:340px!important;

}



.premium-metrics .container{

    grid-template-columns:1fr!important;

}



.program-card-premium h2{

    font-size:23px!important;

}



.requirements-intro h2{

    font-size:22px!important;

}



}

/* Final top landing lock: keep hero CTA, summary cards, and partner logos tidy. */
body.public .poster-hero{
    padding-top:96px!important;
    padding-bottom:96px!important;
}

body.public .poster-hero-shell{
    width:min(1320px,calc(100% - 54px))!important;
}

body.public .poster-hero-image{
    width:100%!important;
    min-height:520px!important;
    max-height:640px!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    border-radius:32px!important;
}

body.public .poster-hero-actions{
    z-index:20!important;
    bottom:-58px!important;
    width:min(990px,calc(100% - 92px))!important;
    min-height:92px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:22px!important;
    padding:20px 28px!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.97)!important;
    box-shadow:0 22px 58px rgba(5,36,76,.15)!important;
}

body.public .poster-hero-actions b{
    max-width:520px!important;
    font-size:24px!important;
    line-height:1.18!important;
    white-space:normal!important;
}

body.public .poster-hero-actions nav{
    display:flex!important;
    gap:12px!important;
    justify-content:flex-end!important;
}

body.public .poster-hero-actions .btn{
    width:auto!important;
    min-width:160px!important;
    height:52px!important;
    border-radius:999px!important;
}

body.public .premium-metrics{
    margin-top:0!important;
    padding:0 0 66px!important;
}

body.public .premium-metrics > .container:first-child{
    width:min(1180px,calc(100% - 54px))!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:0!important;
    border-radius:28px!important;
    background:#fff!important;
    overflow:hidden!important;
}

body.public .premium-metrics article{
    min-height:150px!important;
    padding:24px 20px!important;
}

body.public .premium-metrics i{
    width:58px!important;
    height:58px!important;
    margin-bottom:14px!important;
}

body.public .premium-metrics strong{
    font-size:30px!important;
    line-height:1.08!important;
}

body.public .premium-metrics span{
    font-size:14px!important;
    line-height:1.35!important;
}

body.public .metrics-logo-strip{
    margin-top:20px!important;
}

@media(max-width:980px){
    body.public .poster-hero{
        padding-top:84px!important;
        padding-bottom:36px!important;
    }

    body.public .poster-hero-actions{
        position:relative!important;
        left:auto!important;
        bottom:auto!important;
        transform:none!important;
        width:min(100% - 26px,990px)!important;
        margin:-34px auto 28px!important;
        grid-template-columns:1fr!important;
        text-align:center!important;
    }

    body.public .poster-hero-actions nav{
        width:100%!important;
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
    }

    body.public .poster-hero-actions .btn{
        width:100%!important;
        min-width:0!important;
    }

    body.public .premium-metrics > .container:first-child{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}

@media(max-width:560px){
    body.public .poster-hero-shell{
        width:min(100% - 24px,1320px)!important;
    }

    body.public .poster-hero-image{
        min-height:380px!important;
        border-radius:24px!important;
    }

    body.public .poster-hero-actions{
        padding:18px!important;
        border-radius:20px!important;
    }

    body.public .poster-hero-actions b{
        font-size:20px!important;
    }

    body.public .poster-hero-actions nav{
        grid-template-columns:1fr!important;
    }

    body.public .premium-metrics > .container:first-child{
        width:min(100% - 24px,1180px)!important;
        grid-template-columns:1fr!important;
    }
}
/* Last rule: CTA sits below the poster, not on top of it. */
body.public .poster-hero{
    padding-bottom:54px!important;
}

body.public .poster-hero-actions{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    top:auto!important;
    transform:none!important;
    width:min(990px,calc(100% - 92px))!important;
    margin:34px auto 0!important;
}

body.public .premium-metrics{
    margin-top:0!important;
}

@media(max-width:980px){
    body.public .poster-hero-actions{
        width:min(100% - 26px,990px)!important;
        margin:24px auto 28px!important;
    }
}