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

.hero{

    position:relative;

    overflow:hidden;

    padding:
        clamp(48px,6vw,80px)
        0
        clamp(70px,8vw,110px);

}

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

.hero-wrapper{

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

    margin:0 auto;

    display:grid;

    grid-template-columns:
        360px
        minmax(0,1fr);

    gap:36px;

    align-items:start;

}

/* =========================================================
   LEFT COLUMN
========================================================= */

.hero-authority{

    position:sticky;

    top:100px;

    align-self:start;

}

/* =========================================================
   RIGHT COLUMN
========================================================= */

.hero-main{

    display:flex;

    flex-direction:column;

    gap:36px;

    min-width:0;

}

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

.hero-header{

    display:flex;

    flex-direction:column;

    gap:18px;

}

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

.hero-media{

    display:grid;

    grid-template-columns:
        minmax(420px,1fr)
        300px;

    gap:24px;

    align-items:start;

}

/* =========================================================
   VIDEO GROUP
========================================================= */

.hero-video-group{

    display:flex;

    flex-direction:column;

    gap:20px;

}

/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description{

    display:flex;

    flex-direction:column;

    gap:24px;

}

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

.hero-info{

    display:grid;

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

    gap:16px;

}

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

.hero-steps{

    margin-top:12px;

}

/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (max-width:1280px){

    .hero-wrapper{

        grid-template-columns:
            320px
            minmax(0,1fr);

    }

    .hero-media{

        grid-template-columns:
            1fr
            280px;

    }

}

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

@media (max-width:1024px){

    .hero-wrapper{

        grid-template-columns:1fr;

    }

    .hero-authority{

        position:relative;

        top:auto;

        max-width:420px;

        width:100%;

        margin:0 auto;

    }

    .hero-media{

        grid-template-columns:1fr;

    }

}

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

@media (max-width:768px){

    .hero{

        padding:32px 0 50px;

    }

    .hero-wrapper{

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

        gap:28px;

    }

    .hero-main{

        gap:28px;

    }

    .hero-info{

        grid-template-columns:1fr;

    }

}

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

@media (max-width:480px){

    .hero{

        padding:24px 0 40px;

    }

    .hero-wrapper{

        width:calc(100% - 20px);

    }

}

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

.hero-header{

    display:flex;

    flex-direction:column;

    gap:22px;

    margin-bottom:6px;

}

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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    padding:10px 18px;

    border-radius:999px;

    background:
        rgba(34,197,94,.10);

    border:
        1px solid rgba(34,197,94,.18);

    color:#22c55e;

    font-size:13px;

    font-weight:700;

    letter-spacing:.04em;

}

.hero-badge i{

    font-size:15px;

}

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

.hero-title{

    margin:0;

    color:#ffffff;

    font-size:
        clamp(40px,5vw,62px);

    font-weight:900;

    line-height:1.1;

    letter-spacing:-1px;

}

/* =========================================================
   HERO TITLE HIGHLIGHT
========================================================= */

.hero-title span{

    display:block;

    margin-top:10px;

    color:#22c55e;

}

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

.hero-subtitle{

    max-width:820px;

    margin:0;

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

    font-size:
        clamp(18px,2vw,21px);

    line-height:1.9;

}

/* =========================================================
   HERO SUBTITLE STRONG
========================================================= */

.hero-subtitle strong{

    color:#ffffff;

    font-weight:700;

}

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

@media (max-width:992px){

    .hero-header{

        gap:18px;

    }

    .hero-title{

        font-size:48px;

    }

    .hero-subtitle{

        font-size:18px;

    }

}

@media (max-width:768px){

    .hero-badge{

        width:100%;

        justify-content:center;

        text-align:center;

    }

    .hero-title{

        font-size:40px;

    }

    .hero-subtitle{

        font-size:17px;

        line-height:1.8;

    }

}

@media (max-width:480px){

    .hero-title{

        font-size:34px;

    }

    .hero-subtitle{

        font-size:16px;

    }

}

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

