body,
html {
	margin: 0;
	padding: 0;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	background-color: #f5f5f5;
}

@font-face {
	font-family: "Alinore";
	src: url("../fonts/Alinore.otf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Inkpot";
	src: url("../fonts/InkPot.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Joan";
	src: url("../fonts/Joan/Joan-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

#topbar {
	position: relative;
	z-index: 2;
	background-color: transparent;
	color: #fff;
	padding: 10px 0;
}

#topbar .logo {
	width: auto;
	height: auto;
	max-height: 75px;
}

#topbar #menu {
    font-family: "Alinore";
    font-weight: 400;
    font-size: 45px;
    line-height: 54px;
    text-align: center;
    text-decoration: none;

    /* Efek silver metallic pada teks */
    background: linear-gradient(90deg,
        #bfbfbf 0%, 
        #ffffff 25%, 
        #9c9c9c 50%, 
        #ffffff 75%, 
        #bfbfbf 100%
    );
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    display: inline-block;
    animation: silverPulse 4s linear infinite; /* Animasi halus pada warna */
}

/* Animasi tone silver bergerak lembut */
@keyframes silverPulse {
    0%   { background-position: 0% center; }
    50%  { background-position: 200% center; }
    100% { background-position: 0% center; }
}




.icon-link {
	color: #fff;
	font-size: 1.2rem;
	text-decoration: none;
	transition: color 0.3s ease;
}

.icon-link:hover {
	color: #666;
}

.header-icon {
	width: 24px; /* Fixed width for consistency */
	height: auto; /* Maintain aspect ratio */
	object-fit: contain; /* Ensure image fits within dimensions */
	vertical-align: middle;
	display: block; /* Removes bottom spacing issues */
}

.icon-link {
	display: flex; /* Use flexbox for centering */
	align-items: center;
	justify-content: center;
	height: 40px; /* Fixed height for the link container */
	width: 40px; /* Fixed width for the link container */
}

.search-container {
	position: relative;
	display: flex;
	align-items: center;
}

.search-form {
	position: absolute;
	right: 100%;
	width: 0;
	overflow: hidden;
	transition: width 0.3s ease-in-out;
	display: flex;
	align-items: center;
}

.search-form i {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 8px 15px;
	border: none;
	border-radius: 20px;
	backdrop-filter: blur(10px);
	color: #fff;
}

.search-input {
	width: 300px;
	padding: 8px 15px;
	border: none;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	color: #fff;
}

.search-input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.search-container:hover .search-form {
	width: 300px;
	margin-right: 10px;
}

.search-input:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.15);
}

#slide {
	margin-top: -100px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	padding: 200px 0 0 0;
	z-index: 1;

	min-height: 500px;
	background-image: url("../images/bg-slider.jpg");
	/* background: linear-gradient(180deg, #000 45%, #00c8ff 115%); */
}

body..no-webp #slide,
body.no-js #slide {
	background-image: url("../images/bg-slider.jpg");
}

body..webp #slide {
	background-image: url("../images/bg-slider.webp");
}

#slide-awan {
	/* width: 100%;
	height: 200px; */
	/* background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	bottom: 0; */
}
/* Custom Slider Styles - 3D Carousel */
.custom-slider-container {
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	overflow: visible;
	/* padding: 50px 0; */
}

.slider-wrapper {
	position: relative;
	width: 100%;
	height: 550px; /* Increased height to prevent clipping */
	overflow: visible; /* Allow overflow for scaled items */
}

.slider-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.slider-item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px; /* Same as width for square shape */
	transform: translate(-50%, -50%);
	transition: all 0.5s ease-in-out;
	opacity: 0;
	z-index: 0;
}

.slider-item img {
	width: 100%;
	height: 100%; /* Match container height */
	display: block;
	object-fit: contain; /* Maintain aspect ratio without distortion */
}

/* Carousel Positions */
.item-center {
	transform: translate(-50%, -50%) scale(1); /* Removed scale */
	opacity: 1;
	z-index: 10;
}

.item-left {
	transform: translate(-170%, -50%) scale(1); /* Removed scale */
	opacity: 0.8;
	z-index: 5;
}

.item-right {
	transform: translate(70%, -50%) scale(1); /* Removed scale */
	opacity: 0.8;
	z-index: 5;
}

.item-hidden {
	transform: translate(-50%, -50%) scale(0.5);
	opacity: 0;
	z-index: 0;
	pointer-events: none;
}

.slider-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	z-index: 20;
	padding: 0;
}

.prev-btn {
	left: -50px;
}

.next-btn {
	right: -50px;
}

.slider-nav img {
	width: 40px;
	height: auto;
	transition: transform 0.2s;
}

.slider-nav:hover img {
	transform: scale(1.1);
}

#slide .slick-current {
	transform: scale(1.1);
	z-index: 999;
}

/* Add custom arrows styling */
.slick-prev,
.slick-next {
	width: 50px;
	height: 50px;
	z-index: 1000;
}

.slick-prev:before,
.slick-next:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
}

.slick-prev:before {
	background-image: url("../images/kiri.png");
}

body..no-webp .slick-prev:before,
body.no-js .slick-prev:before {
	background-image: url("../images/kiri.png");
}

body..webp .slick-prev:before {
	background-image: url("../images/kiri.webp");
}

.slick-next:before {
	background-image: url("../images/kanan.png");
}

body..no-webp .slick-next:before,
body.no-js .slick-next:before {
	background-image: url("../images/kanan.png");
}

body..webp .slick-next:before {
	background-image: url("../images/kanan.webp");
}

#slide .container {
	position: relative;
	z-index: 1;
}

.slide-bottom-img {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
}

/* 
#slide .text-1 {
    font-family: 'Alinore';
    font-style: normal;
    font-weight: 400;
    font-size: 250px;
    line-height: 220px;
    color: #F8B74E;
}

#slide .text-2 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    color: #F8B74E;
}

#slide .text-3 {
    font-family: 'Alinore';
    font-style: normal;
    font-weight: 400;
    font-size: 250px;
    line-height: 220px;
    color: #F8B74E;
}

#slide .text-4 {
    text-align: right;
    font-family: 'Alinore';
    font-style: normal;
    font-weight: 400;
    font-size: 96px;
    line-height: 116px;

    color: #F8B74E;
}

#slide .text-5 {
    font-family: 'Joan';
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 41px;

    color: #DEE2E6;
    text-align: right;
}

#slide .text-6 {
    font-family: 'Joan';
    font-style: normal;
    font-weight: 400;
    font-size: 21px;
    line-height: 27px;
    color: #DEE2E6;
    text-align: right;
}

.slide-red-fire {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: auto;
    height: auto;
} */

#running-text {
	/* background-color: #623FA5; */
	background: linear-gradient(88.43deg, #000000 24.57%, #8b00f5 74.37%);

	color: #f8b74e;
	padding: 10px 0;
	overflow: hidden;
	position: relative;
	font-family: "Alinore";
	font-style: normal;
	font-weight: 400;
	font-size: 31px;
	line-height: 37px;
}

#running-text .content {
	display: inline-block;
	white-space: nowrap;
	animation: marquee 20s linear infinite;
	position: relative;
}

#running-text .content::before,
#running-text .content::after {
	content: attr(data-text);
	position: absolute;
	white-space: nowrap;
}

#running-text .content::before {
	left: 100%;
}

@keyframes marquee {
	0% {
		transform: translateX(100vw);
	}

	100% {
		transform: translateX(-100%);
	}
}

#main-content {
	padding-top: 100px;
	position: relative;
	/* Set the base background color */
	/* background-color: rgb(0, 0, 0); */

	background-image: url("../images/bg-dark.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 1;
}

