*{
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}


body{

margin:0;
min-height:100vh;

background-image:url("../Gambar/background.png");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

background-color:#f5f5f5;

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

padding-top:80px;

}


.container{

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

background:rgba(255,255,255,0.80);

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

border:1px solid rgba(255,255,255,0.5);

border-radius:35px;

padding:35px;

text-align:center;

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

}



/* LOGO ATAS */

.header{

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

    gap:15px;

    margin-bottom:20px;

}



.logo img{

    width:85px;
    height:85px;
    object-fit:contain;

}



.judul{

    flex:1;

}



.judul h1{

    color:#b40000;

    font-size:25px;

    line-height:1.15;

    margin:0;

    font-weight:700;

}





.judul p{

    color:#666;

    font-size:14px;

}



/* MENU */


.menu{

    margin-top:25px;

    display:flex;

    flex-direction:column;

    gap:12px;

}



.menu button{

    border:none;

    width:75%;

    margin:auto;

    padding:11px;

    border-radius:10px;

    color:white;

    font-size:14px;

    font-weight:bold;

    cursor:pointer;

}



.anggota{

    background:#0066cc;

}



.sensei{

    background:#b40000;

}



/* DAFTAR */

.daftar{

    margin-top:25px;

    font-size:14px;

}



.daftar a{

    color:#0066cc;

    font-weight:bold;

    text-decoration:none;

}


.logo-kaizen img{

    width:90px;
    height:90px;

}




/* LOGIN ANGGOTA */

.logo-login img{

width:90px;
height:90px;
object-fit:contain;

}


.form-login{

    margin-top:30px;
    display:flex;
    flex-direction:column;
    gap:15px;

}

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

.form-login input{

    padding:14px;
    border-radius:12px;
    border:1px solid #ccc;
    font-size:15px;

}


.form-login button{

    width:75%;
    margin:auto;

}


.login-title{

    color:#b40000;

    font-size:24px;

    margin:15px 0 5px;

    font-weight:700;

}


.form-login .anggota{

    background:#0066cc;

    color:white;

    border:none;

    padding:12px;

    border-radius:12px;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

}


/* DATA CARD */

.data-card{

background:#f8f8f8;

border-radius:15px;

padding:15px;

margin-top:15px;

text-align:left;

border-left:5px solid #b40000;

}


.data-card h3{

margin:0 0 10px;

color:#b40000;

font-size:16px;

}


.data-card p{

margin:5px 0;

font-size:14px;

}


.data-card b{

font-size:14px;

}



.data-card{

background:#f8f8f8;

border-radius:15px;

padding:15px;

margin:15px 0;

text-align:left;

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

}


.data-card h3{

color:#b40000;

font-size:16px;

margin:0 0 10px;

}


.data-card p{

font-size:14px;

margin:8px 0;

}


.profil-card{

background:#f8f8f8;

border-radius:18px;

padding:20px;

margin-top:20px;

text-align:center;

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

}


.foto-profil{

width:100px;

height:100px;

border-radius:50%;

object-fit:contain;

}


.profil-card h2{

color:#b40000;

margin:15px 0;

font-size:22px;

}



.profil-data{

text-align:left;

}


.profil-data p{

background:white;

padding:12px;

border-radius:10px;

margin:10px 0;

font-size:14px;

line-height:1.4;

}



/* DATA UJIAN */

.data-card{

    background:#fff;

    border-left:5px solid #b40000;

    border-radius:15px;

    padding:20px;

    margin-top:20px;

    box-shadow:0 5px 15px rgba(0,0,0,.1);

    text-align:left;

}


.data-card h3{

    color:#b40000;

    font-size:18px;

    margin-top:0;

}



.data-card p{

    font-size:15px;

    margin:10px 0;

}



select{

width:100%;

padding:12px;

border-radius:10px;

border:1px solid #ccc;

font-size:15px;

}


input[type="file"]{

margin-top:10px;

font-size:14px;

}



input[type="radio"],
input[type="checkbox"]{

width:auto;

}


.table-box{

background:white;

border-radius:15px;

overflow:auto;

margin-top:20px;

}


table{

    width:100%;
    border-collapse:collapse;
    min-width:0;

}


th{

background:#111;

color:white;

padding:12px;

}


td{

padding:12px;

text-align:center;

border-bottom:1px solid #ddd;

}


.aktif{

background:#dff4e5;

color:green;

padding:5px 12px;

border-radius:15px;

font-weight:bold;

}




/* TABEL */

.table-box{

    width:100%;
    overflow-x:auto;

}


.table-box table{

    width:100%;
    border-collapse:collapse;
    min-width:0;

}


