:root{
    --yellow:#facc15;
    --navy:#0f172a;
    --green:#16a34a;
    --blue:#1683e8;
    --pink:#ec1980;
    --purple:#8b35e8;
    --teal:#18aaa5;
    --orange:#f97316;
    --muted:#64748b;
    --line:#e5e7eb;
    --white:#fff;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    max-width:100%;
    overflow-x:hidden;
}

body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--navy);
    background:#fff;
    max-width:100%;
    overflow-x:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

.wrap{
    width:min(1180px,92%);
    margin-left:auto;
    margin-right:auto;
}


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

.header{
    background:#fff;
    border-bottom:1px solid #edf0f3;
    position:sticky;
    top:0;
    z-index:1000;
}

.nav{
    min-height:74px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-width:0;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    max-width:360px;
    flex:0 1 auto;
}

.school-logo{
    width:44px;
    height:44px;
    display:block;
    object-fit:contain;
    object-position:center;
    flex:0 0 44px;
    border-radius:0;
    background:transparent;
}

.logo-text b{
    display:block;
    font-size:18px;
    line-height:1.05;
}

.logo-text small{
    display:block;
    font-weight:700;
    font-size:10px;
    margin-top:4px;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:20px;
    font-size:13px;
    font-weight:800;
    flex:0 1 auto;
    min-width:0;
    white-space:nowrap;
}

.nav-links a.active{
    border-bottom:3px solid var(--yellow);
    padding-bottom:7px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 18px;
    border-radius:12px;
    border:1px solid #cbd5e1;
    font-weight:900;
    cursor:pointer;
}

.btn-yellow{
    background:var(--yellow);
    border-color:var(--yellow);
}

.btn-white{
    background:#fff;
}

.btn-outline{
    background:#fff;
    border-color:#94a3b8;
}

.mobile-menu-toggle,
.mobile-nav-panel{
    display:none;
}


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

.hero{
    background:linear-gradient(90deg,#f6fbff,#eef9ff);
    overflow:hidden;
}

.hero-inner{
    min-height:480px;
    display:grid;
    grid-template-columns:42% 58%;
    align-items:center;
    min-width:0;
}

.hero-copy{
    text-align:left;
    padding:60px 0 42px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    z-index:2;
}

.badge{
    display:inline-block;
    width:max-content;
    background:var(--yellow);
    padding:9px 16px;
    border-radius:999px;
    font-size:14px;
    font-weight:900;
}

.hero h1{
    font-size:64px;
    line-height:.9;
    letter-spacing:-2.8px;
    margin:16px 0 12px;
}

.hero h1 span{
    display:block;
    font-size:30px;
    letter-spacing:-.6px;
    margin-top:7px;
}

.hero p{
    font-size:18px;
    line-height:1.45;
    margin:0 0 22px;
    max-width:500px;
}

.hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.hero-trust{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-top:17px;
    font-size:12px;
    font-weight:800;
    color:#334155;
}

.hero-trust span{
    display:flex;
    align-items:center;
    gap:6px;
}

.check{
    width:18px;
    height:18px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#0f766e;
    color:#fff;
    font-size:11px;
    font-style:normal;
}

.hero-art{
    min-height:0;
    width:100%;
    max-height:440px;
    aspect-ratio:1097 / 560;
    position:relative;
    overflow:hidden;
    background:#dff2ff;
    align-self:center;
}

.hero-people{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center;
    background:#dff2ff;
}


/* =====================================================
   LOWER SECTIONS
===================================================== */

.section{
    padding:20px 0;
}

.section-title{
    text-align:center;
    margin-bottom:12px;
}

.section-title h2{
    font-size:24px;
    margin:0 0 5px;
}

.section-title p{
    font-size:12px;
    color:var(--muted);
    margin:0;
}


/* =====================================================
   UNIT
===================================================== */

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

.unit{
    height:160px;
    border-radius:14px;
    overflow:hidden;
    display:grid;
    grid-template-columns:47% 53%;
    align-items:stretch;
    border:1px solid #e5e7eb;
}

.unit-img{
    height:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
}

.unit-img img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}

.unit-info{
    padding:27px 10px 12px 2px;
}

.unit-info h3{
    font-size:19px;
    line-height:.98;
    margin:0 0 7px;
}

.unit-info p{
    font-size:11px;
    margin:0 0 10px;
}

.unit-info .btn{
    padding:7px 11px;
    font-size:11px;
    border:0;
}

