:root {
	--regular-color: #d03b3b;
	--regular-color-hover: #b01b1b;
	--kip-color: #408cd8;
	--kip-color-hover: #1962ac;
	--daerah-color: #26b257;
	--daerah-color-hover: #11951e;
	--ut-color: #9c4fb4;
	--ut-color-hover: #8d2786;
}

body {
	font-family: "Source Sans Pro", sans-serif;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: #f2f6ff;

	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><rect width='100' height='100' fill='transparent'/><path d='M0,40 C30,50 70,30 100,60 L100,0 L0,0 Z' fill='%23ffeaea'/></svg>");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.logo {
	display: block;
	position: relative;
	width: 100%;
	height: 80px;
	margin-bottom: 20px;
	text-align: center;
}

.logo img {
	width: 196px;
	height: auto;
}

.container {
	text-align: center;
	background: white;
	padding: 2rem;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	max-width: 480px;
	width: 90%;
}

h1 {
	margin-bottom: 1rem;
	color: #1e3a8a;
}

.subtitle {
	margin: -5px 0 25px 0;
	color: #808db3;
}

p {
	margin-bottom: 2rem;
	color: #333;
}

.grid-container {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 2rem;
}

.grid-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	text-align: center;
	padding: 2rem 1rem;
	background-color: var(--regular-color);
	color: white;
	text-decoration: none;
	border-radius: 12px;
	font-size: 0.95rem;
	transition: background 0.3s ease;
	height: 200px;
}

.grid-button .icon {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 65px; /* Set a height if you want a fixed height area */
	display: flex;
	justify-content: center;
	align-items: center;
}

.grid-button .icon img {
	width: auto;
	height: 50px;
}

.grid-button .text {
	position: relative;
	font-size: 1.3rem;
	font-weight: 600;
	width: 100%;
	height: auto;
	padding: 4px 8px;
}

.grid-button .icon img {
	max-width: 100%;
	max-height: 100%;
	height: auto;
	object-fit: contain;
}

.grid-button svg {
	margin-bottom: 1rem;
	fill: white;
}

.grid-button:hover {
	color: white;
	background-color: var(--regular-color-hover);
}

.grid-button.kip {
	background-color: var(--kip-color);
}

.grid-button.kip:hover {
	background-color: var(--kip-color-hover);
}

.grid-button.daerah {
	background-color: var(--daerah-color);
}

.grid-button.daerah:hover {
	background-color: var(--daerah-color-hover);
}

.grid-button.ut {
	background-color: var(--ut-color);
}

.grid-button.ut:hover {
	background-color: var(--ut-color-hover);
}

@media (max-width: 600px) {
	.grid-container {
		grid-template-columns: 1fr;
	}
}