/* tombol reset */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Georgia',serif;
}

/* background keseluruhan*/
body{
min-height:100vh;
background:url("bckg_polda.jpg") no-repeat center center/cover;
display:flex;
justify-content:center;
align-items:center;
}

/* header atas */

.top-header{
position:absolute;
top:30px;
left:40px;
display:flex;
align-items:center;
gap:12px;
color:white;
}

.top-header img{
height:55px;
}

.top-header h3{
font-size:16px;
line-height:1.3;
}

/* Kotak login */
.login-card{
width:340px;
max-width:85%;
padding:22px 20px;
background:rgba(255,255,255,0.10);
border-radius:22px;
text-align:center;

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

margin-top:140px;
}

/* Judul */
.login-card h1{
font-size:26px;
font-weight:bold;
color:#222;
margin-bottom:5px;
}

.subtitle{
font-size:13px;
margin-bottom:18px;
color:#333;
}

/* box input */
.input-box{
position:relative;
margin:10px 0;
}

.input-box input{
width:100%;
padding:9px 12px 9px 36px;
border-radius:16px;
border:2px solid #444;
font-size:13px;
background:rgba(255,255,255,0.25);
outline:none;
}

.icon{
position:absolute;
left:12px;
top:9px;
font-size:14px;
}

/* Tombol */
.btn-login{
width:100%;
padding:9px;
margin-top:12px;
border-radius:16px;
border:2px solid #444;
background:transparent;
font-size:13px;
font-weight:bold;
cursor:pointer;
transition:0.3s;
}

.btn-login:hover{
background:#444;
color:white;
}

/* link */
.signup-text{
margin-top:14px;
font-size:12px;
}

.signup-text a{
font-weight:bold;
color:#000;
text-decoration:none;
}

.signup-text a:hover{
text-decoration:underline;
}

/* sosial media */
.social{
margin-top:16px;
display:flex;
justify-content:center;
gap:20px;
font-size:12px;
}

.social i{
margin-right:4px;
}

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

.login-card{
width:90%;
margin-top:120px;
}

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

}

@media(max-width:480px){

.login-card{
padding:18px;
border-radius:18px;
margin-top:110px;
}

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

.input-box input{
font-size:12px;
}

.btn-login{
font-size:12px;
}

}


/* bagian dashboard */

.dashboard-card{
width:700px;
max-width:90%;
margin:auto;
padding:35px;

background:rgba(255,255,255,0.35);
backdrop-filter:blur(8px);

border-radius:25px;
text-align:center;

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

.dashboard-card h1{
font-size:38px;
margin-bottom:10px;
color:#333;
}

.dashboard-info{
font-size:14px;
margin-bottom:20px;
}

/* tombol absensi */

.absen-btn{
width:260px;
padding:10px;
margin:8px auto;

border-radius:14px;
border:2px solid #444;

background:transparent;
font-weight:bold;
cursor:pointer;
display:block;
}

.absen-btn:hover{
background:#444;
color:white;
}

/* status box */

.status-box{
margin-top:15px;
padding:15px;

background:white;
border-radius:12px;
display:inline-block;
}

/*riwayat absensi */

.riwayat-card{
width:900px;
max-width:95%;
margin:auto;
padding:30px;

background:rgba(255,255,255,0.8);
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.riwayat-title{
font-size:32px;
margin-bottom:15px;
text-align:center;
}

.table-riwayat{
width:100%;
border-collapse:collapse;
margin-top:10px;
}

.table-riwayat th{
background:#666;
color:white;
padding:10px;
}

.table-riwayat td{
padding:8px;
text-align:center;
border-bottom:1px solid #ddd;
}

.status-tepat{
background:#d4edda;
color:#155724;
padding:3px 8px;
border-radius:8px;
}

.status-terlambat{
background:#f8d7da;
color:#721c24;
padding:3px 8px;
border-radius:8px;
}

/* tombol atas */

.nav-top{
display:flex;
justify-content:space-between;
margin-bottom:10px;
}

.nav-btn{
padding:6px 18px;
border-radius:10px;
border:1px solid #555;
background:#d9d9d9;
text-decoration:none;
color:#333;
font-weight:600;
}



/* LOGOUT DAN RIWAYAT ABSENSI */

/* menu atas */

.topbar{
display:flex;
justify-content:center;
gap:20px;
margin-bottom:20px;
}

.top-link{
text-decoration:none;
padding:8px 18px;
background:rgba(255,255,255,0.7);
border-radius:12px;
font-weight:bold;
color:#333;
border:1px solid #444;
transition:0.2s;
}

.top-link:hover{
background:#444;
color:white;
}

.logout{
background:#ffdddd;
border:1px solid #aa0000;
}

.logout:hover{
background:#aa0000;
color:white;
}