/* ==========================================================
   PPDB ONLINE
   Yayasan Mutiara Ahlussunnah
   STYLE.CSS
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================
   ROOT
========================================================== */

:root{

    --primary:#012d69;
    --primary-dark:#011f4b;
    --secondary:#f8b400;
    --success:#198754;
    --danger:#dc3545;
    --warning:#ffc107;
    --info:#0dcaf0;

    --white:#ffffff;
    --light:#f8f9fa;
    --gray:#6c757d;
    --dark:#212529;

    --border:#e9ecef;

    --radius:18px;

    --shadow:
        0 10px 30px rgba(1,45,105,.08);

    --transition:.3s ease;

}

/* ==========================================================
   RESET
========================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    font-size:15px;
    line-height:1.8;
    color:var(--dark);
    background:#fff;
    overflow-x:hidden;

}

img{

    max-width:100%;
    height:auto;

}

a{

    text-decoration:none;
    transition:var(--transition);

}

ul{

    margin:0;
    padding:0;
    list-style:none;

}

.section{

    padding:100px 0;

}

.section-light{

    background:#f7f9fc;

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

.section-subtitle{

    display:inline-block;
    background:rgba(1,45,105,.08);
    color:var(--primary);
    padding:8px 18px;
    border-radius:50px;
    font-weight:600;
    font-size:14px;
    margin-bottom:18px;

}

.section-title{

    font-size:40px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:20px;

}

.section-description{

    color:#666;
    max-width:700px;
    margin:auto;

}

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

.btn{

    border-radius:50px;
    padding:13px 28px;
    font-weight:600;
    transition:.3s;

}

.btn-primary{

    background:var(--primary);
    border-color:var(--primary);

}

.btn-primary:hover{

    background:var(--primary-dark);
    border-color:var(--primary-dark);
    transform:translateY(-3px);

}

.btn-warning{

    background:var(--secondary);
    border:none;
    color:#222;

}

.btn-warning:hover{

    background:#e2a000;
    transform:translateY(-3px);

}

.btn-outline-light:hover{

    color:var(--primary);

}

/* ==========================================================
   NAVBAR
========================================================== */

.navbar{

    background:#fff;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
    padding:15px 0;
    transition:.3s;

}

.navbar-brand{

    display:flex;
    align-items:center;
    gap:12px;

}

.navbar-brand img{

    height:55px;

}

.navbar-brand span{

    font-weight:700;
    color:var(--primary);
    font-size:18px;
    line-height:1.3;

}

.navbar-nav{

    gap:10px;

}

.nav-link{

    color:#333;
    font-weight:500;
    padding:12px 16px !important;
    border-radius:10px;

}

.nav-link:hover{

    color:var(--primary);
    background:#eef4ff;

}

.nav-link.active{

    background:var(--primary);
    color:#fff !important;

}

.navbar .btn{

    padding:10px 22px;

}

/* Sticky */

.navbar.scrolled{

    padding:10px 0;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

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

header{

    width:100%;

    position:relative;

    z-index:999;

}

/* ==========================================================
   NAVBAR
========================================================== */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    background:#fff;

    transition:.35s ease;

}

.navbar.scrolled{

    background:#fff;

    padding:8px 0;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.navbar-brand{

    display:flex;

    align-items:center;

    gap:12px;

}

.navbar-brand img{

    height:58px;

    width:auto;

}

.brand-text{

    display:flex;

    flex-direction:column;

    line-height:1.2;

}

.brand-title{

    font-size:18px;

    font-weight:700;

    color:var(--primary);

}

.brand-subtitle{

    font-size:12px;

    color:#666;

}

.navbar-nav{

    align-items:center;

}

.navbar-nav .nav-item{

    margin:0 4px;

}

.navbar-nav .nav-link{

    padding:12px 18px !important;

    border-radius:12px;

    color:#333;

    font-weight:500;

}

.navbar-nav .nav-link:hover{

    background:#eef5ff;

    color:var(--primary);

}

.navbar-nav .nav-link.active{

    background:var(--primary);

    color:#fff !important;

}

/* ==========================================================
   DROPDOWN
========================================================== */

.dropdown-menu{

    border:none;

    border-radius:15px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    padding:10px;

    margin-top:12px;

}

.dropdown-item{

    border-radius:10px;

    padding:10px 15px;

    transition:.25s;

}

.dropdown-item:hover{

    background:#eef5ff;

    color:var(--primary);

}

/* ==========================================================
   TOGGLER
========================================================== */

.navbar-toggler{

    border:none;

    box-shadow:none!important;

}

.navbar-toggler:focus{

    box-shadow:none!important;

}

.navbar-toggler-icon{

    background-image:none;

    width:28px;

    height:28px;

    position:relative;

}

.navbar-toggler-icon::before,

.navbar-toggler-icon::after,

.navbar-toggler-icon{

    background:none;

}

.navbar-toggler-icon::before{

    content:"";

    position:absolute;

    left:0;

    top:6px;

    width:100%;

    height:3px;

    background:var(--primary);

    border-radius:20px;

    box-shadow:0 8px 0 var(--primary),0 16px 0 var(--primary);

}

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

.footer{

    background:var(--primary);

    color:#fff;

}

.footer-top{

    padding:70px 0 40px;

}

.footer-logo{

    height:70px;

    margin-bottom:20px;

}

.footer-title{

    font-size:20px;

    font-weight:700;

    margin-bottom:18px;

}

.footer-text{

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

    line-height:1.8;

}

.footer-links{

    list-style:none;

    padding:0;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links a{

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

}

.footer-links a:hover{

    color:#fff;

    padding-left:8px;

}

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:15px;

}

.footer-contact i{

    margin-top:4px;

    color:var(--secondary);

}

.footer-social{

    display:flex;

    gap:12px;

    margin-top:25px;

}

.footer-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    transition:.3s;

}

