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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f7faff;
    color:#25324a;
}

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

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

.site-header{
    width:100%;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(255,255,255,.15) 0,
            rgba(255,255,255,0) 22%
        ),
        radial-gradient(
            circle at 88% 10%,
            rgba(120,190,255,.22) 0,
            rgba(120,190,255,0) 25%
        ),
        linear-gradient(
            115deg,
            #123f8c 0%,
            #1d5fba 48%,
            #3f8fdf 100%
        );

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

    position:sticky;
    top:0;
    z-index:1000;

    box-shadow:0 4px 18px rgba(23,78,166,.12);
}

.header-container{
    width:90%;
    max-width:1200px;
    min-height:76px;
    margin:auto;

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

.brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-logo{
    width:58px;
    height:58px;

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

    background:transparent;
    border-radius:0;
    box-shadow:none;
}

.brand-logo-image{
    width:58px;
    height:58px;
    object-fit:contain;
    display:block;
}

.brand-text h1{
    font-size:20px;
    color:#ffffff;
}

.brand-text p{
    margin-top:3px;
    font-size:12px;
    color:rgba(255,255,255,.78);
}

.main-nav{
    display:flex;
    align-items:center;
    gap:28px;

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

.main-nav a{
    color:rgba(255,255,255,.92);
    transition:.2s ease;
}

.main-nav a:hover{
    color:#ffffff;
    transform:translateY(-1px);
}

.login-button{
    padding:10px 20px;
    border-radius:10px;

    background:#ffffff;
    color:#174ea6 !important;

    box-shadow:0 5px 14px rgba(0,0,0,.10);

    transition:.2s ease;
}

.login-button:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,.15);
}

/* =========================
   MAIN
========================= */

main{
    min-height:calc(100vh - 150px);
}

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

.site-footer{
    padding:24px 20px;

    text-align:center;
    font-size:13px;
    color:#748198;

    background:#fff;
    border-top:1px solid #e6edf7;
}

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

@media(max-width:700px){

    .header-container{
        width:92%;
        min-height:68px;
    }

    .brand-text p{
        display:none;
    }

    .main-nav{
        gap:14px;
    }

    .main-nav > a:not(.login-button){
        display:none;
    }

    .login-button{
        padding:9px 16px;
    }

}
/* =========================
   HOME SEMENTARA
========================= */

.home-placeholder{
    min-height:600px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:60px 20px;
    text-align:center;
}

.home-placeholder h1{
    margin-bottom:15px;
    font-size:42px;
    color:#174ea6;
}

.home-placeholder p{
    max-width:600px;
    font-size:18px;
    line-height:1.7;
    color:#64748b;
}
/* =========================
   HERO KELAS PANDA
========================= */

.hero-kelas{
    position:relative;
    overflow:hidden;
    padding:70px 0 55px;

    background:
        radial-gradient(circle at 80% 25%,
            rgba(74,144,226,.16) 0,
            rgba(74,144,226,.08) 18%,
            transparent 38%),
        linear-gradient(
            120deg,
            #f8fbff 0%,
            #edf6ff 52%,
            #f8fbff 100%
        );
}

.hero-kelas::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background-image:
        linear-gradient(rgba(23,78,166,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,78,166,.04) 1px, transparent 1px);

    background-size:38px 38px;
}

.hero-container{
    position:relative;
    z-index:2;

    width:90%;
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;
}

.hero-copy{
    max-width:650px;
}

.hero-badge{
    display:inline-flex;
    align-items:center;

    margin-bottom:20px;
    padding:7px 13px;

    border:1px solid rgba(23,78,166,.18);
    border-radius:999px;

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

    color:#174ea6;
    font-size:13px;
    font-weight:700;
}

.hero-copy h1{
    margin-bottom:20px;

    font-size:56px;
    line-height:1.08;
    letter-spacing:-1.5px;

    color:#16345f;
}

.hero-copy p{
    max-width:580px;
    margin-bottom:28px;

    font-size:18px;
    line-height:1.75;

    color:#64748b;
}

.hero-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:46px;
    padding:0 24px;

    border-radius:12px;

    background:#174ea6;
    color:#fff;

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

    box-shadow:0 10px 24px rgba(23,78,166,.18);

    transition:.25s ease;
}

.hero-button:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(23,78,166,.24);
}

/* =========================
   MINI SLIDER
========================= */

.hero-mini-slider{
    position:relative;
    min-height:320px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.hero-mini-slider{
    position:relative;
    min-height:320px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    overflow:hidden;
}

.slider-track{
    display:flex;
    width:100%;

    transition:transform 1.2s ease;
}

.hero-slide{
    flex:0 0 100%;
    width:100%;
}
.slide-two{
    background:
        radial-gradient(circle at 78% 18%,
            rgba(255,255,255,.60) 0,
            rgba(255,255,255,.12) 28%,
            transparent 29%),
        linear-gradient(
            140deg,
            #16766f 0%,
            #2f9d8f 58%,
            #83d7c8 100%
        );
}

.slide-three{
    background:
        radial-gradient(circle at 78% 18%,
            rgba(255,255,255,.60) 0,
            rgba(255,255,255,.12) 28%,
            transparent 29%),
        linear-gradient(
            140deg,
            #6246a8 0%,
            #8065c9 58%,
            #b5a4ee 100%
        );
}

.slide-visual{
    min-height:280px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:34px;

    border-radius:28px;

    background:linear-gradient(
        140deg,
        #174ea6 0%,
        #397cd3 58%,
        #8fc5ff 100%
    );

    color:#fff;

    box-shadow:0 18px 40px rgba(23,78,166,.15);
}

.slide-icon{
    margin-bottom:auto;
    font-size:64px;
}

.slide-copy span{
    display:block;
    margin-bottom:8px;

    font-size:12px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;

    opacity:.8;
}

.slide-copy h3{
    max-width:410px;
    margin-bottom:10px;

    font-size:25px;
    line-height:1.3;
}

.slide-copy p{
    max-width:410px;

    font-size:14px;
    line-height:1.6;

    opacity:.9;
}

.slider-dots{
    display:flex;
    justify-content:center;
    gap:8px;

    margin-top:16px;
}

.dot{
    width:8px;
    height:8px;

    padding:0;
    border:none;
    border-radius:50%;

    background:#cbd5e1;
}

.dot.active{
    width:24px;
    border-radius:999px;
    background:#174ea6;
}

/* =========================
   RUNNING INFO
========================= */

.info-strip{
    position:relative;
    z-index:5;

    margin-top:-18px;
}

.info-container{
    width:84%;
    max-width:1120px;
    min-height:48px;
    margin:auto;

    display:flex;
    align-items:center;

    overflow:hidden;

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

    background:#fff;

    box-shadow:0 8px 24px rgba(31,65,114,.08);
}

.info-label{
    flex:0 0 auto;
    align-self:stretch;

    display:flex;
    align-items:center;

    padding:0 20px;

    background:#174ea6;
    color:#fff;

    font-size:12px;
    font-weight:800;
}

.info-text{
    flex:1;
    min-width:0;

    color:#526176;
    font-size:13px;
}

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

@media(max-width:900px){

    .hero-kelas{
        padding:50px 0 45px;
    }

    .hero-container{
        grid-template-columns:1fr;
        gap:40px;
    }

    .hero-copy{
        text-align:center;
        margin:auto;
    }

    .hero-copy p{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-copy h1{
        font-size:44px;
    }

    .hero-mini-slider{
        width:100%;
        max-width:620px;
        margin:auto;
    }

    .info-container{
        width:90%;
    }
}

@media(max-width:600px){

    .hero-copy h1{
        font-size:36px;
    }

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

    .slide-visual{
        min-height:245px;
        padding:26px;
        border-radius:22px;
    }

    .slide-icon{
        font-size:52px;
    }

    .slide-copy h3{
        font-size:21px;
    }

    .info-container{
        width:94%;
        border-radius:12px;
    }

    .info-label{
        padding:0 14px;
        font-size:10px;
    }
}
/* =========================
   MATA PELAJARAN
========================= */

.mapel-section{
    padding:90px 0 100px;
    background:#f8fbff;
}

.mapel-container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

.mapel-heading{
    max-width:650px;
    margin:0 auto 48px;
    text-align:center;
}

.mapel-label{
    display:inline-block;
    margin-bottom:10px;

    color:#174ea6;
    font-size:13px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.mapel-heading h2{
    margin-bottom:12px;

    color:#16345f;
    font-size:36px;
    line-height:1.2;
}

.mapel-heading p{
    color:#718096;
    font-size:16px;
    line-height:1.7;
}

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

.mapel-card{
    position:relative;

    min-height:270px;
    padding:28px;

    display:flex;
    flex-direction:column;

    border:1px solid #e3ebf5;
    border-radius:22px;

    background:#fff;

    box-shadow:0 8px 24px rgba(31,65,114,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.mapel-card:hover{
    transform:translateY(-7px);

    border-color:#cadbf0;

    box-shadow:0 18px 38px rgba(31,65,114,.12);
}

.mapel-icon{
    width:62px;
    height:62px;

    margin-bottom:24px;

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

    border-radius:18px;

    font-size:31px;
}

.mapel-icon.agama{
    background:#e8f7ef;
}

.mapel-icon.pancasila{
    background:#fff0f0;
}

.mapel-icon.matematika{
    background:#eef3ff;
}

.mapel-icon.indonesia{
    background:#fff7e5;
}

.mapel-icon.inggris{
    background:#eaf7ff;
}

.mapel-icon.informatika{
    background:#f1ecff;
}

.mapel-icon.ipa{
    background:#e8f8f1;
}

.mapel-icon.ips{
    background:#edf7ec;
}

.mapel-icon.pjok{
    background:#fff1e8;
}

.mapel-icon.jawa{
    background:#fff4e6;
}

.mapel-icon.prakarya{
    background:#f3efff;
}

.mapel-card h3{
    margin-bottom:10px;

    color:#1d3557;
    font-size:20px;
}

.mapel-card p{
    margin-bottom:22px;

    color:#718096;
    font-size:14px;
    line-height:1.7;
}

.mapel-link{
    margin-top:auto;

    color:#174ea6;
    font-size:13px;
    font-weight:800;
}

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

@media(max-width:900px){

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

}

@media(max-width:600px){
 
    .mapel-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:16px;
    }

    .mapel-section{
        padding:70px 0 80px;
    }

    .mapel-container{
        width:92%;
    }

    .mapel-heading{
        margin-bottom:35px;
    }

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

    .mapel-grid{
        gap:16px;
    }

    .mapel-card{
        min-height:230px;
        padding:20px;
        border-radius:18px;
    }

    .mapel-icon{
        width:54px;
        height:54px;

        margin-bottom:18px;

        font-size:27px;
        border-radius:15px;
    }

    .mapel-card h3{
        font-size:17px;
    }

    .mapel-card p{
        font-size:13px;
    }

}
/* =========================
   PENGETAHUAN UMUM
========================= */

.pengetahuan-section{
    padding:85px 0 90px;
    background:#ffffff;
}

.pengetahuan-container{
    width:90%;
    max-width:1200px;
    margin:auto;
}


/* JUDUL */

.pengetahuan-heading{
    max-width:680px;
    margin:0 auto 45px;
    text-align:center;
}

.pengetahuan-label{
    display:inline-block;
    margin-bottom:10px;

    color:#174ea6;
    font-size:13px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.pengetahuan-heading h2{
    margin-bottom:12px;

    color:#16345f;
    font-size:36px;
    line-height:1.2;
}

.pengetahuan-heading p{
    color:#718096;
    font-size:16px;
    line-height:1.7;
}


/* GRID */

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


/* CARD */

.pengetahuan-card{
    overflow:hidden;

    display:flex;
    flex-direction:column;

    border:1px solid #e3ebf5;
    border-radius:22px;

    background:#fff;

    box-shadow:0 8px 24px rgba(31,65,114,.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.pengetahuan-card:hover{
    transform:translateY(-7px);

    border-color:#cadbf0;

    box-shadow:0 18px 38px rgba(31,65,114,.13);
}


/* GAMBAR */

.pengetahuan-image{
    width:100%;
    height:205px;
    overflow:hidden;
}

.pengetahuan-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .4s ease;
}

.pengetahuan-card:hover .pengetahuan-image img{
    transform:scale(1.05);
}


/* ISI CARD */

.pengetahuan-content{
    flex:1;

    display:flex;
    flex-direction:column;

    padding:24px 25px 26px;
}

.pengetahuan-category{
    align-self:flex-start;

    margin-bottom:13px;
    padding:6px 11px;

    border-radius:999px;

    background:#eef5ff;

    color:#174ea6;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.pengetahuan-content h3{
    margin-bottom:12px;

    color:#1d3557;

    font-size:20px;
    line-height:1.4;
}

.pengetahuan-content p{
    margin-bottom:22px;

    color:#718096;

    font-size:14px;
    line-height:1.7;
}

.pengetahuan-link{
    margin-top:auto;

    color:#174ea6;

    font-size:13px;
    font-weight:800;
}

.pengetahuan-link:hover{
    text-decoration:underline;
}


/* TOMBOL LIHAT SEMUA */

.pengetahuan-footer{
    margin-top:38px;
    text-align:center;
}

.pengetahuan-button{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:12px 21px;

    border:1px solid #d7e3f3;
    border-radius:12px;

    background:#f8fbff;

    color:#174ea6;

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

    transition:.25s ease;
}

.pengetahuan-button:hover{
    transform:translateY(-2px);

    background:#174ea6;
    color:#fff;

    border-color:#174ea6;
}

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

@media(max-width:900px){

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

}


@media(max-width:600px){

    .pengetahuan-section{
        padding:70px 0 75px;
    }

    .pengetahuan-container{
        width:92%;
    }

    .pengetahuan-heading{
        margin-bottom:35px;
    }

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

    .pengetahuan-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .pengetahuan-image{
        height:190px;
    }

    .pengetahuan-content{
        padding:21px;
    }

}
/* =========================
   PEMISAH ANTAR SECTION
========================= */

.section-transition{
    width:90%;
    max-width:1200px;
    margin:-10px auto;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    background:#fff;
}

.section-transition span{
    flex:1;
    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        #d7e4f3,
        #d7e4f3
    );
}

.section-transition span:last-child{
    background:linear-gradient(
        to left,
        transparent,
        #d7e4f3,
        #d7e4f3
    );
}

.transition-icon{
    width:44px;
    height:44px;

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

    border:1px solid #dce7f4;
    border-radius:50%;

    background:#f8fbff;

    font-size:21px;

    box-shadow:0 5px 14px rgba(31,65,114,.06);
}
/* =========================
   TANTANGAN HARI INI
========================= */

.tantangan-section{
    position:relative;
    overflow:hidden;

    padding:90px 0;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(23,78,166,.10) 0,
            rgba(23,78,166,.05) 18%,
            transparent 19%
        ),
        radial-gradient(
            circle at 94% 85%,
            rgba(74,144,226,.12) 0,
            rgba(74,144,226,.05) 20%,
            transparent 21%
        ),
        #f4f9ff;
}


.tantangan-container{
    position:relative;
    z-index:2;

    width:90%;
    max-width:1200px;
    margin:auto;
}

/* =========================
   EFEK JAWABAN TANTANGAN
========================= */

.tantangan-option.is-wrong{
    background:rgba(239,68,68,.22);
    border-color:rgba(255,180,180,.85);
    animation:tantanganShake .35s ease;
}

.tantangan-option.is-correct{
    background:rgba(34,197,94,.25);
    border-color:rgba(190,255,205,.9);
    transform:translateY(-2px);
}

@keyframes tantanganShake{

    0%,100%{
        transform:translateX(0);
    }

    25%{
        transform:translateX(-6px);
    }

    50%{
        transform:translateX(6px);
    }

    75%{
        transform:translateX(-3px);
    }

}


/* =========================
   CONFETTI
========================= */

.confetti-piece{
    position:fixed;

    width:9px;
    height:14px;

    z-index:9999;

    pointer-events:none;

    border-radius:2px;

    animation:confettiFall 1.6s ease-out forwards;
}

@keyframes confettiFall{

    0%{
        opacity:1;
        transform:
            translateY(-10px)
            rotate(0deg);
    }

    100%{
        opacity:0;
        transform:
            translateY(500px)
            rotate(720deg);
    }

}

/* PANEL UTAMA */

.tantangan-box{
    display:grid;
    grid-template-columns:1.05fr .95fr;

    overflow:hidden;

    border:1px solid #dce8f5;
    border-radius:28px;

    background:#fff;

    box-shadow:0 18px 45px rgba(31,65,114,.10);
}


/* =========================
   BAGIAN PERTANYAAN
========================= */

.tantangan-question{
    padding:48px 50px;
}


.tantangan-label{
    display:inline-block;

    margin-bottom:15px;
    padding:7px 12px;

    border-radius:999px;

    background:#eef5ff;

    color:#174ea6;

    font-size:12px;
    font-weight:800;
    letter-spacing:.4px;
}


.tantangan-question h2{
    margin-bottom:12px;

    color:#16345f;

    font-size:32px;
    line-height:1.25;
}


.tantangan-intro{
    max-width:500px;

    margin-bottom:30px;

    color:#718096;

    font-size:14px;
    line-height:1.7;
}


.tantangan-soal{
    padding:24px 26px;

    border-left:4px solid #174ea6;
    border-radius:0 16px 16px 0;

    background:#f8fbff;

    color:#45566f;

    font-size:15px;
    line-height:1.7;
}


.tantangan-soal p{
    margin-bottom:5px;
}


.tantangan-soal strong{
    display:block;

    margin-top:13px;

    color:#1d3557;
    font-size:17px;
}


/* =========================
   BAGIAN JAWABAN
========================= */

.tantangan-answer{
    padding:48px;

    background:
        linear-gradient(
            145deg,
            #174ea6 0%,
            #2f6fc5 100%
        );

    color:#fff;
}


.tantangan-answer-title{
    display:flex;
    align-items:center;

    gap:14px;

    margin-bottom:26px;
}


.tantangan-answer-title > span{
    width:52px;
    height:52px;

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

    border-radius:16px;

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

    font-size:27px;
}


.tantangan-answer-title small{
    display:block;

    margin-bottom:4px;

    font-size:10px;
    font-weight:800;
    letter-spacing:1px;

    opacity:.75;
}


.tantangan-answer-title h3{
    font-size:21px;
}


/* PILIHAN JAWABAN */

.tantangan-options{
    display:grid;
    grid-template-columns:repeat(2, 1fr);

    gap:12px;
}


.tantangan-option{
    min-height:58px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:10px 14px;

    border:1px solid rgba(255,255,255,.20);
    border-radius:14px;

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

    color:#fff;

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

    cursor:pointer;

    transition:.2s ease;
}


.tantangan-option:hover{
    transform:translateY(-2px);

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


.tantangan-option span{
    width:32px;
    height:32px;

    flex:0 0 32px;

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

    border-radius:9px;

    background:#fff;

    color:#174ea6;

    font-size:12px;
    font-weight:900;
}


/* HASIL JAWABAN */

.tantangan-result{
    display:none;

    margin-top:20px;
    padding:15px 17px;

    border-radius:14px;

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

    font-size:13px;
    line-height:1.6;
}

/* =========================
   TANTANGAN - MOBILE
========================= */

@media (max-width: 768px){

    .tantangan-section{
        padding:55px 0;
    }

    .tantangan-container{
        width:92%;
    }

    .tantangan-box{
        width:100%;

        grid-template-columns:1fr;

        border-radius:22px;

        overflow:hidden;
    }

    .tantangan-question,
    .tantangan-answer{
        width:100%;
        min-width:0;
        box-sizing:border-box;
    }

    .tantangan-question{
        padding:30px 22px;
    }

    .tantangan-question h2{
        font-size:26px;
    }

    .tantangan-intro{
        margin-bottom:22px;
    }

    .tantangan-soal{
        padding:20px 18px;

        font-size:14px;
    }

    .tantangan-soal strong{
        font-size:16px;
    }

    .tantangan-answer{
        padding:30px 22px;
    }

    .tantangan-answer-title{
        margin-bottom:20px;
    }

    .tantangan-answer-title > span{
        width:46px;
        height:46px;

        flex:0 0 46px;

        font-size:23px;
    }

    .tantangan-answer-title h3{
        font-size:19px;
    }

    .tantangan-options{
        grid-template-columns:1fr;

        gap:10px;
    }

    .tantangan-option{
        width:100%;
        min-height:54px;

        box-sizing:border-box;
    }

}
/* =========================
   FOOTER KELAS PANDA
========================= */

.kelas-footer{
    margin-top:0;
    background:#243b53;
    color:#d9e4ef;
}

.footer-container{
    width:90%;
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:1.1fr .9fr 1fr;
    gap:70px;

    padding:65px 0 55px;
}


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

.footer-title{
    display:flex;
    align-items:center;
    gap:10px;
}

.footer-title > span{
    font-size:24px;
}

.footer-title h3{
    color:#ffffff;
    font-size:20px;
    font-weight:800;
}

.footer-line{
    width:100%;
    height:2px;

    margin:16px 0 26px;

    background:linear-gradient(
        to right,
        #4dabf7,
        rgba(77,171,247,.12)
    );
}


/* =========================
   TENTANG
========================= */

.footer-about > p{
    max-width:410px;

    color:#c2cfdd;
    font-size:14px;
    line-height:1.9;
}

.footer-social{
    display:flex;
    gap:10px;

    margin-top:25px;
}

.footer-social a{
    width:42px;
    height:42px;

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

    border:1px solid rgba(255,255,255,.12);
    border-radius:11px;

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

    color:#fff;
    font-size:18px;
    font-weight:800;

    transition:.25s ease;
}

.footer-social a:hover{
    transform:translateY(-3px);

    background:#ffffff;
    color:#174ea6;
}


/* =========================
   PENGELOLA
========================= */

.footer-manager{
    text-align:center;

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

.footer-photo{
    width:118px;
    height:118px;

    margin-bottom:20px;

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

    overflow:hidden;

    border:5px solid rgba(255,255,255,.28);
    border-radius:50%;

    background:#eef5ff;

    font-size:50px;

    box-shadow:0 12px 30px rgba(0,0,0,.14);
}

.footer-photo img{
    width:100%;
    height:100%;

    display:block;
    object-fit:cover;
}

.footer-manager h3{
    color:#fff;

    font-size:18px;
    font-weight:800;
}

.footer-position{
    margin-top:8px;

    color:#aebed0;

    font-size:14px;
    font-weight:700;
}

.footer-school{
    margin-top:5px;

    color:#d6e0ea;

    font-size:14px;
    font-weight:700;
}


/* =========================
   KONTAK
========================= */

.footer-contact-item{
    display:flex;
    align-items:flex-start;
    gap:13px;

    margin-bottom:18px;
}

.footer-contact-item > span{
    width:36px;
    height:36px;

    flex:0 0 36px;

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

    border-radius:10px;

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

    font-size:16px;
}

.footer-contact-item small{
    display:block;

    margin-bottom:3px;

    color:#91a6bb;

    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.footer-contact-item p{
    color:#d9e4ef;

    font-size:14px;
    line-height:1.6;
}


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

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.10);

    background:rgba(0,0,0,.08);
}

.footer-bottom-container{
    width:90%;
    max-width:1200px;
    min-height:62px;

    margin:auto;

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

.footer-bottom p{
    color:#afbdcc;
    font-size:12px;
}

.footer-signature{
    font-weight:700;
}


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

@media(max-width:900px){

    .footer-container{
        grid-template-columns:1fr 1fr;
        gap:45px;
    }

    .footer-manager{
        order:3;
        grid-column:1 / -1;
    }

}


@media(max-width:600px){

    .footer-container{
        width:92%;
        grid-template-columns:1fr;

        gap:42px;

        padding:50px 0 42px;
    }

    .footer-manager{
        order:initial;
        grid-column:auto;
    }

    .footer-about,
    .footer-contact{
        text-align:left;
    }

    .footer-bottom-container{
        width:92%;
        min-height:auto;

        padding:18px 0;

        flex-direction:column;
        justify-content:center;

        text-align:center;
    }

}
/* ========================================
   LOGIN MAPEL
======================================== */

.mapel-login-section{
    min-height:100vh;
    padding:35px 20px 60px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(255,255,255,.85) 0 35px,
            transparent 36px
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(255,255,255,.7) 0 55px,
            transparent 56px
        ),
        linear-gradient(
            135deg,
            #eef8ff 0%,
            #f8fbff 50%,
            #fff8e9 100%
        );

    position:relative;
}

.mapel-login-back{
    width:100%;
    max-width:460px;
    margin-bottom:18px;

    color:#49729c;
    text-decoration:none;

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

    transition:.2s;
}

.mapel-login-back:hover{
    color:#174ea6;
    transform:translateX(-3px);
}

.mapel-login-card{
    width:100%;
    max-width:420px;

    background:#ffffff;

    padding:18px 26px 16px;

    border-radius:26px;

    border:1px solid #e5eef7;

    box-shadow:
        0 16px 38px rgba(43,91,138,.10);

    text-align:center;

    position:relative;
    overflow:hidden;
}

.mapel-login-card::before{
    content:"";

    position:absolute;

    width:160px;
    height:160px;

    border-radius:50%;

    background:rgba(78,160,235,.09);

    top:-80px;
    right:-60px;
}

.mapel-login-card::after{
    content:"";

    position:absolute;

    width:110px;
    height:110px;

    border-radius:50%;

    background:rgba(255,190,70,.10);

    bottom:-55px;
    left:-45px;
}

.mapel-login-brand{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.mapel-login-icon{
    width:70px;
    height:70px;

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

    margin-bottom:9px;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #e9f5ff,
            #f4faff
        );

    border:1px solid #dbeeff;

    box-shadow:
        0 6px 16px rgba(41,115,180,.08);

    font-size:36px;
}

.mapel-login-label{
    display:inline-block;

    margin-bottom:7px;

    color:#6f8da8;

    font-size:11px;
    font-weight:800;

    letter-spacing:2px;
}

.mapel-login-card h1{
    position:relative;
    z-index:2;

    margin:0;

    color:#174ea6;

    font-size:25px;
    font-weight:800;

    line-height:1.25;
}

.mapel-login-subtitle{
    position:relative;
    z-index:2;

    margin:8px auto 20px;

    max-width:320px;

    color:#74869a;

    font-size:13px;
    line-height:1.5;
}

.login-error{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;

    gap:8px;

    margin-bottom:20px;
    padding:11px 13px;

    background:#fff1f1;

    color:#b63b3b;

    border:1px solid #ffd0d0;
    border-radius:12px;

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

    text-align:left;
}

.mapel-login-form{
    position:relative;
    z-index:2;

    text-align:left;
}

.mapel-login-form-group{
    margin-bottom:14px;
}

.mapel-login-form-group label{
    display:block;

    margin-bottom:7px;

    color:#34495e;

    font-size:13px;
    font-weight:700;
}

.mapel-login-input-wrapper{
    position:relative;
}

.mapel-login-input-icon{
    position:absolute;

    left:15px;
    top:50%;

    transform:translateY(-50%);

    font-size:17px;

    pointer-events:none;
}

.mapel-login-input-wrapper input{
    width:100%;
    height:52px;

    box-sizing:border-box;

    padding:0 15px 0 46px;

    border:1.5px solid #dbe5ef;
    border-radius:14px;

    outline:none;

    background:#fbfdff;

    color:#2f4052;

    font-size:14px;

    transition:.2s;
}

.mapel-login-input-wrapper input::placeholder{
    color:#a7b5c3;
}

.mapel-login-input-wrapper input:focus{
    border-color:#4d9de0;

    background:#ffffff;

    box-shadow:
        0 0 0 4px rgba(77,157,224,.10);
}

.mapel-login-button{
    width:100%;
    height:50px;

    margin-top:5px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border:0;
    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #2f80d1,
            #1769b2
        );

    color:#ffffff;

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

    cursor:pointer;

    box-shadow:
        0 8px 18px rgba(23,105,178,.20);

    transition:
        transform .2s,
        box-shadow .2s;
}

.mapel-login-button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 14px 26px rgba(23,105,178,.28);
}

.mapel-login-button:active{
    transform:translateY(0);
}

.mapel-login-footer{
    position:relative;
    z-index:2;

    margin-top:16px;
    padding-top:14px;

    border-top:1px solid #eef2f6;

    color:#8fa0b0;

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

    transform:none;
}

/* =========================
   SELECT SEMESTER LOGIN
========================= */

.mapel-login-input-wrapper select{
    width:100%;
    height:52px;

    box-sizing:border-box;

    padding:0 46px 0 46px;

    border:1.5px solid #dbe5ef;
    border-radius:14px;

    outline:none;

    background:#fbfdff;

    color:#2f4052;
    font-size:14px;
    font-weight:600;

    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;

    transition:.2s;
}


/* PANAH SELECT */

.mapel-login-input-wrapper:has(select)::after{
    content:"⌄";

    position:absolute;
    right:16px;
    top:50%;

    transform:translateY(-55%);

    color:#5f7695;
    font-size:18px;
    font-weight:700;

    pointer-events:none;
}


/* FOCUS */

.mapel-login-input-wrapper select:focus{
    border-color:#4d9de0;

    background:#ffffff;

    box-shadow:
        0 0 0 4px rgba(77,157,224,.10);
}


/* HP */

@media (max-width:600px){

    .mapel-login-input-wrapper select{
        min-height:64px;

        padding-left:58px;
        padding-right:44px;

        font-size:16px;
    }

    .mapel-login-input-wrapper:has(select)::after{
        right:19px;
        font-size:20px;
    }

}

/* ========================================
   RESPONSIVE LOGIN MAPEL
======================================== */

@media (max-width:600px){

    .mapel-login-section{
        padding:25px 16px 40px;
        justify-content:flex-start;
    }

    .mapel-login-back{
        margin-top:8px;
    }

    .mapel-login-card{
        padding:32px 23px 26px;
        border-radius:24px;
    }

    .mapel-login-icon{
        width:72px;
        height:72px;

        font-size:37px;
    }

    .mapel-login-card h1{
        font-size:24px;
    }

    .mapel-login-subtitle{
        font-size:13px;
        margin-bottom:23px;
    }

}
/* =========================
   DASHBOARD MAPEL SISWA
   MOBILE FIRST
========================= */

.mapel-dashboard-section{
    padding:18px 0 60px;
}

.mapel-dashboard-container{
    width:92%;
    max-width:1100px;
    margin:0 auto;
}


/* KEMBALI */

.mapel-back-link{
    display:inline-flex;
    align-items:center;

    margin-bottom:20px;

    color:#5e6f89;
    text-decoration:none;

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


/* JUDUL MAPEL */

.mapel-title-row{
    display:flex;
    align-items:center;
    gap:13px;

    margin-bottom:18px;
}

.mapel-title-icon{
    width:52px;
    height:52px;
    flex:0 0 52px;

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

    background:transparent;
    border:none;
    border-radius:0;

    box-shadow:none;
}
.mapel-title-icon-img{
    width:42px;
    height:42px;

    display:block;
    object-fit:contain;

    max-width:100%;
    max-height:100%;
}
.mapel-title-label{
    display:block;

    margin-bottom:3px;

    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;

    color:#73839b;
}

.mapel-title-row h1{
    margin:0;

    font-size:23px;
    line-height:1.2;

    color:#1f3557;
}

/* ========================================
   HERO DASHBOARD SISWA
======================================== */

.siswa-dashboard-hero{
    position:relative;

    min-height:260px;

    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;

    gap:26px;

    padding:28px 38px;

    margin-bottom:18px;
    margin-top:-12px;
    
    overflow:visible;

    /* TRANSPARAN — MENYATU DENGAN BACKGROUND HALAMAN */
    background:transparent;

    border:none;
    border-radius:0;

    box-shadow:none;
}


/* COPY */

.siswa-dashboard-hero-copy{
    position:relative;
    z-index:2;

    max-width:560px;

    transform:translateY(-25px);
}


.siswa-dashboard-hero-label{
    display:block;

    margin-bottom:7px;

    color:#123d7b;

    font-size:18px;
    font-weight:700;
}


.siswa-dashboard-hero-copy h2{
    margin:0;

    color:#0f2f6e;

    font-size:34px;
    line-height:1.1;
    font-weight:900;

    letter-spacing:-.7px;
}


.siswa-dashboard-hero-wave{
    display:inline-block;

    margin-left:6px;

    font-size:30px;

    transform:rotate(-8deg);
}


.siswa-dashboard-hero-copy p{
    max-width:470px;

    margin:12px 0 17px;

    color:#49698f;

    font-size:14px;
    line-height:1.55;
}


/* BADGE */

.siswa-dashboard-hero-badges{
    display:flex;
    flex-wrap:wrap;

    gap:10px;
}


.siswa-dashboard-hero-badges span{
    display:inline-flex;
    align-items:center;

    min-height:36px;

    padding:0 14px;

    border:1px solid rgba(76,139,204,.16);
    border-radius:999px;

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

    color:#1658a7;

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

    box-shadow:
        0 5px 15px rgba(46,94,142,.06);
}


/* ========================================
   VISUAL PANDA
======================================== */

.siswa-dashboard-hero-visual{
    position:relative;

    min-height:200px;

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


.siswa-dashboard-panda{
    position:relative;
    z-index:2;

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

    filter:
        drop-shadow(0 14px 18px rgba(30,70,110,.12));
}

.siswa-dashboard-hero-image{
    position:absolute;

    left:50%;
    top:52%;

    transform:translate(-50%, -50%);

    display:block;

    width:auto;
    max-width:320px;
    max-height:350px;
    height:auto;

    object-fit:contain;

    z-index:1;
    pointer-events:none;
}

/* VISUAL KATA-KATA ATAS */
.siswa-dashboard-image-slot-daily{
    width:100%;

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

    margin:0;
    transform:none;
}

.siswa-dashboard-image-slot-daily img{
    display:block;

    width:100%;
    max-width:280px;
    height:auto;

    object-fit:contain;
}
@media (min-width:701px){

    .siswa-dashboard-image-slot-daily{
        transform:translateY(-80px);
    }

}
/* VISUAL BAWAH PROGRESS */
.siswa-dashboard-image-slot-bottom{
    position:absolute;

    top:100%;
    left:0;

    width:100%;
    height:150px;

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

    margin-top:4px;

    background:transparent;
    border:none;
    box-shadow:none;

    overflow:hidden;
    transform:none;
}
@media (min-width:701px){

    .siswa-dashboard-image-slot-bottom{
        transform:translateY(-150px);
    }

}
.siswa-dashboard-image-slot-bottom img{
    display:block;

    width:100%;
    max-width:300px;
    height:auto;

    object-fit:contain;
}

.siswa-dashboard-hero-note{
    position:absolute;

    right:0;
    top:35px;

    color:#1471c5;

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

    font-style:italic;

    transform:rotate(-6deg);
}


@media (max-width:700px){

    .mapel-welcome-card{
        flex-direction:column;
        align-items:stretch;
    }

    .mapel-welcome-student{
        width:100%;
        min-width:0;

        box-sizing:border-box;

        margin:20px 0 0;

        padding:13px 15px;
    }

    .mapel-welcome-student-avatar{
        width:46px;
        height:46px;

        border-radius:13px;

        font-size:20px;
    }

    .mapel-welcome-student-info strong{
        font-size:15px;
    }

    .mapel-welcome-student-info span{
        font-size:12px;
    }

}
/* ========================================
   MENU UTAMA DASHBOARD SISWA
======================================== */

.siswa-dashboard-menu{
    position:relative;
    z-index:5;

    margin-top:6px;
    margin-bottom:28px;
    transform:translateY(-40px);
}

.siswa-dashboard-menu-grid{
    width:90%;
    margin-left:auto;
    margin-right:auto;

    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));

    gap:14px;
}

.siswa-dashboard-menu-card{
    min-height:198px;

    padding:19px 16px 16px;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
    border:2px solid rgba(23,78,166,.35);
    border-radius:22px;

    text-decoration:none;

    box-shadow:
        0 10px 24px rgba(35,77,125,.08);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.siswa-dashboard-menu-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 16px 32px rgba(35,77,125,.13);
}


/* ICON */

.siswa-dashboard-menu-icon{
    width:66px;
    height:66px;

    margin-bottom:13px;

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

    border-radius:16px;

    background:rgba(255,255,255,.55);
}

.siswa-dashboard-menu-icon img{
    width:47px;
    height:47px;

    display:block;
    object-fit:contain;
}


/* JUDUL */

.siswa-dashboard-menu-card h3{
    margin:0 0 8px;

    font-size:15.5px;
    line-height:1.25;
    font-weight:800;
}


/* DESKRIPSI */

.siswa-dashboard-menu-card p{
    margin:0;

    color:#536b8b;

    font-size:12px;
    line-height:1.45;
}


/* PANAH */

.siswa-dashboard-menu-arrow{
    width:34px;
    height:34px;

    margin-top:auto;

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

    border-radius:50%;

    font-size:19px;
    font-weight:800;
}

/* ========================================
   WARNA MASING-MASING MENU
======================================== */

/* BUKU - BIRU */
.menu-buku{
    background:
        linear-gradient(
            135deg,
            #ffc5cf 0%,
            #ffe0e5 55%,
            #fff1f3 100%
        );

    color:#a91f39;
}   
.menu-buku .siswa-dashboard-menu-arrow{
    background:#f46f88;
    color:#ffffff;
}


/* MATERI - HIJAU */
.menu-materi{
    background:
        linear-gradient(
            135deg,
            #bcefd2 0%,
            #dcf8e8 55%,
            #effcf5 100%
        );

    color:#12643d;
}

.menu-materi .siswa-dashboard-menu-arrow{
    background:#55c989;
    color:#ffffff;
}


/* VIDEO - MERAH MUDA */
.menu-video{
background:
        linear-gradient(
            135deg,
            #ffd5bd 0%,
            #ffe5d5 55%,
            #fff3eb 100%
        );

    color:#a4512c;
}
 

.menu-video .siswa-dashboard-menu-arrow{
      background:#e99166;
    color:#ffffff;
}
 


/* PENILAIAN & LATIHAN - KUNING ORANYE */
.menu-latihan{
    background:
        linear-gradient(
            135deg,
            #c9e6ff 0%,
            #e5f3ff 55%,
            #f2f9ff 100%
        );

    color:#0f3c88;
}
 

.menu-latihan .siswa-dashboard-menu-arrow{
 
    background:#64adf7;
    color:#ffffff;
}


/* HASIL BELAJAR - UNGU */
.menu-hasil{
    background:
        linear-gradient(
            135deg,
            #d7c2ff 0%,
            #e9dcff 55%,
            #f5efff 100%
        );

    color:#5720a6;
}

.menu-hasil .siswa-dashboard-menu-arrow{
    background:#9c6be8;
    color:#ffffff;
}

/* ========================================
   LAYOUT UTAMA DASHBOARD SISWA
======================================== */

.siswa-dashboard-main-grid{
    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    gap:22px;

    align-items:start;
}

.siswa-dashboard-main-left{
    min-width:0;
}

.siswa-dashboard-sidebar{
    display:flex;
    flex-direction:column;
    gap:80px;

    padding-top:22px;

    position:relative;
}

/* ========================================
   PESAN HARI INI - PAPAN KAYU
======================================== */

.siswa-dashboard-daily-note{
    position:relative;

    display:inline-flex;
align-items:center;
align-self:flex-start;

gap:8px;

width:auto;
max-width:max-content;

padding:8px 12px;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(126,74,24,.08) 0px,
            rgba(126,74,24,.08) 1px,
            transparent 1px,
            transparent 7px
        ),
        linear-gradient(
            180deg,
            #ffe4a8 0%,
            #f6c978 52%,
            #e9b764 100%
        );

    border:2px solid #d69a4a;
    border-radius:10px;

    box-shadow:
        0 8px 18px rgba(111,73,32,.18),
        inset 0 2px 0 rgba(255,255,255,.45),
        inset 0 -3px 0 rgba(142,84,28,.12);

    transform:rotate(-1.5deg);

    overflow:visible;
}


/* UJUNG PAPAN / KETEBALAN */

.siswa-dashboard-daily-note::before{
    content:"";

    position:absolute;
    left:8px;
    right:8px;
    bottom:-6px;

    height:6px;

    background:#c88d43;

    border-radius:0 0 7px 7px;

    z-index:-1;
}


/* PAKU KANAN ATAS */

.siswa-dashboard-daily-note::after{
    content:"";

    position:absolute;

    width:7px;
    height:7px;

    top:7px;
    right:10px;

    border-radius:50%;

    background:#8c6a44;

    box-shadow:
    -190px 2px 0 #8c6a44;

    opacity:.75;
}


/* IKON MATAHARI */

.siswa-dashboard-daily-note-icon{
    width:34px;
height:34px;

flex:0 0 34px;

font-size:19px;

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

    border-radius:8px;

    background:rgba(255,250,225,.72);

    border:1px solid rgba(157,101,32,.12);

    
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}


/* TEKS PAPAN */

.siswa-dashboard-daily-note-text{
    display:flex;
    flex-direction:column;

    color:#5d3b1d;

    line-height:1.18;
}

.siswa-dashboard-daily-note-text span{
    font-size:11px;
    font-weight:700;
}

.siswa-dashboard-daily-note-text strong{
    margin-top:3px;

    font-size:12px;
    font-weight:800;

    font-style:italic;

    color:#4e321a;
}

.siswa-dashboard-daily-note-icon{
    width:42px;
    height:42px;

    flex:0 0 42px;

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

    border-radius:12px;

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

    font-size:23px;
}

.siswa-dashboard-daily-note-text{
    display:flex;
    flex-direction:column;

    color:#6e572c;

    line-height:1.25;
}

.siswa-dashboard-daily-note-text span{
    font-size:12px;
    font-weight:700;
}

.siswa-dashboard-daily-note-text strong{
    margin-top:2px;

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

    font-style:italic;
}

/* ========================================
   PROFIL SISWA - COMPACT
======================================== */

.siswa-dashboard-profile-card{
    display:flex;
    align-items:center;
    gap:13px;

    padding:14px 16px;

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

    border:1px solid rgba(54,117,185,.12);
    border-radius:18px;

    box-shadow:0 8px 22px rgba(39,83,133,.07);
}


/* AVATAR */

.siswa-dashboard-profile-avatar{
    width:52px;
    height:52px;

    flex:0 0 52px;

    margin:0;

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

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #e7f4ff,
        #dffbef
    );

    color:#1457a0;

    font-size:21px;
    font-weight:900;
}


/* INFORMASI */

.siswa-dashboard-profile-info{
    min-width:0;
}

.siswa-dashboard-profile-label{
    display:block;

    margin-bottom:3px;

    color:#5990c7;

    font-size:9px;
    font-weight:800;

    letter-spacing:.8px;
}

.siswa-dashboard-profile-info h3{
    margin:0 0 3px;

    color:#123f7d;

    font-size:14px;
    line-height:1.25;
    font-weight:800;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* KELAS + NO URUT */

.siswa-dashboard-profile-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;

    color:#657d99;

    font-size:10.5px;
    font-weight:600;
}

.siswa-dashboard-profile-dot{
    color:#a5b8ca;
}


/* SEMANGAT */

.siswa-dashboard-profile-spirit{
    display:inline-flex;
    align-items:center;

    margin-top:7px;

    padding:4px 9px;

    background:#e8fbef;

    border-radius:999px;

    color:#17834d;

    font-size:10px;
    font-weight:700;
}

/* MAPEL AKTIF */

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

.siswa-dashboard-progress-card{
    display:grid;
    grid-template-columns:110px minmax(0, 1fr);
    align-items:center;
    gap:18px;

    padding:18px 20px;

    background:linear-gradient(
        135deg,
        #edf8ff 0%,
        #effff7 100%
    );

    border:1px solid rgba(49,146,150,.12);
    border-radius:22px;

    box-shadow:0 10px 28px rgba(39,83,133,.07);
    transform:none;
}
@media (min-width:701px){

    .siswa-dashboard-progress-card{
        transform:translateY(-160px);
    }

}

/* LINGKARAN */

.siswa-dashboard-progress-circle{
    --size:96px;

    width:var(--size);
    height:var(--size);

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

    border-radius:50%;

    background:
        conic-gradient(
            #27b36a calc(var(--progress) * 1%),
            #dceee6 0
        );

    position:relative;
}

.siswa-dashboard-progress-circle::before{
    content:"";

    position:absolute;

    width:72px;
    height:72px;

    border-radius:50%;

    background:#ffffff;
}

.siswa-dashboard-progress-circle-inner{
    position:relative;
    z-index:2;

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

.siswa-dashboard-progress-circle-inner strong{
    color:#12678a;

    font-size:20px;
    line-height:1;
    font-weight:900;
}

.siswa-dashboard-progress-circle-inner span{
    margin-top:4px;

    color:#6b8797;

    font-size:9px;
    font-weight:700;
}


/* INFORMASI KANAN */

.siswa-dashboard-progress-info{
    min-width:0;
}

.siswa-dashboard-progress-label{
    display:block;

    margin-bottom:10px;

    color:#43869e;

    font-size:11px;
    font-weight:800;
    letter-spacing:.5px;
}

.siswa-dashboard-progress-list{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.siswa-dashboard-progress-item{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    color:#55768a;

    font-size:11px;
    font-weight:600;
}

.siswa-dashboard-progress-item strong{
    flex:0 0 auto;

    color:#12678a;

    font-size:11px;
    font-weight:900;
}

/* =========================================
   PENGUMUMAN TERBARU
========================================= */

.siswa-dashboard-pengumuman{
    width:100%;
    max-width:560px;

    margin-top:5px;
    margin-left:30px;

    transform:none;
}
@media (min-width:701px){

    .siswa-dashboard-pengumuman{
        transform:translateY(-207px);
    }

}

.siswa-dashboard-pengumuman-panel{
    background:
        linear-gradient(
            135deg,
            rgba(224,244,255,.94) 0%,
            rgba(232,239,255,.94) 40%,
            rgba(244,231,255,.92) 72%,
            rgba(255,232,240,.90) 100%
        );

    border:1px solid rgba(135,165,225,.35);
    border-radius:20px;

    box-shadow:
        0 12px 30px rgba(31,55,88,.09);

    overflow:hidden;

    backdrop-filter:blur(4px);
}

.siswa-dashboard-pengumuman-header{
    padding:7px 16px 6px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fbff 100%
        );

    border-bottom:1px solid #e7edf5;
}

.siswa-dashboard-pengumuman-title{
    display:flex;
    align-items:center;
    gap:10px;
}

.siswa-dashboard-pengumuman-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:28px;
    height:28px;

    font-size:18px;
}

.siswa-dashboard-pengumuman-title h2{
    margin:0;

    font-size:17px;
    font-weight:800;

    color:#18355f;
}

.siswa-dashboard-pengumuman-list{
    padding:0 22px;
}

.siswa-dashboard-pengumuman-item{
    display:grid;
    grid-template-columns:12px minmax(0,1fr);

    gap:12px;

    padding:10px 0;

    border-bottom:1px solid #edf1f6;
}

.siswa-dashboard-pengumuman-item:last-child{
    border-bottom:none;
}

.siswa-dashboard-pengumuman-dot{
    width:10px;
    height:10px;

    margin-top:7px;

    border-radius:50%;

    background:#3b82f6;
}

.siswa-dashboard-pengumuman-content{
    min-width:0;
}

.siswa-dashboard-pengumuman-item-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;
}

.siswa-dashboard-pengumuman-item-top h3{
    margin:0;

    font-size:15px;
    line-height:1.35;
    font-weight:800;

    color:#17345e;
}

.siswa-dashboard-pengumuman-item-top time{
    flex-shrink:0;

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

    color:#6f83a0;
}

.siswa-dashboard-pengumuman-content p{
    margin:4px 0 0;

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

    color:#657791;
}

.siswa-dashboard-pengumuman-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    min-height:90px;
    padding:18px;

    color:#7b8ca4;
}

.siswa-dashboard-pengumuman-empty p{
    margin:0;
}


/* TABLET */

@media(max-width:900px){

    .siswa-dashboard-pengumuman{
        margin-top:22px;
    }

    .siswa-dashboard-pengumuman-header{
        padding:16px 18px 13px;
    }

    .siswa-dashboard-pengumuman-list{
        padding:0 18px;
    }

}


/* HP */

@media(max-width:600px){

    .siswa-dashboard-pengumuman{
    width:100%;
    max-width:none;

    margin-top:20px;
    margin-left:0;
    transform:none;
}

    .siswa-dashboard-pengumuman-panel{
        border-radius:16px;
    }

    .siswa-dashboard-pengumuman-header{
        padding:14px 15px 12px;
    }

    .siswa-dashboard-pengumuman-title h2{
        font-size:16px;
    }

    .siswa-dashboard-pengumuman-icon{
        width:30px;
        height:30px;

        font-size:19px;
    }

    .siswa-dashboard-pengumuman-list{
        padding:0 15px;
    }

    .siswa-dashboard-pengumuman-item{
        grid-template-columns:10px minmax(0,1fr);

        gap:10px;

        padding:13px 0;
    }

    .siswa-dashboard-pengumuman-dot{
        width:8px;
        height:8px;

        margin-top:6px;
    }

    .siswa-dashboard-pengumuman-item-top{
        display:block;
    }

    .siswa-dashboard-pengumuman-item-top h3{
        font-size:12px;
    }

    .siswa-dashboard-pengumuman-item-top time{
        display:block;

        margin-top:3px;

        font-size:11px;
    }

    .siswa-dashboard-pengumuman-content p{
        margin-top:4px;

        font-size:11px;
    }

}

/* ========================================
   RESPONSIVE DASHBOARD SISWA
   DESKTOP / TABLET / HP
======================================== */


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

@media (min-width:1100px){

    .mapel-dashboard-section{
        min-height:calc(100vh - 82px);
        padding:10px 0 16px;
    }

    .mapel-dashboard-container{
        width:92%;
        max-width:1380px;
        margin:0 auto;
    }

    .siswa-dashboard-hero{
    min-height:185px;

    grid-template-columns:1.2fr .8fr;

    gap:18px;

    padding:16px 34px;

    margin-top:-4px;
    margin-bottom:8px;
}

    .siswa-dashboard-hero-label{
        margin-bottom:5px;
        font-size:17px;
    }

    .siswa-dashboard-hero-copy h2{
        font-size:32px;
    }

    .siswa-dashboard-hero-wave{
        font-size:25px;
    }

    .siswa-dashboard-hero-copy p{
        margin:10px 0 14px;

        font-size:14px;
        line-height:1.5;
    }

    .siswa-dashboard-hero-badges{
        gap:8px;
    }

    .siswa-dashboard-hero-badges span{
        min-height:32px;

        padding:0 12px;

        font-size:12px;
    }

    .siswa-dashboard-hero-visual{
        min-height:165px;
    }

    .siswa-dashboard-menu{
    margin-top:0;
    margin-bottom:12px;

    padding-left:34px;
    padding-right:10px;
}

    .siswa-dashboard-menu-grid{
    width:100%;

    margin-left:0;
    margin-right:0;

    grid-template-columns:repeat(5, minmax(0,1fr));

    gap:12px;
}

    .siswa-dashboard-menu-card{
        min-height:170px;

        padding:14px 13px 12px;

        border-radius:18px;
    }

    .siswa-dashboard-menu-icon{
        width:60px;
        height:60px;

        margin-bottom:10px;

        border-radius:15px;
    }

    .siswa-dashboard-menu-icon img{
        width:43px;
        height:43px;
    }

    .siswa-dashboard-menu-card h3{
        margin-bottom:5px;

        font-size:14px;
    }

    .siswa-dashboard-menu-card p{
        font-size:11px;
        line-height:1.4;
    }

    .siswa-dashboard-menu-arrow{
        width:31px;
        height:31px;

        font-size:18px;
    }

}


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

@media (min-width:701px) and (max-width:1099px){

    .mapel-dashboard-section{
        min-height:auto;
        padding:18px 0 28px;
    }

    .mapel-dashboard-container{
        width:92%;
        max-width:960px;
    }

    .siswa-dashboard-hero{
        min-height:210px;

        grid-template-columns:1.15fr .85fr;

        gap:20px;

        padding:24px 26px;

        margin-top:0;
        margin-bottom:16px;
    }

    .siswa-dashboard-hero-label{
        font-size:17px;
    }

    .siswa-dashboard-hero-copy h2{
        font-size:30px;
    }

    .siswa-dashboard-hero-copy p{
        font-size:13px;
    }

    .siswa-dashboard-hero-badges span{
        min-height:32px;

        padding:0 11px;

        font-size:11px;
    }

    .siswa-dashboard-menu-grid{
        width:100%;

        grid-template-columns:repeat(3, minmax(0,1fr));

        gap:14px;
    }

    .siswa-dashboard-menu-card{
        min-height:175px;

        padding:16px 14px;
    }

    .siswa-dashboard-menu-icon{
        width:60px;
        height:60px;
    }

    .siswa-dashboard-menu-icon img{
        width:43px;
        height:43px;
    }

    .siswa-dashboard-menu-card h3{
        font-size:14px;
    }

    .siswa-dashboard-menu-card p{
        font-size:11px;
    }

}


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

@media (max-width:700px){
        .siswa-dashboard-main-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .siswa-dashboard-main-left{
        min-width:0;
        width:100%;
    }

    .siswa-dashboard-sidebar{  
    width:100%;  
    min-width:0;  
    padding-top:0;  
    gap:14px;

    position:static;

    margin-top:-65px;
}
.siswa-dashboard-image-slot-bottom{
    position:static !important;
    width:100%;
    margin-top:10px;

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

.siswa-dashboard-image-slot-bottom img{
    display:block;
    width:100%;
    max-width:280px;
    height:auto;
    object-fit:contain;
}
/* HERO KHUSUS HP */
.siswa-dashboard-hero{
    position:relative;
}

.siswa-dashboard-hero-copy{
    position:relative;
    z-index:2;

    padding-right:135px;
}

.siswa-dashboard-hero-visual{
    position:absolute;

    top:-75px;
    right:-18px;

    width:120px;

    z-index:1;
}

.siswa-dashboard-hero-image{
    display:block;

    width:100%;
    max-width:120px;
    height:auto;

    object-fit:contain;
}

    .mapel-dashboard-section{
        min-height:auto;

        padding:14px 0 30px;
    }

    .mapel-dashboard-container{
        width:92%;
        max-width:none;
    }

    .siswa-dashboard-hero{
    position:relative;

    min-height:auto;

    grid-template-columns:1fr;

    gap:8px;

    padding:18px 8px 14px;

    margin-top:0;
    margin-bottom:12px;

    text-align:left;
}

.siswa-dashboard-hero-copy{
    position:relative;
    max-width:none;

    padding-right:82px;
}

.siswa-dashboard-hero-label{
    margin-bottom:4px;

    font-size:15px;
}

.siswa-dashboard-hero-copy h2{
    font-size:25px;
    line-height:1.15;
    white-space:nowrap;
}

.siswa-dashboard-hero-wave{
    font-size:21px;
}

.siswa-dashboard-hero-copy p{
    margin:9px 0 13px;

    width:110%;
    max-width:none;

    font-size:13px;
    line-height:1.5;
}

.siswa-dashboard-hero-badges{
    justify-content:flex-start;
    flex-wrap:nowrap;

    gap:7px;
}

.siswa-dashboard-hero-badges span{
    min-height:30px;

    padding:0 10px;

    font-size:10px;

    white-space:nowrap;
}



.siswa-dashboard-panda{
    font-size:64px;
    line-height:1;
}

.siswa-dashboard-hero-note{
    display:none;
}
.siswa-dashboard-profile-card{
    display:none;
}
.siswa-dashboard-daily-note{
    align-self:center;
    margin-left:auto;
    margin-right:auto;
}

    .siswa-dashboard-menu{
        margin-top:0;
        margin-bottom:15px;
    }

    .siswa-dashboard-menu-grid{
        width:100%;

        grid-template-columns:repeat(2, minmax(0,1fr));

        gap:10px;
    }

    .siswa-dashboard-menu-card{
        min-height:165px;

        padding:14px 10px 12px;

        border-radius:17px;
    }

    .siswa-dashboard-menu-icon{
        width:56px;
        height:56px;

        margin-bottom:9px;

        border-radius:14px;
    }

    .siswa-dashboard-menu-icon img{
        width:40px;
        height:40px;
    }

    .siswa-dashboard-menu-card h3{
        margin-bottom:5px;

        font-size:13px;
    }

    .siswa-dashboard-menu-card p{
        font-size:10.5px;
    }

    .siswa-dashboard-menu-arrow{
        width:30px;
        height:30px;

        font-size:17px;
    }

}
.siswa-dashboard-progress-card{
    grid-template-columns:82px minmax(0, 1fr);

    gap:14px;

    padding:16px;
}

.siswa-dashboard-progress-circle{
    --size:76px;
}

.siswa-dashboard-progress-circle::before{
    width:57px;
    height:57px;
}

.siswa-dashboard-progress-circle-inner strong{
    font-size:17px;
}

.siswa-dashboard-progress-circle-inner span{
    font-size:8px;
}

.siswa-dashboard-progress-label{
    margin-bottom:8px;

    font-size:10px;
}

.siswa-dashboard-progress-list{
    gap:6px;
}

.siswa-dashboard-progress-item,
.siswa-dashboard-progress-item strong{
    font-size:10px;
}

/* =========================
   MENU BELAJAR
========================= */

.mapel-menu-section{
    margin-top:28px;
}

.mapel-section-heading{
    margin-bottom:13px;
}

.mapel-section-heading span{
    display:block;

    margin-bottom:3px;

    font-size:11px;
    font-weight:700;

    color:#7a899e;
}

.mapel-section-heading h2{
    margin:0;

    font-size:20px;

    color:#243957;
}


/* GRID */

.mapel-menu-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:12px;
}

.mapel-menu-card{
    min-width:0;
    min-height:128px;

    padding:15px 12px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    background:#ff0000 !important;

    border:2px solid rgba(23,78,166,.32);
    border-radius:18px;

    text-decoration:none;

    box-shadow:0 5px 15px rgba(38,67,105,.05);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.mapel-menu-card:hover{
    transform:translateY(-5px);
    border-color:#b9d1f5;
    box-shadow:0 12px 26px rgba(23,78,166,.13);
}
.mapel-menu-card:active{
    transform:scale(.98);
}

.mapel-menu-icon{
    width:48px;
    height:48px;

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

    margin-bottom:11px;

    background:#eef5ff;

    border-radius:14px;

    font-size:25px;
}

.mapel-menu-text{
    min-width:0;

    display:flex;
    flex-direction:column;
}

.mapel-menu-text strong{
    font-size:14px;
    line-height:1.3;

    color:#273b58;
}

.mapel-menu-text span{
    margin-top:4px;

    font-size:11px;
    line-height:1.4;

    color:#7c8a9e;
}


/* =========================
   HP SANGAT KECIL
========================= */

@media (max-width:360px){

    .mapel-dashboard-container{
        width:94%;
    }

    .mapel-welcome-card{
        padding:20px;
    }

    .mapel-welcome-card h2{
        font-size:22px;
    }

    .mapel-welcome-panda{
        font-size:44px;
    }

    .mapel-menu-grid{
        gap:10px;
    }

    .mapel-menu-card{
        min-height:122px;
        padding:13px 10px;
    }
}


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

@media (min-width:700px){

    .mapel-dashboard-section{
        padding-top:30px;
    }

    .mapel-dashboard-container{
        width:90%;
    }

    .mapel-title-row h1{
        font-size:29px;
    }

    .mapel-welcome-card{
        min-height:180px;
        padding:30px 36px;
    }

    .mapel-welcome-card h2{
        font-size:32px;
    }

    .mapel-welcome-card p{
        max-width:none;
        font-size:15px;
    }

    .mapel-welcome-panda{
        font-size:72px;
    }

    .mapel-student-card{
        padding:18px 20px;
    }

    .mapel-menu-grid{
        grid-template-columns:repeat(3, 1fr);
        gap:16px;
    }

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

    .mapel-menu-card{
        min-height:145px;
        padding:20px;
    }

    .mapel-menu-icon{
        width:56px;
        height:56px;
        font-size:29px;
    }

    .mapel-menu-text strong{
        font-size:15px;
    }

    .mapel-menu-text span{
        font-size:12px;
    }
}
/* ========================================
   AREA SISWA - HEADER BARU
======================================== */

.siswa-area{
    margin:0;
    background:#f4f8fd;
    color:#25324a;
}


/* HEADER */

.siswa-app-header{
    position:sticky;
    top:0;
    z-index:1000;

    width:100%;

    background:
    linear-gradient(
        110deg,
        rgba(23,75,154,.85) 0%,
        rgba(23,107,195,.85) 52%,
        rgba(21,152,223,.85) 100%
    );

    border-radius:
        0 0 0px 70px;

    box-shadow:
        0 5px 20px rgba(22,67,126,.16);

    overflow:hidden;
}
/* ORNAMEN HEADER KIRI */

.siswa-app-header::before{
    content:"";

    position:absolute;
    left:-70px;
    top:-105px;

    width:190px;
    height:190px;

    border-radius:50%;

    background:
        rgba(150,225,255,.34);

    pointer-events:none;
}


/* ORNAMEN HEADER KANAN */

.siswa-app-header::after{
    content:"";

    position:absolute;
    right:-65px;
    top:-105px;

    width:190px;
    height:190px;

    border-radius:50%;

    background:
        rgba(103,224,185,.28);

    pointer-events:none;
}


/* PASTIKAN ISI HEADER DI ATAS ORNAMEN */

.siswa-app-header-inner{
    position:relative;
    z-index:2;
}


/* ISI HEADER */

.siswa-app-header-inner{
    width:94%;
    max-width:1380px;
    min-height:62px;

    margin:0 auto;

    display:flex;
    align-items:center;

    gap:30px;
}


/* ========================================
   BRAND
======================================== */

.siswa-app-brand{
    flex:0 0 auto;

    display:flex;
    align-items:center;

    gap:11px;

    text-decoration:none;
}


.siswa-app-logo{
    width:48px;
    height:48px;

    flex:0 0 48px;

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


.siswa-app-logo-image{
    width:100%;
    height:100%;

    display:block;
    object-fit:contain;
}


.siswa-app-brand-text{
    display:flex;
    flex-direction:column;

    white-space:nowrap;
}


.siswa-app-brand-text strong{
    color:#ffffff;

    font-size:20px;
    font-weight:800;
    line-height:1.15;
}


.siswa-app-brand-text span{
    margin-top:4px;

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

    font-size:10px;
    font-weight:600;
}


/* ========================================
   NAVIGASI
======================================== */

.siswa-app-nav{
    flex:1;

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

    gap:6px;
}


.siswa-app-nav-link{
    position:relative;

    min-height:34px;
    padding:0 8px;

    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;

    gap:6px;

    border-radius:11px;

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

    font-size:12px;
    font-weight:700;

    white-space:nowrap;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.siswa-app-nav-link:hover{
    background:rgba(255,255,255,.12);
    color:#ffffff;

    transform:translateY(-1px);
}


.siswa-app-nav-link.active{
    background:#ffffff;
    color:#174ea6;

    box-shadow:
        0 6px 16px rgba(13,55,110,.12);
}


.siswa-app-nav-link.active::after{
    display:none;
}


.siswa-app-nav-icon{
    width:18px;
    height:18px;

    flex:0 0 18px;

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

    line-height:1;
}


.siswa-app-nav-icon svg{
    width:18px;
    height:18px;

    display:block;

    stroke:currentColor;
}

/* ========================================
   PROFIL SISWA
======================================== */

.siswa-app-user{
    flex:0 0 auto;

    display:flex;
    align-items:center;

    gap:9px;
}


.siswa-app-user-avatar{
    width:40px;
    height:40px;

    flex:0 0 40px;

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

    border:2px solid rgba(255,255,255,.65);
    border-radius:50%;

    background:#ffffff;

    color:#174ea6;

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

    box-shadow:
        0 4px 12px rgba(0,0,0,.10);
}


.siswa-app-user-text{
    min-width:0;

    display:flex;
    flex-direction:column;
}


.siswa-app-user-text strong{
    max-width:125px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#ffffff;

    font-size:12px;
    font-weight:800;
}


.siswa-app-user-text span{
    margin-top:2px;

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

    font-size:10px;
    font-weight:600;
}


/* ========================================
   LOGOUT
======================================== */

.siswa-logout-form{
    margin:0;
}


.siswa-logout-button{
    width:36px;
    height:36px;

    padding:0;

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

    border:1px solid rgba(255,255,255,.18);
    border-radius:10px;

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

    color:#ffffff;

    font-size:18px;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.siswa-logout-button:hover{
    background:rgba(255,255,255,.20);
    transform:translateY(-1px);
}


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

@media(max-width:1100px){

    .siswa-app-header-inner{
        gap:16px;
    }

    .siswa-app-nav{
        gap:2px;
    }

    .siswa-app-nav-link{
    position:relative;

    min-height:34px;
    padding:0 8px;

    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;

    gap:6px;

    border-radius:11px;

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

    font-size:12px;
    font-weight:700;

    white-space:nowrap;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

    .siswa-app-nav-link span:last-child{
        display:none;
    }

    .siswa-app-nav-icon{
    width:20px;
    height:20px;
}

.siswa-app-nav-icon svg{
    width:20px;
    height:20px;
}

}


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

@media(max-width:700px){

    .siswa-app-header-inner{
        width:92%;
        min-height:70px;

        gap:12px;
    }

    .siswa-app-logo{
        width:42px;
        height:42px;

        flex-basis:42px;
    }

    .siswa-app-brand-text strong{
        font-size:17px;
    }

    .siswa-app-brand-text span{
        display:none;
    }

    .siswa-app-nav{
        display:none;
    }

    .siswa-app-user{
        margin-left:auto;
    }

    .siswa-app-user-text{
        display:none;
    }

    .siswa-app-user-avatar{
        width:36px;
        height:36px;

        flex-basis:36px;
    }

    .siswa-logout-button{
        width:34px;
        height:34px;
    }

}

/* =========================
   HALAMAN BUKU & PDF SISWA
========================= */

.buku-page{
    padding:24px 16px 50px;
}

.buku-container{
    width:100%;
    max-width:1180px;
    margin:0 auto;
}

/* =========================
   HEADER HALAMAN BUKU
========================= */

.buku-title-header{
    position:relative;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;

    min-height:102px;

    margin-bottom:18px;
}


.buku-title-row{
    display:flex;
    align-items:flex-start;
    gap:16px;

    margin:0;

    transform:translateY(-12px);
}


.buku-title-icon{
    width:62px;
    height:62px;

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

    flex-shrink:0;

    font-size:50px;

    background:transparent;

border:none;
border-radius:0;

box-shadow:none;

backdrop-filter:none;
transform:translate(15px, -10px);
}


.buku-title-copy{
    display:flex;
    flex-direction:column;
}


.buku-title-label{
    display:block;

    margin-bottom:2px;

    color:#64748b;

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

    text-transform:uppercase;
    letter-spacing:.7px;
}


.buku-title-row h1{
    margin:0;

    color:#17345f;

    font-size:38px;
    line-height:1.05;

    font-weight:900;
}


.buku-title-row p{
    margin:-5px 0 0;

    color:#111827;

    font-size:17px;
    font-weight:800;
}


/* KUTIPAN */

.buku-title-quote{
    position:static;

    display:flex;
    align-items:flex-start;
    gap:5px;

    max-width:430px;

    margin-top:1px;
    margin-left:15px;

    padding:0;

    background:transparent;

    border:none;
    border-radius:0;

    box-shadow:none;

    backdrop-filter:none;
}

.buku-title-quote-icon{
    flex-shrink:0;

    font-size:18px;
}


.buku-title-quote p{
    margin:0;

    color:#24466e;

    font-size:15px;
    line-height:1.5;

    font-weight:600;
}

.buku-title-quote-line-2{
    display:inline-block;
    margin-left:8px;
}

/* TOMBOL KEMBALI */

.buku-title-header .siswa-page-back-button{
    position:relative;
    z-index:2;

    flex-shrink:0;
}

.buku-collection-header{
    width:100%;
    height:35px;
    margin-left:auto;
    margin-right:auto;

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

    margin-bottom:11px;

    padding:1px 15px;

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

    border:1px solid rgba(255,255,255,.92);
    border-radius:20px;

    box-shadow:
        0 10px 28px rgba(23,78,166,.08);

    backdrop-filter:blur(10px);
    transform:translateY(-20px);
}
@media (min-width:481px){

    .buku-collection-header{
        width:85%;
    }

}
.buku-collection-label{
    display:block;

    margin-bottom:2px;

    color:#3873b9;

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

    letter-spacing:.5px;
}


.buku-collection-header h2{
    margin:0;

    color:#17345f;

    font-size:20px;
    font-weight:900;
}


.buku-collection-count{
    display:flex;
    align-items:baseline;
    gap:6px;

    flex-shrink:0;

    padding:9px 14px;

    background:transparent;
    border-radius:0;

    color:#315e9a;
}


.buku-collection-count strong{
    color:#174ea6;

    font-size:15px;
    font-weight:900;
}


.buku-collection-count span{
    font-size:13px;
    font-weight:700;
}

/* =========================
   GRID BUKU
========================= */

.buku-grid{
    display:grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:22px 14px;

    padding:20px;

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

    border:1px solid rgba(255,255,255,.9);
    border-radius:24px;

    box-shadow:
        0 12px 35px rgba(23,78,166,.08);

    backdrop-filter:blur(8px);

}


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

.buku-card{
    display:flex;
    flex-direction:column;

    min-width:0;

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

    border:1px solid rgba(220,234,250,.9);
    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 8px 20px rgba(25,69,120,.08);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.buku-card:hover{
    transform:translateY(-4px);

    border-color:rgba(34,197,94,.48);

    box-shadow:
        0 14px 30px rgba(23,78,166,.14),
        0 0 0 2px rgba(34,197,94,.08);
}


/* =========================
   COVER BUKU
========================= */

.buku-cover{
    position:relative;

    width:100%;
    height:180px;

    display:block;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #eaf3ff,
            #f8fbff
        );

    text-decoration:none;
}


.buku-cover::after{
    content:"";

    position:absolute;

    top:0;
    right:0;

    width:8px;
    height:100%;

    background:
        linear-gradient(
            to left,
            rgba(19,52,95,.18),
            rgba(255,255,255,.08)
        );

    pointer-events:none;
}


.buku-cover img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .28s ease;
}


.buku-card:hover .buku-cover img{
    transform:scale(1.025);
}


/* COVER KOSONG */

.buku-cover-placeholder{
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

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

    gap:8px;

    background:
        linear-gradient(
            145deg,
            #eaf3ff,
            #f8fbff
        );

    color:#174ea6;
}


.buku-cover-placeholder span{
    font-size:44px;
}


.buku-cover-placeholder small{
    font-size:11px;
    font-weight:900;

    letter-spacing:1.2px;
}


/* =========================
   INFORMASI BUKU
========================= */

.buku-card-content{
    display:flex;
    flex-direction:column;

    flex:1;

    padding:13px 1px 14px;

    text-align:center;
}


.buku-card-content h3{
    width:100%;
    margin:0 0 8px;

    min-height:43px;

    color:#17345f;

    font-size:12px;
    line-height:1.4;

    font-weight:900;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}


/* META */

.buku-meta{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:5px;
    margin-top:-14px;
    margin-bottom:-3px;
}


.buku-meta span{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:4px 8px;

    background:transparent;

    border:none;
    border-radius:0;

    color:#315e9a;

    font-size:11px;
    font-weight:800;
}


/* =========================
   TOMBOL BACA
========================= */

.buku-open-button{
    width:90%;

    min-height:30px;

    margin-top:auto;
    margin-left:auto;
    margin-right:auto;

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

    gap:7px;

    padding:5px 12px;

    background:
        linear-gradient(
            135deg,
            #2578ee,
            #1597ef
        );

    border-radius:11px;

    color:#fff;

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

    text-decoration:none;

    box-shadow:
        0 7px 16px rgba(37,120,238,.22);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}


.buku-open-button span{
    font-size:15px;
}


.buku-open-button:hover{
    color:#fff;

    transform:translateY(-1px);

    filter:brightness(1.04);

    box-shadow:
        0 10px 20px rgba(37,120,238,.28);
}
/* =========================
   PAGINATION BUKU
========================= */

.buku-pagination{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    margin-top:18px;
    margin-bottom:14px;
}


.buku-pagination-number,
.buku-pagination-arrow{
    width:38px;
    height:38px;

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

    border:1px solid rgba(202,221,243,.85);
    border-radius:10px;

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

    color:#174ea6;

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

    text-decoration:none;

    box-shadow:
        0 5px 13px rgba(23,78,166,.08);

    transition:
        transform .18s ease,
        background .18s ease;
}


.buku-pagination-number:hover,
.buku-pagination-arrow:hover{
    transform:translateY(-2px);
}


.buku-pagination-number.active{
    background:
        linear-gradient(
            135deg,
            #2578ee,
            #1597ef
        );

    border-color:transparent;

    color:#ffffff;

    box-shadow:
        0 7px 16px rgba(37,120,238,.24);
}


.buku-pagination-arrow.disabled{
    opacity:.35;
    cursor:default;
}
/* =========================
   MOTIVASI MEMBACA
========================= */

.buku-reading-footer{
    width:85%;

    margin:-2px auto 0;

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


.buku-reading-panda{
    display:none;
}


.buku-reading-message{
    margin-left:auto;

    text-align:left;
}


.buku-reading-message p{
    margin:0;

    color:#270d85;

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

    font-weight:700;
    font-style:italic;
    transform:rotate(-5deg);
    transform-origin:center;
}


.buku-reading-message p span{
    font-style:normal;
}
@media (max-width:600px){

    .buku-reading-footer{
        width:100%;

        margin-top:12px;

        justify-content:center;
    }

    .buku-reading-message{
        margin-left:0;

        text-align:center;
    }

    .buku-reading-message p{
        font-size:12px;
        line-height:1.5;
    }

}
/* EMPTY STATE */

.buku-empty{
    padding:45px 20px;

    text-align:center;

    background:#fff;

    border:1px dashed #cfdced;

    border-radius:20px;
}

.buku-empty-icon{
    margin-bottom:12px;

    font-size:44px;
}

.buku-empty h2{
    margin:0 0 6px;

    color:#17345f;
}

.buku-empty p{
    margin:0;

    color:#6d7f96;
}


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

@media (min-width:700px){

    .buku-page{
        padding:30px 28px 60px;
    }

    .buku-grid{
        grid-template-columns:
            repeat(3, minmax(0,1fr));

        gap:24px 22px;
    }

    .buku-title-row{
        margin-bottom:30px;
    }

    .buku-title-row h1{
        font-size:34px;
    }

    .buku-card-content h2{
        font-size:17px;
    }

}


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

@media (min-width:1100px){

    .buku-grid{
        grid-template-columns:
            repeat(5, 1fr);

        width:85%;

        margin-left:auto;
        margin-right:auto;

        gap:22px 24px;
        transform:translateY(-15px);
    }

    .buku-card{
    width:100%;
    max-width:200px;

    justify-self:center;
}

}


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

@media (max-width:480px){

    .buku-page{
        padding:18px 14px 40px;
    }

    .buku-page .mapel-back-link{
        margin-bottom:20px;

        font-size:14px;
    }

    .buku-title-icon{
        width:50px;
        height:50px;

        font-size:26px;

        border-radius:14px;
    }

    .buku-title-row{
    gap:11px;
    transform:translateX(-25px);
}

    .buku-title-row h1{
        font-size:25px;
    }

    .buku-title-row p{
        font-size:14px;
    }

    .buku-grid{
    gap:20px 12px;

    transform:translateY(-20px);

    background:rgba(255,255,255,.40);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

    .buku-cover{
        border-radius:12px;
    }

    .buku-card-content{
        padding-top:10px;
    }

    .buku-card-content h2{
        font-size:14px;
    }

    .buku-meta span{
        padding:3px 6px;

        font-size:10px;
    }

    .buku-description{
        font-size:11px;
    }

    .buku-open-button{
        min-height:32px;

        padding:6px 9px;

        font-size:11px;
    }
    .buku-title-quote{
        width:300px;
        max-width:300px;
        margin-left:-25px;
    }

    .buku-title-quote p{
        font-size:13px;
        line-height:1.4;
        white-space:nowrap;
    }
    .buku-title-header .siswa-page-back-button{
    padding:4px 6px;
    font-size:12px;
    gap:5px;
    border-radius:12px;
    transform:translateX(-90px);
    }
    .buku-title-header .siswa-page-back-button{
    padding:4px 6px;
    font-size:12px;
    gap:5px;
    border-radius:12px;
    transform:translateX(-90px);
    }
}


/* =========================
   KELAS PANDA - CARD ORANGE HOVER
========================= */

.mapel-menu-card,
.mapel-welcome-card,
.mapel-student-card,
.buku-card{
    border:1px solid rgba(255,145,40,.70);

    /* normal: tanpa shadow */
    box-shadow:none;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


/* SAAT TERKENA KURSOR */

.mapel-menu-card:hover,
.mapel-welcome-card:hover,
.mapel-student-card:hover,
.buku-card:hover{
    border-color:#ff8a1f;

    transform:translateY(-4px);

    box-shadow:
        0 12px 25px rgba(255,138,31,.18),
        0 0 18px rgba(255,138,31,.28);
}
/* =========================
   KELAS PANDA - CARD BLUE HOVER
========================= */

.mapel-menu-card,
.mapel-welcome-card,
.mapel-student-card,
.buku-card{
    border:1px solid rgba(47,124,255,.45);

    /* Normal: tanpa shadow */
    box-shadow:none;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


/* SAAT TERKENA KURSOR */

.mapel-menu-card:hover,
.mapel-welcome-card:hover,
.mapel-student-card:hover,
.buku-card:hover{
    border-color:#2f7cff;

    transform:translateY(-4px);

    box-shadow:
        0 12px 25px rgba(25,69,120,.13),
        0 0 18px rgba(47,124,255,.28);
}
/* =========================
   KELAS PANDA - CARD GREEN
========================= */

/* SEMUA CARD */
.mapel-menu-card,
.mapel-welcome-card,
.mapel-student-card,
.buku-card{
    border:3px solid #16a34a;
    box-shadow:none;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


/* =========================
   HOVER HANYA CARD YANG BISA DIPILIH
========================= */

.mapel-menu-card:hover,
.buku-card:hover{
    border-color:#2ea05a;

    transform:translateY(-4px);

    box-shadow:
        0 12px 25px rgba(30,110,65,.13),
        0 0 18px rgba(46,160,90,.28);
}


/* =========================
   CARD IDENTITAS - TIDAK BERGERAK
========================= */

.mapel-welcome-card:hover,
.mapel-student-card:hover{
    transform:none;
    box-shadow:none;

    border-color:rgba(46,160,90,.45);
}
/* ========================================
   FLIPBOOK READER
   ======================================== */

html:has(.flipbook-reader),
body:has(.flipbook-reader){
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
}

body:has(.flipbook-reader){
    background:#eaf5f7;
}

.flipbook-reader{
    position:relative;

    width:100vw;
    height:100dvh;

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

    overflow:hidden;

    padding:0;
}

#flipbook{
    width:100vw;
    height:100dvh;

    max-width:none;
    max-height:none;

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

    margin:0 auto;
}

.flipbook-page{
    overflow:hidden;
    background:#fff;
}

.flipbook-page canvas{
    display:block;

    width:100% !important;
    height:auto !important;

    max-width:100%;
    max-height:100%;

    margin:auto;

    object-fit:contain;
}

.flipbook-controls{
    position:fixed;

    left:50%;
    top:auto;
    bottom:10px;

    transform:translateX(-50%);

    z-index:9999;

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

    gap:4px;

    padding:4px 6px;

    border:1px solid rgba(255,255,255,.40);
    border-radius:11px;

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

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);

    box-shadow:
        0 4px 14px rgba(24,56,94,.10);
}

.flipbook-control-button{
    width:28px;
    height:28px;

    padding:0;

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

    border:0;
    border-radius:7px;

    background:rgba(243,247,252,.68);

    color:#174ea6;

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

    cursor:pointer;
}

.flipbook-page-info{
    min-width:40px;

    text-align:center;

    color:#24466f;

    font-size:11px;
    font-weight:800;
}
/* =========================
   TOMBOL SELESAI MEMBACA
========================= */

.flipbook-finish-button{
    min-height:28px;

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

    padding:0 11px;

    border:0;
    border-radius:7px;

    background:linear-gradient(
        135deg,
        #22c55e,
        #16a34a
    );

    color:#ffffff;

    font-size:11px;
    font-weight:800;
    line-height:1;

    white-space:nowrap;

    cursor:pointer;

    box-shadow:0 4px 10px rgba(22,163,74,.20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.flipbook-finish-button:hover{
    transform:translateY(-1px);

    box-shadow:0 6px 14px rgba(22,163,74,.28);
}

.flipbook-finish-button:active{
    transform:translateY(0);
}
.flipbook-zoom-area{
    width:100%;
    height:100%;

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

    overflow:hidden;

    touch-action:none;
}

.flipbook-zoom-content{
    width:100vw;
    height:100dvh;

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


/* =========================
   FLIPBOOK - MOBILE
========================= */

@media (max-width:600px){

    .flipbook-reader{
        width:100vw;
        height:100dvh;

        padding:8px 8px 64px;

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

        overflow:hidden;
    }

    #flipbook{
        margin:0 auto;
    }

    .flipbook-page{
        overflow:hidden;
        background:#fff;
    }

    .flipbook-page canvas{
        display:block;

        width:100%;
        height:100%;
    }

    .flipbook-controls{
        left:50%;
        right:auto;
        bottom:8px;

        transform:translateX(-50%);

        gap:4px;
        padding:5px 7px;

        border-radius:14px;
    }

    .flipbook-control-button{
        width:34px;
        height:34px;

        border-radius:9px;

        font-size:18px;
    }

    .flipbook-page-info{
        min-width:46px;
        font-size:12px;
    }

}

.flipbook-zoom-area{
    width:100%;
    height:100%;
}

.flipbook-zoom-content{
    width:100%;
}


/* =========================
   FLIPBOOK - HP KECIL
========================= */

@media (max-width:380px){

    .flipbook-reader{
        padding-left:5px;
        padding-right:5px;
    }

    .flipbook-control-button{
        width:32px;
        height:32px;
    }

    .flipbook-controls{
        gap:3px;
    }

}

/* =========================
   FLIPBOOK - MOBILE
========================= */

@media (max-width:600px){

    .flipbook-reader{
    width:100vw;
    height:100dvh;

    padding:0;

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

    overflow:hidden;
}

    #flipbook{
    width:100vw;
    height:100dvh;

    max-width:none;
    max-height:none;

    margin:0 auto;
}

    .flipbook-page{
        overflow:hidden;
        background:#fff;
    }

    .flipbook-page canvas{
        display:block;

        width:100%;
        height:100%;
    }

    .flipbook-controls{
    bottom:5px;

    gap:3px;

    padding:3px 5px;

    border-radius:10px;
}

.flipbook-control-button{
    width:28px;
    height:28px;

    border-radius:7px;

    font-size:14px;
}

.flipbook-page-info{
    min-width:38px;

    font-size:11px;
}

    .flipbook-page-info{
        min-width:46px;
        font-size:12px;
    }

}
.flipbook-zoom-area{
    width:100%;
    height:100%;
}

.flipbook-zoom-content{
    width:100%;
}


/* =========================
   FLIPBOOK - HP KECIL
========================= */

@media (max-width:380px){

    .flipbook-reader{
        padding-left:5px;
        padding-right:5px;
    }

    .flipbook-control-button{
        width:32px;
        height:32px;
    }

    .flipbook-controls{
        gap:3px;
    }

}
/* =========================
   FLIPBOOK LOADING
========================= */

.flipbook-loading{
    min-height:320px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    gap:8px;

    color:#334155;
}

.flipbook-loading-icon{
    font-size:46px;
    line-height:1;

    animation:flipbookLoadingBook 1.4s ease-in-out infinite;
}

.flipbook-loading strong{
    font-size:17px;
    font-weight:700;
}

.flipbook-loading span{
    font-size:13px;
    color:#64748b;
}

.flipbook-loading-dots{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:6px;

    margin-top:8px;
}

.flipbook-loading-dots i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#22c55e;

    animation:flipbookLoadingDot 1.2s infinite ease-in-out;
}

.flipbook-loading-dots i:nth-child(2){
    animation-delay:.15s;
}

.flipbook-loading-dots i:nth-child(3){
    animation-delay:.30s;
}


@keyframes flipbookLoadingBook{

    0%,
    100%{
        transform:
            translateY(0)
            rotate(0deg);
    }

    50%{
        transform:
            translateY(-6px)
            rotate(-4deg);
    }

}


@keyframes flipbookLoadingDot{

    0%,
    80%,
    100%{
        transform:scale(.65);
        opacity:.4;
    }

    40%{
        transform:scale(1);
        opacity:1;
    }

}
/* =========================
   FLIPBOOK ERROR
========================= */

.flipbook-error{
    min-height:320px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    padding:30px 24px;

    box-sizing:border-box;
}

.flipbook-error-icon{
    font-size:50px;
    line-height:1;

    margin-bottom:12px;
}

.flipbook-error h2{
    margin:0 0 8px;

    font-size:20px;
    font-weight:800;

    color:#1e293b;
}

.flipbook-error p{
    max-width:360px;

    margin:0 0 20px;

    font-size:14px;
    line-height:1.6;

    color:#64748b;
}

.flipbook-error-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;

    padding:0 18px;

    border-radius:12px;

    background:#22c55e;

    color:#ffffff;

    text-decoration:none;

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

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.flipbook-error-button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0,0,0,.15);
}
/* =========================
   ADMIN BUKU & PDF
========================= */

.admin-buku-body{
    margin:0;

    background:#f4f7fb;

    color:#1e293b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.admin-buku-page{
    min-height:100vh;

    padding:40px 20px 70px;
}


.admin-buku-container{
    width:100%;
    max-width:1100px;

    margin:0 auto;
}


/* HEADER */

.admin-buku-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin-bottom:25px;
}


.admin-buku-label{
    display:block;

    margin-bottom:5px;

    font-size:12px;
    font-weight:800;

    letter-spacing:1.5px;

    color:#22a06b;
}


.admin-buku-header h1{
    margin:0 0 7px;

    font-size:30px;
    font-weight:800;

    color:#22a06b;
}


.admin-buku-header p{
    margin:0;

    color:#64748b;

    font-size:14px;
}


.admin-buku-add-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    min-height:44px;

    padding:0 18px;

    border-radius:12px;

    background:#22a06b;

    color:#ffffff;

    text-decoration:none;

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

    box-shadow:
        0 5px 14px rgba(34,160,107,.20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.admin-buku-add-button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(34,160,107,.28);
}


/* ALERT */

.admin-buku-alert{
    display:flex;
    align-items:center;

    gap:9px;

    margin-bottom:20px;

    padding:13px 16px;

    border-radius:12px;

    background:#ecfdf5;

    border:1px solid #bbf7d0;

    color:#166534;

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


/* LIST */

.admin-buku-list{
    display:flex;
    flex-direction:column;

    gap:14px;
}


.admin-buku-card{
    display:grid;

    grid-template-columns:
        95px
        minmax(0, 1fr)
        auto;

    align-items:center;

    gap:20px;

    padding:16px;

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:16px;

    box-shadow:
        0 4px 14px rgba(15,23,42,.05);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.admin-buku-card:hover{
    transform:translateY(-2px);

    box-shadow:
        0 9px 24px rgba(15,23,42,.09);
}


/* COVER */

.admin-buku-cover{
    width:95px;
    height:125px;

    overflow:hidden;

    border-radius:10px;

    background:#eef2f7;
}


.admin-buku-cover img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}


.admin-buku-cover-empty{
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:5px;

    color:#64748b;
}


.admin-buku-cover-empty span{
    font-size:30px;
}


.admin-buku-cover-empty small{
    font-size:10px;
    font-weight:700;

    letter-spacing:1px;
}


/* INFORMASI */

.admin-video-info{
    align-self:flex-start;
    padding-top:0;
}

.admin-buku-info-top{
    align-self:flex-start;
    padding-top:0;
}

.admin-materi-info{
    align-self:flex-start;
    padding-top:0;
}
.admin-buku-meta{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-bottom:7px;
}


.admin-buku-meta span{
    display:inline-flex;

    padding:4px 8px;

    border-radius:20px;

    background:#f1f5f9;

    color:#64748b;

    font-size:11px;
    font-weight:700;
}


.admin-buku-info h2{
    margin:0 0 10px;

    color:#1e293b;

    font-size:19px;
    font-weight:800;
}


.admin-buku-details{
    display:flex;
    flex-wrap:wrap;

    gap:14px;

    margin-bottom:10px;

    color:#475569;

    font-size:13px;
}


.admin-buku-file{
    display:flex;
    align-items:center;

    gap:6px;

    max-width:500px;

    color:#64748b;

    font-size:12px;
}


.admin-buku-file span:last-child{
    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;
}


/* AKSI */

.admin-buku-actions{
    display:flex;
    flex-direction:column;

    gap:8px;

    min-width:105px;
}


.admin-buku-actions form{
    margin:0;
}


.admin-buku-edit-button,
.admin-buku-delete-button{
    width:100%;

    min-height:38px;

    padding:0 13px;

    border-radius:10px;

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

    cursor:pointer;
}


.admin-buku-edit-button{
    border:1px solid #cbd5e1;

    background:#f8fafc;

    color:#475569;

    cursor:pointer;

    opacity:1;

    text-decoration:none;

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

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease,
        background .2s ease;
}
.admin-buku-edit-button:hover{
    transform:translateY(-2px);

    border-color:#22c55e;

    background:#f0fdf4;

    box-shadow:0 8px 18px rgba(34,197,94,.16);
}


.admin-buku-delete-button{
    border:1px solid #fecaca;

    background:#fff1f2;

    color:#dc2626;

    transition:
        background .2s ease,
        transform .2s ease;
}


.admin-buku-delete-button:hover{
    background:#ffe4e6;

    transform:translateY(-1px);
}


/* EMPTY */

.admin-buku-empty{
    padding:60px 25px;

    text-align:center;

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:18px;
}


.admin-buku-empty-icon{
    margin-bottom:10px;

    font-size:48px;
}


.admin-buku-empty h2{
    margin:0 0 8px;

    font-size:21px;
}


.admin-buku-empty p{
    max-width:400px;

    margin:0 auto 20px;

    color:#64748b;

    font-size:14px;
    line-height:1.6;
}

/* =========================
   ADMIN LATIHAN
========================= */

.admin-latihan-page{
    min-height:100vh;
    padding:0px 20px 70px;
}


.admin-latihan-container{
    width:100%;
    max-width:1100px;
    margin:0 auto;
}


/* HEADER */

.admin-latihan-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px;
}


.admin-latihan-label{
    display:block;
    margin-bottom:5px;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.5px;
    color:#22a06b;
}


.admin-latihan-header h1{
    margin:0 0 7px;
    font-size:30px;
    font-weight:800;
    color:#22a06b;
}


.admin-latihan-header p{
    margin:0;
    color:#64748b;
    font-size:14px;
}
.admin-latihan-mapel-title{
    font-weight:800;
}

.admin-latihan-add-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:44px;
    padding:0 18px;
    border-radius:12px;
    background:#22a06b;
    color:#ffffff;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    box-shadow:
        0 5px 14px rgba(34,160,107,.20);
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.admin-latihan-add-button:hover{
    transform:translateY(-2px);
    box-shadow:
        0 8px 18px rgba(34,160,107,.28);
}


/* ALERT */

.admin-latihan-alert{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:20px;
    padding:13px 16px;
    border-radius:12px;
    background:#ecfdf5;
    border:1px solid #bbf7d0;
    color:#166534;
    font-size:14px;
    font-weight:600;
    transition:
        opacity .3s ease,
        transform .3s ease;
}


/* BAGIAN MODE */

.admin-latihan-section{
    margin-bottom:34px;
}


.admin-latihan-section-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}


.admin-latihan-section-icon{
    width:46px;
    height:46px;
    flex-shrink:0;

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

    border-radius:13px;

    font-size:23px;
}


.admin-latihan-section-icon.interaktif{
    background:#fff7ed;
    border:1px solid #fed7aa;
}


.admin-latihan-section-icon.biasa{
    background:#eff6ff;
    border:1px solid #bfdbfe;
}


.admin-latihan-section-header h2{
    margin:0 0 3px;
    color:#1e293b;
    font-size:19px;
    font-weight:800;
}


.admin-latihan-section-header p{
    margin:0;
    color:#64748b;
    font-size:13px;
}


/* LIST */

.admin-latihan-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}


/* CARD */

.admin-latihan-card{
    display:grid;

    grid-template-columns:
        95px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:20px;

    padding:16px;

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:16px;

    box-shadow:
        0 4px 14px rgba(15,23,42,.05);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.admin-latihan-card:hover{
    transform:translateY(-2px);

    box-shadow:
        0 9px 24px rgba(15,23,42,.09);
}

/* JARAK ANTAR CARD DALAM MAPEL YANG SAMA */

.admin-latihan-mapel-group .admin-latihan-card + .admin-latihan-card{
    margin-top:18px;
}

/* IKON CARD */

.admin-latihan-card-icon{
    width:95px;
    height:95px;

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

    border-radius:16px;

    font-size:42px;
}


.admin-latihan-card-icon.interaktif{
    background:#fff7ed;
    border:1px solid #fed7aa;
}


.admin-latihan-card-icon.biasa{
    background:#eff6ff;
    border:1px solid #bfdbfe;
}


/* INFORMASI */

.admin-latihan-info{
    min-width:0;
}


.admin-latihan-meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px;

    margin-bottom:7px;
}


.admin-latihan-meta span{
    display:inline-flex;

    padding:4px 8px;

    border-radius:20px;

    background:#f1f5f9;

    color:#64748b;

    font-size:11px;
    font-weight:700;
}


.admin-latihan-info h3{
    margin:0 0 10px;

    color:#1e293b;

    font-size:19px;
    font-weight:800;
}


.admin-latihan-details{
    display:flex;
    flex-wrap:wrap;
    gap:14px;

    margin-bottom:10px;

    color:#475569;

    font-size:13px;
}


/* STATUS */

.admin-latihan-status{
    display:inline-flex;

    align-items:center;

    padding:4px 9px;

    border-radius:20px;

    font-size:11px;
    font-weight:800;
}


.admin-latihan-status.aktif{
    background:#ecfdf5;
    color:#15803d;
}


.admin-latihan-status.nonaktif{
    background:#f1f5f9;
    color:#64748b;
}


/* AKSI */

.admin-latihan-actions{
    display:flex;
    flex-direction:column;

    gap:8px;

    min-width:115px;
}


.admin-latihan-soal-button,
.admin-latihan-edit-button,
.admin-latihan-delete-button{
    width:100%;

    min-height:38px;

    padding:0 13px;

    border-radius:10px;

    font-size:13px;
    font-weight:700;
}


/* KELOLA SOAL */

.admin-latihan-soal-button{
    border:1px solid #bbf7d0;

    background:#ecfdf5;

    color:#15803d;
}


.admin-latihan-edit-button{
    border:1px solid #cbd5e1;

    background:#f8fafc;
    color:#475569;

    cursor:pointer;
    opacity:1;

    text-decoration:none;

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

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.admin-latihan-edit-button:hover{
    transform:translateY(-2px);

    border-color:#22c55e;

    background:#f0fdf4;

    box-shadow:0 8px 18px rgba(34,197,94,.16);
}


/* HAPUS */

.admin-latihan-delete-button{
    border:1px solid #fecaca;

    background:#fff1f2;

    color:#dc2626;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.admin-latihan-delete-button:hover{
    background:#ffe4e6;

    transform:translateY(-1px);
}


/* karena tombol belum aktif */

.admin-latihan-actions button:disabled{
    cursor:not-allowed;
    opacity:.55;
}


/* EMPTY PER BAGIAN */

.admin-latihan-empty-small{
    padding:22px;

    text-align:center;

    background:#ffffff;

    border:1px dashed #cbd5e1;

    border-radius:14px;

    color:#64748b;

    font-size:13px;
}


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

@media(max-width:700px){

    .admin-latihan-page{
        padding:
            25px
            14px
            50px;
    }


    .admin-latihan-header{
        align-items:stretch;
        flex-direction:column;
    }


    .admin-latihan-add-button{
        align-self:flex-start;
    }


    .admin-latihan-card{
        grid-template-columns:
            72px
            minmax(0,1fr);

        gap:14px;
    }


    .admin-latihan-card-icon{
        width:72px;
        height:72px;

        font-size:32px;
    }


    .admin-latihan-actions{
        grid-column:1 / -1;

        flex-direction:row;

        width:100%;
    }


    .admin-latihan-soal-button,
    .admin-latihan-edit-button,
    .admin-latihan-delete-button{
        flex:1;
    }


    .admin-latihan-section-header{
        align-items:flex-start;
    }
}

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

@media(max-width:700px){

    .admin-buku-page{
        padding:
            25px
            14px
            50px;
    }


    .admin-buku-header{
        align-items:stretch;
        flex-direction:column;
    }


    .admin-buku-add-button{
        align-self:flex-start;
    }


    .admin-buku-card{
        grid-template-columns:
            78px
            minmax(0,1fr);

        gap:14px;
    }


    .admin-buku-cover{
        width:78px;
        height:105px;
    }


    .admin-buku-actions{
        grid-column:1 / -1;

        flex-direction:row;

        width:100%;
    }


    .admin-buku-actions form{
        flex:1;
    }


    .admin-buku-edit-button,
    .admin-buku-delete-button{
        flex:1;
    }

}
/* ==================================================
   ADMIN KELAS PANDA
================================================== */

.kp-admin-body{
    margin:0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:#f4f7fb;

    color:#1e293b;
}


.kp-admin-layout{
    min-height:100vh;

    display:grid;

    grid-template-columns:
        250px
        minmax(0,1fr);
}


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

.kp-admin-sidebar{
    position:fixed;

    top:0;
    left:0;
    bottom:0;

    width:250px;

    display:flex;
    flex-direction:column;

    box-sizing:border-box;

    padding:0;

    background:#ffffff;

    border-right:1px solid #e2e8f0;

    z-index:20;
}


.kp-admin-brand{
    display:flex;
    align-items:center;

    gap:11px;

    height:72px;
    padding:0 20px;

    box-sizing:border-box;

    flex-shrink:0;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(255,255,255,.14) 0%,
            rgba(255,255,255,0) 35%
        ),
        linear-gradient(
            110deg,
            #174ea6 0%,
            #215db0 100%
        );

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


.kp-admin-brand-icon{
    width:44px;
    height:44px;

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

    flex-shrink:0;

    border-radius:13px;

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

    font-size:27px;

    box-shadow:0 4px 12px rgba(0,0,0,.10);
}


.kp-admin-brand strong{
    display:block;

    font-size:17px;
    font-weight:800;

    color:#ffffff;
}


.kp-admin-brand span{
    display:block;

    margin-top:2px;

    font-size:11px;

    color:rgba(255,255,255,.72);
}

/* NAV */

.kp-admin-nav{
    flex:1;
    overflow-y:auto;
    padding:16px 7px 18px;
    box-sizing:border-box;
}


.kp-admin-nav-title{
    margin:
        21px
        10px
        8px;

    font-size:12px;
    font-weight:900;

    letter-spacing:1.4px;

    color:#41474e;
}


.kp-admin-nav-item{
    min-height:43px;

    display:flex;
    align-items:center;

    gap:11px;

    padding:0 12px;

    margin-bottom:4px;

    box-sizing:border-box;

    border-radius:11px;

    color:#64748b;

    text-decoration:none;

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

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}


.kp-admin-nav-item > span{
    width:22px;

    text-align:center;

    font-size:17px;
}


.kp-admin-nav-item:hover{
    background:#f1f5f9;

    color:#1e293b;

    transform:translateX(2px);
}


.kp-admin-nav-item.active{
    background:#ecfdf5;

    color:#16845a;

    font-weight:800;
}


.kp-admin-disabled{
    color:#64748b;

    opacity:1;

    cursor:default;
}



/* SIDEBAR FOOTER */

.kp-admin-sidebar-footer{
    padding-top:15px;

    border-top:1px solid #edf2f7;
}


.kp-admin-back-site{
    display:flex;
    align-items:center;

    min-height:40px;

    padding:0 10px;

    color:#64748b;

    text-decoration:none;

    font-size:12px;
    font-weight:700;

    border-radius:10px;
}


.kp-admin-back-site:hover{
    background:#f1f5f9;

    color:#1e293b;
}



/* =========================
   MAIN
========================= */

.kp-admin-main{
    grid-column:2;

    min-width:0;

    margin-left:0;
}



/* =========================
   TOPBAR ADMIN
========================= */

.kp-admin-topbar{
    height:72px;

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

    gap:20px;

    padding:0 32px;

    box-sizing:border-box;

    background:
        radial-gradient(
            circle at 18% 30%,
            rgba(255,255,255,.16) 0%,
            rgba(255,255,255,0) 28%
        ),
        linear-gradient(
            110deg,
            #174ea6 0%,
            #276bc1 55%,
            #4c94df 100%
        );

    border-bottom:1px solid rgba(255,255,255,.18);

    position:sticky;
    top:0;
    z-index:10;

    overflow:hidden;

    box-shadow:0 4px 16px rgba(23,78,166,.12);
}


/* ORNAMEN PLUS PUTIH */
.kp-admin-topbar::before{
    content:"";

    position:absolute;

    top:0;
    right:0;

    width:58%;
    height:100%;

    pointer-events:none;

    opacity:.14;

    background-image:
        linear-gradient(
            rgba(255,255,255,.95),
            rgba(255,255,255,.95)
        ),
        linear-gradient(
            rgba(255,255,255,.95),
            rgba(255,255,255,.95)
        );

    background-size:
        2px 8px,
        8px 2px;

    background-position:
        center,
        center;

    background-repeat:repeat;

    mask-image:
        radial-gradient(
            circle at 65% 50%,
            #000 0%,
            transparent 68%
        );

    -webkit-mask-image:
        radial-gradient(
            circle at 65% 50%,
            #000 0%,
            transparent 68%
        );
}


/* ISI TOPBAR HARUS DI ATAS ORNAMEN */
.kp-admin-topbar > *{
    position:relative;
    z-index:2;
}


.kp-admin-topbar-label{
    display:block;

    margin-bottom:2px;

    font-size:9px;
    font-weight:800;

    letter-spacing:1.5px;

    color:rgba(255,255,255,.72);
}


.kp-admin-topbar strong{
    font-size:15px;
    font-weight:800;

    color:#ffffff;
}


.kp-admin-avatar{
    width:38px;
    height:38px;

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

    border-radius:50%;

    background:#ffffff;

    color:#174ea6;

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

    box-shadow:0 4px 12px rgba(0,0,0,.12);
}


/* CONTENT */

.kp-admin-content{
    padding:
        32px
        34px
        60px;
}



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

@media(max-width:850px){

    .kp-admin-layout{
        display:block;
    }


    .kp-admin-sidebar{
        position:static;

        width:100%;
        height:auto;

        padding:14px;
    }


    .kp-admin-nav{
        display:flex;

        gap:6px;

        overflow-x:auto;

        padding-top:12px;
    }


    .kp-admin-nav-title{
        display:none;
    }


    .kp-admin-nav-item{
        flex-shrink:0;

        margin:0;
    }


    .kp-admin-sidebar-footer{
        display:none;
    }


    .kp-admin-main{
        margin:0;
    }


    .kp-admin-topbar{
        padding:0 16px;
    }


    .kp-admin-content{
        padding:
            22px
            14px
            45px;
    }

}
/* =========================
   FORM ADMIN BUKU
========================= */

.admin-buku-form-page{
    width:100%;
    max-width:1000px;
    margin:0 auto;
}


.admin-buku-form-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin-bottom:22px;
}


.admin-buku-form-header h1{
    margin:0 0 7px;

    font-size:28px;
    font-weight:800;

    color:#1e293b;
}


.admin-buku-form-header p{
    margin:0;

    color:#64748b;
    font-size:14px;
}


.admin-buku-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:40px;
    padding:0 15px;

    border:1px solid #cbd5e1;
    border-radius:10px;

    background:#ffffff;

    color:#334155;
    text-decoration:none;

    font-size:13px;
    font-weight:700;
}


.admin-buku-form-card{
    padding:28px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:18px;

    box-shadow:
        0 5px 18px rgba(15,23,42,.06);
}


.admin-buku-form-grid{
    display:grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:20px;
}


.admin-buku-form-group{
    display:flex;
    flex-direction:column;

    gap:7px;
}


.admin-buku-form-full{
    grid-column:1 / -1;
}


.admin-buku-form-group label{
    font-size:13px;
    font-weight:700;

    color:#334155;
}


.admin-buku-form-group input,
.admin-buku-form-group select,
.admin-buku-form-group textarea{
    width:100%;

    box-sizing:border-box;

    padding:11px 12px;

    border:1px solid #cbd5e1;
    border-radius:10px;

    background:#ffffff;

    color:#1e293b;

    font:inherit;

    outline:none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.admin-buku-form-group input:focus,
.admin-buku-form-group select:focus,
.admin-buku-form-group textarea:focus{
    border-color:#22a06b;

    box-shadow:
        0 0 0 3px rgba(34,160,107,.10);
}


.admin-buku-form-group textarea{
    resize:vertical;
}


.admin-buku-status-check{
    min-height:42px;

    display:flex;
    align-items:center;

    gap:9px;

    padding:0 12px;

    box-sizing:border-box;

    border:1px solid #dbe4ee;
    border-radius:10px;

    background:#f8fafc;
}


.admin-buku-status-check input{
    width:auto;
    margin:0;
}


.admin-buku-form-actions{
    display:flex;
    justify-content:flex-end;

    gap:10px;

    margin-top:26px;

    padding-top:22px;

    border-top:1px solid #edf2f7;
}


.admin-buku-cancel-button,
.admin-buku-save-button{
    min-height:42px;

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

    padding:0 18px;

    border-radius:11px;

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

    text-decoration:none;
}


.admin-buku-cancel-button{
    border:1px solid #cbd5e1;

    background:#ffffff;

    color:#475569;
}


.admin-buku-save-button{
    border:0;

    background:#22a06b;

    color:#ffffff;

    cursor:pointer;
}


/* MOBILE */

@media(max-width:700px){

    .admin-buku-form-header{
        align-items:flex-start;
        flex-direction:column;
    }


    .admin-buku-form-header h1{
        font-size:24px;
    }


    .admin-buku-form-card{
        padding:18px 15px;
    }


    .admin-buku-form-grid{
        grid-template-columns:1fr;

        gap:16px;
    }


    .admin-buku-form-full{
        grid-column:auto;
    }


    .admin-buku-form-actions{
        flex-direction:column-reverse;
    }


    .admin-buku-cancel-button,
    .admin-buku-save-button{
        width:100%;

        box-sizing:border-box;
    }

}
/* =========================
   PREVIEW COVER BUKU
========================= */

.cover-preview-wrapper{
    width:180px;
    aspect-ratio:3 / 4;

    margin-top:14px;

    border:2px dashed #d5dce5;
    border-radius:14px;

    background:#f8fafc;

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

    overflow:hidden;
}

.cover-preview-wrapper img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:none;
}

.cover-preview-placeholder{
    padding:20px;

    text-align:center;

    color:#8a94a3;
}

.cover-preview-placeholder span{
    display:block;

    font-size:38px;

    margin-bottom:8px;
}

.cover-preview-placeholder p{
    margin:0;

    font-size:13px;
    line-height:1.5;
}
.admin-delete-modal{
    position:fixed;

    inset:0;

    z-index:9999;

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

    padding:20px;

    background:rgba(15,23,42,.42);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}


.admin-delete-modal.show{
    opacity:1;
    visibility:visible;
}


.admin-delete-modal-card{
    width:100%;
    max-width:390px;

    padding:30px 28px 26px;

    box-sizing:border-box;

    background:#ffffff;

    border-radius:20px;

    box-shadow:0 24px 60px rgba(15,23,42,.20);

    text-align:center;

    transform:translateY(12px) scale(.97);

    transition:transform .2s ease;
}


.admin-delete-modal.show .admin-delete-modal-card{
    transform:translateY(0) scale(1);
}


.admin-delete-modal-icon{
    width:58px;
    height:58px;

    margin:0 auto 16px;

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

    border-radius:18px;

    background:#fef2f2;

    font-size:27px;
}


.admin-delete-modal-card h3{
    margin:0 0 8px;

    color:#1e293b;

    font-size:20px;
    font-weight:800;
}


.admin-delete-modal-card p{
    margin:0;

    color:#64748b;

    font-size:14px;
    line-height:1.6;
}


.admin-delete-modal-actions{
    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:24px;
}


.admin-delete-cancel,
.admin-delete-confirm{
    min-width:120px;
    min-height:42px;

    border-radius:10px;

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

    cursor:pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.admin-delete-cancel{
    border:1px solid #cbd5e1;

    background:#ffffff;

    color:#475569;
}


.admin-delete-confirm{
    border:1px solid #ef4444;

    background:#ef4444;

    color:#ffffff;
}


.admin-delete-cancel:hover,
.admin-delete-confirm:hover{
    transform:translateY(-2px);
}


.admin-delete-confirm:hover{
    background:#dc2626;

    box-shadow:0 8px 18px rgba(239,68,68,.22);
}
/* =========================
   HEADER DAFTAR MATERI
========================= */

.materi-collection-header{
    width:85%;
    margin:0 auto 16px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    transform:translateY(-3px);
    padding:1px 30px;
    height:40px;
    background:rgba(255,255,255,.84);

    border:1px solid rgba(255,255,255,.92);
    border-radius:18px;

    box-shadow:
        0 10px 26px rgba(23,78,166,.08);

    backdrop-filter:blur(8px);
}


.materi-collection-title{
    display:flex;
    align-items:center;
    gap:8px;

    color:#2c69b7;

    font-size:13px;
    font-weight:900;
    letter-spacing:.4px;
}


.materi-collection-title span{
    font-size:16px;
}


.materi-tools{
    display:flex;
    align-items:center;
    gap:10px;
}


.materi-search,
.materi-filter{
    min-height:27px;

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

    padding:0 12px;

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

    border:1px solid rgba(205,222,241,.9);
    border-radius:10px;
}


.materi-search input{
    width:180px;

    border:none;
    outline:none;

    background:transparent;

    color:#17345f;

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


.materi-search input::placeholder{
    color:#7c91aa;
}


.materi-filter select{
    min-width:140px;

    border:none;
    outline:none;

    background:transparent;

    color:#315e9a;

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

    cursor:pointer;
}
@media (max-width:700px){

    .materi-collection-header{
        width:100%;
        height:35px;
        padding:1px 15px;
        gap:20px;
    }

    .materi-tools{
        display:none;
    }

}
/* =========================
   HALAMAN MATERI SISWA
========================= */

.materi-page{
    padding:1px 0 70px;
}

.materi-container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}


.materi-title-row{
    display:flex;
    align-items:center;
    gap:15px;

    margin:24px 0 28px;
}

.materi-title-copy{
    transform:translate(8px, -8px);
}

.materi-title-quote{
    display:flex;
    align-items:flex-start;
    gap:7px;

    margin-top:5px;
    margin-left:8px;
    transform:translate(7px, -10px);
}
.materi-quote-line-2{
    display:inline-block;
    margin-left:7px;
}

.materi-title-quote p{
    margin:0;

    color:#17345f;

    font-size:14.5px;
    line-height:1.45;

    font-weight:550;
}

.materi-title-quote-icon{
    margin-top:2px;

    font-size:17px;
}

.materi-title-icon{
    width:58px;
    height:58px;

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

    background:transparent;
    border:none;
    box-shadow:none;
    font-size:40px;

    transform:translate(20px, -40px);
}

.materi-title-icon img{
    width:58px;
    height:58px;

    object-fit:contain;

    display:block;
}

.materi-title-label{
    display:block;

    margin-bottom:3px;

    color:#16845a;

    font-size:12px;
    font-weight:800;

    letter-spacing:1px;
    text-transform:uppercase;
}


.materi-title-row h1{
    margin:0;
    color:#17345f;
    font-size:36px;
    line-height:1.05;
    font-weight:900;
}


.materi-title-mapel{
    margin:1px 0 0;

    color:#111827;

    font-size:17px;
    font-weight:900;

    transform:translateY(-6px);
}

.materi-list{
    width:100%;
    margin:0;

    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));

    gap:14px;

    box-sizing:border-box;
}

.materi-card{
    min-width:0;

    width:100%;
    max-width:280px;

    margin-left:auto;
    margin-right:auto;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    background:rgba(245,250,255,.96);

    border:1px solid rgba(255,255,255,.95);
    border-radius:18px;

    box-shadow:0 8px 22px rgba(23,78,166,.08);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.materi-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 13px 28px rgba(23,78,166,.14);
}


.materi-card:hover{
    transform:translateY(-4px);

    border-color:#86efac;

    box-shadow:0 12px 30px rgba(34,197,94,.12);
}


.materi-image{
    width:100%;
    aspect-ratio:16 / 10;

    overflow:hidden;

    background:#eaf5ff;
}

.materi-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}


.materi-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}


.materi-image-placeholder{
    width:100%;
    height:100%;
    min-height:190px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:8px;

    color:#94a3b8;
}


.materi-image-placeholder span{
    font-size:38px;
}


.materi-image-placeholder small{
    font-size:11px;
    font-weight:800;

    letter-spacing:1px;
}


.materi-card-content{
    flex:1;

    display:flex;
    flex-direction:column;

    padding:12px 13px 13px;
}


.materi-meeting{
    align-self:flex-start;

    padding:5px 10px;

    background:#e5f8ef;

    border-radius:999px;

    color:#16865d;

    font-size:11px;
    font-weight:900;
}

.materi-mobile-heading{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:76px;
    padding:10px 16px;
    box-sizing:border-box;
}

.materi-mobile-heading h2{
    margin:0;
    padding:0;

    color:#172b4d;
    font-size:15px;
    line-height:1.3;
    font-weight:900;
    text-align:center;
}

.materi-mobile-heading h2{
    margin:0;
    padding:0;

    color:#172b4d;
    font-size:15px;
    line-height:1.3;
    font-weight:900;
    text-align:center;
}
.materi-card-content h2{
    display:none;
    margin:7px 0 7px;

    color:#172b4d;

    font-size:11px;
    
    line-height:1.3;

    font-weight:900;
    text-align:center;

    width:100%;
    padding:0;

    width:calc(100% + 14px);
    margin-left:-7px;
    margin-right:-7px;
}


.materi-description{
    margin:0 0 10px;

    color:#526987;

    font-size:12px;
    line-height:1.5;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}


.materi-meta{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:5px;

    margin-top:auto;
    margin-bottom:10px;
    
}

.materi-meta span{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:4px 8px;

    background:transparent;

    border:none;
    border-radius:0;

    color:#315e9a;

    font-size:11px;
    font-weight:800;
}

.materi-open-button{
    width:100%;
margin-left:auto;
margin-right:auto;
box-sizing:border-box;

    min-height:30px;

    margin-top:-13px;
    margin-left:auto;
    margin-right:auto;

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

    gap:7px;

    padding:5px 12px;

    background:
        linear-gradient(
            135deg,
            #2578ee,
            #1597ef
        );

    border-radius:11px;

    color:#fff;

    font-size:13px;
    font-weight:900;
    transform:translateY(3px);
}

color:#ffffff;

    border-radius:11px;

    color:#1681df;

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

    transition:.2s ease;
}

.materi-open-button:hover{
    transform:translateY(-2px);

    background:linear-gradient(
        135deg,
        #dcebff,
        #e1f7ff
    );
}


.materi-open-button:hover{
    transform:translateY(1px);

    background:#4aa3f5;

    box-shadow:0 8px 18px rgba(37,120,238,.20);
}


.materi-empty{
    padding:50px 20px;

    border:1px dashed #cbd5e1;

    border-radius:18px;

    text-align:center;

    background:#ffffff;
}


.materi-empty-icon{
    margin-bottom:12px;

    font-size:42px;
}


.materi-empty h2{
    margin:0 0 7px;

    color:#1e293b;
}


.materi-empty p{
    margin:0;

    color:#64748b;
}


/* MOBILE */
@media (max-width:700px){
    .materi-list{
    grid-template-columns:1fr;

    width:100%;
}

    .materi-page{
        padding-top:20px;
    }

    .materi-container{
        width:92%;
    }

    .materi-title-row h1{
        font-size:23px;
    }

    .materi-card{
        grid-template-columns:110px 1fr;
    }

    .materi-image,
    .materi-image-placeholder{
        min-height:165px;
    }

    .materi-card-content{
        padding:16px;
    }

    .materi-card-content h2{
        font-size:17px;
    }

    .materi-description{
        font-size:13px;
    }

    .materi-open-button{
        align-self:stretch;

        width:100%;

        box-sizing:border-box;

        margin-top:14px;
    }
}


@media (max-width:430px){

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

.materi-image{
    height:auto;
    min-height:0;
    aspect-ratio:1.5 / 1;
}

    .materi-image-placeholder{
        min-height:0px;
    }
}

/* =========================
   GAMBAR CARD ADMIN MATERI
========================= */

.admin-buku-card:has(.admin-materi-image){
    grid-template-columns:180px minmax(0, 1fr) auto;
    gap:22px;
}


.admin-materi-image{
    width:180px;
    min-width:180px;
    height:150px;

    border-radius:14px;
    overflow:hidden;

    background:#f1f5f9;
}


.admin-materi-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.mapel-menu-icon-img{
    width:48px;
    height:48px;
    display:block;
    object-fit:contain;
}

.siswa-mapel-icon-img{
    width:56px;
    height:56px;
    display:block;
    object-fit:contain;
}
/* =========================
   IKON 11 MATA PELAJARAN
========================= */

.mapel-icon-img{
    width:64px !important;
    height:64px !important;
    max-width:64px !important;
    max-height:64px !important;

    display:block;
    object-fit:contain;
}
/* =========================
   VIDEO SISWA
========================= */

.video-page{
    padding:5px 0 50px;
}


.video-container{
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
}


.video-title-row{
    display:flex;
    align-items:center;
    gap:14px;

    margin:24px 0 28px;
}

.video-title-icon{
    width:54px;
    height:54px;

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

    flex-shrink:0;

    border-radius:16px;

    background:transparent;

    font-size:45px;
    transform:translate(18px, -28px);
}
.video-title-icon img{
    width:85px;
    height:85px;

    object-fit:contain;
    display:block;
    transform:translate(-10px, -13px);
}

.video-title-row h1{
    margin:0;

    color:#17345f;

    font-size:36px;
    line-height:1.05;
    font-weight:900;
    transform:translate(5px, -13px);
}

.video-title-row p{
    margin:1px 0 0;

    color:#111827;

    font-size:19px;
    font-weight:900;

    transform:translate(4px, -18px);
}

.video-title-quote{
    display:flex;
    align-items:flex-start;
    gap:7px;

    margin-top:5px;
    margin-left:8px;

    transform:translate(7px, -10px);
}

.video-title-quote p{
    margin:0;

    color:#475569;

    font-size:14px;
    line-height:1.45;
    font-weight:550;
}

/* =========================
   PANEL FILTER VIDEO
========================= */

.video-filter-panel{
    width:90%;
    margin:0 auto 14px;
    padding:1px 18px;

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

    box-sizing:border-box;

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

    border:1px solid rgba(255,255,255,.90);
    border-radius:22px;

    box-shadow:
        0 10px 28px rgba(23,78,166,.09);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transform:translateY(-7px);
}

.video-filter-buttons{
    display:flex;
    align-items:center;
    gap:6px;
    order:1;
}

.video-filter-button{
    padding:4px 11px;

    border:1px solid rgba(23,78,166,.14);
    border-radius:999px;

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

    color:#17345f;

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

    cursor:pointer;
}

.video-filter-button.active{
    border-color:transparent;

    background:#16845a;

    color:#fff;
}
.video-search-box{
    width:280px;

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

    padding:4px 11px;

    box-sizing:border-box;

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

    border:1px solid rgba(23,78,166,.13);
    border-radius:999px;
    order:2;
}

.video-search-box span{
    color:#2563a9;
    font-size:20px;
    font-weight:800;
}

.video-search-box input{
    width:100%;

    border:0;
    outline:0;

    background:transparent;

    color:#17345f;

    font-size:13px;
}
/* PANEL DAFTAR VIDEO */

.video-list-panel{
    width:90%;
    margin:0 auto;

    padding:20px;

    box-sizing:border-box;

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

    border:1px solid rgba(255,255,255,.88);
    border-radius:24px;

    box-shadow:
        0 12px 32px rgba(23,78,166,.10);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transform:translateY(-15px);
}

/* GRID VIDEO */

.video-list{
    display:grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:28px 22px;
    transform:translateY(-20px);
}


/* CARD */

.video-card{
    min-width:0;
    width:100%;
    justify-self:center;
}
/* JUDUL VIDEO DI ATAS THUMBNAIL */
.video-card-heading{
    min-height:58px;

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

    padding:8px 12px;

    box-sizing:border-box;
}

.video-card-heading h2{
    margin:0;
    padding:0;

    color:#172b4d;

    font-size:15px;
    line-height:1.3;
    font-weight:900;

    text-align:center;
}

.video-thumbnail{
    position:relative;

    width:100%;
    aspect-ratio:16 / 10;

    overflow:hidden;

    border-radius:15px;

    background:#e2e8f0;
}


.video-thumbnail img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .25s ease;
}


.video-card:hover .video-thumbnail img{
    transform:scale(1.025);
}


.video-thumbnail-placeholder{
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:5px;

    color:#64748b;

    background:#f1f5f9;
}


.video-thumbnail-placeholder span{
    font-size:38px;
}


.video-thumbnail-placeholder small{
    font-size:11px;
    font-weight:800;

    letter-spacing:1px;
}


/* INFO */

.video-card-content{
    padding:13px 3px 0;
}


.video-description{
    margin:2px 0 0;
    transform:translateY(-8px);

    color:#64748b;

    font-size:13px;
    line-height:1.5;
min-height:39px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}


.video-meta{
    display:flex;
    flex-wrap:wrap;

    gap:5px 12px;

    margin-top:9px;

    color:#64748b;

    font-size:12px;
}


.video-watch-button{
    width:100%;

    margin-top:-5px;
    padding:10px 14px;

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

    gap:7px;

    box-sizing:border-box;

    border-radius:10px;

    background:#16845a;

    color:#fff;

    text-decoration:none;

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

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.video-watch-button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(22, 132, 90, .20);
}


/* EMPTY */

.video-empty{
    padding:60px 20px;

    text-align:center;

    border-radius:18px;

    background:#f8fafc;
}


.video-empty-icon{
    margin-bottom:12px;

    font-size:42px;
}


.video-empty h2{
    margin:0 0 7px;

    color:#1e293b;
}


.video-empty p{
    margin:0;

    color:#64748b;
}

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

.video-pagination{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    margin:18px auto 0;
}


.video-pagination-number,
.video-pagination-arrow{
    width:36px;
    height:36px;

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

    border-radius:10px;

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

    border:1px solid rgba(23,78,166,.12);

    color:#475569;

    text-decoration:none;

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

    box-shadow:0 4px 12px rgba(23,78,166,.08);
}


.video-pagination-number.active{
    background:#16845a;

    color:#fff;

    border-color:#16845a;
}


.video-pagination-number:hover,
.video-pagination-arrow:hover{
    transform:translateY(-2px);
}


.video-pagination-arrow.disabled{
    opacity:.35;
    pointer-events:none;
}
/* TABLET */

@media (max-width:900px){

    .video-list{
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* HP */

@media (max-width:600px){

    .video-page{
        padding-top:20px;
    }


    .video-container{
        width:min(100% - 24px, 520px);
    }


    .video-title-row{
        margin:20px 0 22px;
    }


    .video-title-icon{
        width:46px;
        height:46px;

        border-radius:14px;

        font-size:23px;
    }


    .video-title-row h1{
        font-size:22px;
    }


    .video-list{
        grid-template-columns:1fr;

        gap:10px;
    }


    .video-thumbnail{
        border-radius:13px;
    }


    .video-card-content h2{
        font-size:16px;
    }

}
.mapel-login-icon-img{
    width:56px;
    height:56px;
    display:block;
    object-fit:contain;
}
/* =========================
   ADMIN - DATA SISWA
========================= */

.admin-siswa-page{
    width:100%;
}

.admin-siswa-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;

    margin-bottom:24px;
}

.admin-siswa-label{
    display:block;

    margin-bottom:6px;

    font-size:12px;
    font-weight:900;

    letter-spacing:1.5px;

    color:#2563eb;
}

.admin-siswa-header h1{
    margin:0 0 6px;

    font-size:34px;
    line-height:1.1;

    color:#172033;
}

.admin-siswa-header p{
    margin:0;

    color:#64748b;

    font-size:15px;
}

.admin-siswa-header-actions{
    display:flex;
    align-items:center;
    gap:10px;

    flex-wrap:wrap;
}

.admin-siswa-button{
    min-height:42px;

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

    padding:0 16px;

    border-radius:11px;

    text-decoration:none;

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

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.admin-siswa-button:hover{
    transform:translateY(-2px);
}

.admin-siswa-button.primary{
    background:#2563eb;

    color:#ffffff;

    box-shadow:
        0 8px 18px rgba(37,99,235,.18);
}

.admin-siswa-button.secondary{
    background:#ffffff;

    border:1px solid #dbe3ee;

    color:#334155;
}

.admin-siswa-alert{
    margin-bottom:18px;

    padding:12px 14px;

    border-radius:10px;

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

.admin-siswa-alert.success{
    background:#ecfdf5;

    border:1px solid #bbf7d0;

    color:#15803d;
}

.admin-siswa-alert.error{
    background:#fef2f2;

    border:1px solid #fecaca;

    color:#b91c1c;
}

.admin-siswa-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:14px;

    margin-bottom:16px;
}

.admin-siswa-search{
    width:100%;
    max-width:420px;

    display:flex;
    align-items:center;

    gap:9px;

    padding:0 13px;

    min-height:42px;

    background:#ffffff;

    border:1px solid #dbe3ee;

    border-radius:11px;
}

.admin-siswa-search input{
    width:100%;

    border:0;
    outline:0;

    background:transparent;

    font-size:14px;

    color:#334155;
}

.admin-siswa-filter{
    display:flex;
    align-items:center;

    gap:9px;
}

.admin-siswa-filter label{
    font-size:13px;
    font-weight:700;

    color:#475569;
}

.admin-siswa-filter select{
    min-height:42px;

    padding:0 12px;

    border:1px solid #dbe3ee;

    border-radius:10px;

    background:#ffffff;

    color:#334155;

    outline:0;
}

.admin-siswa-table-card{
    overflow:hidden;

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:16px;

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

.admin-siswa-table-header,
.admin-siswa-row{
    display:grid;

    grid-template-columns:
        100px
        minmax(220px, 1.7fr)
        minmax(140px, 1fr)
        120px
        160px;

    align-items:center;

    column-gap:14px;
}

.admin-siswa-table-header{
    min-height:48px;

    padding:0 18px;

    background:#f8fafc;

    border-bottom:1px solid #e2e8f0;

    color:#64748b;

    font-size:12px;
    font-weight:900;

    letter-spacing:.5px;
}

.admin-siswa-row{
    min-height:64px;

    padding:8px 18px;

    border-bottom:1px solid #eef2f7;

    color:#475569;

    font-size:14px;

    transition:background .16s ease;
}

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

.admin-siswa-row:hover{
    background:#f8fbff;
}

.admin-siswa-no{
    width:40px;
    height:40px;

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

    border-radius:10px;

    background:#eff6ff;

    color:#2563eb;

    font-weight:900;
}

.admin-siswa-nama{
    font-weight:800;

    color:#1e293b;
}

.admin-siswa-kelas-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:60px;

    padding:6px 10px;

    border-radius:999px;

    background:#ecfdf5;

    color:#16845a;

    font-size:12px;
    font-weight:800;
}

.admin-siswa-actions{
    display:flex;
    align-items:center;

    gap:8px;
}

.admin-siswa-actions form{
    margin:0;
}

.admin-siswa-edit,
.admin-siswa-delete{
    min-height:34px;

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

    padding:0 12px;

    border-radius:9px;

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

    cursor:pointer;

    text-decoration:none;
}

.admin-siswa-edit{
    background:#eff6ff;

    border:1px solid #bfdbfe;

    color:#1d4ed8;
}

.admin-siswa-delete{
    background:#fff1f2;

    border:1px solid #fecdd3;

    color:#be123c;
}

.admin-siswa-empty{
    padding:50px 20px;

    text-align:center;

    color:#94a3b8;
}


@media (max-width:900px){

    .admin-siswa-header{
        flex-direction:column;
    }

    .admin-siswa-toolbar{
        flex-direction:column;
        align-items:stretch;
    }

    .admin-siswa-search{
        max-width:none;
    }

    .admin-siswa-filter{
        justify-content:space-between;
    }

    .admin-siswa-table-card{
        overflow-x:auto;
    }

    .admin-siswa-table-header,
    .admin-siswa-row{
        min-width:820px;
    }

}
/* =========================
   ADMIN - FORM SISWA
========================= */

.admin-siswa-form-page{
    width:100%;
    max-width:900px;
}

.admin-siswa-form-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:24px;

    margin-bottom:24px;
}

.admin-siswa-form-header h1{
    margin:4px 0 6px;

    font-size:34px;
    line-height:1.1;

    color:#172033;
}

.admin-siswa-form-header p{
    margin:0;

    font-size:15px;

    color:#64748b;
}

.admin-siswa-form-header > a{
    min-height:40px;

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

    padding:0 15px;

    border:1px solid #dbe3ee;
    border-radius:10px;

    background:#ffffff;

    color:#475569;

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

    text-decoration:none;

    transition:
        transform .18s ease,
        background .18s ease;
}

.admin-siswa-form-header > a:hover{
    transform:translateY(-2px);

    background:#f8fafc;
}


.admin-siswa-form-card{
    padding:26px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:16px;

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


.admin-siswa-form-group{
    margin-bottom:18px;
}

.admin-siswa-form-group label{
    display:block;

    margin-bottom:7px;

    color:#334155;

    font-size:13px;
    font-weight:800;
}

.admin-siswa-form-group input,
.admin-siswa-form-group select{
    width:100%;
    min-height:44px;

    box-sizing:border-box;

    padding:0 13px;

    border:1px solid #d7e0eb;
    border-radius:10px;

    background:#ffffff;

    color:#1e293b;

    font-size:14px;

    outline:none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.admin-siswa-form-group input:focus,
.admin-siswa-form-group select:focus{
    border-color:#60a5fa;

    box-shadow:
        0 0 0 3px rgba(59,130,246,.10);
}


.admin-siswa-form-actions{
    display:flex;
    justify-content:flex-end;

    padding-top:6px;
}

.admin-siswa-form-actions button{
    min-height:44px;

    padding:0 20px;

    border:0;
    border-radius:11px;

    background:#2563eb;

    color:#ffffff;

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

    cursor:pointer;

    box-shadow:
        0 8px 18px rgba(37,99,235,.18);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.admin-siswa-form-actions button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 11px 22px rgba(37,99,235,.23);
}


.admin-siswa-alert-error{
    margin-bottom:18px;

    padding:13px 15px;

    border:1px solid #fecaca;
    border-radius:11px;

    background:#fef2f2;

    color:#b91c1c;

    font-size:14px;
}

.admin-siswa-alert-error ul{
    margin:8px 0 0;
    padding-left:20px;
}


@media (max-width:700px){

    .admin-siswa-form-page{
        max-width:none;
    }

    .admin-siswa-form-header{
        flex-direction:column;
    }

    .admin-siswa-form-header h1{
        font-size:28px;
    }

    .admin-siswa-form-card{
        padding:18px;
    }

    .admin-siswa-form-actions button{
        width:100%;
    }

}

/* =========================
   ADMIN - IMPORT SISWA
========================= */

.admin-siswa-import-info{
    margin-bottom:24px;
    padding:20px;

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

    background:#f8fbff;
}

.admin-siswa-import-info h2{
    margin:0 0 7px;

    color:#172033;

    font-size:20px;
}

.admin-siswa-import-info > p{
    margin:0 0 12px;

    color:#64748b;

    font-size:14px;
    line-height:1.6;
}

.admin-siswa-import-columns{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-bottom:14px;
}

.admin-siswa-import-columns span{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:30px;

    padding:5px 10px;

    border:1px solid #bfdbfe;
    border-radius:999px;

    background:#eff6ff;

    color:#1d4ed8;

    font-size:12px;
    font-weight:800;
}

.admin-siswa-import-note{
    margin-bottom:16px !important;
}

.admin-siswa-template-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:40px;

    padding:0 14px;

    border:1px solid #bbf7d0;
    border-radius:10px;

    background:#f0fdf4;

    color:#15803d;

    text-decoration:none;

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

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.admin-siswa-template-button:hover{
    transform:translateY(-2px);

    background:#dcfce7;

    box-shadow:
        0 6px 14px rgba(22,163,74,.12);
}


/* FILE EXCEL */

.admin-siswa-form-group input[type="file"]{
    padding:8px 10px;
}

.admin-siswa-form-group input[type="file"]::file-selector-button{
    margin-right:12px;

    padding:8px 13px;

    border:0;
    border-radius:8px;

    background:#eff6ff;

    color:#1d4ed8;

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

    cursor:pointer;
}


/* HP */

@media (max-width:700px){

    .admin-siswa-import-info{
        padding:16px;
    }

    .admin-siswa-template-button{
        width:100%;
    }

}

/* =========================================
   ADMIN - AKSES LOGIN SISWA
========================================= */

.admin-akses-page{
    width:100%;
}

.admin-akses-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    margin-bottom:26px;
}

.admin-akses-label{
    display:inline-block;
    margin-bottom:6px;

    font-size:12px;
    font-weight:900;
    letter-spacing:1.5px;

    color:#16845a;
}

.admin-akses-header h1{
    margin:0 0 8px;

    font-size:30px;
    line-height:1.15;

    color:#172033;
}

.admin-akses-header p{
    margin:0;

    max-width:680px;

    color:#64748b;
    line-height:1.7;
}

.admin-akses-add-button{
    flex-shrink:0;

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

    min-height:44px;

    padding:0 18px;

    border-radius:12px;

    background:#16845a;

    color:#ffffff;
    text-decoration:none;

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

    box-shadow:
        0 8px 20px rgba(22,132,90,.18);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.admin-akses-add-button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 12px 26px rgba(22,132,90,.25);
}

.admin-akses-alert-success{
    margin-bottom:22px;

    padding:14px 16px;

    border:1px solid #bbf7d0;
    border-radius:12px;

    background:#f0fdf4;

    color:#166534;

    font-size:14px;
    font-weight:700;
}

.admin-akses-card:hover{
    transform:translateY(-4px);

    border-color:#86efac;

    box-shadow:
        0 16px 32px rgba(15,23,42,.10);
}

.admin-akses-card-top{
    display:flex;
    align-items:center;

    gap:14px;

    padding-bottom:18px;

    border-bottom:1px solid #eef2f7;
}

.admin-akses-avatar{
    width:52px;
    height:52px;

    flex:0 0 52px;

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

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #d1fae5,
            #ecfdf5
        );

    color:#16845a;

    font-size:21px;
    font-weight:900;
}

.admin-akses-identitas h3{
    margin:0 0 5px;

    font-size:17px;

    color:#172033;
}

.admin-akses-identitas p{
    margin:0;

    font-size:13px;

    color:#64748b;
}

.admin-akses-mapel-badge{
    display:inline-flex;
    align-items:center;

    min-height:30px;

    padding:5px 10px;

    border:1px solid #bbf7d0;
    border-radius:999px;

    background:#f0fdf4;

    color:#15803d;

    font-size:12px;
    font-weight:800;
}

.admin-akses-mapel-empty{
    display:block;

    padding:10px 12px;

    border-radius:10px;

    background:#f8fafc;

    color:#94a3b8;

    font-size:13px;
}

.admin-akses-edit-button,
.admin-akses-delete-button{
    min-height:38px;

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

    padding:0 14px;

    border-radius:10px;

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

    cursor:pointer;

    transition:
        transform .18s ease,
        background .18s ease;
}

.admin-akses-edit-button{
    background:#eff6ff;

    color:#2563eb;

    text-decoration:none;
}

.admin-akses-edit-button:hover{
    background:#dbeafe;

    transform:translateY(-1px);
}

.admin-akses-delete-button{
    border:0;

    background:#fff1f2;

    color:#e11d48;
}

.admin-akses-delete-button:hover{
    background:#ffe4e6;

    transform:translateY(-1px);
}

.admin-akses-empty-state{
    grid-column:1 / -1;

    padding:42px 24px;

    border:1px dashed #cbd5e1;
    border-radius:18px;

    text-align:center;

    background:#ffffff;
}

.admin-akses-empty-state h3{
    margin:0 0 7px;

    color:#334155;
}

.admin-akses-empty-state p{
    margin:0;

    color:#94a3b8;
}


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

@media (max-width:900px){

    .admin-akses-grid{
        grid-template-columns:1fr;
    }

}


@media (max-width:600px){

    .admin-akses-header{
        flex-direction:column;
    }

    .admin-akses-add-button{
        width:100%;
    }

    .admin-akses-header h1{
        font-size:25px;
    }

    .admin-akses-card{
        padding:18px;
    }

    .admin-akses-login-info{
        grid-template-columns:1fr;
    }

    .admin-akses-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .admin-akses-edit-button,
    .admin-akses-delete-button{
        width:100%;
    }

}
/* =========================================
   FORM AKUN & AKSES SISWA
========================================= */

.admin-akses-form-page{
    width:100%;
    max-width:1050px;
}

.admin-akses-form-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;

    margin-bottom:24px;
}

.admin-akses-form-header h1{
    margin:4px 0 7px;

    font-size:30px;
    line-height:1.2;

    color:#172033;
}

.admin-akses-form-header p{
    margin:0;

    color:#64748b;
    line-height:1.6;
}

.admin-akses-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;
    padding:0 16px;

    border:1px solid #dbe3ec;
    border-radius:11px;

    background:#ffffff;

    color:#475569;
    text-decoration:none;
    font-size:14px;
    font-weight:800;

    transition:.18s ease;
}

.admin-akses-back-button:hover{
    background:#f8fafc;
    transform:translateY(-1px);
}


/* CARD FORM */

.admin-akses-form-card{
    padding:28px;

    border:1px solid #e2e8f0;
    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 6px 20px rgba(15,23,42,.06);
}


/* FIELD */

.admin-akses-form-group{
    margin-bottom:20px;
}

.admin-akses-form-group > label{
    display:block;

    margin-bottom:7px;

    color:#334155;

    font-size:13px;
    font-weight:800;
}

.admin-akses-form-group input[type="text"],
.admin-akses-form-group input[type="password"],
.admin-akses-form-group select{
    width:100%;
    min-height:44px;

    box-sizing:border-box;

    padding:0 13px;

    border:1px solid #cbd5e1;
    border-radius:10px;

    outline:none;

    background:#ffffff;

    color:#1e293b;

    font-size:14px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.admin-akses-form-group input:focus,
.admin-akses-form-group select:focus{
    border-color:#3b82f6;

    box-shadow:
        0 0 0 3px rgba(59,130,246,.12);
}

.admin-akses-form-group select:disabled{
    background:#f1f5f9;

    color:#94a3b8;

    cursor:not-allowed;
}

.admin-akses-form-help{
    display:block;

    margin-top:6px;

    color:#94a3b8;

    font-size:12px;
    line-height:1.5;
}


/* =========================================
   BAGIAN CHECKBOX MAPEL
========================================= */

.admin-akses-mapel-group{
    margin-top:28px;
    margin-bottom:0;

    padding-top:24px;

    border-top:1px solid #eef2f7;
}

.admin-akses-mapel-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;

    margin-bottom:16px;
}

.admin-akses-mapel-heading label{
    display:block;

    margin:0 0 4px;

    color:#1e293b;

    font-size:15px;
    font-weight:900;
}

.admin-akses-mapel-heading p{
    margin:0;

    color:#64748b;

    font-size:13px;
}


/* PILIH SEMUA */

.admin-akses-check-all{
    flex-shrink:0;

    min-height:36px;

    padding:0 13px;

    border:1px solid #bfdbfe;
    border-radius:9px;

    background:#eff6ff;

    color:#2563eb;

    font-size:12px;
    font-weight:800;

    cursor:pointer;

    transition:.18s ease;
}

.admin-akses-check-all:hover{
    background:#dbeafe;
}


/* GRID 11 MAPEL */

.admin-akses-checkbox-grid{
    display:grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap:12px;
}


/* CARD MAPEL */

.admin-akses-checkbox-card{
    position:relative;

    display:flex;
    align-items:center;

    gap:11px;

    min-height:68px;

    padding:12px 14px;

    box-sizing:border-box;

    border:1px solid #e2e8f0;
    border-radius:13px;

    background:#ffffff;

    cursor:pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.admin-akses-checkbox-card:hover{
    transform:translateY(-2px);

    border-color:#86efac;

    box-shadow:
        0 7px 18px rgba(15,23,42,.06);
}


/* CHECKBOX ASLI DISEMBUNYIKAN */

.admin-akses-checkbox-card input{
    position:absolute;

    opacity:0;

    pointer-events:none;
}


/* CHECKBOX CUSTOM */

.admin-akses-checkbox-box{
    width:24px;
    height:24px;

    flex:0 0 24px;

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

    border:2px solid #cbd5e1;
    border-radius:7px;

    background:#ffffff;

    color:transparent;

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

    transition:.18s ease;
}


/* MAPEL TERPILIH */

.admin-akses-checkbox-card:
has(input:checked){
    border-color:#86efac;

    background:#f0fdf4;

    box-shadow:
        0 5px 15px rgba(22,132,90,.08);
}

.admin-akses-checkbox-card
input:checked
+ .admin-akses-checkbox-box{
    border-color:#16845a;

    background:#16845a;

    color:#ffffff;
}


/* TEKS MAPEL */

.admin-akses-checkbox-content{
    min-width:0;
}

.admin-akses-checkbox-content strong{
    display:block;

    margin-bottom:3px;

    color:#334155;

    font-size:13px;
    line-height:1.3;
}

.admin-akses-checkbox-content small{
    display:block;

    color:#94a3b8;

    font-size:11px;
    line-height:1.35;
}


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

.admin-akses-form-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;

    gap:10px;

    margin-top:26px;
    padding-top:20px;

    border-top:1px solid #eef2f7;
}

.admin-akses-cancel-button,
.admin-akses-save-button{
    min-height:42px;

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

    box-sizing:border-box;

    padding:0 17px;

    border-radius:10px;

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

    cursor:pointer;
}

.admin-akses-cancel-button{
    border:1px solid #e2e8f0;

    background:#ffffff;

    color:#64748b;

    text-decoration:none;
}

.admin-akses-save-button{
    border:0;

    background:#16845a;

    color:#ffffff;

    box-shadow:
        0 7px 18px rgba(22,132,90,.18);

    transition:.18s ease;
}

.admin-akses-save-button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(22,132,90,.25);
}


/* ERROR */

.admin-akses-alert-error{
    margin-bottom:20px;

    padding:14px 17px;

    border:1px solid #fecaca;
    border-radius:12px;

    background:#fef2f2;

    color:#b91c1c;

    font-size:13px;
}

.admin-akses-alert-error ul{
    margin:8px 0 0;
    padding-left:20px;
}


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

@media (max-width:900px){

    .admin-akses-checkbox-grid{
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}


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

@media (max-width:600px){

    .admin-akses-form-header{
        flex-direction:column;
    }

    .admin-akses-back-button{
        width:100%;
        box-sizing:border-box;
    }

    .admin-akses-form-card{
        padding:18px;
    }

    .admin-akses-checkbox-grid{
        grid-template-columns:1fr;
    }

    .admin-akses-mapel-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .admin-akses-form-actions{
        flex-direction:column-reverse;
    }

    .admin-akses-cancel-button,
    .admin-akses-save-button{
        width:100%;
    }

}
/* =========================================
   TOMBOL KEMBALI - HALAMAN SISWA
========================================= */

.siswa-page-back-wrap{
    display:flex;
    justify-content:flex-end;

    margin-bottom:10px;
}

.siswa-page-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    min-height:40px;

    padding:0 16px;

    border:1px solid #d8e5f5;
    border-radius:11px;

    background:#ffffff;

    color:#315f9d;

    text-decoration:none;

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

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

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.siswa-page-back-button span{
    font-size:18px;
    line-height:1;
}

.siswa-page-back-button:hover{
    transform:translateY(-2px);

    background:#f4f8ff;

    box-shadow:
        0 8px 18px rgba(15,23,42,.09);
}


/* HP */

@media (max-width:600px){

    .siswa-page-back-wrap{
        margin-bottom:12px;
    }

    .siswa-page-back-button{
        min-height:38px;

        padding:0 13px;

        font-size:13px;
    }

}

.buku-title-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:24px;

    margin-bottom:36px;
}

.buku-title-header .buku-title-row{
    margin-bottom:0;
}
@media (max-width:600px){

    .buku-title-header{
        align-items:flex-start;
        gap:12px;

        margin-bottom:24px;
    }

    .siswa-page-back-button{
        flex-shrink:0;
    }

}
/* =========================================
   HEADER HALAMAN MATERI & VIDEO
========================================= */

.materi-title-header,
.video-title-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:24px;

    margin-bottom:36px;

    position:relative;
}

.materi-title-header .siswa-page-back-button,
.video-title-header .siswa-page-back-button{
    margin-top:17px;
}

.materi-title-header .materi-title-row,
.video-title-header .video-title-row{
    margin-bottom:0;
}


/* HP */

@media (max-width:600px){

    .materi-title-header,
    .video-title-header{
        align-items:flex-start;

        gap:12px;

        margin-bottom:24px;
    }

}   
.admin-akses-alert-success{
    transition:
        opacity .4s ease,
        transform .4s ease;
}
/* =========================================
   TABEL AKSES LOGIN SISWA
========================================= */

.admin-akses-table-card{
    overflow:hidden;

    border:1px solid #e2e8f0;
    border-radius:18px;

    background:#ffffff;

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


.admin-akses-table-scroll{
    width:100%;

    overflow-x:auto;
}


.admin-akses-table{
    width:100%;

    border-collapse:collapse;

    min-width:1050px;
}


.admin-akses-table thead{
    background:#f8fafc;
}


.admin-akses-table th{
    padding:15px 16px;

    border-bottom:1px solid #e2e8f0;

    text-align:left;

    color:#64748b;

    font-size:12px;
    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.6px;
}


.admin-akses-table td{
    padding:16px;

    border-bottom:1px solid #eef2f7;

    vertical-align:middle;

    color:#334155;

    font-size:13px;
}


.admin-akses-table tbody tr{
    transition:
        background .18s ease;
}


.admin-akses-table tbody tr:hover{
    background:#fafcff;
}


.admin-akses-table tbody tr:last-child td{
    border-bottom:0;
}


.admin-akses-col-no{
    width:55px;
}


.admin-akses-col-action{
    width:175px;
}


.admin-akses-number{
    color:#94a3b8;

    font-weight:800;
}


/* SISWA */

.admin-akses-table-student{
    display:flex;

    align-items:center;

    gap:11px;
}


.admin-akses-table-avatar{
    width:40px;
    height:40px;

    flex:0 0 40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#d1fae5;

    color:#16845a;

    font-size:16px;

    font-weight:900;
}


.admin-akses-table-student strong{
    color:#1e293b;

    font-size:14px;
}


/* KELAS */

.admin-akses-table-class strong{
    display:block;

    margin-bottom:3px;

    color:#334155;
}


.admin-akses-table-class span{
    color:#94a3b8;

    font-size:12px;
}


/* USERNAME */

.admin-akses-username{
    display:inline-flex;

    padding:6px 9px;

    border-radius:8px;

    background:#eff6ff;

    color:#2563eb;

    font-weight:800;
}


.admin-akses-username-empty{
    color:#94a3b8;

    font-style:italic;
}


/* MAPEL */

.admin-akses-table-mapels{
    display:flex;

    flex-wrap:wrap;

    gap:6px;
}


.admin-akses-table .admin-akses-mapel-badge{
    min-height:27px;

    padding:4px 9px;

    font-size:11px;
}


.admin-akses-mapel-more{
    display:inline-flex;

    align-items:center;

    padding:4px 9px;

    border-radius:999px;

    background:#f1f5f9;

    color:#64748b;

    font-size:11px;

    font-weight:800;
}


/* ACTION */

.admin-akses-table-actions{
    display:flex;

    align-items:center;

    gap:7px;
}


.admin-akses-table-actions form{
    margin:0;
}


.admin-akses-table-actions
.admin-akses-edit-button,
.admin-akses-table-actions
.admin-akses-delete-button{
    min-height:34px;

    padding:0 11px;

    white-space:nowrap;
}


/* HP / TABLET */

@media (max-width:900px){

    .admin-akses-table-card{
        border-radius:14px;
    }

}
.admin-latihan-soal-button{
    border:1px solid #cbd5e1;
    background:#f8fafc;
    color:#475569;

    cursor:pointer;
    opacity:1;
    text-decoration:none;

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

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.admin-latihan-soal-button:hover{
    transform:translateY(-2px);

    border-color:#22c55e;
    background:#f0fdf4;
    color:#15803d;

    box-shadow:
        0 8px 18px rgba(34,197,94,.16);
}
/* =========================
   ADMIN KELOLA SOAL
========================= */

.admin-soal-page{
    min-height:100vh;
    padding:25px 20px 70px;
}

.admin-soal-container{
    width:100%;
    max-width:1100px;
    margin:0 auto;
}


/* HEADER */

.admin-soal-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
    transform: translateY(-20px);
}
.admin-soal-header > div:first-child{
    transform: translateY(-10px);
}

.admin-soal-label{
    display:block;
    margin-bottom:5px;

    font-size:12px;
    font-weight:800;
    letter-spacing:1.5px;

    color:#22a06b;
}

.admin-soal-header h1{
    margin:0 0 7px;

    font-size:30px;
    font-weight:800;

    color:#22a06b;
}

.admin-soal-header p{
    margin:0;

    color:#64748b;
    font-size:14px;
}

.admin-soal-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;
    padding:0 17px;

    border:1px solid #cbd5e1;
    border-radius:11px;

    background:#ffffff;
    color:#475569;

    text-decoration:none;
    font-size:13px;
    font-weight:700;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.admin-soal-back-button:hover{
    transform:translateY(-2px);
    border-color:#22a06b;

    box-shadow:
        0 6px 16px rgba(15,23,42,.08);
}


/* INFO PAKET */

.admin-soal-package-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:22px;
    padding:18px 20px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:16px;

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

.admin-soal-mode{
    display:inline-flex;

    margin-bottom:6px;
    padding:5px 9px;

    border-radius:20px;

    background:#fff7ed;
    color:#9a3412;

    font-size:11px;
    font-weight:800;
}

.admin-soal-package-card h2{
    margin:0 0 4px;

    color:#1e293b;

    font-size:20px;
    font-weight:800;
}

.admin-soal-package-card p{
    margin:0;

    color:#64748b;
    font-size:13px;
}


/* TOMBOL ATAS */

.admin-soal-package-actions{
    display:flex;
    gap:9px;
}

.admin-soal-import-button,
.admin-soal-add-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:40px;
    padding:0 15px;

    border-radius:10px;

    font-size:13px;
    font-weight:700;
}

.admin-soal-import-button{
    border:1px solid #cbd5e1;

    background:#f8fafc;
    color:#475569;

    text-decoration:none;
    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.admin-soal-import-button:hover{
    transform:translateY(-2px);

    border-color:#22a06b;

    background:#f0fdf4;

    box-shadow:
        0 7px 16px rgba(34,160,107,.12);
}

.admin-soal-add-button{
    border:1px solid #22a06b;

    background:#22a06b;
    color:#ffffff;

    text-decoration:none;
    cursor:pointer;

    box-shadow:
        0 4px 12px rgba(34,160,107,.18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.admin-soal-add-button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 7px 17px rgba(34,160,107,.25);
}


/* LIST SOAL */

.admin-soal-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}


/* CARD SOAL */

.admin-soal-card{
    display:grid;

    grid-template-columns:
        54px
        minmax(0,1fr)
        95px;

    align-items:start;

    gap:17px;

    padding:18px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:16px;

    box-shadow:
        0 4px 14px rgba(15,23,42,.05);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.admin-soal-card:hover{
    transform:translateY(-2px);

    box-shadow:
        0 9px 24px rgba(15,23,42,.09);
}


/* NOMOR */

.admin-soal-number{
    width:48px;
    height:48px;

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

    border-radius:13px;

    background:#ecfdf5;
    border:1px solid #bbf7d0;

    color:#15803d;

    font-size:18px;
    font-weight:800;
}


/* ISI SOAL */

.admin-soal-content{
    min-width:0;
}

.admin-soal-meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px;

    margin-bottom:8px;
}

.admin-soal-meta span{
    display:inline-flex;

    padding:4px 8px;

    border-radius:20px;

    background:#f1f5f9;
    color:#64748b;

    font-size:11px;
    font-weight:700;
}

.admin-soal-content h3{
    margin:0 0 13px;
    color:#1e293b;
    font-size:17px;
    font-weight:500;
    line-height:1.5;
}


/* PILIHAN */

.admin-soal-options{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:7px 12px;

    margin-bottom:12px;
}

.admin-soal-options div{
    padding:9px 11px;

    background:#f8fafc;

    border:1px solid #e2e8f0;
    border-radius:9px;

    color:#475569;

    font-size:13px;
}


/* KUNCI */

.admin-soal-answer{
    display:inline-flex;
    align-items:center;
    gap:5px;

    padding:5px 10px;

    border-radius:20px;

    background:#ecfdf5;
    color:#166534;

    font-size:12px;
    font-weight:700;
}


/* AKSI */

.admin-soal-actions{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.admin-soal-edit-button,
.admin-soal-delete-button{
    width:100%;
    min-height:37px;

    border-radius:9px;

    font-size:12px;
    font-weight:700;
}

.admin-soal-edit-button{
    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;
    cursor:pointer;

    border:1px solid #cbd5e1;

    background:#f8fafc;
    color:#64748b;
}


.admin-soal-edit-button:hover{
    transform:translateY(-2px);

    border-color:#22c55e;

    background:#f0fdf4;
}

.admin-soal-delete-button{
    border:1px solid #fecaca;

    background:#fff1f2;
    color:#dc2626;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.admin-soal-delete-button:hover{
    transform:translateY(-2px);

    background:#ffe4e6;

    border-color:#fca5a5;

    box-shadow:
        0 7px 16px rgba(220,38,38,.14);
}

.admin-soal-actions button:disabled{
    opacity:.55;
    cursor:not-allowed;
}


/* EMPTY */

.admin-soal-empty{
    padding:55px 25px;

    text-align:center;

    background:#ffffff;

    border:1px dashed #cbd5e1;
    border-radius:16px;
}

.admin-soal-empty-icon{
    margin-bottom:8px;
    font-size:42px;
}

.admin-soal-empty h3{
    margin:0 0 7px;

    color:#1e293b;
    font-size:19px;
}

.admin-soal-empty p{
    margin:0;

    color:#64748b;
    font-size:13px;
}


/* =========================
   MOBILE KELOLA SOAL
========================= */

@media(max-width:700px){

    .admin-soal-page{
        padding:25px 14px 50px;
    }

    .admin-soal-header{
        flex-direction:column;
        align-items:stretch;
    }

    .admin-soal-back-button{
        align-self:flex-start;
    }

    .admin-soal-package-card{
        flex-direction:column;
        align-items:stretch;
    }

    .admin-soal-package-actions{
        width:100%;
    }

    .admin-soal-import-button,
    .admin-soal-add-button{
        flex:1;
    }

    .admin-soal-card{
        grid-template-columns:
            45px
            minmax(0,1fr);
    }

    .admin-soal-number{
        width:42px;
        height:42px;
    }

    .admin-soal-actions{
        grid-column:1 / -1;
        flex-direction:row;
    }

    .admin-soal-edit-button,
    .admin-soal-delete-button{
        flex:1;
    }

    .admin-soal-options{
        grid-template-columns:1fr;
    }
}
/* =========================
   ADMIN FORM SOAL
========================= */

.admin-soal-form-page{
    min-height:100vh;
    padding:25px 20px 70px;
}

.admin-soal-form-container{
    width:100%;
    max-width:900px;
    margin:0 auto;
}


/* HEADER */

.admin-soal-form-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
}

.admin-soal-form-header h1{
    margin:0 0 7px;

    font-size:30px;
    font-weight:800;

    color:#22a06b;
}

.admin-soal-form-header p{
    margin:0;

    color:#64748b;
    font-size:14px;
}


/* CARD FORM */

.admin-soal-form-card{
    padding:24px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:18px;

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


/* GROUP */

.admin-soal-form-group{
    margin-bottom:19px;
}

.admin-soal-form-group label{
    display:block;

    margin-bottom:7px;

    color:#334155;

    font-size:13px;
    font-weight:800;
}


/* INPUT */

.admin-soal-form-group input[type="text"],
.admin-soal-form-group input[type="number"],
.admin-soal-form-group select,
.admin-soal-form-group textarea{
    width:100%;

    box-sizing:border-box;

    padding:11px 13px;

    border:1px solid #cbd5e1;
    border-radius:10px;

    background:#ffffff;
    color:#1e293b;

    font-family:inherit;
    font-size:14px;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.admin-soal-form-group textarea{
    min-height:110px;
    resize:vertical;
}

.admin-soal-form-group input:focus,
.admin-soal-form-group select:focus,
.admin-soal-form-group textarea:focus{
    border-color:#22a06b;

    box-shadow:
        0 0 0 3px rgba(34,160,107,.10);
}


/* FILE */

.admin-soal-form-group input[type="file"]{
    display:block;

    width:100%;

    box-sizing:border-box;

    padding:10px;

    border:1px dashed #cbd5e1;
    border-radius:10px;

    background:#f8fafc;

    font-size:13px;
}

.admin-soal-form-group small{
    display:block;

    margin-top:7px;

    color:#64748b;

    font-size:12px;
    line-height:1.5;
}


/* PREVIEW GAMBAR */

.admin-soal-current-image{
    max-width:320px;

    margin-bottom:12px;

    padding:10px;

    border:1px solid #e2e8f0;
    border-radius:12px;

    background:#f8fafc;
}

.admin-soal-current-image img{
    display:block;

    width:100%;
    max-height:220px;

    object-fit:contain;

    border-radius:8px;
}

.admin-soal-no-image{
    margin-bottom:10px;
    padding:12px;

    border:1px dashed #cbd5e1;
    border-radius:10px;

    background:#f8fafc;
    color:#64748b;

    font-size:12px;
}


/* KUNCI + URUTAN */

.admin-soal-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:18px;
}


/* ERROR */

.admin-soal-error{
    margin-bottom:18px;
    padding:14px 17px;

    border:1px solid #fecaca;
    border-radius:12px;

    background:#fff1f2;
    color:#b91c1c;

    font-size:13px;
}

.admin-soal-error ul{
    margin:7px 0 0;
    padding-left:20px;
}


/* ACTION */

.admin-soal-form-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;

    margin-top:7px;
    padding-top:20px;

    border-top:1px solid #e2e8f0;
}

.admin-soal-cancel-button,
.admin-soal-save-button{
    min-height:42px;

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

    padding:0 18px;

    border-radius:10px;

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

    text-decoration:none;
}

.admin-soal-cancel-button{
    border:1px solid #cbd5e1;

    background:#f8fafc;
    color:#475569;
}

.admin-soal-save-button{
    border:0;

    background:#22a06b;
    color:#ffffff;

    cursor:pointer;

    box-shadow:
        0 5px 14px rgba(34,160,107,.20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.admin-soal-save-button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(34,160,107,.28);
}


/* MOBILE */

@media(max-width:700px){

    .admin-soal-form-page{
        padding:25px 14px 50px;
    }

    .admin-soal-form-header{
        flex-direction:column;
        align-items:stretch;
    }

    .admin-soal-back-button{
        align-self:flex-start;
    }

    .admin-soal-form-card{
        padding:17px;
    }

    .admin-soal-form-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .admin-soal-form-actions{
        flex-direction:column-reverse;
    }

    .admin-soal-cancel-button,
    .admin-soal-save-button{
        width:100%;
        box-sizing:border-box;
    }

}
.admin-soal-actions form{
    margin:0;
    width:100%;
}
/* =========================
   SISWA - LATIHAN SOAL
========================= */

.siswa-latihan-page{
    min-height:100vh;
    padding:24px 14px 55px;
    background:transparent;
}

.siswa-latihan-container{
    width:100%;
    max-width:1100px;
    margin:0 auto;
}


/* HEADER */

.siswa-latihan-header{
    position:relative;

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

    gap:24px;

    margin-bottom:28px;
}


.siswa-latihan-title-row{
    display:flex;
    align-items:center;
    gap:16px;
}


.siswa-latihan-title-icon{
    width:62px;
    height:62px;

    flex-shrink:0;

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

    font-size:38px;
    transform:translate(-20px, -40px);
}
.siswa-latihan-title-icon img{
    width:64px;
    height:64px;

    display:block;
    object-fit:contain;
    transform:translate(-12px, 1px);
}

.siswa-latihan-title-copy{
    min-width:0;
}


.siswa-latihan-header h1{
    margin:0 0 2px;

    font-size:32px;
    line-height:1.1;
    font-weight:800;

    color:#17335f;
    transform:translate(-47px, -20px);
}


.siswa-latihan-title-mapel{
    margin-bottom:4px;

    color:#0f2747;

    font-size:18px;
    line-height:1.2;
    font-weight:800;
    transform:translate(-47px, -20px);
}


.siswa-latihan-title-quote{
    margin:0;

    color:#475569;

    font-size:14px;
    line-height:1.45;
    font-weight:600;
    transform:translate(-35px, -20px);
}


.siswa-latihan-back-button{
    min-height:42px;

    flex-shrink:0;

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

    padding:0 15px;

    border:1px solid rgba(203,213,225,.85);
    border-radius:11px;

    background:rgba(255,255,255,.90);
    color:#315b91;

    text-decoration:none;

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

    box-shadow:0 5px 14px rgba(30,64,175,.08);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.siswa-latihan-back-button:hover{
    transform:translateY(-2px);

    border-color:#60a5fa;

    box-shadow:0 8px 18px rgba(30,64,175,.14);
}
/* BAGIAN */

/* BAGIAN */

.siswa-latihan-section{
    position:relative;

    margin-bottom:28px;
    padding:24px;

    border:1px solid rgba(255,255,255,.65);
    border-radius:24px;

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    box-shadow:
        0 12px 30px rgba(15,23,42,.08);

    overflow:hidden;
}


/* PANEL ASESMEN ONLINE - BIRU */

.siswa-latihan-section.asesmen{
    background:
        linear-gradient(
            180deg,
            rgba(191,226,255,.68) 0%,
            rgba(219,239,255,.78) 48%,
            rgba(255,255,255,.82)100%
        );
}


/* PANEL LATIHAN INTERAKTIF - HIJAU */

.siswa-latihan-section.interaktif{
    background:
        linear-gradient(
            180deg,
            rgba(190,239,215,.68) 0%,
            rgba(224,248,236,.78) 48%,
            rgba(255,255,255,.82) 100%
        );
}

.siswa-latihan-section-heading{
    display:flex;
    align-items:flex-start;

    gap:11px;

    margin-bottom:14px;
}

.siswa-latihan-section-icon{
    width:44px;
    height:44px;

    flex-shrink:0;

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

    border-radius:13px;

    font-size:22px;
}

.siswa-latihan-section-icon.interaktif{
    background:#fff7ed;
    border:1px solid #fed7aa;
}

.siswa-latihan-section-icon.biasa{
    background:#eff6ff;
    border:1px solid #bfdbfe;
}

.siswa-latihan-section-heading h2{
    margin:0 0 3px;

    color:#1e293b;

    font-size:18px;
    font-weight:800;
}

.siswa-latihan-section-heading p{
    margin:0;

    color:#64748b;

    font-size:12px;
    line-height:1.45;
}


/* GRID */

.siswa-latihan-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}


/* CARD */

.siswa-latihan-card{
    min-width:0;

    display:flex;
    flex-direction:column;

    padding:17px;

    border-radius:17px;

    text-decoration:none;

    box-sizing:border-box;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.siswa-latihan-card.aktif{
    background:#ffffff;

    border:1px solid #e2e8f0;

    box-shadow:
        0 4px 14px rgba(15,23,42,.05);

    color:#1e293b;

    cursor:pointer;
}

.siswa-latihan-card.aktif:hover{
    transform:translateY(-3px);

    border-color:#bbf7d0;

    box-shadow:
        0 10px 24px rgba(15,23,42,.09);
}


/* NONAKTIF */

.siswa-latihan-card.nonaktif{
    background:#f1f5f9;

    border:1px solid #e2e8f0;

    color:#94a3b8;

    cursor:not-allowed;

    box-shadow:none;
}

.siswa-latihan-card.nonaktif .siswa-latihan-card-icon{
    filter:grayscale(1);
    opacity:.65;
}

.siswa-latihan-card.nonaktif h3{
    color:#94a3b8;
}


/* CARD TOP */

.siswa-latihan-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:12px;

    margin-bottom:14px;
}

.siswa-latihan-card.aktif.biasa .siswa-latihan-status{
    margin-left:auto;
}
.siswa-latihan-card-icon{
    width:50px;
    height:50px;

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

    border-radius:14px;

    font-size:26px;
}

.siswa-latihan-card.interaktif .siswa-latihan-card-icon{
    background:#fff7ed;
    border:1px solid #fed7aa;
}

.siswa-latihan-card.biasa .siswa-latihan-card-icon{
    background:#eff6ff;
    border:1px solid #bfdbfe;
}


/* STATUS */

.siswa-latihan-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:5px 9px;

    border-radius:20px;

    font-size:10px;
    font-weight:800;
}

.siswa-latihan-status.aktif{
    background:#ecfdf5;
    color:#15803d;
}

.siswa-latihan-status.nonaktif{
    background:#e2e8f0;
    color:#64748b;
}


/* CONTENT */

.siswa-latihan-card-content{
    flex:1;
}

.siswa-latihan-mode{
    display:block;

    margin-bottom:5px;

    color:#22a06b;

    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
}

.siswa-latihan-card.nonaktif .siswa-latihan-mode{
    color:#94a3b8;
}

.siswa-latihan-card-content h3{
    margin:0 0 12px;

    color:#1e293b;

    font-size:18px;
    line-height:1.35;
    font-weight:800;
}

.siswa-latihan-card-meta{
    display:flex;
    flex-wrap:wrap;

    gap:7px;
}

.siswa-latihan-card-meta span{
    display:inline-flex;
    align-items:center;

    min-height:27px;

    padding:0 9px;

    border-radius:20px;

    background:#f1f5f9;
    color:#64748b;

    font-size:11px;
    font-weight:700;
}

.siswa-latihan-card.nonaktif .siswa-latihan-card-meta span{
    background:#e2e8f0;
    color:#94a3b8;
}


/* FOOTER CARD */

.siswa-latihan-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-top:16px;
    padding-top:13px;

    border-top:1px solid #e2e8f0;

    color:#22a06b;

    font-size:12px;
    font-weight:800;
}

.siswa-latihan-card.nonaktif .siswa-latihan-card-footer{
    color:#94a3b8;
}


/* EMPTY */

.siswa-latihan-empty{
    padding:32px 20px;

    text-align:center;

    background:#ffffff;

    border:1px dashed #cbd5e1;
    border-radius:16px;

    color:#64748b;
}

.siswa-latihan-empty > span{
    display:block;

    margin-bottom:8px;

    font-size:36px;
}

.siswa-latihan-empty strong{
    display:block;

    margin-bottom:5px;

    color:#334155;

    font-size:14px;
}

.siswa-latihan-empty p{
    margin:0;

    font-size:12px;
    line-height:1.5;
}

/* =========================
   HP - PENILAIAN & LATIHAN
========================= */

@media(max-width:480px){

    .siswa-latihan-page{
        padding:18px 12px 50px;
    }

    .siswa-latihan-header{
        position:relative;
        flex-direction:row;
        align-items:flex-start;
        justify-content:space-between;
        gap:10px;
        margin-bottom:22px;
    }

    .siswa-latihan-title-row{
        min-width:0;
        align-items:flex-start;
        gap:9px;
    }

    .siswa-latihan-title-icon{
        width:42px;
        height:42px;
        flex:0 0 42px;
        transform:translate(15px, -5px);
    }

    .siswa-latihan-title-icon img{
        width:40px;
        height:40px;
    }

    .siswa-latihan-title-copy{
        min-width:0;
    }

    .siswa-latihan-header h1{
        margin:0 0 2px;
        font-size:20px;
        line-height:1.15;
        transform:translate(-5px, 0px);
    }

    .siswa-latihan-title-mapel{
        margin-bottom:3px;
        font-size:14px;
        transform:translate(-5px, 0px);
    }

    .siswa-latihan-title-quote{
        max-width:230px;
        font-size:10px;
        line-height:1.35;
        transform:translate(-5px, 0px);
    }

    .siswa-latihan-back-button{
        min-height:30px;
        padding:0 8px;
        border-radius:9px;
        font-size:10px;
        flex-shrink:0;
    }

}

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

@media(min-width:600px){

    .siswa-latihan-page{
        padding:
            30px
            20px
            60px;
    }

    .siswa-latihan-grid{
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}


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

@media(min-width:900px){

    .siswa-latihan-page{
        padding:
            36px
            24px
            70px;
    }

    .siswa-latihan-header{
        flex-direction:row;
        align-items:flex-end;
        justify-content:space-between;
    }

    .siswa-latihan-header h1{
        font-size:30px;
    }

    .siswa-latihan-grid{
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }

}
/* =========================
   SISWA - KERJAKAN LATIHAN
========================= */

.siswa-kerjakan-page{
    min-height:100vh;
    padding:24px 14px 55px;
    background:#f8fafc;
}

.siswa-kerjakan-container{
    width:100%;
    max-width:820px;
    margin:0 auto;
}


/* HEADER */

.siswa-kerjakan-header{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
    margin-bottom:18px;
}

.siswa-kerjakan-label{
    display:block;
    margin-bottom:5px;

    color:#22a06b;

    font-size:11px;
    font-weight:800;
    letter-spacing:1.4px;
}

.siswa-kerjakan-header h1{
    margin:0 0 6px;

    color:#1e293b;

    font-size:26px;
    line-height:1.2;
    font-weight:800;
}

.siswa-kerjakan-header p{
    margin:0;

    color:#64748b;

    font-size:13px;
    line-height:1.5;
}

.siswa-kerjakan-back-button{
    min-height:42px;

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

    padding:0 15px;

    border:1px solid #cbd5e1;
    border-radius:11px;

    background:#ffffff;
    color:#475569;

    text-decoration:none;

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

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.siswa-kerjakan-back-button:hover{
    transform:translateY(-2px);

    border-color:#22a06b;

    box-shadow:
        0 7px 16px rgba(15,23,42,.08);
}


/* INFO LATIHAN */

.siswa-kerjakan-info{
    display:flex;
    flex-wrap:wrap;
    gap:7px;

    margin-bottom:15px;
}

.siswa-kerjakan-info span{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:0 10px;

    border-radius:20px;

    background:#f1f5f9;
    color:#64748b;

    font-size:11px;
    font-weight:700;
}


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

.siswa-kerjakan-stage{
    width:100%;
}

.siswa-kerjakan-soal{
    width:100%;
    box-sizing:border-box;

    padding:18px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:18px;

    box-shadow:
        0 7px 22px rgba(15,23,42,.06);
}


/* PROGRESS */

.siswa-kerjakan-progress{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    margin-bottom:9px;

    color:#64748b;

    font-size:12px;
    font-weight:700;
}

.siswa-kerjakan-progress strong{
    color:#22a06b;
}

.siswa-kerjakan-progress-bar{
    width:100%;
    height:7px;

    overflow:hidden;

    margin-bottom:22px;

    border-radius:20px;

    background:#e2e8f0;
}

.siswa-kerjakan-progress-fill{
    height:100%;

    border-radius:20px;

    background:#22a06b;
}


/* PERTANYAAN */

.siswa-kerjakan-question h2{
    margin:0 0 18px;

    color:#1e293b;

    font-size:16px;
    line-height:1.55;
    font-weight:500;
}


/* GAMBAR SOAL */

.siswa-kerjakan-image{
    width:100%;

    margin:
        0
        auto
        20px;

    text-align:center;
}

.siswa-kerjakan-image img{
    display:block;

    width:auto;
    max-width:100%;
    max-height:340px;

    margin:0 auto;

    object-fit:contain;

    border-radius:12px;
}


/* PILIHAN */

.siswa-kerjakan-options{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.siswa-kerjakan-option{
    width:100%;

    min-height:54px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:10px 13px;

    border:1px solid #dbe3ec;
    border-radius:13px;

    background:#ffffff;
    color:#334155;

    text-align:left;

    font-family:inherit;
    font-size:14px;
    font-weight:400;

    cursor:pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.siswa-kerjakan-option:hover{
    transform:translateY(-1px);

    border-color:#86efac;

    background:#f7fff9;

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

.siswa-kerjakan-option.dipilih{
    border-color:#22a06b;

    background:#ecfdf5;

    box-shadow:
        0 0 0 3px rgba(34,160,107,.08);
}


/* HURUF A B C D */

.siswa-kerjakan-option-letter{
    width:34px;
    height:34px;

    flex-shrink:0;

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

    border-radius:10px;

    background:#f1f5f9;
    color:#475569;

    font-size:13px;
    font-weight:800;
}

.siswa-kerjakan-option.dipilih
.siswa-kerjakan-option-letter{
    background:#22a06b;
    color:#ffffff;
}

/* ISI PILIHAN: TEKS + GAMBAR */

.siswa-kerjakan-option-content{
    flex:1;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:8px;

    min-width:0;
}


.siswa-kerjakan-option-image{
    display:block;

    width:auto;
    max-width:220px;

    height:auto;
    max-height:170px;

    object-fit:contain;

    border-radius:10px;

    background:#ffffff;
}


.siswa-kerjakan-option.punya-gambar{
    align-items:flex-start;
}


.siswa-kerjakan-option.punya-gambar
.siswa-kerjakan-option-letter{
    margin-top:2px;
}


.siswa-kerjakan-option.punya-gambar
.siswa-kerjakan-option-text{
    width:100%;
}


/* FEEDBACK */

.siswa-kerjakan-feedback{
    margin-top:14px;

    padding:12px 14px;

    border-radius:12px;

    font-size:13px;
    font-weight:700;
}


/* NAVIGASI */

.siswa-kerjakan-navigation{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-top:22px;
    padding-top:17px;

    border-top:1px solid #e2e8f0;
}

.siswa-kerjakan-prev,
.siswa-kerjakan-next,
.siswa-kerjakan-finish{
    min-height:44px;

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

    padding:0 16px;

    border-radius:11px;

    font-family:inherit;
    font-size:13px;
    font-weight:800;

    cursor:pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.siswa-kerjakan-prev{
    border:1px solid #cbd5e1;

    background:#f8fafc;
    color:#475569;
}

.siswa-kerjakan-prev:not(:disabled):hover{
    transform:translateY(-2px);

    background:#ffffff;

    box-shadow:
        0 6px 14px rgba(15,23,42,.07);
}

.siswa-kerjakan-prev:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.siswa-kerjakan-next,
.siswa-kerjakan-finish{
    border:0;

    background:#22a06b;
    color:#ffffff;

    box-shadow:
        0 5px 14px rgba(34,160,107,.20);
}

.siswa-kerjakan-next:hover,
.siswa-kerjakan-finish:hover{
    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(34,160,107,.28);
}


/* =========================
   TABLET & DESKTOP
   TETAP 1 CARD
========================= */

@media(min-width:700px){

    .siswa-kerjakan-page{
        padding:
            32px
            20px
            70px;
    }

    .siswa-kerjakan-soal{
        padding:24px;
    }

    .siswa-kerjakan-header{
        flex-direction:row;
        align-items:flex-end;
        justify-content:space-between;
    }

    .siswa-kerjakan-header h1{
        font-size:30px;
    }

    .siswa-kerjakan-question h2{
        font-size:16px;
    }
}


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

@media(max-width:380px){

    .siswa-kerjakan-page{
        padding:
            20px
            10px
            45px;
    }

    .siswa-kerjakan-soal{
        padding:14px;
        border-radius:15px;
    }

    .siswa-kerjakan-navigation{
        flex-direction:column;
    }

    .siswa-kerjakan-prev,
    .siswa-kerjakan-next,
    .siswa-kerjakan-finish{
        width:100%;
        box-sizing:border-box;
    }
        .siswa-kerjakan-option{
        padding:10px;
        gap:10px;
    }

    .siswa-kerjakan-option-letter{
        width:32px;
        height:32px;
    }

    .siswa-kerjakan-option-image{
        max-width:100%;
        max-height:150px;
    }
}
/* =========================
   CARD KEMBALI LATIHAN
========================= */

.siswa-kerjakan-exit-card{
    margin-top:16px;

    display:flex;
    flex-direction:column;

    gap:14px;

    padding:16px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:16px;

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


.siswa-kerjakan-exit-text{
    display:flex;
    flex-direction:column;

    gap:4px;
}


.siswa-kerjakan-exit-text strong{
    color:#1e293b;

    font-size:14px;
    font-weight:800;
}


.siswa-kerjakan-exit-text span{
    color:#64748b;

    font-size:12px;
    line-height:1.5;
}


.siswa-kerjakan-exit-button{
    min-height:42px;

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

    padding:0 15px;

    border:1px solid #cbd5e1;
    border-radius:11px;

    background:#f8fafc;
    color:#475569;

    text-decoration:none;

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

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.siswa-kerjakan-exit-button:hover{
    transform:translateY(-2px);

    border-color:#22a06b;

    background:#f0fdf4;

    box-shadow:
        0 7px 16px rgba(34,160,107,.12);
}


/* DESKTOP */

@media(min-width:700px){

    .siswa-kerjakan-exit-card{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
    }

}
/* =========================
   HASIL JAWABAN INTERAKTIF
========================= */

.siswa-kerjakan-option.benar{
    border-color:#22c55e;
    background:#ecfdf5;
}

.siswa-kerjakan-option.benar
.siswa-kerjakan-option-letter{
    background:#22a06b;
    color:#ffffff;
}


.siswa-kerjakan-option.salah{
    border-color:#f87171;
    background:#fff1f2;
}

.siswa-kerjakan-option.salah
.siswa-kerjakan-option-letter{
    background:#ef4444;
    color:#ffffff;
}


.siswa-kerjakan-feedback.benar{
    background:#ecfdf5;
    border:1px solid #bbf7d0;
    color:#166534;
}


.siswa-kerjakan-feedback.salah{
    background:#fff1f2;
    border:1px solid #fecaca;
    color:#b91c1c;
}
/* =========================
   CONFETTI LATIHAN
========================= */

.latihan-confetti{
    position:fixed;

    top:-20px;

    width:10px;
    height:16px;

    z-index:99999;

    pointer-events:none;

    border-radius:2px;

    animation-name:latihanConfettiFall;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
}


@keyframes latihanConfettiFall{

    0%{
        transform:
            translateY(-20px)
            rotate(0deg);

        opacity:1;
    }

    100%{
        transform:
            translateY(110vh)
            rotate(720deg);

        opacity:0;
    }

}
/* =========================
   SISWA - HASIL LATIHAN
========================= */

.siswa-hasil-latihan-page{
    min-height:100vh;
    padding:24px 14px 55px;
    background:transparent;
}

.siswa-hasil-latihan-container{
    width:100%;
    max-width:900px;
    margin:0 auto;
}


/* =========================
   SUMMARY
========================= */

.siswa-hasil-latihan-summary{
    padding:22px 18px;

    background:rgba(255,255,255,.72);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
    border:1px solid #e2e8f0;
    border-radius:18px;

    box-shadow:
        0 6px 20px rgba(15,23,42,.06);

    text-align:center;
}

.siswa-hasil-latihan-label{
    display:block;
    margin-bottom:6px;

    color:#22a06b;

    font-size:11px;
    font-weight:800;
    letter-spacing:1.4px;
}

.siswa-hasil-latihan-summary h1{
    margin:0 0 5px;

    color:#1e293b;

    font-size:24px;
    line-height:1.25;
    font-weight:800;
}

.siswa-hasil-latihan-summary p{
    margin:0 0 20px;

    color:#64748b;

    font-size:13px;
}


/* NILAI */

.siswa-hasil-latihan-score{
    width:100px;
    height:100px;

    margin:0 auto 7px;

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

    border-radius:50%;

    background:#ecfdf5;
    border:4px solid #22a06b;

    color:#15803d;

    font-size:38px;
    font-weight:900;
}

.siswa-hasil-latihan-score-label{
    display:block;

    margin-bottom:22px;

    color:#64748b;

    font-size:12px;
    font-weight:700;
}


/* STATISTIK */

.siswa-hasil-latihan-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:8px;
}

.siswa-hasil-latihan-stats > div{
    padding:12px 7px;

    background:#f8fafc;

    border:1px solid #e2e8f0;
    border-radius:12px;
}

.siswa-hasil-latihan-stats strong{
    display:block;

    margin-bottom:3px;

    color:#1e293b;

    font-size:20px;
    font-weight:800;
}

.siswa-hasil-latihan-stats span{
    color:#64748b;

    font-size:11px;
    font-weight:700;
}


/* =========================
   ANALISIS
========================= */

.siswa-hasil-latihan-detail{
    margin-top:22px;
}

.siswa-hasil-latihan-detail-header{
    display:table;

    padding:12px 18px;

    background:rgba(255,255,255,.72);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.65);
    border-radius:16px;

    margin-bottom:14px;
}

.siswa-hasil-latihan-detail-header h2{
    margin:0 0 4px;

    color:#1e293b;

    font-size:20px;
    font-weight:800;
}

.siswa-hasil-latihan-detail-header p{
    margin:0;

    color:#64748b;

    font-size:12px;
    line-height:1.5;
}


/* LIST */

.siswa-hasil-latihan-list{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:14px;
}

.siswa-hasil-latihan-item{
    display:grid;

    grid-template-columns:
        42px
        minmax(0,1fr);

    gap:12px;

    padding:14px;

    background:#ffffff;

    border-radius:15px;

    box-shadow:
        0 4px 14px rgba(15,23,42,.04);
}


/* BENAR */

.siswa-hasil-latihan-item.benar{
    border:1px solid #bbf7d0;
    background:#f7fff9;
}


/* SALAH */

.siswa-hasil-latihan-item.salah{
    border:1px solid #fecaca;
    background:#fffafa;
}


/* NOMOR */

.siswa-hasil-latihan-number{
    position:absolute;
    top:12px;
    left:12px;

    width:30px;
    height:30px;

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

    border-radius:9px;

    font-size:13px;
    font-weight:900;
}

.siswa-hasil-latihan-item.benar
.siswa-hasil-latihan-number{
    background:#dcfce7;
    color:#15803d;
}

.siswa-hasil-latihan-item.salah
.siswa-hasil-latihan-number{
    background:#fee2e2;
    color:#dc2626;
}


/* ISI */

.siswa-hasil-latihan-content{
    min-width:0;
}

.siswa-hasil-latihan-content h3{
    margin:1px 0 10px;

    color:#1e293b;

    font-size:14px;
    line-height:1.5;
    font-weight:800;
}


/* JAWABAN */

.siswa-hasil-latihan-answer{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;

    gap:8px;

    color:#64748b;

    font-size:12px;
}

.siswa-hasil-latihan-answer > span:first-child{
    display:inline-flex;
    align-items:center;

    gap:4px;
}

.siswa-hasil-latihan-answer strong{
    color:#1e293b;
}


/* STATUS */

.siswa-hasil-latihan-answer .status{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:26px;
    padding:0 9px;

    border-radius:20px;

    font-size:11px;
    font-weight:800;
}

.siswa-hasil-latihan-answer .status.benar{
    background:#dcfce7;
    color:#15803d;
}

.siswa-hasil-latihan-answer .status.salah{
    background:#fee2e2;
    color:#dc2626;
}


/* =========================
   TOMBOL KEMBALI
========================= */

.siswa-hasil-latihan-actions{
    margin-top:20px;

    display:flex;
    justify-content:center;
}

.siswa-hasil-latihan-back{
    min-height:44px;

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

    padding:0 17px;

    border:1px solid #cbd5e1;
    border-radius:11px;

    background:#ffffff;
    color:#475569;

    text-decoration:none;

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

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.siswa-hasil-latihan-back:hover{
    transform:translateY(-2px);

    border-color:#22a06b;

    background:#f0fdf4;

    box-shadow:
        0 7px 16px rgba(34,160,107,.12);
}


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

@media(min-width:700px){

    .siswa-hasil-latihan-page{
        padding:
            34px
            20px
            70px;
    }

    .siswa-hasil-latihan-summary{
        padding:28px;
    }

    .siswa-hasil-latihan-summary h1{
        font-size:30px;
    }

    .siswa-hasil-latihan-detail-header h2{
        font-size:22px;
    }

    .siswa-hasil-latihan-content h3{
        font-size:15px;
    }

}


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

@media(max-width:380px){

    .siswa-hasil-latihan-page{
        padding:
            20px
            10px
            45px;
    }

    .siswa-hasil-latihan-summary{
        padding:
            18px
            13px;
    }

    .siswa-hasil-latihan-score{
        width:88px;
        height:88px;

        font-size:34px;
    }

    .siswa-hasil-latihan-item{
        grid-template-columns:
            36px
            minmax(0,1fr);

        gap:9px;

        padding:12px;
    }

    .siswa-hasil-latihan-number{
        width:36px;
        height:36px;
    }

    .siswa-hasil-latihan-answer{
        align-items:flex-start;
        flex-direction:column;
    }

    .siswa-hasil-latihan-back{
        width:100%;
        box-sizing:border-box;
    }

}
/* =========================
   HP - IDENTITAS SISWA MINI
========================= */

@media(max-width:600px){

    .mapel-welcome-card{
        position:relative;
    }


    .mapel-welcome-student{
        position:absolute;

        top:15px;
        right:4px;

        width:auto;
        min-width:180px;
        max-width:180px;

        padding:9px 11px;

        gap:8px;

        border-radius:13px;

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

        backdrop-filter:blur(8px);

        box-shadow:none;
    }


    .mapel-welcome-student-avatar{
        width:38px;
        height:38px;

        flex-shrink:0;

        border-radius:11px;

        font-size:17px;
    }


    .mapel-welcome-student-info strong{
        font-size:12px;
        line-height:1.2;
    }


    .mapel-welcome-student-info span{
        font-size:9px;
        line-height:1.35;
    }
    .mapel-welcome-panda{
        display:none;

}
}
/* =========================
   HALAMAN HASIL BELAJAR SISWA
========================= */
.hasil-quote-break-hp{
    display:none;
}
.siswa-hasil-belajar-page{
    padding:24px 16px 50px;
}

.siswa-hasil-belajar-container{
    width:100%;
    max-width:1180px;
    margin:0 auto;
}

.siswa-hasil-belajar-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;

    margin-bottom:26px;
}

.siswa-hasil-belajar-title-row{
    display:flex;
    align-items:flex-start;
    gap:16px;
}


.siswa-hasil-belajar-title-icon{
    width:64px;
    height:64px;

    flex:0 0 64px;

    display:flex;
    align-items:center;
    justify-content:center;
    transform:translate(5px, -20px);
}


.siswa-hasil-belajar-title-icon img{
    width:64px;
    height:64px;

    display:block;
    object-fit:contain;
}


.siswa-hasil-belajar-title-copy{
    min-width:0;
}  
/* TULISAN HASIL BELAJAR */

.siswa-hasil-belajar-label{
    display:block;

    margin-bottom:4px;

    color:#17345f;

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

    text-transform:uppercase;
    letter-spacing:.6px;
}


/* NAMA MAPEL */

.siswa-hasil-belajar-header h1{
    margin:0;

    color:#102f5e;

    font-size:32px;
    line-height:1.15;
    font-weight:900;
    transform:translate(-17px, -10px);
}
.siswa-hasil-belajar-title-mapel{
    margin-top:3px;

    color:#17345f;

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

    transform:translate(-17px, -17px);
}
.siswa-hasil-belajar-title-quote{
    margin:7px 0 0;

    color:#263f5e;

    font-size:13px;
    line-height:1.4;
    font-weight:700;

    transform:translate(-15px, -23px);
}

/* TOMBOL KEMBALI */

.siswa-hasil-belajar-back{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    padding:10px 16px;

    color:#345a86;

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

    background:#ffffff;

    border:1px solid #dbe6f5;
    border-radius:12px;

    text-decoration:none;

    box-shadow:0 4px 12px rgba(25,69,120,.05);
}

.siswa-hasil-belajar-student{
    display:flex;
    align-items:center;

    gap:10px;

    width:fit-content;
    max-width:100%;

    margin-bottom:12px;

    padding:9px 16px;

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

    border:1px solid rgba(255,255,255,.90);
    border-radius:14px;

    box-shadow:0 4px 14px rgba(25,69,120,.05);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.siswa-hasil-belajar-student-avatar{
    width:36px;
    height:36px;

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

    flex-shrink:0;

    color:#fff;

    font-size:15px;
    font-weight:900;

    background:#22a06b;

    border-radius:10px;
}

.siswa-hasil-belajar-student-info{
    display:flex;
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;

    gap:0;

    min-width:0;
}

.siswa-hasil-belajar-student-info strong{
    color:#17345f;
    font-size:16px;
    font-weight:900;

    margin-right:12px;
}

.siswa-hasil-belajar-student-info span{
    color:#526b89;
    font-size:13px;
    font-weight:600;

    margin-right:10px;
}

.siswa-hasil-belajar-table-card{
    overflow:hidden;

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

    border:1px solid rgba(255,255,255,.90);
    border-radius:18px;

    box-shadow:0 6px 18px rgba(25,69,120,.06);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}



.siswa-hasil-belajar-table{
    width:100%;
    border-collapse:collapse;
    color:#344b68;
    font-size:14px;
}

.siswa-hasil-belajar-table th{
    padding:13px 16px;

    color:#284b73;

    font-size:11px;
    font-weight:900;

    text-align:left;
    text-transform:uppercase;
    letter-spacing:.5px;

    background:rgba(235,244,255,.72);

    border-bottom:1px solid rgba(184,207,234,.65);
}

.siswa-hasil-belajar-table td{
    padding:16px;
    vertical-align:middle;
    border-bottom:1px solid #edf2f7;
}

.siswa-hasil-belajar-table tbody tr:last-child td{
    border-bottom:none;
}

.siswa-hasil-belajar-table .hasil-no{
    width:55px;
    text-align:center;
    color:#7a8da5;
}

.siswa-hasil-belajar-table th:first-child{
    text-align:center;
}

.siswa-hasil-belajar-table .hasil-nama strong{
    color:#17345f;
    font-size:15px;
    font-weight:800;
}

.siswa-hasil-belajar-table .hasil-percobaan{
    width:130px;
}

.hasil-badge-percobaan{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    padding:5px 9px;
    color:#45678f;
    font-size:12px;
    font-weight:800;
    background:#eef4fb;
    border-radius:9px;
}

.siswa-hasil-belajar-table .hasil-nilai{
    width:140px;
}

.siswa-hasil-belajar-table .hasil-nilai strong{
    display:inline;

    min-width:0;
    height:auto;

    padding:0;

    color:#17345f;

    font-size:18px;
    font-weight:900;

    background:transparent;

    border:0;
    border-radius:0;
}

.siswa-hasil-belajar-table .hasil-aksi{
    width:150px;
}

.siswa-hasil-belajar-table .hasil-aksi a{

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

    padding:8px 12px;

    color:#174ea6;
    font-size:13px;
    font-weight:800;

    background:#edf4ff;

    border-radius:10px;

    text-decoration:none;

    white-space:nowrap;
}

/* ========================================
   DETAIL HASIL BELAJAR - DESKTOP
======================================== */

.siswa-detail-hasil-header{
    margin-bottom:24px;
}


/* BARIS IKON + TEKS */

.siswa-detail-hasil-title-row{
    display:flex;
    align-items:flex-start;
    gap:14px;

    min-width:0;
}


/* IKON */

.siswa-detail-hasil-title-icon{
    width:60px;
    height:60px;
    flex:0 0 68px;

    transform:translate(3px, -18px);
}

.siswa-detail-hasil-title-icon img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}


/* WADAH TEKS */

.siswa-detail-hasil-title-copy{
    min-width:0;
}


/* DETAIL HASIL */

.siswa-detail-hasil-header h1{
    margin:0;

    color:#17345f;

    font-size:35px;
    line-height:1.05;
    font-weight:900;
    transform:translate(-20px, -10px);
}


/* NAMA LATIHAN */

.siswa-detail-hasil-paket{
    margin-top:5px;

    color:#17345f;

    font-size:21px;
    line-height:1.2;
    font-weight:800;
    transform:translate(-20px, -17px);
}


/* QUOTE */

.siswa-detail-hasil-quote{
    margin:7px 0 0;

    color:#334e70;

    font-size:14px;
    line-height:1.4;
    font-weight:600;
    transform:translate(-17px, -20px);
}
/* ========================================
   DETAIL HASIL BELAJAR - HP
======================================== */

@media (max-width:480px){

    /* HEADER DETAIL */
    .siswa-detail-hasil-header{
        margin-bottom:20px;
    }


    /* BARIS IKON + TEKS */
    .siswa-detail-hasil-title-row{
        display:flex;
        align-items:flex-start;
        gap:10px;

        min-width:0;
    }


    /* IKON */
    .siswa-detail-hasil-title-icon{
        width:52px;
        height:52px;
        flex:0 0 52px;

        transform:translate(-10px, -5px);
    }


    .siswa-detail-hasil-title-icon img{
        width:100%;
        height:100%;

        object-fit:contain;
    }


    /* WADAH TEKS */
    .siswa-detail-hasil-title-copy{
        flex:1;
        min-width:0;
    }


    /* DETAIL HASIL */
    .siswa-detail-hasil-header h1{
        margin:0;

        font-size:24px;
        line-height:1.1;

        transform:none;
    }


    /* NAMA LATIHAN */
    .siswa-detail-hasil-paket{
    margin-top:4px;

    width:330px;
    max-width:none;

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

    white-space:nowrap;

    transform:translate(-20px, -5px);
}


    /* QUOTE */
    .siswa-detail-hasil-quote{
    margin-top:10px;

    width:350px;
    max-width:none;

    font-size:14px;
    line-height:1.45;

    transform:translate(-65px, -13px);
}
.siswa-detail-hasil-page .siswa-hasil-belajar-back{
    padding:3px 10px;
    font-size:12px;
    border-radius:10px;

    transform:translate(10px, -5px);
}
/* LABEL DATA RIWAYAT - KHUSUS DETAIL HASIL HP */

.siswa-detail-hasil-page
.siswa-hasil-belajar-table td:nth-child(3)::before{
    content:"Jumlah Soal";
}

.siswa-detail-hasil-page
.siswa-hasil-belajar-table td:nth-child(4)::before{
    content:"Benar";
}

.siswa-detail-hasil-page
.siswa-hasil-belajar-table td:nth-child(5)::before{
    content:"Salah";
}
/* NILAI AKHIR - DETAIL HASIL HP */

.siswa-detail-hasil-page
.siswa-hasil-belajar-table .hasil-nilai{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;

    padding-top:5px;
    padding-bottom:5px;

    text-align:left;
}

.siswa-detail-hasil-page
.siswa-hasil-belajar-table .hasil-nilai::before{
    content:"Nilai Akhir";

    width:100px;
    flex:0 0 100px;

    color:#526b8c;
    font-weight:700;
    transform:translateX(6px);
}

.siswa-detail-hasil-page
.siswa-hasil-belajar-table .hasil-nilai strong{
    color:#17345f;
    font-size:14px;
    font-weight:900;
    white-space:nowrap;
min-width:60px;
}

.siswa-detail-hasil-page
.siswa-hasil-belajar-table td:nth-child(3),

.siswa-detail-hasil-page
.siswa-hasil-belajar-table td:nth-child(4),

.siswa-detail-hasil-page
.siswa-hasil-belajar-table td:nth-child(5){
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
padding-top:2px;
padding-bottom:2px;
    text-align:left;
    transform:translateX(8px);
}
.siswa-detail-hasil-page
.siswa-hasil-belajar-table td:nth-child(3)::before,

.siswa-detail-hasil-page
.siswa-hasil-belajar-table td:nth-child(4)::before,

.siswa-detail-hasil-page
.siswa-hasil-belajar-table td:nth-child(5)::before{

    width:100px;
    flex:0 0 100px;

    color:#526b8c;

    font-weight:700;
}
}
@media(max-width:700px){

    .siswa-hasil-belajar-page{
        padding:18px 12px 40px;
    }

    .siswa-hasil-belajar-header{
        gap:12px;
        margin-bottom:18px;
    }

    .siswa-hasil-belajar-header h1{
        font-size:24px;
    }

    .siswa-hasil-belajar-student{
        gap:10px;
        padding:12px 13px;
        border-radius:15px;
    }

    .siswa-hasil-belajar-student-avatar{
        width:40px;
        height:40px;
        font-size:16px;
        border-radius:11px;
    }

    .siswa-hasil-belajar-student-info strong{
        font-size:14px;
    }

    .siswa-hasil-belajar-student-info span{
        font-size:11px;
    }

    .siswa-hasil-belajar-table-card{
    background:
    linear-gradient(
        180deg,
        rgba(190,225,255,.96) 0%,
        rgba(214,237,255,.96) 50%,
        rgba(255,255,255,.96) 100%
    );

    border:1px solid rgba(170,211,245,.80);
    border-radius:20px;

    box-shadow:
        0 10px 24px rgba(31,91,145,.10);
}

    .siswa-hasil-belajar-table{
        min-width:620px;
        font-size:13px;
    }

    .siswa-hasil-belajar-table thead{
    display:none;
}
.siswa-hasil-belajar-table,
.siswa-hasil-belajar-table tbody,
.siswa-hasil-belajar-table tr,
.siswa-hasil-belajar-table td{
    display:block;
    width:100%;
}


.siswa-hasil-belajar-table{
    min-width:0;
}

.siswa-hasil-belajar-table tr{
    margin-bottom:0;

    background:transparent;

    border:0;
    border-radius:0;

    box-shadow:none;

    overflow:visible;
}

.siswa-hasil-belajar-table td{
    width:100%;

    padding:8px 14px;

    border-bottom:0;
    box-sizing:border-box;
}
.siswa-hasil-belajar-table .hasil-no{
    display:none;
}

.siswa-hasil-belajar-table .hasil-nama{
    position:relative;

    padding:16px 16px 18px;

    text-align:left;

    border-bottom:0;
}

.siswa-hasil-belajar-table .hasil-nama::after{
    content:"";

    position:absolute;

    left:16px;
    right:16px;
    bottom:0;

    height:2px;

    background:rgba(76,154,216,.30);

    border-radius:999px;
}
.siswa-hasil-belajar-table .hasil-nama strong{
    display:block;

    color:#17345f;

    font-size:15px;
    line-height:1.35;
    font-weight:900;
}
/* PERCOBAAN DAN NILAI */

.siswa-hasil-belajar-table .hasil-percobaan,
.siswa-hasil-belajar-table .hasil-nilai{
    display:grid;

    grid-template-columns:75px 1fr;
    align-items:center;

    padding:7px 16px;

    text-align:left;
}


.siswa-hasil-belajar-table .hasil-percobaan::before{
    content:"Percobaan :";

    color:#64748b;

    font-size:12px;
    font-weight:700;
}


.siswa-hasil-belajar-table .hasil-nilai::before{
    content:"Nilai Akhir :";

    color:#64748b;

    font-size:12px;
    font-weight:700;
}
/* PERCOBAAN TANPA BADGE */

.hasil-badge-percobaan{
    padding:0;

    background:transparent;
    border:0;
    border-radius:0;

    color:#17345f;

    font-size:14px;
    font-weight:900;
}
/* ANGKA NILAI */

.siswa-hasil-belajar-table .hasil-nilai strong{
    display:inline;

    min-width:0;
    height:auto;

    padding:0;

    color:#17345f;

    font-size:18px;
    font-weight:900;

    background:transparent;

    border:0;
    border-radius:0;
}
/* TOMBOL LIHAT DETAIL */

.siswa-hasil-belajar-table .hasil-aksi{
    width:100%;

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

    padding:2px 16px 12px;

    text-align:right;
}


.siswa-hasil-belajar-table .hasil-aksi a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:36px;

    padding:0 14px;

    color:#ffffff;

    font-size:12px;
    font-weight:800;

    background:linear-gradient(
        135deg,
        #2563eb,
        #22a06b
    );

    border-radius:10px;

    text-decoration:none;
}
}
/* ========================================
   HASIL BELAJAR - HP
======================================== */

@media(max-width:480px){

    .siswa-hasil-belajar-page{
        padding:14px 14px 40px;
    }
.hasil-quote-break-hp{
    display:inline;
}
    .siswa-hasil-belajar-header{
        position:relative;

        gap:10px;
        margin-bottom:16px;
    }

    .siswa-hasil-belajar-title-row{
        min-width:0;
        gap:10px;
    }

    .siswa-hasil-belajar-title-icon{
        width:52px;
        height:52px;

        flex:0 0 52px;

        transform:translate(-10px, -3px);
    }

    .siswa-hasil-belajar-title-icon img{
        width:52px;
        height:52px;
    }

    /* TEKS JUDUL HASIL BELAJAR */

.siswa-hasil-belajar-title-copy{
    min-width:0;
    padding-top:1px;
}

.siswa-hasil-belajar-label{
    position:relative;

    left:100px;
    top:0px;

    margin-bottom:2px;

    font-size:11px;
    line-height:1.2;
}

.siswa-hasil-belajar-header h1{
    margin:0;

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

    transform:translate(-20px, 0px);
}

.siswa-hasil-belajar-title-mapel{
    margin-top:2px;

    font-size:16px;
    line-height:1.2;

    transform:translate(-20px, 0px);
}

.siswa-hasil-belajar-title-quote{
   width:340px;
    max-width:none;
    margin:4px 0 0;

    font-size:11px;
    line-height:1.35;

    transform:translate(-20px, 0px);
}

}
/* RATA TENGAH TABEL RIWAYAT HASIL */

.siswa-hasil-belajar-table th,
.siswa-hasil-belajar-table td{
    text-align:center;
    vertical-align:middle;
}
.siswa-hasil-belajar-table th:nth-child(2),
.siswa-hasil-belajar-table td:nth-child(2){
    text-align:left;
}

.hasil-aksi-group{
    width:100%;

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

    margin-left:auto;

    text-align:right;

    gap:8px;
    flex-wrap:nowrap;
}

.hasil-aksi-group a{
    white-space:nowrap;
}

.hasil-aksi-perbaikan{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 12px;

    color:#16845a !important;
    font-size:13px;
    font-weight:800;

    background:#eaf8f1 !important;

    border-radius:10px;

    text-decoration:none;

    transition:
        transform .18s ease,
        background .18s ease;
}

.hasil-aksi-perbaikan:hover{
    background:#d9f2e5 !important;
    transform:translateY(-2px);
}
/* ==================================================
   ADMIN - FORM PAKET LATIHAN
================================================== */

.admin-latihan-form-page{
    width:100%;
    max-width:1100px;
    margin:0 auto;

    padding:38px 28px 70px;

    box-sizing:border-box;
}


/* HEADER */

.admin-latihan-form-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:24px;

    margin-bottom:28px;
}

.admin-latihan-form-header h1{
    margin:8px 0 6px;

    font-size:34px;
    line-height:1.15;

    color:#0f2747;
}

.admin-latihan-form-header p{
    margin:0;

    color:#64748b;

    font-size:15px;
    line-height:1.6;
}


/* KEMBALI */

.admin-latihan-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;

    padding:0 18px;

    border:1px solid #cbd5e1;
    border-radius:11px;

    background:#ffffff;

    color:#475569;

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

    text-decoration:none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.admin-latihan-back-button:hover{
    transform:translateY(-1px);

    border-color:#94a3b8;

    background:#f8fafc;
}


/* CARD FORM */

.admin-latihan-form-card{
    padding:28px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:18px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.06);
}


/* GROUP */

.admin-latihan-form-group{
    margin-bottom:22px;
}

.admin-latihan-form-group label{
    display:block;

    margin-bottom:8px;

    color:#334155;

    font-size:14px;
    font-weight:700;
}

.admin-latihan-form-group input,
.admin-latihan-form-group select{
    width:100%;

    min-height:44px;

    padding:0 13px;

    border:1px solid #cbd5e1;
    border-radius:10px;

    background:#ffffff;

    color:#334155;

    font-size:14px;

    outline:none;

    box-sizing:border-box;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.admin-latihan-form-group input:focus,
.admin-latihan-form-group select:focus{
    border-color:#22c55e;

    box-shadow:
        0 0 0 3px rgba(34,197,94,.12);
}

.admin-latihan-form-group small{
    display:block;

    margin-top:7px;

    color:#94a3b8;

    font-size:12px;
    line-height:1.5;
}


/* KELAS + SEMESTER */

.admin-latihan-form-row{
    display:grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:18px;
}


/* CHECKBOX */

.admin-latihan-check-group{
    margin-bottom:18px;

    padding:15px 16px;

    border:1px solid #e2e8f0;
    border-radius:12px;

    background:#f8fafc;
}

.admin-latihan-check-group label{
    display:flex;
    align-items:center;

    gap:9px;

    color:#334155;

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

    cursor:pointer;
}

.admin-latihan-check-group input{
    width:17px;
    height:17px;

    accent-color:#22c55e;

    cursor:pointer;
}

.admin-latihan-check-group small{
    display:block;

    margin-top:6px;
    margin-left:26px;

    color:#94a3b8;

    font-size:12px;
    line-height:1.5;
}


/* ERROR */

.admin-latihan-error{
    margin-bottom:20px;

    padding:15px 18px;

    border:1px solid #fecaca;
    border-radius:12px;

    background:#fff1f2;

    color:#be123c;

    font-size:13px;
}

.admin-latihan-error ul{
    margin:
        8px
        0
        0
        18px;

    padding:0;
}


/* TOMBOL BAWAH */

.admin-latihan-form-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;

    gap:10px;

    margin-top:28px;
    padding-top:22px;

    border-top:1px solid #e2e8f0;
}

.admin-latihan-cancel-button,
.admin-latihan-save-button{
    min-height:42px;

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

    padding:0 18px;

    border-radius:10px;

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

    text-decoration:none;

    box-sizing:border-box;

    cursor:pointer;
}

.admin-latihan-cancel-button{
    border:1px solid #cbd5e1;

    background:#ffffff;

    color:#64748b;
}

.admin-latihan-save-button{
    border:1px solid #22c55e;

    background:#22a96b;

    color:#ffffff;

    box-shadow:
        0 7px 16px rgba(34,169,107,.16);
}

.admin-latihan-save-button:hover{
    transform:translateY(-1px);
}


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

@media(max-width:700px){

    .admin-latihan-form-page{
        padding:
            24px
            15px
            50px;
    }

    .admin-latihan-form-header{
        flex-direction:column;

        gap:14px;

        margin-bottom:20px;
    }

    .admin-latihan-form-header h1{
        font-size:27px;
    }

    .admin-latihan-back-button{
        align-self:flex-start;
    }

    .admin-latihan-form-card{
        padding:20px 16px;

        border-radius:15px;
    }

    .admin-latihan-form-row{
        grid-template-columns:1fr;

        gap:0;
    }

    .admin-latihan-form-actions{
        flex-direction:column-reverse;
    }

    .admin-latihan-cancel-button,
    .admin-latihan-save-button{
        width:100%;
    }

}
.buku-card{
    border:none !important;
    outline:none !important;
}
/* =========================================================
   ADMIN - PENGETAHUAN UMUM
========================================================= */

.admin-pengetahuan-page,
.admin-pengetahuan-form-page{
    width:100%;
    max-width:1180px;
    margin:0 auto;
}


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

.admin-pengetahuan-header,
.admin-pengetahuan-form-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;

    margin-bottom:28px;
}

.admin-pengetahuan-label{
    display:inline-block;

    margin-bottom:7px;

    font-size:12px;
    font-weight:900;

    letter-spacing:1.5px;

    color:#2563eb;
}

.admin-pengetahuan-header h1,
.admin-pengetahuan-form-header h1{
    margin:0 0 7px;

    font-size:32px;
    line-height:1.15;

    color:#172554;
}

.admin-pengetahuan-header p,
.admin-pengetahuan-form-header p{
    margin:0;

    color:#64748b;

    font-size:15px;
    line-height:1.6;
}


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

.admin-pengetahuan-add-button,
.admin-pengetahuan-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;

    padding:0 18px;

    border-radius:11px;

    text-decoration:none;

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

    white-space:nowrap;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.admin-pengetahuan-add-button{
    background:#2563eb;
    color:#fff;

    box-shadow:0 7px 18px rgba(37,99,235,.18);
}

.admin-pengetahuan-back-button{
    background:#fff;
    color:#475569;

    border:1px solid #dbe3ee;
}

.admin-pengetahuan-add-button:hover,
.admin-pengetahuan-back-button:hover{
    transform:translateY(-2px);
}


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

.admin-pengetahuan-form-card{
    max-width:900px;

    padding:28px;

    background:#fff;

    border:1px solid #e2e8f0;
    border-radius:18px;

    box-shadow:0 8px 28px rgba(15,23,42,.06);
}


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

.admin-pengetahuan-field{
    margin-bottom:22px;
}

.admin-pengetahuan-field label{
    display:block;

    margin-bottom:8px;

    color:#334155;

    font-size:14px;
    font-weight:800;
}

.admin-pengetahuan-field input[type="text"],
.admin-pengetahuan-field input[type="number"],
.admin-pengetahuan-field input[type="file"],
.admin-pengetahuan-field textarea{
    width:100%;

    box-sizing:border-box;

    padding:12px 14px;

    border:1px solid #cbd5e1;
    border-radius:10px;

    background:#fff;

    color:#1e293b;

    font:inherit;

    outline:none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.admin-pengetahuan-field textarea{
    resize:vertical;

    line-height:1.6;
}

.admin-pengetahuan-field input:focus,
.admin-pengetahuan-field textarea:focus{
    border-color:#3b82f6;

    box-shadow:0 0 0 3px rgba(59,130,246,.12);
}

.admin-pengetahuan-field small{
    display:block;

    margin-top:7px;

    color:#94a3b8;

    font-size:12px;
    line-height:1.5;
}


/* =========================
   FILE INPUT
========================= */

.admin-pengetahuan-field input[type="file"]{
    padding:9px 10px;

    background:#f8fafc;
}

.admin-pengetahuan-field input[type="file"]::file-selector-button{
    margin-right:12px;

    padding:8px 13px;

    border:0;
    border-radius:8px;

    background:#e8f0ff;

    color:#1d4ed8;

    font-weight:800;

    cursor:pointer;
}


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

.admin-pengetahuan-status-field{
    margin:4px 0 25px;
}

.admin-pengetahuan-status-field label{
    display:inline-flex;
    align-items:center;

    gap:9px;

    color:#334155;

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

    cursor:pointer;
}

.admin-pengetahuan-status-field input[type="checkbox"]{
    width:18px;
    height:18px;

    accent-color:#2563eb;
}


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

.admin-pengetahuan-form-actions{
    display:flex;
    align-items:center;

    gap:10px;

    padding-top:22px;

    border-top:1px solid #e2e8f0;
}

.admin-pengetahuan-save-button,
.admin-pengetahuan-cancel-button{
    min-height:42px;

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

    padding:0 18px;

    border-radius:10px;

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

    text-decoration:none;

    cursor:pointer;
}

.admin-pengetahuan-save-button{
    border:0;

    background:#2563eb;

    color:#fff;

    box-shadow:0 6px 16px rgba(37,99,235,.18);
}

.admin-pengetahuan-cancel-button{
    background:#f1f5f9;

    color:#475569;
}


/* =========================
   ERROR
========================= */

.admin-pengetahuan-error{
    max-width:900px;

    box-sizing:border-box;

    margin-bottom:20px;

    padding:15px 18px;

    border:1px solid #fecaca;
    border-radius:12px;

    background:#fff1f2;

    color:#b91c1c;
}

.admin-pengetahuan-error ul{
    margin:7px 0 0;
    padding-left:20px;
}


/* =========================================================
   INDEX / DAFTAR ARTIKEL
========================================================= */

.admin-pengetahuan-grid{
    display:grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:22px;
}


/* CARD */

.admin-pengetahuan-card{
    overflow:hidden;

    display:flex;
    flex-direction:column;

    background:#fff;

    border:1px solid #e2e8f0;
    border-radius:17px;

    box-shadow:0 7px 24px rgba(15,23,42,.06);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.admin-pengetahuan-card:hover{
    transform:translateY(-4px);

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


/* IMAGE */

.admin-pengetahuan-image{
    width:100%;
    height:185px;

    overflow:hidden;

    background:#eaf2ff;
}

.admin-pengetahuan-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.admin-pengetahuan-image-empty{
    width:100%;
    height:100%;

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

    font-size:45px;
}


/* BODY */

.admin-pengetahuan-card-body{
    flex:1;

    display:flex;
    flex-direction:column;

    padding:20px;
}

.admin-pengetahuan-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-bottom:13px;
}

.admin-pengetahuan-category{
    padding:5px 10px;

    border-radius:999px;

    background:#eff6ff;

    color:#1d4ed8;

    font-size:11px;
    font-weight:900;

    letter-spacing:.4px;
}

.admin-pengetahuan-status{
    padding:5px 9px;

    border-radius:999px;

    font-size:11px;
    font-weight:800;
}

.admin-pengetahuan-status.aktif{
    background:#dcfce7;
    color:#15803d;
}

.admin-pengetahuan-status.nonaktif{
    background:#f1f5f9;
    color:#64748b;
}

.admin-pengetahuan-card h2{
    margin:0 0 9px;

    color:#172554;

    font-size:19px;
    line-height:1.35;
}

.admin-pengetahuan-summary{
    margin:0 0 15px;

    color:#64748b;

    font-size:13px;
    line-height:1.6;
}

.admin-pengetahuan-meta{
    margin-top:auto;

    padding-top:10px;

    color:#94a3b8;

    font-size:12px;
}


/* CARD ACTIONS */

.admin-pengetahuan-actions{
    display:flex;
    align-items:center;

    gap:8px;

    margin-top:17px;
    padding-top:15px;

    border-top:1px solid #edf2f7;
}

.admin-pengetahuan-actions form{
    margin:0;
}

.admin-pengetahuan-edit-button,
.admin-pengetahuan-delete-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:34px;

    padding:0 13px;

    border-radius:8px;

    font-size:12px;
    font-weight:800;

    text-decoration:none;

    cursor:pointer;
}

.admin-pengetahuan-edit-button{
    background:#eff6ff;

    color:#2563eb;
}

.admin-pengetahuan-delete-button{
    border:0;

    background:#fff1f2;

    color:#dc2626;
}


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

.admin-pengetahuan-empty{
    grid-column:1 / -1;

    min-height:290px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:35px;

    text-align:center;

    background:#fff;

    border:1px dashed #cbd5e1;
    border-radius:18px;
}

.admin-pengetahuan-empty-icon{
    margin-bottom:12px;

    font-size:48px;
}

.admin-pengetahuan-empty h2{
    margin:0 0 8px;

    color:#172554;

    font-size:21px;
}

.admin-pengetahuan-empty p{
    max-width:480px;

    margin:0 0 20px;

    color:#64748b;

    line-height:1.6;
}


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

.admin-pengetahuan-alert-success{
    margin-bottom:20px;

    padding:13px 16px;

    border:1px solid #bbf7d0;
    border-radius:11px;

    background:#f0fdf4;

    color:#15803d;

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

    transition:
        opacity .3s ease,
        transform .3s ease;
}


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

@media (max-width:1000px){

    .admin-pengetahuan-grid{
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width:700px){

    .admin-pengetahuan-header,
    .admin-pengetahuan-form-header{
        flex-direction:column;
        gap:16px;
    }

    .admin-pengetahuan-header h1,
    .admin-pengetahuan-form-header h1{
        font-size:27px;
    }

    .admin-pengetahuan-grid{
        grid-template-columns:1fr;
    }

    .admin-pengetahuan-form-card{
        padding:20px;
    }

    .admin-pengetahuan-add-button,
    .admin-pengetahuan-back-button{
        align-self:flex-start;
    }

}
/* CKEDITOR PENGETAHUAN UMUM */

.admin-pengetahuan-form-card .ck-editor{
    width:100%;
}

.admin-pengetahuan-form-card .ck-editor__editable{
    min-height:350px;
}

.admin-pengetahuan-form-card .ck-editor__editable_inline{
    padding:18px 22px;
}

.admin-pengetahuan-form-card .ck-content img{
    max-width:100%;
    height:auto;
}
/* =========================================================
   DETAIL PENGETAHUAN UMUM
========================================================= */

.pengetahuan-detail-section{
    padding:45px 20px 80px;
    background:#f7faff;
}

.pengetahuan-detail-container{
    width:100%;
    max-width:900px;
    margin:0 auto;
}

.pengetahuan-detail-back-area{
    width:max-content;

    margin-top:20px;
    margin-left:auto;
}

.pengetahuan-detail-back{
    display:inline-flex;
    align-items:center;

    padding:10px 16px;

    border:1px solid #dbe5ef;
    border-radius:12px;

    background:#ffffff;

    color:#56708f;

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

    text-decoration:none;

    transition:.2s ease;
}

.pengetahuan-detail-back:hover{
    color:#174ea6;
    transform:translateX(-3px);
}


/* CARD */

.pengetahuan-detail-card{
    padding:38px;

    background:#ffffff;

    border:1px solid #e1eaf4;
    border-radius:24px;

    box-shadow:0 12px 34px rgba(31,65,114,.08);
}


/* HEADER */

.pengetahuan-detail-header{
    max-width:760px;
    margin:0 auto 28px;
    text-align:center;
}

.pengetahuan-detail-category{
    display:inline-block;

    margin-bottom:14px;
    padding:6px 12px;

    border-radius:999px;

    background:#eef5ff;

    color:#174ea6;

    font-size:11px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.5px;
}

.pengetahuan-detail-header h1{
    margin:0;

    color:#19385f;

    font-size:38px;
    line-height:1.25;
}

.pengetahuan-detail-summary{
    max-width:680px;

    margin:16px auto 0;

    color:#708097;

    font-size:16px;
    line-height:1.75;
}


/* COVER */

.pengetahuan-detail-cover{
    width:100%;

    margin:30px 0 36px;

    overflow:hidden;

    border-radius:18px;
}

.pengetahuan-detail-cover img{
    width:100%;
    max-height:480px;

    display:block;

    object-fit:cover;
}


/* =========================================================
   ISI CKEDITOR
========================================================= */

.pengetahuan-detail-content{
    color:#37475d;

    font-size:16px;
    line-height:1.85;
}

.pengetahuan-detail-content::after{
    content:"";
    display:block;
    clear:both;
}

.pengetahuan-detail-content p{
    margin:0 0 20px;
}

.pengetahuan-detail-content h2{
    margin:34px 0 14px;

    color:#1d3557;

    font-size:27px;
    line-height:1.35;
}

.pengetahuan-detail-content h3{
    margin:30px 0 12px;

    color:#1d3557;

    font-size:22px;
}

.pengetahuan-detail-content ul,
.pengetahuan-detail-content ol{
    margin:0 0 22px;
    padding-left:28px;
}

.pengetahuan-detail-content li{
    margin-bottom:8px;
}

.pengetahuan-detail-content blockquote{
    margin:28px 0;

    padding:18px 22px;

    border-left:4px solid #4d8ed8;
    border-radius:0 14px 14px 0;

    background:#f4f8fd;

    color:#53647a;
}

.pengetahuan-detail-content a{
    color:#174ea6;
    text-decoration:underline;
}


/* =========================
   GAMBAR CKEDITOR
========================= */

.pengetahuan-detail-content figure.image{
    margin:28px auto;
}

.pengetahuan-detail-content figure.image img{
    max-width:100%;
    height:auto;

    display:block;
}

.pengetahuan-detail-content figure.image figcaption{
    margin-top:7px;

    color:#8492a6;

    font-size:12px;
    text-align:center;
}


/* CENTER / BLOCK */

.pengetahuan-detail-content .image-style-block,
.pengetahuan-detail-content .image-style-align-center{
    margin-left:auto;
    margin-right:auto;
}


/* WRAP KIRI */

.pengetahuan-detail-content .image-style-align-left{
    float:left;

    margin:
        6px
        24px
        16px
        0;
}


/* WRAP KANAN */

.pengetahuan-detail-content .image-style-align-right,
.pengetahuan-detail-content .image-style-side{
    float:right;

    margin:
        6px
        0
        16px
        24px;
}


/* INLINE */

.pengetahuan-detail-content .image-inline{
    display:inline-block;

    margin:0 6px;
    vertical-align:middle;
}


/* TABLE */

.pengetahuan-detail-content table{
    width:100%;

    margin:25px 0;

    border-collapse:collapse;
}

.pengetahuan-detail-content th,
.pengetahuan-detail-content td{
    padding:10px 12px;

    border:1px solid #dbe5ef;

    text-align:left;
}


/* FOOTER */

.pengetahuan-detail-footer{
    margin-top:24px;

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

    gap:10px;

    color:#718096;

    font-size:13px;
    text-align:center;
}

.pengetahuan-detail-footer span{
    font-size:22px;
}


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

@media(max-width:700px){

    .pengetahuan-detail-section{
        padding:25px 14px 55px;
    }

    .pengetahuan-detail-card{
        padding:23px 18px;

        border-radius:19px;
    }

    .pengetahuan-detail-header h1{
        font-size:29px;
    }

    .pengetahuan-detail-summary{
        font-size:14px;
    }

    .pengetahuan-detail-content{
        font-size:15px;
        line-height:1.8;
    }

    .pengetahuan-detail-cover{
        margin:24px 0 30px;
        border-radius:14px;
    }

    /*
    Untuk HP, wrap kiri/kanan dimatikan agar teks
    tidak terlalu sempit.
    */

    .pengetahuan-detail-content .image-style-align-left,
    .pengetahuan-detail-content .image-style-align-right,
    .pengetahuan-detail-content .image-style-side{
        float:none;

        margin:
            24px
            auto;
    }

}
/* =========================================================
   ADMIN - TANTANGAN HARI INI
   ========================================================= */

.admin-tantangan-page,
.admin-tantangan-form-page{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:34px 32px 60px;
    box-sizing:border-box;
}


/* HEADER */

.admin-tantangan-header,
.admin-tantangan-form-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;

    margin-bottom:28px;
}


.admin-tantangan-label{
    display:inline-block;

    margin-bottom:7px;

    font-size:12px;
    font-weight:900;

    letter-spacing:1.4px;

    color:#2563eb;
}


.admin-tantangan-header h1,
.admin-tantangan-form-header h1{
    margin:0;

    font-size:36px;
    line-height:1.15;

    color:#0f2c59;
}


.admin-tantangan-header p,
.admin-tantangan-form-header p{
    margin:8px 0 0;

    color:#64748b;

    font-size:15px;
    line-height:1.6;
}


/* BUTTON HEADER */

.admin-tantangan-add-button,
.admin-tantangan-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:44px;

    padding:0 18px;

    border-radius:12px;

    text-decoration:none;

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

    white-space:nowrap;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.admin-tantangan-add-button{
    background:#2563eb;
    color:#fff;

    box-shadow:0 8px 18px rgba(37, 99, 235, .18);
}


.admin-tantangan-add-button:hover{
    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(37, 99, 235, .25);
}


.admin-tantangan-back-button{
    background:#fff;

    color:#334155;

    border:1px solid #dbe3ee;
}


.admin-tantangan-back-button:hover{
    background:#f8fafc;

    transform:translateY(-2px);
}


/* SUCCESS ALERT */

.admin-tantangan-alert-success{
    margin-bottom:22px;

    padding:14px 18px;

    border-radius:12px;

    background:#dcfce7;

    color:#166534;

    font-weight:700;

    border:1px solid #bbf7d0;

    transition:
        opacity .3s ease,
        transform .3s ease;
}


/* LIST */

.admin-tantangan-list{
    display:flex;
    flex-direction:column;
    gap:20px;
}


/* CARD */

.admin-tantangan-card{
    display:flex;
    align-items:stretch;
    justify-content:space-between;

    gap:24px;

    padding:24px;

    border-radius:20px;

    background:#fff;

    border:1px solid #e2e8f0;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .06);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}


.admin-tantangan-card:hover{
    transform:translateY(-3px);

    border-color:#bfdbfe;

    box-shadow:
        0 16px 36px rgba(15, 23, 42, .09);
}


.admin-tantangan-card-main{
    flex:1;
    min-width:0;
}


.admin-tantangan-card-top{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:10px;

    margin-bottom:15px;
}


.admin-tantangan-order{
    display:inline-flex;
    align-items:center;

    min-height:29px;

    padding:0 11px;

    border-radius:999px;

    background:#eff6ff;

    color:#1d4ed8;

    font-size:12px;
    font-weight:800;
}


.admin-tantangan-status{
    display:inline-flex;
    align-items:center;

    min-height:29px;

    padding:0 11px;

    border-radius:999px;

    font-size:12px;
    font-weight:800;
}


.admin-tantangan-status.aktif{
    background:#dcfce7;
    color:#15803d;
}


.admin-tantangan-status.nonaktif{
    background:#f1f5f9;
    color:#64748b;
}


.admin-tantangan-card h2{
    margin:0 0 18px;

    max-width:900px;

    font-size:21px;
    line-height:1.55;

    white-space:pre-line;

    color:#0f2c59;
}


/* OPTIONS */

.admin-tantangan-options{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:10px;

    margin-bottom:18px;
}


.admin-tantangan-options > div{
    padding:12px 14px;

    border-radius:11px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    color:#334155;

    font-size:14px;
}


.admin-tantangan-options strong{
    color:#1d4ed8;
}


/* ANSWER */

.admin-tantangan-answer{
    display:inline-flex;
    align-items:center;

    gap:7px;

    padding:9px 13px;

    border-radius:10px;

    background:#ecfdf5;

    color:#166534;

    font-size:14px;
}


.admin-tantangan-answer strong{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:27px;
    height:27px;

    border-radius:7px;

    background:#16a34a;
    color:#fff;
}


/* EXPLANATION */

.admin-tantangan-explanation{
    margin-top:18px;

    padding:16px 18px;

    border-radius:12px;

    background:#fff7ed;

    border:1px solid #fed7aa;

    color:#7c2d12;
}


.admin-tantangan-explanation p{
    margin:6px 0 0;

    line-height:1.65;
}


/* ACTIONS */

.admin-tantangan-actions{
    display:flex;
    align-items:flex-start;

    gap:8px;

    flex-shrink:0;
}


.admin-tantangan-actions form{
    margin:0;
}


.admin-tantangan-edit,
.admin-tantangan-delete{
    min-width:74px;
    min-height:38px;

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

    padding:0 13px;

    box-sizing:border-box;

    border-radius:10px;

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

    text-decoration:none;

    cursor:pointer;

    transition:
        transform .18s ease,
        background .18s ease;
}


.admin-tantangan-edit{
    background:#eff6ff;
    color:#1d4ed8;

    border:1px solid #bfdbfe;
}


.admin-tantangan-delete{
    background:#fff1f2;
    color:#be123c;

    border:1px solid #fecdd3;
}


.admin-tantangan-edit:hover,
.admin-tantangan-delete:hover{
    transform:translateY(-2px);
}


/* EMPTY */

.admin-tantangan-empty{
    text-align:center;

    padding:60px 24px;

    border-radius:20px;

    background:#fff;

    border:1px dashed #cbd5e1;
}


.admin-tantangan-empty-icon{
    margin-bottom:10px;

    font-size:44px;
}


.admin-tantangan-empty h2{
    margin:0;

    color:#0f2c59;
}


.admin-tantangan-empty p{
    margin:8px 0 0;

    color:#64748b;
}


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

.admin-tantangan-form-card{
    max-width:880px;

    padding:28px;

    border-radius:20px;

    background:#fff;

    border:1px solid #e2e8f0;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .06);
}


.admin-tantangan-field{
    margin-bottom:22px;
}


.admin-tantangan-field > label{
    display:block;

    margin-bottom:8px;

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

    color:#334155;
}


.admin-tantangan-field input[type="text"],
.admin-tantangan-field input[type="number"],
.admin-tantangan-field textarea,
.admin-tantangan-field select{
    width:100%;

    padding:12px 14px;

    box-sizing:border-box;

    border:1px solid #cbd5e1;

    border-radius:11px;

    background:#fff;

    color:#0f172a;

    font:inherit;

    outline:none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.admin-tantangan-field textarea{
    resize:vertical;

    line-height:1.6;
}


.admin-tantangan-field input:focus,
.admin-tantangan-field textarea:focus,
.admin-tantangan-field select:focus{
    border-color:#60a5fa;

    box-shadow:
        0 0 0 4px rgba(59, 130, 246, .10);
}


.admin-tantangan-field small{
    display:block;

    margin-top:7px;

    color:#64748b;

    font-size:12px;
}


/* CHECKBOX */

.admin-tantangan-checkbox{
    padding:14px 16px;

    border-radius:12px;

    background:#f8fafc;

    border:1px solid #e2e8f0;
}


.admin-tantangan-checkbox label{
    display:flex;
    align-items:center;

    gap:10px;

    margin:0;

    cursor:pointer;
}


.admin-tantangan-checkbox input{
    width:18px;
    height:18px;
}


/* SAVE */

.admin-tantangan-form-actions{
    display:flex;
    justify-content:flex-end;

    margin-top:28px;
}


.admin-tantangan-save-button{
    min-height:44px;

    padding:0 20px;

    border:0;

    border-radius:12px;

    background:#2563eb;
    color:#fff;

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

    cursor:pointer;

    box-shadow:
        0 8px 18px rgba(37, 99, 235, .18);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.admin-tantangan-save-button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 12px 24px rgba(37, 99, 235, .25);
}


/* ERROR */

.admin-tantangan-error{
    max-width:880px;

    margin-bottom:20px;

    padding:16px 18px;

    border-radius:12px;

    background:#fff1f2;

    border:1px solid #fecdd3;

    color:#9f1239;
}


.admin-tantangan-error ul{
    margin:8px 0 0;
    padding-left:20px;
}


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

@media (max-width:900px){

    .admin-tantangan-page,
    .admin-tantangan-form-page{
        padding:
            26px
            20px
            50px;
    }


    .admin-tantangan-card{
        flex-direction:column;
    }


    .admin-tantangan-actions{
        justify-content:flex-end;
    }

}


@media (max-width:640px){

    .admin-tantangan-header,
    .admin-tantangan-form-header{
        flex-direction:column;
        align-items:stretch;
    }


    .admin-tantangan-header h1,
    .admin-tantangan-form-header h1{
        font-size:28px;
    }


    .admin-tantangan-add-button,
    .admin-tantangan-back-button{
        width:100%;
        box-sizing:border-box;
    }


    .admin-tantangan-options{
        grid-template-columns:1fr;
    }


    .admin-tantangan-form-card{
        padding:20px;
    }


    .admin-tantangan-actions{
        width:100%;
    }


    .admin-tantangan-edit,
    .admin-tantangan-actions form,
    .admin-tantangan-delete{
        flex:1;
    }


    .admin-tantangan-delete{
        width:100%;
    }


    .admin-tantangan-form-actions{
        justify-content:stretch;
    }


    .admin-tantangan-save-button{
        width:100%;
    }

}
/* =========================================================
   ADMIN TANTANGAN - KONTEN CKEDITOR
   ========================================================= */

.admin-tantangan-question-content{
    margin:0 0 18px;

    max-width:900px;

    color:#0f2c59;

    font-size:18px;
    line-height:1.6;
}


.admin-tantangan-question-content p{
    margin:0 0 10px;
}


.admin-tantangan-question-content p:last-child{
    margin-bottom:0;
}


.admin-tantangan-question-content strong{
    font-weight:800;
}


.admin-tantangan-question-content figure.image{
    margin:18px auto;
}


.admin-tantangan-question-content figure.image img{
    display:block;

    max-width:100%;
    height:auto;

    border-radius:12px;
}


.admin-tantangan-question-content figure.image.image-style-align-left{
    margin-left:0;
    margin-right:auto;
}


.admin-tantangan-question-content figure.image.image-style-align-center{
    margin-left:auto;
    margin-right:auto;
}


.admin-tantangan-question-content figure.image.image-style-align-right{
    margin-left:auto;
    margin-right:0;
}


.admin-tantangan-question-content ul,
.admin-tantangan-question-content ol{
    padding-left:24px;
}
/* =========================================================
   ADMIN - MATA PELAJARAN
========================================================= */

.admin-mapel-page{
    width:100%;
}


/* HEADER */

.admin-mapel-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:24px;

    margin-bottom:28px;
}

.admin-mapel-label{
    display:inline-block;

    margin-bottom:8px;

    font-size:12px;
    font-weight:900;

    letter-spacing:1.5px;

    color:#0f766e;
}

.admin-mapel-header h1{
    margin:0 0 8px;

    font-size:30px;
    line-height:1.2;

    color:#172033;
}

.admin-mapel-header p{
    max-width:650px;

    margin:0;

    color:#64748b;

    font-size:14px;
    line-height:1.7;
}


/* ALERT */

.admin-mapel-success{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:22px;

    padding:13px 16px;

    border:1px solid #bbf7d0;
    border-radius:12px;

    background:#f0fdf4;

    color:#166534;

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

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.admin-mapel-success span{
    display:flex;
    align-items:center;
    justify-content:center;

    width:24px;
    height:24px;

    flex-shrink:0;

    border-radius:50%;

    background:#22c55e;

    color:#fff;

    font-size:13px;
    font-weight:900;
}


/* GRID */

.admin-mapel-grid{
    display:grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:18px;
}


/* CARD */

.admin-mapel-card{
    padding:20px;

    border:1px solid #e2e8f0;
    border-radius:18px;

    background:#fff;

    box-shadow:
        0 4px 14px rgba(15, 23, 42, .05);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.admin-mapel-card:hover{
    transform:translateY(-4px);

    border-color:#86efac;

    box-shadow:
        0 10px 26px rgba(15, 23, 42, .09);
}


/* BAGIAN ATAS CARD */

.admin-mapel-card-top{
    display:flex;
    align-items:center;

    gap:14px;
}

.admin-mapel-card-icon{
    width:52px;
    height:52px;

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

    flex-shrink:0;

    border-radius:15px;

    background:#f0fdf4;

    font-size:27px;
}

.admin-mapel-card-info{
    min-width:0;
}

.admin-mapel-card-label{
    display:block;

    margin-bottom:4px;

    color:#94a3b8;

    font-size:10px;
    font-weight:900;

    letter-spacing:1px;
}

.admin-mapel-card-info h3{
    margin:0;

    color:#1e293b;

    font-size:16px;
    line-height:1.4;
}


/* BAGIAN BAWAH CARD */

.admin-mapel-card-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;

    margin-top:18px;
    padding-top:16px;

    border-top:1px solid #f1f5f9;
}


/* KKM */

.admin-mapel-kkm{
    display:flex;
    align-items:center;

    gap:9px;
}

.admin-mapel-kkm span{
    color:#64748b;

    font-size:12px;
    font-weight:800;

    letter-spacing:.5px;
}

.admin-mapel-kkm strong{
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:46px;
    height:34px;

    padding:0 10px;

    border-radius:10px;

    background:#ecfdf5;

    color:#047857;

    font-size:17px;
    font-weight:900;
}


/* TOMBOL EDIT */

.admin-mapel-edit-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:70px;
    height:36px;

    padding:0 16px;

    border-radius:10px;

    background:#eff6ff;

    color:#2563eb;

    text-decoration:none;

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

    transition:
        background .18s ease,
        transform .18s ease;
}

.admin-mapel-edit-button:hover{
    background:#dbeafe;

    transform:translateY(-1px);
}


/* EMPTY */

.admin-mapel-empty{
    grid-column:1 / -1;

    padding:50px 20px;

    text-align:center;

    border:1px dashed #cbd5e1;
    border-radius:18px;

    background:#fff;

    color:#64748b;
}

.admin-mapel-empty > div{
    margin-bottom:10px;

    font-size:38px;
}

.admin-mapel-empty strong{
    display:block;

    margin-bottom:5px;

    color:#334155;
}

.admin-mapel-empty p{
    margin:0;

    font-size:13px;
}


/* TABLET */

@media (max-width:1000px){

    .admin-mapel-grid{
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* HP */

@media (max-width:650px){

    .admin-mapel-header h1{
        font-size:25px;
    }

    .admin-mapel-grid{
        grid-template-columns:1fr;
    }

    .admin-mapel-card{
        padding:17px;
    }

}
/* =========================================================
   ADMIN - EDIT MATA PELAJARAN
========================================================= */

.admin-mapel-form-page{
    width:100%;
    max-width:850px;
}


/* HEADER */

.admin-mapel-form-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    margin-bottom:26px;
}

.admin-mapel-form-header h1{
    margin:0 0 8px;

    font-size:30px;
    line-height:1.2;

    color:#172033;
}

.admin-mapel-form-header p{
    max-width:600px;

    margin:0;

    color:#64748b;

    font-size:14px;
    line-height:1.7;
}


/* BACK */

.admin-mapel-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:40px;

    padding:0 16px;

    border:1px solid #e2e8f0;
    border-radius:10px;

    background:#fff;

    color:#475569;

    text-decoration:none;

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

    white-space:nowrap;

    transition:
        background .18s ease,
        transform .18s ease;
}

.admin-mapel-back-button:hover{
    background:#f8fafc;

    transform:translateY(-1px);
}


/* ERROR */

.admin-mapel-error{
    margin-bottom:22px;

    padding:16px 18px;

    border:1px solid #fecaca;
    border-radius:12px;

    background:#fef2f2;

    color:#991b1b;

    font-size:13px;
}

.admin-mapel-error strong{
    display:block;

    margin-bottom:8px;
}

.admin-mapel-error ul{
    margin:0;
    padding-left:20px;
}


/* CARD FORM */

.admin-mapel-form-card{
    padding:26px;

    border:1px solid #e2e8f0;
    border-radius:20px;

    background:#fff;

    box-shadow:
        0 6px 20px rgba(15, 23, 42, .06);
}


/* IDENTITAS MAPEL */

.admin-mapel-form-title{
    display:flex;
    align-items:center;

    gap:14px;

    margin-bottom:25px;
    padding-bottom:20px;

    border-bottom:1px solid #f1f5f9;
}

.admin-mapel-form-icon{
    width:54px;
    height:54px;

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

    flex-shrink:0;

    border-radius:15px;

    background:#f0fdf4;

    font-size:28px;
}

.admin-mapel-form-title span{
    display:block;

    margin-bottom:4px;

    color:#94a3b8;

    font-size:10px;
    font-weight:900;

    letter-spacing:1.2px;
}

.admin-mapel-form-title strong{
    display:block;

    color:#1e293b;

    font-size:18px;
}


/* FORM GROUP */

.admin-mapel-form-group{
    margin-bottom:22px;
}

.admin-mapel-form-group label{
    display:block;

    margin-bottom:8px;

    color:#334155;

    font-size:13px;
    font-weight:800;
}

.admin-mapel-form-group input{
    width:100%;
    height:44px;

    box-sizing:border-box;

    padding:0 13px;

    border:1px solid #cbd5e1;
    border-radius:10px;

    outline:none;

    background:#fff;

    color:#1e293b;

    font-size:14px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.admin-mapel-form-group input:focus{
    border-color:#60a5fa;

    box-shadow:
        0 0 0 3px rgba(96, 165, 250, .15);
}

.admin-mapel-form-group small{
    display:block;

    margin-top:7px;

    color:#94a3b8;

    font-size:12px;
    line-height:1.5;
}


/* INPUT KKM */

.admin-mapel-kkm-input-wrap{
    display:flex;
    align-items:center;

    gap:10px;

    max-width:190px;
}

.admin-mapel-kkm-input-wrap input{
    width:110px;

    text-align:center;

    font-size:18px;
    font-weight:900;

    color:#047857;

    background:#f0fdf4;
}

.admin-mapel-kkm-input-wrap span{
    color:#64748b;

    font-size:13px;
    font-weight:700;
}


/* INFO */

.admin-mapel-kkm-info{
    display:flex;
    align-items:flex-start;

    gap:12px;

    margin-top:4px;
    margin-bottom:26px;

    padding:15px;

    border:1px solid #bfdbfe;
    border-radius:12px;

    background:#eff6ff;
}

.admin-mapel-kkm-info-icon{
    font-size:20px;

    flex-shrink:0;
}

.admin-mapel-kkm-info strong{
    display:block;

    margin-bottom:4px;

    color:#1e40af;

    font-size:13px;
}

.admin-mapel-kkm-info p{
    margin:0;

    color:#475569;

    font-size:12px;
    line-height:1.6;
}


/* ACTIONS */

.admin-mapel-form-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:10px;

    padding-top:20px;

    border-top:1px solid #f1f5f9;
}

.admin-mapel-cancel-button,
.admin-mapel-save-button{
    min-height:40px;

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

    padding:0 18px;

    border-radius:10px;

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

    cursor:pointer;

    text-decoration:none;
}

.admin-mapel-cancel-button{
    border:1px solid #e2e8f0;

    background:#fff;

    color:#64748b;
}

.admin-mapel-save-button{
    border:none;

    background:#2563eb;

    color:#fff;
}

.admin-mapel-save-button:hover{
    background:#1d4ed8;
}


/* HP */

@media (max-width:650px){

    .admin-mapel-form-header{
        flex-direction:column;
    }

    .admin-mapel-form-header h1{
        font-size:25px;
    }

    .admin-mapel-form-card{
        padding:18px;
    }

    .admin-mapel-form-actions{
        flex-direction:column-reverse;
        align-items:stretch;
    }

    .admin-mapel-cancel-button,
    .admin-mapel-save-button{
        width:100%;
    }

}
/* =========================================================
   ADMIN - HASIL BELAJAR
========================================================= */

.admin-hasil-belajar-page{
    width:100%;
}


/* HEADER */

.admin-hasil-belajar-header{
    margin-bottom:26px;
}

.admin-hasil-belajar-label{
    display:inline-block;

    margin-bottom:7px;

    color:#0f766e;

    font-size:12px;
    font-weight:900;

    letter-spacing:1.4px;
}

.admin-hasil-belajar-header h1{
    margin:0 0 8px;

    color:#172033;

    font-size:30px;
    line-height:1.2;
}

.admin-hasil-belajar-header p{
    max-width:700px;

    margin:0;

    color:#64748b;

    font-size:14px;
    line-height:1.7;
}


/* FILTER CARD */

.admin-hasil-filter-card{
    margin-bottom:22px;

    padding:22px;

    border:1px solid #e2e8f0;
    border-radius:18px;

    background:#fff;

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


/* FILTER TITLE */

.admin-hasil-filter-title{
    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:20px;
}

.admin-hasil-filter-icon{
    width:42px;
    height:42px;

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

    flex-shrink:0;

    border-radius:12px;

    background:#eff6ff;

    font-size:20px;
}

.admin-hasil-filter-title strong{
    display:block;

    margin-bottom:3px;

    color:#1e293b;

    font-size:15px;
}

.admin-hasil-filter-title span{
    display:block;

    color:#94a3b8;

    font-size:12px;
}


/* FILTER GRID */

.admin-hasil-filter-grid{
    display:grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:14px;
}

.admin-hasil-filter-group label{
    display:block;

    margin-bottom:7px;

    color:#475569;

    font-size:12px;
    font-weight:800;
}

.admin-hasil-filter-group select{
    width:100%;
    height:42px;

    padding:0 12px;

    border:1px solid #cbd5e1;
    border-radius:10px;

    outline:none;

    background:#fff;

    color:#334155;

    font-size:13px;
}

.admin-hasil-filter-group select:focus{
    border-color:#60a5fa;

    box-shadow:
        0 0 0 3px rgba(96, 165, 250, .14);
}


/* FILTER ACTION */

.admin-hasil-filter-actions{
    display:flex;
    justify-content:flex-end;

    margin-top:18px;
}

.admin-hasil-preview-button{
    min-height:40px;

    padding:0 18px;

    border:none;
    border-radius:10px;

    background:#2563eb;

    color:#fff;

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

    cursor:pointer;
}

.admin-hasil-preview-button:hover{
    background:#1d4ed8;
}


/* PREVIEW CARD */

.admin-hasil-preview-card{
    padding:22px;

    border:1px solid #e2e8f0;
    border-radius:18px;

    background:#fff;

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


/* PREVIEW HEADER */

.admin-hasil-preview-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    padding-bottom:18px;

    border-bottom:1px solid #f1f5f9;
}

.admin-hasil-preview-label{
    display:block;

    margin-bottom:4px;

    color:#0f766e;

    font-size:10px;
    font-weight:900;

    letter-spacing:1.2px;
}

.admin-hasil-preview-header h2{
    margin:0 0 5px;

    color:#1e293b;

    font-size:20px;
}

.admin-hasil-preview-header p{
    margin:0;

    color:#94a3b8;

    font-size:12px;
}


/* DOWNLOAD */

.admin-hasil-download-button{
    min-height:40px;

    padding:0 16px;

    border:none;
    border-radius:10px;

    background:#16a34a;

    color:#fff;

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

    cursor:pointer;

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

    text-decoration:none;
}

.admin-hasil-download-button:disabled{
    background:#cbd5e1;

    color:#64748b;

    cursor:not-allowed;
}


/* EMPTY PREVIEW */

.admin-hasil-preview-empty{
    padding:48px 20px;

    text-align:center;
}

.admin-hasil-preview-empty-icon{
    margin-bottom:10px;

    font-size:38px;
}

.admin-hasil-preview-empty strong{
    display:block;

    margin-bottom:5px;

    color:#334155;

    font-size:14px;
}

.admin-hasil-preview-empty p{
    margin:0;

    color:#94a3b8;

    font-size:12px;
    line-height:1.6;
}


/* TABLET */

@media (max-width:1100px){

    .admin-hasil-filter-grid{
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* HP */

@media (max-width:650px){

    .admin-hasil-belajar-header h1{
        font-size:25px;
    }

    .admin-hasil-filter-grid{
        grid-template-columns:1fr;
    }

    .admin-hasil-preview-header{
        flex-direction:column;
    }

    .admin-hasil-download-button{
        width:100%;
    }

}
/* =========================================================
   ADMIN HASIL BELAJAR - TABLE PREVIEW
========================================================= */

.admin-hasil-table-wrap{
    width:100%;

    margin-top:20px;

    overflow-x:auto;
}

.admin-hasil-table{
    width:100%;

    border-collapse:collapse;

    min-width:650px;
}

.admin-hasil-table th{
    padding:12px 14px;

    border-bottom:2px solid #e2e8f0;

    background:#f8fafc;

    color:#475569;

    font-size:12px;
    font-weight:900;

    text-align:center;

    white-space:nowrap;
}

.admin-hasil-table th:nth-child(2){
    text-align:left;
}

.admin-hasil-table td{
    padding:13px 14px;

    border-bottom:1px solid #eef2f7;

    color:#475569;

    font-size:13px;

    text-align:center;
}

.admin-hasil-table tbody tr:hover{
    background:#f8fafc;
}

.admin-hasil-table .admin-hasil-nama{
    min-width:180px;

    color:#1e293b;

    font-weight:800;

    text-align:left;
}

.admin-hasil-nilai-akhir{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:42px;
    min-height:32px;

    padding:0 8px;

    border-radius:9px;

    background:#ecfdf5;

    color:#047857;

    font-size:14px;
    font-weight:900;
}


/* INFO FILTER */

.admin-hasil-preview-info{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-top:18px;
    padding-top:16px;

    border-top:1px solid #f1f5f9;
}

.admin-hasil-preview-info span{
    display:inline-flex;
    align-items:center;

    min-height:30px;

    padding:0 10px;

    border-radius:8px;

    background:#f8fafc;

    color:#64748b;

    font-size:11px;
    font-weight:800;
}
/* =========================================================
   ADMIN HASIL BELAJAR - DELETE
========================================================= */

.admin-hasil-header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:9px;

    flex-wrap:wrap;
}

.admin-hasil-header-actions form{
    margin:0;
}


/* HAPUS PER SISWA */

.admin-hasil-delete-button{
    min-height:32px;

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

    padding:0 12px;

    border:1px solid #fecaca;
    border-radius:8px;

    background:#fff;

    color:#dc2626;

    font-size:11px;
    font-weight:800;

    cursor:pointer;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.admin-hasil-delete-button:hover{
    background:#fef2f2;

    transform:translateY(-1px);
}


/* HAPUS SEMUA */

.admin-hasil-delete-all-button{
    min-height:40px;

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

    padding:0 16px;

    border:none;
    border-radius:10px;

    background:#dc2626;

    color:#fff;

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

    cursor:pointer;

    transition:
        background .18s ease,
        transform .18s ease;
}

.admin-hasil-delete-all-button:hover{
    background:#b91c1c;

    transform:translateY(-1px);
}


@media (max-width:650px){

    .admin-hasil-header-actions{
        width:100%;

        flex-direction:column;

        align-items:stretch;
    }

    .admin-hasil-header-actions form{
        width:100%;
    }

    .admin-hasil-header-actions
    .admin-hasil-download-button,
    .admin-hasil-delete-all-button{
        width:100%;
    }

}
/* =========================================================
   LOGIN ADMIN
========================================================= */

.admin-login-body{
    margin:0;
    min-height:100vh;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        linear-gradient(
            135deg,
            #eef7ff 0%,
            #f8fbff 45%,
            #eefbf5 100%
        );

    color:#1e293b;
}


.admin-login-page{
    min-height:100vh;

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

    padding:24px;

    box-sizing:border-box;
}


.admin-login-card{
    width:100%;
    max-width:430px;

    background:#ffffff;

    border:1px solid rgba(148,163,184,.22);

    border-radius:24px;

    padding:34px;

    box-sizing:border-box;

    box-shadow:
        0 24px 60px rgba(15,23,42,.10);
}


.admin-login-brand{
    display:flex;
    align-items:flex-start;

    gap:16px;

    margin-bottom:28px;
}


.admin-login-logo{
    width:58px;
    height:58px;

    flex-shrink:0;

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

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #dcfce7
        );

    font-size:32px;
}


.admin-login-label{
    display:block;

    margin-bottom:5px;

    font-size:11px;
    font-weight:900;

    letter-spacing:1.5px;

    color:#2563eb;
}


.admin-login-brand h1{
    margin:0 0 6px;

    font-size:27px;
    line-height:1.15;

    color:#0f172a;
}


.admin-login-brand p{
    margin:0;

    font-size:14px;
    line-height:1.6;

    color:#64748b;
}


.admin-login-form{
    display:flex;
    flex-direction:column;

    gap:18px;
}


.admin-login-field{
    display:flex;
    flex-direction:column;

    gap:7px;
}


.admin-login-field label{
    font-size:13px;
    font-weight:800;

    color:#334155;
}


.admin-login-field input{
    width:100%;
    height:48px;

    padding:0 14px;

    box-sizing:border-box;

    border:1px solid #cbd5e1;

    border-radius:12px;

    outline:none;

    background:#ffffff;

    font-size:14px;

    color:#0f172a;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.admin-login-field input:focus{
    border-color:#3b82f6;

    box-shadow:
        0 0 0 4px rgba(59,130,246,.10);
}


.admin-login-button{
    width:100%;
    height:48px;

    margin-top:4px;

    border:0;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #16a34a
        );

    color:#ffffff;

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

    cursor:pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;
}


.admin-login-button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(37,99,235,.20);
}


.admin-login-button:active{
    transform:translateY(0);
}


.admin-login-alert-error{
    margin-bottom:18px;

    padding:12px 14px;

    border:1px solid #fecaca;

    border-radius:12px;

    background:#fef2f2;

    color:#b91c1c;

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

    line-height:1.5;
}


.admin-login-footer{
    margin-top:24px;

    padding-top:18px;

    border-top:1px solid #e2e8f0;

    text-align:center;
}


.admin-login-footer a{
    color:#64748b;

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

    text-decoration:none;
}


.admin-login-footer a:hover{
    color:#2563eb;
}


/* =========================================================
   LOGIN ADMIN - HP
========================================================= */

@media (max-width:600px){

    .admin-login-page{
        padding:16px;
    }


    .admin-login-card{
        padding:26px 20px;

        border-radius:20px;
    }


    .admin-login-logo{
        width:50px;
        height:50px;

        border-radius:15px;

        font-size:28px;
    }


    .admin-login-brand h1{
        font-size:23px;
    }

}
/* =========================================================
   LOGOUT ADMIN
========================================================= */

.kp-admin-logout-form{
    margin:0;
    padding:0;
}


.kp-admin-logout-button{
    width:100%;

    border:0;
    background:transparent;

    font-family:inherit;

    text-align:left;

    cursor:pointer;
}


.kp-admin-logout-button:hover{
    background:#fef2f2;
    color:#dc2626;
}
/* =========================================================
   DASHBOARD ADMIN
========================================================= */

.admin-dashboard-page{
    width:100%;
}


.admin-dashboard-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    margin-bottom:28px;
}


.admin-dashboard-label{
    display:block;

    margin-bottom:6px;

    font-size:11px;
    font-weight:900;

    letter-spacing:1.5px;

    color:#2563eb;
}


.admin-dashboard-header h1{
    margin:0 0 6px;

    font-size:30px;
    line-height:1.2;

    color:#0f172a;
}


.admin-dashboard-header p{
    margin:0;

    font-size:14px;

    color:#64748b;
}


/* GRID STATISTIK */

.admin-dashboard-grid{
    display:grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:18px;

    margin-bottom:34px;
}


.admin-dashboard-stat-card{
    min-height:105px;

    display:flex;
    align-items:center;

    gap:16px;

    padding:20px;

    box-sizing:border-box;

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:18px;

    box-shadow:
        0 8px 24px rgba(15,23,42,.05);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.admin-dashboard-stat-card:hover{
    transform:translateY(-3px);

    box-shadow:
        0 14px 30px rgba(15,23,42,.08);
}


.admin-dashboard-stat-icon{
    width:52px;
    height:52px;

    flex-shrink:0;

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

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #dcfce7
        );

    font-size:27px;
}


.admin-dashboard-stat-card > div:last-child{
    display:flex;
    flex-direction:column;

    gap:4px;
}


.admin-dashboard-stat-card span{
    font-size:13px;
    font-weight:700;

    color:#64748b;
}


.admin-dashboard-stat-card strong{
    font-size:27px;
    line-height:1;

    color:#0f172a;
}


/* SECTION */

.admin-dashboard-section{
    padding:24px;

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:20px;

    box-shadow:
        0 8px 24px rgba(15,23,42,.04);
}


.admin-dashboard-section-header{
    margin-bottom:20px;
}


.admin-dashboard-section-label{
    display:block;

    margin-bottom:5px;

    font-size:11px;
    font-weight:900;

    letter-spacing:1.4px;

    color:#16a34a;
}


.admin-dashboard-section-header h2{
    margin:0;

    font-size:20px;

    color:#0f172a;
}


/* BUKU PER MAPEL */

.admin-dashboard-mapel-grid{
    display:grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:12px;
}


.admin-dashboard-mapel-card{
    display:flex;
    align-items:center;

    gap:12px;

    min-height:72px;

    padding:14px;

    box-sizing:border-box;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:14px;
}


.admin-dashboard-mapel-icon{
    width:42px;
    height:42px;

    flex-shrink:0;

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

    border-radius:12px;

    background:#ffffff;

    font-size:21px;

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


.admin-dashboard-mapel-info{
    display:flex;
    flex-direction:column;

    gap:3px;

    min-width:0;
}


.admin-dashboard-mapel-info strong{
    font-size:13px;

    color:#334155;
}


.admin-dashboard-mapel-info span{
    font-size:12px;

    color:#64748b;
}


/* TABLET */

@media (max-width:1000px){

    .admin-dashboard-grid{
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-dashboard-mapel-grid{
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* HP */

@media (max-width:600px){

    .admin-dashboard-header h1{
        font-size:24px;
    }


    .admin-dashboard-grid{
        grid-template-columns:1fr;

        gap:12px;
    }


    .admin-dashboard-stat-card{
        min-height:88px;

        padding:15px;
    }


    .admin-dashboard-stat-icon{
        width:46px;
        height:46px;

        font-size:24px;
    }


    .admin-dashboard-stat-card strong{
        font-size:23px;
    }


    .admin-dashboard-section{
        padding:16px;
    }


    .admin-dashboard-mapel-grid{
        grid-template-columns:1fr;
    }

}
.mapel-login-back{
    margin-top:14px;
    text-align:center;
}

.mapel-login-back a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 14px;

    color:#64748b;

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

    text-decoration:none;

    border-radius:10px;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.mapel-login-back a:hover{
    color:#1d4ed8;
    background:#eff6ff;

    transform:translateY(-1px);
}
/* =========================
   PEMISAH LATIHAN SISWA
========================= */

.siswa-latihan-divider{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;

    margin:34px 0;

    padding:0 4px;
    box-sizing:border-box;
}

.siswa-latihan-divider > span{
    flex:1;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        #93c5fd,
        #60a5fa
    );
}

.siswa-latihan-divider > span:last-child{
    background:linear-gradient(
        90deg,
        #60a5fa,
        #93c5fd,
        transparent
    );
}

.siswa-latihan-divider-icon{
    width:48px;
    height:48px;

    flex:0 0 48px;

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

    border:1px solid #bfdbfe;
    border-radius:50%;

    background:#ffffff;

    font-size:25px;

    box-shadow:0 6px 18px rgba(37,99,235,.10);
}
/* ========================================
   MODAL SELESAI ASESMEN
======================================== */

.siswa-asesmen-modal{
    position:fixed;
    inset:0;

    display:none;
    align-items:center;
    justify-content:center;

    padding:20px;

    z-index:99999;
}

.siswa-asesmen-modal.show{
    display:flex;
}

.siswa-asesmen-modal-backdrop{
    position:absolute;
    inset:0;

    background:rgba(15, 23, 42, .55);
    backdrop-filter:blur(4px);
}

.siswa-asesmen-modal-card{
    position:relative;
    z-index:2;

    width:100%;
    max-width:430px;

    padding:34px 30px 28px;

    text-align:center;

    background:#ffffff;

    border-radius:24px;

    box-shadow:
        0 24px 70px rgba(15, 23, 42, .25);

    animation:
        siswaAsesmenModalMasuk .3s ease;
}

.siswa-asesmen-modal-icon{
    width:76px;
    height:76px;

    margin:0 auto 18px;

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

    font-size:38px;

    background:#eff6ff;

    border-radius:50%;
}

.siswa-asesmen-modal-card h2{
    margin:0 0 10px;

    font-size:27px;
    font-weight:800;

    color:#172554;
}

.siswa-asesmen-modal-card p{
    margin:0 0 7px;

    font-size:17px;
    font-weight:700;

    color:#334155;
}

.siswa-asesmen-modal-card span{
    display:block;

    margin-bottom:24px;

    font-size:14px;
    line-height:1.6;

    color:#64748b;
}

.siswa-asesmen-modal-ok{
    min-width:120px;

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

    padding:12px 28px;

    background:#2563eb;
    color:#ffffff;

    border-radius:12px;

    font-size:15px;
    font-weight:800;

    text-decoration:none;

    box-shadow:
        0 8px 20px rgba(37, 99, 235, .22);

    transition:.2s ease;
}

.siswa-asesmen-modal-ok:hover{
    transform:translateY(-2px);

    background:#1d4ed8;
}

@keyframes siswaAsesmenModalMasuk{

    from{
        opacity:0;
        transform:
            translateY(15px)
            scale(.96);
    }

    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* HP */

@media(max-width:600px){

    .siswa-asesmen-modal-card{
        max-width:340px;

        padding:28px 22px 24px;

        border-radius:20px;
    }

    .siswa-asesmen-modal-icon{
        width:66px;
        height:66px;

        font-size:32px;
    }

    .siswa-asesmen-modal-card h2{
        font-size:23px;
    }

}
/* ========================================
   DAFTAR SOAL
======================================== */

.siswa-daftar-soal-toolbar{
    display:flex;
    justify-content:flex-end;

    margin-bottom:12px;
}


.siswa-daftar-soal-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    min-height:40px;

    padding:9px 14px;

    border:1px solid #dbe3ef;
    border-radius:11px;

    background:#ffffff;
    color:#334155;

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

    cursor:pointer;

    transition:.2s ease;
}


.siswa-daftar-soal-toggle:hover{
    background:#f8fafc;
    border-color:#bfdbfe;

    color:#1d4ed8;
}


.siswa-daftar-soal-toggle span{
    font-size:18px;
    line-height:1;
}


/* PANEL */

.siswa-daftar-soal-panel{
    display:none;

    margin-bottom:18px;

    padding:18px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:16px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.08);
}


.siswa-daftar-soal-panel.show{
    display:block;
}


.siswa-daftar-soal-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    margin-bottom:16px;
}


.siswa-daftar-soal-panel-header strong{
    display:block;

    font-size:16px;
    font-weight:800;

    color:#172554;
}


.siswa-daftar-soal-panel-header span{
    display:block;

    margin-top:2px;

    font-size:12px;

    color:#64748b;
}


.siswa-daftar-soal-close{
    width:34px;
    height:34px;

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

    border:0;
    border-radius:9px;

    background:#f1f5f9;

    color:#64748b;

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

    cursor:pointer;
}


/* GRID NOMOR */

.siswa-daftar-soal-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fill, minmax(44px, 1fr));

    gap:9px;
}


.siswa-daftar-soal-number{
    height:44px;

    border:1px solid #dbe3ef;
    border-radius:10px;

    background:#f8fafc;
    color:#475569;

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

    cursor:pointer;

    transition:.18s ease;
}


.siswa-daftar-soal-number:hover{
    transform:translateY(-2px);

    border-color:#93c5fd;
}


/* SOAL AKTIF */

.siswa-daftar-soal-number.aktif{
    border:2px solid #2563eb;

    color:#1d4ed8;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.10);
}


/* NANTI: SUDAH DIJAWAB */

.siswa-daftar-soal-number.dijawab{
    background:#dcfce7;
    border-color:#86efac;
    color:#166534;
}


/* NANTI: RAGU-RAGU */

.siswa-daftar-soal-number.ragu{
    background:#fef3c7;
    border-color:#fcd34d;
    color:#92400e;
}


/* LEGENDA */

.siswa-daftar-soal-legend{
    display:flex;
    flex-wrap:wrap;

    gap:14px;

    margin-top:16px;

    padding-top:14px;

    border-top:1px solid #eef2f7;
}


.siswa-daftar-soal-legend span{
    display:flex;
    align-items:center;

    gap:6px;

    font-size:11px;
    font-weight:700;

    color:#64748b;
}


.siswa-daftar-soal-legend i{
    width:11px;
    height:11px;

    display:block;

    border-radius:3px;
}


.siswa-daftar-soal-legend i.belum{
    background:#f8fafc;
    border:1px solid #cbd5e1;
}


.siswa-daftar-soal-legend i.dijawab{
    background:#22c55e;
}


.siswa-daftar-soal-legend i.ragu{
    background:#facc15;
}


/* HP */

@media(max-width:600px){

    .siswa-daftar-soal-toggle{
        padding:8px 12px;

        font-size:12px;
    }


    .siswa-daftar-soal-panel{
        padding:15px;

        border-radius:14px;
    }


    .siswa-daftar-soal-grid{
        grid-template-columns:
            repeat(5, 1fr);

        gap:8px;
    }


    .siswa-daftar-soal-number{
        height:40px;

        font-size:13px;
    }

}
/* ========================================
   TOMBOL RAGU-RAGU
======================================== */

.siswa-kerjakan-ragu{
    min-height:42px;

    padding:9px 16px;

    border:1px solid #fcd34d;
    border-radius:11px;

    background:#fffbeb;
    color:#92400e;

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

    cursor:pointer;

    transition:.2s ease;
}


.siswa-kerjakan-ragu:hover{
    background:#fef3c7;

    transform:translateY(-1px);
}


.siswa-kerjakan-ragu.aktif{
    background:#facc15;
    border-color:#eab308;

    color:#713f12;

    box-shadow:
        0 0 0 3px rgba(250,204,21,.18);
}


@media(max-width:600px){

    .siswa-kerjakan-ragu{
        padding:8px 11px;

        font-size:12px;
    }

}
/* ========================================
   5 PERINGKAT TERATAS - HASIL BELAJAR ADMIN
======================================== */

.admin-ranking-card{
    margin-top:24px;

    padding:26px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:22px;

    box-shadow:
        0 14px 34px rgba(15,23,42,.06);
}


.admin-ranking-header{
    display:flex;
    align-items:flex-start;

    gap:14px;

    margin-bottom:24px;
}


.admin-ranking-icon{
    width:48px;
    height:48px;

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

    flex-shrink:0;

    border-radius:14px;

    background:#fff7ed;

    font-size:24px;
}


.admin-ranking-header h2{
    margin:0 0 5px;

    font-size:22px;
    font-weight:900;

    color:#0f172a;
}


.admin-ranking-header p{
    margin:0;

    font-size:14px;
    line-height:1.6;

    color:#64748b;
}


/* LIST */

.admin-ranking-list{
    display:flex;
    flex-direction:column;

    gap:12px;
}


.admin-ranking-item{
    display:grid;

    grid-template-columns:
        38px
        minmax(160px, 230px)
        minmax(180px, 1fr)
        58px
        95px;

    align-items:center;

    gap:14px;

    min-height:54px;

    padding:8px 0;

    border-bottom:1px solid #eef2f7;
}


.admin-ranking-item:last-child{
    border-bottom:none;
}


/* NOMOR PERINGKAT */

.admin-ranking-number{
    width:32px;
    height:32px;

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

    border-radius:50%;

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

    color:#fff;
}


/* NAMA */

.admin-ranking-name{
    font-size:14px;
    font-weight:900;

    color:#334155;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* AREA BATANG */

.admin-ranking-bar-area{
    width:100%;
}


.admin-ranking-bar-track{
    width:100%;
    height:15px;

    overflow:hidden;

    border-radius:999px;

    background:#eef2f7;
}


.admin-ranking-bar{
    height:100%;

    border-radius:999px;

    transition:
        width .5s ease,
        transform .2s ease;
}


.admin-ranking-item:hover
.admin-ranking-bar{
    transform:scaleY(1.12);
}


/* NILAI */

.admin-ranking-score{
    text-align:right;

    font-size:18px;
    font-weight:900;
}


/* LABEL */

.admin-ranking-rank-label{
    text-align:right;

    font-size:12px;
    font-weight:700;

    color:#64748b;
}


/* ========================================
   WARNA PER PERINGKAT
======================================== */

/* PERINGKAT 1 */

.admin-ranking-number.ranking-1,
.admin-ranking-bar.ranking-1{
    background:#f59e0b;
}

.admin-ranking-score.ranking-text-1{
    color:#d97706;
}


/* PERINGKAT 2 */

.admin-ranking-number.ranking-2,
.admin-ranking-bar.ranking-2{
    background:#2563eb;
}

.admin-ranking-score.ranking-text-2{
    color:#2563eb;
}


/* PERINGKAT 3 */

.admin-ranking-number.ranking-3,
.admin-ranking-bar.ranking-3{
    background:#22c55e;
}

.admin-ranking-score.ranking-text-3{
    color:#16a34a;
}


/* PERINGKAT 4 */

.admin-ranking-number.ranking-4,
.admin-ranking-bar.ranking-4{
    background:#9333ea;
}

.admin-ranking-score.ranking-text-4{
    color:#7e22ce;
}


/* PERINGKAT 5 */

.admin-ranking-number.ranking-5,
.admin-ranking-bar.ranking-5{
    background:#ec4899;
}

.admin-ranking-score.ranking-text-5{
    color:#db2777;
}


/* PERINGKAT LAIN */

.admin-ranking-number.ranking-lain,
.admin-ranking-bar.ranking-lain{
    background:#0891b2;
}

.admin-ranking-score.ranking-text-lain{
    color:#0e7490;
}


/* CATATAN JIKA LEBIH DARI 5 SISWA */

.admin-ranking-note{
    display:flex;
    align-items:flex-start;

    gap:10px;

    margin-top:20px;

    padding:13px 15px;

    border-radius:12px;

    background:#eff6ff;

    color:#1d4ed8;

    font-size:13px;
    line-height:1.5;
}


.admin-ranking-note p{
    margin:0;
}


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

@media(max-width:900px){

    .admin-ranking-item{
        grid-template-columns:
            36px
            minmax(120px, 180px)
            minmax(140px, 1fr)
            50px;
    }

    .admin-ranking-rank-label{
        display:none;
    }

}


@media(max-width:600px){

    .admin-ranking-card{
        padding:18px;
        border-radius:18px;
    }

    .admin-ranking-header{
        gap:10px;
    }

    .admin-ranking-icon{
        width:42px;
        height:42px;

        font-size:21px;
    }

    .admin-ranking-header h2{
        font-size:18px;
    }

    .admin-ranking-header p{
        font-size:12px;
    }

    .admin-ranking-item{
        grid-template-columns:
            32px
            minmax(95px, 135px)
            minmax(100px, 1fr)
            42px;

        gap:9px;
    }

    .admin-ranking-number{
        width:28px;
        height:28px;

        font-size:12px;
    }

    .admin-ranking-name{
        font-size:12px;
    }

    .admin-ranking-bar-track{
        height:12px;
    }

    .admin-ranking-score{
        font-size:15px;
    }

}
/* ========================================
   PENGATURAN ADMIN
======================================== */

.admin-pengaturan-page,
.admin-pengaturan-form-page{
    width:100%;
}


/* HEADER */

.admin-pengaturan-header,
.admin-pengaturan-form-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    margin-bottom:24px;
}


.admin-pengaturan-label{
    display:inline-block;

    margin-bottom:6px;

    font-size:12px;
    font-weight:900;

    letter-spacing:1.4px;

    color:#2563eb;
}


.admin-pengaturan-header h1,
.admin-pengaturan-form-header h1{
    margin:0;

    font-size:32px;
    font-weight:900;

    color:#0f172a;
}


.admin-pengaturan-header p,
.admin-pengaturan-form-header p{
    margin:6px 0 0;

    font-size:14px;
    line-height:1.6;

    color:#64748b;
}


/* BUTTON HEADER */

.admin-pengaturan-add-button,
.admin-pengaturan-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;

    padding:0 16px;

    border-radius:12px;

    text-decoration:none;

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

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.admin-pengaturan-add-button{
    background:#2563eb;
    color:#fff;

    box-shadow:
        0 8px 18px rgba(37,99,235,.18);
}


.admin-pengaturan-add-button:hover{
    transform:translateY(-2px);

    background:#1d4ed8;
}


.admin-pengaturan-back-button{
    background:#fff;

    border:1px solid #dbe3ee;

    color:#475569;
}


.admin-pengaturan-back-button:hover{
    background:#f8fafc;
}


/* ALERT */

.admin-pengaturan-alert-success,
.admin-pengaturan-alert-error{
    margin-bottom:20px;

    padding:13px 16px;

    border-radius:12px;

    font-size:14px;
    font-weight:700;
}


.admin-pengaturan-alert-success{
    background:#ecfdf5;
    color:#047857;

    border:1px solid #a7f3d0;
}


.admin-pengaturan-alert-error{
    background:#fef2f2;
    color:#b91c1c;

    border:1px solid #fecaca;
}


.admin-pengaturan-alert-error ul{
    margin:8px 0 0;
    padding-left:20px;
}


/* CARD DAFTAR */

.admin-pengaturan-card,
.admin-pengaturan-form-card{
    background:#fff;

    border:1px solid #e2e8f0;
    border-radius:20px;

    box-shadow:
        0 14px 32px rgba(15,23,42,.06);
}


.admin-pengaturan-card{
    overflow:hidden;
}


.admin-pengaturan-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:16px;

    padding:22px 24px;

    border-bottom:1px solid #eef2f7;
}


.admin-pengaturan-card-header h2{
    margin:0;

    font-size:20px;
    font-weight:900;

    color:#0f172a;
}


.admin-pengaturan-card-header p{
    margin:4px 0 0;

    font-size:13px;

    color:#64748b;
}


.admin-pengaturan-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:32px;

    padding:0 12px;

    border-radius:999px;

    background:#eff6ff;

    color:#2563eb;

    font-size:12px;
    font-weight:800;
}


/* TABLE */

.admin-pengaturan-table-wrap{
    width:100%;
    overflow-x:auto;
}


.admin-pengaturan-table{
    width:100%;

    border-collapse:collapse;
}


.admin-pengaturan-table th{
    padding:14px 18px;

    background:#f8fafc;

    text-align:left;

    font-size:12px;
    font-weight:900;

    letter-spacing:.4px;

    color:#64748b;
}


.admin-pengaturan-table td{
    padding:16px 18px;

    border-top:1px solid #eef2f7;

    vertical-align:middle;

    font-size:14px;

    color:#334155;
}


.admin-pengaturan-user{
    display:flex;
    align-items:center;

    gap:12px;
}


.admin-pengaturan-avatar{
    width:38px;
    height:38px;

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

    flex-shrink:0;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #e0e7ff
        );

    color:#1d4ed8;

    font-size:15px;
    font-weight:900;
}


.admin-pengaturan-user strong{
    display:block;

    color:#0f172a;
}


.admin-pengaturan-you{
    display:inline-block;

    margin-top:3px;

    padding:2px 8px;

    border-radius:999px;

    background:#ecfdf5;

    color:#047857;

    font-size:10px;
    font-weight:900;
}


.admin-pengaturan-username{
    display:inline-block;

    padding:6px 10px;

    border-radius:8px;

    background:#f8fafc;

    color:#334155;

    font-family:monospace;

    font-size:13px;
}


/* STATUS */

.admin-pengaturan-status{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:0 10px;

    border-radius:999px;

    font-size:11px;
    font-weight:900;
}


.admin-pengaturan-status.aktif{
    background:#dcfce7;
    color:#15803d;
}


.admin-pengaturan-status.nonaktif{
    background:#fee2e2;
    color:#b91c1c;
}


/* ACTION */

.admin-pengaturan-actions{
    display:flex;
    align-items:center;

    gap:8px;
}


.admin-pengaturan-actions form{
    margin:0;
}


.admin-pengaturan-edit,
.admin-pengaturan-delete{
    min-height:34px;

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

    padding:0 12px;

    border-radius:9px;

    font-size:12px;
    font-weight:800;

    cursor:pointer;

    text-decoration:none;

    transition:
        transform .18s ease,
        background .18s ease;
}


.admin-pengaturan-edit{
    border:1px solid #bfdbfe;

    background:#eff6ff;

    color:#2563eb;
}


.admin-pengaturan-edit:hover{
    background:#dbeafe;

    transform:translateY(-1px);
}


.admin-pengaturan-delete{
    border:1px solid #fecaca;

    background:#fef2f2;

    color:#dc2626;
}


.admin-pengaturan-delete:hover{
    background:#fee2e2;

    transform:translateY(-1px);
}


/* EMPTY */

.admin-pengaturan-empty{
    text-align:center;

    padding:32px !important;

    color:#94a3b8 !important;
}


/* ========================================
   FORM TAMBAH / EDIT
======================================== */

.admin-pengaturan-form-card{
    max-width:760px;

    padding:26px;
}


.admin-pengaturan-form-group{
    margin-bottom:20px;
}


.admin-pengaturan-form-group label{
    display:block;

    margin-bottom:7px;

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

    color:#334155;
}


.admin-pengaturan-form-group input,
.admin-pengaturan-form-group select{
    width:100%;

    min-height:44px;

    box-sizing:border-box;

    padding:0 13px;

    border:1px solid #cbd5e1;
    border-radius:11px;

    background:#fff;

    font-size:14px;

    color:#0f172a;

    outline:none;

    transition:
        border .18s ease,
        box-shadow .18s ease;
}


.admin-pengaturan-form-group input:focus,
.admin-pengaturan-form-group select:focus{
    border-color:#3b82f6;

    box-shadow:
        0 0 0 3px rgba(59,130,246,.12);
}


.admin-pengaturan-form-group small{
    display:block;

    margin-top:6px;

    font-size:12px;
    line-height:1.5;

    color:#94a3b8;
}


/* FORM ACTION */

.admin-pengaturan-form-actions{
    display:flex;
    justify-content:flex-end;

    gap:10px;

    margin-top:26px;
}


.admin-pengaturan-cancel-button,
.admin-pengaturan-save-button{
    min-height:42px;

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

    padding:0 16px;

    border-radius:11px;

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

    text-decoration:none;

    cursor:pointer;
}


.admin-pengaturan-cancel-button{
    border:1px solid #cbd5e1;

    background:#fff;

    color:#475569;
}


.admin-pengaturan-save-button{
    border:none;

    background:#2563eb;

    color:#fff;

    box-shadow:
        0 8px 18px rgba(37,99,235,.18);
}


.admin-pengaturan-save-button:hover{
    background:#1d4ed8;
}


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

@media(max-width:700px){

    .admin-pengaturan-header,
    .admin-pengaturan-form-header{
        flex-direction:column;
    }

    .admin-pengaturan-header h1,
    .admin-pengaturan-form-header h1{
        font-size:26px;
    }

    .admin-pengaturan-add-button,
    .admin-pengaturan-back-button{
        width:100%;

        box-sizing:border-box;
    }

    .admin-pengaturan-card-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .admin-pengaturan-form-card{
        padding:18px;
    }

    .admin-pengaturan-form-actions{
        flex-direction:column-reverse;
    }

    .admin-pengaturan-cancel-button,
    .admin-pengaturan-save-button{
        width:100%;

        box-sizing:border-box;
    }

}
/* INFO WAKTU ASESMEN DI CARD SISWA */
.siswa-latihan-card-meta .asesmen-waktu-info{
    width:100%;

    display:flex;
    flex-direction:column;

    gap:6px;

    margin-top:8px;
}

.siswa-latihan-card-meta .asesmen-waktu-info span{
    display:block;
    width:100%;

    line-height:1.5;
}
/* =========================================================
   ADMIN - PROGRES PESERTA ASESMEN
========================================================= */

.admin-progres-page{
    width:100%;
    max-width:1180px;
    margin:0 auto;
}

.admin-progres-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    margin-bottom:26px;
}

.admin-progres-label{
    display:inline-block;
    margin-bottom:7px;

    font-size:12px;
    font-weight:900;
    letter-spacing:1.5px;

    color:#2563eb;
}

.admin-progres-header h1{
    margin:0 0 7px;

    font-size:32px;
    line-height:1.15;

    color:#172554;
}

.admin-progres-header p{
    margin:0;

    color:#64748b;
    font-size:15px;
    line-height:1.6;
}

.admin-progres-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;
    padding:0 18px;

    border:1px solid #dbe3ee;
    border-radius:11px;

    background:#ffffff;
    color:#475569;

    text-decoration:none;
    font-size:14px;
    font-weight:800;

    white-space:nowrap;

    transition:.18s ease;
}

.admin-progres-back-button:hover{
    transform:translateY(-1px);
    background:#f8fafc;
}
/* =========================
   TABEL PROGRES PESERTA
========================= */

.admin-progres-table-card{
    overflow-x:auto;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:18px;

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

.admin-progres-table{
    width:100%;
    border-collapse:collapse;

    font-size:14px;
}

.admin-progres-table th{
    padding:14px 16px;

    background:#f8fafc;

    color:#475569;

    font-size:12px;
    font-weight:800;
    letter-spacing:.3px;

    text-align:left;

    border-bottom:1px solid #e2e8f0;
}

.admin-progres-table td{
    padding:15px 16px;

    color:#334155;

    border-bottom:1px solid #eef2f7;

    vertical-align:middle;
}

.admin-progres-table tbody tr:last-child td{
    border-bottom:0;
}

.admin-progres-table tbody tr:hover{
    background:#f8fbff;
}
/* =========================
   TOMBOL RESET PROGRES
========================= */

.admin-progres-peserta-page > form{
    margin-bottom:16px;
}

.admin-progres-peserta-page > form button{
    min-height:40px;
    padding:0 16px;

    border:1px solid #fecaca;
    border-radius:10px;

    background:#fff1f2;
    color:#dc2626;

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

    cursor:pointer;

    transition:
        transform .18s ease,
        background .18s ease;
}

.admin-progres-peserta-page > form button:hover{
    transform:translateY(-1px);
    background:#ffe4e6;
}

.admin-progres-table td form{
    margin:0;
}

.admin-progres-table td form button{
    min-height:36px;
    padding:0 13px;

    border:1px solid #fecaca;
    border-radius:9px;

    background:#fff1f2;
    color:#dc2626;

    font-size:12px;
    font-weight:800;

    cursor:pointer;

    transition:
        transform .18s ease,
        background .18s ease;
}

.admin-progres-table td form button:hover{
    transform:translateY(-1px);
    background:#ffe4e6;
}
/* =========================
   RINGKASAN PROGRES
========================= */

.admin-progres-summary{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-bottom:18px;
    padding:9px 12px;

    background:#eff6ff;

    border:1px solid #dbeafe;
    border-radius:10px;

    color:#475569;
    font-size:13px;
    font-weight:700;
}

.admin-progres-summary strong{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:28px;
    height:28px;
    padding:0 8px;

    background:#2563eb;
    border-radius:8px;

    color:#ffffff;
    font-size:13px;
    font-weight:900;
}
/* =========================
   STATUS PROGRES PESERTA
========================= */

.admin-progres-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:30px;
    padding:0 11px;

    border-radius:999px;

    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

/* Sedang mengerjakan */
.admin-progres-status.is-active{
    background:#eff6ff;
    color:#2563eb;
    border:1px solid #bfdbfe;
}

/* Sudah selesai */
.admin-progres-status.is-finished{
    background:#ecfdf5;
    color:#059669;
    border:1px solid #a7f3d0;
}

/* Waktu habis */
.admin-progres-status.is-timeout{
    background:#fff1f2;
    color:#dc2626;
    border:1px solid #fecdd3;
}
/* =========================
   PROGRES JUMLAH SOAL
========================= */

.admin-progres-count{
    display:flex;
    align-items:baseline;
    gap:4px;

    white-space:nowrap;
}

.admin-progres-count strong{
    color:#172554;

    font-size:15px;
    font-weight:900;
}

.admin-progres-count span{
    color:#64748b;

    font-size:12px;
    font-weight:700;
}
/* =========================
   COUNTDOWN PROGRES PESERTA
========================= */

.admin-progres-countdown{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:82px;
    padding:6px 9px;

    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:8px;

    color:#334155;

    font-size:13px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
}

.admin-progres-countdown.is-expired{
    background:#fff1f2;
    border-color:#fecdd3;
    color:#dc2626;
}
/* =========================
   ALERT HASIL BELAJAR
========================= */

.siswa-hasil-belajar-alert-error{
    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:22px;
    padding:16px 18px;

    background:#fff7ed;
    border:1px solid #fed7aa;
    border-radius:16px;

    color:#9a3412;
}

.siswa-hasil-belajar-alert-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

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

    border-radius:50%;

    background:#ffedd5;

    font-size:20px;
    font-weight:800;
}

.siswa-hasil-belajar-alert-content{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.siswa-hasil-belajar-alert-content strong{
    font-size:15px;
    font-weight:800;
}

.siswa-hasil-belajar-alert-content span{
    font-size:14px;
    line-height:1.5;
}
/* =========================
   KELOMPOK BUKU PER MAPEL
========================= */

.admin-buku-mapel-group{
    margin-bottom:36px;
}

.admin-buku-mapel-heading{
    margin-bottom:16px;
}

.admin-buku-mapel-heading span{
    display:block;
    margin-bottom:4px;

    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;

    color:#64748b;
}

.admin-buku-mapel-heading h2{
    margin:0;

    font-size:22px;
    font-weight:800;

    color:#0f172a;
}
/* =========================
   KELOMPOK MATERI PER MAPEL
========================= */

.admin-materi-mapel-group{
    margin-bottom:36px;
}

.admin-materi-mapel-heading{
    margin-bottom:16px;
}

.admin-materi-mapel-heading span{
    display:block;
    margin-bottom:4px;

    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;

    color:#64748b;
}

.admin-materi-mapel-heading h2{
    margin:0;

    font-size:22px;
    font-weight:800;

    color:#0f172a;
}
/* =========================
   KELOMPOK VIDEO PER MAPEL
========================= */

.admin-video-mapel-group{
    margin-bottom:36px;
}

.admin-video-mapel-heading{
    margin-bottom:16px;
}

.admin-video-mapel-heading span{
    display:block;
    margin-bottom:4px;

    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;

    color:#64748b;
}

.admin-video-mapel-heading h2{
    margin:0;

    font-size:22px;
    font-weight:800;

    color:#0f172a;
}
/* =========================
   KELAS TUJUAN ASESMEN
========================= */

.admin-latihan-kelas-tujuan{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:12px;

    margin-top:16px;
}

.admin-latihan-kelas-option{
    position:relative;

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

    min-height:52px;

    padding:10px 12px;

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

    background:#ffffff;

    cursor:pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.admin-latihan-kelas-option:hover{
    transform:translateY(-2px);

    border-color:#4f8edc;

    box-shadow:0 7px 18px rgba(40, 92, 160, .10);
}


/* checkbox asli dibuat kecil */
.admin-latihan-kelas-option input[type="checkbox"]{
    width:18px !important;
    height:18px !important;

    min-width:18px;

    margin:0 8px 0 0 !important;
    padding:0 !important;

    accent-color:#246bc2;

    cursor:pointer;
}


/* teks kelas */
.admin-latihan-kelas-option span{
    font-size:15px;
    font-weight:700;

    color:#24364d;
}


/* saat dipilih */
.admin-latihan-kelas-option:has(
    input[type="checkbox"]:checked
){
    border-color:#32b67a;

    background:#f0fff7;

    box-shadow:0 6px 18px rgba(50, 182, 122, .12);
}

.admin-latihan-kelas-option:has(
    input[type="checkbox"]:checked
) span{
    color:#168556;
}


/* TABLET */
@media (max-width:900px){

    .admin-latihan-kelas-tujuan{
        grid-template-columns:repeat(3, 1fr);
    }

}


/* HP */
@media (max-width:560px){

    .admin-latihan-kelas-tujuan{
        grid-template-columns:repeat(2, 1fr);
        gap:10px;
    }

    .admin-latihan-kelas-option{
        min-height:48px;
    }

}
/* =========================
   PERSETUJUAN ASESMEN
========================= */

.siswa-asesmen-persetujuan-page{
    min-height:100dvh;

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

    padding:24px 16px;
}


.siswa-asesmen-persetujuan-card{
    width:100%;
    max-width:650px;

    background:#ffffff;

    border-radius:26px;

    padding:32px;

    box-shadow:
        0 18px 50px
        rgba(15,23,42,.10);
}


.siswa-asesmen-persetujuan-icon{
    text-align:center;

    font-size:48px;

    margin-bottom:10px;
}


.siswa-asesmen-persetujuan-label{
    display:block;

    text-align:center;

    font-size:12px;
    font-weight:800;

    letter-spacing:1.4px;

    color:#2563eb;
}


.siswa-asesmen-persetujuan-card h1{
    margin:8px 0 0;

    text-align:center;

    font-size:30px;
}


.siswa-asesmen-persetujuan-card h2{
    margin:5px 0 12px;

    text-align:center;

    font-size:18px;

    color:#dc2626;
}


.siswa-asesmen-persetujuan-intro{
    text-align:center;

    color:#64748b;

    margin-bottom:24px;
}


.siswa-asesmen-persetujuan-rules{
    display:flex;

    flex-direction:column;

    gap:10px;
}


.siswa-asesmen-persetujuan-rule{
    display:flex;

    gap:12px;

    align-items:flex-start;

    padding:13px 14px;

    background:#f8fafc;

    border-radius:14px;
}


.siswa-asesmen-persetujuan-rule > span{
    flex:0 0 30px;

    width:30px;
    height:30px;

    border-radius:50%;

    display:flex;

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

    font-weight:800;

    background:#dbeafe;

    color:#1d4ed8;
}


.siswa-asesmen-persetujuan-rule p{
    margin:4px 0 0;

    line-height:1.55;
}


.siswa-asesmen-persetujuan-rule.warning{
    background:#fff7ed;
}


.siswa-asesmen-persetujuan-rule.warning > span{
    background:#fed7aa;

    color:#c2410c;
}


.siswa-asesmen-persetujuan-check{
    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-top:24px;

    padding:16px;

    border:1px solid #e2e8f0;

    border-radius:14px;

    cursor:pointer;
}


.siswa-asesmen-persetujuan-check input{
    width:20px;
    height:20px;

    margin-top:2px;
}


.siswa-asesmen-persetujuan-start{
    width:100%;

    min-height:50px;

    margin-top:20px;

    border:none;

    border-radius:14px;

    display:flex;

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

    font-weight:800;

    font-size:16px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #16a34a
        );

    color:#ffffff;

    cursor:pointer;

    transition:.2s ease;
}


.siswa-asesmen-persetujuan-start:hover:not(:disabled){
    transform:translateY(-2px);
}


.siswa-asesmen-persetujuan-start:disabled{
    opacity:.4;

    cursor:not-allowed;
}


@media(max-width:600px){

    .siswa-asesmen-persetujuan-card{
        padding:24px 18px;

        border-radius:20px;
    }


    .siswa-asesmen-persetujuan-card h1{
        font-size:25px;
    }


    .siswa-asesmen-persetujuan-card h2{
        font-size:16px;
    }

}
.admin-progres-pelanggaran-button{
    border:0;
    background:transparent;
    padding:0;
    cursor:pointer;
}
.siswa-latihan-alert-error{
    display:flex;
    align-items:flex-start;
    gap:14px;

    margin:0 0 28px;
    padding:18px 20px;

    border:1px solid rgba(220,38,38,.16);
    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(254,242,242,.98),
            rgba(255,247,237,.98)
        );

    box-shadow:
        0 10px 30px rgba(127,29,29,.06);
}

.siswa-latihan-alert-error-icon{
    flex:0 0 auto;

    width:44px;
    height:44px;

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

    border-radius:14px;

    background:rgba(254,226,226,.95);

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

.siswa-latihan-alert-error strong{
    display:block;

    margin-bottom:4px;

    font-size:18px;
    font-weight:800;

    color:#991b1b;
}

.siswa-latihan-alert-error p{
    margin:0;

    font-size:15px;
    line-height:1.6;

    color:#7f1d1d;
}

@media (max-width:600px){

    .siswa-latihan-alert-error{
        gap:11px;

        padding:15px 16px;

        border-radius:16px;
    }

    .siswa-latihan-alert-error-icon{
        width:40px;
        height:40px;

        border-radius:12px;

        font-size:20px;
    }

    .siswa-latihan-alert-error strong{
        font-size:16px;
    }

    .siswa-latihan-alert-error p{
        font-size:14px;
    }
}
.asesmen-error-modal{
    position:fixed;
    inset:0;

    z-index:9999;

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

    padding:20px;
}

.asesmen-error-backdrop{
    position:absolute;
    inset:0;

    background:rgba(15,23,42,.58);

    backdrop-filter:blur(2px);
}

.asesmen-error-dialog{
    position:relative;
    z-index:2;

    width:100%;
    max-width:430px;

    padding:32px 26px 26px;

    border-radius:24px;

    background:#ffffff;

    box-shadow:
        0 24px 70px rgba(15,23,42,.28);

    text-align:center;
}

.asesmen-error-icon{
    width:72px;
    height:72px;

    margin:0 auto 18px;

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

    border-radius:50%;

    background:#fff1f2;

    font-size:36px;
}

.asesmen-error-dialog h2{
    margin:0 0 10px;

    font-size:24px;
    font-weight:800;
    line-height:1.25;

    color:#111827;
}

.asesmen-error-dialog p{
    margin:0 0 24px;

    font-size:16px;
    line-height:1.6;

    color:#475569;
}

.asesmen-error-ok{
    width:100%;

    border:0;
    border-radius:14px;

    padding:13px 18px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #0ea5e9
    );

    color:#ffffff;

    font-size:16px;
    font-weight:800;

    cursor:pointer;
}

.asesmen-error-ok:active{
    transform:scale(.98);
}

@media (max-width:600px){

    .asesmen-error-dialog{
        max-width:360px;

        padding:28px 20px 22px;

        border-radius:20px;
    }

    .asesmen-error-icon{
        width:64px;
        height:64px;

        font-size:32px;
    }

    .asesmen-error-dialog h2{
        font-size:21px;
    }

    .asesmen-error-dialog p{
        font-size:15px;
    }
}
/* =========================
   LOGO SEKOLAH - HEADER SISWA
========================= */

.siswa-app-logo-image{
    width:58px;
    height:58px;
    object-fit:contain;
    display:block;
}
.footer-school-logo{
    width:34px;
    height:34px;

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

.footer-school-logo img{
    width:34px;
    height:34px;

    object-fit:contain;
    display:block;
}
.kp-admin-brand-icon{
    width:52px;
    height:52px;

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

    background:transparent;
    border-radius:0;
}

.kp-admin-brand-logo{
    width:52px;
    height:52px;

    object-fit:contain;
    display:block;
}
/* ========================================
   VIDEO PLAYER MODAL - KELAS PANDA
======================================== */

.video-player-modal{
    position:fixed;
    inset:0;
    z-index:9999;

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

    padding:24px;

    background:rgba(10, 31, 55, .78);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}

.video-player-modal-card{
    position:relative;

    width:min(960px, 100%);
    max-height:calc(100dvh - 48px);

    padding:20px;

    background:#ffffff;
    border-radius:24px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, .28);

    overflow:auto;
}

.video-player-modal-card h3{
    margin:0 52px 16px 2px;

    color:#173b64;

    font-size:20px;
    line-height:1.3;
    font-weight:800;
}

.video-player-close{
    position:absolute;

    top:14px;
    right:14px;

    z-index:5;

    width:38px;
    height:38px;

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

    padding:0;

    border:0;
    border-radius:50%;

    background:#eef5fb;
    color:#315d83;

    font-size:18px;
    font-weight:800;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}

.video-player-close:hover{
    transform:scale(1.06);
    background:#e1edf7;
}

.video-player-frame-wrap{
    position:relative;

    width:100%;
    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#000000;
    border-radius:16px;
}

.video-player-frame-wrap iframe{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    border:0;
}


/* ========================================
   VIDEO PLAYER - HP
======================================== */

@media (max-width:700px){

    .video-player-modal{
        padding:12px;
    }

    .video-player-modal-card{
        width:100%;
        max-height:calc(100dvh - 24px);

        padding:14px;

        border-radius:18px;
    }

    .video-player-modal-card h3{
        margin:2px 44px 12px 2px;

        font-size:16px;
    }

    .video-player-close{
        top:10px;
        right:10px;

        width:34px;
        height:34px;

        font-size:16px;
    }

    .video-player-frame-wrap{
        border-radius:12px;
    }

}
/* =========================================================
   ADMIN PENGUMUMAN
   ========================================================= */

.admin-pengumuman-page,
.admin-pengumuman-form-page{
    width:100%;
}


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

.admin-pengumuman-header,
.admin-pengumuman-form-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    margin-bottom:24px;
}

.admin-pengumuman-label{
    display:inline-block;

    margin-bottom:6px;

    color:#2563eb;

    font-size:12px;
    font-weight:900;
    letter-spacing:1.4px;
}

.admin-pengumuman-header h1,
.admin-pengumuman-form-header h1{
    margin:0;

    color:#0f172a;

    font-size:32px;
    line-height:1.2;
    font-weight:900;
}

.admin-pengumuman-header p,
.admin-pengumuman-form-header p{
    margin:7px 0 0;

    color:#64748b;

    font-size:14px;
    line-height:1.6;
}


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

.admin-pengumuman-add-button,
.admin-pengumuman-back-button{
    flex:0 0 auto;

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

    min-height:44px;

    padding:0 18px;

    border-radius:13px;

    text-decoration:none;

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

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.admin-pengumuman-add-button{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #16a36a 100%
        );

    box-shadow:
        0 10px 22px rgba(37,99,235,.18);
}

.admin-pengumuman-back-button{
    color:#334155;

    background:#ffffff;

    border:1px solid #dbe3ef;
}

.admin-pengumuman-add-button:hover,
.admin-pengumuman-back-button:hover{
    transform:translateY(-2px);
}


/* =========================
   SUCCESS & ERROR
========================= */

.admin-pengumuman-success{
    margin-bottom:20px;

    padding:14px 16px;

    border:1px solid #bbf7d0;
    border-radius:13px;

    background:#f0fdf4;

    color:#166534;

    font-size:13px;
    font-weight:700;
}

.admin-pengumuman-error{
    margin-bottom:20px;

    padding:15px 17px;

    border:1px solid #fecdd3;
    border-radius:13px;

    background:#fff1f2;

    color:#9f1239;

    font-size:13px;
}

.admin-pengumuman-error ul{
    margin:8px 0 0;
    padding-left:20px;
}


/* =========================
   LIST PENGUMUMAN
========================= */

.admin-pengumuman-list{
    display:flex;
    flex-direction:column;

    gap:14px;
}

.admin-pengumuman-card{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:24px;

    padding:20px 22px;

    border:1px solid #e4eaf2;
    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 8px 24px rgba(15,23,42,.045);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.admin-pengumuman-card:hover{
    transform:translateY(-2px);

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

.admin-pengumuman-card-main{
    flex:1;
    min-width:0;
}

.admin-pengumuman-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:8px;

    margin-bottom:9px;
}

.admin-pengumuman-date{
    display:inline-flex;
    align-items:center;

    min-height:26px;

    padding:0 10px;

    border-radius:999px;

    background:#eff6ff;

    color:#2563eb;

    font-size:11px;
    font-weight:800;
}

.admin-pengumuman-status{
    display:inline-flex;
    align-items:center;

    min-height:26px;

    padding:0 10px;

    border-radius:999px;

    font-size:11px;
    font-weight:800;
}

.admin-pengumuman-status.active{
    color:#15803d;
    background:#dcfce7;
}

.admin-pengumuman-status.inactive{
    color:#64748b;
    background:#f1f5f9;
}

.admin-pengumuman-card h2{
    margin:0 0 7px;

    color:#0f172a;

    font-size:18px;
    line-height:1.35;
    font-weight:900;
}

.admin-pengumuman-card p{
    margin:0;

    max-width:850px;

    color:#64748b;

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

.admin-pengumuman-order{
    margin-top:10px;

    color:#94a3b8;

    font-size:11px;
}

.admin-pengumuman-order strong{
    color:#475569;
}


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

.admin-pengumuman-actions{
    flex:0 0 auto;

    display:flex;
    align-items:center;

    gap:8px;
}

.admin-pengumuman-actions form{
    margin:0;
}

.admin-pengumuman-edit-button,
.admin-pengumuman-delete-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:38px;

    padding:0 14px;

    border-radius:10px;

    font-size:12px;
    font-weight:800;

    cursor:pointer;

    transition:.2s ease;
}

.admin-pengumuman-edit-button{
    border:1px solid #bfdbfe;

    background:#eff6ff;

    color:#1d4ed8;

    text-decoration:none;
}

.admin-pengumuman-delete-button{
    border:1px solid #fecdd3;

    background:#fff1f2;

    color:#be123c;
}

.admin-pengumuman-edit-button:hover,
.admin-pengumuman-delete-button:hover{
    transform:translateY(-1px);
}


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

.admin-pengumuman-empty{
    padding:50px 24px;

    border:1px dashed #cbd5e1;
    border-radius:20px;

    background:#f8fafc;

    text-align:center;
}

.admin-pengumuman-empty-icon{
    margin-bottom:10px;

    font-size:42px;
}

.admin-pengumuman-empty h2{
    margin:0 0 5px;

    color:#0f172a;

    font-size:19px;
}

.admin-pengumuman-empty p{
    margin:0;

    color:#64748b;

    font-size:13px;
}


/* =========================================================
   FORM TAMBAH / EDIT
   ========================================================= */

.admin-pengumuman-form{
    width:100%;
    max-width:900px;

    padding:26px;

    border:1px solid #e4eaf2;
    border-radius:20px;

    background:#ffffff;

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

.admin-pengumuman-form-group{
    display:flex;
    flex-direction:column;

    gap:7px;

    margin-bottom:20px;
}

.admin-pengumuman-form-group label{
    color:#334155;

    font-size:13px;
    font-weight:800;
}

.admin-pengumuman-form-group input,
.admin-pengumuman-form-group textarea{
    width:100%;

    box-sizing:border-box;

    padding:12px 14px;

    border:1px solid #d7e0eb;
    border-radius:12px;

    outline:none;

    background:#ffffff;

    color:#0f172a;

    font:inherit;
    font-size:13px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.admin-pengumuman-form-group textarea{
    min-height:145px;

    resize:vertical;

    line-height:1.6;
}

.admin-pengumuman-form-group input:focus,
.admin-pengumuman-form-group textarea:focus{
    border-color:#60a5fa;

    box-shadow:
        0 0 0 4px rgba(59,130,246,.10);
}

.admin-pengumuman-form-grid{
    display:grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:16px;
}


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

.admin-pengumuman-status-box{
    margin-top:2px;
    margin-bottom:22px;

    padding:15px 17px;

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

    background:
        linear-gradient(
            135deg,
            #f0f7ff 0%,
            #f3fff9 100%
        );
}
/* PILIHAN KELAS TUJUAN */

.admin-pengumuman-kelas-list{
    display:grid;
    grid-template-columns:
        repeat(auto-fill, minmax(82px, 1fr));

    gap:10px;
    margin-top:10px;
}

.admin-pengumuman-kelas-item{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-height:46px;
    padding:10px 12px;

    background:#f7f9fc;
    border:1px solid #dce5f0;
    border-radius:12px;

    cursor:pointer;

    font-size:14px;
    font-weight:700;
    color:#34445c;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.admin-pengumuman-kelas-item:hover{
    transform:translateY(-2px);
    border-color:#7aa7e8;
    background:#f0f6ff;
}

.admin-pengumuman-kelas-item input{
    width:17px;
    height:17px;
    margin:0;

    accent-color:#2563eb;
    cursor:pointer;
}

.admin-pengumuman-kelas-item:has(input:checked){
    border-color:#3b82f6;
    background:#eaf3ff;
    color:#174a91;
}
.admin-pengumuman-checkbox{
    display:flex;
    align-items:center;

    gap:9px;

    cursor:pointer;
}

.admin-pengumuman-checkbox input{
    width:17px;
    height:17px;

    accent-color:#2563eb;
}

.admin-pengumuman-checkbox span{
    color:#1e3a5f;

    font-size:13px;
    font-weight:800;
}

.admin-pengumuman-status-box p{
    margin:6px 0 0 26px;

    color:#64748b;

    font-size:11px;
    line-height:1.5;
}


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

.admin-pengumuman-form-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:10px;

    padding-top:4px;
}

.admin-pengumuman-cancel-button,
.admin-pengumuman-save-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:43px;

    padding:0 18px;

    border-radius:12px;

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

    cursor:pointer;

    text-decoration:none;
}

.admin-pengumuman-cancel-button{
    border:1px solid #dbe3ef;

    background:#ffffff;

    color:#475569;
}

.admin-pengumuman-save-button{
    border:0;

    background:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #16a36a 100%
        );

    color:#ffffff;

    box-shadow:
        0 10px 22px rgba(37,99,235,.18);
}


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

@media (max-width:900px){

    .admin-pengumuman-card{
        align-items:flex-start;
    }

}


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

@media (max-width:640px){

    .admin-pengumuman-header,
    .admin-pengumuman-form-header{
        flex-direction:column;
        align-items:stretch;

        gap:14px;
    }

    .admin-pengumuman-header h1,
    .admin-pengumuman-form-header h1{
        font-size:26px;
    }

    .admin-pengumuman-add-button,
    .admin-pengumuman-back-button{
        width:100%;

        box-sizing:border-box;
    }

    .admin-pengumuman-card{
        flex-direction:column;
        align-items:stretch;

        gap:16px;

        padding:18px;
    }

    .admin-pengumuman-card h2{
        font-size:16px;
    }

    .admin-pengumuman-actions{
        width:100%;
    }

    .admin-pengumuman-actions form{
        flex:1;
    }

    .admin-pengumuman-edit-button,
    .admin-pengumuman-delete-button{
        width:100%;

        box-sizing:border-box;
    }

    .admin-pengumuman-edit-button{
        flex:1;
    }

    .admin-pengumuman-form{
        max-width:none;

        padding:19px;

        box-sizing:border-box;
    }

    .admin-pengumuman-form-grid{
        grid-template-columns:1fr;

        gap:0;
    }

    .admin-pengumuman-form-actions{
        flex-direction:column-reverse;
        align-items:stretch;
    }

    .admin-pengumuman-cancel-button,
    .admin-pengumuman-save-button{
        width:100%;

        box-sizing:border-box;
    }

}
/* =========================
   ADMIN - TAMPILAN KELAS PANDA
========================= */

.admin-tampilan-page{
    padding:28px;
}

.admin-tampilan-header{
    margin-bottom:24px;
}

.admin-tampilan-label{
    display:inline-block;
    margin-bottom:8px;

    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;

    color:#2f6ecb;
}

.admin-tampilan-header h1{
    margin:0 0 8px;

    font-size:30px;
    line-height:1.2;

    color:#18355f;
}

.admin-tampilan-header p{
    margin:0;

    max-width:720px;

    font-size:14px;
    line-height:1.7;

    color:#6d7c91;
}

.admin-tampilan-grid{
    display:grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:22px;
}

.admin-tampilan-card{
    overflow:hidden;

    background:#ffffff;

    border:1px solid #e1e8f2;
    border-radius:20px;

    box-shadow:
        0 12px 30px rgba(31,55,88,.08);
}

.admin-tampilan-card-preview{
    min-height:190px;

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

    background:
        linear-gradient(
            135deg,
            #f5f9ff 0%,
            #eef5ff 100%
        );
}

.admin-tampilan-card-preview img{
    display:block;

    width:100%;
    height:220px;

    object-fit:cover;
}

.admin-tampilan-card-placeholder{
    width:72px;
    height:72px;

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

    border-radius:18px;

    background:#ffffff;

    font-size:34px;

    box-shadow:
        0 8px 20px rgba(31,55,88,.08);
}

.admin-tampilan-card-body{
    padding:18px;
}

.admin-tampilan-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:14px;
}

.admin-tampilan-card-top h2{
    margin:0;

    font-size:17px;
    line-height:1.4;

    color:#18355f;
}

.admin-tampilan-status{
    flex:0 0 auto;

    padding:6px 10px;

    border-radius:999px;

    font-size:11px;
    font-weight:800;
}

.admin-tampilan-status.is-active{
    background:#e6f7ee;
    color:#208755;
}

.admin-tampilan-status.is-inactive{
    background:#f1f3f6;
    color:#7c8796;
}

.admin-tampilan-type{
    margin:8px 0 16px;

    font-size:12px;

    color:#8b98a9;
}

.admin-tampilan-actions{
    display:flex;
    align-items:center;

    gap:10px;
}

.admin-tampilan-button-edit,
.admin-tampilan-button-delete{
    min-width:84px;

    padding:9px 14px;

    border:none;
    border-radius:10px;

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

    text-decoration:none;

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

    cursor:not-allowed;
    opacity:.55;
}
.admin-tampilan-button-edit{
    cursor:pointer;
    opacity:1;
}

.admin-tampilan-button-edit{
    background:#e7f0ff;
    color:#2e67b7;
}

.admin-tampilan-button-delete{
    background:#ffe9e9;
    color:#b64d4d;

    cursor:pointer;
    opacity:1;
}

@media(max-width:900px){

    .admin-tampilan-page{
        padding:20px;
    }

    .admin-tampilan-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:600px){

    .admin-tampilan-page{
        padding:14px;
    }

    .admin-tampilan-header h1{
        font-size:24px;
    }

    .admin-tampilan-card{
        border-radius:16px;
    }

    .admin-tampilan-card-preview{
        min-height:150px;
    }

    .admin-tampilan-card-preview img{
        height:170px;
    }

}
/* =========================
   ADMIN - EDIT TAMPILAN
========================= */

.admin-tampilan-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;
}

.admin-tampilan-back{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 16px;

    border-radius:10px;

    background:#eef4ff;
    color:#2f64b2;

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

    text-decoration:none;
}

.admin-tampilan-edit-card{
    max-width:760px;

    padding:22px;

    background:#ffffff;

    border:1px solid #e1e8f2;
    border-radius:20px;

    box-shadow:
        0 12px 30px rgba(31,55,88,.08);
}

.admin-tampilan-edit-preview{
    min-height:260px;

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

    margin-bottom:24px;

    overflow:hidden;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #f6f9ff 0%,
            #edf4ff 100%
        );
}

.admin-tampilan-edit-preview img{
    display:block;

    max-width:100%;
    max-height:320px;

    width:auto;
    height:auto;

    object-fit:contain;
}

.admin-tampilan-edit-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:10px;

    color:#8b98aa;

    font-size:34px;
}

.admin-tampilan-edit-empty span{
    font-size:13px;
    font-weight:600;
}

.admin-tampilan-form-group{
    margin-bottom:20px;
}

.admin-tampilan-form-group > label{
    display:block;

    margin-bottom:8px;

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

    color:#294264;
}

.admin-tampilan-form-group input[type="file"]{
    width:100%;

    padding:11px;

    border:1px solid #d8e1ec;
    border-radius:10px;

    background:#fafcff;
}

.admin-tampilan-form-group small{
    display:block;

    margin-top:7px;

    font-size:11px;

    color:#8a97a8;
}

.admin-tampilan-checkbox{
    display:flex !important;
    align-items:center;

    gap:8px;

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

    color:#566b85 !important;
}

.admin-tampilan-save{
    padding:11px 18px;

    border:none;
    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            #2f6ecb 0%,
            #2da56e 100%
        );

    color:#ffffff;

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

    cursor:pointer;
}

@media(max-width:600px){

    .admin-tampilan-header{
        flex-direction:column;
    }

    .admin-tampilan-back{
        align-self:flex-start;
    }

    .admin-tampilan-edit-card{
        padding:16px;
    }

    .admin-tampilan-edit-preview{
        min-height:190px;
    }

}
/* =========================
   BACKGROUND READER BUKU
========================= */

body.buku-reader-page{
    margin:0;

    min-height:100vh;

    position:relative;

    overflow:hidden;

    background:#eaf5ff;
}


/* GAMBAR BACKGROUND */
body.buku-reader-page::before{
    content:"";

    position:fixed;

    top:-20px;
    right:-20px;
    bottom:-20px;
    left:-20px;

    background-image:
        var(--buku-reader-background);

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    filter:blur(7px);

    transform:scale(1.04);

    z-index:0;

    pointer-events:none;
}


/* LAPISAN PUTIH TRANSPARAN */
body.buku-reader-page::after{
    content:"";

    position:fixed;

    inset:0;

    background:
        rgba(238,248,255,.35);

    z-index:1;

    pointer-events:none;
}


/* READER HARUS TETAP TAJAM */
body.buku-reader-page .flipbook-reader{
    position:relative;

    z-index:2;

    background:transparent;
}
.materi-pagination{
    width:85%;

    margin:22px auto 8px;

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

    gap:7px;
}

.materi-pagination-number,
.materi-pagination-arrow{
    width:36px;
    height:36px;

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

    border-radius:10px;

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

    border:1px solid rgba(205,222,241,.9);

    color:#2866ad;

    text-decoration:none;

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

    box-shadow:0 5px 14px rgba(23,78,166,.07);
}

.materi-pagination-number.active{
    background:#2588df;
    border-color:#2588df;

    color:white;
}

.materi-pagination-arrow.disabled{
    opacity:.35;
    cursor:default;
}
/* TABLET */
@media (max-width:1100px){

    .materi-list{
        width:92%;

        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

}


/* HP */
@media (max-width:700px){

    .materi-list{
        width:100%;

        grid-template-columns:repeat(2, minmax(0, 1fr));

        gap:9px;
    }
    .materi-card:only-child{
    grid-column:1 / -1;

    width:100%;
    max-width:280px;

    justify-self:center;
}

    .materi-card{
    border-radius:14px;

    display:flex;
    flex-direction:column;
}

    .materi-card-content{
    padding:3px 9px 13px;
}
.materi-mobile-heading{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:58px;
    padding:8px 9px 5px;
}

.materi-mobile-heading h2{
    margin:0;
    padding:0;

    color:#172b4d;
    font-size:13px;
    line-height:1.3;
    font-weight:900;
    text-align:center;
}
.materi-card-content h2{
    display:none;
}

    .materi-meeting{
        padding:4px 7px;

        font-size:9px;
    }

    .materi-description{
        font-size:10px;
        line-height:1.4;
    }

    .materi-meta{
    gap:6px;
    font-size:9px;
    flex-wrap:nowrap;
    white-space:nowrap;
}

    .materi-open-button{
    min-height:34px;
    margin-top:-10px;
    font-size:11px;
    }

    .materi-pagination{
        width:94%;

        margin-top:16px;
    }

    .materi-pagination-number,
    .materi-pagination-arrow{
        width:32px;
        height:32px;

        font-size:12px;
    }
}
.materi-list-panel{
    width:85%;
    margin:0 auto;

    padding:14px;

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

    border:1px solid rgba(255,255,255,.88);
    border-radius:20px;

    box-shadow:0 10px 28px rgba(23,78,166,.10);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-sizing:border-box;

    transform:translateY(-11px);
}
@media (max-width:700px){

    .siswa-area{
        background-size:auto 100vh !important;
        background-position:center top !important;
        background-repeat:no-repeat !important;
        background-attachment:fixed !important;
    }

}
/* =========================
   MATERI - HP KECIL
   mengikuti tata letak halaman BUKU
========================= */

@media (max-width:480px){

    .materi-page{
        padding:18px 14px 40px;
    }
.materi-title-row{
    gap:11px;
    margin:0;
    transform:translate(-37px, -3px);
}

.materi-title-icon{
    width:55px;
    height:55px;
    flex-shrink:0;
    transform:translate(10px, -25px);
}

.materi-title-icon img{
    width:45px;
    height:45px;
}

.materi-title-copy{
    transform:none;
}

.materi-title-row h1{
    font-size:25px;
    line-height:1.2;
}

.materi-title-mapel{
    font-size:14px;
}
.materi-title-quote{
    width:300px;
    max-width:300px;
    margin-left:-25px;
    transform:translateY(-10px);
}

.materi-title-quote p{
    font-size:13px;
    line-height:1.4;
    white-space:nowrap;
}

.materi-quote-line-2{
    margin-left:0;
}
.materi-title-header .siswa-page-back-button{
    padding:4px 6px;
    font-size:12px;
    gap:5px;
    border-radius:15px;
    transform:translate(-105px, -20px);
}
.materi-list-panel{
    width:calc(100% + 25px);
    margin-left:-10px;
    margin-right:-10px;

    background:rgba(255,255,255,.40);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
}
/* ========================================
   VIDEO - HP KECIL
   THUMBNAIL KIRI + INFORMASI KANAN
======================================== */

@media (max-width:480px){
    /* QUOTE VIDEO - HP KECIL */

.video-title-quote{
    width:280px;
    max-width:330px;
    margin-top:4px;
    transform:translate(-20px,1px);
}

.video-title-quote p{
    width:100%;
    margin:0;

    font-size:12px;
    line-height:1.35;
    font-weight:600;

    white-space:normal;
}
.video-list-panel{
    width:calc(100% + 5px);
    margin-left:1px;
    margin-right:-10px;
}
    .video-card{
        width:110%;
        min-height:145px;

        display:grid;
        grid-template-columns:46% 1fr;
        grid-template-areas:
            "thumbnail heading"
            "thumbnail content";

        column-gap:12px;
        row-gap:0;

        align-items:start;
        background:rgba(255,255,255,.55);

    border:1px solid rgba(255,255,255,.80);
    border-radius:16px;

    box-shadow:0 8px 22px rgba(23,78,166,.08);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    padding:2px 10px;
    box-sizing:border-box;
    }

    .video-card-heading{
        grid-area:heading;
    }

    .video-thumbnail{
    grid-area:thumbnail;

    width:120%;
    max-width:150px;

    aspect-ratio:16 / 13;
    height:auto;

    margin:0;

    align-self:start;
transform:translate(1px, 9px);
}

    .video-card-content{
        grid-area:content;
    }
.video-card-heading h2{
    font-size:13px;
}
.video-description{
    transform:translateY(-16px);
}
.video-watch-button{
    padding:6px 10px;
    min-height:0;
    transform:translate(-3px, -8px);
}
.video-list-panel{
    background:transparent;
    border:none;
    box-shadow:none;

    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.video-card-heading,
.video-card-content{
    transform:translateX(8px);
}
.video-card-heading h2{
    text-align:justify;
}

.video-filter-button:nth-child(5),
.video-filter-button:nth-child(6){
    display:none !important;
}
/* PANEL FILTER KHUSUS HP */
.video-filter-panel{
    width:calc(100% - 20px);
    margin-left:auto;
    margin-right:auto;

    padding:7px;

    display:block;

    background:rgba(255,255,255,.62);
    border:1px solid rgba(255,255,255,.82);
    border-radius:16px;

    box-shadow:0 7px 20px rgba(23,78,166,.08);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}


/* 4 TOMBOL DALAM 1 BARIS */
.video-filter-buttons{
    width:100%;

    display:grid;
    grid-template-columns:repeat(4, 1fr);

    gap:5px;
}


/* UKURAN MASING-MASING TOMBOL */
.video-filter-button{
    width:100%;

    padding:7px 2px;

    font-size:11px;
    line-height:1.15;

    text-align:center;
    white-space:nowrap;
}
.video-search{
    width:100%;
    max-width:none;
}
.video-search-box{
    width:100%;
    max-width:none;
     transform:translateY(3px);
}
.video-title-header .siswa-page-back-button{
    height:25px;
    min-height:0;

    padding:0 5px;

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

    gap:4px;
    border-radius:10px;

    box-sizing:border-box;

    transform:translate(-100px,-30px);
}
}
/* =========================================
   HASIL LATIHAN - ANALISIS JAWABAN FINAL
========================================= */

.siswa-hasil-latihan-list{
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
    gap:16px !important;
}

.siswa-hasil-latihan-item{
    position:relative !important;

    min-width:0 !important;
    min-height:125px !important;

    padding:15px !important;

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

    border-radius:18px !important;

    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
}


/* BENAR */

.siswa-hasil-latihan-item.benar{
    background:rgba(220,255,232,.68) !important;
    border:1px solid rgba(34,197,94,.35) !important;
}


/* SALAH */

.siswa-hasil-latihan-item.salah{
    background:rgba(255,225,230,.68) !important;
    border:1px solid rgba(239,68,68,.35) !important;
}


/* NOMOR SOAL */

.siswa-hasil-latihan-number{
    position:absolute !important;

    top:10px !important;
    left:10px !important;

    width:27px !important;
    height:27px !important;

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

    border-radius:8px !important;

    font-size:12px !important;
    font-weight:900 !important;

    z-index:5 !important;
}

.siswa-hasil-latihan-item.benar
.siswa-hasil-latihan-number{
    background:rgba(34,197,94,.16) !important;
    color:#15803d !important;
}

.siswa-hasil-latihan-item.salah
.siswa-hasil-latihan-number{
    background:rgba(239,68,68,.14) !important;
    color:#dc2626 !important;
}


/* POSISI JAWABAN */

.siswa-hasil-latihan-content{
    width:100% !important;
    height:100% !important;

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

    margin:0 !important;
    padding:0 !important;

    text-align:center !important;
}


/* HURUF JAWABAN */

.siswa-hasil-latihan-jawaban-besar{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    font-size:42px !important;
    line-height:1 !important;
    font-weight:900 !important;
}

.siswa-hasil-latihan-item.benar
.siswa-hasil-latihan-jawaban-besar{
    color:#15803d !important;
}

.siswa-hasil-latihan-item.salah
.siswa-hasil-latihan-jawaban-besar{
    color:#dc2626 !important;
}
/* ========================================
   MODAL DETAIL ANALISIS JAWABAN
======================================== */

.siswa-hasil-modal{
    position:fixed;
    inset:0;

    z-index:99999;

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

    padding:20px;
}

.siswa-hasil-modal-overlay{
    position:absolute;
    inset:0;

    background:rgba(15,23,42,.35);

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.siswa-hasil-modal-box{
    position:relative;
    z-index:2;

    width:100%;
    max-width:700px;
    max-height:85vh;

    overflow-y:auto;

    padding:32px;

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

    border:1px solid rgba(255,255,255,.90);
    border-radius:24px;

    box-shadow:
        0 25px 60px rgba(15,23,42,.20);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.siswa-hasil-modal-close{
    position:absolute;

    top:14px;
    right:16px;

    width:36px;
    height:36px;

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

    border:0;
    border-radius:50%;

    background:rgba(15,23,42,.08);

    color:#25324a;

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

    cursor:pointer;
}

.siswa-hasil-modal-header span{
    display:inline-block;

    margin-bottom:12px;

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

    color:#16834b;

    letter-spacing:1px;
}

.siswa-hasil-modal-header h2{
    margin:0 45px 24px 0;

    font-size:24px;
    line-height:1.45;

    color:#25324a;
}

.siswa-hasil-modal-pilihan{
    display:grid;
    gap:10px;
}

.siswa-hasil-modal-pilihan > div{
    display:flex;
    gap:10px;

    padding:13px 15px;

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

    border:1px solid rgba(148,163,184,.25);
    border-radius:13px;

    font-size:16px;
    line-height:1.4;
}

.siswa-hasil-modal-pilihan > div > strong{
    flex:0 0 22px;
}

.siswa-hasil-modal-jawaban{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-top:22px;
}

.siswa-hasil-modal-jawaban > div{
    padding:14px;

    border-radius:14px;

    background:rgba(241,245,249,.80);

    text-align:center;

    color:#475569;
}

.siswa-hasil-modal-jawaban strong{
    display:block;

    margin-top:4px;

    font-size:24px;

    color:#25324a;
}
/* ========================================
   TEKS MODAL DETAIL SOAL
======================================== */

/* TEKS PERTANYAAN */
.siswa-hasil-modal-header h2{
    font-size:18px !important;
    line-height:1.5 !important;
    font-weight:400 !important;
}

/* TEKS PILIHAN A - D */
.siswa-hasil-modal-pilihan div{
    font-size:14px !important;
    line-height:1.4 !important;
    font-weight:400 !important;
}

/* HURUF A. B. C. D. tetap sedikit tegas */
.siswa-hasil-modal-pilihan div > strong{
    font-weight:600 !important;
}

/* TEKS JAWABANMU / JAWABAN BENAR */
.siswa-hasil-modal-jawaban{
    font-size:14px !important;
    font-weight:400 !important;
}

/* HURUF JAWABANNYA */
.siswa-hasil-modal-jawaban strong{
    font-size:20px !important;
    font-weight:600 !important;
}
/* PERTANYAAN - PERTAHANKAN FORMAT CKEDITOR */

.siswa-hasil-modal-pertanyaan{
    font-size:14px;
    line-height:1.55;
    font-weight:400;
    color:#25324a;
}

.siswa-hasil-modal-pertanyaan p{
    margin:0 0 10px;
}

.siswa-hasil-modal-pertanyaan strong,
.siswa-hasil-modal-pertanyaan b{
    font-weight:700;
}

.siswa-hasil-modal-pertanyaan em,
.siswa-hasil-modal-pertanyaan i{
    font-style:italic;
}

.siswa-hasil-modal-pertanyaan u{
    text-decoration:underline;
}
/* =========================================================
   ADMIN - STIMULUS / BACAAN SOAL
========================================================= */

.admin-stimulus-page{
    width:100%;
    max-width:1260px;
    margin:0 auto;
    padding:-10px 28px 70px;
}


/* HEADER */

.admin-stimulus-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:32px;
}

.admin-stimulus-label{
    display:block;
    margin-bottom:8px;

    font-size:14px;
    font-weight:800;
    letter-spacing:2px;

    color:#16a36a;
}

.admin-stimulus-header h1{
    margin:0 0 6px;

    font-size:30px;
    line-height:1.1;
    font-weight:800;

    color:#16a36a;
}

.admin-stimulus-header p{
    margin:0;

    font-size:17px;
    color:#14213d;
}


/* TOMBOL HEADER */

.admin-stimulus-header-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

.admin-stimulus-back-button,
.admin-stimulus-add-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:52px;
    padding:0 22px;

    border-radius:14px;

    font-size:15px;
    font-weight:700;

    text-decoration:none;

    transition:.2s ease;
}

.admin-stimulus-back-button{
    border:1px solid #cbd5e1;
    background:#ffffff;
    color:#334155;
}

.admin-stimulus-add-button{
    border:1px solid #22a66f;
    background:#22a66f;
    color:#ffffff;

    box-shadow:0 8px 18px rgba(34,166,111,.16);
}


/* PESAN BERHASIL */

.admin-stimulus-success{
    margin-bottom:20px;
    padding:14px 18px;

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

    background:#f0fdf4;
    color:#15803d;

    font-weight:700;
}


/* DAFTAR */

.admin-stimulus-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}


/* CARD */

.admin-stimulus-card{
    display:grid;
    grid-template-columns:70px minmax(0,1fr) 120px;
    align-items:center;
    gap:24px;

    padding:24px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:22px;

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


/* NOMOR */

.admin-stimulus-card-number{
    width:58px;
    height:58px;

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

    border-radius:16px;

    background:#ecfdf5;
    border:1px solid #bbf7d0;

    color:#15803d;

    font-size:22px;
    font-weight:800;
}


/* ISI CARD */

.admin-stimulus-card-content{
    min-width:0;
}

.admin-stimulus-card-content h2{
    margin:0 0 10px;

    font-size:22px;
    line-height:1.3;
    font-weight:800;

    color:#14213d;
}

.admin-stimulus-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-bottom:12px;
}

.admin-stimulus-meta span{
    display:inline-flex;
    align-items:center;

    padding:5px 10px;

    border-radius:999px;

    background:#f1f5f9;

    color:#475569;

    font-size:13px;
    font-weight:700;
}

.admin-stimulus-preview{
    max-width:850px;

    color:#64748b;

    font-size:15px;
    line-height:1.6;
}


/* TOMBOL EDIT & HAPUS */

.admin-stimulus-card-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.admin-stimulus-card-actions form{
    margin:0;
}

.admin-stimulus-edit-button,
.admin-stimulus-delete-button{
    width:100%;
    min-height:46px;

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

    box-sizing:border-box;

    border-radius:12px;

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

    text-decoration:none;
    cursor:pointer;
}

.admin-stimulus-edit-button{
    border:1px solid #cbd5e1;

    background:#ffffff;
    color:#334155;
}

.admin-stimulus-delete-button{
    border:1px solid #fecaca;

    background:#fff5f5;
    color:#dc2626;
}


/* KOSONG */

.admin-stimulus-empty{
    padding:35px;

    text-align:center;

    background:#ffffff;

    border:1px dashed #cbd5e1;
    border-radius:20px;

    color:#64748b;
}

.admin-stimulus-empty strong{
    display:block;
    margin-bottom:6px;

    font-size:18px;
    color:#334155;
}


/* HP */

@media (max-width:768px){

    .admin-stimulus-page{
        padding:28px 16px 50px;
    }

    .admin-stimulus-header{
        align-items:stretch;
        flex-direction:column;
        gap:18px;
    }

    .admin-stimulus-header h1{
        font-size:30px;
    }

    .admin-stimulus-header-actions{
        width:100%;
    }

    .admin-stimulus-back-button,
    .admin-stimulus-add-button{
        flex:1;
        padding:0 12px;
        font-size:13px;
    }

    .admin-stimulus-card{
        grid-template-columns:48px minmax(0,1fr);
        gap:14px;

        padding:18px;
    }

    .admin-stimulus-card-number{
        width:46px;
        height:46px;

        border-radius:13px;
        font-size:18px;
    }

    .admin-stimulus-card-content h2{
        font-size:18px;
    }

    .admin-stimulus-preview{
        font-size:14px;
    }

    .admin-stimulus-card-actions{
        grid-column:1 / -1;

        flex-direction:row;

        padding-top:4px;
    }

    .admin-stimulus-card-actions > *{
        flex:1;
    }
}
/* =========================================================
   ADMIN - FORM TAMBAH / EDIT STIMULUS
========================================================= */

.admin-stimulus-form-page{
    width:100%;
    max-width:1260px;
    margin:0 auto;
    padding:-10px 28px 70px;
}


/* HEADER */

.admin-stimulus-form-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;

    margin-bottom:28px;
}

.admin-stimulus-form-header h1{
    margin:0 0 5px;

    font-size:34px;
    line-height:1.15;
    font-weight:800;

        color:#16a36a;
}

.admin-stimulus-form-header p{
    margin:0;

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

    color:#14213d;
}

.admin-stimulus-form-header .admin-stimulus-label{
    display:block;

    margin-bottom:8px;

    font-size:14px;
    font-weight:800;
    letter-spacing:2px;

    color:#16a36a;
}


/* TOMBOL KEMBALI */

.admin-stimulus-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:52px;
    padding:0 22px;

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

    background:#ffffff;
    color:#334155;

    font-size:15px;
    font-weight:700;

    text-decoration:none;

    transition:.2s ease;
}

.admin-stimulus-back-button:hover{
    background:#f8fafc;
    transform:translateY(-1px);
}


/* FORM MENJADI CARD */

.admin-stimulus-form{
    padding:28px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:22px;

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


/* GROUP */

.admin-stimulus-form-group{
    margin-bottom:24px;
}

.admin-stimulus-form-group > label:not(.admin-stimulus-checkbox){
    display:block;

    margin-bottom:8px;

    font-size:15px;
    font-weight:800;

    color:#1e293b;
}


/* INPUT JUDUL */

.admin-stimulus-form-group input[type="text"]{
    width:100%;
    min-height:50px;

    box-sizing:border-box;

    padding:0 15px;

    border:1px solid #cbd5e1;
    border-radius:12px;

    background:#ffffff;
    color:#1e293b;

    font-size:15px;

    outline:none;

    transition:.2s ease;
}

.admin-stimulus-form-group input[type="text"]:focus{
    border-color:#22a66f;

    box-shadow:0 0 0 3px rgba(34,166,111,.10);
}


/* KETERANGAN KECIL */

.admin-stimulus-form-group small{
    display:block;

    margin-top:7px;

    color:#64748b;

    font-size:13px;
    line-height:1.5;
}


/* CKEDITOR */

.admin-stimulus-form .ck-editor{
    width:100%;
}

.admin-stimulus-form .ck.ck-toolbar{
    border-color:#cbd5e1;

    border-radius:12px 12px 0 0;
}

.admin-stimulus-form .ck.ck-editor__main > .ck-editor__editable{
    min-height:260px;

    border-color:#cbd5e1;

    border-radius:0 0 12px 12px;

    font-size:15px;
    line-height:1.7;

    color:#1e293b;
}

.admin-stimulus-form
.ck.ck-editor__main > .ck-editor__editable.ck-focused{
    border-color:#22a66f;

    box-shadow:0 0 0 3px rgba(34,166,111,.08);
}


/* CHECKBOX AKTIF */

.admin-stimulus-checkbox{
    display:inline-flex;
    align-items:center;
    gap:10px;

    cursor:pointer;

    font-size:15px;
    font-weight:700;

    color:#334155;
}

.admin-stimulus-checkbox input{
    width:18px;
    height:18px;

    accent-color:#22a66f;
}


/* GARIS + TOMBOL BAWAH */

.admin-stimulus-form-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;

    margin-top:8px;
    padding-top:22px;

    border-top:1px solid #e2e8f0;
}

.admin-stimulus-cancel-button,
.admin-stimulus-save-button{
    min-height:50px;

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

    box-sizing:border-box;

    padding:0 24px;

    border-radius:13px;

    font-size:15px;
    font-weight:800;

    text-decoration:none;

    cursor:pointer;
}

.admin-stimulus-cancel-button{
    border:1px solid #cbd5e1;

    background:#ffffff;
    color:#334155;
}

.admin-stimulus-save-button{
    border:1px solid #22a66f;

    background:#22a66f;
    color:#ffffff;

    box-shadow:0 8px 18px rgba(34,166,111,.16);
}

.admin-stimulus-save-button:hover{
    transform:translateY(-1px);
}


/* ERROR */

.admin-stimulus-error{
    margin-bottom:20px;
    padding:16px 18px;

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

    background:#fff5f5;
    color:#b91c1c;
}

.admin-stimulus-error ul{
    margin:8px 0 0;
    padding-left:20px;
}


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

@media (max-width:768px){

    .admin-stimulus-form-page{
        padding:20px 16px 50px;
    }

    .admin-stimulus-form-header{
        flex-direction:column;
        align-items:stretch;

        gap:16px;
    }

    .admin-stimulus-form-header h1{
        font-size:28px;
    }

    .admin-stimulus-back-button{
        align-self:flex-start;
    }

    .admin-stimulus-form{
        padding:18px;

        border-radius:18px;
    }

    .admin-stimulus-form
    .ck.ck-editor__main > .ck-editor__editable{
        min-height:220px;
    }

    .admin-stimulus-form-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .admin-stimulus-cancel-button,
    .admin-stimulus-save-button{
        width:100%;
        padding:0 12px;
    }
}
/* ========================================
   ADMIN - DROPDOWN PENGATURAN
======================================== */

.kp-admin-settings-menu{
    width:100%;
}

.kp-admin-settings-toggle{
    width:100%;
    border:0;
    background:transparent;
    cursor:pointer;
    font-family:inherit;
    text-align:left;

    font-size:12px !important;
}

.kp-admin-settings-text{
    flex:1;
    width:auto !important;
    text-align:left !important;
    font-size:14px !important;
    font-weight:600;
}

.kp-admin-settings-arrow{
    width:auto !important;
    margin-left:auto;
    font-size:11px !important;
    transition:transform .25s ease;
}


/* SUBMENU */

.kp-admin-settings-submenu{
    display:none;
    flex-direction:column;

    margin-top:4px;
    padding-left:35px;
    padding-right:10px;

    gap:3px;
}


/* MUNCUL SAAT DIBUKA */

.kp-admin-settings-menu.open .kp-admin-settings-submenu{
    display:flex;
}


/* PUTAR PANAH */

.kp-admin-settings-menu.open .kp-admin-settings-arrow{
    transform:rotate(180deg);
}


/* ITEM SUBMENU */

.kp-admin-settings-subitem{
    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 12px;

    border-radius:12px;

    color:#64748b;
    text-decoration:none;

    font-size:12px;
    font-weight:700;

    transition:.2s ease;
}

.kp-admin-settings-subitem:hover{
    background:#f1f5f9;
    color:#0f766e;
}


/* SUBMENU YANG SEDANG AKTIF */

.kp-admin-settings-subitem.active{
    background:#e7f8f1;
    color:#15805f;
}
/* =========================================================
   ADMIN - DATA GURU
========================================================= */

.admin-guru-page{
    width:100%;
    max-width:1180px;
    margin:0 auto;
}


/* HEADER */

.admin-guru-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:28px;
}

.admin-guru-label{
    display:block;
    margin-bottom:7px;

    color:#2f74c8;

    font-size:11px;
    font-weight:800;
    letter-spacing:1.2px;
}

.admin-guru-header h1{
    margin:0 0 7px;

    color:#17365f;

    font-size:28px;
    line-height:1.2;
}

.admin-guru-header p{
    margin:0;

    color:#74849a;

    font-size:13px;
    line-height:1.6;
}


/* TOMBOL TAMBAH */

.admin-guru-add-button{
    flex:0 0 auto;

    min-height:42px;
    padding:0 18px;

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

    border-radius:11px;

    background:#1769c2;
    color:#ffffff;

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

    box-shadow:0 7px 18px rgba(23,105,194,.18);

    transition:.2s ease;
}

.admin-guru-add-button:hover{
    transform:translateY(-2px);

    background:#125aa8;

    box-shadow:0 10px 22px rgba(23,105,194,.24);
}


/* DAFTAR GURU */

.admin-guru-list{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
}


/* CARD GURU */

.admin-guru-card{
    display:grid;
    grid-template-columns:280px minmax(0,1fr) 190px;
    align-items:center;
    gap:24px;

    padding:20px 22px;

    border:1px solid #e1eaf4;
    border-radius:16px;

    background:#ffffff;

    box-shadow:0 6px 18px rgba(32,70,110,.055);
}


/* IDENTITAS GURU */

.admin-guru-info{
    min-width:0;

    display:flex;
    align-items:center;
    gap:14px;
}

.admin-guru-avatar{
    width:48px;
    height:48px;
    flex:0 0 48px;

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

    border-radius:14px;

    background:#eaf3ff;
    color:#1769c2;

    font-size:19px;
    font-weight:900;
}

.admin-guru-identity{
    min-width:0;
}

.admin-guru-identity h3{
    margin:0 0 5px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#263b59;

    font-size:15px;
}

.admin-guru-identity p{
    margin:0 0 5px;

    color:#8996a8;

    font-size:11px;
}

.admin-guru-username{
    color:#527091;

    font-size:12px;
    font-weight:700;
}


/* PENUGASAN MENGAJAR */

.admin-guru-mengajar{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:10px;
}

.admin-guru-mapel{
    display:flex;
    align-items:center;
    gap:12px;
}

.admin-guru-mapel strong{
    min-width:115px;

    color:#344d6d;

    font-size:12px;
}

.admin-guru-kelas-list{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.admin-guru-kelas{
    min-width:35px;
    min-height:27px;
    padding:0 8px;

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

    border-radius:8px;

    background:#eef5ff;
    color:#1769c2;

    font-size:11px;
    font-weight:800;
}

.admin-guru-belum-mengajar{
    color:#9aa7b7;

    font-size:12px;
}


/* STATUS DAN AKSI */

.admin-guru-footer{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
}

.admin-guru-status{
    padding:6px 10px;

    border-radius:999px;

    font-size:10px;
    font-weight:800;
}

.admin-guru-status.is-active{
    background:#eaf8ef;
    color:#24824a;
}

.admin-guru-status.is-inactive{
    background:#fff0f0;
    color:#c34b4b;
}

.admin-guru-actions{
    display:flex;
    align-items:center;
    gap:7px;
}

.admin-guru-actions form{
    margin:0;
}

.admin-guru-actions a,
.admin-guru-actions button{
    min-height:34px;
    padding:0 12px;

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

    border:1px solid #dce5ef;
    border-radius:9px;

    background:#ffffff;
    color:#536b87;

    font-family:inherit;
    font-size:11px;
    font-weight:700;

    cursor:pointer;

    transition:.2s ease;
}

.admin-guru-actions a:hover{
    border-color:#bcd3ec;

    background:#f2f7fd;
    color:#1769c2;
}

.admin-guru-actions button:hover{
    border-color:#f1c6c6;

    background:#fff4f4;
    color:#c34545;
}


/* BELUM ADA DATA */

.admin-guru-empty{
    padding:60px 25px;

    border:1px dashed #d5e1ee;
    border-radius:18px;

    background:#ffffff;

    text-align:center;
}

.admin-guru-empty-icon{
    margin-bottom:13px;

    font-size:38px;
}

.admin-guru-empty h3{
    margin:0 0 7px;

    color:#314b6c;

    font-size:17px;
}

.admin-guru-empty p{
    max-width:430px;
    margin:0 auto;

    color:#8795a8;

    font-size:13px;
    line-height:1.6;
}


/* =========================================================
   ADMIN - DATA GURU - HP
   KHUSUS LAYAR 480px KE BAWAH
========================================================= */

@media (max-width:480px){

    .admin-guru-page{
        width:100%;
    }

    .admin-guru-header{
        align-items:stretch;
        flex-direction:column;

        gap:17px;
        margin-bottom:20px;
    }

    .admin-guru-header h1{
        font-size:23px;
    }

    .admin-guru-header p{
        font-size:12px;
    }

    .admin-guru-add-button{
        width:100%;
        min-height:44px;
    }

    .admin-guru-card{
        grid-template-columns:1fr;
        gap:18px;

        padding:18px;

        border-radius:15px;
    }

    .admin-guru-avatar{
        width:46px;
        height:46px;
        flex-basis:46px;
    }

    .admin-guru-identity h3{
        white-space:normal;
    }

    .admin-guru-mapel{
        align-items:flex-start;
        flex-direction:column;
        gap:7px;

        padding-top:12px;

        border-top:1px solid #edf2f7;
    }

    .admin-guru-mapel strong{
        min-width:0;
    }

    .admin-guru-footer{
        align-items:stretch;
        justify-content:space-between;

        padding-top:14px;

        border-top:1px solid #edf2f7;
    }

    .admin-guru-actions{
        margin-left:auto;
    }

    .admin-guru-actions a,
    .admin-guru-actions button{
        min-height:36px;
    }

    .admin-guru-empty{
        padding:45px 20px;
    }

}
/* =========================================================
   ADMIN - FORM GURU
   TAMBAH & EDIT GURU
========================================================= */

.admin-guru-form-page{
    width:100%;
    max-width:1180px;
    margin:0 auto;
}


/* HEADER */

.admin-guru-form-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;

    margin-bottom:24px;
}

.admin-guru-form-header h1{
    margin:0 0 7px;

    color:#17365f;

    font-size:28px;
    line-height:1.2;
}

.admin-guru-form-header p{
    margin:0;

    color:#74849a;

    font-size:13px;
    line-height:1.6;
}

.admin-guru-form-back{
    flex:0 0 auto;

    min-height:40px;
    padding:0 15px;

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

    border:1px solid #dce6f1;
    border-radius:10px;

    background:#ffffff;
    color:#526c8a;

    font-size:12px;
    font-weight:700;

    transition:.2s ease;
}

.admin-guru-form-back:hover{
    background:#f2f7fd;
    border-color:#bfd3e9;
    color:#1769c2;
}


/* FORM */

.admin-guru-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}


/* CARD */

.admin-guru-form-card{
    padding:24px;

    border:1px solid #e1eaf4;
    border-radius:17px;

    background:#ffffff;

    box-shadow:0 6px 18px rgba(32,70,110,.05);
}

.admin-guru-form-card h2{
    margin:0 0 5px;

    color:#234469;

    font-size:18px;
}

.admin-guru-form-card > p{
    margin:0 0 22px;

    color:#8795a8;

    font-size:12px;
    line-height:1.6;
}


/* FIELD */

.admin-guru-field{
    margin-bottom:18px;
}

.admin-guru-field:last-child{
    margin-bottom:0;
}

.admin-guru-field label{
    display:block;

    margin-bottom:7px;

    color:#405a79;

    font-size:12px;
    font-weight:800;
}

.admin-guru-field input[type="text"],
.admin-guru-field input[type="password"]{
    width:100%;
    min-height:43px;

    padding:0 13px;

    border:1px solid #d8e2ed;
    border-radius:10px;

    background:#fbfdff;
    color:#2e4058;

    font-family:inherit;
    font-size:13px;

    outline:none;

    transition:.2s ease;
}

.admin-guru-field input[type="text"]:focus,
.admin-guru-field input[type="password"]:focus{
    border-color:#6ca7e6;

    background:#ffffff;

    box-shadow:0 0 0 3px rgba(23,105,194,.08);
}

.admin-guru-field input::placeholder{
    color:#a3adba;
}


/* STATUS AKUN */

.admin-guru-status-option{
    display:flex;
    align-items:flex-start;
    gap:10px;

    padding:14px 15px;

    border:1px solid #e1e9f2;
    border-radius:11px;

    background:#f8fbff;
}

.admin-guru-status-option input{
    margin-top:2px;
}

.admin-guru-status-option label{
    margin:0;

    color:#3d5878;

    font-size:12px;
    font-weight:800;

    cursor:pointer;
}

.admin-guru-status-help{
    display:block;

    margin-top:4px;

    color:#8a98a9;

    font-size:11px;
    font-weight:400;
}


/* =========================================================
   PENUGASAN MENGAJAR
========================================================= */

.admin-guru-assignment-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
}

.admin-guru-assignment-item{
    padding:16px;

    border:1px solid #e3ebf4;
    border-radius:13px;

    background:#fbfdff;
}

.admin-guru-assignment-item h3{
    margin:0 0 12px;

    color:#365372;

    font-size:13px;
}

.admin-guru-class-list{
    display:grid;
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:7px;
}

.admin-guru-class-option{
    min-height:34px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    border:1px solid #dce6f0;
    border-radius:8px;

    background:#ffffff;

    color:#58708c;

    font-size:11px;
    font-weight:700;

    cursor:pointer;
}

.admin-guru-class-option:hover{
    border-color:#a9c9ea;
    background:#f2f7fd;
}

.admin-guru-class-option input{
    margin:0;
}


/* =========================================================
   TOMBOL BAWAH
========================================================= */

.admin-guru-form-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
}

.admin-guru-form-actions a,
.admin-guru-form-actions button{
    min-height:42px;
    padding:0 18px;

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

    border-radius:10px;

    font-family:inherit;
    font-size:12px;
    font-weight:800;

    cursor:pointer;
}

.admin-guru-form-actions a{
    border:1px solid #dce5ef;

    background:#ffffff;
    color:#60758d;
}

.admin-guru-form-actions button{
    border:0;

    background:#1769c2;
    color:#ffffff;

    box-shadow:0 6px 16px rgba(23,105,194,.18);
}


/* ERROR */

.admin-guru-alert-error{
    padding:14px 17px;

    border:1px solid #f0caca;
    border-radius:11px;

    background:#fff5f5;
    color:#a94646;

    font-size:12px;
}

.admin-guru-alert-error ul{
    margin:7px 0 0;
    padding-left:18px;
}


/* =========================================================
   ADMIN - FORM GURU - HP
   KHUSUS LAYAR 480px KE BAWAH
========================================================= */

@media (max-width:480px){

    .admin-guru-form-page{
        width:100%;
    }

    .admin-guru-form-header{
        flex-direction:column;
        gap:15px;

        margin-bottom:20px;
    }

    .admin-guru-form-header h1{
        font-size:23px;
    }

    .admin-guru-form-header p{
        font-size:12px;
    }

    .admin-guru-form-back{
        align-self:flex-start;
    }

    .admin-guru-form-card{
        padding:18px 15px;

        border-radius:14px;
    }

    .admin-guru-form-card h2{
        font-size:17px;
    }

    .admin-guru-assignment-list{
        grid-template-columns:1fr;
        gap:11px;
    }

    .admin-guru-assignment-item{
        padding:14px 12px;
    }

    .admin-guru-class-list{
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:7px;
    }

    .admin-guru-class-option{
        min-height:36px;
    }

    .admin-guru-form-actions{
        flex-direction:column-reverse;
        align-items:stretch;
    }

    .admin-guru-form-actions a,
    .admin-guru-form-actions button{
        width:100%;
        min-height:44px;
    }

}
/* =========================================================
   ADMIN FORM GURU - PENYESUAIAN DENGAN BLADE
========================================================= */


/* TOMBOL KEMBALI */

.admin-guru-back-button{
    flex:0 0 auto;

    min-height:40px;
    padding:0 15px;

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

    border:1px solid #dce6f1;
    border-radius:10px;

    background:#ffffff;
    color:#526c8a;

    font-size:12px;
    font-weight:700;

    transition:.2s ease;
}

.admin-guru-back-button:hover{
    background:#f2f7fd;
    border-color:#bfd3e9;
    color:#1769c2;
}


/* HEADER DI DALAM CARD */

.admin-guru-form-card-header{
    margin-bottom:22px;
}

.admin-guru-form-card-header h2{
    margin:0 0 6px;

    color:#234469;

    font-size:18px;
}

.admin-guru-form-card-header p{
    margin:0;

    color:#8795a8;

    font-size:12px;
    line-height:1.6;
}


/* =========================================================
   DATA AKUN GURU
========================================================= */

.admin-guru-form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:17px 20px;
}

.admin-guru-form-group{
    min-width:0;
}

.admin-guru-form-group label{
    display:block;

    margin-bottom:7px;

    color:#405a79;

    font-size:12px;
    font-weight:800;
}

.admin-guru-form-group label > span{
    color:#d14f4f;
}

.admin-guru-form-group input{
    box-sizing:border-box;

    width:100%;
    min-height:43px;
    padding:0 13px;

    border:1px solid #d8e2ed;
    border-radius:10px;

    background:#fbfdff;
    color:#2e4058;

    font-family:inherit;
    font-size:13px;

    outline:none;

    transition:.2s ease;
}

.admin-guru-form-group input:focus{
    border-color:#6ca7e6;
    background:#ffffff;

    box-shadow:0 0 0 3px rgba(23,105,194,.08);
}

.admin-guru-form-group input::placeholder{
    color:#a3adba;
}


/* STATUS AKUN */

.admin-guru-form-status{
    margin-top:20px;
    padding:14px 15px;

    border:1px solid #e1e9f2;
    border-radius:11px;

    background:#f8fbff;
}

.admin-guru-form-status label{
    display:flex;
    align-items:center;
    gap:8px;

    color:#3d5878;

    font-size:12px;
    font-weight:800;

    cursor:pointer;
}

.admin-guru-form-status input{
    width:16px;
    height:16px;
    margin:0;
}

.admin-guru-form-status p{
    margin:6px 0 0 24px;

    color:#8a98a9;

    font-size:11px;
    line-height:1.5;
}


/* =========================================================
   PENUGASAN MENGAJAR
========================================================= */

.admin-guru-penugasan-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
}

.admin-guru-penugasan-mapel{
    min-width:0;
    padding:16px;

    border:1px solid #e3ebf4;
    border-radius:13px;

    background:#fbfdff;
}

.admin-guru-penugasan-mapel-title{
    margin-bottom:12px;

    color:#365372;

    font-size:13px;
    font-weight:800;
}

.admin-guru-penugasan-kelas{
    display:grid;
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:7px;
}


/* PILIHAN KELAS */

.admin-guru-kelas-option{
    box-sizing:border-box;

    min-width:0;
    min-height:35px;
    padding:5px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    border:1px solid #dce6f0;
    border-radius:8px;

    background:#ffffff;
    color:#58708c;

    font-size:11px;
    font-weight:700;

    cursor:pointer;

    transition:.15s ease;
}

.admin-guru-kelas-option:hover{
    border-color:#a9c9ea;
    background:#f2f7fd;
}

.admin-guru-kelas-option input{
    width:14px;
    height:14px;
    margin:0;

    cursor:pointer;
}

.admin-guru-kelas-option span{
    line-height:1;
}


/* =========================================================
   TOMBOL BAWAH
========================================================= */

.admin-guru-cancel-button{
    border:1px solid #dce5ef !important;

    background:#ffffff !important;
    color:#60758d !important;
}

.admin-guru-save-button{
    border:0 !important;

    background:#1769c2 !important;
    color:#ffffff !important;

    box-shadow:0 6px 16px rgba(23,105,194,.18);
}


/* =========================================================
   ADMIN FORM GURU - HP
   KHUSUS 480px KE BAWAH
========================================================= */

@media (max-width:480px){

    .admin-guru-form-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .admin-guru-form-group input{
        min-height:44px;
        font-size:14px;
    }

    .admin-guru-form-status{
        margin-top:17px;
    }

    .admin-guru-form-status p{
        margin-left:24px;
    }

    .admin-guru-penugasan-list{
        grid-template-columns:1fr;
        gap:11px;
    }

    .admin-guru-penugasan-mapel{
        padding:14px 12px;
    }

    .admin-guru-penugasan-kelas{
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:7px;
    }

    .admin-guru-kelas-option{
        min-height:38px;
        font-size:12px;
    }

}
/* =========================================================
   ADMIN - FOTO GURU
========================================================= */

.admin-guru-avatar{
    overflow:hidden;
}

.admin-guru-avatar-image{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    border-radius:inherit;
}