/* =====================================================
   KUMPULAN SOAL
===================================================== */

.ibp-soal-wrap{

    max-width:900px;
    margin:40px auto;
    padding:25px;

    background:#fff;

    border-radius:20px;

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

    font-size:16px;

    line-height:1.8;

}

.ibp-soal-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:30px;

    flex-wrap:wrap;

}

.ibp-soal-title{

    margin:0;

    font-size:34px;

    font-weight:700;

    color:#111827;

}

.ibp-progress{

    background:#2563eb;

    color:#fff;

    padding:8px 16px;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

}

.ibp-soal-item{

    animation:ibpFade .25s;

}

@keyframes ibpFade{

from{

    opacity:0;
    transform:translateY(10px);

}

to{

    opacity:1;
    transform:none;

}

}

.ibp-nomor{

    display:inline-block;

    background:#eff6ff;

    color:#2563eb;

    padding:8px 14px;

    border-radius:40px;

    font-weight:700;

    margin-bottom:18px;

}

.ibp-pertanyaan{

    font-size:20px;

    line-height:1.9;

    margin-bottom:25px;

    color:#111827;

}

.ibp-pilihan{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.ibp-option{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:18px;

    border:2px solid #e5e7eb;

    border-radius:14px;

    background:#fff;

    cursor:pointer;

    transition:.25s;

}

.ibp-option:hover{

    border-color:#2563eb;

    background:#eff6ff;

}

.ibp-option input{

    margin-top:4px;

    transform:scale(1.2);

}

.ibp-option span{

    flex:1;

}

.ibp-lihat-jawaban{

    margin-top:25px;

    background:#2563eb;

    color:#fff;

    border:none;

    border-radius:10px;

    padding:12px 24px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.2s;

}

.ibp-lihat-jawaban:hover{

    background:#1d4ed8;

}

.ibp-jawaban{

    margin-top:20px;

    padding:22px;

    border-radius:14px;

    background:#f8fafc;

    border-left:5px solid #16a34a;

}

.ibp-kunci{

    font-size:18px;

    font-weight:700;

    color:#16a34a;

    margin-bottom:15px;

}

.ibp-pembahasan{

    color:#374151;

    line-height:1.9;

}

.ibp-nav{

    display:flex;

    justify-content:space-between;

    gap:15px;

    margin-top:35px;

}

.ibp-nav button{

    flex:1;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:#fff;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.2s;

}

.ibp-nav button:hover{

    background:#1d4ed8;

}

.ibp-nav button:disabled{

    opacity:.45;

    cursor:not-allowed;

}

.ibp-soal-empty{

    text-align:center;

    padding:50px;

    color:#6b7280;

    font-size:18px;

}

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

@media(max-width:768px){

.ibp-soal-wrap{

    margin:15px;

    padding:20px;

}

.ibp-soal-header{

    flex-direction:column;

    align-items:flex-start;

}

.ibp-soal-title{

    font-size:28px;

}

.ibp-progress{

    font-size:14px;

}

.ibp-pertanyaan{

    font-size:18px;

}

.ibp-option{

    padding:15px;

}

.ibp-nav{

    flex-direction:column;

}

.ibp-nav button{

    width:100%;

}

}

#ibp-hasil{

margin-top:40px;

padding:30px;

background:#f8fafc;

border-radius:15px;

text-align:center;

}

#ibp-skor{

margin:20px 0;

font-size:18px;

line-height:2;

}

#ibp-ulangi{

background:#16a34a;

color:#fff;

border:none;

padding:14px 28px;

border-radius:10px;

cursor:pointer;

font-size:16px;

font-weight:bold;

}

/* ==========================================
NAVIGATOR SOAL
========================================== */

.ibp-soal-nav-grid{

display:flex;

flex-wrap:wrap;

gap:8px;

margin:25px 0;

}

.ibp-nav-number{

width:42px;

height:42px;

border:none;

border-radius:10px;

background:#e5e7eb;

cursor:pointer;

font-weight:700;

transition:.2s;

}

.ibp-nav-number:hover{

background:#cbd5e1;

}

.ibp-nav-number.active{

background:#2563eb;

color:#fff;

}

.ibp-nav-number.done{

background:#16a34a;

color:#fff;

}

@media(max-width:768px){

.ibp-nav-number{

width:38px;

height:38px;

font-size:13px;

}

}