/*
Theme Name: Noname
Theme URL: https://nivusoft.com
Author: nivusoft
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
@import url("font/font.css");
html {
	scroll-behavior: smooth;
}
body {
	color: #444;
	font-family: 'Euclid Circular A', sans-serif;
    font-weight: 400;
    font-style: normal;
	background: var(--bg);
}
*:focus {
	outline: none !important;
}
*, ::after, ::before {
	box-sizing: border-box;
}
a {
	color: #444;
	transition: 0.5s;
	text-decoration: none;
}
a:hover,a:active,a:focus {
	color: #222;
	outline: none;
	text-decoration: none;
}
p {
	padding: 0;
	margin: 0 0 30px 0;
}
h1,h2,h3,h4,h5,h6 {
	font-weight: 400;
	margin: 0 0 0px 0;
	padding: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
/* TEMPLATE ALL CSS */
/* HEADER */
.nav-head {
	height: 80px;
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(var(--lbds), 0.85) !important;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}
.nav-head.back {
	background: rgba(var(--lbds), 0.85) !important;
}
.nav-head.back .darkswitch {
	background: rgba(var(--lsdb), .05)
}
.nav-content {
	display: flex;
	align-items: center;
	width: 100%;
}
.NavList {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}
.NavListArea {
	margin-left: auto;
	display: flex;
	align-items: center;
}
.logo img,
header a.logo img,
header .logo img {
	height: 45px !important;
	max-height: 48px !important;
	width: auto !important;
	object-fit: contain !important;
}
.logo img.dark {
	display: none;
}
ul.NavList li {
	list-style: none;
	padding: 0 5px;
}
.NavList li a {
	color: rgba(var(--menutxtcl));
	font-weight: var(--menutxtweight);
	padding: 12px 8px;
}
li.navitem.nav-drop > a {
	position: relative;
	padding-right: 18px;
}
li.navitem.nav-drop > a::after {
	content: "\f078";
	position: absolute;
	font-family: fontawesome;
	font-size: 13px;
	right: 3px;
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
	transition: .2s;
}
li.navitem.nav-drop>a.show::after {
    transform: translateY(-50%) rotate(0deg);
}
.nav-drop .drop-menu {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	margin-top: 0px;
	padding: 15px 0;
	background: rgba(var(--lbds));
	border-radius: 5px;
	transition: .2s;
	box-shadow: 0px 5px 30px rgba(var(--cl1), 0.1);
	z-index: 99;
}
.nav-drop .drop-menu::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 55px;
	margin-left: -5px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid rgba(var(--lbds));
}
.nav-drop:hover .drop-menu {
	visibility: visible;
	opacity: 1;
	margin-top: 10px;
}
.nav-drop .drop-menu li a {
	padding: 5px 20px;
	font-size: 16px;
	color: rgba(var(--menutxtcl));
	width: 100%;
	display: block;
	font-weight: 500;
}
.nav-drop .drop-menu li {
	transition: .2s;
}
.nav-drop .drop-menu li:hover {
	background: rgba(var(--lsdb), .03);
}
.contact-btn {
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	color: #fff !important;
	border: none;
	background-color: rgba(var(--cl1));
	border-radius: 40px;
	padding: 8px 35px;
	box-shadow: 0 5px 25px rgba(var(--cl1), 0.3);
}
.NavActions {
	display: flex;
	align-items: center;
	margin-left: 15px;
}
.supportbtn {
	display: flex;
	align-items: center;
}
.navTogbtn {
	border: none;
	position: relative;
	width: 45px;
	height: 45px;
	padding: 6px;
	margin-left: auto;
	border-radius: 5px;
}
.navTogbtn.active .item1, .navTogbtn.active .item4 {
	border-radius: 0 85%;
}
.navTogbtn.active .item2, .navTogbtn.active .item3 {
	border-radius: 85% 0;
}
.navTogbtn span {
	height: 14px;
	width: 14px;
	background: rgba(var(--cl1));
	border-radius: 85%;
	margin: 1px;
	display: inline-block;
	transition: .3s;
}
.orderSearchNav.orsebtns {
	background: rgba(var(--cl1));
	color: #fff;
	padding: 3px 30px;
	border-radius: 30px;
	cursor: pointer;
	margin-left: 10px;
	box-shadow: 0 5px 25px rgba(var(--cl1), 0.3);
}
.LastOrdersList .nosearch {
	background: rgba(var(--lsdb), .05);
	padding: 15px 20px;
	border-radius: 10px;
	color: rgba(var(--txtall));
	font-weight: 400;
	font-size: 16px;
}
body.showmenu {
	overflow: hidden;
}
body.showmenu main, body.showmenu footer {
	filter: none !important;
}
body.showmenu .NavListArea {
	visibility: visible;
	left: 0%;
	max-height: 100%;
	overflow: auto;
}
.darkmode {
	margin-left: 15px;
}
.otbuts {
	display: flex;
	align-items: center;
}
.sunmoon {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	position: relative;
	padding: 0 9px;
	font-size: 14px;
}
.darkswitch {
	width: 60px;
	height: 30px;
	background: rgba(var(--lbds));
	display: flex;
	align-items: center;
	position: relative;
	border-radius: 21px;
	cursor: pointer;
}
.darkswitchBG {
	position: absolute;
	background: rgba(var(--cl1));
	border-radius: 100%;
	width: 24px;
	height: 24px;
	left: 4px;
	transition: .5s cubic-bezier(0,0,.34,.81);
}
.darkswitchBG.active {
	left: calc(100% - 28px);
}
.sunmoon .item i {
	color: rgba(var(--lsdb), .3);
	transition: .5s cubic-bezier(0,0,.34,.81);
}
.sunmoon .item.active i {
	color: #fff;
}
/* MAIN */

/* Service List */
.serviceList {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}
.serviceList .item {
	margin: 0 10px;
}
.serviceList .item .box {
	width: 100px;
	height: 100px;
	background: rgba(var(--lbds));
	display: flex;
	position: relative;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	transition: .4s cubic-bezier(0,0,.34,.81);
}
.serviceList .item .box:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 0;
	background: rgba(var(--cl1));
	z-index: 0;
	transition: .2s cubic-bezier(0,0,.34,.81);
}
.serviceList .item .box:hover:after {
	left: 0%;
	width: 100%;
}
.serviceList .item .box:hover i {
	color: #fff;
	z-index: 2;
}
.serviceList .item .box i {
	color: rgba(var(--cl1));
	font-size: 35px;
	position: relative;
	transition: .4s cubic-bezier(0,0,.34,.81);
}
.serviceList .item .opacityIcon {
	position: absolute;
	bottom: -14px;
	left: -10px;
}
.serviceList .item .opacityIcon i {
	font-size: 45px;
	opacity: .08;
}
.serviceList .item .serviceName {
	text-align: center;
	font-size: 14px;
	margin-top: 5px;
	color: rgba(var(--cl1));
	max-width: 100px;
	opacity: .7;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	transition: .2s;
}
.serviceList .item:hover .serviceName {
	opacity: 1;
}

/* Intro */
#introHome {
	margin-bottom: 30px;
}
.introHome {
	height: 420px;
	position: relative;
	overflow: hidden;
}
.introHome img.introBG {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px 20px 24px 24px;
}
.introHome::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to top, rgb(var(--intlinear)), rgb(var(--intlinear), 0.8), rgb(var(--intlinear), 0.4));
	z-index: 1;
	border-radius: 20px;
}
.introHome .content {
	position: absolute;
	bottom: 75px;
	z-index: 1;
	width: 100%;
	text-align: center;
}
.introHome .content h1 {
	font-weight: 800;
	font-size: 34px;
	color: #fff;
}
.introHome .content h1 span {
	display: block;
	color: #FDB43F;
}
.introHome .content p {
	color: #fff;
	max-width: 750px;
	margin: 0 auto;
}

/* Fast Order */
.fastOrder {
	width: fit-content;
	background: rgba(var(--lbds));
	padding: 20px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	transform: translateY(-50%);
	position: relative;
	z-index: 1;
	border-radius: 20px;
	box-shadow: 0 5px 30px rgba(var(--text), 0.1);
}
.fastOrder .fastitems {
	display: flex;
	align-items: center;
	padding-left: 7px;
}
.fastOrder .fastDrop {
	visibility: hidden;
	opacity: 0;
	transition: .2s;
	position: absolute;
	top: 60px;
	background: rgba(var(--lbds));
	width: 250px;
	padding: 15px;
	padding-right: 10px;
	border-radius: 15px;
	box-shadow: 0 5px 30px rgba(var(--cl1), 0.1);
	left: 0;
}
.fastOrder .fastselect:first-child .fastDrop {
	left: -25px;
}
.fastOrder .fastDrop.show {
	visibility: visible;
	opacity: 1;
	top: 80px;
}
.fastDrop::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 55px;
	margin-left: -5px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid rgba(var(--lbds));
}
.fastOrder .fastDrop ul {
	padding: 0;
	padding-right: 5px;
	margin: 0;
	overflow: auto;
	max-height: 205px;
}
.fastOrder .fastDrop ul::-webkit-scrollbar-track {
	border-radius: 20px;
	background-color: #F5F5F5;
}
.fastOrder .fastDrop ul::-webkit-scrollbar {
	width: 5px;
	background-color: #F5F5F5;
}
.fastOrder .fastDrop ul::-webkit-scrollbar-thumb {
	border-radius: 20px;
	background-color: #c5c5c5;
}
.fastOrder .fastDrop ul li {
	list-style: none;
	font-weight: 500;
	font-size: 16px;
	background: #00000005;
	margin-bottom: 3px;
	border-radius: 6px;
	padding: 7px 12px;
	transition: .2s;
}
.fastOrder .fastDrop ul li:hover {
	background: #00000010;
}
.fastOrder .fastselect {
	color: rgba(var(--txtall));
	padding: 0 25px;
	font-weight: 700;
	font-size: 18px;
	cursor: pointer;
	position: relative;
	user-select: none;
	text-align: left;
	min-width: 250px;
}
.fastselect .cont .item .fastHead {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.fastOrder .fastselect:first-child {
	padding-left: 0;
	min-width: 225px;
}
.fastOrder .fastselect::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: #00000010;
	cursor: context-menu;
}
.fastOrder .fastselect:nth-last-child(1){
	margin-right: 0;
}
.fastOrder .fastselect .cont i {
	display: none;
}
.fastOrder .fastselect span {
	font-size: 15px;
	font-weight: 400;
	display: block;
	opacity: .6;
}
.fastAction {
	margin-left: 25px;
}
.butto-fast {
	color: #fff;
	border: none;
	background: rgba(var(--cl1));
	padding: 11px 20px;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	margin-left: auto;
	border-radius: 7px;
	box-shadow: 0 5px 25px rgba(var(--cl1), 0.2);
	min-width: 250px;
}

/* Pack List */
#packList {
	margin-bottom: 100px;
}
.packListArea {
	position: relative;
	padding-bottom: 50px;
}
.packListArea:before {
	content: "";
	background: rgba(var(--cl1), 0.05);
	width: 80%;
	left: 50%;
	transform: translateX(-50%);
	height: 100px;
	position: absolute;
	bottom: 0px;
	border-radius: 70px;
}
.packListArea .packitem {
	margin: 0 10px;
}
.packitem {
	background: rgba(var(--lbds));
	border-radius: 20px;
	position: relative;
	overflow: hidden;
}
.packitem.overi {
	overflow: inherit;
}
.packInside {
	padding: 20px;
}
.packHead {
	background: rgba(var(--pckdf));
	height: 15px;
	position: absolute;
	top: 0;
	font-size: 14px;
	min-width: 100%;
	text-align: center;
}
.packHead span {
	display: none;
}
.packHead.have {
	color: #fff;
	width: fit-content;
	padding: 4px 20px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(-30%);
	top: 0;
	font-size: 14px;
	border-radius: 30px;
	min-width: 150px;
	text-align: center;
	height: auto;
}
.packHead.have span {
	display: block;
}
.packTop {
	margin-top: 25px;
	text-align: center;
}
.packitem.inslide {
	margin-top: 20px;
}
.packTop .icon i {
	font-size: 55px;
	color: rgba(var(--pckdf));
}
.packTop .icon {
	margin-bottom: 5px;
}
.packTop .title span {
	display: block;
	font-weight: bold;
	font-size: 22px;
}
.packTop .title {
	color: rgba(var(--txtall));
}
.packDetail {
	margin: 20px 0;
	text-align: center;
}
.packDetail .moresi {
	display: none;
}
.packDetail .moresi li:nth-child(1){
	border-top: inherit;
}
.packDetail ul {
	padding: 0 10px;
	margin: 0;
	max-height: 124px;
	overflow: hidden;
}
.packDetail.more ul {
	height: 168px;
	max-height: 168px;
	overflow: auto;
}
.packDetail ul::-webkit-scrollbar-track {
	border-radius: 20px;
	background-color: #F5F5F5;
}
.packDetail ul::-webkit-scrollbar {
	width: 5px;
	background-color: #F5F5F5;
}
.packDetail ul::-webkit-scrollbar-thumb {
	border-radius: 20px;
	background-color: #c5c5c5;
}
.packDetail ul li {
	list-style: none;
	color: rgba(var(--txtall), 0.8);
	padding: 8px 0;
	border-bottom: 1px solid #00000007;
}
.packDetail ul li:nth-child(1) {
	border-top: 1px solid #00000007;
}
.packDetail ul li:before {
	content: "\f058";
	font-family: 'FontAwesome';
	margin-right: 10px;
	color: rgba(var(--pckdf));
	font-size: 15px;
}
.packDetailMore {
	padding: 8px 0;
	border-bottom: 1px solid #00000007;
	font-weight: 600;
	color: rgba(var(--txtall));
	cursor: pointer;
}
.packPrice {
	text-align: center;
	font-size: 27px;
	font-weight: bold;
	color: rgba(var(--txtall));
	height: 55px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.packPrice span {
	display: block;
	font-size: 15px;
	text-decoration: line-through;
	font-weight: 400;
	opacity: .5;
	margin-bottom: -3px;
}
.packBottom {
	margin: 15px 10px;
	display: flex;
	align-items: center;
}
.packBuyBTN {
	color: #fff !important;
	flex: 1;
	font-size: 18px;
	font-weight: 500;
	background: rgba(var(--pckdf));
	padding: 13px 20px;
	padding-bottom: 12px;
	display: flex;
	justify-content: space-between;
	position: relative;
	align-items: center;
	border-radius: 50px;
	box-shadow: 0 5px 25px rgba(var(--pckdf), 0.3);
}
.packBuyBTN span {
	position: relative;
	top: -1px;
}
.packBuyBTN.noneOrder {
	opacity: .5;
	pointer-events: none;
}
.notfavlist {
	grid-column: span 4;
	text-align: center;
	background: rgba(var(--lbds), .7);
	border: 3px solid rgba(var(--lsdb), .05);
	border-radius: 15px;
	padding: 70px 0;
	height: fit-content;
}
.notfavlist span {
	font-size: 22px;
	font-weight: 700;
	color: rgba(var(--txtall));
}
.notfavlist p {
	color: rgba(var(--txtall), .8);
	margin-bottom: 0;
}
.favPack {
	border: none;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50px;
	margin: 12px auto;
	font-size: 15px;
	color: #9a9a9a;
	background: #f7f7f9;
	transition: .2s;
	position: absolute;
	right: 25px;
	top: 43px;
}
.favPack.active {
	color: rgba(var(--lbds));
	background: #fbbe65;
}
.favPack.active:hover {
	background: #fbbe65;
	opacity: .8;
}
.favPack:hover {
	background: #f3f3f3;
}
.favPack::before {
	content: "\f005";
	font-family: 'Font Awesome 5 Free';
	font-size: 15px;
}
.packListArea .splide__pagination {
	bottom: -35px;
}
.packListArea .splide__pagination__page {
	background: rgba(var(--cl1), .4);
	height: 12px;
	width: 12px;
	transition: .2s;
}
.packListArea .splide__pagination__page.is-active {
	background: rgba(var(--cl1));
	width: 25px;
	height: 12px;
	border-radius: 10px;
	transform: scale(1);
}
.packList {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-column-gap: 25px;
	grid-row-gap: 25px;
	margin-bottom: 70px;
	min-height: 400px;
}
.anibuybtn {
	position: relative;
	overflow: hidden;
}
.anibuybtn::after {
	content: "";
	position: absolute;
	width: 100px;
	height: 100px;
	border-radius: 100%;
	left: calc(100% - 60px);
	top: 50%;
	transform: translateY(-50%);
	transition: .4s cubic-bezier(0,0,.34,.81);
	background: #ffffff15;
}
.anibuybtn:hover:after {
	left: calc(100% - 90px);
	top: 20%;
}
/* Why Us */
#whyus {
	padding-bottom: 40px;
	margin-bottom: 100px;
	position: relative;
}
#whyus::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 100%;
	height: calc(100% - 250px);
	background: rgba(var(--cl1), .05);
	z-index: -1;
}
.whyus .list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-column-gap: 25px;
	grid-row-gap: 25px;
}
.whyus .list .item {
	width: 100%;
	height: 385px;
	border-radius: 60px 10px;
	overflow: hidden;
	position: relative;
}
.whyus .list .item.more {
	display: none;
}
.whyus .list .item img.whyBG {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.whyus .list .item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to top, rgba(var(--whydf)), rgba(var(--whydf), .7),  transparent);z-index: 1;
}
.whyus .list .item .content {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	padding: 30px;
	transition: .2s;
}
.whyus .list .item .content .detail p {
	margin: 0;
}
.whyus .list .item .content .icon {
	width: 70px;
	height: 70px;
	background: #fff;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 7px;
}
.whyus .list .item .content .icon i {
	color: rgba(var(--whydf));
	font-size: 28px;
}
.whyus .list .item .content .detail {
	color: #fff;
}
.whyus .list .item .content .detail .title {
	font-weight: bold;
	font-size: 22px;
}
.whyus .list .item .content .detail p {
	font-size: 15px;
	opacity: .9;
	font-weight: 400;
	overflow: hidden;
	transition: .2s;
}
.whyListMore {
	margin-top: 30px;
	text-align: center;
}
.whyListMore .whymore {
	border: none;
	font-weight: 500;
	color: rgba(var(--txtall));
	background: rgba(var(--txtall), .06);
	font-size: 14px;
	padding: 8px 18px;
	border-radius: 7px;
	transition: .4s cubic-bezier(0,0,.34,.81);
}
.whyListMore .whymore:hover {
	background: rgba(var(--txtall), .1);
}
.whyListMore .whymore i {
	margin-left: 20px;
}
/* Testimonial */
#testimonial {
	margin-bottom: 100px;
	padding: 0 40px;
}
.testiarea {
	position: relative;
}
.testiarea::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -10px;
	width: 320px;
	height: 100px;
	border-radius: 50px;
	background: rgba(var(--cl1), .05);
	z-index: -1;
}
.stars .star i {
	color: #b8bbca;
}
.stars .star.active i {
	color: #ffb307;
}
.testimonial-item {
	background: rgba(var(--lbds));
	padding: 35px 20px;
	border-radius: 15px;
	text-align: center;
	margin: 0 15px;
}
.testimonial-item .inside {
	opacity: .7;
	transition: .2s;
}
.testimonial-item .person img {
	width: 100px;
	height: 100px;
	border-radius: 100%;
	object-fit: cover;
}
.testimonial-item .person .name {
	margin-top: 10px;
	font-size: 22px;
	font-weight: bold;
	color: rgba(var(--txtall));
}
.testimonial-item .CustomerJob {
	color: rgba(var(--cl1));
}
.testimonial-item .detail p {
	margin-bottom: 12px;
	color: rgba(var(--txtall), .8);
	font-size: 15px;
	line-height: 19px;
}
.testimonial-item .detail {
	margin-top: 5px;
}
.splide.testimonial .splide__track {
	padding: 30px 0;
	padding-bottom: 50px;
}
.splide.testimonial ul li {
	transform: scale(1);
	transition: .2s;
}
.splide.testimonial ul li.is-active {
	transform: scale(1.05);
}
.splide.testimonial ul li.is-active .testimonial-item .inside {
	opacity: 1;
}
.splide.testimonial .splide__pagination__page {
	background: rgba(var(--cl1), .4);
	height: 12px;
	width: 12px;
	transition: .2s;
}
.splide.testimonial .splide__pagination__page.is-active {
	background: rgba(var(--cl1));
	width: 25px;
	height: 12px;
	border-radius: 10px;
	transform: scale(1);
}
/* About us */
#aboutus {
	background: rgba(var(--cl1), .05);
	margin-bottom: 100px;
	padding: 120px 0;
}
.AboutArea {
	display: flex;
	align-items: center;
	justify-content: center;
}
.AboutArea .imgData {
	position: relative;
}
.AboutArea .imgData img {
	width: 550px;
	height: 550px;
	object-fit: cover;
	border-radius: 50px;
}
.AboutArea.styletwo .imgData img {
	border-radius: 100%;
}
.AboutArea.styletwo .datainfo .item:nth-child(2) {
	margin-top: 50px;
}
.AboutArea.styletwo .datainfo {
	bottom: 25px;
}
.AboDetail {
	padding-left: 40px;
}
.AboDetail .heading span {
	color: rgba(var(--cl1));
}
.AboDetail .heading h2 {
	font-weight: bold;
	color: rgba(var(--txtall));
}
.AboDetail .heading {
	margin-bottom: 20px;
}
.AboDetail .content p {
	margin-bottom: 12px;
	color: rgba(var(--txtall), .8);
	line-height: 25px;
}
.AboDetail .action {
	margin-top: 30px;
}
.AboutArea .imgData .datainfo {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 50px;
	transform: translateY(40%);
}
.aboaction a.abobtn {
	display: block;
	background: rgba(var(--txtall));
	padding: 12px 30px;
	min-width: 200px;
	text-align: center;
	color: #fff;
	border-radius: 50px;
}
.aboaction {
	position: relative;
	padding: 6px 0;
	width: fit-content;
}
.aboaction::before {
	content: "";
	position: absolute;
	right: -50px;
	top: 50%;
	transform: translateY(-50%);
	height: 100%;
	width: 100%;
	border: 2px solid rgba(var(--txtall), .2);
	border-radius: 50px;
	z-index: -1;
	transition: .4s cubic-bezier(0,0,.34,.81);
}
.aboaction::after {
	content: "\f061";
	font-family: 'FontAwesome';
	color: rgba(var(--txtall));
	position: absolute;
	right: -30px;
	top: 50%;
	transform: translateY(-50%);
	transition: .4s cubic-bezier(0,0,.34,.81);
}
.AboutArea .imgData:before {
	content: "";
	position: absolute;
	background-image: url(../../img/svg/dots.svg);
	left: -30px;
	top: -30px;
	width: 250px;
	height: 250px;
	z-index: -1;
	opacity: .7;
	animation: 3s infinite dotsmove;
}
.AboutArea .imgData .datainfo .item {
	color: rgba(var(--txtall));
	background: rgba(var(--lbds));
	padding: 20px 15px;
	margin: 0 8px;
	width: 100%;
	text-align: center;
	border-radius: 15px;
	box-shadow: 0 5px 25px rgba(var(--txtall), .1);
}
.AboutArea .imgData .datainfo .item .detail span {
	display: block;
	font-size: 16px;
	font-weight: bold;
}
.AboutArea .imgData .datainfo .item .icon i {
	font-size: 30px;
}
.AboutArea .imgData .datainfo .item .icon {
	margin-bottom: 8px;
}
.AboutArea .imgData .datainfo .item .detail {
	font-size: 15px;
}
/* Faq */
#faq {
	margin-bottom: 100px;
}
.faqArea {
	margin-top: 40px;
}
.faqwell .item {
	background: rgba(var(--lbds));
	padding: 20px;
	padding-bottom: 18px;
	border-radius: 5px;
	margin-bottom: 15px;
	cursor: pointer;
}
.faqwell .item .fs-head {
	font-size: 16px;
	font-weight: 500;
	color: rgba(var(--txtall));
	display: flex;
	align-items: center;
	user-select: none;
}
.faqwell .item .fs-head .plusminus {
	margin-left: auto;
}
.faqwell .item .fs-head .plusminus .minus {
	display: none;
}
.faqwell .item.show .plusminus .minus {
	display: block;
}
.faqwell .item.show .plusminus .plus {
	display: none;
}
.faqwell .item .fs-content {
	padding-top: 12px;
	margin-top: 15px;
	border-top: 1px solid #00000010;
	display: none;
}
.faqwell .item .fs-content p {
	margin: 0;
	color: rgba(var(--txtall), .8);
	line-height: 25px;
}
.sidebar .faqwell .item {
	padding: 15px;
	padding-bottom: 13px;
	margin-bottom: 10px;
}
.SideContBoxArea {
	background: rgba(var(--lbds));
	padding: 20px 25px;
	border-radius: 12px;
}
.SideContBoxArea h3 {
	color: rgba(var(--txtall));
	font-weight: bold;
	font-size: 23px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(var(--lsdb), .1);
}
.SideContBoxArea ul {
	margin: 0;
	padding: 0;
}
.SideContBoxArea ul li {
	color: rgba(var(--txtall));
	list-style: none;
}
.SideContBoxArea ul li.email {
	font-weight: 600;
}
/* BlogLast */
#bloglast {
	margin-bottom: 0px;
}
.ns-heading.flx {
	display: flex;
	width: 100%;
	text-align: left;
	align-items: flex-end;
	margin-bottom: 30px;
}
.ns-heading.flx .showmore {
	margin-left: auto;
}
a.ns-more {
	display: block;
	font-size: 15px;
	color: rgba(var(--txtall));
	background: rgba(var(--txtall), .06);
	padding: 7px 20px;
	border-radius: 5px;
	font-weight: 500;
	transition: .2s;
}
a.ns-more:hover {
	background: rgba(var(--txtall), .1);
}
a.ns-more i {
	font-size: 15px;
	margin-left: 15px;
}
.blog-list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-column-gap: 20px;
}
.blog-item .thumb img {
	width: 100%;
	border-radius: 25px 5px;
	height: 250px;
	object-fit: cover;
}
.blog-item .detail {
	margin-top: 15px;
	padding: 0 5px;
}
.blog-item .detail a h3 {
	font-weight: bold;
	font-size: 23px;
	color: rgba(var(--txtall));
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.blog-item .detail p {
	margin-bottom: 12px;
	color: rgba(var(--txtall), .8);
	line-height: 25px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.blog-item .thumb {
	position: relative;
}
.blog-item .thumb .post-date, .post-content .post-thumbnail .post-date {
	position: absolute;
	left: 15px;
	top: 15px;
	font-size: 12px;
	color: #fff;
	background: #00000040;
	padding: 3px 15px;
	border-radius: 27px;
}
.post-thumbnail {
	position: relative;
}
/* support */
#support {
	position: relative;
	padding: 30px 0;
	background: rgba(var(--cl1), .05);
}
.support-bottom {
	display: flex;
	align-items: center;
}
.support-bottom .action {
	margin-left: auto;
}
.support-bottom .text {
	font-size: 25px;
	color: rgba(var(--txtall));
	text-transform: uppercase;
}
.support-bottom .text span {
	display: block;
	font-weight: bold;
}
.support-bottom a.wp {
	font-size: 18px;
	background: #85C173;
	padding: 12px 30px;
	min-width: 200px;
	text-align: center;
	color: #fff;
	border-radius: 50px;
	display: inline-flex;
	align-items: center;
	box-shadow: 0 5px 30px #85c17345;
}
.support-bottom a.wp i {
	font-size: 25px;
	margin-left: 20px;
}
.support-bottom a.fcont {
	font-size: 18px;
	background: rgba(var(--cl1));
	padding: 12px 30px;
	min-width: 200px;
	text-align: center;
	color: #fff;
	border-radius: 50px;
	display: inline-flex;
	align-items: center;
	margin-left: 10px;
	box-shadow: 0 5px 30px rgba(var(--cl1), .2);
}
.support-bottom a.fcont span, .support-bottom a.wp span {
	position: relative;
	top: 1px; 
}
.support-bottom a.fcont i {
	font-size: 22px;
	margin-left: 20px;
}
/* FOOTER */
.footer {
	background: rgba(var(--lbds));
	padding: 70px 0 40px;
	position: relative;
	box-shadow: 0 -10px 40px rgba(0,0,0,0.02);
	border-top: 1px solid rgba(var(--lsdb), .05);
	overflow: hidden;
}
/* Top brand accent line */
.footer::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, rgba(var(--cl1), 0.8), rgba(var(--cl1), 0.4));
}
.foot-flex {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	grid-gap: 40px;
}
.footImg {
	text-align: center;
	padding-top: 30px;
	margin-top: 50px;
	border-top: 1px dashed rgba(var(--lsdb), .1);
}
.footImg img {
	height: 40px;
	max-width: 100%;
	width: auto;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: all 0.4s ease;
}
.footImg img:hover {
	filter: grayscale(0%);
	opacity: 1;
}
.footer .start {
	align-self: start;
}
.footer .start img {
	height: 68px;
	margin-bottom: 20px;
	transition: transform 0.3s ease;
}
.footer .start img:hover {
	transform: scale(1.05);
}
.footer .start p {
	margin-bottom: 25px;
	color: rgba(var(--txtall), .7);
	line-height: 1.8;
	font-size: 15px;
}
.footer .start .social-action {
	display: flex;
	align-items: center;
	gap: 12px;
}
.footer .start .social-action a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(var(--lsdb), .05);
	color: rgba(var(--txtall), .7);
	font-size: 18px;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	text-decoration: none;
}
.footer .start .social-action a:hover {
	background: rgba(var(--cl1), 0.15);
	color: rgba(var(--cl1));
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(var(--cl1), 0.2);
}
.footer .fdef .title {
	font-weight: 700;
	font-size: 18px;
	color: rgba(var(--txtall));
	margin-bottom: 25px;
	padding-bottom: 15px;
	position: relative;
	border-bottom: none;
}
.footer .fdef .title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	border-radius: 3px;
	background: rgba(var(--cl1));
	transition: width 0.3s ease;
}
.footer .fdef:hover .title::after {
	width: 60px;
}
.footer .fdef ul {
	padding: 0;
	margin: 0;
}
.footer .fdef ul li {
	list-style: none;
	margin-bottom: 12px;
}
.footer .fdef ul li, .footer .fdef ul li a {
	display: flex;
	align-items: center;
	font-size: 15px;
	color: rgba(var(--txtall), .7);
	text-decoration: none;
	transition: all 0.2s ease;
}
.footer .fdef ul li a:hover {
	color: rgba(var(--cl1));
	transform: translateX(8px);
}
.footer .fdef ul li i {
	margin-right: 12px;
	color: rgba(var(--cl1));
	font-size: 16px;
	width: 20px;
	text-align: center;
}