body..no-webp #main-content,
body.no-js #main-content {
	background-image: url("../images/bg-dark.jpg");
}

body..webp #main-content {
	background-image: url("../images/bg-dark.webp");
}

#main-content::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-color: #fff;
}

#category h2 {
	margin-bottom: 0 !important;
}

#category .subtitle {
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 23px;
	text-align: center;

	/* color: #E0E0E0; */
}

#main-content > * {
	position: relative;
	z-index: 2;
}

#category {
	padding: 10px 0;
}

#category .category-box {
	background-image: url("../img/category-bg.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	width: 100%;
	height: 600px;
	margin-bottom: 20px;
}

body..no-webp #category .category-box,
body.no-js #category .category-box {
	background-image: url("../img/category-bg.jpg");
}

body..webp #category .category-box {
	background-image: url("../img/category-bg.webp");
}

#category .category-box .category-item {
	position: relative;
	width: 100%;
	height: 300px;
	/* Adjust the height as needed */
	margin: 10px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	overflow: hidden;
}

#category .category-box a {
	text-decoration: none;
}

#category .category-box .category-title {
	font-family: "Alinore";
	font-style: normal;
	font-weight: 400;
	font-size: 96px;
	/* line-height: 116px; */
	color: #ffffff;
	position: relative;
	z-index: 2;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 30px;
	/* Optional: Add a background color with transparency for better readability */
}

#category .category-box .category-title:hover {
	background: linear-gradient(
		180deg,
		rgba(183, 92, 255, 0.65) 0%,
		rgba(103, 26, 228, 0.65) 100%
	);
	color: #f8b74e;
	transition: background 0.5s ease, color 0.5s ease;
}

#category h2,
#new-items h2,
#hot-items h2,
#relic-discovery h2 {
	font-family: "Alinore";
	font-style: normal;
	font-weight: 400;
	font-size: 110px;
	line-height: 106px;
	color: #f8b74e;

	margin: 0 0 0px 0;
}

#new-items p {
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 21px;
	line-height: 27px;
	align-items: center;
	text-align: center;

	color: #dee2e6;

	margin-bottom: 50px;
}

#flint {
	background-image: url("../images/star.png");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

body..no-webp #flint,
body.no-js #flint {
	background-image: url("../images/star.png");
}

body..webp #flint {
	background-image: url("../images/star.webp");
}

#relic-discovery h3 {
	font-family: "InkPot";
	font-style: normal;
	font-weight: 400;
	font-size: 34px;
	line-height: 44px;
	align-items: center;
	text-align: center;

	/* GOLD */
	background: linear-gradient(
		204.81deg,
		#ffffff -1.62%,
		#ff9d00 24.97%,
		#fff5e4 44.51%,
		#ffb846 77.51%,
		#7e4e00 91.25%,
		#000000 104.99%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}

#relic-discovery p {
	font-family: "Jim Nightshade";
	font-style: normal;
	font-weight: 400;
	font-size: 21px;
	line-height: 28px;
	/* identical to box height, or 132% */

	color: #ffffff;
}

#relic-discovery .edition {
	padding: 3rem 1rem;
	border: 1px solid #f8b74e;
	border-radius: 100px;
	background: linear-gradient(0deg, #00579a -2.05%, rgba(0, 0, 0, 0) 40.1%);
}

#relic-discovery .edition hr {
	color: #f8b74e;
	opacity: 1;
}

#relic-discovery .edition-desc {
	padding: 2rem 1rem;
	border: 1px solid #f8b74e;
	border-radius: 50px;
	background: linear-gradient(0deg, #00579a -2.05%, rgba(0, 0, 0, 0) 40.1%);
}

#relic-discovery .edition-desc hr {
	color: #f8b74e;
	opacity: 1;
}

#relic-discovery .card h4 {
	font-family: "Alinore";
	font-style: normal;
	font-weight: 400;
	font-size: 30px;
	line-height: 28px;
	/* or 93% */

	background: linear-gradient(
		180deg,
		#ffc05b 14.42%,
		#ffedd0 61.06%,
		#e0a23f 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;

	text-align: center;
}

.card-item {
	background-image: url("../images/kotak-border.png");
	/* background-color: rgba(244, 233, 196, 0.09); */

	background-size: contain;
	background-repeat: no-repeat;
	background-color: transparent;
	/* border-radius: 20px; */
	padding: 10px;
	position: relative;
	/* border: 2px solid transparent; */
	z-index: 999;
	border: none;
}

body..no-webp .card-item,
body.no-js .card-item {
	background-image: url("../images/kotak-border.png");
}

body..webp .card-item {
	background-image: url("../images/kotak-border.webp");
}

.card-item .card-body {
	/* background-color: #000 !important; */
	/* background-image: url("../images/kotak-border.png"); */
	/* border-radius: 20px; */
}

/* .card-item::before {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(
		90deg,
		#ffbc53 0%,
		#784c21 35.1%,
		#ffe9be 63.46%,
		#ffde67 100%
	);
	border-radius: 20px;
	z-index: -1;
} */

.card-item img {
	border-radius: 20px;
}

.card-item img:hover {
	transform: scale(1.05);
	transition: transform 0.5s ease;
	object-fit: cover;
	/* Ensure the image is cropped when zoomed */
}

.card-item .title {
	font-family: "InkPot";
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	line-height: 28px;
	/* or 126% */

	color: #e2e2e1;

	margin: 1rem 0;
}

.card-item .price {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-size: 16.53px;
	line-height: 28px;
	/* identical to box height, or 168% */

	color: #ffbd60;
	margin: 10px 0;
}

.card-item .btn-item,
.cart-buttons .btn-item {
	background: linear-gradient(214.02deg, #b75cff 6.04%, #671ae4 92.95%);
	border-radius: 10px;
	border: none;

	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
	/* identical to box height */

	color: #ffffff;
}

.card-item .btn-item:hover,
.cart-buttons .btn-item:hover {
	background: linear-gradient(
		214.02deg,
		#f8b74e 6.04%,
		rgba(222, 75, 12, 0.87) 92.95%
	);
	color: #ffffff;
}

.card-item .btn-love {
	border-radius: 50%;
	color: #000;
	background-color: #d9d9d9;
}

.card-item .btn-love:hover {
	color: #e02626;
	background-color: #f8b74e;
}

.btn-outline-primary {
	border: 1px solid #a6a6a6;
	border-radius: 18px;
	font-family: "Alinore";
	font-style: normal;
	font-weight: 400;
	font-size: 30px;
	line-height: 36px;
	color: #f8b74e !important;
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	padding-left: 2rem;
	padding-right: 2rem;
}

.btn-outline-primary:hover {
	background-color: #f8b74e !important;
	color: #ffffff !important;
	border-color: #f8b74e !important;
}

#footer .social a {
	color: #6831d0;
	height: 37px;
	font-size: 37px;
}

#footer .social a:hover {
	color: #f8b74e;
}

.bg-footer {
	background-image: url("../images/bg-footer.png");
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
}

body..no-webp .bg-footer,
body.no-js .bg-footer {
	background-image: url("../images/bg-footer.png");
}

body..webp .bg-footer {
	background-image: url("../images/bg-footer.webp");
}
#footer {
	height: 300px;
	/* background-image: url("../images/bg-footer.png");
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat; */
	/* padding-bottom: 350px; */
}
#footer-awan {
	/* width: 100%;
	height: 350px;
	background-image: url("img/footer-bg.png");
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat; */
}

#footer .footer-text {
	font-family: "Alinore";
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 29px;
	display: flex;
	align-items: center;
	text-align: center;
	color: #f8b74e !important;
	justify-content: center;
}

