* {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	overflow: hidden;
}

/* awal */
.awal {
	margin: 0;
	padding: 0;
	background-color: #121212;
	font-family: 'Poppins', sans-serif;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.container {
	width: calc(100% - 40px);
	max-width: 400px;
	background-color: #1e1e1e;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

.container h1 {
	font-size: 2rem;
	font-weight: 600;
	color: #ffcc00;
	text-align: center;
	margin-bottom: 20px;
}

.form-group {
	margin-bottom: 15px;
}

label {
	font-size: 1rem;
	margin-bottom: 5px;
	display: block;
	color: #cccccc;
}

input[type='text'] {
	width: 100%;
	padding: 12px;
	font-size: 1rem;
	border: 1px solid #444;
	border-radius: 8px;
	background-color: #2a2a2a;
	color: #ffffff;
	outline: none;
	transition: border-color 0.3s, box-shadow 0.3s;
	box-sizing: border-box;
}

input[type='text']:focus {
	border-color: #ffcc00;
	box-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
}

input[type='text']::placeholder {
	color: #bbbbbb;
	font-family: 'Poppins';
	font-weight: 300;
	font-size: 14px;
}

textarea {
	width: 100%;
	padding: 12px;
	font-size: 1rem;
	border: 1px solid #444;
	border-radius: 8px;
	background-color: #2a2a2a;
	color: #ffffff;
	outline: none;
	transition: border-color 0.3s, box-shadow 0.3s;
	box-sizing: border-box;
}

textarea:focus {
	border-color: #ffcc00;
	box-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
}

textarea::placeholder {
	color: #bbbbbb;
	font-family: 'Poppins';
	font-weight: 300;
	font-size: 14px;
}

button {
	width: 100%;
	padding: 12px;
	font-size: 1rem;
	font-weight: 600;
	color: #121212;
	background-color: #ffcc00;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s;
}

button:hover {
	background-color: #121212;
	color: #ffcc00;
	/* transform: scale(1.03); */
}

button:active {
	transform: scale(0.98);
}
/* akhir awal */

.bg {
	/* display: none; */
	background-image: url('../bg-year.webp');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	position: relative;
	display: flex !important;
	justify-content: end;
	align-items: center;
	flex-wrap: nowrap;
	flex-direction: column;
	overflow: hidden;
	gap: 25vh;
}

div.bg div.animasi {
	width: 100vw;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.3) 50%,
		rgba(145, 91, 15, 0.1)
	);
	background-position: 0% center;
	background-size: 2000% 100%;
	animation: animasi 5s linear alternate infinite;
}

@keyframes animasi {
	0% {
		background-position: 0% center;
	}
	100% {
		background-position: 100% center;
	}
}
@keyframes down {
	0% {
        transform: translateY(300px);
    }
    100% {
		transform: translateY(0px);
    }
}
@keyframes rightTop {
	0% {
        transform: scaleY(1.1);
        transform: scaleX(1);
		/* transform: translateY(300px); */
    }
    100% {
		transform: scaleY(1);
		transform: scaleX(1.1);
		/* transform: translateY(0px); */
    }
}

.heading {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	flex-direction: column;
	margin-bottom: 2em;
}
div.bg h1,
div.bg h2 {
	z-index: 200;
	color: #ffcc00;
	font-family: 'Celandine', 'Jaini Purva', 'Franklin Gothic Medium',
		'Arial Narrow', Arial, serif;
}

div.bg h1 {
	/* z-index: 1; */
	font-size: 9rem;
	font-weight: 900;
	/* text-shadow: -2px -2px 1px rgb(255, 255, 255);
	transform: scaleY(1.2);
	background: linear-gradient(133deg, #ffffff 0%, #000000 50%, #ffbb00 100%);
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;

	font-size: 80px; /* Ukuran font */
	/* background: linear-gradient(
		45deg,
		#ffffff,
		#ffd106,
		#ff9100
	); Gradasi warna */
	-webkit-background-clip: text; /* Klip background ke teks */
	-webkit-text-fill-color: transparent; /* Teks transparan untuk menampilkan gradasi */
	text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
	letter-spacing: 5px; /* Jarak antar huruf */
	transition: all 0.5 ease;
	filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.7));
	/* mix-blend-mode:luminosity; */
	transform: translateY(300px);
}

div.bg h2 {
	font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial;
	font-size: 3rem;
	font-weight: 600;
	margin-top: -20px;
	text-shadow: 1px 1px 0px rgb(255, 255, 255);
	transform: translateY(300px);
}

@media screen and (max-width: 768px) {
	div.bg h2 {
		font-size: 2rem;
	}

	div.bg h1 {
		font-size: 7rem;
	}
}

@media screen and (max-width: 480px) {
	div.bg h2 {
		font-size: 1.4rem;
	}
	div.bg h1 {
		font-size: 5rem;
	}
	div.bg div.harapan {
		width: 90% !important;
		padding-inline: 70px !important;
		font-size: medium !important;
	}
	.bg {
		gap: 25vh;
	}
	.container {
		padding: 15px;
	}

	.container h1 {
		font-size: 1.8rem;
	}

	input[type='text'] {
		font-size: 0.9rem;
	}

	button {
		font-size: 0.9rem;
	}
	.container {
		background-color: #121212;
		box-shadow: none !important;
	}
	button:hover {
		background-color: #f3c407;
		color: #bbbbbb;
	}
}

div.bg div.harapan {
	text-align: center;
	width: 500px;
	color: white;
	text-shadow: 1px 1px 10px rgb(0, 0, 0);
	/* background-color: wheat; */
	z-index: 1;
	font-family: 'Poppins', serif;
	font-weight: 300;
	font-style: normal;
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 10px;
	font-size: large;
	transition: all 5s ease-in-out;
}

div.bg div.harapan span#penyampai {
	font-family: 'Poppins', serif;
	font-weight: 600;
	font-style: normal;
	text-align: center;
	text-transform: capitalize;
	color: #ffcc00;
}