.profile-card{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:26px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.03)
        );

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

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 16px 40px rgba(0,0,0,.20);

}

/* =========================================================
   PHOTO
========================================================= */

.img-block{

    overflow:hidden;

    border-radius:22px;

    aspect-ratio:4/5;

    background:#0f172a;

}

.img-block img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}

/* =========================================================
   STATUS
========================================================= */

.profile-status{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:12px 18px;

    border-radius:999px;

    background:
        rgba(34,197,94,.10);

    border:
        1px solid rgba(34,197,94,.20);

    color:#22c55e;

    font-size:13px;

    font-weight:700;

    text-align:center;

}

.profile-status i{

    font-size:15px;

}

/* =========================================================
   CERTIFICATE
========================================================= */

.cert-block{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px;

    border-radius:20px;

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

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

}

.cert-block img{

    width:72px;

    height:72px;

    object-fit:cover;

    border-radius:14px;

    flex-shrink:0;

}

.cert-content{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.cert-label{

    font-size:14px;

    font-weight:700;

    color:#ffffff;

}

.cert-content small{

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

    line-height:1.6;

}

/* =========================================================
   FEATURES
========================================================= */

.profile-features{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.pf-item{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:16px;

    border-radius:18px;

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

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

    transition:.25s;

}

.pf-item:hover{

    border-color:
        rgba(34,197,94,.18);

    transform:translateY(-2px);

}

.pf-icon{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:
        rgba(34,197,94,.10);

    color:#22c55e;

    flex-shrink:0;

    font-size:20px;

}

.pf-content{

    flex:1;

}

.pf-content h4{

    margin:0 0 6px;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

}

.pf-content p{

    margin:0;

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

    font-size:13px;

    line-height:1.6;

}

/* =========================================================
   PRESTASI
========================================================= */

.pf-prestasi{

    cursor:pointer;

}

/* =========================================================
   FREE BANNER
========================================================= */

.free-banner{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:18px;

    border-radius:18px;

    background:

        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );

    color:#ffffff;

    font-size:32px;

    font-weight:900;

    letter-spacing:.18em;

}

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

@media(max-width:992px){

    .profile-card{

        max-width:430px;

        margin:auto;

    }

}

@media(max-width:768px){

    .profile-card{

        padding:22px;

    }

    .img-block{

        aspect-ratio:3/4;

    }

    .free-banner{

        font-size:28px;

    }

}

@media(max-width:480px){

    .profile-card{

        padding:18px;

        border-radius:22px;

    }

    .cert-block{

        flex-direction:column;

        text-align:center;

    }

    .cert-content{

        align-items:center;

    }

    .pf-item{

        padding:14px;

    }

}

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

.hero-media{

    display:grid;

    grid-template-columns:

        minmax(420px,1fr)

        320px;

    gap:24px;

    align-items:start;

}

/* =========================================================
   POSTER
========================================================= */

.hero-image-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    background:#101827;

    border:

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

    box-shadow:

        0 16px 38px rgba(0,0,0,.22);

}

.hero-image{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}

/* =========================================================
   VIDEO GROUP
========================================================= */

.hero-video-group{

    display:grid;

    grid-template-rows:

        auto
        auto
        auto;

    gap:18px;

}

/* =========================================================
   VIDEO
========================================================= */

.hero-video-wrapper{

    overflow:hidden;

    border-radius:20px;

    background:#111827;

    border:

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

    box-shadow:

        0 8px 22px rgba(0,0,0,.18);

}

.hero-video-wrapper video{

    display:block;

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    background:#000;

}

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

.hero-cta-buttons{

    display:flex;

    flex-direction:column;

    gap:18px;

    padding:22px;

    border-radius:20px;

    background:

        rgba(255,255,255,.04);

    border:

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

    box-shadow:

        0 8px 20px rgba(0,0,0,.16);

}

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

.cta-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:999px;

    background:

        rgba(34,197,94,.10);

    color:#4ade80;

    font-size:13px;

    font-weight:800;

    text-align:center;

}

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

