/*!
* PT. IMAJIKU CIPTA MEDIA
* Copyright 2019-2024 IMAJIKU.
*/

/* = BUTTON
-------------------------------------------------------------*/
.hc-btn {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	color: #000000;
	background-color: var(--color-gray-100);
	text-decoration: none;
	vertical-align: middle;
	border: 1px solid transparent;
	border-radius: 0.375rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	border-radius: 30px;
	font-family: var(--font-family-2);
	font-weight: 500;
}

/* button variant solid */
.hc-btn.variant-solid {
	color: var(--white) !important;
	background-color: var(--color-button);
	border-color: var(--color-button-border);
	font-family: var(--font-family-2);
	font-weight: 500;
	font-size: 16px;
	padding: 10px 20px;
	min-width: 120px;
	justify-content: center;
	border-width: 2px;
}

.hc-btn.variant-solid:hover {
	color: var(--white) !important;
	background-color: var(--color-button-hover);
	box-shadow: 0px 15px 40px -15px var(--color-button);
	transform: scale(0.98);
}

/* button variant outline */
.hc-btn.variant-outline {
	color: var(--color-button-border) !important;
	border-color: var(--color-button-border);
	background-color: var(--white);
	font-family: var(--font-family-2);
	font-weight: 400;
	font-size: 16px;
	padding: 10px 20px;
	min-width: 120px;
	justify-content: center;
	border-width: 2px;
}

.hc-btn.variant-outline:hover {
	color: var(--white) !important;
	background-color: var(--color-button-border);
	box-shadow: 0px 15px 40px -15px var(--color-button);
	transform: scale(0.98);
}

/* button variant plain */
.hc-btn.variant-plain {
	color: var(--color-button) !important;
	border-color: transparent;
	background-color: transparent;
	font-family: var(--font-family-2);
	font-weight: 400;
	font-size: 16px;
	padding: 0;
	min-width: 120px;
	justify-content: center;
}

.hc-btn.variant-plain:hover {
	color: var(--color-button-hover) !important;
	background-color: transparent;
}

/* button variant blur */
.hc-btn.variant-glass {
	padding: 10px 20px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--white) !important;
	position: relative;
	overflow: hidden;
	z-index: 1;
	/* Tambahkan border agar batas tombol jelas */
	border: 1px solid #847B82;
	background: transparent;
}

.hc-btn.variant-glass::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(255, 255, 255, 0.204);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	filter: blur(0px);
	transition: all 0.3s ease;
	box-shadow: inset 0px 0px 50px 0px;
	background-color: rgb(0 0 0 / 40%);
	transition: all 0.3s ease;
}

/* Efek Hover: Ubah warna background pada ::after, bukan tombolnya */
.hc-btn.variant-glass:hover::after {
	background-color: rgba(255, 255, 255, 0.308);
}

/*button icon*/
.hc-btn-icn {
	position: relative;
	display: inline-flex;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
}