.social-icon {
	transition: transform 0.3s ease;
}

.social-icon:hover {
	transform: scale(1.2) rotate(5deg);
}

#copyright {
	background-color: #fff;

	/* Copyright © 2025 - Chibizen Inc. - All Rights Reserved */

	font-family: "Inter";
	font-style: normal;
	font-weight: 300;
	font-size: 18px;
	line-height: 24px;
	align-items: center;
	text-align: center;

	color: #000000;
	padding-top: 1rem;
}

#copyright p {
	margin-bottom: 0;
	padding-bottom: 1rem;
}

.cart-container {
	position: relative;
}

.cart-popup {
	position: absolute;
	top: 100%;
	right: 0;
	width: 300px;
	background: rgba(54, 49, 53, 0.9);
	backdrop-filter: blur(10px);
	border-radius: 10px;
	padding: 15px;
	display: none;
	/* z-index: 1050; */
	margin-top: 10px;
	transition: opacity 0.2s ease-in-out;
}

.cart-container:hover .cart-popup {
	display: block;
}

.cart-items {
	max-height: 300px;
	overflow-y: auto;
}

.cart-item {
	display: flex;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-item:last-child {
	border-bottom: none;
}

.cart-item-img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 5px;
	margin-right: 10px;
}

.cart-item-details {
	flex: 1;
}

.cart-item-title {
	color: #e2e2e1;
	font-size: 14px;
	font-weight: 500;
	font-family: "Inter";
}

.cart-item-size {
	color: #e2e2e1;
	font-size: 12px;
	font-family: "Inter";
}

.cart-item-price {
	color: #e2e2e1;
	font-size: 13px;
}

.cart-item-price .price,
.cart-total .price {
	color: #f8b74e;
}

.cart-total {
	text-align: center;
	padding: 15px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: 10px;
	color: #e2e2e1;
	font-weight: 600;
}

.cart-buttons {
	/* margin-top: 10px; */
	text-align: center;
}

.cart-buttons .btn {
	font-family: "Inter";
	width: 200px;
	font-size: 0.875rem;
	border-radius: 10px !important;
}

.cart-buttons .btn-outline-primary {
	border-radius: 10px !important;
	color: #fff;
}

.cart-buttons .btn-outline-primary:hover {
	border-radius: 10px !important;
	background-color: #d9d9d9 !important;
}

/* MENU v3*/
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* This creates a very light, almost transparent background color */
	background-color: rgba(255, 255, 255, 0.01);
	/* The magic for blurring the content *behind* the overlay */
	backdrop-filter: blur(10px);
	/* This is for cross-browser support, especially older versions of Safari */
	-webkit-backdrop-filter: blur(10px);
	z-index: 900;
	display: none;
}

.menu {
	top: -100%;
	/* Start above the viewport */
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../images/menu.png") center top;
	background-size: 1300px;
	/* Center the background image */
	background-repeat: no-repeat;
	padding-top: 10rem;
	transition: top 0.5s ease;
	z-index: 1000;
}

body..no-webp .menu,
body.no-js .menu {
	background-image: url("../images/menu.png");
}

body..webp .menu {
	background-image: url("../images/menu.webp");
}

.menu.active {
	top: 0;
	/* Slide into view */
}

.menu-fire-img {
	max-width: 300px;
	height: auto;
}

.menu-link {
	font-family: "Alinore";
	font-style: normal;
	font-weight: 400;
	font-size: 95px;
	line-height: 1.2;
	display: flex; /* Changed to flex for centering */
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	color: #e7c984;
	text-decoration: none;
	transition: color 0.3s ease;
	height: 100%; /* Ensure full height for alignment */
}

.menu-link:hover {
	color: #21cebe;
}

.menu a {
	/* Inherit or remove conflicting styles */
	text-decoration: none;
	color: #e7c984;
}

.menu a:hover {
	color: #21cebe;
	text-decoration: solid;
}

#btn-close-menu {
	cursor: pointer;
	transition: transform 0.3s ease;
	max-width: 80px;
	height: auto;
	position: absolute;
	top: 745px; /* Adjusted slightly */
	left: 50%;
	transform: translateX(-50%);
	display: none; /* Hidden by default */
}

/* #btn-close-menu:hover {
	transform: scale(1.1);
} */

/* .menu {
	position: absolute;
	top: 600px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
} */

/* END MENU v3 */

#detail-product {
	background-color: #000;
	/* background-image:

        radial-gradient(
			circle at 15% 15%,
			#ffec8b 1px,
			transparent 10px
		),
		radial-gradient(circle at 5% 30%, #ffec8b 1px, transparent 10px),
		radial-gradient(circle at 20% 45%, #ffec8b 1px, transparent 10px),
		radial-gradient(circle at 10% 70%, #ffec8b 1px, transparent 10px),
		radial-gradient(circle at 45% 40%, #ffec8b 1px, transparent 10px),
		radial-gradient(circle at 50% 80%, #ffec8b 1px, transparent 10px),
		radial-gradient(circle at 70% 35%, #ffec8b 1px, transparent 10px),
		radial-gradient(circle at 85% 60%, #ffec8b 1px, transparent 10px),
		radial-gradient(circle at 90% 5%, #ffec8b 1px, transparent 10px),
		radial-gradient(circle at 80% 10%, #ffec8b 1px, transparent 10px),
			radial-gradient(ellipse at 50% 0%, #00d9ff 0%, transparent 50%),
		radial-gradient(ellipse at 50% 100%, #00d9ff 0%, transparent 50%); */
	padding-top: 100px;
	/* background-image: url('../img/bg-content.png'); */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-top: 200px;
	position: relative;
	margin-top: -7rem;
	min-height: 100vh;
	z-index: 1;
}

#detail-product::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 1;
}

#detail-product > * {
	position: relative;
	z-index: 2;
}

.breadcrumb-item + .breadcrumb-item::before {
	color: white;
}

.breadcrumb,
.breadcrumb-item.active {
	color: #fff !important;
}

#detail-product .breadcrumb,
#detail-product .breadcrumb .breadcrumb-item,
#detail-product .breadcrumb .breadcrumb-item a {
	color: #fff;
}

.item-info h2 {
	font-family: "Alinore";
	font-style: normal;
	font-size: 70px;
	line-height: 48px;
	letter-spacing: 0%;
	color: #f8b74e;
}

.item-price {
	font-family: "Alinore";
	font-style: normal;
	font-weight: 400;
	font-size: 70px;
	line-height: 48px;

	color: #f8b74e;

	margin-bottom: 2rem;
}

/* Product Detail Form Styling */
.detail-option-heading {
	/* font-family: Inter;
    font-weight: 600;
    font-size: 17px;
    line-height: 20.57px;
    letter-spacing: 0%;
    color: #fff; */

	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 22px;
	display: flex;
	align-items: center;
	vertical-align: center;

	color: #dee2e6;
}

.detail-option-heading span {
	font-size: 14px;
	color: #999;
}

.detail-description,
.detail-description span {
	font-family: "Joan" !important;
	font-style: normal;
	font-weight: 400;
	font-size: 20px !important;
	line-height: 25px;
	text-align: justify;

	color: #ffffff;
}