/* OTHER */
.homestep {
	display: flex;
	flex-direction: column;
}
.homestep.two {
	flex-direction: column-reverse;
}
.homestep.four {
	flex-direction: column-reverse;
}
.navTogbtn {
	display: none;
	background: none;
}
.anibut {
	position: relative;
	overflow: hidden;
}
.anibut::after {
	content: "";
	position: absolute;
	width: 100px;
	height: 100px;
	border-radius: 100%;
	left: calc(100% - 35px);
	top: -5px;
	transition: .4s cubic-bezier(0,0,.34,.81);
	background: #ffffff10;
}
.anibut:hover:after {
	left: calc(100% - 75px);
}
.path1 {
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}
.allpath {
	fill: rgba(var(--cl1), 0.05);
}
.ns-heading {
	width: fit-content;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 20px;
}
.ns-heading.mb {
	margin-bottom: 35px;
}
.ns-heading > span {
	font-size: 15px;
	color: rgba(var(--cl1));
	position: relative;
	font-weight: 400;
}
.ns-heading > span:before {
	content: "";
	position: absolute;
	left: -15px;
	top: 50%;
	transform: translateY(-50%);
	height: 2px;
	width: 10px;
	background: rgba(var(--cl1));
	border-radius: 2px;
}
.ns-heading > span:after {
	content: "";
	position: absolute;
	right: -15px;
	top: 50%;
	transform: translateY(-50%);
	height: 2px;
	width: 10px;
	background: rgba(var(--cl1));
	border-radius: 2px;
}
.ns-heading h2 {
	font-weight: 700;
	color: rgba(var(--txtall));
}
.ns-heading p {
	margin: 3px 0 0;
	font-size: 16px;
	color: rgba(var(--txtall));
	opacity: .6;
}
.nheadall {
	display: inline-flex;
}
.nfootall {
	display: none;
}
.ns-headH {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.packallBTN {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	color: rgba(var(--lsdb), .5);
	background: rgba(var(--lsdb), .05);
	padding: 2px 13px;
	margin-left: 10px;
	margin-bottom: 7px;
	border-radius: 17px;
	transition: .2s;
}
.packallBTN:hover {
	color: rgba(var(--lsdb), .6);
	background: rgba(var(--lsdb), .1);
}
.dashline {
	position: relative;
}
.dashline::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	right: 0;
	height: 1px;
	border-top: 6px dotted rgba(var(--txtall));
	opacity: .1;
}
.dashline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 12px;
	right: 0;
	height: 1px;
	border-top: 6px dotted rgba(var(--txtall));
	opacity: .1;
}
#intall {
	margin-top: 20px;
	margin-bottom: 50px;
}
.intall {
	height: 300px;
	position: relative;
}
.intall::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to top, rgb(var(--intlinear)), rgb(var(--intlinear), 0.8));
	z-index: 1;
	border-radius: 20px;
}
.intall img.introBG {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px 20px 24px 24px;
}
.intall .conts {
	position: relative;
	height: 100%;
	padding: 25px 85px;
	display: flex;
	text-align: center;
	align-items: center;
	z-index: 1;
}
.intall .conts .icobox {
	min-width: 130px;
	height: 130px;
	background: #fff;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.intall.order .conts .icobox {
	min-width: 95px;
	height: 95px;
	background: #fff;
	margin-left: 10px;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.intall.order .conts .icobox::after {
	display: none;
}
.intall.order .conts .icobox i {
	font-size: 38px;
}
.intall.reserve .conts .icobox {
	min-width: 130px;
	margin-left: 30px;
}
.intall.order.reserve .conts .icobox {
	min-width: 95px;
}
.orderFail {
	color: rgba(var(--txtall));
}
.intall .icobox::before {
	content: "";
	position: absolute;
	left: -10px;
	top: -10px;
	right: -10px;
	bottom: -10px;
	background: #fff;
	opacity: .4;
	z-index: -1;
	border-radius: 100%;
}
.intall .icobox::after {
	content: "";
	position: absolute;
	left: -10px;
	top: -10px;
	right: -10px;
	bottom: -10px;
	background: var(--bg);
	opacity: .5;
	z-index: -1;
	border-radius: 100%;
	animation: 1.3s infinite icoshad;
}
.intall .conts .icobox i {
	font-size: 54px;
	color: rgba(var(--cl1));
}
.intall .conts .detabox h1 {
	font-weight: bold;
	margin-bottom: 10px;
	color: #fff;
}
.intall .conts .detabox p {
	color: #fff;
	opacity: .8;
	margin-bottom: 10px;
}
.intall .conts .detabox {
	max-width: 800px;
	margin-left: 60px;
	text-align: left;
}
.intall.order .conts {
	padding: 40px;
	min-height: 215px;
}
.intall.order .conts .detabox h1 {
	font-size: 30px;
	margin-bottom: 3px;
}
.intall.order {
	height: fit-content;
	margin-bottom: 25px;
}
.intall.order .conts {
	padding: 40px;
}
.intall.order .conts .detabox {
	margin-left: 35px;
}
.intall.order .conts .detabox p {
	margin: 0;
	opacity: .7;
}
.platList {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-column-gap: 25px;
	grid-row-gap: 25px;
	margin-bottom: 70px;
}
.blogList {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-column-gap: 25px;
	grid-row-gap: 25px;
	margin-bottom: 25px;
}
.platList .item {
	background: rgba(var(--lbds));
	padding: 40px;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
}
.platList .icon {
	width: 90px;
	height: 90px;
	border-radius: 100%;
	background: rgba(var(--cl1));
	box-shadow: 0 5px 20px rgba(var(--cl1), .25);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25px;
	position: relative;
	z-index: 1;
}
.platList .action {
	margin-top: auto;
}
.platList .icon i {
	font-size: 32px;
	color: #fff;
}
.platList .detail h2 {
	color: rgba(var(--txtall));
	font-weight: bold;
	font-size: 23px;
	margin-bottom: 7px;
}
.platList .detail p {
	font-size: 16px;
	color: rgba(var(--txtall), .8);
	line-height: 23px;
}
.platList .action .platActiBut {
	background: rgba(var(--cl1));
	padding: 12px 25px;
	border-radius: 5px 15px;
	min-width: 230px;
	color: #fff;
	font-weight: 400;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 5px 20px rgba(var(--cl1), .3);
}
.intall .conts .detabox .countservices {
	display: inline-block;
	color: #fff;
	background: #ffffff40;
	padding: 4px 15px;
	border-radius: 5px;
	font-size: 14px;
	margin-top: 8px;
}
.intall.reserve .conts {
	flex-direction: row-reverse;
	justify-content: space-between;
}
.intall.reserve .conts .detabox {
	margin-left: 0;
}
.pagins {
	margin-bottom: 70px;
}
.pagins ul li a.page-link {
	border: none;
	font-size: 15px;
	margin: 0 5px;
	border-radius: 5px;
	padding: 5px 12px;
	color: rgba(var(--txtall)) !important;
	background: rgba(var(--lbds));
}
.pagins ul li.active a.page-link {
	color: #fff !important;
	background: rgba(var(--cl1)) !important;
}
.title-heading {
	position: relative;
	padding-bottom: 7px;
	margin-bottom: 20px;
}
.title-heading span {
	font-size: 15px;
	font-weight: 500;
	color: rgba(var(--cl1));
}
.title-heading h2 {
	font-size: 22px;
	color: rgba(var(--txtall));
	margin-bottom: 5px;
	font-weight: bold;
	text-transform: uppercase;
}
.title-heading.sitleico > i {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 25px;
	color: rgba(var(--cl1), .4);
}
.title-heading.icon {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.title-heading.icon .icon i {
	color: rgba(var(--txtall));
	font-size: 25px;
	opacity: .3;
}
.title-heading::before {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	height: 5px;
	width: 100px;
	background: rgba(var(--txtall));
	border-radius: 10px;
}
.title-heading::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: rgba(var(--txtall), .1);
}
.most-popular .item {
	display: flex;
	align-items: center;
	position: relative;
	padding: 12px 10px;
	border-bottom: 1px solid rgba(var(--lsdb), .1);
}
.most-popular .item:nth-last-child(1){
	border-bottom: inherit;
	margin-bottom: 0;
}
.most-popular .item .thumb {
	min-width: 85px;
	width: 85px;
	height: 55px;
}
.most-popular .item .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
}
.most-popular .item .title {
	padding-left: 12px;
	padding-right: 0;
}
.most-popular .item .title a {
	font-weight: 600;
	font-size: 16px;
	color: rgba(var(--text));
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.CommentArea {
	margin-bottom: 50px;
}
.addComment {
	background: rgba(var(--lbds));
	border-radius: 10px;
	padding: 30px;
}
.commentList .comment {
	background: rgba(var(--lbds));
	padding: 20px;
	border-radius: 5px;
	margin-bottom: 12px;
}
.commentList .comment .comHead {
	display: flex;
	align-items: center;
}
.commentList .comment .comHead .costumer {
	font-weight: bold;
	color: rgba(var(--txtall));
}
.commentList .comment .comHead span {
	font-size: 13px;
	margin-left: 10px;
	opacity: .3;
	color: rgba(var(--txtall));
}
.commentList .comment .comContent p {
	margin: 0;
	font-size: 15px;
	margin-bottom: 0;
	color: rgba(var(--text), .7);
	line-height: 23px;
}
.MoreComment {
	text-align: center;
	margin-top: 20px;
}
.MoreComment .smcommentBTN {
	color: rgba(var(--lsdb), .5);
	background: rgba(var(--lsdb), .06);
	display: inline-block;
	padding: 4px 20px;
	font-weight: 500;
	border-radius: 25px;
	font-size: 14px;
	cursor: pointer;
	transition: .2s;
}
.MoreComment .smcommentBTN:hover {
	color: rgba(var(--lsdb), .7);
	background: rgba(var(--lsdb), .08);
}
.ns-label {
	margin-bottom: 7px;
	font-weight: 500;
	color: rgba(var(--txtall));
}
.ns-control {
	color: rgba(var(--txtall));
	background: rgba(var(--lsdb), .03);
	font-size: 15px;
	width: 100%;
	min-height: 50px;
	padding: 10px 15px;
	border-radius: 5px;
	display: block;
	border: none;
}
.comSend {
	color: #fff !important;
	font-size: 18px;
	background: rgba(var(--cl1));
	box-shadow: 0 5px 25px rgba(var(--cl1), .3);
	min-width: 180px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
	padding-bottom: 8px;
}
.comSend span {
	position: relative;
	top: -1px;
}
.sideContArea {
	padding: 40px;
	background: rgba(var(--lbds));
	border-radius: 12px;
}
.sideContArea .icon i {
	font-size: 70px;
	color: rgba(var(--cl1));
}
.sideContArea .icon {
	margin-bottom: 20px;
}
.sideContArea .desc p {
	margin-bottom: 25px;
	color: rgba(var(--text), .8);
	line-height: 25px;
}
.sideContArea .action .contact-btn {
	padding: 14px 45px;
}

/* Blog Post */ 
.breadcrumb {
	margin-top: 20px;
	margin-bottom: 0;
}
.breadcrumb ul {
	padding: 0;
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
}
.breadcrumb ul li {
	list-style: none;
	padding-right: 5px;
	opacity: .6;
	position: relative;
}
.breadcrumb ul li a {
	font-size: 14px;
	color: rgba(var(--txtall));
	transition: .3s;
}
.breadcrumb ul li::after {
	content: "\f054";
	font-family: 'FontAwesome';
	font-size: 12px;
	position: relative;
	color: rgba(var(--txtall));
	opacity: .6;
}
.breadcrumb ul li:nth-last-child(1) {
	font-weight: 500;
}
.breadcrumb ul li:nth-last-child(1):after {
	content: none;
}
.post-area {
	margin-bottom: 50px;
}
.post-area > h1 {
	font-size: 30px;
	font-weight: bold;
	color: rgba(var(--txtall));
}
.post-content {
	background: rgba(var(--lbds));
	border-radius: 10px;
	overflow: hidden;
}
.post-thumbnail img {
	width: 100%;
	object-fit: cover;
	max-height: 480px;
}
.post-content .post-body {
	padding: 25px;
}
.post-content .post-body img {
	margin: 15px;
}
.post-content .post-body img[style*="float:left"], .contentArea img[style*="float:left"] {
	margin-left: 0;
}
.post-content .post-body img[style*="float:right"], .contentArea img[style*="float:right"] {
	margin-right: 0;
}
.post-body img {
	max-width: 100%;
	border-radius: 10px;
}
.post-content .post-body p {
	margin-bottom: 12px;
	color: rgba(var(--text), .8);
	line-height: 25px;
}
.post-content .post-body a {
	font-weight: bold;
	color: rgba(var(--text), .8);
	font-weight: bold;
	background-image: linear-gradient(0deg, rgba(var(--lsdb), .1), rgba(var(--lsdb), .1));
	background-size: 5px 7px;
	background-repeat: repeat-x;
	background-position: bottom;
	transition: .3s;
}
.post-content .post-body h1 {
	font-size: 30px;
	font-weight: bold;
	color: rgba(var(--text));
	margin-bottom: 15px;
}
.post-content .post-body h2 {
	font-size: 26px;
	font-weight: bold;
	color: rgba(var(--text));
	margin-bottom: 15px;
}
.post-content .post-body h3 {
	font-size: 22px;
	font-weight: bold;
	color: rgba(var(--text));
	margin-bottom: 15px;
}
.post-body ol, .post-body ul {
	color: rgba(var(--text));
	padding-left: 20px;
	margin-bottom: 15px;
}
.post-body blockquote {
	padding: 12px;
	padding-left: 15px;
	background: rgba(var(--lsdb), .05);
	border-left: 4px solid rgba(var(--lsdb), .4);
}
.post-body blockquote p {
	margin-bottom: 0 !important;
	color: rgba(var(--text), .8);
	line-height: 25px;
}
.SideContact {
	margin-bottom: 50px;
}
.sideServiceList .item {
	display: flex;
	align-items: center;
	padding: 15px 20px;
	background: rgba(var(--lbds));
	border-radius: 5px;
	margin-bottom: 12px;
	position: relative;
	overflow: hidden;
}
.sideServiceList .item .icon i {
	color: rgba(var(--txtall));
	font-size: 35px;
}
.sideServiceList .item .title {
	color: rgba(var(--txtall));
	font-weight: bold;
	margin-left: 15px;
	font-size: 18px;
}
.sideServiceList .item .title span {
	font-weight: 400;
	font-size: 15px;
	display: block;
	margin-top: -5px;
}
.sideServiceList .item .action {
	margin-left: auto;
}
.sideServiceList .item .action i {
	color: rgba(var(--txtall));
	font-size: 20px;
}
.sideServiceList .item:before {
	content: "";
	position: absolute;
	left: 100%;
	top: -30%;
	height: 200px;
	width: 200px;
	border-radius: 100%;
	background: rgba(var(--txtall), .1);
	transition: .3s cubic-bezier(0,0,.34,.81);
	opacity: 0;
}
.sideServiceList .item:hover:before {
	left: 80%;
	opacity: 1;
}
.most-popular .item:before {
	content: "";
	position: absolute;
	left: 50%;
	width: 0%;
	height: 100%;
	top: 0;
	bottom: 0;
	background: rgba(var(--lsdb), .05);
	transition: .3s cubic-bezier(0,0,.34,.81);
	z-index: -1;
}
.most-popular .item:hover:before {
	width: 100%;
	left: 0;
}
.contactArea {
	background: rgba(var(--lbds));
	padding: 40px;
	border-radius: 10px;
}
.notfoundarea {
	margin: 100px auto;
	max-width: 900px;
}
.notfoundarea .cls-3, .cls-7 {
	fill: rgba(var(--cl1));
}
.notfoundarea .cls-2 {
	fill: rgba(var(--txtall));
}
.not404 {
	margin-top: 50px;
	padding-top: 30px;
	border-top: 1px solid rgba(var(--cl1), .2);
	text-align: center;
}
.not404 h1 {
	font-weight: bold;
	color: rgba(var(--txtall));
	margin-bottom: 10px;
}
.not404 p {
	margin-bottom: 12px;
	color: rgba(var(--txtall), .8);
	line-height: 25px;
}
.not404 .actions a {
	display: inline-block;
	color: #fff;
	background: rgba(var( --cl1));
	box-shadow: 0 5px 25px rgba(var( --txtall), .3);
	padding: 10px 45px;
	margin: 0 5px;
	border-radius: 5px;
}
.not404 .actions {
	margin-top: 20px;
}
.alert-message {
	position: fixed;
	bottom: 7px;
	right: -100%;
	min-width: 300px;
	max-width: 400px;
	z-index: 99;
	border: none;
}
.orderArea {
	margin-top: 30px;
	margin-bottom: 50px;
}
.firstcont {
	padding: 40px 35px;
	padding-bottom: 50px;
	background: rgba(var(--lbds));
	margin-bottom: 50px;
	border-radius: 20px;
}
.firstcont .step {
	margin-bottom: 40px;
}
.firstcont .step:nth-last-child(1){
	margin-bottom: 0;
}
.firstcont .step h2 {
	font-weight: 700;
	color: rgba(var(--text));
}
.firstcont .step p {
	color: rgba(var(--text), .7);
	margin-bottom: 15px;
}
.ord-control {
	color: rgba(var(--txtall));
	background: #fbfbfb;
	width: 100%;
	height: 55px;
	min-height: 60px;
	border: 3px solid #ececec;
	border-radius: 10px;
	box-shadow: none!important;
	padding: 12px 20px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.ord-control.text {
	height: auto;
	color: rgba(var(--txtall), .8);
}
.ord-control.text span {
	display: block;
	font-weight: bold;
	color: rgba(var(--txtall));
}
select.ord-control {
	background: url(../../img/svg/down-light.svg) no-repeat;
	background-position-x: calc(100% - 12px);
	background-position-y: center;
	background-size: 17px;
}
.ord-control::placeholder {
	color: #999 !important;
}
.orderTabs {
	margin-bottom: 70px;
}
.orderTabs .tab-content {
	display: none;
}
.orderTabs .tab-content.show {
	display: block;
}
.tabOption {
	background: rgba(var(--txtall), .1);
	border-radius: 50px;
}
.tabOption ul {
	padding: 7px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.tabOption ul li {
	color: rgba(var(--txtall));
	list-style: none;
	width: 100%;
	text-align: center;
	cursor: pointer;
	font-weight: 600;
	padding: 7px 20px;
	opacity: .5;
	transition: .2s;
	user-select: none;
}
.tabOption ul li.active {
	background: #fff;
	border-radius: 36px;
	opacity: 1;
}
.orPayDetail .amount {
	padding: 15px 20px;
	background: rgba(var(--lbds));
	border-radius: 15px;
}
.orPayDetail .amount ul {
	padding: 0 5px;
	margin: 0;
}
.orPayDetail .amount ul li {
	list-style: none;
	padding: 8px 0;
	border-bottom: 1px solid rgba(var(--txtall), .07);
	display: flex;
	align-items: center;
	color: rgba(var(--txtall));
}
.orPayDetail .amount ul li span {
	margin-left: auto;
	font-weight: bold;
}
.orPayDetail .amount ul li:nth-last-child(1) {
	border-bottom: inherit;
}
.amount.statu ul li {
	display: block;
}
.amount.statu ul li span {
	display: block;
}
.orPayDetail .PaymentMethod {
	margin-top: 30px;
}
.orPayDetail .PaymentMethod ul {
	padding: 0;
	margin: 0;
}
.orPayDetail .PaymentMethod ul li {
	list-style: none;
	align-items: center;
	color: rgba(var(--txtall));
	background: rgba(var(--lbds));
	font-weight: 500;
	padding: 15px 20px;
	padding-bottom: 14px;
	margin-bottom: 7px;
	border-radius: 10px;
	border: 3px solid #ececec;
	cursor: pointer;
	position: relative;
	transition: .2s;
}
.orPayDetail .PaymentMethod ul li.selected {
	border-color: rgba(var(--txtall));
	color: rgba(var(--txtall));
	font-weight: bold;
}
.orPayDetail .PaymentMethod ul li::after {
	content: "\f00c";
	font-family: 'Font Awesome 5 Free';
	color: #fff;
	background: rgba(var(--txtall));
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 35px;
	height: 30px;
	font-size: 15px;
	font-weight: 600;
	padding-left: 10px;
	padding-bottom: 7px;
	border-bottom-left-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.orPayDetail .PaymentMethod ul li.selected::after {
	opacity: 1;
	transition: .3s;
}
.orPayDetail .PaymentMethod ul li i {
	margin-right: 8px;
}
.orActionBTN.anibut {
	color: #fff !important;
	background-color: rgba(var(--cl1));
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;
	border: none;
	border-radius: 12px;
	padding: 17px 25px;
	padding-bottom: 16px;
	box-shadow: 0 5px 25px rgba(var(--cl1), 0.4);
}
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
	input[type=checkbox],
	input[type=radio] {
		--active: rgba(var(--txtall));
		--active-inner: #fff;
		--border: rgba(var(--txtall), .5);
		--border-hover: rgba(var(--txtall));
		--background: #fff;
		--disabled: #F6F8FF;
		--disabled-inner: #E1E6F9;
		-webkit-appearance: none;
		-moz-appearance: none;
		height: 21px;
		outline: none;
		display: inline-block;
		vertical-align: top;
		position: relative;
		margin: 0;
		cursor: pointer;
		border: 1px solid rgba(var(--lsdb), .2);
		background: var(--b, var(--background));
		transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
	}
	input[type=checkbox]:after,
	input[type=radio]:after {
		content: "";
		display: block;
		left: 0;
		top: 0;
		position: absolute;
		transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
	}
	input[type=checkbox]:checked,
	input[type=radio]:checked {
		--b: rgba(var(--cl1));
		--bc: var(--active);
		--d-o: .3s;
		--d-t: .6s;
		--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
	}
	input[type=checkbox]:disabled,
	input[type=radio]:disabled {
		--b: var(--disabled);
		cursor: not-allowed;
		opacity: 0.9;
	}
	input[type=checkbox]:disabled:checked,
	input[type=radio]:disabled:checked {
		--b: var(--disabled-inner);
		--bc: var(--border);
	}
	input[type=checkbox]:disabled + label,
	input[type=radio]:disabled + label {
		cursor: not-allowed;
	}
	input[type=checkbox]:hover:not(:checked):not(:disabled),
	input[type=radio]:hover:not(:checked):not(:disabled) {
		--bc: var(--border-hover);
	}
	input[type=checkbox]:focus,
	input[type=radio]:focus {
		box-shadow: 0 0 0 var(--focus);
	}
	input[type=checkbox]:not(.switch),
	input[type=radio]:not(.switch) {
		width: 21px;
	}
	input[type=checkbox]:not(.switch):after,
	input[type=radio]:not(.switch):after {
		opacity: var(--o, 0);
	}
	input[type=checkbox]:not(.switch):checked,
	input[type=radio]:not(.switch):checked {
		--o: 1;
	}
	input[type=checkbox] + label,
	input[type=radio] + label {
		font-size: 14px;
		line-height: 21px;
		display: inline-block;
		vertical-align: top;
		cursor: pointer;
		margin-left: 4px;
	}

	input[type=checkbox]:not(.switch) {
		border-radius: 7px;
	}
	input[type=checkbox]:not(.switch):after {
		width: 5px;
		height: 9px;
		border: 2px solid var(--active-inner);
		border-top: 0;
		border-left: 0;
		left: 7px;
		top: 4px;
		transform: rotate(var(--r, 20deg));
	}
	input[type=checkbox]:not(.switch):checked {
		--r: 43deg;
	}
	input[type=checkbox].switch {
		width: 38px;
		border-radius: 11px;
	}
	input[type=checkbox].switch:after {
		left: 2px;
		top: 2px;
		border-radius: 50%;
		width: 15px;
		height: 15px;
		background: var(--ab, var(--border));
		transform: translateX(var(--x, 0));
	}
	input[type=checkbox].switch:checked {
		--ab: var(--active-inner);
		--x: 17px;
	}
	input[type=checkbox].switch:disabled:not(:checked):after {
		opacity: 0.6;
	}

	input[type=radio] {
		border-radius: 50%;
	}
	input[type=radio]:after {
		width: 19px;
		height: 19px;
		border-radius: 50%;
		background: var(--active-inner);
		opacity: 0;
		transform: scale(var(--s, 0.7));
	}
	input[type=radio]:checked {
		--s: .5;
	}
}
.chxarea {
	padding: 12px;
	padding-bottom: 11px;
	border-radius: 10px;
	background: #f8f8f8;
	margin-top: 5px;
	display: flex;
	align-items: center;
}
.chxarea a {
	color: rgba(var(--cl1));
	font-weight: bold;
	background-image: linear-gradient(0deg, rgba(var(--text), .05), rgba(var(--text), .05));
	background-size: 6px 7px;
	background-repeat: repeat-x;
	background-position: bottom;
	transition: .3s;
}
.chxarea.free {
	background: rgba(var(--txtall), .06);
	margin-top: 15px;
}
.chxarea input {
	min-width: 21px !important;
	margin-right: 3px;
}
.chxarea label {
	font-weight: 500;
	color: rgba(var(--txtall));
	width: auto;
}
.chxarea label span {
	font-weight: 400;
	opacity: .6;
}
.coupon {
	position: relative;
	margin: 8px 0;
}
.coupon .coupbtn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	font-size: 15px;
	font-weight: 400;
	color: #fff !important;
	border: none;
	background-color: rgba(var(--cl1));
	border-radius: 3px;
	padding: 5px 21px;
	box-shadow: 0 5px 25px rgba(var(--cl1), 0.3);
}
.coupon .ns-control {
	opacity: .6;
}
.coupon .ns-control::placeholder {
	font-size: 15px;
}
.paymentDetail {
	color: rgba(var(--txtall), .8);
	font-size: 15px;
	background: rgba(var(--lbds));
	padding: 20px;
	border-radius: 10px;
	margin-top: 15px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
}
.paymentDetail p {
	margin: 0;
}
.paymentDetail::before {
	content: "\f06a";
	position: absolute;
	font-family: fontawesome;
	color: rgba(var(--txtall));
	right: -12px;
	top: -27px;
	font-size: 60px;
	transform: rotate(15deg);
	opacity: .1;
}
.orPackDetail {
	padding: 25px 30px;
	background: rgba(var(--lbds));
	border-radius: 15px;
}
.orPackDetail > span {
	font-size: 20px;
	font-weight: bold;
	color: rgba(var(--txtall));
	display: block;
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 2px dashed rgba(var(--txtall), .1);
}
.orPackDetail ul {
	padding: 0 5px;
	margin: 0;
}
.orPackDetail ul li {
	list-style: none;
	padding: 5px 0;
	font-weight: 400;
	display: flex;
	position: relative;
	align-items: center;
	color: rgba(var(--txtall));
}
.orPackDetail ul li::before {
	content: "\f058";
	font-family: 'FontAwesome';
	margin-right: 10px;
	color: rgba(var(--pckdf));
	font-size: 15px;
}
.orPackDetail .favPack {
	position: relative;
	margin: inherit;
	width: 100%;
	height: auto;
	padding: 12px 20px;
	right: inherit;
	top: inherit;
	margin-top: 20px;
}
.orPackDetail .favPack::before {
	margin-right: 5px;
}
.modal.termsofuse .modal-footer {
	justify-content: center;
}
.modal.termsofuse .modal-content {
	border: none;
	border-radius: 15px;
	background: rgba(var(--lbds));
}
.modal.termsofuse .modal-header h5 {
	font-weight: 600;
	color: rgba(var(--txtall));
}
.termsofuse .modal-header, .termsofuse .modal-footer {
	border-color: rgba(var(--lsdb), .1);
}
.modalbtn {
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	color: #fff !important;
	border: none;
	background-color: rgba(var(--cl1));
	border-radius: 40px;
	padding: 8px 35px;
	box-shadow: 0 5px 25px rgba(var(--cl1), 0.3);
}
.modal.termsofuse .modal-body p {
	color: rgba(var(--txtall), .8);
}
.modal.termsofuse .modal-body {
	padding: 20px;
}
.btn-close {
	box-shadow: none !important;
}
.payorderdets ul {
	padding: 0;
	margin: 0;
}
.payorderdets ul li {
	list-style: none;
	color: rgba(var(--txtall), .8);
	background: rgba(var(--lbds));
	font-weight: 400;
	padding: 12px 15px;
	padding-top: 13px;
	margin-bottom: 7px;
	border-radius: 10px;
	border: 3px solid #ececec;
	position: relative;
	transition: .2s;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.payorderdets ul li span {
	font-weight: bold;
	color: rgba(var(--txtall));
}
.payorderdets {
	margin-bottom: 25px;
}
.fixActions {
	position: fixed;
	left: 15px;
	transition: .2s;
	bottom: calc(0% + 15px);
	transform: translateY(0%);
	z-index: 9;
}
.fixActions.show {
	bottom: 50%;
	transform: translateY(50%);
}
.fixActions.show .close .cshow {
	display: none;
}
.fixActions.show .close .chide {
	display: block;
}
.fixActions .close .chide {
	display: none;
}
.fixActions .close .cshow {
	display: block;
}
.fixActions .item {
	background: rgba(var(--cl1));
	border-radius: 10px;
	margin-bottom: 10px;
}
.fixActions .item {
	color: #fff;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.fixActions .item .icon {
	width: 50px;
	text-align: center;
}
.fixActions .item.fav {
	background: #fbbe65;
}
.fixActions .item.wp {
	background: #85C173;
}
.fixActions .item.tel {
	background: var(--fixedtel);
}
.fixActions .item span {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	margin-left: -30px;
	font-weight: 500;
}
.fixActions.show .item:hover {
	width: 100%;
	padding-right: 20px;
}
.fixActions.show .item:hover span {
	position: relative;
	opacity: 1;
	visibility: visible;
	margin-left: 0px;
	transition: .4s cubic-bezier(0,0,.34,.81);
}
.fixActions .item:last-child {
	margin-bottom: 0;
}
.fixActions .item i {
	font-size: 22px;
}
.fixActions .close {
	width: 50px;
	height: 50px;
	color: #fff;
	background: rgba(var(--lsdb), .3);
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	cursor: pointer;
	transition: .2s;
}
.fixActions .close:hover {
	background: rgba(var(--lsdb), .5);
}
.fixActions .close i {
	font-size: 21px;
}
.fixActions .items {
	margin-left: -70px;
	transition: .2s
}
.fixActions.show .items {
	margin-left: 0;
}
.mobileFavsbut {
	display: none;
}
.osareaBG {
	position: fixed;
	padding: 90px 0 65px;
	left: 0;
	right: 0;
	top: -50px;
	background: rgba(var(--lbds));
	box-shadow: 0 5px 30px rgba(var(--lbds), .5);
	z-index: 99;
	display: flex;
	transition: .2s;
	visibility: hidden;
	opacity: 0;
}
.osareaBG .close {
	color: rgba(var(--text));
	background: rgba(var(--text), .08);
	position: absolute;
	top: 10px;
	left: calc(50% - 60px);
	width: 120px;
	text-align: center;
	padding: 3px 10px;
	border-radius: 30px;
	cursor: pointer;
	font-size: 15px;
	transition: .2s;
}
.osareaBG .close:hover {
	background: rgba(var(--text), .11);
}
.osareaBG.show {
	top: 0;
	visibility: visible;
	opacity: 1;

}
.osareaBG .osarea {
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1300px;
}
.searcharea {
	margin: 0 30px;
	display: flex;
	height: 100%
}
.searcharea .content {
	margin: auto 0;
	width: 100%;
}
.searcharea .content .top .icon {
	width: 110px;
	height: 110px;
	background: rgba(var(--cl1));
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	margin: 0 auto;
	margin-bottom: 20px;
}
.searcharea .content .top > span {
	font-size: 25px;
	font-weight: bold;
	color: rgba(var(--txtall));
	display: block;
	margin-bottom: 5px;
}
.searcharea .content .top p {
	font-size: 15px;
	color: rgba(var(--txtall), .8);
	margin-bottom: 20px;
}
.searcharea .srcwell input {
	border: none;
	width: 100%;
	display: block;
	background: #f3f3f3;
	height: 60px;
	padding: 20px;
	border-radius: 10px;
}
.srcwell .osBtn {
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	color: #fff !important;
	border: none;
	background-color: rgba(var(--cl1));
	border-radius: 40px;
	padding: 12px 40px;
	box-shadow: 0 5px 25px rgba(var(--cl1), 0.3);
}
.lastordersarea .content .item {
	background: rgba(var(--txtall), .07);
	margin-bottom: 10px;
	border-radius: 10px;
	padding: 8px 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.lastordersarea {
	height: 100%;
	display: flex;
	align-items: center;
	margin: 0 30px;
	position: relative;
}
.lastordersarea::before {
	content: "";
	position: absolute;
	left: -42px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #eaeaea;
}
.lastordersarea .content > span {
	font-size: 25px;
	font-weight: bold;
	color: rgba(var(--txtall));
	display: block;
}
.lastordersarea .content p {
	font-size: 15px;
	color: rgba(var(--txtall), .8);
	margin-bottom: 20px;
}
.lastordersarea .content {
	width: 100%;
}
.lastordersarea .content .item .text span {
	display: block;
	font-weight: bold;
}
.lastordersarea .content .item .text {
	color: rgba(var(--txtall));
	font-size: 15px;
}
.ordliact {
	color: #fff !important;
	font-size: 15px;
	background: rgba(var(--cl1));
	box-shadow: 0 5px 20px rgba(var(--cl1), .3);
	padding: 7px 15px;
	border-radius: 5px;
}
.ordliact:hover {
	box-shadow: 0 5px 20px rgba(var(--cl1), .5);
}
.ordliact i {
	margin-right: 1px;
}
body.order header, body.order main, body.order footer {
	filter: blur(4px);
	pointer-events: none;
}
.contentArea {
	margin-bottom: 100px;
	padding: 0 15px;
}
.contentArea h1, .contentArea h2, .contentArea h3, .contentArea h4, .contentArea h5 {
	font-weight: 700;
	color: rgba(var(--txtall));
	margin-bottom: 10px;
}
.contentArea p {
	color: rgba(var(--txtall), .8);
	margin-bottom: 12px;
}
.contentArea img {
	display: inline-block;
	margin: 15px;
	max-width: 100%;
}
/* Dark Mode */
body.dark .serviceList .item .box i, body.dark .serviceList .item .serviceName {
	color: rgba(var(--txtall));
}
body.dark .fastOrder, body.dark .AboutArea .imgData .datainfo .item, body.dark .nav-drop .drop-menu {
	box-shadow: inherit;
}
body.dark .aboaction a.abobtn {
	background: rgba(var(--cl1));
}
body.dark .logo img.dark {
	display: block;
}
body.dark .logo img.light {
	display: none;
}
body.dark .fastOrder .fastDrop {
	box-shadow: 0 5px 30px #00000030;
}
body.dark .fastOrder .fastDrop ul li {
	background: #ffffff04;
}
body.dark .fastOrder .fastDrop ul li:hover {
	background: #ffffff08;
}
body.dark .introHome .content p {
	opacity: .6;
}
body.dark .favPack {
	background: #31333e;
}
body.dark .favPack:hover {
	background: #2b2c35;
}
body.dark .intall .conts .icobox i {
	color: var(--bg);
}
body.dark .favPack.active {
	color: rgba(var(--lbds));
	background: #fbbe65;
}
body.dark .favPack.active:hover {
	background: #fbbe65;
	opacity: .8;
}
body.dark .ord-control {
	border: 3px solid #2c2e38;
	background: #2c2e38;
}
body.dark .tabOption {
	background: rgba(var(--lbds));
}
body.dark .tabOption ul li {
	font-weight: 400;
}
body.dark .tabOption ul li.active {
	background: #505261;
}
body.dark .chxarea {
	background: #2c2e38;
}
body.dark .orPayDetail .PaymentMethod ul li {
	color: rgba(var(--txtall));
	background: rgba(var(--lbds));
	font-weight: 500;
	border: 3px solid #505261;
}
body.dark .orPayDetail .PaymentMethod ul li.selected {
	border-color: #97e49a;
	color: #97e49a;
	font-weight: 500;
}
body.dark .orPayDetail .PaymentMethod ul li::after {
	background: #97e49a;
}
body.dark input[type=checkbox], input[type=radio] {
	--background: rgba(var(--lbds));
}
body.dark .coupon .ns-control {
	opacity: 1;
}
body.dark .ns-control {
	color: rgba(var(--txtall));
	background: #2c2e38;
}
body.dark .ord-control::placeholder {
	color: #5b5c65 !important;
}
body.dark select.ord-control {
	background: url(../../img/svg/down-dark.svg) no-repeat, #2c2e38;
	background-position-x: calc(100% - 12px);
	background-position-y: center;
	background-size: 17px;
	color: #92929a;
}
body.dark .notfoundarea .cls-1 {
	fill: rgba(var(--lsdb), .05);
}
/* KEYFRAMES */ 
@keyframes dotsmove {
	0%, 100% {
		transform: rotate(-2deg);
	}
	50% {
		transform: rotate(2deg);
	}
}
@keyframes icoshad {
	0% {
		transform: scale(1); 
		opacity: .5;
	}
	100% {
		transform: scale(1.3);
		opacity: 0;
	}
}

/* MEDIA */
@media (max-width: 1400px){
	.platList, .packList {
		grid-template-columns: repeat(3,1fr);
	}
	.whyus .list .item {
		height: 300px;
	}
}
@media (max-width: 1250px){
	.intall.reserve .conts {
		padding: 30px 50px;
	}
	.intall.reserve .conts .icobox {
		min-width: 110px;
		height: 110px;
		margin-left: 30px;
	}
	.intall.reserve .conts .icobox i {
		font-size: 45px;
	}
}
@media (max-width: 991px) {
	/* Mobile Floating Header Pill */
	header, .navbar.nav-head, .container, .container-fluid, .nav-content {
		overflow: visible !important;
	}
	.navbar.nav-head {
		margin: 15px;
		border-radius: 50px;
		background: rgba(var(--lbds)) !important;
		box-shadow: 0 5px 25px rgba(var(--cl1), 0.15);
		border: 1px solid rgba(var(--cl1), 0.2);
		padding: 5px 15px;
		height: auto !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
	
	.navTogbtn {
		display: flex;
		flex-flow: wrap;
		z-index: 999;
		position: relative;
		background: rgba(var(--cl1), 0.1);
		border-radius: 50%;
		width: 40px;
		height: 40px;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	.navTogbtn .item1, .navTogbtn .item2, .navTogbtn .item3, .navTogbtn .item4 {
		background: rgba(var(--cl1));
		width: 20px;
		height: 2px;
		margin: 2px 0;
		border-radius: 2px;
		transition: all 0.3s;
	}
	/* Make item2 shorter to look like a filter icon */
	.navTogbtn .item2 { width: 14px; }
	.navTogbtn .item3 { width: 10px; }
	
	.NavListArea {
		position: absolute !important;
		top: calc(100% + 15px) !important;
		left: 15px !important;
		right: 15px !important;
		width: auto !important;
		bottom: auto !important;
		visibility: hidden !important;
		opacity: 0 !important;
		background: rgba(var(--lbds)) !important;
		z-index: 999 !important;
		transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
		flex-direction: column;
		align-items: flex-start;
		padding: 15px;
		border-radius: 20px;
		box-shadow: 0 10px 40px rgba(0,0,0, 0.15);
		border: 1px solid rgba(var(--lsdb), 0.05);
		transform: translateY(-20px) !important;
	}
	body.showmenu .NavListArea {
		visibility: visible !important;
		opacity: 1 !important;
		transform: translateY(0) !important;
	}
	.NavListArea ul.NavList {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}
	.NavListArea .NavActions{
		width: 100%;
		flex-direction: column;
		margin: 0;
		margin-top: 25px;
		align-self: center;
	}
	.NavActions .darkmode {
		margin: 0;
		margin-top: 20px;
	}
	.NavActions .darkmode .darkswitch {
		background: rgba(var(--txtall), .1);
	}
	.supportbtn {
		width: 100%;
	}
	.supportbtn a {
		width: 100%;
		text-align: center;
	}
	body.showmenu .navTogbtn {
		position: fixed;
		right: 12px;
	}
	ul.NavList li {
		width: 100%;
		padding: 0;
		border-bottom: 1px solid rgba(var(--lsdb), .05);
	}
	li.nav-drop ul li:nth-last-child(1) {
		border-bottom: inherit;
	}
	.NavList li a {
		display: block;
		padding: 10px 5px;
	}
	.nav-drop .drop-menu {
		position: relative;
		background: #00000006;
		box-shadow: none;
		padding: 12px;
		margin: 0 !important;
		border-radius: 0;
		opacity: 1;
		visibility: visible;
		display: none;
	}
	.intall.reserve .conts {
		padding: 40px 30px;
		padding-bottom: 65px;
	}
	.intall .conts {
		flex-direction: column-reverse;
		justify-content: center;
		padding: 40px 20px;
		padding-bottom: 65px;
	}
	.intall .conts .detabox {
		margin: 0;
		text-align: center;
	}
	.intall {
		height: fit-content;
	}
	.intall .conts .icobox, .intall.reserve .conts .icobox {
		position: absolute;
		bottom: -40px;
		left: calc(50% - 50px);
		min-width: 80px;
		width: 80px;
		max-height: 80px;
		margin: 0 !important;
	}
	.intall .icobox::before {
		left: -15px;
		top: -15px;
		right: -15px;
		bottom: -15px;
	}
	.intall .conts .icobox {
		border: 6px solid rgba(var(--lbds), .3);
	}
	.intall.reserve .conts .icobox i, .intall .conts .icobox i {
		font-size: 28px;
	}
	.platList .item {
		padding: 25px;
	}
	.platList, .packList, .blogList {
		grid-template-columns: repeat(2,1fr);
	}
	.contactArea {
		background: inherit;
		padding: 10px;
	}

	.fastOrder .fastitems {
		flex-direction: column;
		width: 100%;
	}
	.fastOrder {
		flex-direction: column;
		width: calc(100% - 30px);
		transform: translateY(-50px);
	}
	.fastOrder .fastselect {
		margin: 0;
		padding: 0;
		text-align: left;
		width: 100%;
		padding-bottom: 10px;
		margin-bottom: 10px;
		border-bottom: 1px solid #00000007;
	}
	.fastOrder .fastselect::after {
		display: none;
	}
	.fastOrder .fastselect .cont {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.fastOrder .fastselect .cont i {
		display: block;
		transition: .2s;
	}
	.fastselect.show .cont i {
		transform: rotate(90deg);
	}
	.fastAction {
		margin: 0;
		margin-top: 10px;
		width: 100%;
	}
	.butto-fast {
		min-width: 100%;
	}
	.fastOrder .fastDrop {
		top: 0;
		z-index: 1;
		width: 100%;
	}
	.fastOrder .fastselect:first-child .fastDrop {
		left: 0;
	}
	.fastOrder .fastDrop.show {
		top: calc(100% + 5px);
	}
	.fastOrder .fastDrop ul {
		max-height: 215px;
	}
	.whyus .list {
		grid-template-columns: repeat(2,1fr); 
	}
	.AboutArea {
		flex-direction: column;
	}
	.AboutArea .imgData:before {
		left: calc(50% - 125px);
		top: -40px;
	}
	.AboutArea .imgData img {
		width: 100%;
		height: 270px;
		border-radius: 20px;
	}
	.AboutArea.styletwo .imgData img {
		border-radius: 50px;
	}
	.AboDetail {
		padding: 0 10px;
		margin-top: 35px;
	}
	.AboutArea .imgData .datainfo {
		display: none;
	}
	.AboutArea .imgData .datainfo .item {
		margin: 0 3px;
	}
	.aboaction {
		width: calc(100% - 50px);
	}
	.aboaction::before, .aboaction a.abobtn {
		width: 100%;
	}
	.blog-list {
		display: flex;
		grid-gap: inherit;
		overflow: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 10px;
	}
	.blog-list::-webkit-scrollbar {
		display: none;
	}
	.blog-list .blog-item {
		scroll-snap-align: start;
		min-width: 65%;
		padding-right: 25px;
		padding-left: 15px;
		margin-right: -25px;
	}
	.support-bottom {
		flex-direction: column;
	}
	.support-bottom .text {
		margin-bottom: 20px;
		text-align: center;
	}
	.support-bottom .action {
		text-align: center;
		margin-left: inherit;
	}
	.support-bottom .action a {
		width: 90%;
		margin: 0;
		justify-content: space-between;
	}
	.support-bottom .action a:nth-child(1) {
		margin-bottom: 12px;
	}
	.nheadall, .packListArea .splide__pagination__page {
		display: none;
	}
	.packallBTN {
		margin-left: 0;
		margin-top: 0;
	}
	.nfootall {
		display: block;
		text-align: center;
		padding-top: 20px;
		position: relative;
	}
	.packListArea {
		padding-bottom: 15px;
	}
	.otbuts {
		display: flex;
		align-items: center;
	}
	.otbuts .darkmode {
		margin-top: 0;
	}
	.otbuts {
		margin-top: 15px;
		padding: 8px;
		width: 100%;
		background: rgba(var(--lsdb), .03);
		justify-content: center;
		border-radius: 50px;
	}
	.orderSearchNav.orsebtns {
		box-shadow: none !important;
	}
	.mobileFavsbut {
		display: inline-block;
		background: #fbbe65;
		padding: 3px 30px;
		border-radius: 30px;
		cursor: pointer;
		margin-left: 10px;
		position: relative;
		overflow: hidden;
	}
	.mobileFavsbut a i {
		color: #fff;
	}
	.fixActions {
		left: 5px;
		transform: translateY(5%) scale(.8) !important;
		bottom: 0px;
	}
	.fixActions.show {
		transform: translateY(50%) scale(.8) !important;
		bottom: 50%;
	}
}
@media (max-width: 768px){
	a.logo img {
		height: 56px;
	}
	header .navbar {
		position: inherit;
		background: rgba(var(--lbds));
		height: 76px;
		padding:0;
	}
	.serviceList .item .box {
		border-radius: 100%;
		width: 80px;
		height: 80px;
	}
	.serviceList .item .serviceName {
		max-width: 80px;
	}
	.serviceList .item .box i {
		font-size: 32px;
	}
	.serviceList .item .opacityIcon {
		left: 32px;
	}
	.serviceList {
		justify-content: flex-start;
		overflow: auto;
		margin: 25px 0;
	}
	.serviceList .item {
		margin: 0 6px;
	}
	.serviceList .item:nth-child(1) {
		margin-left: 0;
	}
	#serviceList .container {
		padding: 0;
	}
	.serviceList .item:nth-child(1) {
		margin-left: 0;
		padding-left: 15px;
	}
	.serviceList .item:nth-last-child(1) {
		margin-right: 0;
		padding-right: 15px;
	}
	.serviceList::-webkit-scrollbar {
		display: none;
	}
	#introHome {
		margin-top: 0;
	}
	#introHome .container {
		padding: 0;
	}
	.introHome {
		height: auto;
		min-height: 350px;
	}
	.introHome .content {
		padding: 20px;
		top: 0;
		bottom: 50px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	.introHome .content p {
		font-size: 15px;
	}
	.introHome::before {
		background: linear-gradient(to top, rgb(var(--intlinear)), rgb(var(--intlinear), 0.8), rgb(var(--intlinear), 0.5));
		border-radius: 0;
	}
	.introHome img.introBG {
		border-radius: 0;
	}
	.introHome .content h1 {
		font-size: 24px;
	}
	.homestep.two .serviceList, .homestep.three .serviceList {
		margin-top: 0;
	}
	.homestep.three {
		flex-direction: column-reverse;
	}
	.homestep.four {
		flex-direction: column;
	}
	.container.mp0 {
		padding: 0;
	}
	.container.mp0 .ns-heading {
		padding: 0 15px;
	}
	.packitem.inslide {
		margin-top: 10px !important;
	}
	.packListArea .packitem {
		margin: 0 6px;
	}
	.platList, .packList, .blogList {
		grid-template-columns: repeat(1,1fr);
	}
	.whyus .list {
		grid-template-columns: repeat(1, 1fr);
	}
	.whyus .list .item {
		height: 240px;
		border-radius: 15px;
	}
	.whyus .list .item .content .icon {
		width: 60px;
		height: 60px;
	}
	.whyus .list .item .content .icon i {
		font-size: 22px;
	}
	.whyus .list .item .content .detail p {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	#whyus::after {
		height: 150px;
	}
	#testimonial {
		padding: 0;
	}
	#testimonial .ns-heading {
		padding: 0 15px;
	}
	.testimonial-item {
		margin: 0 10px;
	}
	.faqwell .item .fs-head {
		font-size: 16px;
	}
	.faqwell .item {
		padding: 15px;
		padding-bottom: 14px;
		margin-bottom: 8px;
	}
	.faqwell .item .fs-head .plusminus {
		padding-left: 12px;
	}
	.ns-heading.flx {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.ns-heading.flx .left {
		text-align: center;
	}
	.ns-heading.flx .showmore {
		margin: 12px 0 0;
	}
	#aboutus {
		margin-top: 80px;
		padding-bottom: 70px;
	}
	#faq {
		margin-top: 75px;
	}
	#bloglast {
		margin-top: 60px;
	}
	.foot-flex {
		display: flex;
		flex-direction: column;
		padding: 0 10px;
	}
	.intall .conts .icobox {
		box-shadow: 0 5px 20px rgba(var(--cl1), .3);
	}
	.breadcrumb ul {
		overflow: hidden;
		flex-flow: nowrap;
		display: flex;
		position: relative;
		white-space: nowrap;
	}
	.breadcrumb ul li:nth-last-child(1) {
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.post-area > h1 {
		font-size: 25px;
	}
	.post-thumbnail img {
		max-height: 275px;
	}
	.post-content .post-body h1 {
		font-size: 25px;
	}
	.post-content .post-body h2 {
		font-size: 23px;
	}
	.post-content .post-body h3 {
		font-size: 21px;
	}
	.post-content .post-body {
		padding: 25px 15px;
	}
	.ns-control {
		font-size: 16px !important;
	}
	.orderArea {
		margin-top: 0;
	}
	.intall.order {
		margin: 0;
		margin-bottom: 75px;
	}
	.orderArea .row .col-md-8 {
		padding: 0;
	}
	.orderArea .row .col-md-8 .firstcont {
		margin: 0px 15px 30px;
	}
	.intall.order .conts .detabox {
		margin-left: 0;
	}
	.intall.order .conts {
		padding: 40px 20px;
		padding-bottom: 75px;
	}
	.intall.order .conts .icobox {
		position: absolute;
		min-width: 80px;
	}
	.intall.order .conts .icobox i {
		font-size: 30px;
	}
	.firstcont {
		margin-top: 55px;
		padding: 25px 20px;
		border-radius: 5px;
	}
	.fixActions {
		left: 5px;
		transform: translateY(5%) scale(.8) !important;
		bottom: 0;
	}
	.fixActions.show {
		transform: translateY(50%) scale(.8) !important;
		bottom: 50%;
	}
	.fixActions .item {
		margin-bottom: 7px;
		padding-right: 0 !important;
	}
	.fixActions .item span {
		display: none;
	}
	.searcharea {
		padding-bottom: 50px;
		margin: 0 15px;
	}
	.osareaBG {
		padding: 60px 0;
		max-height: 100%;
		overflow: auto;
	}
	body.order header, body.order main, body.order footer {
		display: none;
	}
	.lastordersarea .content .item {
		flex-direction: column;
		align-items: flex-start;
		padding: 12px 15px;
	}
	.lastordersarea .content .item .text {
		margin-bottom: 5px;
	}
	.ordliact {
		padding: 5px 12px;
	}
	.intall.order .conts .detabox h1 {
		font-size: 24px;
	}
	.lastordersarea {
		margin: 0 15px;
	}
	.blog-list .blog-item {
		min-width: 100%; 
	}
	.packListArea:before {
		width: 100%;
		border-radius: 0;
		height: 250px;
	}
	.contentArea img {
		border-radius: 10px;
		padding: 0;
		margin: 15px 0;
	}
	.testiarea::after {
		width: 275px;
	}
	body.dark .nav-drop .drop-menu {
		background: #ffffff06;
	}
	.alert-message {
		max-width: calc(100% - 40px);
	}
	#whyus, #testimonial, #aboutus, #faq, #packList  {
		margin-bottom: 60px;
	}
	#bloglast {
		margin-bottom: 0px;
	}
	.blog-item .thumb img {
		height: 220px;
	}
	.post-content .post-body img {
		margin: 12px 0;
	}
}
@media (max-width: 575px) {

	#intall {
		margin-top: 0;
		margin-bottom: 85px;
	}
	#intall .container {
		padding: 0;
	}
	.intall::before {
		border-radius: 0;
	}
	.intall img.introBG {
		border-radius: 0;
	}
}