.table-box th,
.table-box td{

    padding:10px 5px;
    font-size:13px;
    text-align:center;

}


/* TOMBOL ABSENSI */

.data-card button{

    width:85%;
    margin:10px auto;
    display:block;

    background:#0066cc;
    color:white;

    border:none;
    padding:12px;

    border-radius:12px;

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

}


.data-card button:hover{

    opacity:.8;

}



.login-page{

    align-items:center;

}



.foto-upload{

text-align:center;
margin-top:15px;

}


.foto-upload img{

width:120px;
height:120px;

border-radius:50%;

object-fit:cover;

border:4px solid #b40000;

}


.foto-upload input{

margin-top:15px;

font-size:13px;

}


.foto-upload{

    text-align:center;
    margin-bottom:15px;

}


.foto-upload img{

    width:120px;
    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #b40000;

}


.foto-upload input{

    margin-top:15px;

}


.motto{

margin-top:25px;

font-size:13px;

color:#777;

font-style:italic;

}



.form-login label{

    font-size:14px;

    font-weight:bold;

    margin-top:5px;

    text-align:left;

}


.form-login select{

    padding:14px;

    border-radius:12px;

    border:1px solid #ccc;

    font-size:15px;

}


.form-login input[type="checkbox"]{

    width:auto;

}



.motivasi{

margin-top:25px;

font-size:13px;

color:#777;

font-style:italic;

line-height:1.5;

}


.form-login label{

    margin-top:8px;
    line-height:1.5;

}


.form-login input[type="checkbox"]{

    width:auto;
    margin-right:8px;

}


.input-date{

width:100%;

padding:14px;

border-radius:12px;

border:1px solid #ddd;

font-size:15px;

background:white;

color:#555;

}


.btn-daftar{
    width:100%;
    padding:14px;
    margin-top:20px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#0066cc,#004999);
    color:white;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
    box-shadow:0 5px 12px rgba(0,0,0,0.15);
}

.btn-daftar:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,#004999,#003366);
}


.btn-login{

    width:100%;
    padding:14px;

    background:linear-gradient(
        135deg,
        #007bff,
        #0056b3
    );

    color:white;

    border:none;

    border-radius:12px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    margin-top:15px;

    transition:0.3s;

    box-shadow:0 8px 18px rgba(0,123,255,0.25);

}


.btn-login:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(0,123,255,0.35);

}


.btn-login:active{

    transform:scale(0.97);

}



/* DASHBOARD */

.dashboard-info{

display:flex;

flex-direction:column;

gap:12px;

margin-top:20px;

}


.info-box{

background:#fff;

border-radius:15px;

padding:15px;

text-align:left;

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

border-left:5px solid #b40000;

}


.info-box h3{

margin:0 0 8px;

color:#b40000;

font-size:16px;

}


.info-box p{

margin:0;

font-size:14px;

}



/* DASHBOARD GRID */


.sabuk-box{

background:#fff;

border-radius:18px;

padding:15px;

margin-top:20px;

border-left:5px solid #b40000;

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

text-align:left;

}


.sabuk-box h3{

margin:0;

color:#b40000;

font-size:16px;

}


.sabuk-box p{

margin:8px 0 0;

font-size:18px;

font-weight:bold;

}




.menu-grid{

display:grid;

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

gap:15px;

margin-top:20px;

}




.menu-card{

background:white;

height:120px;

border-radius:18px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

cursor:pointer;

box-shadow:0 5px 15px rgba(0,0,0,.1);

transition:.2s;

border:1px solid #eee;

}



.menu-card:hover{

transform:translateY(-3px);

}



.menu-card .icon{

font-size:38px;

}



.menu-card p{

margin:10px 0 0;

font-size:14px;

font-weight:bold;

color:#333;

}



.sabuk-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;

    background:#f8f8f8;
    border-left:5px solid #b40000;
    border-radius:18px;
    padding:18px 20px;
    margin:20px 0;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.sabuk-info{
    text-align:left;
    flex:1;
}

.sabuk-label{
    margin:0 0 8px;
    font-size:16px;
    font-weight:bold;
    color:#b40000;
}

.sabuk-info h3{
    margin:0;
    font-size:28px;
    color:#222;
}

.sabuk-image img{
    width:95px;
    height:auto;
    object-fit:contain;
}


.dashboard{

width:420px;
max-width:95%;
margin:auto;
background:white;
border-radius:30px;
padding:30px;
box-shadow:0 10px 30px rgba(0,0,0,.12);

}



.logo-dashboard{

text-align:center;

}


.logo-dashboard img{

width:100px;

}