.cta-text{

    margin:0;

    color:

        rgba(255,255,255,.72);

    font-size:14px;

    line-height:1.7;

}

/* =========================================================
   CTA BUTTON GROUP
========================================================= */

.cta-actions{

    display:flex;

    flex-direction:column;

    gap:12px;

}

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

.cta-pill{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:52px;

    padding:14px 20px;

    border-radius:14px;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    transition:

        .25s ease;

}

/* PRIMARY */

.cta-pill.primary{

    background:#16a34a;

    color:#fff;

}

.cta-pill.primary:hover{

    background:#15803d;

}

/* SECONDARY */

.cta-pill.secondary{

    background:

        rgba(255,255,255,.05);

    border:

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

    color:#fff;

}

.cta-pill.secondary:hover{

    background:

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

}

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

@media (max-width:1100px){

    .hero-media{

        grid-template-columns:1fr;

    }

}

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

@media (max-width:768px){

    .hero-video-group{

        gap:16px;

    }

    .hero-cta-buttons{

        padding:18px;

    }

}

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

.hero-description{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.hero-divider{

    width:80px;

    height:4px;

    border-radius:999px;

    background:#22c55e;

}

.hero-desc-wrapper{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.hero-desc{

    margin:0;

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

    font-size:17px;

    line-height:1.9;

}

.hero-desc strong{

    color:#ffffff;

    font-weight:700;

}

.hero-desc a{

    color:#22c55e;

    text-decoration:none;

    font-weight:700;

}

.hero-desc a:hover{

    text-decoration:underline;

}


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

.hero-info{

    display:grid;

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

    gap:18px;

}

.hero-info-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:22px;

    border-radius:22px;

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

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

    transition:.25s;

}

.hero-info-item:hover{

    transform:translateY(-3px);

    border-color:rgba(34,197,94,.20);

}

.hero-info-icon{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:rgba(34,197,94,.12);

    color:#22c55e;

    font-size:24px;

    flex-shrink:0;

}

.hero-info-content{

    flex:1;

}

.hero-info-content h4{

    margin:0 0 8px;

    color:#ffffff;

    font-size:18px;

    font-weight:700;

}

.hero-info-content p{

    margin:0;

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

    line-height:1.7;

    font-size:15px;

}


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

.hero-steps{

    display:flex;

    flex-direction:column;

    gap:28px;

    margin-top:10px;

}

.steps-heading{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.steps-heading h2{

    margin:0;

    color:#ffffff;

    font-size:34px;

    font-weight:800;

}

.steps-heading p{

    margin:0;

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

    font-size:17px;

    line-height:1.8;

}


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

.steps-grid{

    display:grid;

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

    gap:18px;

}


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

.hero-step{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:24px;

    border-radius:24px;

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

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

    transition:.25s;

}

.hero-step:hover{

    transform:translateY(-4px);

    border-color:rgba(34,197,94,.20);

}


/* =========================================================
   STEP NUMBER
========================================================= */

.step-number{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#22c55e;

    color:#ffffff;

    font-size:22px;

    font-weight:800;

    flex-shrink:0;

}


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

.step-content{

    flex:1;

}

.step-content h3{

    margin:0 0 10px;

    color:#ffffff;

    font-size:19px;

    font-weight:700;

}

.step-content p{

    margin:0;

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

    line-height:1.8;

    font-size:15px;

}


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

@media(max-width:992px){

    .hero-info{

        grid-template-columns:1fr;

    }

    .steps-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .hero-desc{

        font-size:16px;

    }

    .hero-info-item{

        padding:18px;

    }

    .hero-step{

        padding:20px;

    }

    .steps-heading h2{

        font-size:28px;

    }

}

@media(max-width:480px){

    .hero-info-item{

        flex-direction:column;

        text-align:center;

    }

    .hero-info-icon{

        margin:auto;

    }

    .hero-step{

        flex-direction:column;

        text-align:center;

    }

    .step-number{

        margin:auto;

    }

}