/* =========================================
PAGE
========================================= */

.mutasi-page{
    padding:60px 0 80px;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f2f6fb 100%
        );
}

/* =========================================
SIDEBAR
========================================= */

.mutasi-sidebar{
    position:sticky;

    top:120px;

    background:white;

    border-radius:28px;

    padding:28px;

    border:1px solid #e7edf5;

    box-shadow:
        0 12px 35px rgba(15,23,42,.05);
}

.mutasi-login{
    width:100%;

    height:58px;

    border-radius:18px;

    background:#16a34a;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    text-decoration:none;

    font-weight:700;

    margin-bottom:28px;

    transition:.3s;
}

.mutasi-login:hover{
    background:#15803d;

    color:white;
}

.mutasi-menu{
    display:flex;

    flex-direction:column;

    gap:14px;
}

.mutasi-menu-item{
    width:100%;

    min-height:58px;

    border:none;

    border-radius:18px;

    background:#f8fbff;

    border:1px solid #dbe7f3;

    padding:16px 18px;

    display:flex;

    align-items:center;

    gap:14px;

    text-align:left;

    font-weight:700;

    color:#16315c;

    transition:.3s;
}

.mutasi-menu-item:hover,
.mutasi-menu-item.active{
    background:#002f6c;

    color:white;
}

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

.mutasi-section{
    margin-bottom:32px;
}

.section-card{
    background:white;

    border-radius:30px;

    padding:36px;

    border:1px solid #e7edf5;

    box-shadow:
        0 12px 35px rgba(15,23,42,.05);
}

.section-card h3{
    font-size:32px;

    font-weight:800;

    color:#16315c;

    margin-bottom:30px;
}

/* =========================================
INFO BOX
========================================= */

.info-box{
    padding:24px;

    border-radius:22px;

    background:#f8fbff;

    border:1px solid #e7edf5;

    margin-bottom:20px;
}

.info-box h5{
    font-size:20px;

    font-weight:700;

    color:#16315c;

    margin-bottom:10px;
}

.info-box p{
    color:#64748b;

    line-height:1.8;

    margin:0;
}

/* =========================================
HIGHLIGHT
========================================= */

.highlight-box{
    background:#eff6ff;

    border:1px solid #bfdbfe;

    padding:24px;

    border-radius:22px;

    font-size:18px;

    color:#16315c;

    line-height:1.8;
}

/* =========================================
TIMELINE
========================================= */

.timeline{
    display:flex;

    flex-direction:column;

    gap:24px;
}

.timeline-item{
    display:flex;

    gap:22px;
}

.timeline-number{
    width:62px;
    height:62px;

    border-radius:20px;

    background:#002f6c;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:800;

    flex-shrink:0;
}

.timeline-content{
    flex:1;

    background:#f8fbff;

    border:1px solid #e7edf5;

    border-radius:24px;

    padding:24px;
}

.timeline-content h5{
    font-size:22px;

    font-weight:700;

    color:#16315c;

    margin-bottom:12px;
}

.timeline-content p{
    color:#64748b;

    line-height:1.9;

    margin:0;
}

/* =========================================
PRICE
========================================= */

.price-box{
    width:220px;

    height:90px;

    border-radius:24px;

    background:#dcfce7;

    color:#166534;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    font-weight:800;
}

/* =========================================
CONTACT
========================================= */

.contact-list{
    display:flex;

    flex-direction:column;

    gap:18px;
}

.contact-item{
    display:flex;

    align-items:center;

    gap:16px;

    padding:22px;

    border-radius:22px;

    background:#f8fbff;

    border:1px solid #e7edf5;

    color:#16315c;

    font-weight:600;
}

.contact-item i{
    font-size:22px;

    color:#0d6efd;
}

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

@media(max-width:992px){

    .mutasi-sidebar{
        position:relative;

        top:auto;
    }

}

@media(max-width:768px){

    .mutasi-page{
        padding:40px 0 60px;
    }

    .section-card{
        padding:24px;
    }

    .section-card h3{
        font-size:26px;
    }

    .timeline-item{
        flex-direction:column;
    }

}

.timeline-list{
    margin-top:20px;

    padding:22px;

    border-radius:22px;

    background:#eff6ff;

    border:1px solid #dbeafe;
}

.timeline-list ul{
    margin:0;

    padding-left:20px;
}

.timeline-list li{
    margin-bottom:12px;

    color:#475569;

    line-height:1.8;
}