@media (min-width: 768px) {
	.homestep.one, .homestep.three {
		margin-top: 35px;
	}
	.homestep.one.noneService, .homestep.three.noneService {
		margin-top: 15px;
	}
	.homestep.two, .homestep.four {
		margin-top: 15px;
	}
	.nav-head.back {
		margin-bottom: 30px;
	}
}
/* --- YENI PLATFORM RENKLI KUTU TASARIMLARI --- */
.serviceList .item .box { display: flex !important; flex-direction: column; justify-content: center; align-items: center; border: none !important; border-radius: 20px !important; padding: 15px; height: 100px; width: 100px; position: relative; overflow: hidden; color: #fff !important; transition: 0.3s; background-color: #555; background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="rgba(255,255,255,0.05)"/></svg>'); }
.serviceList .item .box i { font-size: 32px !important; margin-bottom: 8px; color: #fff !important; margin-right: 0 !important; }
.serviceList .item .box .serviceName { font-size: 13px !important; font-weight: 600; color: #fff !important; text-transform: uppercase; line-height: 1; }
.box.brand-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; }
.box.brand-tiktok { background: #322b40 !important; }
.box.brand-twitter, .box.brand-x-twitter { background: #1da1f2 !important; }
.box.brand-youtube { background: #ff0000 !important; }
.box.brand-facebook, .box.brand-facebook-f, .box.brand-facebook-square { background: #3b5998 !important; }
.box.brand-twitch { background: #6441a5 !important; }
.box.brand-spotify { background: #1db954 !important; }
.box.brand-telegram, .box.brand-telegram-plane { background: #0088cc !important; }
.serviceList .item .box .opacityIcon { display: none !important; }
.serviceList .item a .serviceName { display: none; } /* Gizli eski text varsa diye */
.serviceList .item .box .serviceName { display: block !important; }
@media (max-width:768px) { .serviceList .item .box { width: 85px !important; height: 85px !important; border-radius: 15px !important; } .serviceList .item .box i { font-size: 26px !important; } .serviceList .item .box .serviceName { font-size: 11px !important; } }
/* HOVER IPTALI */
.serviceList .item:hover .box,
.serviceList .item .box:hover {
    transform: none !important;
    box-shadow: none !important;
}
.serviceList .item .box:hover:after,
.serviceList .item .box:hover:before {
    display: none !important;
}
.serviceList .item:hover .serviceName {
    color: #fff !important;
}
.serviceList .item:hover .box i {
    transform: none !important;
    color: #fff !important;
}
/* --- YENI PAKET TASARIMLARI (AI) --- */
.packitem {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.02) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    position: relative !important;
    overflow: visible !important;
    margin-top: 30px !important;
}

.packitem:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 50px rgba(100, 110, 240, 0.15) !important;
    border-color: rgba(100, 110, 240, 0.1) !important;
}

.packitem::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 6px !important;
    background: linear-gradient(90deg, #7F7FD5, #86A8E7, #91EAE4) !important;
    border-radius: 24px 24px 0 0 !important;
}

body.dark .packitem {
    background: #1e1e24 !important;
    border-color: rgba(255,255,255,0.05) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
}

.packInside {
    padding: 35px 25px 25px 25px !important;
}

.packHead {
    display: none !important;
}

.packHead.have {
    display: inline-block !important;
    background: linear-gradient(135deg, #FF6B6B, #FF8E53) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 18px !important;
    border-radius: 20px !important;
    position: absolute !important;
    top: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3) !important;
    height: auto !important;
    width: auto !important;
    min-width: auto !important;
    z-index: 2 !important;
}

.packTop {
    margin-top: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
}

.packTop .icon {
    width: 70px !important;
    height: 70px !important;
    background: rgba(134, 168, 231, 0.1) !important;
    border-radius: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    transition: all 0.4s ease !important;
}

.packitem:hover .packTop .icon {
    transform: scale(1.1) rotate(5deg) !important;
    background: linear-gradient(135deg, #7F7FD5, #86A8E7) !important;
    box-shadow: 0 10px 20px rgba(127, 127, 213, 0.3) !important;
}

.packTop .icon i {
    font-size: 32px !important;
    color: #7F7FD5 !important;
    background: -webkit-linear-gradient(135deg, #7F7FD5, #91EAE4) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    transition: all 0.4s ease !important;
}

.packitem:hover .packTop .icon i {
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
}

body.dark .packTop .icon {
    background: rgba(255,255,255,0.05) !important;
}

.packTop .title {
    text-align: center !important;
}

.packTop .title span {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #2c3e50 !important;
    margin-bottom: 2px !important;
    display: block !important;
}

body.dark .packTop .title span {
    color: #fff !important;
}

.packDetail {
    margin: 25px 0 !important;
    padding: 0 5px !important;
}

.packDetail ul li {
    padding: 12px 0 !important;
    font-size: 15px !important;
    color: #5a6a7c !important;
    border-bottom: 1px dashed rgba(0,0,0,0.05) !important;
    display: flex !important;
    align-items: center !important;
    font-weight: 500 !important;
}

body.dark .packDetail ul li {
    color: #b0b8c1 !important;
    border-bottom-color: rgba(255,255,255,0.05) !important;
}

.packDetail ul li:before {
    content: "\f058" !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    color: #4CAF50 !important;
    font-size: 16px !important;
    margin-right: 12px !important;
}

.packDetailMore {
    text-align: center !important;
    color: #7F7FD5 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-top: 15px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: rgba(127, 127, 213, 0.05) !important;
    transition: all 0.3s !important;
    border: none !important;
}

.packDetailMore:hover {
    background: rgba(127, 127, 213, 0.1) !important;
}

.packPrice {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #2c3e50 !important;
    text-align: center !important;
    margin: 20px 0 !important;
}

body.dark .packPrice {
    color: #fff !important;
}

.packPrice span {
    font-size: 16px !important;
    color: #a0aec0 !important;
    text-decoration: line-through !important;
    font-weight: 600 !important;
}

.packBottom {
    margin-top: auto !important;
}

.packBuyBTN {
    background: linear-gradient(135deg, #7F7FD5, #86A8E7) !important;
    color: #fff !important;
    border-radius: 16px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 16px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 10px 20px rgba(127, 127, 213, 0.3) !important;
    transition: all 0.3s ease !important;
}

.packBuyBTN:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 25px rgba(127, 127, 213, 0.4) !important;
    background: linear-gradient(135deg, #6c6cc4, #7395d4) !important;
}

.packBuyBTN span {
    background: rgba(255,255,255,0.2) !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    top: 0 !important;
}

.packBuyBTN:hover span {
    transform: translateX(4px) !important;
    background: rgba(255,255,255,0.3) !important;
}
/* --- YENI KATEGORI SAYFASI TASARIMI (AI) --- */
.category-sidebar {
    background: #E91E63;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    padding-bottom: 30px;
    box-shadow: 0 10px 30px rgba(233, 30, 99, 0.2);
}

.sidebar-img-wrapper {
    width: 100%;
    height: 350px;
    overflow: hidden;
    position: relative;
}

.sidebar-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-img-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, #E91E63, transparent);
}

.sidebar-content {
    position: relative;
    z-index: 2;
    padding: 0 25px;
    margin-top: -30px;
    color: #fff;
    text-align: left;
}

.sidebar-icon {
    display: none;
}

.sidebar-content h1 {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}

.sidebar-content p {
    font-size: 15px;
    opacity: 0.9;
    margin-bottom: 20px;
    line-height: 1.5;
}

.sidebar-stats {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

.stat-item {
    display: flex;
    align-items: center;
}

.stat-icon {
    width: 40px;
    height: 40px;
    background: #fff;
    color: #E91E63;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 15px;
}

.stat-text span {
    display: block;
    font-size: 13px;
    opacity: 0.8;
}

.stat-text strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
}

.sidebar-btn {
    width: 100%;
    background: #f1f5f9;
    color: #1e293b;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sidebar-btn:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.category-grid-area {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    height: 100%;
}

.grid-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 5px;
}

.grid-header p {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 15px;
}

.grid-tabs {
    display: flex;
    gap: 15px;
}

.g-tab {
    padding: 10px 25px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    color: #64748b;
    transition: all 0.3s;
}

.g-tab.active {
    background: rgba(233, 30, 99, 0.1);
    color: #E91E63;
    border-color: #E91E63;
}

.g-tab:hover:not(.active) {
    background: #f8fafc;
}

.pkg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 15px;
}

@media (max-width: 1200px) {
    .pkg-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .pkg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .pkg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pkg-qty {
        font-size: 20px !important;
    }
}

.pkg-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 15px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.pkg-tile:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.pkg-tile.disabled-tile {
    opacity: 0.5;
    pointer-events: none;
}

.pkg-qty {
    font-size: 26px;
    font-weight: 800;
    color: #334155;
    line-height: 1;
    margin-bottom: 5px;
}

.pkg-unit {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 20px;
}

.pkg-price-badge {
    align-self: flex-end;
    background: #f1f5f9;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.pkg-check {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #E91E63;
    font-size: 18px;
    opacity: 0;
    transition: all 0.3s;
}

.pkg-tile:hover {
    background: rgba(233, 30, 99, 0.05);
    border-color: rgba(233, 30, 99, 0.3);
}

.pkg-tile:hover .pkg-check {
    opacity: 1;
}

.pkg-tile:hover .pkg-price-badge {
    background: #E91E63;
    color: #fff;
}

body.dark .category-grid-area {
    background: #1e1e24;
    border-color: rgba(255,255,255,0.05);
}

body.dark .grid-header h3 { color: #fff; }
body.dark .pkg-tile {
    background: #2a2a35;
    border-color: #3f3f4e;
}
body.dark .pkg-qty { color: #fff; }
/* --- PLATFORM SAYFASI (AI) --- */
.platform-sidebar {
    background: #fff;
    padding-bottom: 20px;
    border: 1px solid #e2e8f0;
}
.sidebar-platform-brand {
    background: #322b40;
    height: 180px;
    border-radius: 15px;
    margin: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 10px 25px rgba(50, 43, 64, 0.3);
}
.sidebar-platform-brand i {
    font-size: 60px;
    margin-bottom: 10px;
}
.sidebar-platform-brand span {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.platform-sidebar .sidebar-content {
    margin-top: 0;
    color: #334155;
    padding: 0 20px;
}
.platform-sidebar h1 {
    font-size: 24px;
    color: #1e293b;
    margin-bottom: 15px;
}
.platform-sidebar p {
    font-size: 14px;
    color: #64748b;
    opacity: 1;
}
.platform-stats {
    margin-top: 20px;
    border-top: 1px solid #f1f5f9;
    padding-top: 15px;
}
.p-stat {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}
.p-stat:last-child {
    border-bottom: none;
}
.ps-icon {
    width: 45px;
    height: 45px;
    background: #f8fafc;
    color: #94a3b8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 15px;
}
.ps-text span {
    display: block;
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 2px;
}
.ps-text strong {
    display: block;
    font-size: 14px;
    color: #475569;
    font-weight: 700;
}

.platform-tabs {
    background: #1e293b;
    padding: 10px;
    border-radius: 40px;
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    gap: 5px;
}
.platform-tabs::-webkit-scrollbar {
    display: none;
}
.platform-tabs .g-tab {
    border: none;
    color: #cbd5e1;
    border-radius: 30px;
    padding: 8px 25px;
    transition: 0.3s;
    font-size: 14px;
    cursor: pointer;
}
.platform-tabs .g-tab.active, .platform-tabs .g-tab:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.subcat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 991px) {
    .subcat-grid {
        grid-template-columns: 1fr;
    }
}
.subcat-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 15px;
    text-decoration: none;
    transition: all 0.3s;
}
.subcat-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-color: #cbd5e1;
    transform: translateY(-2px);
}
.sc-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    background: #322b40;
    color: #fff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-right: 20px;
    position: relative;
    overflow: hidden;
}
.sc-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="rgba(255,255,255,0.05)"/></svg>');
}
.sc-detail h4 {
    font-size: 16px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 2px;
}
.sc-detail span {
    font-size: 13px;
    color: #94a3b8;
    display: block;
    margin-bottom: 5px;
}
.sc-count {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}
.sc-arrow {
    margin-left: auto;
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}
.subcat-card:hover .sc-arrow {
    background: #322b40;
    color: #fff;
}

body.dark .platform-sidebar, body.dark .subcat-card {
    background: #1e1e24;
    border-color: #2a2a35;
}
body.dark .platform-sidebar h1, body.dark .sc-detail h4 {
    color: #fff;
}
body.dark .p-stat {
    border-color: #2a2a35;
}
body.dark .ps-icon, body.dark .sc-arrow {
    background: #2a2a35;
    color: #94a3b8;
}
body.dark .platform-stats { border-color: #2a2a35; }
/* MEGA MENU TRIGGER CSS */
li.has-mega-menu > a.navlink {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
li.has-mega-menu > a.navlink::after {
    content: "\f107" !important;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    border: none !important;
    transition: transform 0.3s ease;
    display: inline-block !important;
    transform: none !important;
    margin-left: 2px;
    position: static !important;
}
li.has-mega-menu:hover > a.navlink::after {
    transform: rotate(180deg) !important;
}
/* END MEGA MENU TRIGGER CSS */

/* MEGA MENU CSS */
.nav-head .container, .nav-head .container-fluid {
    position: relative;
}
.has-mega-menu {
    position: static !important;
}
.mega-menu-wrapper {
    position: absolute;
    top: 100%;
    left: 15px; /* offset for container padding */
    width: calc(100% - 30px);
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-radius: 0 0 20px 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 999;
    padding: 30px;
    border-top: 1px solid #f5f5f5;
}
.has-mega-menu:hover .mega-menu-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.mega-menu-inner {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
}
.mega-platforms {
    flex: 0 0 280px;
    border-right: 1px solid #f0f0f0;
    padding-right: 20px;
}
.mega-platform-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.mega-platform-item:hover, .mega-platform-item.active {
    background: #f8f9fa;
    border-color: #eee;
}
.mega-platform-item .mp-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-right: 15px;
    font-size: 20px;
    color: #6c5ce7;
}
.mega-platform-item .mp-text strong {
    display: block;
    font-size: 15px;
    color: #2d3436;
    font-weight: 700;
}
.mega-platform-item .mp-text span {
    display: block;
    font-size: 12px;
    color: #b2bec3;
    font-weight: 500;
}
.mega-categories {
    flex: 1;
}
.mc-title, .mp-title {
    font-size: 12px;
    text-transform: uppercase;
    color: #b2bec3;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
    font-weight: 700;
}
.mega-cat-pane {
    display: none;
}
.mega-cat-pane.active {
    display: block;
    animation: megaFadeIn 0.4s ease forwards;
}
.mc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.mc-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 10px;
    color: #636e72;
    font-weight: 600;
    transition: all 0.2s ease;
    background: transparent;
    border: 1px solid transparent;
}
.mc-item:hover {
    background: #f8f9fa;
    color: #6c5ce7;
    border-color: #eee;
    transform: translateX(5px);
}
.mc-item i {
    margin-right: 12px;
    color: #a29bfe;
    font-size: 18px;
    width: 20px;
    text-align: center;
}
.mc-view-all {
    display: block;
    text-align: center;
    background: #f4f5f7;
    color: #6c5ce7;
    padding: 14px;
    border-radius: 10px;
    margin-top: 25px;
    font-weight: 700;
    transition: all 0.3s ease;
}
.mc-view-all:hover {
    background: #6c5ce7;
    color: #fff;
    box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3);
}
.mega-promo {
    flex: 0 0 300px;
    border-left: 1px solid #f0f0f0;
    padding-left: 30px;
}
.mp-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    border: 1px solid #f5f5f5;
}
.mp-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.mp-card-content {
    padding: 20px;
}
.mp-card-content h4 {
    font-size: 16px;
    font-weight: 800;
    color: #2d3436;
    margin-bottom: 12px;
    line-height: 1.4;
}
.mp-card-content p {
    font-size: 13px;
    color: #636e72;
    margin: 0;
    line-height: 1.5;
}

@keyframes megaFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

body.dark .mega-menu-wrapper {
    background: #1e1e24;
    border-top-color: #2d2d35;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
body.dark .mega-platforms, body.dark .mega-promo {
    border-color: #2d2d35;
}
body.dark .mega-platform-item:hover, body.dark .mega-platform-item.active {
    background: #25252c;
    border-color: #333;
}
body.dark .mega-platform-item .mp-icon {
    background: #2d2d35;
}
body.dark .mega-platform-item .mp-text strong, body.dark .mp-card-content h4 {
    color: #fff;
}
body.dark .mc-item {
    color: #ccc;
}
body.dark .mc-item:hover {
    background: #25252c;
    border-color: #333;
}
body.dark .mc-view-all {
    background: #25252c;
}
body.dark .mc-view-all:hover {
    background: #6c5ce7;
}
body.dark .mp-card {
    background: #25252c;
    border-color: #333;
}

@media (max-width: 991px) {
    .navTogbtn {
        display: block;
    }
    .NavListArea {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: rgba(var(--lbds), 0.98);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        transition: left 0.3s ease;
        visibility: hidden;
        overflow-y: auto;
        z-index: 999;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    body.showmenu .NavListArea {
        left: 0;
        visibility: visible;
    }
    .NavList {
        flex-direction: column;
        width: 100%;
    }
    .NavList li {
        width: 100%;
        border-bottom: 1px solid rgba(var(--lsdb), 0.1);
    }
    .NavList li a {
        display: block;
        padding: 15px 10px;
        font-size: 16px;
    }
    .NavActions {
        margin-left: 0;
        margin-top: 20px;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .nav-drop .drop-menu {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        padding: 10px;
        margin-top: 0;
        display: none;
    }
    li.navitem.nav-drop > a.show + .drop-menu {
        display: block;
    }
    .has-mega-menu {
        position: relative !important;
    }
    .mega-menu-wrapper {
        position: relative;
        top: 0;
        box-shadow: none;
        border: none;
        padding: 15px 0 0 0;
        display: none;
        transform: none;
        transition: none;
        opacity: 1;
        visibility: visible;
    }
    .has-mega-menu.active .mega-menu-wrapper,
    .has-mega-menu:hover .mega-menu-wrapper {
        display: block;
    }
    .mega-menu-inner {
        flex-direction: column;
        gap: 15px;
    }
    .mega-platforms {
        flex: auto;
        border: none;
        padding: 0;
        margin: 0;
    }
    .mega-categories, .mega-promo {
        display: none !important;
    }
    .mega-platform-item {
        display: flex !important;
        align-items: center;
        background: rgba(var(--txtall), 0.03);
        border-radius: 15px;
        padding: 12px 15px;
        margin-bottom: 12px;
        text-decoration: none;
        position: relative;
        border: 1px solid transparent;
        transition: all 0.2s;
    }
    body.dark .mega-platform-item {
        background: rgba(255,255,255,0.03);
    }
    .mega-platform-item::after {
        content: '\f078';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        right: 15px;
        color: rgba(var(--txtall), 0.5);
        font-size: 14px;
        background: rgba(var(--txtall), 0.05);
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mega-platform-item .mp-icon {
        font-size: 22px;
        margin-right: 15px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: rgba(var(--lbds));
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        color: rgba(var(--txtall));
    }
    body.dark .mega-platform-item .mp-icon {
        background: rgba(255,255,255,0.05);
    }
    .mega-platform-item .mp-text strong {
        display: block;
        font-size: 15px;
        color: rgba(var(--txtall));
        font-weight: 700;
        line-height: 1.3;
    }
    .mega-platform-item .mp-text span {
        display: block;
        font-size: 12px;
        color: rgba(var(--txtall), 0.6);
        margin-top: 2px;
    }
}


/* ==========================================================================
   COMPLETE MODERN SOSYALPATIKA DESIGN SYSTEM
   ========================================================================== */


/* --- saved_modern_css_2026-08-30_1348.css --- */
/* ==========================================================================
   MODERN SPLIT HERO, FAQ 3D HUB & 3-COLUMN PACKAGE HUB (REFERENCE STYLES)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO SECTION & INTEGRATED FAST ORDER DOCK (REFERENCE 2 & 3)
   -------------------------------------------------------------------------- */
.modern-split-hero-section {
	margin-bottom: 30px;
}

.hero-main-banner-card {
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.08);
	border-radius: 28px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
	position: relative;
	overflow: hidden;
}

body.dark .hero-main-banner-card {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
}

.hero-banner-glow {
	position: absolute;
	top: -50px;
	left: -50px;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
	pointer-events: none;
}

.hero-eyebrow-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	background: rgba(99, 102, 241, 0.08);
	color: #6366f1;
	border: 1px solid rgba(99, 102, 241, 0.2);
}

body.dark .hero-eyebrow-pill {
	background: rgba(99, 102, 241, 0.15);
	color: #a5b4fc;
	border-color: rgba(99, 102, 241, 0.3);
}

.hero-card-title {
	font-size: 32px;
	font-weight: 900;
	line-height: 1.25;
	color: #0f172a;
	letter-spacing: -0.02em;
}

body.dark .hero-card-title {
	color: #ffffff;
}

.hero-card-desc {
	font-size: 14px;
	color: #64748b;
	line-height: 1.65;
	max-width: 480px;
}

body.dark .hero-card-desc {
	color: #94a3b8;
}

/* Embedded Fast Order Dropdowns inside Hero */
.modern-hero-fast-order {
	position: relative;
	z-index: 10;
}

.modern-hero-fast-order .fastselect {
	position: relative;
	width: 100%;
}

.modern-hero-fast-order .fastselect .cont {
	background: #f8fafc;
	border: 1.5px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	padding: 11px 16px;
	cursor: pointer;
	transition: all 0.25s ease;
}

body.dark .modern-hero-fast-order .fastselect .cont {
	background: #1a1e2e;
	border-color: rgba(255, 255, 255, 0.08);
}

.modern-hero-fast-order .fastselect .cont:hover {
	border-color: #6366f1;
	background: #ffffff;
}

body.dark .modern-hero-fast-order .fastselect .cont:hover {
	background: #20263a;
	border-color: #6366f1;
}

.modern-hero-fast-order .fast-step-badge {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.modern-hero-fast-order .fastHead {
	font-size: 13.5px;
	font-weight: 700;
	color: #0f172a;
}

body.dark .modern-hero-fast-order .fastHead {
	color: #ffffff;
}

.modern-hero-fast-order .fast-arrow-icon {
	font-size: 12px;
	color: #94a3b8;
	transition: transform 0.25s ease;
}

.modern-hero-fast-order .fastselect.active .fast-arrow-icon {
	transform: rotate(180deg);
	color: #6366f1;
}

.modern-hero-fast-order .fastDrop {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	margin-top: 6px;
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
	z-index: 100;
	max-height: 240px;
	overflow-y: auto;
	display: none;
}

body.dark .modern-hero-fast-order .fastDrop {
	background: #1a1e2e;
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.modern-hero-fast-order .fastDrop ul {
	list-style: none;
	padding: 6px;
	margin: 0;
}

.modern-hero-fast-order .fastDrop li {
	padding: 9px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	cursor: pointer;
	transition: all 0.2s ease;
}

body.dark .modern-hero-fast-order .fastDrop li {
	color: #cbd5e1;
}

.modern-hero-fast-order .fastDrop li:hover {
	background: rgba(99, 102, 241, 0.1);
	color: #6366f1;
}

.hero-fast-submit-btn {
	padding: 13px 20px;
	border-radius: 14px;
	font-weight: 800;
	font-size: 14.5px;
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
	color: #ffffff !important;
	border: none;
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
	transition: all 0.25s ease;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hero-fast-submit-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(99, 102, 241, 0.45);
	filter: brightness(1.08);
}

/* 3D Mascot Stage in Hero */
.hero-3d-stage {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.hero-3d-backdrop-arch {
	position: absolute;
	bottom: 0;
	right: 15px;
	width: 250px;
	height: 290px;
	border-radius: 130px 130px 0 0;
	background: linear-gradient(180deg, rgba(124, 58, 237, 0.2) 0%, rgba(99, 102, 241, 0.05) 100%);
	z-index: 1;
}

body.dark .hero-3d-backdrop-arch {
	background: linear-gradient(180deg, rgba(124, 58, 237, 0.3) 0%, rgba(99, 102, 241, 0.08) 100%);
}

.hero-3d-avatar-img {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 290px;
	height: auto;
	object-fit: contain;
}

/* Sidebar Promo Cards */
.hero-promo-card {
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.08);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
	transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	position: relative;
}

body.dark .hero-promo-card {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}

.hero-promo-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.promo-card-tag {
	font-size: 12.5px;
	font-weight: 700;
	color: #64748b;
}

body.dark .promo-card-tag {
	color: #94a3b8;
}

.promo-card-title {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.01em;
}

.promo-card-title.text-cyan { color: #0284c7 !important; }
.promo-card-title.text-orange { color: #ea580c !important; }

body.dark .promo-card-title.text-cyan { color: #38bdf8 !important; }
body.dark .promo-card-title.text-orange { color: #fb923c !important; }

.promo-card-art {
	height: 120px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.promo-arch-bg {
	position: absolute;
	bottom: 0;
	width: 130px;
	height: 100px;
	border-radius: 65px 65px 0 0;
	z-index: 1;
}

.arch-cyan { background: linear-gradient(180deg, rgba(56, 189, 248, 0.25), rgba(56, 189, 248, 0.05)); }
.arch-orange { background: linear-gradient(180deg, rgba(251, 146, 60, 0.25), rgba(251, 146, 60, 0.05)); }

.promo-avatar-img {
	position: relative;
	z-index: 2;
	width: 130px;
	height: 130px;
	object-fit: contain;
	margin-bottom: -5px;
}

/* --------------------------------------------------------------------------
   2. SSS (FAQ) 3D HUB SECTION (REFERENCE 4)
   -------------------------------------------------------------------------- */
.modern-faq-hub-section {
	margin-bottom: 40px;
}

.faq-showcase-stage {
	width: 100%;
	height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.faq-stage-aura {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 270px;
	height: 270px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(124, 58, 237, 0.2), transparent 70%);
	filter: blur(30px);
	z-index: 1;
}

.faq-stage-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 260px;
	height: 260px;
	border-radius: 50%;
	border: 2px dashed rgba(99, 102, 241, 0.25);
	z-index: 1;
}

.faq-avatar-img {
	position: relative;
	z-index: 2;
	max-width: 310px;
	height: auto;
	object-fit: contain;
}

.faq-float-pill.ffp-shield {
	position: absolute;
	top: 25%;
	left: 15px;
	z-index: 3;
	background: #ffffff;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
	font-size: 18px;
	animation: floatPulse 3s infinite ease-in-out;
}

body.dark .faq-float-pill.ffp-shield {
	background: #1a1e2e;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.faq-float-card {
	position: absolute;
	z-index: 3;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 14px;
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	text-align: left;
}

body.dark .faq-float-card {
	background: rgba(20, 23, 36, 0.95);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.faq-float-card.ffc-success {
	bottom: 25%;
	right: 10px;
	animation: floatPulse 3.5s infinite ease-in-out 0.5s;
}

.faq-float-card.ffc-notify {
	bottom: 5%;
	left: 10px;
	animation: floatPulse 4s infinite ease-in-out 1s;
}

.ffc-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 12px;
	flex-shrink: 0;
}

.ffc-icon.bg-purple { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.ffc-icon.bg-indigo { background: linear-gradient(135deg, #4f46e5, #6366f1); }

.ffc-title {
	display: block;
	font-size: 11px;
	font-weight: 800;
	color: #0f172a;
}

body.dark .ffc-title { color: #ffffff; }

.ffc-sub {
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	color: #64748b;
}

body.dark .ffc-sub { color: #94a3b8; }

@keyframes floatPulse {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

/* FAQ Accordions */
.modern-faq-accordion-item {
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.07);
	border-radius: 16px;
	margin-bottom: 12px;
	overflow: hidden;
	transition: all 0.25s ease;
	position: relative;
}

body.dark .modern-faq-accordion-item {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
}

.modern-faq-accordion-item.active {
	border-color: rgba(99, 102, 241, 0.4);
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.08);
}

.faq-accordion-head {
	padding: 16px 20px;
	cursor: pointer;
	user-select: none;
}

.faq-accordion-title {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.4;
}

body.dark .faq-accordion-title {
	color: #ffffff;
}

.faq-chevron-circle {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f1f5f9;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #64748b;
	transition: all 0.25s ease;
	flex-shrink: 0;
}

body.dark .faq-chevron-circle {
	background: #1e2438;
	color: #94a3b8;
}

.modern-faq-accordion-item.active .faq-chevron-circle {
	background: #6366f1;
	color: #ffffff;
	transform: rotate(180deg);
}

.faq-accordion-body {
	padding: 0 20px 18px 20px;
	font-size: 13.5px;
	line-height: 1.7;
	color: #64748b;
}

body.dark .faq-accordion-body {
	color: #94a3b8;
}

.faq-active-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, #6366f1, #d946ef);
	transition: width 0.3s ease;
}

.modern-faq-accordion-item.active .faq-active-bar {
	width: 100%;
}

/* --------------------------------------------------------------------------
   3. ÇOK SATANLAR 3-COLUMN PACKAGE HUB (REFERENCE 5)
   -------------------------------------------------------------------------- */
.modern-package-hub-section {
	margin-bottom: 50px !important;
}

.hub-main-title {
	font-size: 32px;
	font-weight: 900;
	color: #0f172a;
	letter-spacing: -0.02em;
}

body.dark .hub-main-title {
	color: #ffffff;
}

.hub-main-subtitle {
	font-size: 14.5px;
	color: #64748b;
	max-width: 600px;
}

body.dark .hub-main-subtitle {
	color: #94a3b8;
}

.hub-tab-btn {
	padding: 9px 18px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.07);
	color: #0f172a !important;
	transition: all 0.25s ease;
	display: inline-flex;
	align-items: center;
}

body.dark .hub-tab-btn {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	color: #ffffff !important;
}

.hub-tab-btn:hover {
	border-color: #ff2d55;
	color: #ff2d55 !important;
	transform: translateY(-2px);
}

.hub-tab-btn.active {
	background: #ff2d55 !important;
	border-color: #ff2d55 !important;
	color: #ffffff !important;
	box-shadow: 0 6px 18px rgba(255, 45, 85, 0.35);
}

/* Compact Platform Power Tiles (Reference 5) */
.elite-compact-tile {
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.07);
	border-radius: 16px;
	padding: 14px 18px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
	transition: all 0.25s ease;
}

body.dark .elite-compact-tile {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
}

.elite-compact-tile:hover {
	transform: translateY(-3px);
	border-color: #ff2d55;
	box-shadow: 0 8px 24px rgba(255, 45, 85, 0.12);
}

.ect-icon-box {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(255, 45, 85, 0.1);
	color: #ff2d55;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	flex-shrink: 0;
}

.ect-title {
	font-size: 14px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
}

body.dark .ect-title {
	color: #ffffff;
}

.ect-platform-tag {
	font-size: 10.5px;
	font-weight: 700;
	color: #ff2d55;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: block;
}

.ect-price-text {
	font-size: 15px;
	font-weight: 900;
	color: #0f172a;
}

body.dark .ect-price-text {
	color: #ffffff;
}

.ect-cart-btn {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #ff2d55;
	color: #ffffff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	text-decoration: none;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.ect-cart-btn:hover {
	transform: scale(1.08);
	filter: brightness(1.12);
}

/* Featured Master Card (Center of Reference 5) */
.featured-master-card {
	background: #ffffff;
	border: 2px solid #ff2d55;
	border-radius: 24px;
	padding: 34px 24px;
	box-shadow: 0 12px 35px rgba(255, 45, 85, 0.15);
	position: relative;
	overflow: hidden;
}

body.dark .featured-master-card {
	background: #161926;
	border-color: #ff2d55;
	box-shadow: 0 15px 45px rgba(255, 45, 85, 0.25);
}

.fmc-top-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: #ff2d55;
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	padding: 4px 18px;
	border-radius: 0 0 12px 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 4px 12px rgba(255, 45, 85, 0.3);
}

.fmc-icon-wrap {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	background: rgba(255, 45, 85, 0.1);
	color: #ff2d55;
	font-size: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fmc-title {
	font-size: 20px;
	font-weight: 900;
	color: #0f172a;
	line-height: 1.3;
}

body.dark .fmc-title {
	color: #ffffff;
}

.fmc-platform-tag {
	font-size: 11.5px;
	font-weight: 800;
	color: #ff2d55;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.fmc-feature-row {
	background: #f8fafc;
	border: 1px solid rgba(0, 0, 0, 0.04);
	border-radius: 10px;
	padding: 8px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: #334155;
}

body.dark .fmc-feature-row {
	background: #1e2235;
	border-color: rgba(255, 255, 255, 0.06);
	color: #cbd5e1;
}

.fmc-ficon {
	width: 20px;
	font-size: 13px;
	text-align: center;
}

.fmc-price-tag {
	font-size: 22px;
	font-weight: 900;
	color: #0f172a;
}

body.dark .fmc-price-tag {
	color: #ffffff;
}

.fmc-buy-btn {
	padding: 11px 20px;
	border-radius: 12px;
	background: #ff2d55;
	color: #ffffff !important;
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(255, 45, 85, 0.35);
	transition: all 0.2s ease;
}

.fmc-buy-btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.1);
}

.fmc-fav-btn {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	border: 1.5px solid rgba(255, 45, 85, 0.3);
	color: #ff2d55;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.fmc-fav-btn:hover {
	background: rgba(255, 45, 85, 0.1);
}

/* --------------------------------------------------------------------------
   4. BLOG SLIDER & CARDS
   -------------------------------------------------------------------------- */
#bloglast {
	margin-bottom: 50px !important;
}

.bloglast-title {
	font-size: 30px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

body.dark .bloglast-title {
	color: #ffffff;
}

.bloglast-subtitle {
	font-size: 14.5px;
	line-height: 1.7;
	color: #64748b;
	max-width: 680px;
}

body.dark .bloglast-subtitle {
	color: #94a3b8;
}

.modern-home-blog-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
	transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
	margin: 6px 2px;
}

body.dark .modern-home-blog-card {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.modern-home-blog-card:hover {
	transform: translateY(-6px);
	border-color: rgba(99, 102, 241, 0.4);
	box-shadow: 0 15px 35px rgba(99, 102, 241, 0.12);
}

.mhbc-thumb-wrap {
	position: relative;
	width: 100%;
	height: 190px;
	overflow: hidden;
	background: #f1f5f9;
}

body.dark .mhbc-thumb-wrap {
	background: #1e2438;
}

.mhbc-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: none !important;
	transition: transform 0.5s ease;
}

.modern-home-blog-card:hover .mhbc-thumb-img {
	transform: scale(1.04);
}

.mhbc-content {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.mhbc-meta {
	font-size: 12px;
	color: #64748b;
	font-weight: 600;
}

body.dark .mhbc-meta {
	color: #94a3b8;
}

.mhbc-date {
	font-size: 12px;
	color: #64748b;
	font-weight: 600;
}

body.dark .mhbc-date {
	color: #94a3b8;
}

.mhbc-readtime {
	font-size: 11.5px;
	font-weight: 700;
	color: #6366f1;
	background: rgba(99, 102, 241, 0.08);
	padding: 2px 8px;
	border-radius: 6px;
}

body.dark .mhbc-readtime {
	background: rgba(99, 102, 241, 0.15);
	color: #a5b4fc;
}

.mhbc-title {
	font-size: 16.5px;
	font-weight: 800;
	line-height: 1.4;
	margin-bottom: 8px;
}

.mhbc-title a {
	color: #0f172a;
	text-decoration: none;
	transition: color 0.2s ease;
}

body.dark .mhbc-title a {
	color: #ffffff;
}

.mhbc-title a:hover {
	color: #6366f1;
}

.mhbc-desc {
	font-size: 13px;
	line-height: 1.6;
	color: #64748b;
	margin-bottom: 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.dark .mhbc-desc {
	color: #94a3b8;
}

.mhbc-read-btn {
	display: inline-flex;
	align-items: center;
	color: #6366f1 !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s ease;
}

.mhbc-read-btn:hover {
	color: #4f46e5 !important;
	transform: translateX(4px);
}

/* Splide Pagination Fix */
.splide__pagination {
	position: static !important;
	margin-top: 20px !important;
	margin-bottom: 0 !important;
	transform: none !important;
	display: flex !important;
	justify-content: center !important;
	gap: 6px !important;
}

.splide__pagination__page {
	background: rgba(99, 102, 241, 0.2) !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 4px !important;
	transition: all 0.3s ease !important;
	margin: 0 !important;
	border: none !important;
}

.splide__pagination__page.is-active {
	background: #6366f1 !important;
	width: 22px !important;
	border-radius: 6px !important;
	box-shadow: 0 0 10px rgba(99, 102, 241, 0.4) !important;
}

@media (min-width: 992px) {
	.blog-splide .splide__pagination,
	.whyus-splide .splide__pagination {
		display: none !important;
	}
}


/* --- saved_modern_css_2026-08-30_1355.css --- */
/* ==========================================================================
   COMPLETE MODERN REDESIGN STYLES: HERO, FAQ, POWER TILES & BLOG
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO SECTION & INTEGRATED FAST ORDER DOCK (REFERENCE 2 & 3)
   -------------------------------------------------------------------------- */
.modern-split-hero-section {
	margin-bottom: 30px;
}

.hero-main-banner-card {
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.08);
	border-radius: 28px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
	position: relative;
	overflow: hidden;
}

body.dark .hero-main-banner-card {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
}

.hero-banner-glow {
	position: absolute;
	top: -50px;
	left: -50px;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
	pointer-events: none;
}

.hero-eyebrow-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	background: rgba(99, 102, 241, 0.08);
	color: #6366f1;
	border: 1px solid rgba(99, 102, 241, 0.2);
}

body.dark .hero-eyebrow-pill {
	background: rgba(99, 102, 241, 0.15);
	color: #a5b4fc;
	border-color: rgba(99, 102, 241, 0.3);
}

.hero-card-title {
	font-size: 32px;
	font-weight: 900;
	line-height: 1.25;
	color: #0f172a;
	letter-spacing: -0.02em;
}

body.dark .hero-card-title {
	color: #ffffff;
}

.hero-card-desc {
	font-size: 14px;
	color: #64748b;
	line-height: 1.65;
	max-width: 480px;
}

body.dark .hero-card-desc {
	color: #94a3b8;
}

/* Embedded Fast Order Dropdowns inside Hero */
.modern-hero-fast-order {
	position: relative;
	z-index: 10;
}

.modern-hero-fast-order .fastselect {
	position: relative;
	width: 100%;
}

.modern-hero-fast-order .fastselect .cont {
	background: #f8fafc;
	border: 1.5px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	padding: 11px 16px;
	cursor: pointer;
	transition: all 0.25s ease;
}

body.dark .modern-hero-fast-order .fastselect .cont {
	background: #1a1e2e;
	border-color: rgba(255, 255, 255, 0.08);
}

.modern-hero-fast-order .fastselect .cont:hover {
	border-color: #6366f1;
	background: #ffffff;
}

body.dark .modern-hero-fast-order .fastselect .cont:hover {
	background: #20263a;
	border-color: #6366f1;
}

.modern-hero-fast-order .fast-step-badge {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.modern-hero-fast-order .fastHead {
	font-size: 13.5px;
	font-weight: 700;
	color: #0f172a;
}

body.dark .modern-hero-fast-order .fastHead {
	color: #ffffff;
}

.modern-hero-fast-order .fast-arrow-icon {
	font-size: 12px;
	color: #94a3b8;
	transition: transform 0.25s ease;
}

.modern-hero-fast-order .fastselect.active .fast-arrow-icon {
	transform: rotate(180deg);
	color: #6366f1;
}

.modern-hero-fast-order .fastDrop {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	margin-top: 6px;
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
	z-index: 100;
	max-height: 240px;
	overflow-y: auto;
	display: none;
}

body.dark .modern-hero-fast-order .fastDrop {
	background: #1a1e2e;
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.modern-hero-fast-order .fastDrop ul {
	list-style: none;
	padding: 6px;
	margin: 0;
}

.modern-hero-fast-order .fastDrop li {
	padding: 9px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	cursor: pointer;
	transition: all 0.2s ease;
}

body.dark .modern-hero-fast-order .fastDrop li {
	color: #cbd5e1;
}

.modern-hero-fast-order .fastDrop li:hover {
	background: rgba(99, 102, 241, 0.1);
	color: #6366f1;
}

.hero-fast-submit-btn {
	padding: 13px 20px;
	border-radius: 14px;
	font-weight: 800;
	font-size: 14.5px;
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
	color: #ffffff !important;
	border: none;
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
	transition: all 0.25s ease;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hero-fast-submit-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(99, 102, 241, 0.45);
	filter: brightness(1.08);
}

/* 3D Mascot Stage in Hero */
.hero-3d-stage {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.hero-3d-backdrop-arch {
	position: absolute;
	bottom: 0;
	right: 15px;
	width: 250px;
	height: 290px;
	border-radius: 130px 130px 0 0;
	background: linear-gradient(180deg, rgba(124, 58, 237, 0.2) 0%, rgba(99, 102, 241, 0.05) 100%);
	z-index: 1;
}

body.dark .hero-3d-backdrop-arch {
	background: linear-gradient(180deg, rgba(124, 58, 237, 0.3) 0%, rgba(99, 102, 241, 0.08) 100%);
}

.hero-3d-avatar-img {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 290px;
	height: auto;
	object-fit: contain;
}

/* Sidebar Promo Cards */
.hero-promo-card {
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.08);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
	transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	position: relative;
}

body.dark .hero-promo-card {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}

.hero-promo-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.promo-card-tag {
	font-size: 12.5px;
	font-weight: 700;
	color: #64748b;
}

body.dark .promo-card-tag {
	color: #94a3b8;
}

.promo-card-title {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.01em;
}

.promo-card-title.text-cyan { color: #0284c7 !important; }
.promo-card-title.text-orange { color: #ea580c !important; }

body.dark .promo-card-title.text-cyan { color: #38bdf8 !important; }
body.dark .promo-card-title.text-orange { color: #fb923c !important; }

.promo-card-art {
	height: 120px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.promo-arch-bg {
	position: absolute;
	bottom: 0;
	width: 130px;
	height: 100px;
	border-radius: 65px 65px 0 0;
	z-index: 1;
}

.arch-cyan { background: linear-gradient(180deg, rgba(56, 189, 248, 0.25), rgba(56, 189, 248, 0.05)); }
.arch-orange { background: linear-gradient(180deg, rgba(251, 146, 60, 0.25), rgba(251, 146, 60, 0.05)); }

.promo-avatar-img {
	position: relative;
	z-index: 2;
	width: 130px;
	height: 130px;
	object-fit: contain;
	margin-bottom: -5px;
}

/* --------------------------------------------------------------------------
   2. SSS (FAQ) 3D HUB SECTION (REFERENCE 4)
   -------------------------------------------------------------------------- */
.modern-faq-hub-section {
	margin-bottom: 40px;
}

.faq-showcase-stage {
	width: 100%;
	height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.faq-stage-aura {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 270px;
	height: 270px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(124, 58, 237, 0.2), transparent 70%);
	filter: blur(30px);
	z-index: 1;
}

.faq-stage-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 260px;
	height: 260px;
	border-radius: 50%;
	border: 2px dashed rgba(99, 102, 241, 0.25);
	z-index: 1;
}

.faq-avatar-img {
	position: relative;
	z-index: 2;
	max-width: 310px;
	height: auto;
	object-fit: contain;
}

.faq-float-pill.ffp-shield {
	position: absolute;
	top: 25%;
	left: 15px;
	z-index: 3;
	background: #ffffff;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
	font-size: 18px;
	animation: floatPulse 3s infinite ease-in-out;
}

body.dark .faq-float-pill.ffp-shield {
	background: #1a1e2e;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.faq-float-card {
	position: absolute;
	z-index: 3;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 14px;
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	text-align: left;
}

body.dark .faq-float-card {
	background: rgba(20, 23, 36, 0.95);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.faq-float-card.ffc-success {
	bottom: 25%;
	right: 10px;
	animation: floatPulse 3.5s infinite ease-in-out 0.5s;
}

.faq-float-card.ffc-notify {
	bottom: 5%;
	left: 10px;
	animation: floatPulse 4s infinite ease-in-out 1s;
}

.ffc-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 12px;
	flex-shrink: 0;
}

.ffc-icon.bg-purple { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.ffc-icon.bg-indigo { background: linear-gradient(135deg, #4f46e5, #6366f1); }

.ffc-title {
	display: block;
	font-size: 11px;
	font-weight: 800;
	color: #0f172a;
}

body.dark .ffc-title { color: #ffffff; }

.ffc-sub {
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	color: #64748b;
}

body.dark .ffc-sub { color: #94a3b8; }

@keyframes floatPulse {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

/* FAQ Accordions */
.modern-faq-accordion-item {
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.07);
	border-radius: 16px;
	margin-bottom: 12px;
	overflow: hidden;
	transition: all 0.25s ease;
	position: relative;
}

body.dark .modern-faq-accordion-item {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
}

.modern-faq-accordion-item.active {
	border-color: rgba(99, 102, 241, 0.4);
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.08);
}

.faq-accordion-head {
	padding: 16px 20px;
	cursor: pointer;
	user-select: none;
}

.faq-accordion-title {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.4;
}

body.dark .faq-accordion-title {
	color: #ffffff;
}

.faq-chevron-circle {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f1f5f9;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #64748b;
	transition: all 0.25s ease;
	flex-shrink: 0;
}

body.dark .faq-chevron-circle {
	background: #1e2438;
	color: #94a3b8;
}

.modern-faq-accordion-item.active .faq-chevron-circle {
	background: #6366f1;
	color: #ffffff;
	transform: rotate(180deg);
}

.faq-accordion-body {
	padding: 0 20px 18px 20px;
	font-size: 13.5px;
	line-height: 1.7;
	color: #64748b;
}

body.dark .faq-accordion-body {
	color: #94a3b8;
}

.faq-active-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, #6366f1, #d946ef);
	transition: width 0.3s ease;
}

.modern-faq-accordion-item.active .faq-active-bar {
	width: 100%;
}

/* --------------------------------------------------------------------------
   3. ÇOK SATANLAR POWER TILES & 3-COLUMN HUB (REFERENCE 5 & HORIZONTAL TILES)
   -------------------------------------------------------------------------- */
.modern-pack-section,
.modern-package-hub-section {
	margin-bottom: 50px !important;
}

.pack-section-title,
.hub-main-title {
	font-size: 30px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

body.dark .pack-section-title,
body.dark .hub-main-title {
	color: #ffffff;
}

.pack-section-subtitle,
.hub-main-subtitle {
	font-size: 14.5px;
	line-height: 1.7;
	color: #64748b;
	max-width: 680px;
}

body.dark .pack-section-subtitle,
body.dark .hub-main-subtitle {
	color: #94a3b8;
}

.pack-more-btn,
.bloglast-more-btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: 14px;
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.08);
	color: #0f172a !important;
	font-size: 13.5px;
	font-weight: 700;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
	transition: all 0.25s ease;
	text-decoration: none;
}

body.dark .pack-more-btn,
body.dark .bloglast-more-btn {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.1);
	color: #ffffff !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.pack-more-btn:hover,
.bloglast-more-btn:hover {
	border-color: #6366f1;
	color: #6366f1 !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
}

/* Horizontal Elite Power Tile (Çok Satanlar Kartı) */
.elite-power-tile {
	position: relative;
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.07);
	border-radius: 18px;
	padding: 16px 20px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
	transition: all 0.28s cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.dark .elite-power-tile {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.elite-power-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

body.dark .elite-power-tile:hover {
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

.ept-glow {
	position: absolute;
	top: -30px;
	right: -30px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	filter: blur(40px);
	opacity: 0.15;
	pointer-events: none;
}

/* Platform-Specific Power Tile Accents */
.theme-instagram {
	border-left: 4.5px solid #e1306c !important;
}

.theme-instagram .ept-glow {
	background: #e1306c;
}

.theme-instagram .ept-icon-box {
	background: linear-gradient(135deg, rgba(225, 48, 108, 0.12), rgba(253, 29, 29, 0.06));
	color: #e1306c;
	border: 1px solid rgba(225, 48, 108, 0.25);
}

.theme-instagram .ept-badge-pill {
	background: rgba(225, 48, 108, 0.1);
	color: #e1306c;
	border: 1px solid rgba(225, 48, 108, 0.25);
}

.theme-instagram .ept-buy-btn {
	background: linear-gradient(135deg, #e1306c 0%, #fd1d1d 50%, #f77737 100%);
	box-shadow: 0 4px 14px rgba(225, 48, 108, 0.3);
}

.theme-tiktok {
	border-left: 4.5px solid #00f2fe !important;
}

.theme-tiktok .ept-glow {
	background: #00f2fe;
}

.theme-tiktok .ept-icon-box {
	background: linear-gradient(135deg, rgba(0, 242, 254, 0.12), rgba(254, 9, 121, 0.06));
	color: #00f2fe;
	border: 1px solid rgba(0, 242, 254, 0.25);
}

.theme-tiktok .ept-badge-pill {
	background: rgba(254, 9, 121, 0.1);
	color: #fe0979;
	border: 1px solid rgba(254, 9, 121, 0.25);
}

.theme-tiktok .ept-buy-btn {
	background: linear-gradient(135deg, #00f2fe 0%, #7928ca 50%, #fe0979 100%);
	box-shadow: 0 4px 14px rgba(0, 242, 254, 0.3);
}

.theme-twitter {
	border-left: 4.5px solid #1da1f2 !important;
}

.theme-twitter .ept-glow {
	background: #1da1f2;
}

.theme-twitter .ept-icon-box {
	background: linear-gradient(135deg, rgba(29, 161, 242, 0.12), rgba(56, 189, 248, 0.06));
	color: #1da1f2;
	border: 1px solid rgba(29, 161, 242, 0.25);
}

.theme-twitter .ept-badge-pill {
	background: rgba(29, 161, 242, 0.1);
	color: #1da1f2;
	border: 1px solid rgba(29, 161, 242, 0.25);
}

.theme-twitter .ept-buy-btn {
	background: linear-gradient(135deg, #1da1f2 0%, #0284c7 100%);
	box-shadow: 0 4px 14px rgba(29, 161, 242, 0.3);
}

.theme-youtube {
	border-left: 4.5px solid #ff0000 !important;
}

.theme-youtube .ept-glow {
	background: #ff0000;
}

.theme-youtube .ept-icon-box {
	background: linear-gradient(135deg, rgba(255, 0, 0, 0.12), rgba(244, 63, 94, 0.06));
	color: #ff0000;
	border: 1px solid rgba(255, 0, 0, 0.25);
}

.theme-youtube .ept-badge-pill {
	background: rgba(255, 0, 0, 0.1);
	color: #ff0000;
	border: 1px solid rgba(255, 0, 0, 0.25);
}

.theme-youtube .ept-buy-btn {
	background: linear-gradient(135deg, #ff0000 0%, #dc2626 100%);
	box-shadow: 0 4px 14px rgba(255, 0, 0, 0.3);
}

.theme-default,
.theme-facebook,
.theme-spotify {
	border-left: 4.5px solid #6366f1 !important;
}

.theme-default .ept-glow {
	background: #6366f1;
}

.theme-default .ept-icon-box {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.06));
	color: #6366f1;
	border: 1px solid rgba(99, 102, 241, 0.25);
}

.theme-default .ept-badge-pill {
	background: rgba(99, 102, 241, 0.1);
	color: #6366f1;
	border: 1px solid rgba(99, 102, 241, 0.25);
}

.theme-default .ept-buy-btn {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}

/* Power Tile Details */
.ept-icon-box {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.ept-platform-name {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #64748b;
}

body.dark .ept-platform-name {
	color: #94a3b8;
}

.ept-badge-pill {
	font-size: 10px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ept-pill-green {
	background: rgba(16, 185, 129, 0.1) !important;
	color: #10b981 !important;
	border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.ept-package-title {
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
}

body.dark .ept-package-title {
	color: #ffffff;
}

.ept-old-price {
	font-size: 11.5px;
	color: #94a3b8;
	text-decoration: line-through;
	font-weight: 600;
	display: block;
}

.ept-price-val {
	font-size: 18px;
	font-weight: 900;
	color: #0f172a;
	line-height: 1.1;
}

body.dark .ept-price-val {
	color: #ffffff;
}

.ept-buy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border-radius: 12px;
	font-weight: 800;
	font-size: 13px;
	color: #ffffff !important;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: all 0.25s ease;
	white-space: nowrap;
}

.ept-buy-btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.12);
}

@media (max-width: 576px) {
	.ept-inner {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 12px;
	}

	.ept-action-side {
		width: 100%;
		justify-content: space-between;
	}

	.ept-price-wrap {
		text-align: left !important;
	}
}

/* "Daha Fazla Paket Göster" Button */
.btn-show-more-power-packs {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 28px;
	border-radius: 16px;
	background: #ffffff;
	border: 1.5px solid rgba(99, 102, 241, 0.25);
	color: #4f46e5 !important;
	font-size: 14.5px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 4px 18px rgba(99, 102, 241, 0.08);
	transition: all 0.28s cubic-bezier(0.165, 0.84, 0.44, 1);
	outline: none;
}

body.dark .btn-show-more-power-packs {
	background: #151928;
	border-color: rgba(99, 102, 241, 0.35);
	color: #a5b4fc !important;
	box-shadow: 0 4px 22px rgba(0, 0, 0, 0.4);
}

.btn-show-more-power-packs:hover {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	border-color: transparent;
	color: #ffffff !important;
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
}

.btn-show-more-power-packs:hover .btn-extra-count {
	background: rgba(255, 255, 255, 0.22);
	color: #ffffff;
}

.btn-show-more-power-packs:hover .btn-toggle-icon {
	transform: translateY(2px);
}

.btn-extra-count {
	font-size: 12px;
	font-weight: 800;
	background: rgba(99, 102, 241, 0.1);
	color: #6366f1;
	padding: 3px 9px;
	border-radius: 8px;
	transition: all 0.25s ease;
}

body.dark .btn-extra-count {
	background: rgba(99, 102, 241, 0.2);
	color: #c7d2fe;
}

.btn-toggle-icon {
	font-size: 12px;
	transition: transform 0.25s ease;
}

/* Hub Filter Tabs & Compact Tiles (Reference 5) */
.hub-tab-btn {
	padding: 9px 18px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.07);
	color: #0f172a !important;
	transition: all 0.25s ease;
	display: inline-flex;
	align-items: center;
}

body.dark .hub-tab-btn {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	color: #ffffff !important;
}

.hub-tab-btn:hover {
	border-color: #ff2d55;
	color: #ff2d55 !important;
	transform: translateY(-2px);
}

.hub-tab-btn.active {
	background: #ff2d55 !important;
	border-color: #ff2d55 !important;
	color: #ffffff !important;
	box-shadow: 0 6px 18px rgba(255, 45, 85, 0.35);
}

.elite-compact-tile {
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.07);
	border-radius: 16px;
	padding: 14px 18px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
	transition: all 0.25s ease;
}

body.dark .elite-compact-tile {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
}

.elite-compact-tile:hover {
	transform: translateY(-3px);
	border-color: #ff2d55;
	box-shadow: 0 8px 24px rgba(255, 45, 85, 0.12);
}

.ect-icon-box {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(255, 45, 85, 0.1);
	color: #ff2d55;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	flex-shrink: 0;
}

.ect-title {
	font-size: 14px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
}

body.dark .ect-title {
	color: #ffffff;
}

.ect-platform-tag {
	font-size: 10.5px;
	font-weight: 700;
	color: #ff2d55;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: block;
}

.ect-price-text {
	font-size: 15px;
	font-weight: 900;
	color: #0f172a;
}

body.dark .ect-price-text {
	color: #ffffff;
}

.ect-cart-btn {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #ff2d55;
	color: #ffffff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	text-decoration: none;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.ect-cart-btn:hover {
	transform: scale(1.08);
	filter: brightness(1.12);
}

.featured-master-card {
	background: #ffffff;
	border: 2px solid #ff2d55;
	border-radius: 24px;
	padding: 34px 24px;
	box-shadow: 0 12px 35px rgba(255, 45, 85, 0.15);
	position: relative;
	overflow: hidden;
}

body.dark .featured-master-card {
	background: #161926;
	border-color: #ff2d55;
	box-shadow: 0 15px 45px rgba(255, 45, 85, 0.25);
}

.fmc-top-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: #ff2d55;
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	padding: 4px 18px;
	border-radius: 0 0 12px 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 4px 12px rgba(255, 45, 85, 0.3);
}

.fmc-icon-wrap {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	background: rgba(255, 45, 85, 0.1);
	color: #ff2d55;
	font-size: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fmc-title {
	font-size: 20px;
	font-weight: 900;
	color: #0f172a;
	line-height: 1.3;
}

body.dark .fmc-title {
	color: #ffffff;
}

.fmc-platform-tag {
	font-size: 11.5px;
	font-weight: 800;
	color: #ff2d55;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.fmc-feature-row {
	background: #f8fafc;
	border: 1px solid rgba(0, 0, 0, 0.04);
	border-radius: 10px;
	padding: 8px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: #334155;
}

body.dark .fmc-feature-row {
	background: #1e2235;
	border-color: rgba(255, 255, 255, 0.06);
	color: #cbd5e1;
}

.fmc-ficon {
	width: 20px;
	font-size: 13px;
	text-align: center;
}

.fmc-price-tag {
	font-size: 22px;
	font-weight: 900;
	color: #0f172a;
}

body.dark .fmc-price-tag {
	color: #ffffff;
}

.fmc-buy-btn {
	padding: 11px 20px;
	border-radius: 12px;
	background: #ff2d55;
	color: #ffffff !important;
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(255, 45, 85, 0.35);
	transition: all 0.2s ease;
}

.fmc-buy-btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.1);
}

.fmc-fav-btn {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	border: 1.5px solid rgba(255, 45, 85, 0.3);
	color: #ff2d55;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.fmc-fav-btn:hover {
	background: rgba(255, 45, 85, 0.1);
}

/* --------------------------------------------------------------------------
   4. BLOG SLIDER & CARDS
   -------------------------------------------------------------------------- */
#bloglast {
	margin-bottom: 50px !important;
}

.bloglast-title {
	font-size: 30px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

body.dark .bloglast-title {
	color: #ffffff;
}

.bloglast-subtitle {
	font-size: 14.5px;
	line-height: 1.7;
	color: #64748b;
	max-width: 680px;
}

body.dark .bloglast-subtitle {
	color: #94a3b8;
}

.modern-home-blog-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
	transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
	margin: 6px 2px;
}

body.dark .modern-home-blog-card {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.modern-home-blog-card:hover {
	transform: translateY(-6px);
	border-color: rgba(99, 102, 241, 0.4);
	box-shadow: 0 15px 35px rgba(99, 102, 241, 0.12);
}

.mhbc-thumb-wrap {
	position: relative;
	width: 100%;
	height: 190px;
	overflow: hidden;
	background: #f1f5f9;
}

body.dark .mhbc-thumb-wrap {
	background: #1e2438;
}

.mhbc-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: none !important;
	transition: transform 0.5s ease;
}

.modern-home-blog-card:hover .mhbc-thumb-img {
	transform: scale(1.04);
}

.mhbc-content {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.mhbc-meta {
	font-size: 12px;
	color: #64748b;
	font-weight: 600;
}

body.dark .mhbc-meta {
	color: #94a3b8;
}

.mhbc-date {
	font-size: 12px;
	color: #64748b;
	font-weight: 600;
}

body.dark .mhbc-date {
	color: #94a3b8;
}

.mhbc-readtime {
	font-size: 11.5px;
	font-weight: 700;
	color: #6366f1;
	background: rgba(99, 102, 241, 0.08);
	padding: 2px 8px;
	border-radius: 6px;
}

body.dark .mhbc-readtime {
	background: rgba(99, 102, 241, 0.15);
	color: #a5b4fc;
}

.mhbc-title {
	font-size: 16.5px;
	font-weight: 800;
	line-height: 1.4;
	margin-bottom: 8px;
}

.mhbc-title a {
	color: #0f172a;
	text-decoration: none;
	transition: color 0.2s ease;
}

body.dark .mhbc-title a {
	color: #ffffff;
}

.mhbc-title a:hover {
	color: #6366f1;
}

.mhbc-desc {
	font-size: 13px;
	line-height: 1.6;
	color: #64748b;
	margin-bottom: 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.dark .mhbc-desc {
	color: #94a3b8;
}

.mhbc-read-btn {
	display: inline-flex;
	align-items: center;
	color: #6366f1 !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s ease;
}

.mhbc-read-btn:hover {
	color: #4f46e5 !important;
	transform: translateX(4px);
}

/* Splide Pagination Fix */
.splide__pagination {
	position: static !important;
	margin-top: 20px !important;
	margin-bottom: 0 !important;
	transform: none !important;
	display: flex !important;
	justify-content: center !important;
	gap: 6px !important;
}

.splide__pagination__page {
	background: rgba(99, 102, 241, 0.2) !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 4px !important;
	transition: all 0.3s ease !important;
	margin: 0 !important;
	border: none !important;
}

.splide__pagination__page.is-active {
	background: #6366f1 !important;
	width: 22px !important;
	border-radius: 6px !important;
	box-shadow: 0 0 10px rgba(99, 102, 241, 0.4) !important;
}

@media (min-width: 992px) {
	.blog-splide .splide__pagination,
	.whyus-splide .splide__pagination {
		display: none !important;
	}
}

/* Fast Order Dock Responsive Stack */
@media (max-width: 768px) {
	.fastOrder.modern-fast-dock .fastitems {
		flex-direction: column !important;
		gap: 10px !important;
	}
	.fastselect {
		width: 100% !important;
		min-width: 100% !important;
	}
	.fastButton {
		width: 100% !important;
	}
}


/* --- saved_why_card_style.css --- */
/* ==========================================================================
   MODERN HOMEPAGE SECTIONS: FAQ, WHY US, ABOUT US, PRICING & BLOG CARDS
   ========================================================================== */

/* Universal Eyebrow Badge */
.faq-eyebrow-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 6px 16px;
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
	color: #6366f1;
	border: 1.5px solid rgba(99, 102, 241, 0.25);
	box-shadow: 0 2px 10px rgba(99, 102, 241, 0.12);
}

body.dark .faq-eyebrow-badge {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.2));
	color: #a5b4fc;
	border-color: rgba(99, 102, 241, 0.4);
	box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

/* 1. Sıkça Sorulan Sorular (FAQ) Styles */
#faq {
	margin-bottom: 50px !important;
}

.faq-section-title {
	font-size: 30px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

body.dark .faq-section-title {
	color: #ffffff;
}

.faq-section-subtitle {
	font-size: 14.5px;
	line-height: 1.7;
	color: #64748b;
	max-width: 680px;
}

body.dark .faq-section-subtitle {
	color: #94a3b8;
}

.modern-faq-item {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	margin-bottom: 12px;
	overflow: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

body.dark .modern-faq-item {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.modern-faq-item:hover {
	border-color: rgba(99, 102, 241, 0.4);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

body.dark .modern-faq-item:hover {
	border-color: rgba(99, 102, 241, 0.5);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(99, 102, 241, 0.15);
}

.modern-faq-item .fs-head {
	padding: 16px 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	user-select: none;
}

.faq-q-text {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.4;
	transition: color 0.2s ease;
}

body.dark .faq-q-text {
	color: #f1f5f9;
}

.modern-faq-item.active .faq-q-text,
.modern-faq-item:hover .faq-q-text {
	color: #6366f1;
}

.faq-toggle-btn {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(99, 102, 241, 0.08);
	color: #6366f1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	transition: all 0.3s ease;
	flex-shrink: 0;
	margin-left: 12px;
}

body.dark .faq-toggle-btn {
	background: rgba(255, 255, 255, 0.08);
	color: #cbd5e1;
}

.modern-faq-item.active .faq-toggle-btn {
	background: #6366f1;
	color: #ffffff;
	transform: rotate(180deg);
}

.modern-faq-item .fs-content {
	padding: 0 20px 18px 20px;
	font-size: 13.5px;
	line-height: 1.7;
	color: #475569;
}

body.dark .modern-faq-item .fs-content {
	color: #94a3b8;
}

/* 2. Neden Bizi Tercih Etmelisiniz (Why Us) Styles */
#whyus {
	margin-bottom: 50px !important;
}

.whyus-title {
	font-size: 30px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

body.dark .whyus-title {
	color: #ffffff;
}

.whyus-subtitle {
	font-size: 14.5px;
	line-height: 1.7;
	color: #64748b;
	max-width: 680px;
}

body.dark .whyus-subtitle {
	color: #94a3b8;
}

.modern-why-card {
	position: relative;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 20px;
	padding: 28px 24px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
	transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
	min-height: 270px;
}

body.dark .modern-why-card {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.modern-why-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Card 1: Rose / Fuchsia */
.card-rose {
	border-top: 3px solid #f43f5e;
}
.card-rose:hover {
	border-color: rgba(244, 63, 94, 0.5);
	box-shadow: 0 15px 35px rgba(244, 63, 94, 0.15);
}
.card-rose .mwc-glow { background: #f43f5e; }
.card-rose .mwc-icon-box {
	background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), rgba(236, 72, 153, 0.1));
	color: #f43f5e;
	border: 1px solid rgba(244, 63, 94, 0.25);
}
.card-rose .mwc-bullets li i { color: #f43f5e; }

/* Card 2: Cyan / Azure */
.card-cyan {
	border-top: 3px solid #06b6d4;
}
.card-cyan:hover {
	border-color: rgba(6, 182, 212, 0.5);
	box-shadow: 0 15px 35px rgba(6, 182, 212, 0.15);
}
.card-cyan .mwc-glow { background: #06b6d4; }
.card-cyan .mwc-icon-box {
	background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.1));
	color: #06b6d4;
	border: 1px solid rgba(6, 182, 212, 0.25);
}
.card-cyan .mwc-bullets li i { color: #06b6d4; }

/* Card 3: Emerald / Mint */
.card-emerald {
	border-top: 3px solid #10b981;
}
.card-emerald:hover {
	border-color: rgba(16, 185, 129, 0.5);
	box-shadow: 0 15px 35px rgba(16, 185, 129, 0.15);
}
.card-emerald .mwc-glow { background: #10b981; }
.card-emerald .mwc-icon-box {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1));
	color: #10b981;
	border: 1px solid rgba(16, 185, 129, 0.25);
}
.card-emerald .mwc-bullets li i { color: #10b981; }

.mwc-glow {
	position: absolute;
	top: 0;
	right: 0;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	filter: blur(45px);
	opacity: 0.18;
	pointer-events: none;
}

.mwc-icon-box {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 18px;
}

.mwc-title {
	font-size: 18.5px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 10px;
}

body.dark .mwc-title {
	color: #ffffff;
}

.mwc-desc {
	font-size: 13.5px;
	line-height: 1.65;
	color: #64748b;
	margin-bottom: 16px;
}

body.dark .mwc-desc {
	color: #94a3b8;
}

.mwc-bullets {
	list-style: none;
	padding: 0;
	margin: auto 0 0 0;
}

.mwc-bullets li {
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

body.dark .mwc-bullets li {
	color: #cbd5e1;
}

/* 3. Kendimizden Bahsedelim (About Us) Styles */
#aboutus {
	margin-bottom: 50px !important;
}

.modern-about-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 24px;
	padding: 32px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
}

body.dark .modern-about-card {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.mac-photo-stage {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.mac-photo-frame {
	position: relative;
	z-index: 2;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
	background: #0f172a;
	width: 100%;
}

.mac-photo-img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mac-photo-stage:hover .mac-photo-img {
	transform: scale(1.02);
}

.mac-ambient-aura {
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, rgba(236, 72, 153, 0.1) 50%, transparent 70%);
	filter: blur(45px);
	pointer-events: none;
	z-index: 1;
}

/* Stats Row: Fully Responsive with wrapping */
.mac-stats-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
	position: relative;
	z-index: 3;
	width: 100%;
}

.mac-stat-item {
	flex: 1 1 calc(33.333% - 10px);
	min-width: 120px;
	box-sizing: border-box;
	background: rgba(248, 250, 252, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

body.dark .mac-stat-item {
	background: #1a1d2e;
	border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 767px) {
	.mac-stat-item {
		flex: 1 1 calc(50% - 10px);
		min-width: 140px;
	}
}

@media (max-width: 480px) {
	.mac-stat-item {
		flex: 1 1 100%;
		min-width: 100%;
	}
}

.msi-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(99, 102, 241, 0.12);
	color: #6366f1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

.msi-number {
	display: block;
	font-size: 13.5px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.2;
}

body.dark .msi-number {
	color: #ffffff;
}

.msi-label {
	display: block;
	font-size: 11px;
	color: #64748b;
	font-weight: 500;
}

body.dark .msi-label {
	color: #94a3b8;
}

.mac-title {
	font-size: 30px;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -0.02em;
}

body.dark .mac-title {
	color: #ffffff;
}

.mac-lead {
	font-size: 14px;
	line-height: 1.65;
	color: #334155;
}

body.dark .mac-lead {
	color: #cbd5e1;
}

.mac-desc {
	font-size: 13.5px;
	line-height: 1.65;
	color: #64748b;
}

body.dark .mac-desc {
	color: #94a3b8;
}

.mac-values-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mac-value-item {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(0, 0, 0, 0.02);
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 12px;
	padding: 9px 12px;
	font-size: 13.5px;
}

/* --- saved_review_card_style.css --- */
.mbc-read-btn:hover {
	color: #4f46e5;
}

.mbc-read-btn:hover i {
	transform: translateX(4px);
}

/* ==========================================================================
   MODERN CUSTOMER REVIEWS (TESTIMONIALS) STYLES
   ========================================================================== */

#testimonial {
	position: relative;
	background: transparent;
	overflow: hidden;
}

.testimonial-title {
	font-size: 32px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

body.dark .testimonial-title {
	color: #ffffff;
}

.testimonial-subtitle {
	font-size: 15px;
	line-height: 1.7;
	color: #64748b;
	max-width: 650px;
}

body.dark .testimonial-subtitle {
	color: #94a3b8;
}

/* Trust Metrics Bar */
.testimonial-trust-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px 30px;
	background: rgba(99, 102, 241, 0.05);
	border: 1px solid rgba(99, 102, 241, 0.15);
	border-radius: 50px;
	padding: 12px 28px;
	max-width: 820px;
	margin: 20px auto 0;
}

body.dark .testimonial-trust-bar {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.08);
}

.ttb-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: #334155;
}

body.dark .ttb-item {
	color: #cbd5e1;
}

.ttb-item i {
	font-size: 16px;
}

.pulse-dot-green {
	display: inline-block;
	width: 8px;
	height: 8px;
	background-color: #10b981;
	border-radius: 50%;
	margin-right: 6px;
	box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
	animation: pulseGreen 1.8s infinite;
}

@keyframes pulseGreen {
	0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
	70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
	100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Modern Review Card */
.modern-review-card {
	position: relative;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 22px;
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
	transition: all 0.35s ease;
	margin: 10px 5px;
}

body.dark .modern-review-card {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modern-review-card:hover {
	transform: translateY(-5px);
	border-color: rgba(99, 102, 241, 0.4);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

body.dark .modern-review-card:hover {
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.15);
}

.mrc-avatar-wrap {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}

.mrc-avatar {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #6366f1;
}

.mrc-online-dot {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 12px;
	height: 12px;
	background: #10b981;
	border: 2px solid #ffffff;
	border-radius: 50%;
}

body.dark .mrc-online-dot {
	border-color: #141724;
}

.mrc-name {
	font-size: 15.5px;
	font-weight: 700;
	color: #0f172a;
}

body.dark .mrc-name {
	color: #ffffff;
}

.mrc-verified-badge {
	color: #3b82f6;
	margin-left: 6px;
	font-size: 13px;
}

.mrc-job {
	font-size: 12px;
	color: #64748b;
	font-weight: 500;
}

body.dark .mrc-job {
	color: #94a3b8;
}

/* Service Review Tag */
.review-tag {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 8px;
}

.review-tag-insta {
	background: rgba(225, 48, 108, 0.12);
	color: #e1306c;
}

.review-tag-tiktok {
	background: rgba(0, 0, 0, 0.08);
	color: #0f172a;
}

body.dark .review-tag-tiktok {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.review-tag-youtube {
	background: rgba(255, 0, 0, 0.1);
	color: #ff0000;
}

.mrc-stars {
	display: flex;
	gap: 2px;
	font-size: 12px;
}

.mrc-body {
	position: relative;
	flex: 1;
}

.mrc-quote-icon {
	position: absolute;
	top: -6px;
	right: 0;
	font-size: 24px;
	color: rgba(99, 102, 241, 0.12);
	pointer-events: none;
}

.mrc-text {
	font-size: 13.5px;
	line-height: 1.65;
	color: #475569;
	margin-bottom: 0;
	position: relative;
	z-index: 1;
}

body.dark .mrc-text {
	color: #cbd5e1;
}

.mrc-footer {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	font-size: 12px;
}

body.dark .mrc-footer {
	border-top-color: rgba(255, 255, 255, 0.08);
}

.mrc-time {
	color: #94a3b8;
}

.mrc-guarantee {
	font-weight: 600;
	color: #10b981;
}

/* --- saved_post1355_1402.css --- */
/* Hero Showcase Stage & Visual Enhancements */
.hero-showcase-stage {
	position: relative;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-orbit-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, rgba(99, 102, 241, 0.25) 40%, rgba(6, 182, 212, 0.15) 70%, transparent 80%);
	filter: blur(45px);
	z-index: 1;
	pointer-events: none;
	animation: heroOrbitPulse 6s ease-in-out infinite alternate;
}

.hero-orbit-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 440px;
	height: 440px;
	border-radius: 50%;
	border: 1.5px dashed rgba(168, 85, 247, 0.35);
	z-index: 1;
	pointer-events: none;
	animation: heroRingRotate 25s linear infinite;
}

@keyframes heroOrbitPulse {
	0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
	100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

@keyframes heroRingRotate {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero-photo-frame {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 480px;
	border-radius: 28px;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, 0.22);
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(124, 58, 237, 0.35);
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	background: #0f172a;
}

.hero-photo-frame:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 50px rgba(124, 58, 237, 0.5);
}

.hero-photo-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.hero-float-badge {
	position: absolute;
	z-index: 4;
	background: rgba(20, 23, 36, 0.88);
	border: 1.5px solid rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding: 10px 16px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45), 0 0 20px rgba(99, 102, 241, 0.25);
	animation: badgeFloat 4s ease-in-out infinite alternate;
	transition: transform 0.25s ease;
}

.hero-float-badge:hover {
	transform: translateY(-4px) scale(1.04);
}

.hfb-top {
	top: 15px;
	right: -15px;
	animation-delay: 0.3s;
}

.hfb-bottom-left {
	bottom: 20px;
	left: -20px;
	animation-delay: 1.2s;
}

.hfb-bottom-right {
	bottom: -10px;
	right: 15px;
	animation-delay: 2.1s;
}

@keyframes badgeFloat {
	0% {
		transform: translateY(0px);
	}

	100% {
		transform: translateY(-6px);
	}
}

.hfb-icon {
	width: 36px;
	height: 36px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.bg-gradient-cyan {
	background: linear-gradient(135deg, #06b6d4, #3b82f6);
	box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

.bg-gradient-magenta {
	background: linear-gradient(135deg, #ec4899, #8b5cf6);
	box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
}

.bg-gradient-amber {
	background: linear-gradient(135deg, #f59e0b, #ef4444);
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.hfb-text {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.hfb-num {
	font-size: 13.5px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1.2;
}

.hfb-sub {
	font-size: 11px;
	color: #cbd5e1;
	font-weight: 600;
}

/* --- saved_post1355_1406.css --- */
/* --------------------------------------------------------------------------
   2. SSS (FAQ) 3D HUB SECTION (EXACT REFERENCE 4 STYLING)
   -------------------------------------------------------------------------- */
.modern-faq-hub-section {
	margin-bottom: 40px;
}

.faq-showcase-stage {
	width: 100%;
	height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.faq-stage-aura {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 330px;
	height: 330px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, rgba(139, 92, 246, 0.08) 50%, transparent 70%);
	filter: blur(35px);
	z-index: 1;
	pointer-events: none;
}

.faq-stage-circle-disc {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 290px;
	height: 290px;
	border-radius: 50%;
	background: #f5f3ff;
	border: 1.5px solid #ede9fe;
	z-index: 1;
}

body.dark .faq-stage-circle-disc {
	background: #181b2a;
	border-color: rgba(168, 85, 247, 0.2);
}

.faq-avatar-wrap {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 290px;
	margin: 0 auto;
}

.faq-avatar-img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

.faq-float-pill.ffp-shield {
	position: absolute;
	top: 40%;
	left: 8px;
	z-index: 3;
	background: #ffffff;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
	font-size: 17px;
	color: #7c3aed;
	border: 1px solid rgba(0, 0, 0, 0.04);
	animation: floatPulse 3s infinite ease-in-out;
}

body.dark .faq-float-pill.ffp-shield {
	background: #1e2235;
	border-color: rgba(255, 255, 255, 0.1);
	color: #c084fc;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.faq-float-card {
	position: absolute;
	z-index: 3;
	background: #ffffff;
	border-radius: 14px;
	padding: 9px 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.04);
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
}

body.dark .faq-float-card {
	background: #1e2235;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.faq-float-card.ffc-success {
	bottom: 30%;
	right: -5px;
	animation: floatPulse 3.5s infinite ease-in-out 0.5s;
}

.faq-float-card.ffc-notify {
	bottom: 5%;
	left: 8px;
	animation: floatPulse 4s infinite ease-in-out 1s;
}

.ffc-icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 11px;
	flex-shrink: 0;
}

.ffc-icon.bg-purple {
	background: #7c3aed;
}

.ffc-brand {
	display: block;
	font-size: 11px;
	font-weight: 800;
	color: #0f172a;
}

body.dark .ffc-brand { color: #ffffff; }

.ffc-text {
	display: block;
	font-size: 10px;
	font-weight: 600;
	color: #64748b;
}

body.dark .ffc-text { color: #94a3b8; }

@keyframes floatPulse {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

/* Minimal Header */
.faq-clean-header {
	text-align: left;
}

.faq-clean-eyebrow {
	font-size: 22px;
	font-weight: 900;
	color: #0f172a;
	display: block;
	letter-spacing: -0.01em;
	margin-bottom: 2px;
}

body.dark .faq-clean-eyebrow {
	color: #ffffff;
}

.faq-clean-title {
	font-size: 28px;
	font-weight: 900;
	color: #7c3aed;
	letter-spacing: -0.02em;
}

body.dark .faq-clean-title {
	color: #a855f7;
}

/* Minimalist Accordion List */
.faq-minimal-list {
	display: flex;
	flex-direction: column;
}

.faq-minimal-item {
	border-bottom: 1.5px solid #f1f5f9;
	padding: 16px 0;
	transition: all 0.25s ease;
	position: relative;
}

body.dark .faq-minimal-item {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.faq-minimal-head {
	cursor: pointer;
	user-select: none;
}

.faq-minimal-q {
	font-size: 15px;
	font-weight: 700;
	color: #1e293b;
	line-height: 1.4;
	transition: color 0.2s ease;
}

body.dark .faq-minimal-q {
	color: #f1f5f9;
}

.faq-minimal-item.active .faq-minimal-q {
	color: #7c3aed;
}

body.dark .faq-minimal-item.active .faq-minimal-q {
	color: #c084fc;
}

.faq-minimal-btn {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: #f1f5f9;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #64748b;
	transition: all 0.25s ease;
	flex-shrink: 0;
}

body.dark .faq-minimal-btn {
	background: #1e2438;
	color: #94a3b8;
}

.faq-minimal-item.active .faq-minimal-btn {
	background: #ede9fe;
	color: #7c3aed;
}

body.dark .faq-minimal-item.active .faq-minimal-btn {
	background: rgba(124, 58, 237, 0.25);
	color: #c084fc;
}

.faq-minimal-body {
	padding-top: 10px;
	padding-bottom: 4px;
}

.faq-minimal-body p {
	font-size: 13.5px;
	line-height: 1.65;
	color: #64748b;
}

body.dark .faq-minimal-body p {
	color: #94a3b8;
}

.faq-minimal-line {
	width: 100%;
	height: 2.5px;
	background: #7c3aed;
	margin-top: 14px;
	border-radius: 2px;
}

/* --- saved_post1355_1419.css --- */
.hero-photo-frame {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 520px;
	border-radius: 32px;
	overflow: visible;
	border: none;
	background: transparent;
	box-shadow: none;
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-photo-frame:hover {
	transform: translateY(-4px) scale(1.02);
}

.hero-photo-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	filter: drop-shadow(0 20px 45px rgba(124, 58, 237, 0.4)) drop-shadow(0 0 25px rgba(236, 72, 153, 0.25));
	mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, #000000 65%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, #000000 65%, transparent 100%);
}

/* --- saved_post1355_1434.css --- */
/* Fast Order Dock Responsive Stack */
@media (max-width: 768px) {
	.fastOrder.modern-fast-dock .fastitems {
		flex-direction: column !important;
		gap: 10px !important;
	}
	.fastselect {
		width: 100% !important;
		min-width: 100% !important;
	}
	.fastButton {
		width: 100% !important;
	}
}

/* --------------------------------------------------------------------------
   3. CATEGORY & PACKAGE SELECTION TILES (PREMIUM STYLING)
   -------------------------------------------------------------------------- */
.category-grid-area {
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.06);
	border-radius: 24px;
	padding: 28px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

body.dark .category-grid-area {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.grid-header {
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1.5px solid #f1f5f9;
}

body.dark .grid-header {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.gh-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.gh-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(99, 102, 241, 0.08);
	color: #6366f1;
	border: 1px solid rgba(99, 102, 241, 0.2);
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 800;
}

body.dark .gh-badge {
	background: rgba(99, 102, 241, 0.15);
	color: #a5b4fc;
	border-color: rgba(99, 102, 241, 0.3);
}

.gh-trust-pills {
	display: flex;
	align-items: center;
	gap: 8px;
}

.gh-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	color: #64748b;
}

body.dark .gh-pill {
	background: #1e2438;
	border-color: rgba(255, 255, 255, 0.08);
	color: #94a3b8;
}

.gh-select-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.gh-select-left h3 {
	font-size: 22px;
	font-weight: 900;
	color: #0f172a;
	margin-bottom: 2px;
	letter-spacing: -0.01em;
}

body.dark .gh-select-left h3 {
	color: #ffffff;
}

.gh-select-left p {
	font-size: 13.5px;
	color: #64748b;
	margin: 0;
}

body.dark .gh-select-left p {
	color: #94a3b8;
}

.gh-count-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #ecfdf5;
	color: #059669;
	border: 1px solid rgba(16, 185, 129, 0.2);
	padding: 6px 14px;
	border-radius: 12px;
	font-size: 12.5px;
	font-weight: 800;
}

body.dark .gh-count-badge {
	background: rgba(16, 185, 129, 0.15);
	color: #34d399;
	border-color: rgba(16, 185, 129, 0.25);
}

/* Package Grid & Tile Styling */
.pkg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}

.pkg-tile {
	background: #f8fafc;
	border: 1.5px solid #e2e8f0;
	border-radius: 20px;
	padding: 16px;
	text-decoration: none !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 150px;
	transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	position: relative;
	overflow: hidden;
}

body.dark .pkg-tile {
	background: #181c2e;
	border-color: rgba(255, 255, 255, 0.08);
}

.pkg-tile:hover {
	transform: translateY(-4px);
	border-color: #6366f1;
	background: #ffffff;
	box-shadow: 0 12px 28px rgba(99, 102, 241, 0.14);
}

body.dark .pkg-tile:hover {
	background: #1e243a;
	border-color: #818cf8;
	box-shadow: 0 12px 28px rgba(99, 102, 241, 0.25);
}

/* Quantity Box with Soft Background */
.pkg-qty-box {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.1) 100%);
	border: 1px solid rgba(99, 102, 241, 0.14);
	border-radius: 14px;
	padding: 10px 14px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
	transition: all 0.25s ease;
}

body.dark .pkg-qty-box {
	background: rgba(99, 102, 241, 0.15);
	border-color: rgba(99, 102, 241, 0.25);
}

.pkg-tile:hover .pkg-qty-box {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.18) 100%);
	border-color: rgba(99, 102, 241, 0.3);
}

.pkg-qty-num {
	font-size: 22px;
	font-weight: 900;
	color: #0f172a;
	line-height: 1;
	letter-spacing: -0.02em;
}

body.dark .pkg-qty-num {
	color: #ffffff;
}

.pkg-qty-unit {
	font-size: 13px;
	font-weight: 800;
	color: #6366f1;
	letter-spacing: -0.01em;
}

body.dark .pkg-qty-unit {
	color: #a5b4fc;
}

/* Micro Features */
.pkg-micro-features {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 0 2px;
}

.pmf-item {
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

body.dark .pmf-item {
	color: #94a3b8;
}

/* Price Badge Pill with Gradient Background */
.pkg-price-badge {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	color: #ffffff !important;
	border-radius: 12px;
	padding: 9px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28);
	transition: all 0.25s ease;
}

.pkg-tile:hover .pkg-price-badge {
	box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
	filter: brightness(1.06);
	transform: scale(1.02);
}

.ppb-amount {
	font-size: 14.5px;
	font-weight: 900;
	letter-spacing: -0.01em;
}

.ppb-action {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9.5px;
}

/* Category Sidebar */
.category-sidebar {
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.06);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

body.dark .category-sidebar {
	background: #141724;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.sidebar-img-wrapper {
	position: relative;
	width: 100%;
	height: 180px;
	overflow: hidden;
	background: #0f172a;
}

.sidebar-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sidebar-content {
	padding: 24px;
	position: relative;
}

.sidebar-icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-top: -50px;
	margin-bottom: 16px;
	box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
	border: 3px solid #ffffff;
}

body.dark .sidebar-icon {
	border-color: #141724;
}

.sidebar-content h1 {
	font-size: 20px;
	font-weight: 900;
	color: #0f172a;
	margin-bottom: 10px;
}

body.dark .sidebar-content h1 {
	color: #ffffff;
}

.sidebar-content p {
	font-size: 13.5px;
	line-height: 1.6;
	color: #64748b;
	margin-bottom: 18px;
}

body.dark .sidebar-content p {
	color: #94a3b8;
}

.sidebar-stats .stat-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 10px 14px;
}

body.dark .sidebar-stats .stat-item {
	background: #181c2e;
	border-color: rgba(255, 255, 255, 0.08);
}

.stat-icon {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: #fef3c7;
	color: #d97706;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.stat-text span {
	display: block;
	font-size: 11.5px;
	color: #64748b;
}

body.dark .stat-text span {
	color: #94a3b8;
}

.stat-text strong {
	display: block;
	font-size: 13px;
	font-weight: 800;
	color: #0f172a;
}

body.dark .stat-text strong {
	color: #ffffff;
}

@media (max-width: 576px) {
	.category-grid-area {
		padding: 16px;
	}
	.pkg-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.pkg-tile {
		padding: 12px;
		min-height: auto;
	}
	.pkg-qty-box {
		padding: 8px 10px;
		margin-bottom: 8px;
	}
	.pkg-qty-num {
		font-size: 18px;
	}
	.pkg-qty-unit {
		font-size: 11px;
	}
	.pkg-price-badge {
		padding: 7px 10px;
		border-radius: 10px;
	}
	.ppb-amount {
		font-size: 12.5px;
	}
}


/* ==========================================================================
   HERO LUXURY HIGH CONTRAST & AMBIENT STYLES
   ========================================================================== */
.mhbc-read-btn:hover i {
	transform: translateX(4px);
}

/* ==========================================================================
   ULTRA-LUXURY MODERN HERO SECTION & FAST ORDER DOCK
   ========================================================================== */

#introHome.modern-hero-section {
	margin-top: 15px;
	margin-bottom: 50px;
	position: relative;
}

.introHome.modern-hero-card {
	position: relative;
	background: radial-gradient(circle at 80% 30%, rgba(99, 102, 241, 0.25) 0%, transparent 60%),
	            radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.18) 0%, transparent 50%),
	            linear-gradient(135deg, #13122c 0%, #0b0f19 50%, #16142e 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 32px !important;
	padding: 55px 45px 75px 45px !important;
	min-height: 480px;
	height: auto !important;
	overflow: visible !important;
	box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 40px rgba(99, 102, 241, 0.12) !important;
}

.introHome.modern-hero-card::before {
	display: none !important;
}

.hero-mesh-grid {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 24px 24px;
	opacity: 0.4;
	pointer-events: none;
	border-radius: 32px;
}

.hero-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(12px);
	color: #e2e8f0;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 16px;
	border-radius: 30px;
	margin-bottom: 20px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.pulse-dot-cyan {
	display: inline-block;
	width: 8px;
	height: 8px;
	background-color: #06b6d4;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);
	animation: pulseCyan 1.8s infinite;
}

@keyframes pulseCyan {
	0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7); }
	70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(6, 182, 212, 0); }
	100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
}

.hero-main-title {
	font-size: 42px !important;
	font-weight: 900 !important;
	color: #ffffff !important;
	line-height: 1.25 !important;
	letter-spacing: -0.03em !important;
	margin-bottom: 18px !important;
}

.hero-text-glow {
	background: linear-gradient(135deg, #a855f7 0%, #ec4899 40%, #fbbf24 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	filter: drop-shadow(0 4px 15px rgba(236, 72, 153, 0.35));
}

.hero-main-desc {
	font-size: 16px !important;
	line-height: 1.7 !important;
	color: #cbd5e1 !important;
	max-width: 560px;
	margin-bottom: 28px !important;
}

.hero-trust-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.ht-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(8px);
	padding: 6px 14px;
	border-radius: 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: #f1f5f9;
	transition: all 0.2s ease;
}

.ht-pill:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-1px);
}

/* 3D Showcase Stage & Floating Badges */
.hero-showcase-stage {
	position: relative;
	width: 100%;
	max-width: 400px;
	height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-orbit-glow {
	position: absolute;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(236, 72, 153, 0.15) 50%, transparent 70%);
	filter: blur(40px);
	pointer-events: none;
}

.hero-orbit-ring {
	position: absolute;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	border: 1px dashed rgba(255, 255, 255, 0.12);
	animation: rotateRing 20s linear infinite;
	pointer-events: none;
}

@keyframes rotateRing {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.hero-3d-img {
	position: relative;
	z-index: 2;
	width: 340px;
	height: auto;
	object-fit: contain;
	animation: heroFloat 4.5s ease-in-out infinite;
	filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
}

@keyframes heroFloat {
	0% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(-12px) rotate(1deg); }
	100% { transform: translateY(0px) rotate(0deg); }
}

.hero-float-badge {
	position: absolute;
	z-index: 3;
	background: rgba(20, 23, 36, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(14px);
	padding: 8px 14px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
	animation: badgeFloat 4s ease-in-out infinite alternate;
}

.hfb-top {
	top: 15px;
	right: -10px;
	animation-delay: 0.5s;
}

.hfb-bottom-left {
	bottom: 25px;
	left: -20px;
	animation-delay: 1.2s;
}

.hfb-bottom-right {
	bottom: 10px;
	right: 0px;
	animation-delay: 2s;
}

@keyframes badgeFloat {
	0% { transform: translateY(0px); }
	100% { transform: translateY(-6px); }
}

.hfb-icon {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

.hfb-text {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.hfb-num {
	font-size: 13px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1.2;
}

.hfb-sub {
	font-size: 10.5px;
	color: #94a3b8;
	font-weight: 600;
}

/* Fast Order Modern Dock */
.fastOrder.modern-fast-dock {
	background: rgba(20, 23, 36, 0.95) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	border-radius: 24px !important;
	padding: 14px 18px !important;
	margin: 0 auto !important;
	transform: translateY(-50%) !important;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(99, 102, 241, 0.18) !important;
	max-width: 980px;
	width: 95%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fastOrder .fastitems {
	display: flex;
	align-items: center;
	flex: 1;
	gap: 8px;
}

.fastOrder .fastselect {
	flex: 1;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 10px 16px !important;
	min-width: unset !important;
	transition: all 0.25s ease;
}

.fastOrder .fastselect:hover,
.fastOrder .fastselect.show {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(99, 102, 241, 0.4);
}

.fastOrder .fastselect .cont {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: space-between;
}

.fast-step-badge {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
	color: #ffffff;
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.fastOrder .fastselect .cont .item {
	flex: 1;
}

.fastOrder .fastselect .fastHead {
	font-size: 14px !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	line-height: 1.2;
}

.fastOrder .fastselect span {
	font-size: 11.5px !important;
	color: #94a3b8 !important;
	font-weight: 500;
}

.fast-arrow-icon {
	font-size: 11px;
	color: #64748b;
	transition: transform 0.2s ease;
}

.fastOrder .fastselect.show .fast-arrow-icon {
	transform: rotate(180deg);
	color: #6366f1;
}

.fastOrder .fastDrop {
	background: #141724 !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 18px !important;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(99, 102, 241, 0.2) !important;
	top: 75px !important;
	padding: 12px !important;
}

.fastOrder .fastDrop::before {
	border-bottom-color: #141724 !important;
}

.fastOrder .fastDrop ul li {
	background: rgba(255, 255, 255, 0.03) !important;
	border-radius: 10px !important;
	color: #e2e8f0 !important;
	font-size: 13.5px !important;
	padding: 9px 14px !important;
	margin-bottom: 5px !important;
	transition: all 0.2s ease !important;
}

.fastOrder .fastDrop ul li:hover {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.15)) !important;
	color: #ffffff !important;
	transform: translateX(4px);
}

.modern-fast-buy-btn {
	background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%) !important;
	color: #ffffff !important;
	font-weight: 800 !important;
	font-size: 14px !important;
	letter-spacing: 0.04em !important;
	padding: 14px 28px !important;
	border-radius: 16px !important;
	border: none !important;
	box-shadow: 0 8px 25px rgba(236, 72, 153, 0.4) !important;
	transition: all 0.3s ease !important;
	margin-left: 12px;
	white-space: nowrap;
}

.modern-fast-buy-btn:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 30px rgba(236, 72, 153, 0.6) !important;
	filter: brightness(1.1);
}

@media (max-width: 991px) {
	.introHome.modern-hero-card {
		padding: 35px 25px 60px 25px !important;
	}
	.hero-main-title {
		font-size: 32px !important;
	}
	.fastOrder.modern-fast-dock {
		flex-direction: column;
		gap: 10px;
		transform: translateY(0) !important;
		margin-top: 20px !important;
		width: 100%;
	}
	.fastOrder .fastitems {
		flex-direction: column;
		width: 100%;
	}
	.fastOrder .fastselect {
		width: 100%;
	}
	.modern-fast-buy-btn {
		width: 100%;
		margin-left: 0;
	}
}

/* ==========================================================================
   CATEGORY & PLATFORM RICH SEO STORY BLOCKS & ACCORDIONS
   ========================================================================== */
body.dark .mp-card {
	background: #25252c;
	border-color: #333;
}

/* ==========================================================================
   CATEGORY SEO STORY BLOCKS, PASTEL PROMO & FAQ ACCORDION (UI/UX REDESIGN)
   ========================================================================== */

/* ── 1. Zig-Zag SEO Features Section ── */
.category-seo-section {
	padding: 60px 0 30px;
}

.seo-feature-row {
	display: flex;
	margin-bottom: 70px;
	gap: 40px;
}

.seo-text-col {
	padding: 10px 20px;
}

.seo-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 700;
	color: #6366f1;
	background: rgba(99, 102, 241, 0.08);
	border: 1px solid rgba(99, 102, 241, 0.15);
	padding: 5px 14px;
	border-radius: 20px;
	margin-bottom: 16px;
}

.seo-badge-pill.badge-green {
	color: #10b981;
	background: rgba(16, 185, 129, 0.08);
	border-color: rgba(16, 185, 129, 0.18);
}

.seo-badge-pill.badge-orange {
	color: #f59e0b;
	background: rgba(245, 158, 11, 0.08);
	border-color: rgba(245, 158, 11, 0.18);
}

body.dark .seo-badge-pill {
	background: rgba(99, 102, 241, 0.18);
	border-color: rgba(99, 102, 241, 0.3);
}

.seo-block-title {
	font-size: 28px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 16px;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

body.dark .seo-block-title {
	color: #ffffff;
}

.seo-block-desc {
	font-size: 15px;
	line-height: 1.7;
	color: #475569;
	margin-bottom: 14px;
}

body.dark .seo-block-desc {
	color: #94a3b8;
}

.seo-feature-checks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.sfc-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	font-weight: 600;
	color: #1e293b;
}

.sfc-item i {
	color: #10b981;
	font-size: 17px;
}

body.dark .sfc-item {
	color: #e2e8f0;
}

/* Visual Collages */
.seo-visual-col {
	display: flex;
	align-items: center;
	justify-content: center;
}

.seo-visual-box {
	position: relative;
	width: 100%;
	max-width: 440px;
	height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sv-circle-bg {
	position: absolute;
	width: 270px;
	height: 270px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(236, 72, 153, 0.15) 100%);
	filter: blur(10px);
	z-index: 1;
}

.sv-circle-bg.circle-cyan {
	background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
}

.sv-circle-bg.circle-orange {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(239, 68, 68, 0.15) 100%);
}

.sv-center-icon {
	position: relative;
	z-index: 2;
	width: 120px;
	height: 120px;
	border-radius: 32px;
	background: #ffffff;
	border: 1px solid rgba(226, 232, 240, 0.8);
	box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
	color: #6366f1;
	transition: transform 0.4s ease;
}

body.dark .sv-center-icon {
	background: #1e2438;
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
	color: #a5b4fc;
}

.sv-center-icon.icon-shield {
	color: #10b981;
	box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.25);
}

.sv-center-icon.icon-rocket {
	color: #f59e0b;
	box-shadow: 0 20px 40px -10px rgba(245, 158, 11, 0.25);
}

.floating-metric-card {
	position: absolute;
	z-index: 3;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(226, 232, 240, 0.9);
	padding: 12px 18px;
	border-radius: 16px;
	box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	gap: 12px;
	animation: floatPulse 4s ease-in-out infinite;
}

body.dark .floating-metric-card {
	background: rgba(30, 36, 56, 0.92);
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.4);
}

.fmc-top {
	top: 20px;
	left: 10px;
}

.fmc-bottom {
	bottom: 20px;
	right: 10px;
	animation-delay: 2s;
}

@keyframes floatPulse {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.fmc-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 16px;
}

.bg-gradient-purple { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.bg-gradient-pink { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.bg-gradient-green { background: linear-gradient(135deg, #10b981, #059669); }
.bg-gradient-blue { background: linear-gradient(135deg, #0284c7, #0369a1); }
.bg-gradient-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }

.fmc-info {
	display: flex;
	flex-direction: column;
}

.fmc-info span {
	font-size: 11.5px;
	color: #64748b;
	font-weight: 500;
}

body.dark .fmc-info span {
	color: #94a3b8;
}

.fmc-info strong {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
}

body.dark .fmc-info strong {
	color: #ffffff;
}

/* ── 2. Soft Pastel Promo Banner ── */
.category-promo-section {
	padding: 20px 0 60px;
}

.promo-pastel-card {
	background: linear-gradient(135deg, #fff1f2 0%, #fdf2f8 50%, #faf5ff 100%);
	border: 1px solid #fce7f3;
	border-radius: 28px;
	padding: 44px 40px;
	box-shadow: 0 15px 45px -10px rgba(244, 63, 94, 0.08);
}

body.dark .promo-pastel-card {
	background: linear-gradient(135deg, #2a1b28 0%, #1f1a2e 100%);
	border-color: rgba(244, 63, 94, 0.2);
	box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.4);
}

.promo-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: #e11d48;
	background: rgba(225, 29, 72, 0.1);
	padding: 5px 14px;
	border-radius: 20px;
	margin-bottom: 14px;
}

body.dark .promo-badge {
	color: #fb7185;
	background: rgba(225, 29, 72, 0.2);
}

.promo-title {
	font-size: 26px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 12px;
	letter-spacing: -0.02em;
}

body.dark .promo-title {
	color: #ffffff;
}

.promo-desc {
	font-size: 15px;
	line-height: 1.7;
	color: #475569;
	margin-bottom: 20px;
}

body.dark .promo-desc {
	color: #cbd5e1;
}

.promo-bullets {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.promo-bullets span {
	font-size: 13.5px;
	font-weight: 600;
	color: #334155;
	background: rgba(255, 255, 255, 0.85);
	padding: 6px 14px;
	border-radius: 12px;
	border: 1px solid rgba(226, 232, 240, 0.8);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

body.dark .promo-bullets span {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
	color: #f1f5f9;
}

.promo-success-card {
	background: #ffffff;
	border-radius: 22px;
	padding: 24px;
	box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.06);
	border: 1px solid #f1f5f9;
}

body.dark .promo-success-card {
	background: #1e2438;
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.3);
}

.psc-user-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.psc-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ec4899, #8b5cf6);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 18px;
}

.psc-user-info strong {
	display: block;
	font-size: 15px;
	color: #0f172a;
}

body.dark .psc-user-info strong {
	color: #ffffff;
}

.psc-user-info span {
	font-size: 12.5px;
	color: #64748b;
}

body.dark .psc-user-info span {
	color: #94a3b8;
}

.psc-stat-bars {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.psc-stat-label {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	margin-bottom: 5px;
}

.psc-stat-label span {
	color: #475569;
	font-weight: 500;
}

body.dark .psc-stat-label span {
	color: #cbd5e1;
}

.psc-stat-label strong {
	color: #059669;
	font-weight: 700;
}

body.dark .psc-stat-label strong {
	color: #34d399;
}

.psc-progress {
	height: 8px;
	background: #f1f5f9;
	border-radius: 10px;
	overflow: hidden;
}

body.dark .psc-progress {
	background: rgba(255, 255, 255, 0.08);
}

.psc-bar {
	height: 100%;
	border-radius: 10px;
	background: linear-gradient(90deg, #10b981, #059669);
}

.psc-bar.bg-purple {
	background: linear-gradient(90deg, #8b5cf6, #ec4899);
}

/* ── 3. FAQ Section & Accordion ── */
.category-faq-section {
	padding: 50px 0 70px;
}

.faq-mascot-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 380px;
}

.faq-mascot-circle {
	width: 290px;
	height: 290px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.05) 70%, transparent 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.faq-mascot-center {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 64px;
	box-shadow: 0 20px 40px rgba(99, 102, 241, 0.35);
}

.faq-floating-pill {
	position: absolute;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(226, 232, 240, 0.85);
	border-radius: 16px;
	padding: 12px 18px;
	box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 4;
}

body.dark .faq-floating-pill {
	background: rgba(30, 36, 56, 0.92);
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.4);
}

.ffp-1 {
	top: 30px;
	right: 15px;
	animation: floatPulse 4.5s ease-in-out infinite;
}

.ffp-2 {
	bottom: 30px;
	left: 15px;
	animation: floatPulse 4.5s ease-in-out infinite;
	animation-delay: 2.2s;
}

.ffp-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #6366f1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 15px;
}

.ffp-icon.bg-success {
	background: #10b981;
}

.ffp-text strong {
	display: block;
	font-size: 13.5px;
	color: #0f172a;
}

body.dark .ffp-text strong {
	color: #ffffff;
}

.ffp-text span {
	font-size: 11.5px;
	color: #64748b;
}

body.dark .ffp-text span {
	color: #94a3b8;
}

.faq-heading-group {
	margin-bottom: 25px;
}

.faq-mini-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: #6366f1;
	background: rgba(99, 102, 241, 0.08);
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

body.dark .faq-mini-tag {
	color: #a5b4fc;
	background: rgba(99, 102, 241, 0.18);
}

.faq-main-title {
	font-size: 30px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 8px;
	letter-spacing: -0.02em;
}

body.dark .faq-main-title {
	color: #ffffff;
}

.faq-subtitle {
	font-size: 15px;
	color: #64748b;
	margin: 0;
}

body.dark .faq-subtitle {
	color: #94a3b8;
}

.faq-accordion-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq-item {
	background: #ffffff;
	border: 1px solid #eef2f6;
	border-radius: 16px;
	overflow: hidden;
	transition: all 0.25s ease;
}

body.dark .faq-item {
	background: #1a1f2e;
	border-color: rgba(255, 255, 255, 0.08);
}

.faq-item.active {
	border-color: #6366f1;
	box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.12);
}

body.dark .faq-item.active {
	border-color: #818cf8;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35);
}

.faq-question {
	padding: 18px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	user-select: none;
}

.faq-question h4 {
	font-size: 15.5px;
	font-weight: 700;
	color: #1e293b;
	margin: 0;
	line-height: 1.4;
	padding-right: 15px;
}

body.dark .faq-question h4 {
	color: #f1f5f9;
}

.faq-toggle-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #64748b;
	transition: all 0.25s ease;
	flex-shrink: 0;
}

body.dark .faq-toggle-icon {
	background: rgba(255, 255, 255, 0.06);
	color: #94a3b8;
}

.faq-item.active .faq-toggle-icon {
	background: #6366f1;
	color: #ffffff;
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;
	padding: 0 22px;
}

.faq-answer.show {
	max-height: 400px;
	padding: 0 22px 18px;
}

.faq-answer p {
	font-size: 14.5px;
	line-height: 1.7;
	color: #475569;
	margin: 0;
	border-top: 1px solid #f1f5f9;
	padding-top: 14px;
}

body.dark .faq-answer p {
	color: #cbd5e1;
	border-top-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 991px) {
	.seo-feature-row {
		flex-direction: column !important;
		margin-bottom: 50px;
	}
	.seo-visual-box {
		height: 280px;
	}
	.promo-pastel-card {
		padding: 30px 22px;
	}
	.promo-visual-side {
		margin-top: 25px;
	}
	.faq-mascot-wrapper {
		height: 300px;
	}
}

/* ==========================================================================
   MODERN CHECKOUT, ORDER & PAYMENT STYLES
   ========================================================================== */
.seo-intext-link:hover {
	color: #4338ca !important;
}

/* ==========================================================================
   MODERN ORDER HEADER (used on order confirmation pages)
   ========================================================================== */

.modern-order-header {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 20px;
	padding: 22px 24px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

body.dark .modern-order-header {
	background: #15142b;
	border-color: rgba(255, 255, 255, 0.08);
}

.modern-order-header .icobox {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
	color: #6366f1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	flex-shrink: 0;
}

.moh-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: #10b981;
	background: rgba(16, 185, 129, 0.1);
	padding: 3px 10px;
	border-radius: 12px;
}

.moh-title {
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -0.01em;
}

body.dark .moh-title {
	color: #ffffff;
}

.moh-desc {
	font-size: 13.5px;
	color: #64748b;
}

.ctb-item {
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.ctb-item i {
	font-size: 16px;
}
/* ==========================================================================
   PREMIUM CHECKOUT / ORDER PAGE — 2026 REDESIGN
   Glassmorphism · Gradient Accents · Micro-Animations · Full Dark Mode
   ========================================================================== */

/* ── Page-level wrapper ─────────────────────────────────────────────────── */
.modern-checkout-box {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(20px) saturate(1.8);
	-webkit-backdrop-filter: blur(20px) saturate(1.8);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 24px;
	box-shadow:
		0 8px 32px rgba(99, 102, 241, 0.06),
		0 1px 3px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.4s ease;
}
.modern-checkout-box:hover {
	box-shadow:
		0 12px 40px rgba(99, 102, 241, 0.1),
		0 2px 6px rgba(0, 0, 0, 0.04);
}
body.dark .modern-checkout-box {
	background: rgba(21, 20, 43, 0.85);
	border-color: rgba(99, 102, 241, 0.12);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ── Header Banner (Selected Package) ───────────────────────────────────── */
.mcb-header {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(168, 85, 247, 0.04) 100%);
	border-bottom: 1px solid rgba(99, 102, 241, 0.08) !important;
}
body.dark .mcb-header {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.06) 100%);
	border-bottom-color: rgba(99, 102, 241, 0.15) !important;
}

.cob-icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
	box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
	animation: iconPulse 3s ease-in-out infinite;
}
@keyframes iconPulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35); }
	50% { box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5); }
}

.cob-overline {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #6366f1;
	opacity: 0.8;
	margin-bottom: 2px;
}
body.dark .cob-overline {
	color: #a5b4fc;
}

.cob-title {
	font-size: 19px;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -0.02em;
	line-height: 1.3;
}
body.dark .cob-title {
	color: #ffffff;
}

.cob-price-pill {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%);
	border: 1px solid rgba(99, 102, 241, 0.15);
	border-radius: 14px;
	padding: 8px 18px;
	white-space: nowrap;
}
body.dark .cob-price-pill {
	background: rgba(99, 102, 241, 0.15);
	border-color: rgba(99, 102, 241, 0.25);
}

.cpp-label {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
}
body.dark .cpp-label {
	color: #94a3b8;
}

.cpp-val {
	font-size: 17px;
	font-weight: 900;
	color: #6366f1;
	letter-spacing: -0.01em;
}

/* ── Step Numbers ───────────────────────────────────────────────────────── */
.checkout-step {
	position: relative;
}

.cs-num {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
	color: #ffffff;
	font-weight: 800;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 14px;
	flex-shrink: 0;
	box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3);
	position: relative;
}
.cs-num::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 13px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1));
	z-index: -1;
}

