/* ============================
   FORM LOGIN & REGISTER - SIPAKU GREEN STYLE (Responsive)
   ============================ */

body {
	margin: 0;
	padding: 0;
	height: 100vh;
	background: linear-gradient(135deg, #007e65, #009977, #00aa85);
	background-size: 300% 300%;
	animation: gradientShift 10s ease infinite;
	font-family: 'Montserrat', sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Animasi gradasi */
@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* Kotak Form */
.loginBox {
	width: 350px;
	min-height: 200px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 15px;
	padding: 40px 30px;
	box-sizing: border-box;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
	text-align: center;
	backdrop-filter: blur(6px);
}

/* Judul */
h1 {
	font-family: 'Raleway', sans-serif;
	margin: 0 0 20px 0;
	color: #008870;
	text-align: center;
	font-weight: 700;
	letter-spacing: 1px;
}

/* Input Box */
.loginBox input,
.loginBox select {
	width: 100%;
	margin-bottom: 20px;
}

/* Input teks dan password */
.loginBox input[type="text"],
.loginBox input[type="password"] {
	border: none;
	border-bottom: 2px solid #008870;
	outline: none;
	height: 40px;
	color: #262626;
	background: transparent;
	font-size: 16px;
	padding-left: 25px;
	box-sizing: border-box;
	transition: all 0.3s;
}

.loginBox input[type="text"]:focus,
.loginBox input[type="password"]:focus {
	border-bottom: 2px solid #00b894;
}

/* Dropdown role */
.loginBox select {
	border: none;
	border-bottom: 2px solid #008870;
	background: transparent;
	color: #262626;
	font-size: 16px;
	height: 40px;
	padding-left: 25px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	transition: all 0.3s;
}

.loginBox select:focus {
	border-bottom: 2px solid #00b894;
}

/* Ikon input */
.inputBox {
	position: relative;
}

.inputBox span {
	position: absolute;
	top: 10px;
	left: 0;
	color: #008870;
}

/* Tombol utama (Login & Register) */
.loginBox input[type="submit"] {
	border: none;
	outline: none;
	height: 42px;
	font-size: 16px;
	background: linear-gradient(90deg, #008870, #00b894);
	color: #fff;
	border-radius: 25px;
	cursor: pointer;
	font-family: 'Raleway', sans-serif;
	font-weight: bold;
	transition: all 0.3s ease;
	box-shadow: 0 4px 10px rgba(0, 136, 112, 0.3);
}

.loginBox input[type="submit"]:hover {
	background: linear-gradient(90deg, #00b894, #008870);
	transform: scale(1.03);
	box-shadow: 0 6px 15px rgba(0, 136, 112, 0.4);
}

/* Teks bawah (register / lupa password) */
.loginBox p {
	margin-top: 10px;
	text-align: center;
	color: #444;
	font-family: Montserrat;
	font-size: 14px;
}

.loginBox a {
	display: block;
	text-align: center;
	margin-top: 5px;
	color: #008870;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	transition: color 0.3s ease;
}

.loginBox a:hover {
	color: #00b894;
	text-decoration: underline;
}

/* ============================
   LOGO SIPAKU
   ============================ */
.logo-sipaku {
	width: 90px;
	height: 90px;
	object-fit: contain;
	margin-bottom: 15px;
	animation: fadeInDown 1s ease;
}

/* Animasi lembut muncul dari atas */
@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsif untuk logo */
@media (max-width: 480px) {
	.logo-sipaku {
		width: 70px;
		height: 70px;
		margin-bottom: 10px;
	}
}

/* ============================
   RESPONSIVE DESIGN
   ============================ */

/* Untuk tablet atau layar sedang */
@media (max-width: 768px) {
	body {
		padding: 20px;
	}

	.loginBox {
		width: 90%;
		padding: 30px 25px;
	}

	h1 {
		font-size: 22px;
	}

	.loginBox input[type="submit"] {
		height: 40px;
		font-size: 15px;
	}
}

/* Untuk layar kecil (HP) */
@media (max-width: 480px) {
	body {
		background: linear-gradient(160deg, #007e65, #00b894);
		flex-direction: column;
		padding: 15px;
	}

	.loginBox {
		width: 100%;
		padding: 25px 20px;
		border-radius: 10px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	}

	h1 {
		font-size: 20px;
		margin-bottom: 15px;
	}

	.loginBox input[type="text"],
	.loginBox input[type="password"],
	.loginBox select {
		font-size: 14px;
		height: 36px;
	}

	.loginBox input[type="submit"] {
		font-size: 14px;
		height: 38px;
		border-radius: 20px;
	}

	.loginBox a,
	.loginBox p {
		font-size: 13px;
	}
}