.dashboard h1{

text-align:center;
color:#b00000;
font-size:28px;

}



.sub{

text-align:center;
font-size:17px;

}




.sabuk-card{

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

background:#fafafa;

border-left:6px solid #b00000;

padding:18px;

border-radius:20px;

margin-top:25px;

}



.sabuk-info p{

color:#b00000;

font-weight:bold;

font-size:15px;

margin:0 0 8px;

}


.sabuk-info h2{
    margin:0;
    font-size:18px;
    color:#222;
    text-transform:none;
}



.sabuk-image img{

width:150px;
height:85px;
object-fit:contain;

}





.menu-title{

text-align:center;

color:#b00000;

margin-top:25px;

}



.menu-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

}



.menu-grid button{

height:140px;

border:none;

background:white;

border-radius:20px;

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

font-size:16px;

font-weight:bold;

color:#333;

}



.menu-grid span{

display:block;

font-size:45px;

margin-bottom:10px;

}





.logout{

text-align:center;

margin-top:30px;

}



.logout a{

color:#0066aa;

font-weight:bold;

text-decoration:none;

}


.tanggal-group{

display:flex;
gap:8px;
width:100%;

}


.tanggal-group select{

flex:1;

padding:12px 5px;

font-size:13px;

border-radius:10px;

border:1px solid #ccc;

background:white;

}



#pesanLogin{

margin-top:10px;

font-size:14px;

font-weight:bold;

color:#b40000;

text-align:center;

}



.success-box{

margin-top:20px;

padding:15px;

background:#e8f8ed;

border-left:5px solid #00a63c;

border-radius:15px;

color:#087830;

font-size:15px;

animation:muncul .3s ease;

}


.success-box strong{

font-size:18px;

}


.success-box p{

margin:8px 0 0;

font-size:14px;

}



@keyframes muncul{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:translateY(0);

}

}



.btn-edit-foto{

display:inline-block;

background:#b40000;

color:white;

padding:6px 12px;

border-radius:8px;

font-size:12px;

font-weight:bold;

cursor:pointer;

margin-top:10px;

}


.btn-edit-foto:hover{

opacity:.8;

}


.btn-edit-foto input{

display:none;

}


.foto-upload{

display:flex;

flex-direction:column;

align-items:center;

}



.popup-sukses{

position:fixed;
top:50%;
left:50%;

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

background:white;

width:280px;

padding:25px;

border-radius:20px;

text-align:center;

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

z-index:999;

animation:muncul .3s ease;

}


.popup-sukses h3{

color:#b00000;

margin:10px 0;

}


.popup-sukses p{

font-size:14px;

}



@keyframes muncul{

from{

opacity:0;
transform:translate(-50%,-60%);

}

to{

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

}

}


.popup-overlay{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.45);

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

z-index:999;

}



.popup-box{

background:white;

width:280px;

padding:25px;

border-radius:20px;

text-align:center;

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

}



.icon-popup{

font-size:40px;

}



.popup-box h3{

color:#b00000;

margin:10px 0;

}



.popup-box p{

font-size:14px;

}



.popup-box button{

background:#087f23;

color:white;

border:none;

padding:10px 30px;

border-radius:10px;

font-weight:bold;

}


.anggota,
.sensei{

width:100%;

padding:14px;

background:#b00000;

color:white;

border:none;

border-radius:12px;

font-size:16px;

font-weight:bold;

cursor:pointer;

margin-top:15px;

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

}



.anggota:hover{

background:#8d0000;

}


@media(max-width:600px){

.container{

width:90%;

padding:25px;

border-radius:30px;

}

}



.sensei{

width:100%;
padding:14px;

background:#c90000;
color:white;

border:none;
border-radius:12px;

font-size:16px;
font-weight:bold;

cursor:pointer;

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

margin-top:15px;

}


.btn-login{

width:100%;

padding:12px;

margin-top:15px;

background:#c90000;

color:white;

border:none;

border-radius:12px;

font-size:16px;

font-weight:bold;

cursor:pointer;

box-shadow:0 5px 15px rgba(0,0,0,0.15);

}


.btn-login:hover{

background:#a80000;

}


.alert-login{
    margin-top:15px;
    background:#ffe5e5;
    color:#b00000;
    padding:12px;
    border-radius:12px;
    font-size:14px;
    text-align:center;
    font-weight:600;
    animation: muncul .3s ease;
}


@keyframes muncul{

from{
opacity:0;
transform:translateY(-10px);
}

to{
opacity:1;
transform:translateY(0);
}

}


/* =========================
   PESAN ERROR & SUKSES
========================= */


#pesanError,
#pesanSukses{

margin-top:20px;