.footer-social a:hover{

    background:var(--secondary);

    color:#222;

}

.footer-bottom{

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

    padding:18px 0;

    text-align:center;

    font-size:14px;

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

}

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

@media(max-width:991px){

    .navbar-collapse{

        background:#fff;

        margin-top:15px;

        padding:20px;

        border-radius:18px;

        box-shadow:0 15px 35px rgba(0,0,0,.08);

    }

    .navbar-nav .nav-link{

        margin-bottom:8px;

    }

    .navbar .btn{

        width:100%;

        margin-top:10px;

    }

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

.hero{

    background:
    linear-gradient(
        135deg,
        #012d69,
        #01408f
    );

    color:#fff;

    padding:150px 0 90px;

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:'';

    position:absolute;

    width:550px;
    height:550px;

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

    border-radius:50%;

    top:-250px;
    right:-180px;

}

.hero::after{

    content:'';

    position:absolute;

    width:400px;
    height:400px;

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

    border-radius:50%;

    bottom:-180px;
    left:-150px;

}

.hero .container{

    position:relative;
    z-index:2;

}

.hero-logo{

    height:120px;
    margin-bottom:30px;

}

.hero .badge{

    background:var(--secondary);
    color:#222;
    font-size:14px;
    letter-spacing:1px;

}

.hero-title{

    font-size:50px;
    font-weight:800;
    line-height:1.2;
    margin-bottom:20px;

}

.hero-subtitle{

    font-size:28px;
    font-weight:600;
    color:#fff;

}

.hero-text{

    max-width:750px;
    margin:auto;
    color:rgba(255,255,255,.9);
    font-size:18px;

}

.hero-card{

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

    backdrop-filter:blur(12px);

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

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.3s;

}

.hero-card:hover{

    transform:translateY(-8px);

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

}

.hero-card i{

    font-size:42px;

    color:#ffd54f;

    margin-bottom:18px;

}

.hero-card h5{

    font-weight:600;
    margin-bottom:10px;

}

.hero-card p{

    margin:0;
    color:#f8f9fa;

}
/* ==========================================================
   ABOUT
========================================================== */

.about-card{

    background:#fff;

    border-radius:20px;

    padding:40px;

    box-shadow:var(--shadow);

}

.about-item{

    padding:30px 20px;

    border-radius:18px;

    transition:var(--transition);

}

.about-item:hover{

    background:#f5f8ff;

    transform:translateY(-6px);

}

.about-item i{

    font-size:40px;

    color:var(--primary);

    margin-bottom:18px;

}

.about-item h5{

    color:var(--primary);

    font-weight:600;

    margin:0;

}

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

.feature-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    height:100%;

    text-align:center;

    box-shadow:var(--shadow);

    transition:var(--transition);

    border:1px solid transparent;

}

.feature-card:hover{

    transform:translateY(-10px);

    border-color:#dbe8ff;

}

.feature-icon{

    width:85px;

    height:85px;

    margin:auto;

    border-radius:50%;

    background:#eef4ff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}

.feature-icon i{

    font-size:36px;

    color:var(--primary);

}

.feature-card h4{

    font-size:22px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:15px;

}

.feature-card p{

    color:#666;

    margin:0;

}

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

.unit-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

    height:100%;

}

.unit-card:hover{

    transform:translateY(-8px);

}

.unit-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#eef4ff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto auto 25px;

}

.unit-icon i{

    font-size:40px;

    color:var(--primary);

}

.unit-card h4{

    color:var(--primary);

    font-weight:700;

    margin-bottom:15px;

}

.unit-card p{

    color:#666;

    min-height:85px;

}

.unit-card .btn{

    border-radius:12px;

}

/* ==========================================================
   STEP / ALUR
========================================================== */

.step-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    box-shadow:var(--shadow);

    text-align:center;

    height:100%;

    transition:.3s;

}

.step-card:hover{

    transform:translateY(-8px);

}

.step-number{

    width:65px;

    height:65px;

    background:var(--primary);

    color:#fff;

    border-radius:50%;

    margin:auto auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

}

.step-card h4{

    color:var(--primary);

    font-weight:700;

    margin-bottom:15px;

}

.step-card p{

    color:#666;

    margin:0;

}

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

.requirement-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.requirement-card .list-group-item{

    padding:20px 28px;

    border-color:#eef2f7;

    font-size:16px;

}

.requirement-card i{

    color:#16a34a;

    font-size:18px;

}

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

.price-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.price-card table{

    margin:0;

}

