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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Inter",sans-serif;
    color:#162b42;
    background:#f7fafc;
    line-height:1.8;
    overflow-x:hidden;
}

h1,
h2,
h3{
    font-family:"Plus Jakarta Sans",sans-serif;
    line-height:1.25;
}

p{
    color:#59697b;
    font-size:17px;
}

a{
    text-decoration:none;
}

button{
    font-family:inherit;
}

.container{
    width:min(1180px,92%);
    margin:auto;
}

.section{
    padding:110px 0;
}


/* =====================================================
EYEBROW
===================================================== */

.eyebrow{
    display:inline-block;
    margin-bottom:16px;
    color:#0789e8;
    font-size:13px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
}


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

.btn{
    min-height:57px;
    padding:0 29px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    font-size:16px;
    font-weight:800;
    transition:.3s ease;
}

.btn-primary{
    color:#fff;
    background:#078ce9;
    box-shadow:
        0 16px 35px rgba(7,140,233,.25);
}

.btn-primary:hover{
    transform:translateY(-4px);
    background:#0576c8;
}

.btn-outline{
    color:#fff;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
}

.btn-outline:hover{
    color:#092a49;
    background:#fff;
}

.btn-light{
    color:#092a49;
    background:#fff;
}


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

.popal-hero{
    position:relative;
    min-height:770px;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(25,177,255,.22),
            transparent 29%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(0,225,255,.11),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #03172c,
            #073d65 56%,
            #031321
        );
}

.hero-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(65px);
    pointer-events:none;
}

.hero-glow-one{
    width:470px;
    height:470px;
    right:-200px;
    top:-220px;
    background:rgba(0,175,255,.18);
}

.hero-glow-two{
    width:350px;
    height:350px;
    left:-190px;
    bottom:-200px;
    background:rgba(0,211,255,.12);
}

.water-wave{
    position:absolute;
    right:-120px;
    bottom:-260px;
    width:720px;
    height:720px;
    border-radius:50%;
    border:1px solid rgba(100,220,255,.12);
    box-shadow:
        0 0 0 70px rgba(100,220,255,.025),
        0 0 0 140px rgba(100,220,255,.02),
        0 0 0 210px rgba(100,220,255,.015);
}

.hero-content{
    position:relative;
    z-index:3;
    max-width:1020px;
    padding:100px 0;
}

.hero-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    margin-bottom:28px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:50px;
    color:#7fdcff;
    background:rgba(255,255,255,.06);
    font-size:13px;
    font-weight:800;
    letter-spacing:1.2px;
}

.hero-label span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#42d3ff;
    box-shadow:
        0 0 15px #42d3ff;
}

.hero-content h1{
    color:#fff;
    font-size:clamp(44px,6vw,73px);
    letter-spacing:-3px;
    margin-bottom:27px;
}

.hero-content h1 strong{
    display:block;
    color:#55d3ff;
}

.hero-content h1 em{
    display:block;
    color:#fff;
    font-style:normal;
    font-size:.56em;
    letter-spacing:7px;
    margin-top:14px;
}

.hero-description{
    max-width:900px;
    color:#ceddec;
    font-size:20px;
    line-height:1.85;
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:38px;
}

.hero-info{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    max-width:850px;
    margin-top:58px;
}

.hero-info div{
    padding:20px 23px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:17px;
    background:rgba(255,255,255,.055);
    backdrop-filter:blur(15px);
}

.hero-info span{
    display:block;
    color:#8ca8c0;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.2px;
}

.hero-info strong{
    display:block;
    margin-top:2px;
    color:#fff;
    font-size:19px;
}


/* =====================================================
TWO COLUMN
===================================================== */

.two-column{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:75px;
    align-items:center;
}


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

.intro-section{
    background:#fff;
}

.content h2,
.legal-intro h2,
.target-section h2{
    color:#10263f;
    font-size:clamp(35px,4vw,51px);
    letter-spacing:-1.7px;
    margin-bottom:25px;
}

.content p{
    margin-bottom:19px;
}


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