.unit1{
    background:#fff5d5;
}

.unit2{
    background:#ddf8e6;
}

.unit3{
    background:#e1efff;
}

.unit4{
    background:#ffe3f0;
}

.unit1 .btn{
    background:#fbbf24;
}

.unit2 .btn{
    background:#22c55e;
    color:#fff;
}

.unit3 .btn{
    background:#1683e8;
    color:#fff;
}

.unit4 .btn{
    background:#ec1980;
    color:#fff;
}


/* =====================================================
   WHY
===================================================== */

.why{
    background:#fff9df;
}

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

.why-item{
    display:grid;
    grid-template-columns:46px 1fr;
    gap:9px;
    align-items:start;
}

.why-icon{
    width:46px;
    height:46px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:21px;
}

.why-item h3{
    font-size:13px;
    margin:2px 0 4px;
}

.why-item p{
    font-size:10px;
    line-height:1.35;
    margin:0;
    color:#475569;
}


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

.flow{
    padding-top:5px;
}

.flow-grid{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:5px;
}

.flow-item{
    text-align:center;
    position:relative;
}

.flow-item:not(:last-child):after{
    content:"→";
    position:absolute;
    right:-9px;
    top:21px;
    color:#94a3b8;
    font-weight:900;
}

.flow-icon{
    width:42px;
    height:42px;
    margin:0 auto 7px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:900;
}

.flow-item:nth-child(1) .flow-icon{
    background:#fbbf24;
}

.flow-item:nth-child(2) .flow-icon{
    background:#22a84f;
}

.flow-item:nth-child(3) .flow-icon{
    background:#1683e8;
}

.flow-item:nth-child(4) .flow-icon{
    background:#9137e8;
}

.flow-item:nth-child(5) .flow-icon{
    background:#ec1980;
}

.flow-item:nth-child(6) .flow-icon{
    background:#f97316;
}

.flow-item:nth-child(7) .flow-icon{
    background:#18aaa5;
}

.flow-item:nth-child(8) .flow-icon{
    background:#1683e8;
}

.flow-item b{
    display:block;
    font-size:11px;
}

.flow-item span{
    display:block;
    color:#64748b;
    font-size:9px;
    line-height:1.2;
    margin-top:3px;
}


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

.two-col{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:16px;
    width:100%;
}

.panel{
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    padding:16px;
    width:100%;
    min-width:0;
}

.panel-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}

.panel-title h2{
    font-size:20px;
    margin:0;
}

.panel-title a{
    font-size:10px;
    color:#1683e8;
    font-weight:900;
}

.tabs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:4px;
    margin-bottom:7px;
}

.tab{
    padding:7px;
    border-radius:8px;
    text-align:center;
    background:#f1f5f9;
    font-size:10px;
    font-weight:900;
}

.tab.active{
    background:var(--yellow);
}

table{
    width:100%;
    border-collapse:collapse;
    font-size:10px;
}

th,
td{
    padding:7px 8px;
    border-bottom:1px solid #eef2f7;
    text-align:left;
}

th{
    font-weight:900;
    background:#f8fafc;
}


/* =====================================================
   NEWS
===================================================== */

.news{
    display:grid;
    gap:7px;
}

.news-item{
    display:grid;
    grid-template-columns:88px 1fr;
    gap:8px;
    border:1px solid #edf0f3;
    border-radius:10px;
    padding:6px;
}

.news-thumb{
    width:88px;
    height:52px;
    border-radius:7px;
    display:grid;
    place-items:center;
    font-weight:900;
    color:#fff;
    font-size:18px;
}