/* Size Options */
.size-options {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.detail-option .row {
	margin: 0;
}

.size-option {
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

.size-option input[type="radio"] {
	display: none;
}

.size-option span {
	font-family: "Inter";
	font-size: 18px;
	color: #ffffff;
}

.size-option:hover {
	background: rgba(248, 183, 78, 0.3);
}

.size-option input[type="radio"]:checked + span {
	color: #f8b74e;
}

.size-option input[type="radio"]:checked + .size-option {
	background: rgba(248, 183, 78, 0.5);
	border: 2px solid #f8b74e;
}

/* Color Options */
.color-option {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 0.3s ease;
}

.color-option:hover {
	transform: scale(1.1);
}

.color-option input[type="radio"]:checked + .color-option {
	border: 2px solid #f8b74e;
}

/* Quantity Selector */
.quantity-selector {
	display: flex;
	align-items: center;
	width: fit-content;
	background-color: #f8b74e;

	border-radius: 20px;
	border: none;
}

.qty-btn {
	background: transparent;
	width: 40px;
	height: 40px;
	/* border: none; */
	color: #000;
	font-size: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
}

.qty-btn:hover {
	/* color: #F8B74E; */
}

.qty-input {
	width: 60px;
	height: 40px;
	background: transparent !important;

	border: none;
	color: #ffffff;
	text-align: center;
	font-size: 18px;
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.btn-waitlist {
	background: linear-gradient(214.02deg, #0b2141 6.04%, #1a9ae4 92.95%);
	background-size: 200% 200%;
	border-radius: 10px;
	font-family: "Alinore";
	font-style: normal;
	font-weight: 400;
	font-size: 30px;
	line-height: 24px;
	color: #ffffff;
	padding: 12px 30px;

	transition: 
		background-position 0.6s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.btn-waitlist:hover {
	background-position: right center;
	transform: translateY(-3px);
	box-shadow: 
		0 10px 25px rgba(26, 154, 228, 0.35),
		0 0 15px rgba(26, 154, 228, 0.4);
}

.btn-waitlist:active {
	transform: translateY(-1px);
	box-shadow: 0 5px 15px rgba(26, 154, 228, 0.25);
}


/* Buy Now Button */
.btn-main {
	background: linear-gradient(214.02deg, #b75cff 6.04%, #671ae4 92.95%);
	border: 2px solid #ffb54c;
	border-radius: 50px;

	padding: 12px 30px;
	transition: all 0.3s ease;

	/* Add to cart */
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 21px;
	line-height: 27px;

	color: #f4d793;
}

.btn-submit {
	background: linear-gradient(214.02deg, #5e1ea2 6.04%, #0b2141 92.95%);
	border-radius: 23px;

	padding: 12px 50px;
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
	/* identical to box height */
	border: 1px solid #ffb54c;
	color: #ffb54c;
}

.btn-main:hover {
	background: linear-gradient(
		214.02deg,
		#f8b74e 6.04%,
		rgba(222, 75, 12, 0.87) 92.95%
	);
	border-radius: 50px;
	border: 2px solid #ffb54c;
}

.color-option input[type="radio"] {
	width: 100%;
	height: 100%;
}

input[type="text"] {
	background-color: #fff;
	color: #000;
}

#related-items h2 {
	font-family: "Alinore";
	font-style: normal;
	font-weight: 400;
	font-size: 52px;
	line-height: 63px;

	color: #f8b74e;
}

#category-product h2 {
	font-family: Alinore;
	font-weight: 400;
	font-size: 76px;
	line-height: 91.73px;
	letter-spacing: 0%;
	color: #f8b74e;
}

#category-product {
	padding-top: 100px;

	background-image: url("../images/bg-dark2.jpg");
	background-size: cover;
	background-repeat: no-repeat;

	position: relative;
	margin-top: -7rem;
	min-height: 100vh;
	z-index: 1;
}

body..no-webp #category-product,
body.no-js #category-product {
	background-image: url("../images/bg-dark2.jpg");
}

body..webp #category-product {
	background-image: url("../images/bg-dark2.webp");
}

#category-product::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-color: rgba(0, 0, 0, 0.8); */
	z-index: 1;
}

#category-product > * {
	position: relative;
	z-index: 2;
}

#page {
	padding-top: 100px;
	position: relative;
	z-index: 1;
	margin-top: -7rem;
	background-image: url("../images/bg-dark2.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}

body..no-webp #page,
body.no-js #page {
	background-image: url("../images/bg-dark2.jpg");
}

body..webp #page {
	background-image: url("../images/bg-dark2.webp");
}

#page label,
#page h3 {
	/* color: #fff; */
}

#page::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-color: rgba(0, 0, 0, 0.8); */
	z-index: 1;
}

#page > * {
	position: relative;
	z-index: 2;
}

#page h2 {
	font-family: Alinore;
	font-weight: 400;
	font-size: 76px;
	line-height: 91.73px;
	letter-spacing: 0%;
	color: #f8b74e;
}

#page .page-content {
	padding-bottom: 100px;
	font-family: Joan;
	font-weight: 400;
	font-size: 20px;
	line-height: 25.84px;
	letter-spacing: 0%;
	text-align: left;

	color: #fff;
}

#page .card {
	background: linear-gradient(0deg, #052c4c -47.61%, rgba(0, 0, 0, 0) 159.74%);

	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
	/* identical to box height */

	color: #f4d793;
}

/* login page  style */
#page-login {
	padding-top: 200px;
	position: relative;
	z-index: 1;
	margin-top: -7rem;

	background-image: url("../images/bg-dark2.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	/* min-height: 100vh; */
}
body..no-webp #page-login,
body.no-js #page-login {
	background-image: url("../images/bg-dark2.jpg");
}
body..webp #page-login {
	background-image: url("../images/bg-dark2.webp");
}

#page-login label,
#page-login h3 {
	/* color: #fff; */
}

#page-login::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#page-login > * {
	position: relative;
	z-index: 2;
}

#page-login h5 {
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 21px;
	line-height: 27px;
	align-items: center;
	text-align: center;

	color: #dee2e6;
	margin-bottom: 0px;
}

#page-login h2 {
	font-family: Alinore;
	font-weight: 400;
	font-size: 76px;
	line-height: 91.73px;
	letter-spacing: 0%;
	color: #f8b74e;
}

#page-login .page-content {
	padding-bottom: 100px;
	font-family: Joan;
	font-weight: 400;
	font-size: 20px;
	line-height: 25.84px;
	letter-spacing: 0%;
	text-align: justify;

	color: #fff;
}

#page-login .card {
	background: transparent;
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
	border-radius: 50px;
	color: #ffb74b;
	text-align: center;
	border: 2px solid #ffc23e;
}

#page-login .card input {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.08%, #8e0098 133.33%);
	border-radius: 20px;
	color: #fff;
	text-align: center;
}

#page-login .card input::placeholder {
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	line-height: 19px;
	align-items: center;
	text-align: center;
	color: #b7bcbd;
}

#page-login .form-check-input {
	background: transparent !important;
	border-radius: 5px !important;
	border: 1px solid #fff;
}

#page-login .form-check-input:checked[type="checkbox"] {
	background: #9631a8 !important;
	border-radius: 5px;
}

#page-login a {
	color: #d900d9;
}

/* End Page Login */
/* Page Dashboard */

/* login page  style */
#page-dashboard {
	background-image: url("../images/bg-dark2.jpg");
	background-size: cover;
	/* background-size: 100% 100%; */
	background-repeat: no-repeat;
	padding-top: 200px;
	position: relative;
	z-index: 1;
	margin-top: -7rem;
	/* min-height: 100vh; */
}
body..no-webp #page-dashboard,
body.no-js #page-dashboard {
	background-image: url("../images/bg-dark2.jpg");
}
body..webp #page-dashboard {
	background-image: url("../images/bg-dark2.webp");
}

#page-dashboard label,
#page-dashboard h3 {
	/* color: #fff; */
}

#page-dashboard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#page-dashboard > * {
	position: relative;
	z-index: 2;
}

