/* From Uiverse.io by gksckt */
/* edit with me */
.button {
	position: relative;
	padding: 0.6em 1.5em 0.6em 2.5em;
	border: none;
	margin: 5px;
	border-radius: 30px;
	background-color: #fff;
	color: #004799;
	font-weight: bold;
	font-size: 1rem;
	cursor: pointer;
	overflow: hidden;
	/* ✨ Tambahan efek shadow */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
		0 6px 20px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.button.blue {
	background-color: #004799;
	color: #fff;
}

.button.green {
	background-color: #25D366;
	color: #fff;
}

.button.blue:hover {
	background-color: #2c80b4;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2),
		0 10px 25px rgba(0, 0, 0, 0.3);
}

.button.green:hover {
	background-color: #1ebc5a;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2),
		0 10px 25px rgba(0, 0, 0, 0.3);
}

.button.green::before {
	content: "";
	position: absolute;
	left: 1em;
	top: 50%;
	transform: translateY(-50%);
	width: 1.2em;
	height: 1.2em;
	background-color: currentColor;
	mask: url('https://img.icons8.com/?size=100&id=16733&format=png&color=FFFFFF') no-repeat center / contain;
	animation: none;
	opacity: 1;
}

.button::before {
	content: "";
	position: absolute;
	left: 1em;
	top: 50%;
	transform: translateY(-50%);
	width: 1em;
	height: 1em;
	background-color: currentColor;
	mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="M240 128a15.79 15.79 0 0 1-10.5 15l-63.44 23.07L143 229.5a16 16 0 0 1-30 0l-23.06-63.44L26.5 143a16 16 0 0 1 0-30l63.44-23.06L113 26.5a16 16 0 0 1 30 0l23.07 63.44L229.5 113a15.79 15.79 0 0 1 10.5 15"/></svg>') no-repeat center / contain;
	animation: spin 2s linear infinite;
	opacity: 1;
}


@keyframes spin {
	to {
		transform: translateY(-50%) rotate(360deg);
	}
}

.button:hover {
	background-color: #fff;
	transform: scale(1.05);
}