.de-btn-modern-primary {
	border-radius: 12px;
	padding: 8px 16px;
	font-weight: 600;
	color: white;
	background: linear-gradient(135deg, #6366f1, #4f46e5);
	border: none;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
	transition: all 0.2s ease;
	cursor: pointer;
}

.de-btn-modern-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(99, 102, 241, 0.4);
}

.de-btn-modern-primary:active {
	transform: scale(0.98);
}

.de-btn-modern-success {
	border-radius: 12px;
	padding: 8px 16px;
	font-weight: 600;
	color: white;
	background: linear-gradient(135deg, #22c55e, #16a34a);
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
	transition: 0.2s;
	cursor: pointer;
}

.de-btn-modern-danger {
	border-radius: 12px;
	padding: 8px 16px;
	font-weight: 600;
	color: white;
	background: linear-gradient(135deg, #ef4444, #dc2626);
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
	transition: 0.2s;
	cursor: pointer;
}

.de-btn-modern-success:hover,
.de-btn-outline:hover,
.de-btn-modern-danger:hover {
	transform: translateY(-2px);
}

.de-btn-outline {
	border-radius: 12px;
	padding: 8px 16px;
	font-weight: 600;
	background: transparent;
	border: 1px solid #d1d5db;
	color: #374151;
	transition: 0.2s;
	cursor: pointer;
}

.de-btn-outline:hover {
	background: #f3f4f6;
}

button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

/* Ripple element */
.de-ripple span {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	background: rgba(255, 255, 255, 0.5);
	animation: de-ripple-effect 0.6s linear;
	pointer-events: none;
}

@keyframes de-ripple-effect {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

/*Button baru*/
.glow-on-hover {
	/*width: 220px;
	height: 50px;*/
	height: 30px;
	border: none;
	outline: none;
	color: #fff;
	background: #111;
	cursor: pointer;
	position: relative;
	z-index: 0;
	border-radius: 10px;
}

.glow-on-hover:before {
	content: '';
	background: linear-gradient(
		45deg,
		#ff0000,
		#ff7300,
		#fffb00,
		#48ff00,
		#00ffd5,
		#002bff,
		#7a00ff,
		#ff00c8,
		#ff0000
	);
	position: absolute;
	top: -2px;
	left: -2px;
	background-size: 400%;
	z-index: -1;
	filter: blur(5px);
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	animation: glowing 20s linear infinite;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	border-radius: 10px;
}

.glow-on-hover:active {
	color: #000;
}

.glow-on-hover:active:after {
	background: transparent;
}

.glow-on-hover:hover:before {
	opacity: 1;
}

.glow-on-hover:after {
	z-index: -1;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: #111;
	left: 0;
	top: 0;
	border-radius: 10px;
}

@keyframes glowing {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 400% 0;
	}
	100% {
		background-position: 0 0;
	}
}