/* #page-dashboard h5 {
    font-family: 'Joan';
    font-style: normal;
    font-weight: 400;
    font-size: 21px;
    line-height: 27px;
    align-items: center;
    text-align: center;

    color: #DEE2E6;
    margin-bottom: 0px;



} */

#page-dashboard h2 {
	font-family: Alinore;
	font-weight: 400;
	font-size: 76px;
	line-height: 91.73px;
	letter-spacing: 0%;
	color: #f8b74e;
}

#page-dashboard .page-content {
	padding-bottom: 100px;
	font-family: Joan;
	font-weight: 400;
	font-size: 20px;
	line-height: 25.84px;
	letter-spacing: 0%;
	text-align: justify;

	color: #fff;
}

#page-dashboard .card {
	background: transparent;
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
	border-radius: 20px;
	color: #ffb74b;
	text-align: center;
	border: 2px solid #f4d793;
}

#page-dashboard .dashboard-card .card-subtitle {
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 21px;
	line-height: 27px;
	color: #f4d793;
}

#page-dashboard .dashboard-card .card-title {
	font-family: Alinore;
	font-weight: 400;
	font-style: Regular;
	font-size: 48px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #f4d793;
}

#page-dashboard .tips-card {
	background: linear-gradient(
		360deg,
		rgba(5, 44, 76, 0.44) -15.68%,
		rgba(12, 104, 178, 0) 111.05%
	) !important;
	text-align: left;
}

#page-dashboard .tips-card .card-title {
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 31px;
	align-items: center;

	color: #f4d793;
}

#page-dashboard .tips-card .card-body {
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 21px;
	line-height: 27px;
	align-items: center;

	color: #dee2e6;

	border: 2px solid #f4d793 !important;
}

.table-card {
	background: linear-gradient(
		360deg,
		rgba(5, 44, 76, 0.44) -15.68%,
		rgba(12, 104, 178, 0) 111.05%
	) !important;
}

.wishlist-card {
	background: linear-gradient(
		360deg,
		rgba(5, 44, 76, 0.44) -15.68%,
		rgba(12, 104, 178, 0) 111.05%
	) !important;
}

.wishlist-card h5 {
	font-family: "Alinore";
	font-style: normal;
	font-weight: 400;
	font-size: 64px;
	line-height: 77px;
	align-items: center;
	text-align: center;

	color: #eed396;
}

.wishlist-card p {
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 21px;
	line-height: 27px;
	align-items: center;
	text-align: center;

	color: #eed396;
}

#page-dashboard .table-card .card-header {
	font-family: Joan;
	font-weight: 400;
	font-style: Regular;
	font-size: 21px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	vertical-align: middle;
	color: #f4d793;
	padding: 20px 20px;
}

#page-dashboard .table-card .table th {
	background-color: transparent;

	font-family: Joan;
	font-weight: 400;
	font-style: Regular;
	font-size: 21px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	vertical-align: middle;
	color: #f4d793;
	padding: 20px 0;

	border-top: 2px solid #f4d793;
	border-bottom: 2px solid #f4d793;
}

#page-dashboard .table-card .table td {
	background-color: transparent;
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 21px;
	line-height: 27px;
	color: #b7bcbd;

	padding: 20px 0;
	border: 1px solid #000000;
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border: none;
}

#page-dashboard .card input {
	/* background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.08%, #8E0098 133.33%); */
	background-color: transparent;
	border-radius: 20px;
	color: #fff;
	text-align: center;
}

#page-dashboard .title {
	font-family: "Alinore";
	font-style: normal;
	font-weight: 400;
	font-size: 36px;
	line-height: 32px;
	align-items: center;
	text-align: center;

	color: #f8b74e;
}

#page-dashboard .form-label {
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 21px;
	line-height: 27px;
	align-items: center;
	text-align: center;

	color: #f4d793;
}

#page-dashboard .card input::placeholder {
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	line-height: 19px;
	align-items: center;
	text-align: center;
	color: #b7bcbd;
}

#page-dashboard .form-check-input {
	background: transparent !important;
	border-radius: 5px !important;
	border: 1px solid #fff;
}

#page-dashboard .form-check-input:checked[type="checkbox"] {
	background: #9631a8 !important;
	border-radius: 5px;
}

#page-dashboard a {
	color: #d900d9;
}

/* End Page Dashboard */

.btn-view-order {
	font-family: Joan;
	font-weight: 400;
	font-style: Regular;
	font-size: 21px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #f4d793 !important;
	padding: 10px 30px;
	text-decoration: none !important;
	border-radius: 30px;
	border: 1px solid #ffd291;
}

.card-sidebar {
	background: linear-gradient(
		360deg,
		rgba(5, 44, 76, 0.44) -15.68%,
		rgba(12, 104, 178, 0) 111.05%
	) !important;
}

.card-sidebar h5 {
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 32px;
	line-height: 41px;
	display: flex;
	align-items: center;

	color: #eed396;
}

.card-sidebar .text-muted {
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 21px;
	/* identical to box height */
	display: flex;
	align-items: center;

	color: #eed396 !important;
}

.avatar-circle {
	width: 50px;
	height: 50px;
	background-color: #9631a8;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.initials {
	color: white;
	font-size: 24px;
	font-weight: bold;
}

.dashboard-nav .nav-link {
	padding: 1rem 1rem;
	border-radius: 5px;
	transition: all 0.3s;
}

.dashboard-nav .nav-link {
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 21px;
	line-height: 27px;
	display: flex;
	align-items: center;

	color: #eed396 !important;

	text-decoration: none !important;
}

.dashboard-nav .nav-link:hover,
.dashboard-nav .nav-link.active {
	background-color: rgba(150, 49, 168, 0.1);
	color: #eed396 !important;

	background: rgba(151, 71, 255, 0.15);
	border-radius: 30px;
}

.dashboard-card {
	border-radius: 10px;
	border: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s;

	background: linear-gradient(
		360deg,
		rgba(5, 44, 76, 0.44) -15.68%,
		rgba(12, 104, 178, 0) 111.05%
	) !important;
}

.dashboard-card:hover {
	transform: translateY(-5px);
}

.dashboard-icon {
	background-color: rgba(150, 49, 168, 0.1);
	width: 50px;
	height: 50px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dashboard-icon i {
	font-size: 24px;
	color: #9631a8;
}

.password-tips {
	padding-left: 1.5rem;
}

.password-tips li {
	margin-bottom: 0.5rem;
}

.mywtable {
	/* border: 1px solid #ccc; */
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
	table-layout: fixed;
}

.mywtable tr {
	/* background-color: #f8f8f8; */
	/* border: 1px solid #ddd; */
	/* padding: .35em; */
}

.mywtable th,
.mywtable td {
	padding: 0.625em;
	text-align: center;
	color: white;
	font-size: 20px;
	font-family: Joan;
	font-weight: 400;
	font-size: 20px;
	line-height: 25.84px;
}

.mywtable th {
	/* font-size: .85em; */
	/* letter-spacing: .1em; */
	padding: 10px;
	/* text-transform: uppercase; */
	background-color: #9631a8;
}

.char-wrap {
	position: relative;
	width: 100%;
	max-width: 1200px;
	height: 800px;
	margin: 50px auto;
	background-image: url(../images/bg-char.png);
	background-size: 140%;
	background-repeat: no-repeat;
	background-position: 57% center;
}

body..no-webp .char-wrap,
body.no-js .char-wrap {
	background-image: url(../images/bg-char.png);
}

body..webp .char-wrap {
	background-image: url(../images/bg-char.webp);
}

.item {
	position: absolute;
	user-select: none;
	cursor: pointer;
}

/* Ukuran karakter */
.big img {
	width: 260px;
}
.medium img {
	width: 140px;
}
.small img {
	width: 90px;
}

/* ======== ANIMASI RANDOM ======== */
@keyframes float1 {
	0%,
	100% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(15px, -20px);
	}
	50% {
		transform: translate(-10px, -15px);
	}
	75% {
		transform: translate(20px, 10px);
	}
}

