/* =====================================
   HOME GAME
===================================== */

.home-wrapper{

    min-height:100vh;

    background:url('../img/bg-home.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    position:relative;

    display:flex;
    flex-direction:column;

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

/* =====================================
   TITLE
===================================== */

.hero-title{

    position:absolute;

    top:40px;
    left:50%;

    transform:translateX(-50%);

    width:100%;

    text-align:center;

    z-index:20;
}

.hero-title h1{

    display:flex;

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

    gap:20px;

    color:#fff;

    font-size:58px;

    font-weight:900;

    text-shadow:
        0 4px 10px rgba(0,0,0,.4);

    margin-bottom:1px;
}

.hero-title h2{

    color:#FFD54F;

    font-size:34px;

    font-weight:800;

    margin-bottom:1px;

    text-shadow:
        0 3px 10px rgba(0,0,0,.45);
}

.hero-title p{

    color:#ffffff;

    font-size:20px;

    font-weight:600;

    text-shadow:
        0 2px 8px rgba(0,0,0,.45);
}

.title-logo{

    width:70px;
    height:70px;

    object-fit:contain;

    position:relative;

    top:0;

    filter:drop-shadow(
        0 4px 8px rgba(0,0,0,.3)
    );
}

/* =====================================
   MENU PANEL
===================================== */

.menu-panel{

    width:550px;
    max-width:95%;

    margin-top:190px;

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

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

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

    border-radius:25px;

    padding:35px;

    text-align:center;

    box-shadow:
        0 15px 40px rgba(0,0,0,.25);
}

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

.btn-play{
    background:#4CAF50;
}

.btn-play:hover{
    background:#2E7D32;
}

.btn-materi{
    background:#2196F3;
}

.btn-materi:hover{
    background:#1565C0;
}

.btn-prestasi{
    background:#FF9800;
}

.btn-prestasi:hover{
    background:#EF6C00;
}

.btn-about{
    background:#9C27B0;
}

.btn-about:hover{
    background:#6A1B9A;
}
/* ==========================================
   MODAL CUSTOM
========================================== */

.custom-modal{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.55);

    z-index:9999;

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

    overflow-y:auto;
}

/* ==========================================
   MODAL GLASS
========================================== */

.modal-box{

    width:90%;
    max-width:450px;

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

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

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

    border-radius:25px;

    overflow:hidden;

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

    animation:zoomIn .3s ease;
    margin:20px auto;
}

/* ==========================================
   MODAL LEADERBOARD
========================================== */

.leaderboard-modal{

    width:95%;
    max-width:700px;
}

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

.modal-header-custom{

    background:rgba(76,175,80,.9);

    color:#fff;

    font-size:24px;

    font-weight:bold;

    text-align:center;

    padding:18px;
}

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

.modal-body-custom{

    padding:25px;
}

.modal-body-custom input,
.modal-body-custom select{

    width:100%;

    padding:12px;

    margin-bottom:15px;

    border:none;

    border-radius:10px;

    font-size:16px;

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

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

.modal-footer-custom{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    padding:15px 20px;

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

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

.btn-cancel,
.btn-close-modal{

    border:none;

    background:#f44336;

    color:#fff;

    padding:10px 20px;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;
}

.btn-cancel:hover,
.btn-close-modal:hover{

    background:#d32f2f;
}

.btn-start{

    border:none;

    background:#4CAF50;

    color:#fff;

    padding:10px 20px;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;
}

.btn-start:hover{

    background:#2E7D32;
}

/* ==========================================
   TOTAL PAHLAWAN
========================================== */

.total-pahlawan{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    padding:15px;

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

    border-bottom:1px solid rgba(0,0,0,.08);

    flex-wrap:wrap;
}

.text-total{

    color:#2E7D32;

    font-weight:700;
}

.counter-pahlawan{

    background:#FF9800;

    color:#fff;

    width:40px;
    height:40px;

    border-radius:50%;

    display:flex;

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

    font-size:20px;

    font-weight:bold;

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

.text-siswa{

    color:#444;

    font-weight:600;
}

.icon-left,
.icon-right{

    font-size:20px;
}

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

.leaderboard-body{

    max-height:400px;

    overflow-y:auto;

    padding:15px;
}

.leaderboard-table{

    width:100%;

    border-collapse:collapse;
}

.leaderboard-table th{

    background:#4CAF50;

    color:#fff;

    padding:12px;

    position:sticky;

    top:0;

    z-index:1;
}

.leaderboard-table td{

    padding:12px;

    text-align:center;

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

    border-bottom:1px solid #eee;
}

.leaderboard-table tr:nth-child(even) td{

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

.leaderboard-table tr:hover td{

    background:#E8F5E9;
}

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

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);
    }

    to{

        opacity:1;

        transform:scale(1);
    }
}

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

@media(max-width:768px){

    .modal-box{

        width:95%;
    }

    .leaderboard-table th,
    .leaderboard-table td{

        padding:8px;

        font-size:13px;
    }

    .modal-header-custom{

        font-size:18px;
    }

    .total-pahlawan{

        font-size:14px;
    }

    .counter-pahlawan{

        width:35px;
        height:35px;

        font-size:16px;
    }
}

/* ==========================================
   MODAL MATERI ADIWIYATA
========================================== */

.materi-modal{

    width:95%;
    max-width:750px;

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

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

    border-radius:25px;

    overflow:hidden;

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

    animation:zoomIn .3s ease;

    margin:20px auto;
}

/* HEADER */

.materi-modal .modal-header-custom{

    background:rgba(76,175,80,.85);

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:28px;

    font-weight:bold;

    text-align:center;

    padding:20px;
}

/* TAB MENU */

.materi-tabs{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:15px;

    flex-wrap:wrap;

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

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

.materi-tabs button{

    border:none;

    background:rgba(76,175,80,.9);

    color:#fff;

    padding:10px 18px;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    transition:.3s;
}

.materi-tabs button:hover{

    transform:translateY(-2px);

    background:#2E7D32;
}

/* CONTENT */

.materi-content{

    padding:35px 25px;

    text-align:center;

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

.materi-item{

    min-height:250px;
}

/* ICON */

.materi-icon{

    font-size:90px;

    margin-bottom:15px;

    animation:zoomMateri 1s infinite alternate;
}

/* JUDUL */

.materi-item h3{

    color:#fff;

    font-size:28px;

    font-weight:800;

    text-shadow:
        0 2px 8px rgba(0,0,0,.3);

    margin-bottom:15px;
}

/* DESKRIPSI */

.materi-item p{

    color:#fff;

    font-size:20px;

    line-height:1.8;

    max-width:550px;

    margin:auto;

    text-shadow:
        0 2px 8px rgba(0,0,0,.3);
}

/* FOOTER */

.materi-modal .modal-footer-custom{

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

    padding:20px;

    text-align:center;
}

.btn-close-modal{

    border:none;

    background:#f44336;

    color:#fff;

    padding:12px 25px;

    border-radius:12px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;
}

.btn-close-modal:hover{

    background:#d32f2f;
}

/* ANIMASI */

@keyframes zoomMateri{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.08);
    }
}

/* MOBILE */

@media(max-width:768px){

    .materi-modal{

        width:95%;
    }

    .materi-modal .modal-header-custom{

        font-size:20px;
    }

    .materi-tabs{

        gap:6px;
    }

    .materi-tabs button{

        font-size:13px;

        padding:8px 12px;
    }

    .materi-icon{

        font-size:65px;
    }

    .materi-item h3{

        font-size:22px;
    }

    .materi-item p{

        font-size:16px;
    }
}

/* ==========================================
   MODAL SEKOLAH
========================================== */

.modal-logo{

    width:45px;
    height:45px;

    object-fit:contain;

    vertical-align:middle;

    margin:0 10px;
}

.profil-sekolah{

    padding:30px;

    text-align:center;

    color:#fff;
}

.profil-sekolah h2{

    font-size:30px;

    margin-bottom:20px;

    color:#FFD54F;
}

.profil-sekolah p{

    font-size:18px;

    line-height:1.8;

    margin-bottom:20px;
}

.profil-poin{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:15px;

    margin:25px 0;
}

.profil-poin div{

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

    padding:15px;

    border-radius:15px;

    font-weight:bold;
}

.btn-profil{

    display:inline-block;

    margin-top:15px;

    padding:14px 25px;

    background:#2196F3;

    color:#fff;

    text-decoration:none;

    border-radius:12px;

    font-weight:bold;
}

.btn-profil:hover{

    background:#1565C0;
}

.audio-control{

    transition:.3s;
}

.audio-control.hide{

    opacity:0;

    pointer-events:none;
}