html, body {
	width:100%;
	height:100%;
}
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    /* background-image: linear-gradient(to right top, #1db9ff, #a2a0ff, #fb7ad4, #ff677a, #f48603); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 400px;
	padding: 40px;
	background: rgba(0,0,0,.6);
	box-sizing: border-box;
	box-shadow: 0 15px 25px rgba(0,0,0,.5);
	border-radius: 10px;
}
.box h2 {
	margin: 0 0 30px;
	padding: 0;
	color: #FFF;
	text-align: center;
}

.box .inputBox {
	position: relative;
}
.box .inputBox input {
	width: 100%;
	padding: 10px 0;
	font-size: 16px;
	color: #FFF;
	letter-spacing: 1px;
	margin-bottom: 30px;
	border: none;
	border-bottom: 1px solid #FFF;
	outline: none;
	background: transparent;
}
.box .inputBox label {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px 0;
	font-size: 16px;
	color: #FFF;
	pointer-events: none;
	transition: .5s;
	animation: LabelOnLoad 1s forwards 0s ease;
}
@keyframes LabelOnLoad{
    0%{
        transform: rotate(0) translateY(-19px);
        opacity: 0;
        }
    100%{
        transform: rotate(0) translateY(0);
        opacity: 1;
        }
}
.box .inputBox input:focus ~ label, 
.box .inputBox input:valid ~ label {
	top: -19px;
	left:0;
	color: #03A9F4;
	font-size: 12px;
}
.box .tombol {width:100%;}
.box button[type='submit'] {
	background: transparent;
	border: none;
	outline: none;
	color: #FFF;
	background: #03A9F4;
	padding: 10px 20px;
	cursor: pointer;
	border-radius: 5px;
	font-size: 14px;
}
.box .peringatan {width:100%; margin-top:10px; text-align:center; color:white; font-size:14px;}
.box .peringatan p {color:white; font-size:14px;}
.box input[type='submit']:hover {
	background-color: rgba(3, 169, 244, 0.7);
}
@media(max-width: 720px){
	.box {
		width: 80%;
	}
}




.header_login_block{
    width:100%;
    height:60vh;              /* 60% tinggi layar */
    overflow:hidden;
}

.gambar{
    position:relative;
    width:100%;
    height:100%;
}

.gambar img{
    width:100%;
    height:100%;
    object-fit:cover;         /* supaya gambar proporsional */
    display:block;
}

/* Teks di bawah gambar (menempel bagian bawah) */
.overlay_teks{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:20px 0px 20px 0;
    background:linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
    color:white;
    text-align:center; 
}

.teks1{
    font-size:22px;
    font-weight:bold;
}

.teks2{
    font-size:14px;
    opacity:0.9;
}

.input_login_block{
    background:#ffffff;
    padding:32px 20px;
    margin-top:-10px; /* naik sedikit ke area gambar */
    box-shadow:0 -10px 30px rgba(0,0,0,0.08);
}


/* Jarak antar input */
.inputBox{
    margin-bottom:22px;
}

/* Style input (revisi full lebar & stabil) */
.inputBox input{
    width:100%;                 /* <-- ganti dari 92% */
    box-sizing:border-box;      /* penting supaya padding tidak nambah lebar */
    padding:14px 12px;
    font-size:16px;
    border:1px solid #ddd;
    border-radius:8px;
    outline:none;
    transition:0.2s;
}

.inputBox input:focus{
    border-color:#4a90e2;
    box-shadow:0 0 0 2px rgba(74,144,226,0.15);
}

/* Label di bawah input */
.inputBox label{
    display:block;
    margin-top:6px;
    font-size:13px;
    color:#666;
}

/* OPSI LOGIN: kiri peringatan, kanan lupa sandi */
.opsi_login{
    display:flex;
    justify-content:space-between;   /* <-- dari flex-end */
    align-items:center;
    margin-top:-8px;
    margin-bottom:20px;
}

/* Peringatan kecil merah */
.peringatan p{
    margin:0;
    font-size:12px;
    color:#d93025;
}

/* Lupa sandi di kanan */
.forget_password{
    font-size:13px;
    color:#4a90e2;
    cursor:pointer;
}

.forget_password:hover{
    text-decoration:underline;
}

/* Tombol full lebar */
.tombol button{
    width:100%;
    padding:14px;
    font-size:16px;
    border:none;
    border-radius:8px;
    background:#4a90e2;
    color:white;
    font-weight:bold;
    cursor:pointer;
    transition:0.2s;
}

.tombol button:hover{
    background:#357bd8;
}

.passwordBox{
    position:relative;
}

/* beri ruang untuk icon */
.passwordBox input{
    padding-right:42px;
}

/* icon mata */
.togglePass{
    position:absolute;
    right:12px;
    top:14px;
    cursor:pointer;
    font-size:18px;
    opacity:0.6;
    user-select:none;
}

.togglePass:hover{
    opacity:1;
}