@keyframes float2 {
	0%,
	100% {
		transform: translate(0, 0);
	}
	33% {
		transform: translate(-18px, 15px);
	}
	66% {
		transform: translate(12px, -18px);
	}
}

@keyframes float3 {
	0%,
	100% {
		transform: translate(0, 0);
	}
	20% {
		transform: translate(10px, 20px);
	}
	40% {
		transform: translate(-15px, 10px);
	}
	60% {
		transform: translate(18px, -12px);
	}
	80% {
		transform: translate(-8px, -15px);
	}
}

@keyframes float4 {
	0%,
	100% {
		transform: translate(0, 0);
	}
	30% {
		transform: translate(-12px, -18px);
	}
	70% {
		transform: translate(15px, 12px);
	}
}

@keyframes float5 {
	0%,
	100% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(-20px, 10px);
	}
	50% {
		transform: translate(15px, -15px);
	}
	75% {
		transform: translate(-10px, 18px);
	}
}

@keyframes floatBig {
	0%,
	100% {
		transform: translate(-50%, -50%);
	}
	25% {
		transform: translate(calc(-50% + 10px), calc(-50% - 15px));
	}
	50% {
		transform: translate(calc(-50% - 8px), calc(-50% + 12px));
	}
	75% {
		transform: translate(calc(-50% + 12px), calc(-50% + 8px));
	}
}

/* ======== POSISI ======== */

/* Karakter besar di tengah */
.big {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    animation: floatSoft 6s ease-in-out infinite;
}

.big img {
    display: block;
    position: relative;
    z-index: 1;
}

/* GLOW EMAS KUNING */
.big::before {
    content: "";
    position: absolute;
    inset: -60px;
    background: radial-gradient(
        circle,
        rgba(255, 200, 80, 0.65),
        rgba(255, 170, 0, 0.0) 75%
    );
    filter: blur(35px);
    z-index: 0;
    opacity: 0.6;
    pointer-events: none;
    animation: glowPulse 5s ease-in-out infinite;
}

/* FLOATING */
@keyframes floatSoft {
    0% {
        transform: translate(-50%, -50%) translate(0, 0);
    }
    50% {
        transform: translate(-50%, -50%) translate(4px, -6px);
    }
    100% {
        transform: translate(-50%, -50%) translate(0, 0);
    }
}

/* GLOW ANIMATION */
@keyframes glowPulse {
    0% {
        opacity: 0.4;
        transform: scale(0.85);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.25);
    }
    100% {
        opacity: 0.4;
        transform: scale(0.85);
    }
}


/* 4 karakter medium (Inner Square) */
.m-top-left {
	top: 25%;
	left: 25%;
	/* animation: float1 5s ease-in-out infinite; */
}
.m-top-right {
	top: 25%;
	right: 25%;
	/* animation: float2 5.5s ease-in-out infinite 0.5s; */
}
.m-bottom-left {
	bottom: 25%;
	left: 25%;
	/* animation: float3 6s ease-in-out infinite 1s; */
}
.m-bottom-right {
	bottom: 25%;
	right: 25%;
	/* animation: float4 5.2s ease-in-out infinite 1.5s; */
}

/* 10 karakter kecil mengelilingi medium (Outer Ring) */
/* Top Edge */
.s1 {
	top: 5%;
	left: 20%;
	/* animation: float1 4s ease-in-out infinite 0.2s; */
}
.s2 {
	top: 5%;
	left: 50%;
	margin-left: -45px; /* Center without transform to avoid animation conflict */
	/* animation: float2 4.5s ease-in-out infinite 0.8s; */
}
.s3 {
	top: 5%;
	right: 20%;
	/* animation: float3 4.2s ease-in-out infinite 1.2s; */
}

/* Right Edge */
.s4 {
	top: 35%;
	right: 5%;
	/* animation: float4 4.8s ease-in-out infinite 0.5s; */
}
.s5 {
	bottom: 35%;
	right: 5%;
	/* animation: float5 4.3s ease-in-out infinite 1.5s; */
}

/* Bottom Edge */
.s6 {
	bottom: 5%;
	right: 20%;
	/* animation: float1 4.6s ease-in-out infinite 0.3s; */
}
.s7 {
	bottom: 5%;
	left: 50%;
	margin-left: -45px; /* Center without transform */
	/* animation: float2 4.4s ease-in-out infinite 1.8s; */
}
.s8 {
	bottom: 5%;
	left: 20%;
	/* animation: float3 4.7s ease-in-out infinite 0.6s; */
}

/* Left Edge */
.s9 {
	bottom: 35%;
	left: 5%;
	/* animation: float4 4.1s ease-in-out infinite 1.3s; */
}
.s10 {
	top: 35%;
	left: 5%;
	/* animation: float5 4.9s ease-in-out infinite 0.9s; */
}

/* Hover effect */
.item:hover img {
	transform: scale(1.2);
	transition: transform 0.3s ease;
}

/* Waitlist Button Animation */
.btn-waitlist2 {
	transition: transform 0.3s ease;
	cursor: pointer;
}

.btn-waitlist2:hover {
	transform: scale(1.1);
}

/* Hidden Relic Button Animation */
.btn-relic {
	transition: transform 0.3s ease;
	cursor: pointer;
}

.btn-relic:hover {
	transform: scale(1.1);
}

/* ======== RESPONSIVE ======== */