.price-card thead{

    background:var(--primary);

    color:#fff;

}

.price-card thead th{

    padding:18px;

    border:none;

}

.price-card tbody td{

    padding:16px 18px;

    vertical-align:middle;

}

.price-card tfoot{

    background:#f7f9fc;

}

.price-card tfoot th{

    padding:20px 18px;

    font-size:18px;

    color:var(--primary);

}

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

.section-title{

    margin-bottom:20px;

}

.section-description{

    font-size:17px;

    color:#666;

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

.accordion{

    --bs-accordion-border-width:0;

}

.accordion-item{

    border:none;

    border-radius:18px !important;

    overflow:hidden;

    margin-bottom:18px;

    box-shadow:var(--shadow);

}

.accordion-button{

    background:#fff;

    color:var(--primary);

    font-size:17px;

    font-weight:600;

    padding:22px 25px;

    box-shadow:none !important;

}

.accordion-button:not(.collapsed){

    background:var(--primary);

    color:#fff;

}

.accordion-button::after{

    filter:brightness(0.4);

}

.accordion-button:not(.collapsed)::after{

    filter:brightness(100);

}

.accordion-body{

    padding:25px;

    line-height:1.8;

    color:#666;

    background:#fff;

}

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

.contact-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    box-shadow:var(--shadow);

    height:100%;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.contact-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#eef4ff;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.contact-icon i{

    color:var(--primary);

    font-size:24px;

}

.contact-item h5{

    color:var(--primary);

    font-weight:700;

    margin-bottom:8px;

}

.contact-item p{

    margin:0;

    color:#666;

}

.map-card{

    overflow:hidden;

    border-radius:20px;

    box-shadow:var(--shadow);

    height:100%;

}

.map-card iframe{

    width:100%;

    height:100%;

    min-height:450px;

    border:0;

}

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

.footer{

    background:var(--primary);

    color:#fff;

    padding:70px 0 20px;

}

.footer-logo{

    height:70px;

    margin-bottom:20px;

}

.footer h5{

    font-weight:700;

    margin-bottom:20px;

}

.footer p{

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

}

.footer ul{

    padding:0;

    margin:0;

}

.footer li{

    margin-bottom:12px;

}

.footer a{

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

}

.footer a:hover{

    color:#fff;

    padding-left:6px;

}

.footer hr{

    border-color:rgba(255,255,255,.15);

    margin:35px 0 20px;

}

.footer-bottom{

    text-align:center;

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

    font-size:14px;

}

/* ==========================================================
   FLOATING WHATSAPP
========================================================== */

.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#25d366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    box-shadow:0 10px 25px rgba(0,0,0,.2);

    z-index:999;

    transition:.3s;

}

.floating-whatsapp:hover{

    color:#fff;

    transform:scale(1.08);

}

/* ==========================================================
   SCROLL TOP
========================================================== */

.scroll-top{

    position:fixed;

    right:25px;

    bottom:100px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:none;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:998;

    transition:.3s;

}

.scroll-top:hover{

    background:var(--secondary);

    color:#222;

    transform:translateY(-5px);

}

.scroll-top.show{

    display:flex;

}

/* ==========================================================
   ANIMATION
========================================================== */

.feature-card,
.unit-card,
.step-card,
.hero-card,
.about-item{

    transition:all .35s ease;

}

.feature-card:hover,
.unit-card:hover,
.step-card:hover,
.hero-card:hover{

    box-shadow:0 20px 40px rgba(1,45,105,.12);

}
/* ==========================================================
   UTILITIES
========================================================== */

.text-primary{

    color:var(--primary)!important;

}

.bg-primary{

    background:var(--primary)!important;

}

.bg-light{

    background:#f7f9fc!important;

}

.rounded-xl{

    border-radius:20px!important;

}

.shadow-custom{

    box-shadow:var(--shadow)!important;

}

.border-0{

    border:none!important;

}

.w-fit{

    width:fit-content;

}

/* ==========================================================
   FORM
========================================================== */

.form-control,
.form-select{

    height:52px;

    border-radius:12px;

    border:1px solid #d9e2ef;

    padding:10px 18px;

    box-shadow:none;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(1,45,105,.12);

}

textarea.form-control{

    min-height:130px;

}

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