.news-blue{
    background:linear-gradient(135deg,#1683e8,#60a5fa);
}

.news-green{
    background:linear-gradient(135deg,#16a34a,#86efac);
}

.news-pink{
    background:linear-gradient(135deg,#ec1980,#f9a8d4);
}

.tag{
    display:inline-block;
    font-size:8px;
    color:#fff;
    border-radius:4px;
    padding:2px 5px;
    font-weight:900;
}

.news-item b{
    font-size:11px;
    display:block;
    margin-top:3px;
}

.news-item small{
    font-size:9px;
    color:var(--muted);
}


/* =====================================================
   STATS
===================================================== */

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

.stat{
    border-radius:13px;
    padding:12px;
    background:#fff4cf;
    border:1px solid #f3e4a8;
    display:flex;
    gap:10px;
    align-items:center;
}

.stat:nth-child(2){
    background:#e5faee;
}

.stat:nth-child(3){
    background:#e8f2ff;
}

.stat:nth-child(4){
    background:#ffe7f1;
}

.stat-icon{
    width:38px;
    height:38px;
    border-radius:10px;
    background:#fff;
    display:grid;
    place-items:center;
    font-size:18px;
}

.stat strong{
    font-size:21px;
    display:block;
}

.stat span{
    font-size:10px;
    color:#475569;
}


/* =====================================================
   JADWAL + FAQ CONTAINER
===================================================== */

.schedule-faq-grid{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
    gap:16px;
    align-items:start;
}

.schedule-faq-grid > .panel{
    width:100%;
    min-width:0;
    height:auto;
    align-self:start;
}


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

.faq-panel{
    width:100%;
}

.faq-panel .section-title{
    text-align:left;
    margin-bottom:16px;
}

.faq-panel .section-title h2{
    font-size:28px;
    line-height:1.15;
}

.faq-panel .faq-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.faq-panel .faq-item{
    width:100%;
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
    overflow:hidden;
    box-sizing:border-box;
    height:max-content;
}

.faq-panel .faq-question{
    appearance:none;
    -webkit-appearance:none;

    width:100%;
    margin:0;
    border:0;
    outline:none;

    background:#fff;

    padding:18px 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    text-align:left;

    font-family:inherit;
    font-size:16px;
    font-weight:800;
    line-height:1.4;

    color:#111827;

    cursor:pointer;
}

.faq-panel .faq-question:hover{
    background:#fffdf5;
}

.faq-panel .faq-question:focus{
    outline:none;
}

.faq-panel .faq-question b{
    flex:0 0 auto;
    font-size:24px;
    line-height:1;
    font-weight:500;
    color:#15803d;
}

.faq-panel .faq-answer{
    display:none !important;
    padding:0 20px 20px;
    color:#4b5563;
    font-size:15px;
    line-height:1.7;
    box-sizing:border-box;
}

.faq-panel .faq-item.open .faq-answer{
    display:block !important;
}

.faq-panel .faq-answer p{
    margin:0 0 12px;
}

.faq-panel .faq-answer p:last-child{
    margin-bottom:0;
}

.faq-panel .faq-answer ol{
    margin:10px 0 0 22px;
    padding:0;
}

.faq-panel .faq-answer li{
    margin-bottom:7px;
}


/* =====================================================
   TABEL BIAYA FAQ
===================================================== */

.faq-cost-table-wrap{
    width:100%;
    overflow-x:auto;
    margin-top:4px;
}

.faq-cost-table{
    width:100%;
    min-width:650px;
    border-collapse:collapse;
    font-size:14px;
}

.faq-cost-table th,
.faq-cost-table td{
    padding:10px 12px;
    border:1px solid #e5e7eb;
    text-align:left;
    vertical-align:top;
}

.faq-cost-table th{
    background:#fef3c7;
    color:#111827;
    font-weight:800;
}

.faq-cost-table tr:nth-child(even) td{
    background:#fffdf5;
}


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

.cta{
    background:var(--yellow);
    position:relative;
    overflow:hidden;
    width:100%;
    margin-top:16px;
}

.cta-inner{
    min-height:125px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.cta h2{
    font-size:28px;
    line-height:1.1;
    margin:0 0 7px;
}

.cta p{
    font-size:13px;
    line-height:1.4;
    margin:0;
}

.cta .btn{
    flex:0 0 auto;
}


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

.footer{
    background:#063f34;
    color:#fff;
    width:100%;
    margin-top:16px;
}

.footer-inner{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:10px;
}

.footer-nav{
    display:flex;
    gap:13px;
    flex-wrap:wrap;
}

.footer small{
    color:#cbd5e1;
}


/* =====================================================
   RESPONSIVE LAPTOP / TABLET
===================================================== */

@media(max-width:1200px){

    .nav{
        gap:12px;
    }

    .nav-links{
        display:none;
    }

    .mobile-menu-toggle{
        display:block;
        margin-left:auto;
        width:46px;
        height:42px;
        border:1px solid #cbd5e1;
        border-radius:10px;
        background:#fff;
        font-size:24px;
        font-weight:900;
        color:var(--navy);
    }

    .mobile-nav-panel{
        display:none;
        position:absolute;
        top:68px;
        left:12px;
        right:12px;
        background:#fff;
        border:1px solid #dbe3ee;
        border-radius:14px;
        padding:8px;
        box-shadow:0 15px 35px rgba(15,23,42,.14);
    }

    .mobile-nav-panel.is-open{
        display:flex;
        flex-direction:column;
    }

    .mobile-nav-panel a{
        padding:12px 14px;
        border-radius:9px;
        font-weight:800;
    }

    .mobile-nav-panel .mobile-register{
        background:var(--yellow);
        text-align:center;
    }

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

    .hero-copy{
        padding:38px 0 32px;
    }

    .hero h1{
        font-size:54px;
    }

    .hero h1 span{
        font-size:27px;
    }

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

    .schedule-faq-grid{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    }
}


@media(max-width:1000px){

    .logo{
        max-width:300px;
    }

    .school-logo{
        width:40px;
        height:40px;
        flex-basis:40px;
    }

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

    .hero-copy{
        padding:42px 0 20px;
        align-items:flex-start;
    }

    .hero-art{
        max-height:none;
        min-height:360px;
    }

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

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

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

    .flow-item:not(:last-child):after{
        display:none;
    }

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

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


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

@media(max-width:800px){

    .wrap{
        width:92%;
    }

    .nav{
        min-height:66px;
        justify-content:space-between;
    }

    .logo{
        max-width:calc(100% - 52px);
        margin:0;
    }

    .school-logo{
        width:38px;
        height:38px;
        flex-basis:38px;
    }

    .logo-text b{
        font-size:14px;
    }

    .logo-text small{
        font-size:8px;
    }

    .mobile-nav-panel{
        top:66px;
    }

    .hero-copy{
        padding:28px 0 16px;
        align-items:center;
        text-align:center;
    }

    .hero h1{
        width:100%;
        font-size:44px;
        line-height:.94;
        letter-spacing:-2px;
    }

    .hero h1 span{
        display:block;
        font-size:25px;
        margin-top:6px;
    }

    .badge{
        font-size:13px;
        padding:8px 15px;
    }

    .hero p{
        font-size:17px;
        line-height:1.45;
        max-width:390px;
    }

    .hero-actions{
        width:100%;
        max-width:380px;
        display:flex;
        flex-direction:column;
        gap:10px;
    }

    .hero-actions .btn{
        width:100%;
        min-height:52px;
    }

    .mobile-login-hero{
        display:flex !important;
    }

    .hero-trust{
        justify-content:center;
        gap:10px;
        font-size:10px;
        max-width:390px;
    }

    .hero-art{
        min-height:0;
        height:auto;
        aspect-ratio:16/10;
        width:100%;
        border-radius:14px;
    }

    .hero-people{
        object-fit:contain;
        object-position:center;
    }

    .unit-grid{
        grid-template-columns:1fr;
    }

    .unit{
        height:155px;
    }

    .why-grid{
        grid-template-columns:1fr;
    }

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

    .stats{
        grid-template-columns:1fr;
    }


    /* Jadwal + FAQ menjadi satu kolom */
    .schedule-faq-grid{
        grid-template-columns:1fr;
        gap:14px;
    }


    /* FAQ mobile */
    .faq-panel .section-title h2{
        font-size:24px;
    }

    .faq-panel .faq-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .faq-panel .faq-question{
        padding:16px;
        font-size:15px;
        line-height:1.4;
    }

    .faq-panel .faq-question b{
        font-size:22px;
    }

    .faq-panel .faq-answer{
        padding:0 16px 17px;
        font-size:14px;
        line-height:1.65;
    }

    .faq-cost-table{
        min-width:650px;
    }


    /* CTA mobile */
    .cta{
        margin-top:14px;
    }

    .cta-inner{
        min-height:0;
        padding:30px 0;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:18px;
    }

    .cta h2{
        font-size:24px;
    }

    .cta p{
        font-size:12px;
    }

    .cta .btn{
        width:100%;
        max-width:260px;
    }


    /* Footer mobile */
    .footer{
        margin-top:14px;
    }

    .footer-inner{
        flex-direction:column;
        gap:10px;
        padding:18px 0;
        text-align:center;
    }

    .footer-nav{
        flex-wrap:wrap;
        justify-content:center;
    }
}


@media(max-width:400px){

    .logo-text b{
        font-size:14px;
    }

    .logo-text small{
        font-size:8px;
    }

    .school-logo{
        width:38px;
        height:38px;
        flex-basis:38px;
    }

    .hero h1{
        font-size:39px;
    }

    .hero h1 span{
        font-size:23px;
    }

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

}

/* =========================================================
   FINAL FIX — JADWAL + FAQ + CTA + FOOTER
   ========================================================= */

/* ---------- JADWAL + FAQ ---------- */

.schedule-faq-grid{
    width:92%;
    max-width:1180px;
    margin:0 auto 16px;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;

    gap:16px !important;

    align-items:start;

    box-sizing:border-box;
}

.schedule-faq-grid > .panel{
    width:100%;
    min-width:0;
    box-sizing:border-box;
}


/* ---------- JADWAL ---------- */

.schedule-faq-grid .panel{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    overflow:hidden;
}

.schedule-faq-grid .panel-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px 10px;
}

.schedule-faq-grid .panel-title h2{
    margin:0;
    font-size:20px;
    line-height:1.2;
}

.schedule-faq-grid .panel-title a{
    color:#1683e8;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}


/* ---------- TAB JADWAL ---------- */

.schedule-faq-grid .tabs{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    padding:0 12px 8px;
}

.schedule-faq-grid .tab{
    min-width:0;
    padding:9px 6px;
    border-radius:9px;
    background:#eef2f7;
    text-align:center;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
    white-space:nowrap;
}

.schedule-faq-grid .tab.active{
    background:#facc15;
    color:#111827;
}


/* ---------- TABEL JADWAL ---------- */

.schedule-faq-grid table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

.schedule-faq-grid th,
.schedule-faq-grid td{
    padding:8px 10px;
    border-bottom:1px solid #edf0f3;
    text-align:left;
    vertical-align:middle;
    font-size:11px;
}

.schedule-faq-grid th{
    background:#f8fafc;
    font-weight:900;
}

.schedule-faq-grid td strong{
    font-weight:800;
}


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

.faq-panel{
    min-width:0;
}

.faq-panel .section-title{
    margin:0;
    padding:14px 16px 10px;
}

.faq-panel .section-title h2{
    margin:0;
    font-size:20px;
    line-height:1.2;
}


/* FAQ GRID — 2 kolom desktop */

.faq-panel .faq-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    padding:0 12px 12px;
}


/* ITEM */

.faq-panel .faq-item{
    width:100%;
    min-width:0;

    border:1px solid #e5e7eb;
    border-radius:14px;

    background:#fff;
    overflow:hidden;

    box-sizing:border-box;
}


/* PERTANYAAN */

.faq-panel .faq-question{
    width:100%;
    min-height:76px;

    margin:0;
    padding:16px 18px;

    border:0;
    outline:0;

    background:#fff;

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

    gap:15px;

    text-align:left;

    font-family:inherit;
    font-size:14px;
    font-weight:900;
    line-height:1.35;

    color:#111827;

    cursor:pointer;

    box-sizing:border-box;
}

.faq-panel .faq-question:hover{
    background:#fffdf5;
}

.faq-panel .faq-question span{
    flex:1;
}

.faq-panel .faq-question b{
    flex:0 0 auto;

    font-size:22px;
    line-height:1;

    font-weight:500;

    color:#15803d;
}


/* JAWABAN */

.faq-panel .faq-answer{
    display:none !important;

    padding:0 18px 18px;

    color:#4b5563;

    font-size:13px;
    line-height:1.65;

    box-sizing:border-box;
}

.faq-panel .faq-item.open .faq-answer{
    display:block !important;
}

.faq-panel .faq-answer p{
    margin:0 0 12px;
}

.faq-panel .faq-answer p:last-child{
    margin-bottom:0;
}

.faq-panel .faq-answer ol{
    margin:10px 0 0 20px;
    padding:0;
}

.faq-panel .faq-answer li{
    margin-bottom:6px;
}


/* =========================================================
   TABEL BIAYA
   ========================================================= */

.faq-cost-table-wrap{
    width:100%;
    overflow-x:auto;
    margin-top:4px;
}

.faq-cost-table{
    width:100%;
    min-width:650px;
    border-collapse:collapse;
    font-size:13px;
}

.faq-cost-table th,
.faq-cost-table td{
    padding:9px 10px;
    border:1px solid #e5e7eb;

    text-align:left;
    vertical-align:top;
}

.faq-cost-table th{
    background:#fef3c7;
    color:#111827;
    font-weight:900;
}

.faq-cost-table tr:nth-child(even) td{
    background:#fffdf5;
}


/* =========================================================
   CTA — HARUS FULL WIDTH
   ========================================================= */

.cta{
    width:100% !important;

    grid-column:1 / -1 !important;

    clear:both;

    background:#facc15;

    box-sizing:border-box;

    margin:16px 0 0 !important;

    position:relative;
    overflow:hidden;
}

.cta-inner{
    width:92%;
    max-width:1180px;

    min-height:135px;

    margin:0 auto;

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

    gap:40px;

    box-sizing:border-box;
}

.cta h2{
    margin:0 0 6px;
    font-size:25px;
    line-height:1.15;
}

.cta p{
    margin:0;
    font-size:13px;
    line-height:1.45;
}

.cta .btn{
    flex:0 0 auto;
}


/* =========================================================
   FOOTER — HARUS FULL WIDTH
   ========================================================= */

.footer{
    width:100% !important;

    grid-column:1 / -1 !important;

    clear:both;

    background:#063f34;
    color:#fff;

    box-sizing:border-box;

    margin:0 !important;
}

.footer-inner{
    width:92%;
    max-width:1180px;

    min-height:82px;

    margin:0 auto;

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

    gap:25px;

    box-sizing:border-box;
}

.footer-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:14px;
}

.footer-nav a{
    color:#fff;
    font-size:11px;
    font-weight:700;
}


/* =========================================================
   PENTING:
   jika CTA / FOOTER masih dianggap anak grid mana pun,
   paksa keluar secara visual menjadi satu baris penuh.
   ========================================================= */

.schedule-faq-grid + .cta{
    grid-column:1 / -1 !important;
    width:100% !important;
}

.cta + .footer{
    grid-column:1 / -1 !important;
    width:100% !important;
}


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

@media (max-width:900px){

    .schedule-faq-grid{
        width:92%;
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .faq-panel .faq-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .cta-inner{
        min-height:120px;
    }

}


/* =========================================================
   HP
   ========================================================= */

@media (max-width:600px){

    .schedule-faq-grid{
        width:92%;
        grid-template-columns:1fr !important;
        gap:12px !important;
        margin-bottom:12px;
    }

    .schedule-faq-grid .panel-title{
        padding:13px 14px 9px;
    }

    .schedule-faq-grid .panel-title h2{
        font-size:17px;
    }

    .schedule-faq-grid .panel-title a{
        font-size:10px;
    }

    .schedule-faq-grid .tabs{
        padding-left:10px;
        padding-right:10px;
    }

    .schedule-faq-grid .tab{
        font-size:9px;
        padding:8px 3px;
    }

    .schedule-faq-grid th,
    .schedule-faq-grid td{
        padding:7px 8px;
        font-size:9px;
    }


    /* FAQ HP tetap 1 kolom */

    .faq-panel .faq-grid{
        grid-template-columns:1fr !important;
        gap:10px !important;
        padding:0 10px 10px;
    }

    .faq-panel .section-title{
        padding:13px 14px 9px;
    }

    .faq-panel .section-title h2{
        font-size:19px;
    }

    .faq-panel .faq-question{
        min-height:64px;
        padding:15px 16px;
        font-size:14px;
    }

    .faq-panel .faq-answer{
        padding:0 16px 16px;
        font-size:13px;
    }


    /* CTA HP */

    .cta{
        margin-top:14px !important;
    }

    .cta-inner{
        width:92%;
        min-height:145px;

        padding:25px 0;

        flex-direction:column;

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

        gap:18px;
    }

    .cta h2{
        font-size:22px;
    }

    .cta p{
        font-size:12px;
    }

    .cta .btn{
        align-self:flex-start;
    }


    /* FOOTER HP */

    .footer-inner{
        width:92%;

        min-height:auto;

        padding:20px 0;

        flex-direction:column;

        text-align:center;

        gap:14px;
    }

    .footer-nav{
        gap:10px;
    }

}

/* =========================================================
   FINAL ALIGNMENT — JADWAL + FAQ FULL WIDTH
   ========================================================= */

/* Desktop: jadwal + FAQ memenuhi seluruh lebar halaman */
@media (min-width: 901px){

    .schedule-faq-grid{
        width:100vw !important;
        max-width:none !important;

        margin-left:calc(50% - 50vw) !important;
        margin-right:calc(50% - 50vw) !important;

        padding-left:22px !important;
        padding-right:22px !important;

        box-sizing:border-box !important;

        display:grid !important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;

        gap:16px !important;

        margin-top:16px !important;
        margin-bottom:16px !important;
    }


    /* Jadwal dan FAQ sama tinggi secara visual */
    .schedule-faq-grid > .panel{
        width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }


    /* Judul */
    .schedule-faq-grid .panel-title{
        min-height:48px;
        box-sizing:border-box;
    }


    .schedule-faq-grid .panel-title h2,
    .faq-panel .section-title h2{
        font-size:20px !important;
    }


    /* FAQ */
    .faq-panel .faq-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }


    /* Tinggi kartu FAQ dibuat lebih proporsional */
    .faq-panel .faq-question{
        min-height:72px;
    }
}


/* =========================================================
   CTA — JARAK DENGAN JADWAL + FAQ
   ========================================================= */

@media (min-width:901px){

    .schedule-faq-grid + .cta{
        margin-top:0 !important;
    }

    .cta-inner{
        width:92% !important;
        max-width:1180px !important;
        min-height:125px !important;

        margin-left:auto !important;
        margin-right:auto !important;

        justify-content:space-between !important;
        gap:30px !important;
    }

}


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

@media (min-width:901px){

    .footer-inner{
        width:92% !important;
        max-width:1180px !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }

}


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

@media (min-width:601px) and (max-width:900px){

    .schedule-faq-grid{
        width:92% !important;
        max-width:none !important;

        margin-left:auto !important;
        margin-right:auto !important;

        grid-template-columns:1fr !important;
    }

}


/* =========================================================
   HP
   ========================================================= */

@media (max-width:600px){

    .schedule-faq-grid{
        width:92% !important;
        max-width:none !important;

        margin-left:auto !important;
        margin-right:auto !important;

        padding-left:0 !important;
        padding-right:0 !important;

        grid-template-columns:1fr !important;

        gap:12px !important;
    }

}

/* =========================================================
   FINAL FIX JADWAL + FAQ
   ========================================================= */

/* Desktop */
@media (min-width:901px){

    .schedule-faq-grid{
        width:100% !important;
        max-width:none !important;

        margin:16px 0 !important;

        padding:0 !important;

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr) !important;

        gap:16px !important;

        box-sizing:border-box !important;

        position:relative !important;
        left:auto !important;
        right:auto !important;
        transform:none !important;
    }


    /* Panel Jadwal */
    .schedule-faq-grid > .panel:first-child{

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;

        box-sizing:border-box !important;
    }


    /* Panel FAQ */
    .schedule-faq-grid > .faq-panel{

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;

        box-sizing:border-box !important;
    }


    /* Jadwal title */
    .schedule-faq-grid .panel-title{

        width:100%;

        box-sizing:border-box;
    }


    /* Tabel jadwal */
    .schedule-faq-grid table{

        width:100% !important;

        table-layout:fixed;

        box-sizing:border-box;
    }


    /* Kolom tabel */
    .schedule-faq-grid table th:first-child,
    .schedule-faq-grid table td:first-child{
        width:32%;
    }

    .schedule-faq-grid table th:nth-child(2),
    .schedule-faq-grid table td:nth-child(2){
        width:34%;
    }

    .schedule-faq-grid table th:nth-child(3),
    .schedule-faq-grid table td:nth-child(3){
        width:34%;
    }


    /* FAQ */
    .faq-panel .faq-grid{

        width:100% !important;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr) !important;

        box-sizing:border-box;
    }

}


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

@media (min-width:601px) and (max-width:900px){

    .schedule-faq-grid{

        width:100% !important;

        max-width:none !important;

        margin:14px 0 !important;

        padding:0 !important;

        grid-template-columns:1fr !important;

        gap:14px !important;

        position:relative !important;
        left:auto !important;

        transform:none !important;
    }

}


/* =========================================================
   HP
   ========================================================= */

@media (max-width:600px){

    .schedule-faq-grid{

        width:100% !important;

        max-width:none !important;

        margin:12px 0 !important;

        padding:0 !important;

        grid-template-columns:1fr !important;

        gap:12px !important;

        position:relative !important;
        left:auto !important;

        transform:none !important;
    }


    .schedule-faq-grid > .panel,
    .schedule-faq-grid > .faq-panel{

        width:100% !important;

        margin:0 !important;

        min-width:0 !important;
    }


    .faq-panel .faq-grid{

        grid-template-columns:1fr !important;
    }

}

/* =========================================================
   FIX FINAL - JADWAL + FAQ
   ========================================================= */

/* DESKTOP */
@media (min-width: 901px) {

    .schedule-faq-grid {
        width: 92% !important;
        max-width: 1500px !important;

        margin: 18px auto 20px auto !important;
        padding: 0 !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 16px !important;

        box-sizing: border-box !important;

        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }


    /* PANEL JADWAL */
    .schedule-faq-grid > .panel:first-child {

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /* PANEL FAQ */
    .schedule-faq-grid > .faq-panel {

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /* TABEL JADWAL */
    .schedule-faq-grid table {

        width: 100% !important;

        table-layout: fixed !important;

        box-sizing: border-box !important;
    }


    .schedule-faq-grid table th,
    .schedule-faq-grid table td {

        box-sizing: border-box !important;
    }


    .schedule-faq-grid table th:first-child,
    .schedule-faq-grid table td:first-child {

        width: 32% !important;
    }


    .schedule-faq-grid table th:nth-child(2),
    .schedule-faq-grid table td:nth-child(2) {

        width: 34% !important;
    }


    .schedule-faq-grid table th:nth-child(3),
    .schedule-faq-grid table td:nth-child(3) {

        width: 34% !important;
    }


    /* FAQ 2 KOLOM */
    .schedule-faq-grid .faq-grid {

        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 10px !important;

        box-sizing: border-box !important;
    }

}


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

@media (min-width: 601px) and (max-width: 900px) {

    .schedule-faq-grid {

        width: 92% !important;
        max-width: 900px !important;

        margin: 15px auto !important;

        padding: 0 !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 14px !important;

        position: relative !important;
        left: auto !important;
        right: auto !important;

        transform: none !important;
    }


    .schedule-faq-grid > .panel,
    .schedule-faq-grid > .faq-panel {

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
    }

}


/* =========================================================
   HP
   ========================================================= */

@media (max-width: 600px) {

    .schedule-faq-grid {

        width: 92% !important;
        max-width: none !important;

        margin: 12px auto !important;

        padding: 0 !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 12px !important;

        position: relative !important;
        left: auto !important;
        right: auto !important;

        transform: none !important;
    }


    .schedule-faq-grid > .panel,
    .schedule-faq-grid > .faq-panel {

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
    }


    .schedule-faq-grid .faq-grid {

        width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 10px !important;
    }

}

/* =========================================================
   FINAL OVERRIDE — JADWAL + FAQ RAPI
   Jangan tambahkan aturan lain di bawah bagian ini.
   ========================================================= */

.schedule-faq-grid{
    width:92% !important;
    max-width:1500px !important;
    margin:18px auto 24px !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:16px !important;
    box-sizing:border-box !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
}

.schedule-faq-grid > .panel,
.schedule-faq-grid > .faq-panel{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
}

.schedule-faq-grid .faq-grid{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    box-sizing:border-box !important;
}

.schedule-faq-grid .faq-question{
    min-height:64px !important;
    box-sizing:border-box !important;
}

.schedule-faq-grid + .cta{
    width:100% !important;
    margin-top:0 !important;
}

.cta{
    width:100% !important;
    box-sizing:border-box !important;
}

.cta-inner{
    width:92% !important;
    max-width:1180px !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
}

.footer{
    width:100% !important;
    box-sizing:border-box !important;
}

.footer-inner{
    width:92% !important;
    max-width:1180px !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
}

@media (max-width:900px){
    .schedule-faq-grid{
        width:92% !important;
        max-width:none !important;
        grid-template-columns:1fr !important;
        margin:14px auto 18px !important;
        gap:12px !important;
    }
}

@media (max-width:600px){
    .schedule-faq-grid{
        width:92% !important;
        margin:12px auto 16px !important;
        grid-template-columns:1fr !important;
    }

    .schedule-faq-grid .faq-grid{
        grid-template-columns:1fr !important;
    }

    .cta-inner,
    .footer-inner{
        width:92% !important;
    }
}

/* =========================================================
   FINAL STRUCTURE FIX — CTA + FOOTER
   ========================================================= */

.bottom-full{
    width:100%;
    display:block !important;
    grid-column:1 / -1 !important;
    flex:0 0 100% !important;
    clear:both;
}

.bottom-full .cta,
.bottom-full .footer{
    width:100% !important;
    display:block !important;
    float:none !important;
    grid-column:auto !important;
}

.bottom-full .cta-inner,
.bottom-full .footer-inner{
    width:92%;
    max-width:1180px;
    margin-left:auto;
    margin-right:auto;
}

@media(max-width:600px){
    .bottom-full{
        width:100%;
        display:block !important;
        grid-column:1 / -1 !important;
    }
}