.visual-card{
    position:relative;
    min-height:520px;
    padding:45px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
    border-radius:30px;

    background:
        linear-gradient(
            145deg,
            rgba(5,69,110,.96),
            rgba(2,27,51,.98)
        );

    box-shadow:
        0 35px 80px rgba(5,42,72,.16);
}

.visual-card::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-180px;
    top:-180px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(73,212,255,.35),
            transparent 65%
        );
}

.water-icon{
    position:absolute;
    top:50px;
    right:50px;
    width:150px;
    height:150px;
}

.water-icon span{
    position:absolute;
    border:2px solid rgba(84,213,255,.45);
    border-radius:50%;
}

.water-icon span:nth-child(1){
    inset:0;
}

.water-icon span:nth-child(2){
    inset:22px;
}

.water-icon span:nth-child(3){
    inset:45px;
}

.visual-label{
    position:relative;
    z-index:2;
    color:#5bd5ff;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.5px;
}

.visual-card h3{
    position:relative;
    z-index:2;
    max-width:500px;
    margin:10px 0 15px;
    color:#fff;
    font-size:30px;
}

.visual-card p{
    position:relative;
    z-index:2;
    color:#c1d4e6;
}

.visual-line{
    position:relative;
    z-index:2;
    width:90px;
    height:4px;
    margin-top:27px;
    border-radius:5px;
    background:#4ed4ff;
}


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

.section-heading{
    max-width:800px;
    margin:0 auto 55px;
    text-align:center;
}

.section-heading h2{
    color:#10263f;
    font-size:clamp(35px,4vw,51px);
    letter-spacing:-1.7px;
    margin-bottom:18px;
}

.section-heading p{
    font-size:18px;
}


/* =====================================================
SCHEDULE
===================================================== */

.schedule-section{
    background:#f4f8fc;
}

.schedule-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.schedule-card{
    position:relative;
    padding:26px;
    border:1px solid #dfe8f1;
    border-radius:19px;
    background:#fff;
    transition:.3s ease;
    box-shadow:
        0 10px 30px rgba(18,55,88,.035);
}

.schedule-card:hover{
    transform:translateY(-6px);
    border-color:#9fd4f6;
    box-shadow:
        0 22px 50px rgba(10,83,132,.09);
}

.schedule-card span{
    display:block;
    color:#0789e8;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.2px;
}

.schedule-card strong{
    display:block;
    margin:7px 0;
    color:#152b44;
    font-size:19px;
}

.schedule-card small{
    color:#76869a;
}

.schedule-card.closed{
    opacity:.5;
}

.schedule-card.closed::after{
    content:"SELESAI";
    position:absolute;
    top:12px;
    right:12px;
    padding:4px 8px;
    border-radius:20px;
    color:#9d3e3e;
    background:#ffeded;
    font-size:9px;
    font-weight:800;
}


/* =====================================================
LEGAL
===================================================== */

.legal-section{
    background:#fff;
}

.legal-intro{
    align-self:center;
}

.legal-list{
    display:grid;
    gap:15px;
}

.legal-card{
    display:grid;
    grid-template-columns:45px 1fr;
    gap:17px;
    align-items:start;
    padding:25px;
    border:1px solid #dfe8f1;
    border-radius:18px;
    background:#fafcff;
}

.legal-card span{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:#0789e8;
    background:#e6f5ff;
    font-weight:800;
}

.legal-card p{
    font-size:15px;
}

.legal-note{
    padding:28px;
    border-left:4px solid #078ce9;
    border-radius:0 16px 16px 0;
    background:#eef8ff;
}

.legal-note strong{
    color:#102b49;
    font-size:20px;
}

.legal-note p{
    margin-top:8px;
    font-size:16px;
}


/* =====================================================
OBJECTIVE
===================================================== */

.objective-section{
    background:#f5f8fc;
}

.objective-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.objective-card{
    padding:31px;
    border:1px solid #dfe8f1;
    border-radius:21px;
    background:#fff;
    transition:.3s ease;
}

.objective-card:hover{
    transform:translateY(-5px);
    box-shadow:
        0 25px 50px rgba(12,55,90,.07);
}