.cs-title {
	font-size: 17px;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -0.01em;
}
body.dark .cs-title {
	color: #ffffff;
}

.cs-divider {
	border: none;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.15), transparent);
}
body.dark .cs-divider {
	background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.25), transparent);
}

.cs-help-text {
	font-size: 12.5px;
	color: #64748b;
}
body.dark .cs-help-text {
	color: #94a3b8;
}

/* ── Input Controls ─────────────────────────────────────────────────────── */
.cs-input-wrap {
	position: relative;
}

.cs-input-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: #6366f1;
	pointer-events: none;
	z-index: 2;
	transition: color 0.25s ease;
}

.modern-ord-control {
	height: 52px;
	border-radius: 14px;
	border: 1.5px solid rgba(0, 0, 0, 0.08);
	background: rgba(248, 250, 252, 0.8);
	font-size: 14.5px;
	font-weight: 600;
	color: #0f172a;
	padding: 12px 18px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
}
body.dark .modern-ord-control {
	background: rgba(15, 14, 31, 0.8);
	border-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}
.modern-ord-control::placeholder {
	color: #94a3b8 !important;
	font-weight: 500;
}
body.dark .modern-ord-control::placeholder {
	color: #475569 !important;
}
.modern-ord-control:focus {
	border-color: #6366f1;
	background: #ffffff;
	box-shadow:
		0 0 0 4px rgba(99, 102, 241, 0.12),
		0 4px 16px rgba(99, 102, 241, 0.08);
	outline: none;
	transform: translateY(-1px);
}
body.dark .modern-ord-control:focus {
	background: #1a1932;
	box-shadow:
		0 0 0 4px rgba(99, 102, 241, 0.2),
		0 4px 16px rgba(99, 102, 241, 0.12);
}
.cs-input-wrap:focus-within .cs-input-icon {
	color: #4f46e5;
	transform: translateY(-50%) scale(1.1);
}