.hc-btn-icn i,
.hc-btn-icn svg,
.hc-btn-icn span {
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

/*button disabled*/
.hc-btn[disabled],
.hc-btn.disabled {
	background-color: var(--color-gray-600) !important;
	border-color: var(--color-gray-600) !important;
	color: var(--white) !important;
	opacity: 0.5;
}

.hc-btn[disabled]:hover,
.hc-btn.disabled:hover {
	background-color: var(--color-gray-600) !important;
	border-color: var(--color-gray-600) !important;
	color: var(--white) !important;
	cursor: not-allowed;
}

/*button type button like link*/
.btn-mjk-link {
	background-color: transparent !important;
	padding: 0;
}

/* =BUTTON VARIATION
------------------------------------------------------------ */
/* button sign in up sosmed */
.btn-signas {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	color: var(--color-text-1) !important;
	border: 1px solid var(--color-gray-400);
	background-color: var(--white);
	min-height: 42px;
	padding: 3px 12px 3px;
	font-family: var(--font-family-2);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.2;
	transition: all 0.6s ease;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	column-gap: 10px;
}

.btn-signas:hover {
	background-color: var(--color-gray-50);
	border-color: var(--color-gray-400);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

.btn-signas img {
	display: block;
	width: 20px;
	height: 20px;
}

.btn-signas:visited,
.btn-signas:link {
	color: var(--white);
}

.btn-signas:focus,
.btn-signas:focus-visible {
	outline: none;
}

/* button social */
.btn-facebook {
	background-color: #3b5998 !important;
	color: var(--white) !important;
	border-color: #3b5998 !important;
}

.btn-twitter {
	background-color: #00aced !important;
	color: var(--white) !important;
	border-color: #00aced !important;
}

.btn-googleplus {
	background-color: #dd4b39 !important;
	color: var(--white) !important;
	border-color: #dd4b39 !important;
}

.btn-instagram {
	background-color: #517fa4 !important;
	color: var(--white) !important;
	border-color: #517fa4 !important;
}

.btn-pinterest {
	background-color: #cb2027 !important;
	color: var(--white) !important;
	border-color: #cb2027 !important;
}

.btn-youtube {
	background-color: #b00000 !important;
	color: var(--white) !important;
	border-color: #b00000 !important;
}

.btn-facebook i,
.btn-twitter i,
.btn-googleplus i,
.btn-instagram i,
.btn-pinterest i,
.btn-youtube i {
	color: var(--white) !important;
}

.btn-facebook:hover,
.btn-facebook:hover i,
.btn-twitter:hover,
.btn-twitter:hover i,
.btn-googleplus:hover,
.btn-googleplus:hover i,
.btn-instagram:hover,
.btn-instagram:hover i,
.btn-pinterest:hover,
.btn-pinterest:hover i,
.btn-youtube:hover,
.btn-youtube:hover i {
	color: var(--white) !important;
	opacity: 0.8;
}

/*button linear gradient*/
.btn-linear-gradient {
	color: var(--white) !important;
	background-image: linear-gradient(to right, #FF512F 50%, #DD2476 100%);
	border: 2px solid transparent;
	border-image: linear-gradient(to right, #FF512F 50%, #DD2476 100%);
	border-image-slice: 1 !important;
}

.btn-linear-gradient:hover {
	color: #FF512F !important;
	background: transparent;
}

/*button radial gradient*/
.btn-radial-gradient {
	color: var(--white) !important;
	background-image: radial-gradient(circle, #FF512F 50%, #DD2476 100%);
	border: 2px solid transparent;
	border-image: radial-gradient(circle, #FF512F 50%, #DD2476 100%);
	border-image-slice: 1 !important;
}

.btn-radial-gradient:hover {
	color: #FF512F !important;
	background: transparent;
}

/*3d button*/
.btn-3d {
	box-shadow: 4px 4px var(--color-button-hover);
	-webkit-box-shadow: 4px 4px var(--color-button-hover);
	-moz-box-shadow: 4px 4px var(--color-button-hover);
}

.btn-3d:hover {
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

.btn-3d-hvr:hover {
	box-shadow: 4px 4px var(--color-button);
	-webkit-box-shadow: 4px 4px var(--color-button);
	-moz-box-shadow: 4px 4px var(--color-button);
}

/*button hover effect push-out-horizontal*/
.btn-mjk.effect-push-out-horizontal {
	position: relative;
	background-color: var(--color-button);
}

.btn-mjk.effect-push-out-horizontal::before {
	background: var(--white);
	border-radius: .25rem;
	-webkit-border-radius: .25rem;
	-moz-border-radius: .25rem;
}

.btn-mjk.effect-push-out-horizontal:hover,
.btn-mjk.effect-push-out-horizontal:focus,
.btn-mjk.effect-push-out-horizontal:active {
	color: var(--color-button) !important;
}

.btn-mjk.effect-push-out-horizontal:hover i,
.btn-mjk.effect-push-out-horizontal:focus i,
.btn-mjk.effect-push-out-horizontal:active i {
	color: var(--color-button) !important;
}

/*button hover effect push-in-horizontal*/
.btn-mjk.effect-push-in-horizontal {
	position: relative;
	background-color: var(--white);
	border-color: var(--color-button);
}

.btn-mjk.effect-push-in-horizontal::before {
	background: var(--color-button);
	border-radius: .25rem;
	-webkit-border-radius: .25rem;
	-moz-border-radius: .25rem;
}

.btn-mjk.effect-push-in-horizontal:hover,
.btn-mjk.effect-push-in-horizontal:focus,
.btn-mjk.effect-push-in-horizontal:active {
	color: var(--color-button) !important;
}

/*button hover effect swipe-right*/
.btn-mjk.effect-swipe-right::before {
	background: var(--white);
	border-radius: .25rem;
	-webkit-border-radius: .25rem;
	-moz-border-radius: .25rem;
}

.btn-mjk.effect-swipe-right:hover,
.btn-mjk.effect-swipe-right:focus,
.btn-mjk.effect-swipe-right:active {
	color: var(--color-button) !important;
}

/*button hover effect swipe-left*/
.btn-mjk.effect-swipe-left::before {
	background: var(--white);
	border-radius: .25rem;
	-webkit-border-radius: .25rem;
	-moz-border-radius: .25rem;
}

.btn-mjk.effect-swipe-left:hover,
.btn-mjk.effect-swipe-left:focus,
.btn-mjk.effect-swipe-left:active {
	color: var(--color-button) !important;
}

/*button hover effect scale*/
.effect-scale-out:hover,
.effect-scale-out:focus,
.effect-scale-out:active {
	transform: scale(0.9);
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
}

.effect-scale-in:hover,
.effect-scale-in:focus,
.effect-scale-in:active {
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	transform: scale(1.09) perspective(1px) translateZ(0);
	-webkit-transform: scale(1.09) perspective(1px) translateZ(0);
	-moz-transform: scale(1.09) perspective(1px) translateZ(0);
}

/*button hover effect scale*/
.effect-rotate:hover i,
.effect-rotate:hover span {
	transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
}

.effect-rotate:hover i,
.effect-rotate:hover svg,
.effect-rotate:hover span {
	transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
}

.effect-rotateUp:hover i,
.effect-rotateUp:hover svg,
.effect-rotateUp:hover span {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

.effect-rotateDown:hover i,
.effect-rotateDown:hover svg,
.effect-rotateDown:hover span {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

/*button hover effect translate*/
.effect-translateLeft:hover i,
.effect-translateLeft:hover svg,
.effect-translateLeft:hover span {
	transform: translateX(-5px);
	-webkit-transform: translateX(-5px);
	-moz-transform: translateX(-5px);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

.effect-translateRight:hover i,
.effect-translateRight:hover svg,
.effect-translateRight:hover span {
	transform: translateX(5px);
	-webkit-transform: translateX(5px);
	-moz-transform: translateX(5px);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

/*button hover effect animate*/
.effect-slideinTop:hover i,
.effect-slideinTop:hover svg,
.effect-slideinTop:hover span {
	animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}