.card{

    border:none;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.card-header{

    background:#fff;

    border-bottom:1px solid #edf1f7;

    font-weight:600;

}

.card-footer{

    background:#fff;

    border-top:1px solid #edf1f7;

}

/* ==========================================================
   TABLE
========================================================== */

.table{

    vertical-align:middle;

}

.table thead{

    background:var(--primary);

    color:#fff;

}

.table th{

    border:none;

}

.table td{

    padding:15px;

}

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

.badge{

    font-weight:500;

    padding:8px 14px;

}

/* ==========================================================
   PAGINATION
========================================================== */

.page-link{

    color:var(--primary);

    border-radius:10px;

    margin:0 3px;

}

.page-item.active .page-link{

    background:var(--primary);

    border-color:var(--primary);

}

/* ==========================================================
   ALERT
========================================================== */

.alert{

    border:none;

    border-radius:15px;

}

/* ==========================================================
   LOADER
========================================================== */

.loading{

    opacity:.6;

    pointer-events:none;

}

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

@media(max-width:1199px){

.hero-title{

font-size:46px;

}

.section-title{

font-size:34px;

}

}

@media(max-width:991px){

.section{

padding:80px 0;

}

.navbar{

padding:12px 0;

}

.navbar-collapse{

margin-top:15px;

}

.hero{

padding:130px 0 70px;

text-align:center;

}

.hero-title{

font-size:40px;

}

.hero-subtitle{

font-size:24px;

}

.hero-text{

font-size:16px;

}

.hero-card{

margin-bottom:20px;

}

.about-card{

margin-top:30px;

}

.contact-card{

margin-bottom:30px;

}

.map-card iframe{

min-height:350px;

}

.footer{

text-align:center;

}

.footer-logo{

margin:auto auto 20px;

}

}

@media(max-width:768px){

.section{

padding:70px 0;

}

.section-title{

font-size:30px;

}

.hero-logo{

height:90px;

}

.hero-title{

font-size:34px;

}

.hero-subtitle{

font-size:20px;

}

.hero-text{

font-size:15px;

}

.btn{

width:100%;

margin-bottom:12px;

}

.feature-card,

.unit-card,

.step-card,

.about-card{

padding:28px;

}

.contact-item{

flex-direction:column;

text-align:center;

}

.contact-icon{

margin:auto;

}

.map-card iframe{

min-height:300px;

}

.floating-whatsapp{

width:55px;

height:55px;

font-size:26px;

right:18px;

bottom:18px;

}

.scroll-top{

right:18px;

bottom:85px;

}

}

@media(max-width:576px){

.hero{

padding:120px 0 60px;

}

.hero-title{

font-size:30px;

}

.hero-subtitle{

font-size:18px;

}

.section-title{

font-size:26px;

}

.section-subtitle{

font-size:13px;

}

.navbar-brand img{

height:45px;

}

.navbar-brand span{

font-size:16px;

}

.hero-card,

.feature-card,

.unit-card,

.step-card,

.about-card,

.contact-card{

padding:22px;

}

}
@media (max-width:768px){

    .contact-item{
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        text-align:left !important;
    }

    .contact-icon{
        margin:0 20px 0 0 !important;
    }

    .contact-item h5,
    .contact-item p{
        text-align:left !important;
    }

}
@media (max-width:991px){

    .navbar .container{
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .navbar-brand{
        display:flex;
        align-items:center;
        margin:0;
    }

    .navbar-brand img{
        height:42px;
        width:auto;
    }

    .navbar-toggler{
        margin:0;
        padding:.4rem .6rem;
        border:0;
        box-shadow:none !important;
    }

    .navbar-toggler:focus{
        box-shadow:none !important;
    }

}
.btn-login{
    background:#fff;
    color:#012d69;
    border:2px solid #e8edf7;
    transition:.3s;
}

.btn-login:hover{
    background:#012d69;
    color:#fff;
    border-color:#012d69;
}

.btn-login i{
    color:inherit;
}

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

table {
    width: 100%;
    table-layout: auto;
}

th,
td {
    white-space: normal;
    word-break: break-word;
}
/* ==========================================================
   PPDB Progress
========================================================== */


.ppdb-progress{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:10px;
flex-wrap:wrap;
}

.ppdb-progress .step{
flex:1;
text-align:center;
position:relative;
min-width:90px;
}

.ppdb-progress .step::after{
content:'';
position:absolute;
top:20px;
left:50%;
width:100%;
height:3px;
background:#dee2e6;
z-index:0;
}

.ppdb-progress .step:last-child::after{
display:none;
}

.ppdb-progress .circle{
width:42px;
height:42px;
border-radius:50%;
background:#dee2e6;
color:#666;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
position:relative;
z-index:2;
font-weight:700;
}

.ppdb-progress .label{
margin-top:10px;
font-size:13px;
font-weight:600;
}

.ppdb-progress .step.done .circle{
background:#198754;
color:#fff;
}

.ppdb-progress .step.done::after{
background:#198754;
}

.ppdb-progress .step.active .circle{
background:#012d69;
color:#fff;
}

.ppdb-progress .step.active .label{
color:#012d69;
}
/* ==========================
   Progress Mobile
========================== */
@media (max-width:768px){

    .ppdb-progress{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:28px 0;
    }

    .ppdb-progress .step{
        position:relative;
        min-width:0;
        width:100%;
    }

    .ppdb-progress .circle{
        width:44px;
        height:44px;
        margin:0 auto;
    }

    .ppdb-progress .label{
        margin-top:8px;
        font-size:13px;
        line-height:1.3;
    }

    /* Garis penghubung */
    .ppdb-progress .step::after{
        content:'';
        position:absolute;
        top:21px;
        left:50%;
        width:100%;
        height:3px;
        background:#dee2e6;
        z-index:0;
    }

    /* Hilangkan garis di item ke-3,6,9 */
    .ppdb-progress .step:nth-child(3n)::after{
        display:none;
    }

    .ppdb-progress .step.done::after{
        background:#198754;
    }
}

.form-navigation{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:30px;
}

.form-navigation .btn-back{
    min-width:180px;
}

.form-navigation .btn-next{
    min-width:220px;
}

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

    .form-navigation{
        justify-content:flex-end;
        gap:15px;
    }

}

/* Mobile */
@media (max-width:768px){

    .form-navigation{
        gap:10px;
    }

    .form-navigation .btn-back,
    .form-navigation .btn-next{
        flex:1;
        min-width:0;
    }

}
/* ==========================================================
   STATUS PENDAFTARAN
========================================================== */

.timeline{
    position:relative;
    margin-top:20px;
}

.timeline::before{
    content:'';
    position:absolute;
    left:18px;
    top:0;
    bottom:0;
    width:2px;
    background:#dee2e6;
}

.timeline-item{
    position:relative;
    padding-bottom:30px;
}

.timeline-item:last-child{
    padding-bottom:0;
}

.timeline-icon{
    width:38px;
    height:38px;
    min-width:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    z-index:2;
    position:relative;
    box-shadow:0 3px 10px rgba(0,0,0,.15);
}

.timeline-content{
    flex:1;
    background:#fff;
    border:1px solid #e9ecef;
    border-radius:12px;
    padding:16px 18px;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.timeline-content h6{
    font-weight:600;
    margin-bottom:6px;
}

.timeline-content small{
    display:block;
}

.card-header{
    font-weight:600;
}

.card-header i{
    margin-right:6px;
}

@media (max-width:768px){

    .timeline::before{
        left:16px;
    }

    .timeline-icon{
        width:34px;
        height:34px;
        min-width:34px;
        font-size:13px;
    }

    .timeline-content{
        padding:14px;
	}


    /* ==========================================================
   TABLE UMUM
========================================================== */

.table{
    width:100%;
    table-layout:auto;
    vertical-align:middle;
}

.table th,
.table td{
    padding:15px;
    vertical-align:middle;
    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
}

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

.table-responsive{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

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

.table-responsive .table-biaya{
    width:100%;
    min-width:0;
    table-layout:fixed;
}

.table-biaya th:first-child,
.table-biaya td:first-child{
    width:45px;
    text-align:center;
}

.table-biaya th:nth-child(2),
.table-biaya td:nth-child(2){
    width:auto;
}

.table-biaya th:nth-child(3),
.table-biaya td:nth-child(3){
    width:120px;
    text-align:right;
}

/* MOBILE */
@media (max-width:768px){

    .table-biaya th,
    .table-biaya td{
        padding:10px 8px;
        font-size:13px;
        white-space:normal;
        word-break:break-word;
        overflow-wrap:anywhere;
    }

    .table-biaya th:first-child,
    .table-biaya td:first-child{
        width:40px;
    }

    .table-biaya th:nth-child(3),
    .table-biaya td:nth-child(3){
        width:105px;
    }

}

/* ==========================================================
   TABEL KONFIRMASI
========================================================== */

.confirm-table{
    width:100%;
    table-layout:fixed;
}

.confirm-table th{
    width:35%;
    white-space:normal;
    word-break:break-word;
}

.confirm-table td{
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
}

@media (max-width:768px){

    .confirm-table th,
    .confirm-table td{
        display:block;
        width:100%!important;
    }

    .confirm-table tr{
        display:block;
        border-bottom:1px solid #dee2e6;
    }

    .confirm-table th{
        border-bottom:0;
        background:#f8f9fa;
    }

}
/* ==========================================================
   SISA KUOTA PPDB
========================================================== */

.ppdb-kuota-section {
    padding: 100px 0;
    background: #f7f9fc;
}


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

.ppdb-kuota-heading {
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}

.ppdb-kuota-label {
    display: inline-block;

    background: rgba(1,45,105,.08);
    color: var(--primary);

    padding: 8px 18px;
    border-radius: 50px;

    font-size: 14px;
    font-weight: 600;

    margin-bottom: 18px;
}

.ppdb-kuota-heading h2 {
    font-size: 40px;
    font-weight: 700;

    color: var(--primary);

    margin-bottom: 20px;
}

.ppdb-kuota-heading p {
    color: #666;
    font-size: 17px;

    margin: 0 auto;
}


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

.ppdb-kuota-card {
    position: relative;

    height: 100%;

    background: #fff;

    border-radius: 20px;

    padding: 35px;

    box-shadow: var(--shadow);

    transition: all .35s ease;

    border: 1px solid transparent;

    overflow: hidden;
}


/* Hover */

.ppdb-kuota-card:hover {
    transform: translateY(-8px);

    border-color: #dbe8ff;

    box-shadow:
        0 20px 40px rgba(1,45,105,.12);
}


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

.ppdb-kuota-card-header {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 20px;
}


/* ==========================================================
   ICON
========================================================== */

.ppdb-kuota-icon {
    width: 70px;
    height: 70px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #eef4ff;

    display: flex;
    align-items: center;
    justify-content: center;
}

.ppdb-kuota-icon i {
    font-size: 30px;

    color: var(--primary);
}


/* ==========================================================
   JENJANG
========================================================== */

.ppdb-kuota-jenjang {
    display: inline-block;

    color: var(--primary);

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

    text-transform: uppercase;

    margin-bottom: 5px;
}


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

.ppdb-kuota-card h3 {
    color: var(--primary);

    font-size: 22px;

    font-weight: 700;

    margin: 0;
}


/* ==========================================================
   LOKASI
========================================================== */

.ppdb-kuota-location {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #666;

    font-size: 14px;

    padding-bottom: 20px;

    border-bottom: 1px solid #edf1f7;
}

.ppdb-kuota-location i {
    color: var(--primary);

    font-size: 15px;
}


/* ==========================================================
   KUOTA UTAMA
========================================================== */

.ppdb-kuota-main {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding: 28px 0 22px;
}


/* Label */

.ppdb-kuota-main span,
.ppdb-kuota-total span {
    display: block;

    color: #666;

    font-size: 13px;

    margin-bottom: 5px;
}


/* Sisa */

.ppdb-kuota-main strong {
    display: block;

    color: var(--primary);

    font-size: 46px;

    line-height: 1;

    font-weight: 800;
}


/* Total */

.ppdb-kuota-total {
    text-align: right;
}

.ppdb-kuota-total strong {
    display: block;

    color: #333;

    font-size: 22px;

    font-weight: 700;
}


/* ==========================================================
   PROGRESS
========================================================== */

.ppdb-kuota-progress {
    margin-bottom: 22px;
}

.ppdb-kuota-progress-info {
    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;

    color: #666;

    font-size: 12px;
}

.ppdb-kuota-progress .progress {
    height: 8px;

    overflow: hidden;

    background: #e9ecef;

    border-radius: 50px;
}

.ppdb-kuota-progress .progress-bar {
    background: var(--primary);

    border-radius: 50px;

    transition: width .5s ease;
}


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

.ppdb-kuota-status {
    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 22px;
}

.ppdb-kuota-status span {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;
}


/* Tersedia */

.ppdb-kuota-status.tersedia {
    color: var(--success);
}

.ppdb-kuota-status.tersedia span {
    background: var(--success);
}


/* Hampir penuh */

.ppdb-kuota-status.hampir {
    color: #d97706;
}

.ppdb-kuota-status.hampir span {
    background: #d97706;
}


/* Penuh */

.ppdb-kuota-status.penuh {
    color: var(--danger);
}

.ppdb-kuota-status.penuh span {
    background: var(--danger);
}


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

.ppdb-kuota-button {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 13px 20px;

    border-radius: 12px;

    background: var(--primary);

    color: #fff;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition: .3s;
}

.ppdb-kuota-button:hover {
    background: var(--primary-dark);

    color: #fff;

    transform: translateY(-3px);
}

.ppdb-kuota-button i {
    transition: .3s;
}

.ppdb-kuota-button:hover i {
    transform: translateX(4px);
}


/* Disabled */

.ppdb-kuota-button.disabled {
    background: #e9ecef;

    color: #6c757d;

    cursor: not-allowed;

    transform: none;
}


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

.ppdb-kuota-footer {
    text-align: center;

    margin-top: 50px;
}

.ppdb-kuota-footer p {
    color: #666;

    font-size: 14px;

    margin-bottom: 18px;
}


/* ==========================================================
   EMPTY
========================================================== */

.ppdb-kuota-empty {
    max-width: 700px;

    margin: auto;

    padding: 50px 30px;

    text-align: center;

    background: #fff;

    border-radius: 20px;

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

.ppdb-kuota-empty-icon {
    width: 75px;
    height: 75px;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: #eef4ff;

    display: flex;

    align-items: center;

    justify-content: center;
}

.ppdb-kuota-empty-icon i {
    font-size: 30px;

    color: var(--primary);
}

.ppdb-kuota-empty h3 {
    color: var(--primary);

    font-size: 22px;

    font-weight: 700;

    margin-bottom: 10px;
}

.ppdb-kuota-empty p {
    color: #666;

    margin: 0;
}


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

@media (max-width: 991px) {

    .ppdb-kuota-section {
        padding: 80px 0;
    }

    .ppdb-kuota-heading h2 {
        font-size: 34px;
    }

}


@media (max-width: 768px) {

    .ppdb-kuota-section {
        padding: 70px 0;
    }

    .ppdb-kuota-heading {
        margin-bottom: 35px;
    }

    .ppdb-kuota-heading h2 {
        font-size: 30px;
    }

    .ppdb-kuota-heading p {
        font-size: 15px;
    }

    .ppdb-kuota-card {
        padding: 28px;
    }

    .ppdb-kuota-icon {
        width: 60px;
        height: 60px;
    }

    .ppdb-kuota-icon i {
        font-size: 25px;
    }

    .ppdb-kuota-card h3 {
        font-size: 20px;
    }

    .ppdb-kuota-main strong {
        font-size: 40px;
    }

}


@media (max-width: 576px) {

    .ppdb-kuota-section {
        padding: 60px 0;
    }

    .ppdb-kuota-heading h2 {
        font-size: 26px;
    }

    .ppdb-kuota-label {
        font-size: 13px;
    }

    .ppdb-kuota-card {
        padding: 22px;
    }

    .ppdb-kuota-card-header {
        gap: 14px;
    }

    .ppdb-kuota-icon {
        width: 55px;
        height: 55px;
    }

    .ppdb-kuota-icon i {
        font-size: 22px;
    }

    .ppdb-kuota-card h3 {
        font-size: 18px;
    }

    .ppdb-kuota-main strong {
        font-size: 36px;
    }

}

	/* ==========================================================
   PPDB KUOTA - DESKTOP FIX
   Tempel PALING BAWAH style.css
========================================================== */

@media (min-width: 769px) {

    /* SECTION */
    #sisa-kuota.ppdb-kuota-section {
        display: block !important;
        width: 100% !important;
        padding: 100px 0 !important;
        background: #f7f9fc !important;
    }

    /* HEADING */
    #sisa-kuota .ppdb-kuota-heading {
        display: block !important;
        max-width: 700px !important;
        margin: 0 auto 50px !important;
        text-align: center !important;
    }

    #sisa-kuota .ppdb-kuota-label {
        display: inline-block !important;
        background: rgba(1, 45, 105, .08) !important;
        color: var(--primary) !important;
        padding: 8px 18px !important;
        border-radius: 50px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 18px !important;
    }

    #sisa-kuota .ppdb-kuota-heading h2 {
        display: block !important;
        margin: 0 0 20px !important;
        color: var(--primary) !important;
        font-size: 40px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    #sisa-kuota .ppdb-kuota-heading p {
        display: block !important;
        margin: 0 auto !important;
        color: #666 !important;
        font-size: 17px !important;
        line-height: 1.7 !important;
    }


    /* GRID */
    #sisa-kuota .row.g-4 {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    #sisa-kuota .col-md-6.col-xl-4 {
        display: block !important;
    }


    /* CARD */
    #sisa-kuota .ppdb-kuota-card {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 430px !important;

        padding: 35px !important;

        background: #fff !important;
        border: 1px solid transparent !important;
        border-radius: 20px !important;

        box-shadow: var(--shadow) !important;

        overflow: hidden !important;

        transition:
            transform .35s ease,
            box-shadow .35s ease,
            border-color .35s ease !important;
    }

    #sisa-kuota .ppdb-kuota-card:hover {
        transform: translateY(-8px) !important;
        border-color: #dbe8ff !important;

        box-shadow:
            0 20px 40px rgba(1, 45, 105, .12) !important;
    }


    /* CARD HEADER */
    #sisa-kuota .ppdb-kuota-card-header {
        display: flex !important;
        align-items: center !important;

        gap: 18px !important;
        margin-bottom: 20px !important;
    }


    /* ICON */
    #sisa-kuota .ppdb-kuota-icon {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;

        flex-shrink: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #eef4ff !important;
        border-radius: 50% !important;
    }

    #sisa-kuota .ppdb-kuota-icon i {
        display: inline-block !important;

        color: var(--primary) !important;
        font-size: 30px !important;
    }


    /* JENJANG */
    #sisa-kuota .ppdb-kuota-jenjang {
        display: inline-block !important;

        margin-bottom: 5px !important;

        color: var(--primary) !important;
        font-size: 13px !important;
        font-weight: 600 !important;

        text-transform: uppercase !important;
    }


    /* NAMA UNIT */
    #sisa-kuota .ppdb-kuota-card h3 {
        display: block !important;

        margin: 0 !important;

        color: var(--primary) !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }


    /* LOKASI */
    #sisa-kuota .ppdb-kuota-location {
        display: flex !important;
        align-items: center !important;

        gap: 8px !important;

        width: 100% !important;

        padding-bottom: 20px !important;

        color: #666 !important;
        font-size: 14px !important;

        border-bottom: 1px solid #edf1f7 !important;
    }

    #sisa-kuota .ppdb-kuota-location i {
        color: var(--primary) !important;
        font-size: 15px !important;
    }


    /* KUOTA UTAMA */
    #sisa-kuota .ppdb-kuota-main {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;

        width: 100% !important;

        padding: 28px 0 22px !important;
    }

    #sisa-kuota .ppdb-kuota-main > div {
        display: block !important;
    }

    #sisa-kuota .ppdb-kuota-main span,
    #sisa-kuota .ppdb-kuota-total span {
        display: block !important;

        margin-bottom: 5px !important;

        color: #666 !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }


    /* ANGKA SISA */
    #sisa-kuota .ppdb-kuota-main strong {
        display: block !important;

        color: var(--primary) !important;
        font-size: 46px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }


    /* TOTAL */
    #sisa-kuota .ppdb-kuota-total {
        display: block !important;

        text-align: right !important;
    }

    #sisa-kuota .ppdb-kuota-total strong {
        display: block !important;

        color: #333 !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }


    /* PROGRESS */
    #sisa-kuota .ppdb-kuota-progress {
        display: block !important;

        width: 100% !important;
        margin-bottom: 22px !important;
    }

    #sisa-kuota .ppdb-kuota-progress-info {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;

        margin-bottom: 8px !important;

        color: #666 !important;
        font-size: 12px !important;
    }

    #sisa-kuota .ppdb-kuota-progress .progress {
        display: block !important;

        width: 100% !important;
        height: 8px !important;

        margin: 0 !important;

        overflow: hidden !important;

        background: #e9ecef !important;
        border-radius: 50px !important;
    }

    #sisa-kuota .ppdb-kuota-progress .progress-bar {
        display: block !important;

        height: 100% !important;

        background: var(--primary) !important;
        border-radius: 50px !important;

        transition: width .5s ease !important;
    }


    /* STATUS */
    #sisa-kuota .ppdb-kuota-status {
        display: flex !important;
        align-items: center !important;

        gap: 8px !important;

        margin-bottom: 22px !important;

        font-size: 13px !important;
        font-weight: 600 !important;
    }

    #sisa-kuota .ppdb-kuota-status span {
        display: block !important;

        width: 9px !important;
        height: 9px !important;
        min-width: 9px !important;

        border-radius: 50% !important;
    }


    /* STATUS TERSEDIA */
    #sisa-kuota .ppdb-kuota-status.tersedia {
        color: var(--success) !important;
    }

    #sisa-kuota .ppdb-kuota-status.tersedia span {
        background: var(--success) !important;
    }


    /* STATUS HAMPIR PENUH */
    #sisa-kuota .ppdb-kuota-status.hampir {
        color: #d97706 !important;
    }

    #sisa-kuota .ppdb-kuota-status.hampir span {
        background: #d97706 !important;
    }


    /* STATUS PENUH */
    #sisa-kuota .ppdb-kuota-status.penuh {
        color: var(--danger) !important;
    }

    #sisa-kuota .ppdb-kuota-status.penuh span {
        background: var(--danger) !important;
    }


    /* BUTTON */
    #sisa-kuota .ppdb-kuota-button {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        margin-top: auto !important;

        padding: 13px 20px !important;

        background: var(--primary) !important;
        color: #fff !important;

        border: 0 !important;
        border-radius: 12px !important;

        font-size: 14px !important;
        font-weight: 600 !important;

        text-decoration: none !important;

        transition:
            background .3s ease,
            transform .3s ease !important;
    }

    #sisa-kuota .ppdb-kuota-button:hover {
        background: var(--primary-dark) !important;
        color: #fff !important;
        transform: translateY(-3px) !important;
    }

    #sisa-kuota .ppdb-kuota-button i {
        transition: transform .3s ease !important;
    }

    #sisa-kuota .ppdb-kuota-button:hover i {
        transform: translateX(4px) !important;
    }


    /* BUTTON DISABLED */
    #sisa-kuota .ppdb-kuota-button.disabled,
    #sisa-kuota button.ppdb-kuota-button:disabled {
        background: #e9ecef !important;
        color: #6c757d !important;

        cursor: not-allowed !important;
        transform: none !important;
    }


    /* FOOTER */
    #sisa-kuota .ppdb-kuota-footer {
        display: block !important;

        margin-top: 50px !important;

        text-align: center !important;
    }

    #sisa-kuota .ppdb-kuota-footer p {
        margin: 0 !important;

        color: #666 !important;
        font-size: 14px !important;
    }


    /* EMPTY */
    #sisa-kuota .ppdb-kuota-empty {
        display: block !important;

        max-width: 700px !important;

        margin: auto !important;
        padding: 50px 30px !important;

        text-align: center !important;

        background: #fff !important;
        border-radius: 20px !important;

        box-shadow: var(--shadow) !important;
    }

    #sisa-kuota .ppdb-kuota-empty-icon {
        width: 75px !important;
        height: 75px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 auto 20px !important;

        background: #eef4ff !important;
        border-radius: 50% !important;
    }

    #sisa-kuota .ppdb-kuota-empty-icon i {
        color: var(--primary) !important;
        font-size: 30px !important;
    }

    #sisa-kuota .ppdb-kuota-empty h3 {
        margin-bottom: 10px !important;

        color: var(--primary) !important;
        font-size: 22px !important;
        font-weight: 700 !important;
    }

    #sisa-kuota .ppdb-kuota-empty p {
        margin: 0 !important;

        color: #666 !important;
    }

}


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (min-width: 1200px) {

    #sisa-kuota .ppdb-kuota-card {
        min-height: 450px !important;
        padding: 35px !important;
    }

    #sisa-kuota .ppdb-kuota-main strong {
        font-size: 48px !important;
    }

}


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

@media (min-width: 769px) and (max-width: 991px) {

    #sisa-kuota.ppdb-kuota-section {
        padding: 80px 0 !important;
    }

    #sisa-kuota .ppdb-kuota-heading {
        margin-bottom: 40px !important;
    }

    #sisa-kuota .ppdb-kuota-heading h2 {
        font-size: 34px !important;
    }

    #sisa-kuota .ppdb-kuota-card {
        padding: 28px !important;
        min-height: 420px !important;
    }

    #sisa-kuota .ppdb-kuota-icon {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
    }

    #sisa-kuota .ppdb-kuota-icon i {
        font-size: 25px !important;
    }

    #sisa-kuota .ppdb-kuota-card h3 {
        font-size: 20px !important;
    }

    #sisa-kuota .ppdb-kuota-main strong {
        font-size: 40px !important;
    }

}
/* =====================================================
   END
========================================================== */