/* ── Labels & Badges ────────────────────────────────────────────────────── */
.form-label-custom {
	font-size: 13.5px;
	font-weight: 700;
	color: #334155;
	display: block;
	margin-bottom: 6px;
}
body.dark .form-label-custom {
	color: #cbd5e1;
}

.badge-optional {
	font-size: 10.5px;
	font-weight: 600;
	color: #94a3b8;
	background: rgba(148, 163, 184, 0.12);
	padding: 2px 8px;
	border-radius: 6px;
	letter-spacing: 0.3px;
}
body.dark .badge-optional {
	background: rgba(255, 255, 255, 0.06);
	color: #64748b;
}

/* ── Right Column: Order Tabs ───────────────────────────────────────────── */
.modern-order-tabs {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(20px) saturate(1.8);
	-webkit-backdrop-filter: blur(20px) saturate(1.8);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 24px;
	box-shadow:
		0 8px 32px rgba(99, 102, 241, 0.06),
		0 1px 3px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	position: sticky;
	top: 100px;
}
body.dark .modern-order-tabs {
	background: rgba(21, 20, 43, 0.85);
	border-color: rgba(99, 102, 241, 0.12);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.modern-order-tabs .tabOption {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.03) 100%);
	border-bottom: 1px solid rgba(99, 102, 241, 0.08);
	border-radius: 0;
	padding: 8px;
}
body.dark .modern-order-tabs .tabOption {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.04) 100%);
	border-bottom-color: rgba(99, 102, 241, 0.12);
}