.objective-card > span{
    display:flex;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    margin-bottom:19px;
    border-radius:13px;
    color:#0789e8;
    background:#e8f5ff;
    font-weight:800;
}

.objective-card h3{
    margin-bottom:9px;
    color:#182d45;
    font-size:20px;
}

.objective-card p{
    font-size:16px;
}


/* =====================================================
MATERIAL
===================================================== */

.material-section{
    background:#fff;
}

.material-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.material-list article{
    padding:30px;
    border:1px solid #dfe8f1;
    border-radius:20px;
    background:#f9fbfd;
    transition:.3s ease;
}

.material-list article:hover{
    transform:translateY(-5px);
    background:#fff;
    box-shadow:
        0 20px 45px rgba(15,55,90,.06);
}

.material-list article > span{
    display:flex;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    border-radius:12px;
    color:#0789e8;
    background:#e7f5ff;
    font-weight:800;
}

.material-list h3{
    margin-bottom:10px;
    color:#172d45;
    font-size:21px;
}

.material-list p{
    font-size:16px;
}


/* =====================================================
COMPETENCY
===================================================== */

.competency-section{
    background:#f4f8fc;
}

.competency-table{
    overflow:hidden;
    border:1px solid #dce7f0;
    border-radius:22px;
    background:#fff;
}

.table-head{
    display:grid;
    grid-template-columns:90px 220px 1fr;
    padding:20px 25px;
    background:#092c4d;
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
}

.table-row{
    display:grid;
    grid-template-columns:90px 220px 1fr;
    gap:15px;
    align-items:center;
    padding:25px;
    border-bottom:1px solid #e5ecf3;
}

.table-row:last-child{
    border-bottom:0;
}

.table-row > span{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:#0789e8;
    background:#e8f5ff;
    font-weight:800;
}

.table-row strong{
    color:#0789e8;
    font-size:14px;
}

.table-row p{
    color:#35475b;
    font-size:16px;
}


/* =====================================================
TARGET
===================================================== */

.target-section{
    background:#fff;
}

.target-section p{
    margin-bottom:18px;
}

.method-card{
    padding:40px;
    border-radius:27px;
    background:
        linear-gradient(
            145deg,
            #eff9ff,
            #fff
        );
    border:1px solid #dce8f2;
}

.method-card h3{
    margin-bottom:23px;
    font-size:27px;
}

.method-card ul{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.method-card li{
    list-style:none;
    color:#526276;
    font-size:16px;
}

.method-card li::before{
    content:"✓";
    display:inline-flex;
    width:27px;
    height:27px;
    align-items:center;
    justify-content:center;
    margin-right:9px;
    border-radius:50%;
    color:#0789e8;
    background:#e5f4ff;
    font-weight:800;
}


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

.requirement-section{
    background:#f5f8fc;
}

.requirements{
    max-width:1000px;
    margin:auto;
    display:grid;
    gap:15px;
}

.requirement-item{
    display:grid;
    grid-template-columns:48px 1fr;
    gap:20px;
    align-items:start;
    padding:27px;
    border:1px solid #dfe8f1;
    border-radius:18px;
    background:#fff;
}

.requirement-item span{
    width:43px;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:#0789e8;
    background:#e8f5ff;
    font-weight:800;
}

.requirement-item p{
    font-size:16px;
}


/* =====================================================
DOCUMENT
===================================================== */

.document-section{
    background:#fff;
}

.document-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.document-card{
    padding:29px;
    border:1px solid #dfe8f1;
    border-radius:19px;
    background:#fafcff;
}

.document-card > span{
    display:flex;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
    margin-bottom:17px;
    border-radius:12px;
    color:#0789e8;
    background:#e7f5ff;
    font-weight:800;
}

.document-card h3{
    color:#172d45;
    font-size:19px;
    margin-bottom:8px;
}

.document-card p{
    font-size:15px;
}


/* =====================================================
INVESTMENT
===================================================== */

.investment-section{
    padding:100px 0;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(35,190,255,.17),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #03182d,
            #08446d
        );
}

.investment-box{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:70px;
    align-items:center;
}