.btn-view {
	font-family: "InkPot";
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	line-height: 28px;

	box-sizing: border-box;

	width: 125.99px;
	/* height: 33.02px; */
	box-sizing: border-box;
	border: 1px solid #ffbc53;

	color: #ffbc53 !important;

	background: linear-gradient(90deg, #0b2141 0%, #5e1ea2 100%);
	border-radius: 13px;
}

/* Custom Styles for Bootstrap 5 Accordion - NO CSS VARIABLES */

/* --- Overall Accordion Container --- */
.accordion {
	/* Bootstrap Defaults Overrides */
	--bs-accordion-border-width: 0;
	--bs-accordion-border-radius: 1rem;
	--bs-accordion-bg: #0b1a2e;
	/* Dark background color */
	--bs-accordion-color: #e0e7f2;
	/* Light text color */

	background: linear-gradient(
		360deg,
		rgba(5, 44, 76, 0.44) -15.68%,
		rgba(12, 104, 178, 0) 111.05%
	) !important;
	border-radius: 1rem;
	overflow: hidden;
}

/* .accordion-header {
                            border-top: 2px solid #F4D793;
                            border-radius: 20px;
                        } */

/* Individual Accordion Item Styling */
.accordion-item {
	/* background-color: #0b1a2e; */
	background: linear-gradient(
		360deg,
		rgba(5, 44, 76, 0.44) -15.68%,
		rgba(12, 104, 178, 0) 111.05%
	) !important;
	/* Dark background for panels */
	border-left: 2px solid #f4d793;
	border-right: 2px solid #f4d793;
	border-bottom: 2px solid #f4d793;
	/* Subtle white border */
	border-radius: 20px;
	margin-bottom: 2rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.accordion-item:hover {
	/* transform: translateY(-3px); */
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

/* Fixes for Bootstrap's default border-radius handling */
.accordion-item:first-of-type .accordion-button {
	border-top-left-radius: calc(1rem - 2px);
	border-top-right-radius: calc(1rem - 2px);
}

.accordion-item:last-of-type .accordion-button.collapsed {
	border-bottom-left-radius: calc(1rem - 2px);
	border-bottom-right-radius: calc(1rem - 2px);
}

/* --- Accordion Header Button (The clickable part) --- */
.accordion-button {
	background-color: transparent;
	/* Gold-like color for header text */
	font-size: 1.8rem;
	font-weight: 500;
	padding: 1.5rem 2rem;
	border-bottom: none;
	/* Separator line */
	border-top-left-radius: calc(1rem - 2px);
	border-top-right-radius: calc(1rem - 2px);

	border-top: 2px solid #f4d793;
	/* text-shadow: 0 0 8px rgba(255, 215, 0, 0.4); */
	/* Soft gold glow for text */
	/* transition: background-color 0.3s ease, color 0.3s ease, text-shadow 0.3s ease; */

	background: transparent !important;
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 32px;
	line-height: 46px !important;
	text-align: center;
	color: #f4d793 !important;
}

/* Hover state for the button */
.accordion-button:not(.collapsed):hover,
.accordion-button.collapsed:hover {
	background-color: rgba(255, 255, 255, 0.05);
	color: #ffd700;
}

/* Active (Open) state for the button */
.accordion-button:not(.collapsed) {
	background-color: rgba(106, 13, 173, 0.1);
	/* Subtle purple background when open */
	color: #ffd700;
	box-shadow: none;
	border-bottom-color: none;
}

/* Icon (Chevron) Customization */
.accordion-button::after {
	/* Icon color is #e0e7f2 (light text color) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e0e7f2'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
	width: 1.5rem;
	height: 1.5rem;
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
	transition: transform 0.3s ease, filter 0.3s ease;
	/* border: 1px solid #F4D793; */
	/* border-radius: 50%; */
	/* padding: 0.25rem; */
}

/* Icon (Chevron) customization when OPEN */
.accordion-button:not(.collapsed)::after {
	/* Icon color is #ffd700 (gold-like color) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffd700'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
	transform: rotate(-180deg);
	filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

/* --- Accordion Body (The content panel) --- */
.accordion-body {
	padding: 2rem;
	color: #e0e7f2;
	/* Light text color */
	background-color: transparent;
	/* Dark background */
	border-bottom-left-radius: calc(1rem - 2px);
	border-bottom-right-radius: calc(1rem - 2px);
	line-height: 1.7;
	font-size: 1.05rem;
}

/* --- Form Element Styling within Accordion Body --- */

/* Labels */
.accordion-body label {
	/* color: #F4D793;
                            font-size: 1.1rem;
                            margin-bottom: 0.5rem;
                            display: block; */

	/* Full Name */
	margin-left: 15px;
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
	/* identical to box height */

	color: #f4d793;
}

/* Input Fields (text, email, tel, select) */
.accordion-body .form-control,
.accordion-body .form-select {
	border: 1px solid #dee2e6;
	/* Border for inputs */
	color: #e0e7f2;
	padding: 0.8rem 1rem;
	border-radius: 20px;
	font-size: 1rem;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	/* background: linear-gradient(180deg, rgba(0, 0, 0, 0) -23.08%, #0A1752 133.33%); */
	background: transparent;
}

.accordion-body .text-muted {
	color: #f4d793 !important;
	margin-left: 15px;
}

.accordion-body .form-control:focus,
.accordion-body .form-select:focus {
	/* background-color: #1a2a44; */
	color: #e0e7f2;
	/* border-color: #6a0dad; */
	/* Purple accent on focus */
	box-shadow: 0 0 0 0.25rem rgba(106, 13, 173, 0.25);
	/* Subtle purple glow */
	outline: none;
}

/* Placeholder Text */
.accordion-body .form-control::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

/* Customizing the select arrow for dark theme */
.accordion-body .form-select {
	/* Arrow color: #e0e7f2 */
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e7f2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-size: 1.5em 1.5em;
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
}

.accordion-body .form-select:focus {
	/* Arrow color: #a020f0 (lighter purple) */
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a020f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* --- Update Profile Button --- */
.accordion-body .btn-main {
	font-family: "Joan";
	font-style: normal;
	font-weight: 400;
	font-size: 21px;
	line-height: 27px;

	color: #f4d793;

	background: linear-gradient(
		214.02deg,
		#5e1ea2 6.04%,
		#0b2141 92.95%
	) !important;

	border: 1px solid #ffd291;
	padding: 0.8rem 2rem;
	border-radius: 20px;

	margin-top: 1.5rem;
	/* box-shadow: 0 4px 15px rgba(106, 13, 173, 0.5); */
	/* Purple glow effect */
	transition: all 0.3s ease;
}

.accordion-body .btn-main:hover {
	box-shadow: 0 6px 20px rgba(106, 13, 173, 0.7);
	transform: translateY(-2px);
	/* Reverse gradient on hover */
	background: linear-gradient(90deg, #a020f0 0%, #6a0dad 100%);
}

.accordion-body .btn-main:active {
	transform: translateY(0);
	box-shadow: 0 2px 10px rgba(106, 13, 173, 0.4);
}

/* Grid adjustments */
.accordion-body .row {
	margin-bottom: 1rem;
}

.accordion-body .col-md-6 {
	margin-bottom: 1rem;
}

.card.edition .card-body {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* Sparkle RAMAI (particles diperbanyak) */
.card.edition .card-body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        /* layer 1 */
        radial-gradient(circle at 5% 10%, rgba(255,255,255,0.28) 0 2px, transparent 3px),
        radial-gradient(circle at 15% 35%, rgba(255,255,255,0.22) 0 1.5px, transparent 3px),
        radial-gradient(circle at 25% 70%, rgba(255,255,255,0.18) 0 2px, transparent 3px),
        radial-gradient(circle at 35% 20%, rgba(255,255,255,0.25) 0 1.8px, transparent 3px),

        /* layer 2 */
        radial-gradient(circle at 45% 55%, rgba(255,255,255,0.2) 0 2px, transparent 3px),
        radial-gradient(circle at 55% 15%, rgba(255,255,255,0.24) 0 1.6px, transparent 3px),
        radial-gradient(circle at 65% 75%, rgba(255,255,255,0.16) 0 2px, transparent 3px),
        radial-gradient(circle at 75% 30%, rgba(255,255,255,0.21) 0 1.7px, transparent 3px),

        /* layer 3 */
        radial-gradient(circle at 85% 60%, rgba(255,255,255,0.19) 0 1.4px, transparent 3px),
        radial-gradient(circle at 95% 20%, rgba(255,255,255,0.23) 0 1.8px, transparent 3px),
        radial-gradient(circle at 20% 90%, rgba(255,255,255,0.15) 0 2px, transparent 3px),
        radial-gradient(circle at 60% 90%, rgba(255,255,255,0.18) 0 1.6px, transparent 3px);

    animation:
        sparkleMove 10s linear infinite,
        sparkleFade 2.5s ease-in-out infinite alternate;
}

/* Konten tetap di atas */
.card.edition .card-body > * {
    position: relative;
    z-index: 2;
}

@keyframes sparkleMove {
    from {
        background-position:
            0 0, 0 0, 0 0, 0 0,
            0 0, 0 0, 0 0, 0 0,
            0 0, 0 0, 0 0, 0 0;
    }
    to {
        background-position:
            140px 90px, -120px 80px, 100px -130px, -80px -110px,
            160px 60px, -140px -70px, 90px 140px, -100px 120px,
            120px -100px, -160px 90px, 70px 160px, -90px -140px;
    }
}

@keyframes sparkleFade {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}


.card.edition {
	position: relative;
	overflow: visible;
}

.cloud-image {
	position: absolute;
	/* bottom: --100px; */
	left: -150px;
	width: 300px;
	z-index: 3;
}

/* Custom Modal Styles (No Bootstrap) */
.custom-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	overflow-y: auto;
	overflow-x: hidden;
}

.custom-modal.show {
	display: flex !important;
	align-items: center;
	justify-content: center;
	animation: fadeIn 0.3s ease;
}

.custom-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 9999;
}

.custom-modal-dialog {
	position: relative;
	width: 90%;
	max-width: 1200px;
	margin: 2rem auto;
	z-index: 10000;
	animation: slideDown 0.4s ease;
}

.custom-modal-content {
	position: relative;
	background-color: transparent;
	border-radius: 0;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.custom-modal-body {
	position: relative;
}

.custom-close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 10;
	background-color: transparent;
	border: none;
	width: 50px;
	height: 50px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.custom-close-btn img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.custom-close-btn:hover {
	transform: scale(1.1);
	filter: brightness(1.1);
}

.custom-close-btn span {
	display: block;
	line-height: 1;
}

/* Prevent body scroll when modal is open */
body.modal-open {
	overflow: hidden;
}

/* Animations */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Newsletter Modal Styles */
.newsletter-modal-content {
	background-image: url("../images/bg-newsletter.png");
	background-size: contain;
	background-color: transparent;
	background-position: center top;
	background-repeat: no-repeat;
	border: none;
	/* border-radius: 30px; */
	overflow: hidden;
	position: relative;
	/* min-height: 600px; */
}
body..no-webp .newsletter-modal-content,
body.no-js .newsletter-modal-content {
	background-image: url("../images/bg-newsletter.png");
}
body..webp .newsletter-modal-content {
	background-image: url("../images/bg-newsletter.webp");
}

.newsletter-modal-body {
	padding: 10rem 0;
	position: relative;
	z-index: 2;
}

.newsletter-close {
	position: absolute;
	top: 50px;
	right: 25px;
	z-index: 10;
	background-color: transparent;
	width: 120px;
	height: 120px;
	opacity: 1;
	/* transition: all 0.3s ease; */
}

.newsletter-form-container {
	max-width: 650px;
	margin: 0 auto;
	padding-left: 50px;
	/* text-align: center; */
}

.newsletter-title {
	font-family: "Alinore", serif;
	font-size: 48px;
	line-height: 0.5;
	color: #8b2500;
	margin-bottom: 1rem;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.newsletter-subtitle {
	font-family: "InkPot", serif;
	font-size: 18px;
	color: #5c3317;
	margin-bottom: 1rem;
}

.newsletter-label {
	font-family: "InkPot", serif;
	font-size: 20px;
	color: #2c1810;
	text-align: left;
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.newsletter-input {
	background-color: transparent !important;
	border: 2px solid #8b4513;
	border-radius: 50px;
	/* padding: 12px 15px; */
	font-family: "Joan", serif;
	font-size: 14px;
	color: #2c1810;
	transition: all 0.3s ease;
}

.newsletter-input:focus {
	background-color: rgba(255, 255, 255, 0.95);
	border-color: #f8b74e;
	box-shadow: 0 0 10px rgba(248, 183, 78, 0.5);
	outline: none;
	border: 2px solid #8b4513;
}

.newsletter-input::placeholder {
	color: rgba(92, 51, 23, 0.6);
	font-style: italic;
	font-size: 13px;
}

.side-selection {
	display: flex;
	flex-direction: column;
	gap: 0rem;
	/* margin-bottom: 1.5rem; */
	border: 3px solid #8b4513;
	border-radius: 20px;
}

.side-option {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	cursor: pointer;
}

.side-option .form-check-input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.side-option .side-option-label {
	font-family: "InkPot", serif;
	font-size: 15px;
	color: #2c1810;
	/* background-color: rgba(255, 248, 230, 0.6); */
	/* border: 3px solid #8b4513; */
	border-radius: 50px;
	padding: 14px 20px 14px 55px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: block;
	text-align: left;
	width: 100%;
	position: relative;
}

.side-option .side-option-label::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border: 3px solid #8b4513;
	border-radius: 50%;
	background-color: rgba(255, 248, 230, 0.8);
	transition: all 0.3s ease;
}

.side-option .side-option-label::after {
	content: "";
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%) scale(0);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #2c1810;
	transition: all 0.3s ease;
}

.side-option .form-check-input:checked + .side-option-label {
	background-color: rgba(248, 183, 78, 0.4);
	border-color: #8b2500;
	border-width: 3px;
}

.side-option .form-check-input:checked + .side-option-label::before {
	border-color: #8b2500;
	background-color: rgba(255, 248, 230, 0.9);
}

.side-option .form-check-input:checked + .side-option-label::after {
	transform: translateY(-50%) scale(1);
}

.side-option:hover .side-option-label {
	background-color: rgba(248, 183, 78, 0.3);
	transform: translateX(2px);
}

.character-preview {
	text-align: center;
}

.character-preview img {
	max-width: 200px;
	height: auto;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.newsletter-checkbox {
	border: 2px solid #8b4513;
	border-radius: 5px;
	width: 20px;
	height: 20px;
	margin-top: 0.25rem;
}

.newsletter-checkbox:checked {
	background-color: #f8b74e;
	border-color: #8b2500;
}

.newsletter-checkbox-label {
	font-family: "Joan", serif;
	font-size: 13px;
	color: #2c1810;
	text-align: left;
	line-height: 1.5;
	padding-left: 0.5rem;
}

.newsletter-submit-btn {
	background-image: url("../images/btn-submit.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
	border: none;
	font-family: "Alinore", serif;
	font-size: 24px;
	color: #fff;
	padding: 15px 60px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	min-width: 200px;
	height: 60px;
}

body..no-webp .newsletter-submit-btn,
body.no-js .newsletter-submit-btn {
	background-image: url("../images/btn-submit.png");
}

body..webp .newsletter-submit-btn {
	background-image: url("../images/btn-submit.webp");
}

/* Fallback if button image doesn't exist */
.newsletter-submit-btn:not([style*="background-image"]) {
	background: linear-gradient(180deg, #f8b74e 0%, #8b2500 100%);
	border-radius: 15px;
	box-shadow: 0 4px 15px rgba(139, 37, 0, 0.4);
}

.newsletter-submit-btn:hover {
	transform: scale(1.05);
	filter: brightness(1.1);
}

.newsletter-submit-btn:active {
	transform: scale(0.98);
}

/* Responsive Styles */

/* Large Tablets & Small Desktops (< 1200px) */

/* Modal backdrop styling */
#newsletterModal .modal-backdrop {
	background-color: rgba(0, 0, 0, 0.8);
}

/* ========================================
   Product Detail Page Styles
   ======================================== */

/* Thumbnail Images */
.thumbnail-image {
	cursor: pointer;
	margin-bottom: 15px;
}

.thumbnail-image:hover {
	border: 2px solid #007bff;
}

/* Old Price Styling */
.old-price {
	font-size: 20px !important;
	color: gray !important;
	text-decoration: line-through;
}

/* Color Option Selector */
.color-option {
	display: inline-block;
	margin-right: 10px;
	cursor: pointer;
	position: relative;
}

.color-option input[type="radio"] {
	display: none;
}

.color-swatch {
	transition: all 0.2s ease;
	position: relative;
}

.color-option input[type="radio"]:checked + .color-swatch {
	border: 2px solid #fff !important;
	box-shadow: 0 0 0 2px #000;
	transform: scale(1.1);
}

.color-option input[type="radio"]:checked + .color-swatch::after {
	content: "✓";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	text-shadow: 0 0 2px #000;
	font-size: 16px;
}