.modern-order-tabs .tabOption ul li {
	font-size: 13.5px;
	font-weight: 700;
	border-radius: 12px;
	padding: 10px 16px;
	color: #64748b;
	opacity: 1;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-order-tabs .tabOption ul li.active {
	background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
	opacity: 1;
}
.modern-order-tabs .tabOption ul li:not(.active):hover {
	background: rgba(99, 102, 241, 0.08);
	color: #6366f1;
}

/* ── Coupon Section ─────────────────────────────────────────────────────── */
.modern-clean-amount {
	background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%);
	border-radius: 16px;
	padding: 18px;
	border: 1px solid rgba(0, 0, 0, 0.04);
}
body.dark .modern-clean-amount {
	background: linear-gradient(135deg, rgba(15, 14, 31, 0.9) 0%, rgba(26, 25, 50, 0.9) 100%);
	border-color: rgba(255, 255, 255, 0.06);
}

.modern-clean-amount .coupon {
	display: flex;
	gap: 8px;
}

.modern-coupon-input {
	height: 42px !important;
	border-radius: 12px !important;
	border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
	background: rgba(255, 255, 255, 0.9) !important;
	padding: 8px 14px !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	flex: 1;
	transition: all 0.25s ease !important;
}
.modern-coupon-input:focus {
	border-color: #6366f1 !important;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}
body.dark .modern-coupon-input {
	background: rgba(15, 14, 31, 0.8) !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
	color: #ffffff !important;
}

.modern-clean-amount .coupbtn {
	height: 42px;
	padding: 0 20px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 700;
	background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
	border: none;
	color: #ffffff;
	box-shadow: 0 3px 10px rgba(99, 102, 241, 0.25);
	transition: all 0.25s ease;
	white-space: nowrap;
}
.modern-clean-amount .coupbtn:hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 14px rgba(99, 102, 241, 0.35);
}