text-align:center;

}



/* ERROR BOX */

.error-box{

background:#ffe5e5;

border-left:5px solid #d00000;

color:#a00000;

padding:15px;

border-radius:12px;

font-size:15px;

box-shadow:0 5px 15px #0002;

animation:muncul .3s ease;

}



/* SUCCESS BOX */

.success-box{

background:#e8fff0;

border-left:5px solid #00a63c;

color:#08752d;

padding:20px;

border-radius:15px;

font-size:16px;

box-shadow:0 5px 15px #0002;

animation:muncul .3s ease;

}



.success-box strong{

font-size:20px;

display:block;

margin-bottom:10px;

}



.success-box p{

margin:0;

line-height:1.5;

}



/* ANIMASI */

@keyframes muncul{

from{

opacity:0;

transform:translateY(-10px);

}


to{

opacity:1;

transform:translateY(0);

}

}


.alert-popup{

position:fixed;

top:50%;
left:50%;

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

width:85%;
max-width:350px;

padding:20px;

border-radius:20px;

text-align:center;

font-size:16px;

font-weight:bold;

z-index:9999;

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

animation:muncul .3s ease;

}


.alert-error{

background:#ffe5e5;

color:#b00000;

border-left:6px solid #b00000;

}


.alert-success{

background:#e8fff0;

color:#198754;

border-left:6px solid #198754;

}



@keyframes muncul{

from{

opacity:0;

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

}

to{

opacity:1;

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

}

}


/* ===============================
   DAFTAR UJIAN - PROFESIONAL
=============================== */

.card-ujian{

    text-align:center;

    padding:25px;

}


.judul-card-ujian{

    color:#a80000;

    margin:0 0 20px;

    font-size:21px;

}


.alur-sabuk{

    background:rgba(217,0,0,.05);

    border-radius:18px;

    padding:15px;

    margin-bottom:18px;

}


.sabuk-box span{

    display:block;

    font-size:13px;

    color:#666;

    margin-bottom:5px;

}


.sabuk-box h2{

    margin:0;

    color:#222;

    font-size:24px;

}


.sabuk-box.target h2{

    color:#c90000;

}


.panah-kenaikan{

    color:#c90000;

    font-size:28px;

    font-weight:bold;

    margin:7px 0;

}


.info-status-ujian{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    margin:15px 0;

}


.info-status-ujian > span{

    font-size:13px;

    color:#666;

}


.status-ujian{

    display:inline-block;

    background:#fff3cd;

    color:#9a6700;

    padding:8px 16px;

    border-radius:20px;

    font-size:13px;

}


.tanggal-daftar-ujian{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#f7f7f7;

    padding:12px 15px;

    border-radius:12px;

    margin:15px 0;

    font-size:13px;

}


.tanggal-daftar-ujian b{

    color:#333;

}


#btnDaftarUjian{

    width:100%;

    margin-top:5px;

}


/* ===============================
   DAFTAR UJIAN - FIT 1 LAYAR
=============================== */

.halaman-daftar-ujian .container{

    padding-top:18px;
    padding-bottom:18px;

}


/* LOGO */

.halaman-daftar-ujian .logo-login{

    margin-bottom:8px;

}

.halaman-daftar-ujian .logo-login img{

    max-height:90px;

}


/* JUDUL */

.halaman-daftar-ujian .login-title{

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

}


.halaman-daftar-ujian .sub{

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

}


/* CARD UTAMA */

.halaman-daftar-ujian .card-ujian{

    padding:18px 22px;

}


.halaman-daftar-ujian .judul-card-ujian{

    margin-bottom:12px;

}


/* AREA SABUK */

.halaman-daftar-ujian .alur-sabuk{

    padding:10px 14px;

    margin-bottom:10px;

}


.halaman-daftar-ujian .sabuk-box{

    padding:10px 14px;

}


.halaman-daftar-ujian .sabuk-box h2{

    font-size:22px;

}


.halaman-daftar-ujian .panah-kenaikan{

    font-size:25px;

    margin:4px 0;

}


/* STATUS */

.halaman-daftar-ujian .info-status-ujian{

    margin:10px 0;

    gap:5px;

}


.halaman-daftar-ujian .status-ujian{

    padding:6px 15px;

}


/* TANGGAL */

.halaman-daftar-ujian .tanggal-daftar-ujian{

    margin:10px 0;

    padding:10px 14px;

}


/* TOMBOL */

.halaman-daftar-ujian #btnDaftarUjian{

    margin-top:3px;

    height:46px;

}


/* KEMBALI */

.halaman-daftar-ujian .daftar{

    margin-top:12px;

}