.investment-text h2{
    color:#fff;
    font-size:clamp(37px,4vw,53px);
    margin-bottom:15px;
}

.investment-text p{
    color:#c6d8e8;
    font-size:18px;
}

.included{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
}

.included span{
    padding:10px 14px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:30px;
    color:#d4e3ef;
    background:rgba(255,255,255,.05);
    font-size:13px;
}

.price-box{
    padding:40px;
    text-align:center;
    border:1px solid rgba(255,255,255,.13);
    border-radius:27px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(15px);
}

.price-box small{
    display:block;
    color:#92abc0;
}

.price-box strong{
    display:block;
    margin:9px 0;
    color:#5dd5ff;
    font-size:40px;
}

.price-box span{
    display:block;
    margin-bottom:25px;
    color:#adc2d5;
    font-size:14px;
}

.price-box .btn{
    width:100%;
}


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

.cta-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:#06192f;
}

.cta-light{
    position:absolute;
    width:600px;
    height:600px;
    top:-470px;
    left:50%;
    transform:translateX(-50%);
    border-radius:50%;
    background:rgba(23,164,255,.13);
    filter:blur(45px);
}

.cta-content{
    position:relative;
    z-index:2;
    max-width:900px;
    margin:auto;
    text-align:center;
}

.cta-content h2{
    color:#fff;
    font-size:clamp(37px,5vw,58px);
    letter-spacing:-2px;
    margin-bottom:20px;
}

.cta-content > p{
    color:#c2d4e5;
    font-size:18px;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-top:35px;
}

.contact-grid{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-top:45px;
}

.contact-grid div{
    padding:16px 20px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:14px;
    background:rgba(255,255,255,.05);
}

.contact-grid span{
    display:block;
    color:#8ba4bc;
    font-size:11px;
}

.contact-grid strong{
    color:#fff;
    font-size:14px;
}


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

.faq-section{
    background:#fff;
}

.faq{
    max-width:900px;
    margin:auto;
}

.faq-item{
    border-bottom:1px solid #dfe7ef;
}

.faq-question{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:25px 0;
    border:0;
    outline:0;
    background:none;
    color:#142941;
    text-align:left;
    cursor:pointer;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:18px;
    font-weight:700;
}

.faq-question span{
    color:#0789e8;
    font-size:27px;
    transition:.3s;
}

.faq-answer{
    display:none;
    padding:0 50px 25px 0;
}

.faq-answer p{
    font-size:17px;
}

.faq-item.active .faq-answer{
    display:block;
}

.faq-item.active .faq-question span{
    transform:rotate(45deg);
}


/* =====================================================
REVEAL
===================================================== */

.reveal{
    opacity:0;
    transform:translateY(25px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal.show{
    opacity:1;
    transform:translateY(0);
}


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

@media(max-width:1050px){

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

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

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

}

@media(max-width:850px){

    .two-column{
        grid-template-columns:1fr;
    }

    .investment-box{
        grid-template-columns:1fr;
    }

    .price-box{
        width:100%;
    }

    .competency-table{
        overflow-x:auto;
    }

    .table-head,
    .table-row{
        min-width:750px;
    }

}

@media(max-width:650px){

    .section{
        padding:75px 0;
    }

    .popal-hero{
        min-height:auto;
    }

    .hero-content{
        padding:75px 0;
    }

    .hero-content h1{
        font-size:41px;
        letter-spacing:-1.7px;
    }

    .hero-description{
        font-size:17px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

    .hero-info{
        grid-template-columns:1fr;
    }

    .schedule-grid,
    .objective-grid,
    .material-list,
    .document-grid{
        grid-template-columns:1fr;
    }

    .visual-card{
        min-height:430px;
        padding:30px;
    }

    .visual-card h3{
        font-size:25px;
    }

    .method-card{
        padding:30px 25px;
    }

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

    .investment-box{
        gap:40px;
    }

    .price-box strong{
        font-size:32px;
    }

    .cta-buttons{
        flex-direction:column;
    }

    .contact-grid{
        flex-direction:column;
    }

}