/* ── Price Rows ─────────────────────────────────────────────────────────── */
.price-rows {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.price-row {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	width: 100%;
	padding: 6px 0 !important;
}

.price-label {
	font-size: 13.5px;
	color: #64748b;
	font-weight: 600;
	text-align: left;
}
body.dark .price-label {
	color: #94a3b8;
}

.price-value {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	text-align: right;
	margin-left: auto;
}
body.dark .price-value {
	color: #e2e8f0;
}

.total-highlight {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.04) 100%);
	border-radius: 12px !important;
	padding: 12px 14px !important;
	margin-top: 10px !important;
	border-top: none !important;
	border: 1px solid rgba(99, 102, 241, 0.1) !important;
}
body.dark .total-highlight {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
	border-color: rgba(99, 102, 241, 0.2) !important;
}

.total-price-text {
	font-size: 22px !important;
	font-weight: 900 !important;
	background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
}

/* ── Payment Method Tiles ───────────────────────────────────────────────── */
.modern-pm-list {
	margin-top: 0 !important;
}
.modern-pm-list ul {
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.modern-pm-list ul li {
	list-style: none !important;
	display: flex;
	align-items: center;
	padding: 14px 16px !important;
	border-radius: 14px !important;
	border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
	background: rgba(248, 250, 252, 0.7) !important;
	color: #334155 !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative;
	margin-bottom: 0 !important;
}
.modern-pm-list ul li.d-none,
.PaymentMethod ul li.d-none {
	display: none !important;
}
body.dark .modern-pm-list ul li {
	background: rgba(15, 14, 31, 0.7) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
	color: #cbd5e1 !important;
}
.modern-pm-list ul li:hover {
	border-color: rgba(99, 102, 241, 0.4) !important;
	background: rgba(99, 102, 241, 0.03) !important;
	transform: translateY(-1px);
}
body.dark .modern-pm-list ul li:hover {
	border-color: rgba(99, 102, 241, 0.4) !important;
	background: rgba(99, 102, 241, 0.08) !important;
}
.modern-pm-list ul li.selected {
	border-color: #6366f1 !important;
	background: rgba(99, 102, 241, 0.06) !important;
	color: #0f172a !important;
	box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12);
}
body.dark .modern-pm-list ul li.selected {
	background: rgba(99, 102, 241, 0.12) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(99, 102, 241, 0.2);
}
.modern-pm-list ul li i {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(99, 102, 241, 0.08);
	color: #6366f1;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	margin-right: 12px;
	flex-shrink: 0;
	transition: all 0.25s ease;
}
.modern-pm-list ul li.selected i {
	background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
	color: #ffffff;
	box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3);
}
.modern-pm-list ul li::after {
	content: '' !important;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.12);
	position: absolute !important;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: transparent !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 0 !important;
	padding: 0 !important;
	transition: all 0.25s ease;
	opacity: 1 !important;
	width: 22px !important;
	height: 22px !important;
	border-bottom-left-radius: 50% !important;
}
body.dark .modern-pm-list ul li::after {
	border-color: rgba(255, 255, 255, 0.15);
}
.modern-pm-list ul li.selected::after {
	border-color: #6366f1 !important;
	background: #6366f1 !important;
	box-shadow: inset 0 0 0 3px #ffffff, 0 2px 8px rgba(99, 102, 241, 0.3) !important;
	opacity: 1 !important;
}
body.dark .modern-pm-list ul li.selected::after {
	box-shadow: inset 0 0 0 3px #15142b, 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

/* ── Payment Detail Info ────────────────────────────────────────────────── */
.paymentDetail.alert {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(168, 85, 247, 0.02) 100%) !important;
	border: 1px solid rgba(99, 102, 241, 0.1) !important;
	border-radius: 12px !important;
	color: #475569 !important;
	font-size: 13px;
}
body.dark .paymentDetail.alert {
	background: rgba(99, 102, 241, 0.08) !important;
	border-color: rgba(99, 102, 241, 0.15) !important;
	color: #94a3b8 !important;
}

/* ── Checkout Button ────────────────────────────────────────────────────── */
.modern-checkout-btn {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #6366f1 100%);
	background-size: 200% 200%;
	color: #ffffff !important;
	font-weight: 800;
	font-size: 16px;
	padding: 16px 24px;
	border-radius: 16px;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 25px rgba(99, 102, 241, 0.35);
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	letter-spacing: 0.3px;
	position: relative;
	overflow: hidden;
	animation: btnShimmer 3s ease-in-out infinite;
}
@keyframes btnShimmer {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}
.modern-checkout-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
	transition: left 0.6s ease;
}
.modern-checkout-btn:hover::before {
	left: 100%;
}
.modern-checkout-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 35px rgba(99, 102, 241, 0.45);
}
.modern-checkout-btn:active {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
}
.modern-checkout-btn:disabled,
.modern-checkout-btn[disabled] {
	background: #94a3b8 !important;
	box-shadow: none;
	cursor: not-allowed;
	animation: none;
}

/* ── WhatsApp Support Button ────────────────────────────────────────────── */
.checkout-wp-wrap {
	margin-top: 10px;
}
.checkout-wp-btn {
	background: linear-gradient(135deg, rgba(37, 211, 102, 0.08) 0%, rgba(37, 211, 102, 0.04) 100%);
	border: 1.5px solid rgba(37, 211, 102, 0.2);
	border-radius: 14px;
	padding: 12px 16px;
	color: #25d366 !important;
	font-size: 13.5px;
	font-weight: 700;
	transition: all 0.25s ease;
}
.checkout-wp-btn:hover {
	background: linear-gradient(135deg, rgba(37, 211, 102, 0.15) 0%, rgba(37, 211, 102, 0.08) 100%);
	border-color: rgba(37, 211, 102, 0.35);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.15);
	color: #1ea951 !important;
}
.checkout-wp-btn i {
	font-size: 18px;
}
body.dark .checkout-wp-btn {
	background: rgba(37, 211, 102, 0.08);
	border-color: rgba(37, 211, 102, 0.2);
}

/* ── Trust Badges ───────────────────────────────────────────────────────── */
.checkout-trust-mini {
	font-size: 11.5px;
	font-weight: 600;
	color: #94a3b8;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex-wrap: wrap;
}
body.dark .checkout-trust-mini {
	color: #475569;
}

/* ── Checkbox Styling ───────────────────────────────────────────────────── */
.form-check-input {
	cursor: pointer;
	width: 1.2em;
	height: 1.2em;
	margin-top: 0.12em;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-radius: 5px;
	transition: all 0.2s ease;
}
body.dark .form-check-input {
	border-color: rgba(255, 255, 255, 0.15);
	background-color: transparent;
}
.form-check-input:checked {
	background-color: #6366f1;
	border-color: #6366f1;
	box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}
.form-check-input:focus {
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* ── Corporate Invoice Toggle ───────────────────────────────────────────── */
.custom-corp-check label {
	color: #64748b !important;
	transition: color 0.2s ease;
}
.custom-corp-check label:hover {
	color: #6366f1 !important;
}

/* ── Package Details Tab ────────────────────────────────────────────────── */
.opd-title-badge {
	font-size: 16px;
	font-weight: 800;
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.modern-feat-list li {
	padding: 8px 0 !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	font-size: 13.5px !important;
	color: #334155;
	transition: transform 0.2s ease;
}
body.dark .modern-feat-list li {
	border-bottom-color: rgba(255, 255, 255, 0.04);
	color: #cbd5e1;
}
.modern-feat-list li:last-child {
	border-bottom: none;
}
.modern-feat-list li:hover {
	transform: translateX(4px);
}
.modern-feat-list li .fa-check-circle {
	color: #10b981 !important;
}

.favPack {
	transition: all 0.25s ease !important;
	border-radius: 12px !important;
}
.favPack:hover {
	background: rgba(99, 102, 241, 0.06) !important;
	border-color: #6366f1 !important;
	color: #6366f1 !important;
	transform: translateY(-1px);
}

/* ── Mobile Responsive ──────────────────────────────────────────────────── */
@media (max-width: 991px) {
	.modern-order-tabs {
		position: static !important;
	}
	.cob-title {
		font-size: 16px;
	}
	.cob-price-pill {
		display: none !important;
	}
	.modern-checkout-box {
		border-radius: 18px;
	}
	.modern-order-tabs {
		border-radius: 18px;
		margin-top: 16px;
	}
}

@media (max-width: 575px) {
	.mcb-header {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 8px;
	}
	.cob-icon {
		width: 38px;
		height: 38px;
		font-size: 17px;
	}
	.cob-title {
		font-size: 15px;
	}
	.cs-num {
		width: 26px;
		height: 26px;
		font-size: 12px;
	}
	.modern-ord-control {
		height: 48px;
		font-size: 13.5px;
	}
	.modern-checkout-btn {
		font-size: 14.5px;
		padding: 14px 18px;
		border-radius: 14px;
	}
	.total-price-text {
		font-size: 19px !important;
	}
}


/* ==========================================================================
   SLEEK TESTIMONIAL SPLIDE PAGINATION (SINGLE ELEGANT ROW)
   ========================================================================== */
.testimonial .splide__pagination {
	position: relative !important;
	bottom: auto !important;
	margin-top: 30px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
}

.testimonial .splide__pagination li {
	display: inline-flex !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.testimonial .splide__pagination__page {
	width: 10px !important;
	height: 10px !important;
	border-radius: 6px !important;
	background: #cbd5e1 !important;
	border: none !important;
	padding: 0 !important;
	opacity: 0.6 !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
}

body.dark .testimonial .splide__pagination__page {
	background: #334155 !important;
}

.testimonial .splide__pagination__page.is-active {
	width: 28px !important;
	background: #6366f1 !important;
	opacity: 1 !important;
	border-radius: 6px !important;
}




/* ==========================================================================
   CATEGORY RELATED SERVICES (EN ÇOK TERCİH EDİLENLER) MODERN CARDS
   ========================================================================== */
.category-related-services {
	padding: 60px 0 40px;
	position: relative;
}

.crs-header {
	margin-bottom: 35px;
}

.crs-title {
	font-size: 28px;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -0.02em;
	margin-top: 10px;
	margin-bottom: 8px;
}

body.dark .crs-title {
	color: #ffffff;
}

.crs-desc {
	font-size: 15px;
	color: #64748b;
	max-width: 650px;
	margin: 0 auto;
}

body.dark .crs-desc {
	color: #94a3b8;
}

.crs-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.08);
	border-radius: 20px;
	padding: 24px 22px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
	text-decoration: none !important;
	transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

body.dark .crs-card {
	background: #15142b;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.crs-card:hover {
	transform: translateY(-5px);
	border-color: #6366f1;
	box-shadow: 0 14px 35px rgba(99, 102, 241, 0.16);
}

body.dark .crs-card:hover {
	border-color: #818cf8;
	box-shadow: 0 14px 35px rgba(99, 102, 241, 0.25);
}

.crs-icon-box {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(168, 85, 247, 0.12) 100%);
	color: #6366f1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-bottom: 16px;
	transition: transform 0.25s ease;
}

.crs-card:hover .crs-icon-box {
	transform: scale(1.08);
}

.crs-card-title {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 12px;
	line-height: 1.3;
}

body.dark .crs-card-title {
	color: #ffffff;
}

.crs-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
}

.crs-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	background: rgba(0, 0, 0, 0.04);
	padding: 5px 10px;
	border-radius: 8px;
}

body.dark .crs-pill {
	color: #cbd5e1;
	background: rgba(255, 255, 255, 0.06);
}

.crs-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	color: #6366f1;
	font-size: 13.5px;
	font-weight: 700;
	transition: color 0.2s ease;
}

body.dark .crs-action {
	border-top-color: rgba(255, 255, 255, 0.06);
	color: #a5b4fc;
}

.crs-action i {
	transition: transform 0.25s ease;
}

.crs-card:hover .crs-action i {
	transform: translateX(4px);
}

/* ==========================================================================
   ROBUST FAQ ACCORDION OVERRIDES (NO CONFLICT, CRISP TEXT)
   ========================================================================== */
.category-faq-section .faq-answer {
	max-height: none !important;
	padding: 0 22px 20px 22px !important;
}

.category-faq-section .faq-item:not(.active) .faq-answer:not(.show) {
	display: none;
}

.category-faq-section .faq-item.active .faq-answer,
.category-faq-section .faq-answer.show {
	display: block !important;
}

.category-faq-section .faq-answer p {
	font-size: 15px !important;
	line-height: 1.75 !important;
	color: #334155 !important;
	margin: 0 !important;
	border-top: 1px solid #f1f5f9 !important;
	padding-top: 14px !important;
}

body.dark .category-faq-section .faq-answer p {
	color: #cbd5e1 !important;
	border-top-color: rgba(255, 255, 255, 0.08) !important;
}



/* ==========================================================================
   BLOG POST & ARTICLE TYPOGRAPHY STYLES (LIGHT & DARK MODE COMPATIBLE)
   ========================================================================== */

.blogContent {
	padding: 40px 0 60px;
	background: transparent;
}

/* Breadcrumbs */
.breadcrumb-wrapper {
	padding: 12px 20px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

body.dark .breadcrumb-wrapper {
	background: #15142b;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.breadcrumb-wrapper a {
	color: #64748b;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	transition: color 0.2s ease;
}

.breadcrumb-wrapper a:hover {
	color: #6366f1;
}

body.dark .breadcrumb-wrapper a {
	color: #94a3b8;
}

body.dark .breadcrumb-wrapper a:hover {
	color: #a5b4fc;
}

.breadcrumb-wrapper .active {
	font-size: 13.5px;
	color: #6366f1 !important;
}

body.dark .breadcrumb-wrapper .active {
	color: #818cf8 !important;
}

/* Main Article Card */
.modern-article-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 24px;
	padding: 35px 32px;
	box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
}

body.dark .modern-article-card {
	background: #15142b;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Article Header */
.post-title {
	font-size: 30px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	line-height: 1.3 !important;
	letter-spacing: -0.02em !important;
	margin-top: 8px;
	margin-bottom: 20px;
}

body.dark .post-title {
	color: #ffffff !important;
}

.post-meta-pills .badge {
	padding: 7px 14px;
	border-radius: 20px;
	font-size: 12.5px;
	font-weight: 600;
}

body.dark .post-meta-pills .badge.bg-light {
	background: #1e1d38 !important;
	color: #cbd5e1 !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Featured Thumbnail */
.post-thumbnail-wrap {
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

body.dark .post-thumbnail-wrap {
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4);
}

.post-thumbnail-wrap img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

/* Typography Rich Body */
.post-body.typography-rich {
	font-size: 16px;
	line-height: 1.85;
	color: #334155 !important;
}

body.dark .post-body.typography-rich {
	color: #cbd5e1 !important;
}

.post-body.typography-rich p {
	margin-bottom: 20px;
	color: inherit;
}

.post-body.typography-rich h2 {
	font-size: 24px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	margin-top: 36px !important;
	margin-bottom: 16px !important;
	letter-spacing: -0.01em !important;
	display: flex;
	align-items: center;
	gap: 8px;
}

body.dark .post-body.typography-rich h2 {
	color: #ffffff !important;
}

.post-body.typography-rich h3 {
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #1e293b !important;
	margin-top: 28px !important;
	margin-bottom: 14px !important;
}

body.dark .post-body.typography-rich h3 {
	color: #f1f5f9 !important;
}

.post-body.typography-rich strong {
	color: #0f172a !important;
	font-weight: 700;
}

body.dark .post-body.typography-rich strong {
	color: #ffffff !important;
}

.post-body.typography-rich ul,
.post-body.typography-rich ol {
	padding-left: 24px;
	margin-bottom: 22px;
}

.post-body.typography-rich li {
	margin-bottom: 8px;
	color: inherit;
}

/* In-Article Conversion CTA Card */
.blog-seo-cta-card {
	background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 20px !important;
	padding: 32px 28px !important;
	color: #ffffff !important;
	margin: 35px 0 !important;
	box-shadow: 0 15px 35px rgba(99, 102, 241, 0.25) !important;
}

.bs-cta-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(99, 102, 241, 0.2);
	color: #a5b4fc;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 20px;
	margin-bottom: 12px;
	border: 1px solid rgba(99, 102, 241, 0.3);
}

.bs-cta-title {
	font-size: 22px !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	margin-bottom: 10px !important;
}

.bs-cta-desc {
	font-size: 14.5px !important;
	color: rgba(255, 255, 255, 0.8) !important;
	line-height: 1.6 !important;
	margin-bottom: 22px !important;
}

.bs-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.btn-cta-primary {
	background: linear-gradient(135deg, #e11d48, #f43f5e);
	color: #ffffff !important;
	font-weight: 700;
	font-size: 13.5px;
	padding: 10px 20px;
	border-radius: 12px;
	text-decoration: none;
	border: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
}

.btn-cta-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(225, 29, 72, 0.35);
}

.btn-cta-dark {
	background: #000000;
	color: #ffffff !important;
	font-weight: 700;
	font-size: 13.5px;
	padding: 10px 20px;
	border-radius: 12px;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.15);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
}

.btn-cta-dark:hover {
	transform: translateY(-2px);
	background: #111;
}

.btn-cta-light {
	background: #ef4444;
	color: #ffffff !important;
	font-weight: 700;
	font-size: 13.5px;
	padding: 10px 20px;
	border-radius: 12px;
	text-decoration: none;
	border: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
}

.btn-cta-light:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
}

/* Social Share & Author Card */
.post-share-box {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
}

body.dark .post-share-box {
	background: #1e1d38 !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark .post-share-box strong {
	color: #ffffff !important;
}

.author-eeat-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
}

body.dark .author-eeat-card {
	background: #1e1d38 !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark .author-eeat-card h4 {
	color: #ffffff !important;
}

body.dark .author-eeat-card p {
	color: #94a3b8 !important;
}

/* Sidebar Styling in Dark Mode */
body.dark .sidebar .most-popular,
body.dark .sidebar .SideServices,
body.dark .sidebar .SideContact {
	background: #15142b;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	padding: 24px 20px;
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

body.dark .sidebar .title a,
body.dark .sidebar h2,
body.dark .sidebar .sideServiceList .title {
	color: #ffffff !important;
}

body.dark .sidebar .sideServiceList .item {
	background: #1e1d38;
	border-color: rgba(255, 255, 255, 0.06);
}

body.dark .sidebar .sideServiceList .item:hover {
	border-color: #6366f1;
}

/* Comments Section Styling */
.CommentArea {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 24px;
	padding: 30px;
	margin-top: 30px;
	box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
}

body.dark .CommentArea {
	background: #15142b;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

body.dark .CommentArea h2 {
	color: #ffffff !important;
}

body.dark .CommentArea .comment {
	background: #1e1d38;
	border-color: rgba(255, 255, 255, 0.06);
}

body.dark .CommentArea .comment .costumer {
	color: #ffffff !important;
}

body.dark .CommentArea .comment p {
	color: #cbd5e1 !important;
}

body.dark .CommentArea .ns-control {
	background: #1e1d38;
	border-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

body.dark .CommentArea .ns-control:focus {
	border-color: #6366f1;
	background: #1e1d38;
}



/* ==========================================================================
   HOMEPAGE #KEŞFET BU AYIN ENLERİ SHOWCASE (OVAL BACKGROUND & 3-COLUMN PILLS)
   ========================================================================== */

.kesfet-hub-section {
	background: #121320;
	position: relative;
	padding: 70px 0 85px;
	margin-top: 45px;
	border-radius: 50% 50% 0 0 / 40px 40px 0 0;
	box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.25);
}

body.dark .kesfet-hub-section {
	background: #0d0e1a;
	box-shadow: 0 -15px 50px rgba(0, 0, 0, 0.5);
}

/* Center Pin on the Oval Curve Peak */
.kesfet-pin {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ff2b6d;
	border: 3px solid #ffffff;
	box-shadow: 0 0 15px #ff2b6d, 0 0 25px rgba(255, 43, 109, 0.6);
	z-index: 10;
}

/* Header */
.kesfet-header {
	margin-bottom: 45px;
}

.kesfet-hashtag {
	font-size: 26px;
	font-weight: 900;
	color: #ff2b6d;
	font-style: italic;
	margin-bottom: 2px;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 10px rgba(255, 43, 109, 0.4);
}

.kesfet-title {
	font-size: 38px;
	font-weight: 900;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
	line-height: 1.15;
}

@media (max-width: 768px) {
	.kesfet-title {
		font-size: 28px;
	}
	.kesfet-hashtag {
		font-size: 22px;
	}
}

/* Column Header */
.kesfet-col-header {
	margin-bottom: 16px;
}

.kch-sub {
	font-size: 13px;
	font-weight: 600;
	color: #94a3b8;
	display: block;
	margin-bottom: 4px;
}

.kch-title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kch-bar {
	width: 4px;
	height: 22px;
	border-radius: 4px;
	flex-shrink: 0;
}

.kch-bar.bar-instagram {
	background: #ff2b6d;
	box-shadow: 0 0 10px rgba(255, 43, 109, 0.5);
}

.kch-bar.bar-tiktok {
	background: #ff2b6d;
	box-shadow: 0 0 10px rgba(255, 43, 109, 0.5);
}

.kch-bar.bar-twitter {
	background: #ff2b6d;
	box-shadow: 0 0 10px rgba(255, 43, 109, 0.5);
}

.kch-title {
	font-size: 19px;
	font-weight: 800;
	color: #ffffff;
	margin: 0;
	letter-spacing: -0.01em;
}

/* Capsule / Pill Card */
.kesfet-pill-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kesfet-pill-card {
	background: #181928;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 18px;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none !important;
}

.kesfet-pill-card:hover {
	background: #202237;
	border-color: rgba(255, 255, 255, 0.18);
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

.kpc-left {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.kpc-icon-box {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 15px;
	flex-shrink: 0;
}

.kpc-icon-box.bg-instagram {
	background: linear-gradient(135deg, #ff2b6d 0%, #f43f5e 100%);
}

.kpc-icon-box.bg-tiktok {
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

.kpc-icon-box.bg-twitter {
	background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
}

.kpc-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.kpc-brand {
	font-size: 14.5px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1.2;
}

.kpc-desc {
	font-size: 12px;
	font-weight: 500;
	color: #94a3b8;
	line-height: 1.2;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kpc-right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.kpc-price {
	font-size: 14.5px;
	font-weight: 800;
	color: #f1f5f9;
	letter-spacing: -0.01em;
}

.kpc-cart-btn {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(135deg, #ff2b6d 0%, #f43f5e 100%);
	color: #ffffff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	box-shadow: 0 4px 12px rgba(255, 43, 109, 0.35);
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.kesfet-pill-card:hover .kpc-cart-btn {
	transform: scale(1.1);
	box-shadow: 0 6px 18px rgba(255, 43, 109, 0.55);
}




/* ==========================================================================
   MODERN MOBILE PLATFORM ACCORDION DRAWER MENU (REFERENCE SCREENSHOT STYLES)
   ========================================================================== */

.mobile-drawer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(10, 15, 30, 0.65);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	transition: all 0.28s ease;
}

.mobile-drawer-overlay.active,
body.showmenu .mobile-drawer-overlay {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 991px) {
	.NavListArea {
		display: none !important;
	}

	.mobile-modern-drawer {
		position: fixed;
		top: 12px;
		left: 14px;
		right: 14px;
		max-height: calc(100vh - 24px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 9999;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-15px);
		transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.mobile-modern-drawer.active,
	body.showmenu .mobile-modern-drawer {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Card 1: Top Bar (Logo + Notification Bell + Close/Menu Button) */
	.mmd-top-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #ffffff;
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: 20px;
		padding: 10px 16px;
		margin-bottom: 10px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	}

	body.dark .mmd-top-bar {
		background: #15142b;
		border-color: rgba(255, 255, 255, 0.08);
		box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
	}

	.mmd-logo {
		display: flex;
		align-items: center;
	}

	.mmd-logo img {
		height: 38px;
		width: auto;
		max-width: 170px;
		object-fit: contain;
		display: block;
	}

	body.dark .mmd-logo img.light { display: none !important; }
	body:not(.dark) .mmd-logo img.dark { display: none !important; }

	.mmd-top-actions {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.mmd-bell-btn {
		position: relative;
		width: 40px;
		height: 40px;
		border-radius: 12px;
		background: #f1f3f9;
		color: #475569;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		text-decoration: none !important;
		transition: all 0.2s ease;
	}

	body.dark .mmd-bell-btn {
		background: #232240;
		color: #cbd5e1;
	}

	.mmd-bell-badge {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 16px;
		height: 16px;
		background: #6366f1;
		color: #ffffff;
		font-size: 9.5px;
		font-weight: 800;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2px solid #ffffff;
	}

	body.dark .mmd-bell-badge {
		border-color: #15142b;
	}

	.mmd-close-btn {
		width: 40px;
		height: 40px;
		border-radius: 12px;
		background: #f1f3f9;
		color: #475569;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	body.dark .mmd-close-btn {
		background: #232240;
		color: #cbd5e1;
	}

	/* Card 2: Platforms Accordion List */
	.mmd-card-wrap {
		background: #ffffff;
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: 24px;
		padding: 14px;
		box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
	}

	body.dark .mmd-card-wrap {
		background: #15142b;
		border-color: rgba(255, 255, 255, 0.08);
		box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
	}

	.mmd-platforms-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	/* Platform Item */
	.mmd-platform-item {
		background: #f8fafc;
		border: 1px solid rgba(0, 0, 0, 0.05);
		border-radius: 18px;
		overflow: hidden;
		transition: all 0.22s ease;
	}

	body.dark .mmd-platform-item {
		background: #1c1b35;
		border-color: rgba(255, 255, 255, 0.06);
	}

	.mmd-platform-item.open {
		background: #ffffff;
		border-color: rgba(99, 102, 241, 0.35);
		box-shadow: 0 6px 20px rgba(99, 102, 241, 0.08);
	}

	body.dark .mmd-platform-item.open {
		background: #181730;
		border-color: rgba(99, 102, 241, 0.45);
		box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
	}

	.mmd-plat-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 14px;
		cursor: pointer;
		user-select: none;
	}

	.mmd-plat-left {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	/* Squircle Brand Icon Box (Screenshot 1) */
	.mmd-plat-icon-box {
		width: 44px;
		height: 44px;
		border-radius: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 20px;
		flex-shrink: 0;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.theme-instagram .mmd-plat-icon-box {
		background: linear-gradient(135deg, #e1306c 0%, #fd1d1d 50%, #f77737 100%);
	}

	.theme-tiktok .mmd-plat-icon-box {
		background: #111111;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	}

	.theme-twitter .mmd-plat-icon-box {
		background: linear-gradient(135deg, #1da1f2 0%, #0c85d0 100%);
	}

	.theme-youtube .mmd-plat-icon-box {
		background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
	}

	.theme-facebook .mmd-plat-icon-box {
		background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%);
	}

	.theme-telegram .mmd-plat-icon-box {
		background: linear-gradient(135deg, #229ed9 0%, #1789c0 100%);
	}

	.theme-spotify .mmd-plat-icon-box {
		background: linear-gradient(135deg, #1db954 0%, #169b43 100%);
	}

	.theme-twitch .mmd-plat-icon-box {
		background: linear-gradient(135deg, #9146ff 0%, #772ce8 100%);
	}

	.mmd-plat-info {
		display: flex;
		flex-direction: column;
	}

	.mmd-plat-name {
		font-size: 15.5px;
		font-weight: 800;
		color: #0f172a;
		line-height: 1.2;
		margin: 0;
	}

	body.dark .mmd-plat-name {
		color: #ffffff;
	}

	.mmd-plat-sub {
		font-size: 12px;
		color: #64748b;
		margin-top: 2px;
		font-weight: 500;
	}

	body.dark .mmd-plat-sub {
		color: #94a3b8;
	}

	/* Chevron Button with Smooth 180 Flip */
	.mmd-plat-chevron-btn {
		width: 36px;
		height: 36px;
		border-radius: 10px;
		background: #edf2f7;
		color: #64748b;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		transition: all 0.22s ease;
		flex-shrink: 0;
	}

	body.dark .mmd-plat-chevron-btn {
		background: #252445;
		color: #cbd5e1;
	}

	.mmd-platform-item.open .mmd-plat-chevron-btn {
		background: #6366f1;
		color: #ffffff;
	}

	.mmd-plat-chevron-btn i {
		transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.mmd-platform-item.open .mmd-plat-chevron-btn i {
		transform: rotate(180deg);
	}

	/* Sub-Categories Drawer (Screenshot 2) */
	.mmd-sub-drawer {
		display: none;
		padding: 6px 12px 14px;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
	}

	.mmd-platform-item.open .mmd-sub-drawer {
		display: block !important;
	}

	body.dark .mmd-sub-drawer {
		border-top-color: rgba(255, 255, 255, 0.06);
	}

	.mmd-cats-inner {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	/* Category Row */
	.mmd-cat-row {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 10px 12px;
		border-radius: 14px;
		text-decoration: none !important;
		transition: background 0.18s ease;
	}

	.mmd-cat-row:hover,
	.mmd-cat-row:active {
		background: rgba(0, 0, 0, 0.04);
	}

	body.dark .mmd-cat-row:hover,
	body.dark .mmd-cat-row:active {
		background: rgba(255, 255, 255, 0.06);
	}

	/* Pastel-Tinted Square Icon Box (Screenshot 2) */
	.mmd-cat-icon-box {
		width: 38px;
		height: 38px;
		border-radius: 12px;
		background: #f0f4ff;
		color: #e11d48;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		flex-shrink: 0;
		transition: transform 0.2s ease;
	}

	body.dark .mmd-cat-icon-box {
		background: #252445;
		color: #f43f5e;
	}

	.mmd-cat-row:hover .mmd-cat-icon-box {
		transform: scale(1.08);
	}

	.mmd-cat-text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.mmd-cat-brand {
		font-size: 11.5px;
		font-weight: 700;
		color: #e11d48;
		line-height: 1.2;
		margin-bottom: 2px;
	}

	body.dark .mmd-cat-brand {
		color: #fb7185;
	}

	.mmd-cat-name {
		font-size: 15px;
		font-weight: 700;
		color: #0f172a;
		line-height: 1.2;
	}

	body.dark .mmd-cat-name {
		color: #ffffff;
	}

	/* View all platform services button */
	.mmd-view-all-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 14px;
		margin-top: 6px;
		border-radius: 12px;
		background: rgba(99, 102, 241, 0.08);
		color: #6366f1 !important;
		font-size: 13px;
		font-weight: 700;
		text-decoration: none !important;
		transition: all 0.2s ease;
	}

	body.dark .mmd-view-all-row {
		background: rgba(99, 102, 241, 0.16);
		color: #a5b4fc !important;
	}

	.mmd-view-all-row:hover {
		background: #6366f1;
		color: #ffffff !important;
	}

	/* Footer extra links in drawer */
	.mmd-extra-links {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin-top: 14px;
		padding-top: 12px;
		border-top: 1px solid rgba(0, 0, 0, 0.06);
	}

	body.dark .mmd-extra-links {
		border-top-color: rgba(255, 255, 255, 0.08);
	}

	.mmd-extra-btn {
		display: flex;
		align-items: center;
		padding: 10px 14px;
		border-radius: 12px;
		background: #f8fafc;
		color: #334155 !important;
		font-size: 13.5px;
		font-weight: 700;
		text-decoration: none !important;
		transition: all 0.2s ease;
	}

	body.dark .mmd-extra-btn {
		background: #1c1b35;
		color: #cbd5e1 !important;
	}

	.mmd-extra-btn:hover {
		background: #6366f1;
		color: #ffffff !important;
	}
}

@media (min-width: 992px) {
	.mobile-drawer-overlay,
	.mobile-modern-drawer {
		display: none !important;
	}
}






/* ==========================================================================
   MOBILE HEADER NAVBAR & UNDER-NAV DRAWER (CLEAN SINGLE HEADER BAR)
   ========================================================================== */

/* Dark Overlay Behind Drawer */
.mobile-drawer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(10, 15, 30, 0.65);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	transition: all 0.28s ease;
}

.mobile-drawer-overlay.active,
body.showmenu .mobile-drawer-overlay {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 991px) {
	/* Header Container Stays Fixed At Top */
	header {
		position: sticky !important;
		top: 0 !important;
		z-index: 10000 !important;
	}

	header .navbar.nav-head {
		margin: 12px 14px 6px 14px !important;
		border-radius: 20px !important;
		background: #ffffff !important;
		border: 1px solid rgba(0, 0, 0, 0.08) !important;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
		padding: 0 16px !important;
		height: 60px !important;
		min-height: 60px !important;
		display: flex !important;
		align-items: center !important;
		position: relative !important;
		z-index: 10000 !important;
	}

	body.dark header .navbar.nav-head {
		background: #15142b !important;
		border-color: rgba(255, 255, 255, 0.08) !important;
		box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5) !important;
	}

	header .nav-content {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		height: 100% !important;
		padding: 0 !important;
	}

	/* Logo in Top Header Bar: Clean 30px height */
	header a.logo,
	header .logo {
		display: flex !important;
		align-items: center !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 1 !important;
	}

	header a.logo img,
	header .logo img {
		height: 30px !important;
		width: auto !important;
		max-width: 145px !important;
		object-fit: contain !important;
		display: block !important;
	}

	/* Hamburger Button: Clean 40x40 Rounded Square with 3 Bars */
	.navTogbtn {
		width: 40px !important;
		height: 40px !important;
		border-radius: 12px !important;
		background: #f1f3f9 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 4px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		cursor: pointer !important;
		flex-shrink: 0 !important;
		position: relative !important;
		z-index: 10001 !important;
	}

	body.dark .navTogbtn {
		background: #232240 !important;
	}

	.navTogbtn span {
		display: block !important;
		width: 18px !important;
		height: 2px !important;
		border-radius: 2px !important;
		background: #475569 !important;
		margin: 0 !important;
		transition: all 0.25s ease !important;
	}

	body.dark .navTogbtn span {
		background: #cbd5e1 !important;
	}

	.navTogbtn .item4 {
		display: none !important;
	}

	.navTogbtn.active .item1 {
		transform: translateY(6px) rotate(45deg) !important;
	}

	.navTogbtn.active .item2 {
		opacity: 0 !important;
		transform: scale(0) !important;
	}

	.navTogbtn.active .item3 {
		transform: translateY(-6px) rotate(-45deg) !important;
	}

	.NavListArea {
		display: none !important;
	}

	/* The Platforms Accordion Card: Slides Down Directly Under Sticky Header */
	.mobile-modern-drawer {
		position: fixed !important;
		top: 78px !important;
		left: 14px !important;
		right: 14px !important;
		max-height: calc(100vh - 90px) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		z-index: 9999 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transform: translateY(-10px) !important;
		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}

	.mobile-modern-drawer.active,
	body.showmenu .mobile-modern-drawer {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateY(0) !important;
	}

	.mmd-card-wrap {
		background: #ffffff;
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: 24px;
		padding: 14px;
		box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
	}

	body.dark .mmd-card-wrap {
		background: #15142b;
		border-color: rgba(255, 255, 255, 0.08);
		box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
	}

	.mmd-platforms-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.mmd-platform-item {
		background: #f8fafc;
		border: 1px solid rgba(0, 0, 0, 0.05);
		border-radius: 18px;
		overflow: hidden;
		transition: all 0.22s ease;
	}

	body.dark .mmd-platform-item {
		background: #1c1b35;
		border-color: rgba(255, 255, 255, 0.06);
	}

	.mmd-platform-item.open {
		background: #ffffff;
		border-color: rgba(99, 102, 241, 0.35);
		box-shadow: 0 6px 20px rgba(99, 102, 241, 0.08);
	}

	body.dark .mmd-platform-item.open {
		background: #181730;
		border-color: rgba(99, 102, 241, 0.45);
		box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
	}

	.mmd-plat-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 14px;
		cursor: pointer;
		user-select: none;
	}

	.mmd-plat-left {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.mmd-plat-icon-box {
		width: 44px;
		height: 44px;
		border-radius: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 20px;
		flex-shrink: 0;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.theme-instagram .mmd-plat-icon-box {
		background: linear-gradient(135deg, #e1306c 0%, #fd1d1d 50%, #f77737 100%);
	}

	.theme-tiktok .mmd-plat-icon-box {
		background: #111111;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	}

	.theme-twitter .mmd-plat-icon-box {
		background: linear-gradient(135deg, #1da1f2 0%, #0c85d0 100%);
	}

	.theme-youtube .mmd-plat-icon-box {
		background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
	}

	.theme-facebook .mmd-plat-icon-box {
		background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%);
	}

	.theme-telegram .mmd-plat-icon-box {
		background: linear-gradient(135deg, #229ed9 0%, #1789c0 100%);
	}

	.theme-spotify .mmd-plat-icon-box {
		background: linear-gradient(135deg, #1db954 0%, #169b43 100%);
	}

	.theme-twitch .mmd-plat-icon-box {
		background: linear-gradient(135deg, #9146ff 0%, #772ce8 100%);
	}

	.mmd-plat-info {
		display: flex;
		flex-direction: column;
	}

	.mmd-plat-name {
		font-size: 15.5px;
		font-weight: 800;
		color: #0f172a;
		line-height: 1.2;
		margin: 0;
	}

	body.dark .mmd-plat-name {
		color: #ffffff;
	}

	.mmd-plat-sub {
		font-size: 12px;
		color: #64748b;
		margin-top: 2px;
		font-weight: 500;
	}

	body.dark .mmd-plat-sub {
		color: #94a3b8;
	}

	.mmd-plat-chevron-btn {
		width: 36px;
		height: 36px;
		border-radius: 10px;
		background: #edf2f7;
		color: #64748b;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		transition: all 0.22s ease;
		flex-shrink: 0;
	}

	body.dark .mmd-plat-chevron-btn {
		background: #252445;
		color: #cbd5e1;
	}

	.mmd-platform-item.open .mmd-plat-chevron-btn {
		background: #6366f1;
		color: #ffffff;
	}

	.mmd-plat-chevron-btn i {
		transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.mmd-platform-item.open .mmd-plat-chevron-btn i {
		transform: rotate(180deg);
	}

	.mmd-sub-drawer {
		display: none;
		padding: 6px 12px 14px;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
	}

	.mmd-platform-item.open .mmd-sub-drawer {
		display: block !important;
	}

	body.dark .mmd-sub-drawer {
		border-top-color: rgba(255, 255, 255, 0.06);
	}

	.mmd-cats-inner {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.mmd-cat-row {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 10px 12px;
		border-radius: 14px;
		text-decoration: none !important;
		transition: background 0.18s ease;
	}

	.mmd-cat-row:hover,
	.mmd-cat-row:active {
		background: rgba(0, 0, 0, 0.04);
	}

	body.dark .mmd-cat-row:hover,
	body.dark .mmd-cat-row:active {
		background: rgba(255, 255, 255, 0.06);
	}

	.mmd-cat-icon-box {
		width: 38px;
		height: 38px;
		border-radius: 12px;
		background: #f0f4ff;
		color: #e11d48;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		flex-shrink: 0;
		transition: transform 0.2s ease;
	}

	body.dark .mmd-cat-icon-box {
		background: #252445;
		color: #f43f5e;
	}

	.mmd-cat-row:hover .mmd-cat-icon-box {
		transform: scale(1.08);
	}

	.mmd-cat-text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.mmd-cat-brand {
		font-size: 11.5px;
		font-weight: 700;
		color: #e11d48;
		line-height: 1.2;
		margin-bottom: 2px;
	}

	body.dark .mmd-cat-brand {
		color: #fb7185;
	}

	.mmd-cat-name {
		font-size: 15px;
		font-weight: 700;
		color: #0f172a;
		line-height: 1.2;
	}

	body.dark .mmd-cat-name {
		color: #ffffff;
	}

	.mmd-view-all-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 14px;
		margin-top: 6px;
		border-radius: 12px;
		background: rgba(99, 102, 241, 0.08);
		color: #6366f1 !important;
		font-size: 13px;
		font-weight: 700;
		text-decoration: none !important;
		transition: all 0.2s ease;
	}

	body.dark .mmd-view-all-row {
		background: rgba(99, 102, 241, 0.16);
		color: #a5b4fc !important;
	}

	.mmd-view-all-row:hover {
		background: #6366f1;
		color: #ffffff !important;
	}

	.mmd-extra-links {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin-top: 14px;
		padding-top: 12px;
		border-top: 1px solid rgba(0, 0, 0, 0.06);
	}

	body.dark .mmd-extra-links {
		border-top-color: rgba(255, 255, 255, 0.08);
	}

	.mmd-extra-btn {
		display: flex;
		align-items: center;
		padding: 10px 14px;
		border-radius: 12px;
		background: #f8fafc;
		color: #334155 !important;
		font-size: 13.5px;
		font-weight: 700;
		text-decoration: none !important;
		transition: all 0.2s ease;
	}

	body.dark .mmd-extra-btn {
		background: #1c1b35;
		color: #cbd5e1 !important;
	}

	.mmd-extra-btn:hover {
		background: #6366f1;
		color: #ffffff !important;
	}
}

@media (min-width: 992px) {
	.mobile-drawer-overlay,
	.mobile-modern-drawer {
		display: none !important;
	}
}



/* ==========================================================================
   GLOBAL LOGO LIGHT & DARK MODE STRICT TOGGLE (PREVENTS DUPLICATE DISPLAY)
   ========================================================================== */

/* By default (Light Mode): show light, hide dark */
.logo img.light,
a.logo img.light {
	display: block !important;
}

.logo img.dark,
a.logo img.dark {
	display: none !important;
}

/* In Dark Mode: show dark, hide light */
body.dark .logo img.dark,
body.dark a.logo img.dark {
	display: block !important;
}

body.dark .logo img.light,
body.dark a.logo img.light {
	display: none !important;
}

@media (max-width: 991px) {
	header a.logo img,
	header .logo img {
		height: 28px !important;
		width: auto !important;
		max-width: 170px !important;
		object-fit: contain !important;
	}

	body:not(.dark) header a.logo img.light,
	body:not(.dark) header .logo img.light {
		display: block !important;
	}

	body:not(.dark) header a.logo img.dark,
	body:not(.dark) header .logo img.dark {
		display: none !important;
	}

	body.dark header a.logo img.dark,
	body.dark header .logo img.dark {
		display: block !important;
	}

	body.dark header a.logo img.light,
	body.dark header .logo img.light {
		display: none !important;
	}
}




/* ==========================================================================
   SOSYALPATIKA HERO BANNER (DESKTOP SPLIT + MOBILE FULL BACKGROUND OVERLAY)
   ========================================================================== */

.hero-patika-banner {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 32px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	position: relative;
	min-height: 380px;
	margin-bottom: 25px;
	transition: all 0.3s ease;
}

body.dark .hero-patika-banner {
	background: #15142b;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.45);
}

/* Left Content Column (Desktop) */
.hpb-content {
	flex: 1 1 54%;
	padding: 42px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 5;
	order: 1;
}

.hpb-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff1f2;
	color: #e11d48;
	border: 1px solid #fecdd3;
	border-radius: 50px;
	padding: 6px 16px;
	font-size: 13.5px;
	font-weight: 700;
	width: fit-content;
	margin-bottom: 18px;
}

body.dark .hpb-badge {
	background: rgba(225, 29, 72, 0.15);
	border-color: rgba(225, 29, 72, 0.3);
	color: #fb7185;
}

.hpb-title {
	font-size: 32px;
	font-weight: 900;
	line-height: 1.25;
	margin: 0 0 16px 0;
	letter-spacing: -0.01em;
}

.hpb-t-dark {
	display: block;
	color: #1e293b;
}

body.dark .hpb-t-dark {
	color: #ffffff;
}

.hpb-t-pink {
	display: block;
	color: #ff2b6d;
	text-shadow: 0 2px 15px rgba(255, 43, 109, 0.25);
}

.hpb-desc {
	font-size: 14.5px;
	font-weight: 500;
	color: #64748b;
	line-height: 1.6;
	max-width: 440px;
	margin: 0 0 26px 0;
}

body.dark .hpb-desc {
	color: #94a3b8;
}

.hpb-action-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.hpb-rating-pill {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: #fdf2f8;
	border: 1px solid #fbcfe8;
	border-radius: 50px;
	padding: 6px 8px 6px 16px;
}

body.dark .hpb-rating-pill {
	background: rgba(255, 43, 109, 0.12);
	border-color: rgba(255, 43, 109, 0.25);
}

.hpb-stars {
	display: flex;
	align-items: center;
	gap: 3px;
	color: #ff2b6d;
	font-size: 13.5px;
}

.hpb-score-badge {
	background: #ff2b6d;
	color: #ffffff;
	border-radius: 50px;
	padding: 4px 11px;
	font-size: 12.5px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	box-shadow: 0 2px 8px rgba(255, 43, 109, 0.35);
}

/* Right Visual Column (Desktop) */
.hpb-visual {
	flex: 1 1 46%;
	position: relative;
	overflow: hidden;
	min-height: 380px;
	order: 2;
}

.hpb-curve-mask {
	width: 100%;
	height: 100%;
	border-radius: 60px 0 0 60px;
	overflow: hidden;
	position: relative;
	box-shadow: -8px 0 25px rgba(0, 0, 0, 0.08);
}

.hpb-mascot-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 0.4s ease;
}

.hero-patika-banner:hover .hpb-mascot-img {
	transform: scale(1.03);
}

.hpb-mobile-scrim {
	display: none;
}







/* ==========================================================================
   MOBILE HERO BANNER: 100% FULL-WIDTH + CONVEX DOWNWARD OVAL ARCH (< 992px)
   ========================================================================== */

@media (max-width: 991px) {
	#introHome {
		padding: 0 !important;
		overflow: visible !important;
	}

	#introHome .container {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	#introHome .homestep,
	#introHome .area2 {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}

	/* 100% Full-Width Edge-To-Edge with Downward Convex Oval Arc */
	.hero-patika-banner {
		display: block !important;
		position: relative !important;
		width: 100% !important;
		max-width: 100vw !important;
		height: 480px !important;
		min-height: 480px !important;
		margin: 0 0 25px 0 !important;
		border-radius: 0 0 50% 50% / 0 0 45px 45px !important;
		border: none !important;
		overflow: hidden !important;
		box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16) !important;
	}

	#introHome .fastOrder {
		margin: 0 14px 20px 14px !important;
	}

	.hpb-visual {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		z-index: 1 !important;
		order: unset !important;
	}

	.hpb-curve-mask {
		width: 100% !important;
		height: 100% !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	.hpb-mascot-img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center 8% !important;
	}

	.hpb-mobile-scrim {
		display: block !important;
		position: absolute !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 75% !important;
		background: linear-gradient(to top, rgba(10, 12, 26, 0.98) 0%, rgba(10, 12, 26, 0.82) 45%, rgba(10, 12, 26, 0) 100%) !important;
		z-index: 2 !important;
		pointer-events: none !important;
	}

	.hpb-bottom-curve {
		display: none !important;
	}

	/* Centered Content Overlayed on Lower Half Inside the Downward Arch */
	.hpb-content {
		position: absolute !important;
		bottom: 26px !important;
		left: 0 !important;
		width: 100% !important;
		z-index: 5 !important;
		padding: 0 20px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		order: unset !important;
	}

	.hpb-badge {
		background: rgba(255, 255, 255, 0.18) !important;
		backdrop-filter: blur(12px) !important;
		-webkit-backdrop-filter: blur(12px) !important;
		border: 1px solid rgba(255, 255, 255, 0.35) !important;
		color: #ffffff !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		padding: 5px 16px !important;
		margin: 0 auto 12px auto !important;
		border-radius: 50px !important;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
	}

	.hpb-badge i {
		color: #ff2b6d !important;
	}

	.hpb-title {
		font-size: 21px !important;
		font-weight: 900 !important;
		line-height: 1.25 !important;
		margin: 0 auto 14px auto !important;
		text-align: center !important;
	}

	.hpb-t-dark {
		color: #ffffff !important;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
	}

	.hpb-t-pink {
		color: #ff2b6d !important;
		text-shadow: 0 2px 14px rgba(255, 43, 109, 0.65) !important;
	}

	.hpb-desc {
		display: none !important;
	}

	.hpb-action-row {
		justify-content: center !important;
		margin: 0 auto !important;
	}

	.hpb-rating-pill {
		background: rgba(0, 0, 0, 0.55) !important;
		backdrop-filter: blur(12px) !important;
		-webkit-backdrop-filter: blur(12px) !important;
		border: 1px solid rgba(255, 255, 255, 0.18) !important;
		padding: 5px 6px 5px 14px !important;
		border-radius: 50px !important;
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
	}

	.hpb-stars {
		color: #ffffff !important;
		font-size: 13px !important;
	}

	.hpb-score-badge {
		background: #ff2b6d !important;
		color: #ffffff !important;
		border-radius: 50px !important;
		padding: 4px 10px !important;
		font-size: 12px !important;
		font-weight: 800 !important;
	}
}

@media (max-width: 480px) {
	.hero-patika-banner {
		height: 460px !important;
		min-height: 460px !important;
		border-radius: 0 0 50% 50% / 0 0 38px 38px !important;
	}

	.hpb-title {
		font-size: 19px !important;
	}

	.hpb-content {
		bottom: 22px !important;
	}
}



/* ==========================================================================
   FAST ORDER DOCK POSITIONING (STRICTLY UNDER HERO BANNER)
   ========================================================================== */

.hpb-fastorder-wrapper {
	width: 100%;
	position: relative;
	z-index: 10;
	margin-top: 20px;
}

.hpb-fastorder-wrapper .fastOrder,
#introHome .fastOrder,
.fastOrder.modern-fast-dock {
	transform: none !important;
	position: relative !important;
	top: auto !important;
	bottom: auto !important;
	margin-top: 0 !important;
}

@media (max-width: 991px) {
	#introHome .area2 {
		display: flex !important;
		flex-direction: column !important;
	}

	.hero-patika-banner {
		order: 1 !important;
		margin-bottom: 20px !important;
	}

	.hpb-fastorder-wrapper {
		order: 2 !important;
		margin-top: 0 !important;
		padding: 0 14px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.hpb-fastorder-wrapper .fastOrder,
	#introHome .fastOrder,
	.fastOrder.modern-fast-dock {
		margin: 0 !important;
		width: 100% !important;
		transform: none !important;
	}
}



/* ==========================================================================
   MOBILE TOUCH & SCROLL FREEZE COMPLETE FIX (60FPS BUTTERY SMOOTH)
   ========================================================================== */

/* 1. Prevent Mobile Drawer & Fullscreen Overlay from ever capturing touches when closed */
.mobile-drawer-overlay:not(.active),
body:not(.showmenu) .mobile-drawer-overlay,
.mobile-modern-drawer:not(.active),
body:not(.showmenu) .mobile-modern-drawer {
	display: none !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

/* 2. Ensure #introHome and containers never trap pan/scroll gestures */
#introHome,
#introHome .container,
#introHome .homestep,
#introHome .area2 {
	overflow: visible !important;
	touch-action: pan-y !important;
	-webkit-overflow-scrolling: touch !important;
}

/* 3. Hero Banner Touch Pass-Through & Native Scrolling */
.hero-patika-banner {
	touch-action: pan-y !important;
	user-select: none !important;
	-webkit-user-select: none !important;
	-webkit-touch-callout: none !important;
}

.hpb-visual,
.hpb-curve-mask,
.hpb-mascot-img,
.hpb-mobile-scrim {
	pointer-events: none !important;
	user-select: none !important;
	-webkit-user-select: none !important;
	-webkit-touch-callout: none !important;
	touch-action: pan-y !important;
}

.hpb-content {
	pointer-events: none !important;
	touch-action: pan-y !important;
}

.hpb-content a,
.hpb-content button,
.hpb-content .hpb-rating-pill,
.hpb-content .hpb-badge {
	pointer-events: auto !important;
}

/* 4. Fast Order Dock Smooth Touch Scrolling */
.hpb-fastorder-wrapper,
.hpb-fastorder-wrapper .fastOrder,
#introHome .fastOrder,
.fastOrder.modern-fast-dock {
	touch-action: pan-y !important;
	overflow: visible !important;
}

/* 5. Closed FastOrder dropdowns must never trap touches */
.fastOrder .fastDrop:not(.show) {
	display: none !important;
	pointer-events: none !important;
	visibility: hidden !important;
}



/* ==========================================================================
   POPULAR PLATFORMS 3-COLUMN SQUIRCLE GRID (SCREENSHOT 2 EXACT MATCH)
   ========================================================================== */

/* Desktop: hide mobile heading, keep standard layout */
@media (min-width: 992px) {
	.populer-plat-heading {
		display: none !important;
	}
}

/* Mobile: 3-column group card grid */
@media (max-width: 991px) {
	.area1 {
		display: block !important;
		width: calc(100% - 28px) !important;
		margin: 18px 14px 28px 14px !important;
		padding: 16px 14px 18px 14px !important;
		background: #ffffff !important;
		border: 1px solid rgba(0, 0, 0, 0.08) !important;
		border-radius: 24px !important;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
		box-sizing: border-box !important;
	}

	body.dark .area1 {
		background: #15142b !important;
		border-color: rgba(255, 255, 255, 0.08) !important;
		box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4) !important;
	}

	/* Heading with Notification Bell */
	.populer-plat-heading {
		display: flex !important;
		align-items: center !important;
		font-size: 17.5px !important;
		font-weight: 800 !important;
		color: #1e293b !important;
		padding-bottom: 12px !important;
		margin-bottom: 14px !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
		letter-spacing: -0.01em !important;
	}

	body.dark .populer-plat-heading {
		color: #ffffff !important;
		border-bottom-color: rgba(255, 255, 255, 0.08) !important;
	}

	.populer-plat-heading i {
		font-size: 19px !important;
		margin-right: 8px !important;
		color: inherit !important;
	}

	/* 3-Column Grid */
	.area1 .serviceList {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 10px !important;
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		overflow: visible !important;
		white-space: normal !important;
	}

	.area1 .serviceList .item {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: unset !important;
	}

	.area1 .serviceList .item a {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		text-decoration: none !important;
	}

	/* Squircle Card Box */
	.area1 .serviceList .item .box {
		width: 100% !important;
		aspect-ratio: 1 / 1 !important;
		min-height: 98px !important;
		border-radius: 20px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 12px 6px !important;
		position: relative !important;
		overflow: hidden !important;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
		transition: transform 0.2s ease, box-shadow 0.2s ease !important;
		box-sizing: border-box !important;
	}

	.area1 .serviceList .item .box:active {
		transform: scale(0.95) !important;
	}

	/* Subtle Doodle Texture Overlay */
	.area1 .serviceList .item .box::before {
		content: '' !important;
		position: absolute !important;
		inset: 0 !important;
		background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 10a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm-15 25a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm30 0a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM15 50a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm30 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-15-5a4 4 0 1 0 0-8 4 4 0 0 0 0 8z' fill='%23000000' fill-opacity='0.12' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
		background-size: 45px 45px !important;
		opacity: 0.75 !important;
		pointer-events: none !important;
		border-radius: inherit !important;
	}

	/* Hide old background opacity icon */
	.area1 .serviceList .item .box .opacityIcon {
		display: none !important;
	}

	/* Main Glyph Icon */
	.area1 .serviceList .item .box i:not(.opacityIcon i) {
		font-size: 32px !important;
		color: #ffffff !important;
		margin-bottom: 7px !important;
		line-height: 1 !important;
		position: relative !important;
		z-index: 2 !important;
		display: block !important;
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important;
	}

	/* Label Text Below Icon */
	.area1 .serviceList .item .box .serviceName {
		font-size: 11px !important;
		font-weight: 800 !important;
		color: #ffffff !important;
		text-transform: uppercase !important;
		letter-spacing: 0.4px !important;
		text-align: center !important;
		line-height: 1.2 !important;
		width: 100% !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		position: relative !important;
		z-index: 2 !important;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
	}

	/* Brand Color Gradients Matching Screenshot 2 Exactly */
	.area1 .serviceList .item .box.brand-instagram {
		background: linear-gradient(145deg, #e52d6a 0%, #c8286a 50%, #b82367 100%) !important;
	}

	.area1 .serviceList .item .box.brand-tiktok {
		background: linear-gradient(145deg, #2d263f 0%, #201b2f 100%) !important;
	}

	.area1 .serviceList .item .box.brand-twitter,
	.area1 .serviceList .item .box.brand-x {
		background: linear-gradient(145deg, #1d9bf0 0%, #0084d6 100%) !important;
	}

	.area1 .serviceList .item .box.brand-youtube {
		background: linear-gradient(145deg, #ff0000 0%, #d80000 100%) !important;
	}

	.area1 .serviceList .item .box.brand-facebook,
	.area1 .serviceList .item .box.brand-facebook-square {
		background: linear-gradient(145deg, #3d60ad 0%, #29488f 100%) !important;
	}

	.area1 .serviceList .item .box.brand-twitch {
		background: linear-gradient(145deg, #6c32b8 0%, #522194 100%) !important;
	}

	.area1 .serviceList .item .box.brand-spotify {
		background: linear-gradient(145deg, #1db954 0%, #15883e 100%) !important;
	}

	.area1 .serviceList .item .box.brand-telegram {
		background: linear-gradient(145deg, #229ed9 0%, #177aa8 100%) !important;
	}
}

@media (max-width: 400px) {
	.area1 .serviceList {
		gap: 8px !important;
	}
	.area1 .serviceList .item .box {
		min-height: 90px !important;
		border-radius: 18px !important;
		padding: 10px 4px !important;
	}
	.area1 .serviceList .item .box i:not(.opacityIcon i) {
		font-size: 28px !important;
		margin-bottom: 5px !important;
	}
	.area1 .serviceList .item .box .serviceName {
		font-size: 10px !important;
	}
}