@charset "UTF-8";
@import "../font-awesome/css/font-awesome.css";

* {
	box-sizing: border-box;
}

:root {
	--color-primary: #35294f;
	--color-secondary: #706a82;
	--color-light: #b7b3c1;
	--color-primary-rgb: 53, 41, 79;   /* #35294f → 53,41,79 */
	--color-secondary-rgb: 112, 106, 130; /* #706a82 → 112,106,130 */
	--color-light-rgb: 183, 180, 191;  /* #b7b4bf → 183,180,191 */
}

html {
	margin: 0;
	padding: 0;
	font-size: 16px;
}

body {
	background-color: #ffffff;
	font-family: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 400;
	line-height: 1.6;
}

body, h1, h2, h3, p {
	margin: 0;
}

h1, h2, h3 {
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-primary);
}

strong {
	font-weight: 700;
}

em {
	font-style: italic;
}

.logo {
	max-width: 210px;
}

.fs-xxxs {
	font-size: 0.60rem !important;
} 

.fs-xxs {
	font-size: 0.75rem;
}   /* 12px */

.fs-xs  {
	font-size: 0.875rem;
}  /* 14px */

.fs-sm  {
	font-size: 1rem;
}      /* 16px */

.fs-md  {
	font-size: 1.125rem;
}  /* 18px */

.fs-lg  {
	font-size: 1.25rem;
}   /* 20px */

.fs-xl  {
	font-size: 1.5rem;
}    /* 24px */

.fs-2xl {
	font-size: 2rem;
}      /* 32px */

.fs-3xl {
	font-size: 3rem;
}      /* 48px */

.fs-4xl {
	font-size: 4rem;
}      /* 64px */

.bg-wodacs-primary {
	background-color: rgba(var(--color-primary-rgb), 1) !important;
}

.bg-wodacs-secondary {
	background-color: rgba(var(--color-secondary-rgb), 1) !important;
}

.bg-wodacs-light {
	background-color: rgba(var(--color-light-rgb), 1) !important;
}

.text-wodacs-primary {
	color: rgba(var(--color-primary-rgb), 1) !important;
}

.text-wodacs-secondary {
	color: rgba(var(--color-secondary-rgb), 1) !important;
}

.text-wodacs-light {
	color: rgba(var(--color-light-rgb), 1) !important;
}

/* Wodacs link stili */
.a-wodacs {
    color: rgba(var(--color-primary-rgb), 1);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
}

/* Hover efekti */
.a-wodacs:hover {
    color: rgba(var(--color-secondary-rgb), 1); /* hoverda secondary color */
    transform: translateY(-2px); /* hafif yukarı hareket */
}

.menu-icon {
	width: 36px;
    height: 36px;
    background-image: url('svg/menu.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.cancel-icon {
	width: 26px;
    height: 26px;
    background-image: url('svg/cancel.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.back-icon {
	width: 26px;
    height: 26px;
    background-image: url('svg/back.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.home-icon {
	width: 16px;
    height: 16px;
    background-image: url('svg/home.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.about-icon {
	width: 18px;
    height: 18px;
    background-image: url('svg/about.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.store-icon {
	width: 18px;
    height: 18px;
    background-image: url('svg/store.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.search-icon {
	width: 26px;
    height: 26px;
    background-image: url('svg/search.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.user-icon {
	width: 27px;
    height: 27px;
    background-image: url('svg/user.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
	transform: translateY(3px);
	margin-top: -2px;
}

.cart-icon {
	width: 24px;
    height: 24px;
    background-image: url('svg/cart.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
	transform: translateY(1px);
}

.cart-white-icon {
	width: 22px;
    height: 22px;
    background-image: url('svg/cart-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.wodacs-info-menu a {
	color: #000;
	text-decoration: none;
	position: relative;
	display: inline-block;
	padding-bottom: 2px;
}

.wodacs-info-menu a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background-color: #000;
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

.wodacs-info-menu a:hover::after {
	width: 100%;
}

.wodacs-search {
	max-width: 570px !important;
}

.wodacs-search div input {
	color: rgba(var(--color-secondary-rgb), 1);
	background-color: #ffffff !important;
	border: none;
	height: 42px;
	line-height: unset;
	transition: all 0.1s ease;
	font-size: 14px;
	border: 2px solid rgba(0,0,0,0.04);
	border-radius: 6px!important;
	border-top-right-radius: 6px!important;
	border-bottom-right-radius: 6px!important;
}

.wodacs-search div input ::-webkit-input-placeholder { color: rgba(var(--color-primary-rgb), 1); }
.wodacs-search div input ::-moz-placeholder { color: rgba(var(--color-primary-rgb), 1); }
.wodacs-search div input :-ms-input-placeholder { color: rgba(var(--color-primary-rgb), 1); }
.wodacs-search div input ::-ms-input-placeholder { color: rgba(var(--color-primary-rgb), 1); }
.wodacs-search div input ::placeholder {color: rgba(var(--color-primary-rgb), 1); }

.wodacs-search div span {
	color: rgba(var(--color-light-rgb), 1) !important;
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	z-index: 99;
	background-color: transparent;
}

.wodacs-search div input:focus {
	background-color: #ffffff !important;
	border: 2px solid rgba(var(--color-primary-rgb), 1);
	box-shadow: 0 1px 1px rgba(var(--color-primary-rgb), 0.075) inset, 0 0 8px rgba(var(--color-primary-rgb), 0.6);
	outline: 0 none;
}

.wodacs-right-link {
	color: #000;
	text-decoration: none;
	transition: color 0.3s;
	text-align: center;
}

.wodacs-right-link {
	gap: 1px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wodacs-right-link:hover {
	color: #35294f;
}

.wodacs-right-link span:first-child {
	margin-bottom: 0px;
}

.wodacs-right-link + .wodacs-right-link {
	margin-left: 18px;
}

.wodacs-right-link span {
	font-size: 12px;
}

.bg-wodacs-soft {
	background-color: #706a82 !important;
	color: #e8e7eb !important;
}

@media (min-width: 1200px) {
	.container {
		width: 1200px;
	}
}

@media (max-width: 991px) {
    header {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1050;
        background: #fff;
    }

    body {
        padding-top: 140px;
    }

    .header-scrolled {
        transform: translateY(-30px) !important;
    }
}

header {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: #fff;
    width: 100%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    will-change: transform;
}

.header-scrolled {
    transform: translateY(-60px); 
}

.header-scrolled .wodacs-header-wrapper,
.header-scrolled .sticky-content-area {
    transform: translateY(0);
}

.bg-wodacs-primary, 
.wodacs-info-menu {
    transition: opacity 0.3s ease;
}

.header-scrolled .bg-wodacs-primary, 
.header-scrolled .wodacs-info-menu {
    opacity: 0;
    pointer-events: none;
}

.wodacs-info-menu.sticky-hide {
    max-height: 60px;
    overflow: hidden;
    transition: max-height .3s ease, opacity .2s ease, margin .3s ease;
}

.header-scrolled .wodacs-info-menu.sticky-hide {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0 !important;
}

/* Sayfa en yukarıdayken */
.wodacs-header-wrapper {
    width: 100%;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    /* Renk değişiminin pürüzsüz ve yumuşak olması için transition ekliyoruz */
    transition: background-color 0.3s ease, border-color 0.3s ease; 
}

/* Sayfa aşağı kaydığında (JS .header-scrolled sınıfını ekleyince) */
header.header-scrolled .wodacs-header-wrapper {
    background-color: #b7b3c1 !important; /* Aşağı kayınca olmasını istediğin yeni arka plan (Örn: Saf Beyaz) */
    border-bottom: 1px solid #706a82 !important; /* Aşağı kayınca olmasını istediğin yeni border rengi */
}

.wodacs-container {
    max-width: 100%;
    margin: 0 auto;
    position: static;
}

.main-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.main-menu > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    white-space: normal;
}

.menu-line {
    display: block;
    line-height: 1.2;
}

.mega-trigger {
    /*border-right: 1px solid #706a82;*/
}

.mega-trigger:last-child {
    border-right: none;
}

.mega-trigger > a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 30px;
    text-decoration: none;
    color: #35294f;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    min-height: 45px;
}

.mega-trigger:hover > a {
    background-color: #35294f;
    color: #b7b3c1;
	border-radius: 4px;
}

.full-width-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 999;
    border-bottom: 2px solid #35294f;
	visibility: hidden;
    opacity: 0;
    /*
	transform: translateY(3px);
    transition: all 0.3s ease-in-out;
	*/
	transform: translateY(0); 
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: block !important;
	margin-top: 1px;
}

.has-dropdown:hover .full-width-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-content-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.mega-col h3 {
	position: relative;
	display: inline-block;
    font-size: 14px;
    color: #35294f;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
    margin-bottom: 10px!important;
    text-transform: uppercase;
}

.mega-col h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;             /* önce yazı kadar */
    height: 1.5px;
    background-color: #35294f;
    transform: scaleX(0.8);  /* %80 */
    transform-origin: left;  /* soldan küçülsün */
}

.mega-title a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
}

.mega-title a:hover {
	text-decoration: none;
}

.mega-col .mega-cat-image img {
	width: 50px;
}

.mega-col ul {
    list-style: none;
    padding: 0;
}

.show-all > a {
	color: #35294f;
	font-weight: 600;
	margin-top: 6px;
}

.show-all > a::before {
    content: "";
}

.mega-col ul li a {
    text-decoration: none;
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    display: block;
}

.mega-col ul li a:hover {
    color: #35294f;
}

/* Header Dropdown Stilleri */
.user-menu .dropdown-menu {
    min-width: 220px;
    border-radius: 12px;
    padding: 10px;
    margin-top: 10px !important;
}

.user-menu .dropdown-item {
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.user-menu .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #35294f; /* Wodacs ana rengin */
    transform: translateX(5px);
}

.user-menu .dropdown-header {
    font-weight: 600;
    color: #333;
    padding: 10px 15px;
}

.dropdown-item.text-danger:hover {
    background-color: #fff5f5;
    color: #dc3545 !important;
}

.mobile-menu-btn {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
}

.mobile-menu-btn:active {
	background: rgba(0,0,0,.06);
}

/* Logo hizası */
.mobile-logo img {
	max-height: 42px;
}

body.offcanvas-open {
	overflow: hidden !important;
	touch-action: none;
}

.offcanvas {
	z-index: 1200 !important;
	overflow-y: auto;
	overflow-x: hidden!important;
}

.offcanvas-backdrop {
	z-index: 1190 !important;
}

.offcanvas.offcanvas-start {
	border-right: 0px!important;
}

#mobileMenu {
	background: #fff;
}

#mobileMenu .offcanvas-body {
	padding: 0;
	overflow: hidden;
}

.mobile-panel {
	position: absolute;
	inset: 0;
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .3s ease;
}

.mobile-panel.active {
	transform: translateX(0);
}

.mobile-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid #e5e7eb;
	flex-shrink: 0;
}

.mobile-panel-header strong {
	font-size: 16px;
	font-weight: 600;
}

.mobile-back,
.mobile-close {
	background: none;
	border: 0;
	color: #0d6efd;
	cursor: pointer;
	padding: 0px;
	width: 26px;
	height: 26px;
}

.mobile-panel-content {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mobile-panel-content a:active,
.mobile-panel-content button:active {
	background: #f3f4f6;
}

.mobile-panel-header strong {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .2px;
}

.mobile-panel-content ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-panel-content li {
	border-bottom: 1px solid #f1f1f1;
}

.mobile-panel-content a,
.mobile-panel-content button {
	width: 100%;
	padding: 15px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: none;
	border: 0;
	font-size: 15px;
	color: #111;
	text-decoration: none;
}

.mobile-panel-content button span {
	color: #9ca3af;
	font-size: 18px;
}

.show-all a {
	font-weight: 600;
	color: #35294f;
	background: #f9fafb;
	font-size: 13px;
	letter-spacing: .5px;
}


@media (max-width: 768px) {
	.logo {
		max-width: 150px;
	}
	
	.wodacs-right-link span {
		font-size: 10px;
	}
}

@media (min-width: 1440px) {
	.container {
		width: 1440px;
	}
}

/* Content List*/
.product-section {
	background: white;
	border-radius: 16px;
	padding: 1rem;
	box-shadow: 0 2px 8px rgba(63, 42, 86, 0.08);
}

.section-legend {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 1rem;
	border-bottom: 2px solid #f8f7fa;
	margin-bottom: 1rem;
}

.legend-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.legend-icon {
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, #3f2a56 0%, #5a3d7a 100%);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.5rem;
	box-shadow: 0 4px 12px rgba(63, 42, 86, 0.2);
}

.legend-text h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: #2a1d3a;
	margin: 0 0 0.25rem;
}

.legend-text p {
	font-size: 0.875rem;
	color: #b7b3c1;
	margin: 0;
}

.legend-right {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.legend-count {
	background: #f8f7fa;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.legend-count-number {
	font-size: 1.10rem;
	font-weight: 700;
	color: #3f2a56;
}

.legend-count-text {
	font-size: 0.750rem;
	color: #b7b3c1;
}

.btn-view-all {
	background: #3f2a56;
	color: white;
	border: none;
	padding: 0.65rem 1.2rem;
	border-radius: 10px;
	font-weight: 600;
	font-size: 0.750rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 12px rgba(63, 42, 86, 0.2);
	text-decoration: none;
}

.btn-view-all:hover {
	background: #2a1d3a;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(63, 42, 86, 0.3);
}

.btn-view-all i {
	transition: transform 0.3s;
}

.btn-view-all:hover i {
	transform: translateX(4px);
}

.product-card {
  border: 1px solid #f0f0f0;
  height: 100%;
  position: relative;
  background: #fff;
  transition: box-shadow .25s ease, border-color .25s ease;
}

.product-card:hover {
  border-color: rgba(53, 41, 79, 0.25);
  box-shadow:
    0 12px 28px rgba(53, 41, 79, 0.18),
    0 4px 10px rgba(53, 41, 79, 0.08);
}

.product-title a,
.product-brand a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}

/* Hover’da hafif vurgu */
.product-title a:hover {
	color: var(--main-color);
	text-decoration: none;
}

.product-brand a:hover {
	color: var(--main-color);
}

/* Başlık */
.product-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 500;
	text-align: left;
}

/* Marka */
.product-brand {
	font-size: 0.875rem;
	color: #402b57;
	font-weight: 600;
	text-align: left;
}

/* Çok uzunsa tek satıra düş */
.product-title.one-line {
	-webkit-line-clamp: 1;
}

/* Desktop biraz büyüsün */
@media (min-width: 992px) {
	.product-title { font-size: 15px; }
}


.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3px;
}

.price-box {
  flex-shrink: 0;   /* <<< önemli */
}

.old-price {
	font-size: 0.75rem;
	color: #999;
	text-decoration: line-through;
}

.new-price {
	font-size: 1rem;
	font-weight: 700;
	color: var(--main-color);
}

.add-to-cart {
  background: #706a82;
  color: #b7b3c1;
  border: none;
  border-radius: 4px;
  padding: 6px 7px;
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  overflow: hidden;
  width: 36px;
  justify-content: center;
  transition: width .25s ease, background .25s ease;
}


.add-to-cart:hover {
	width: 120px;
	background: #35294f;
}

.add-to-cart .text {
	max-width: 0;
	opacity: 0;
	white-space: nowrap;
	overflow: hidden;
	transition: max-width .25s ease, opacity .2s ease;
}

.add-to-cart:hover .text {
	max-width: 100px;
	opacity: 1;
	font-size: 0.85rem;
}

.add-to-cart:hover .cart-white-icon {
    display: none; /* Veya opacity: 0; */
}

.price-normal {
	color: #111; /* normal siyah */
}

.price-discount {
	color: #1ba94c; /* yeşil fırsat rengi */
}

@media (max-width: 768px) {
  .price-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .price-box {
    min-width: auto;
  }

  .add-to-cart {
    width: 100%;
    min-width: 100%;
    justify-content: center;
  }

  .add-to-cart .text {
    max-width: 100%;
    opacity: 1;
    font-size: 0.9rem;
  }

  .add-to-cart:hover {
    width: 100%;
  }
}

/* Content List*/

/* Content Swipwe*/
 /* Swiper Customization */
.swiper {
	padding: 1rem 0 3rem;
	margin: 0 -1rem;
}

.swiper-wrapper {
	padding: 0 1rem;
}

.swiper-slide {
	height: auto;
}

.swiper-pagination {
	bottom: 0 !important;
}

.swiper-pagination-bullet {
	background: #b7b3c1;
	opacity: 0.3;
	width: 8px;
	height: 8px;
	transition: all 0.3s;
}

.swiper-pagination-bullet-active {
	background: #3f2a56;
	opacity: 1;
	width: 24px;
	border-radius: 4px;
}

.swiper-button-prev,
.swiper-button-next {
    width: 44px !important;
    height: 44px !important;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(63, 42, 86, 0.15);
    
    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 0.3s;
}

/* Swiper'ın default oklarını gizle */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 0 !important;
    content: "" !important;
}

/* İstersen kendi ikonunu koy */
.swiper-button-next,
.swiper-button-prev {
    color: #3f2a56;
}

/* Hover */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #3f2a56;
    box-shadow: 0 6px 20px rgba(63, 42, 86, 0.25);
}

.swiper-button-next:hover svg *,
.swiper-button-prev:hover svg * {
    fill: #ffffff;
    stroke: #ffffff;
}

/* Eğer SVG kullanıyorsan */
.swiper-button-next svg,
.swiper-button-prev svg {
    width: 18px !important;
    height: 18px !important;
}
/* Content Swipwe*/

.wodacs-footer {
	margin-top: 60px;
	background-color: var(--color-primary);
	border-top: 3px solid var(--color-light);
	padding: 50px 0 0 0;
	font-size: 14px;
	color: #ddd;
}

.wodacs-footer h4 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 600;
}

.wodacs-footer h4 {
    position: relative;
    padding-bottom: 8px;
}

.wodacs-footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: #fff;
    opacity: 0.6;
}

/* UL reset */
.wodacs-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Bootstrap list-group override */
.wodacs-footer .list-group-item {
    background: transparent;
    border: 0;
    padding: 4px 0;
    color: #ccc;
}

/* Link style */
.wodacs-footer a {
    display: inline-block;
    color: #ccc;
    text-decoration: none !important;
    transition: 0.2s ease;
}

@media (hover: hover) {
    .wodacs-footer a:hover {
        color: #fff;
        transform: translateX(4px);
		opacity: 0.9;
    }
}

.wodacs-footer .footer-contact p,
.wodacs-footer .footer-contact address {
    margin-bottom: 6px;
    color: #ccc;
    font-size: 14px;
}

.wodacs-footer .footer-contact a {
    color: #ccc;
    text-decoration: none;
}

.wodacs-footer .footer-contact a:hover {
    color: #fff;
}

/* Address */
.wodacs-footer address {
    font-style: normal;
    line-height: 1.6;
    color: #ccc;
}

.social-icon {
	width: 24px;
	height: 24px;
	background-color: var(--color-light);
	display: inline-block;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.facebook-icon { 
	mask-image: url('svg/facebook.svg'); 
	-webkit-mask-image: url('svg/facebook.svg'); 
}

.instagram-icon { 
	mask-image: url('svg/instagram.svg'); 
	-webkit-mask-image: url('svg/instagram.svg'); 
}

.linkedin-icon { 
	mask-image: url('svg/linkedin.svg'); 
	-webkit-mask-image: url('svg/linkedin.svg'); 
}

.wodacs-footer .social a .social-icon {
	background-color: var(--color-light);
	transition: 0.2s;
}

.wodacs-footer .social a:hover .social-icon {
	background-color: #fff;
}

.payment-icon {
    width: 50px;
    height: 32px;
    background-color: var(--color-light);
    display: inline-block;
    vertical-align: middle;
	cursor: pointer;
}

.payment-icon:hover {
    background-color: #fff;
}

.visa-icon { 
	-webkit-mask: url('svg/visa.svg') no-repeat center;
	mask: url('svg/visa.svg') no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mastercard-icon {
	-webkit-mask: url('svg/mastercard.svg') no-repeat center;
	mask: url('svg/mastercard.svg') no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.troy-icon {
	-webkit-mask: url('svg/troy.svg') no-repeat center;
	mask: url('svg/troy.svg') no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.secure-icon {
	-webkit-mask: url('svg/secure.svg') no-repeat center;
	mask: url('svg/secure.svg') no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.copyright {
	background-color: var(--color-light);
	color: var(--color-primary);
	margin-top: 30px;
	padding: 0 0 0 0;
}

.noneserver {
	color: var(--color-primary);
}

.noneserver a {
	color: var(--color-primary);
}

.noneserver a:hover {
	color: #ffffff;
}

.noneservereffect {
	width: 16px;
	height: auto;
	margin-right: 4px;
	-webkit-animation-name: activity-anim;
	animation-name: activity-anim;
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	stroke-dashoffset: 1000;
	stroke-dasharray: 1000;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	animation-direction: reverse;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

@-webkit-keyframes activity-anim {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes activity-anim {
	to {
		stroke-dashoffset: 0;
	}
}

#scrollTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: #35294f;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    
    opacity: 0;
    visibility: hidden;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

#scrollTopBtn.show {
    opacity: 1;
    visibility: visible;
}

#scrollTopBtn i {
    margin-bottom: 4px; 
}

#scrollTopBtn:hover {
    background: #4a3a6f;
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* --- USER DROPDOWN FINAL --- */

/* 1. Kapsayıcı ve İkon Mesafe Ayarları */
.d-flex.gap-1.gap-md-3.align-items-center > .dropdown {
    display: flex;
    align-items: center;
    margin-right: 18px; /* Sepetle arasındaki orijinal boşluk */
}

/* 2. Dropdown Menü Genel Görünüm */
.dropdown-menu {
    display: none;
    border: none !important;
    background: #ffffff;
    border-radius: 12px !important;
    box-shadow: 0 15px 35px rgba(53, 41, 79, 0.15) !important;
    margin-top: 54px !important; /* İkonun altında açılma mesafesi */
    right: 0 !important;
    left: auto !important;
    min-width: 240px;
    z-index: 99999 !important; /* En üstte kalması için */
    overflow: visible !important;
}

/* 3. Buton ve Görünürlük Sorunlarını Çözen Kısım */
/* Giriş Yap butonunun kaybolmasını engelleyen zırhlı kurallar */
.dropdown-menu .btn-primary, 
.dropdown-menu .btn {
    position: relative !important;
    z-index: 100000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    border: none;
    font-weight: 600;
    padding: 10px;
}

/* 4. Header Kaydığında Kesilmeyi Önleme */
header.header-scrolled, 
header.header-scrolled .wodacs-header-wrapper {
    overflow: visible !important;
}

/* 5. Açılış Animasyonu */
.dropdown-menu.show {
    display: block;
    animation: dropdownSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* 6. Menü İçi Eleman Tasarımları */
.dropdown-item {
    font-size: 13px;
    color: var(--color-primary);
    padding: 10px 15px;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: rgba(var(--color-primary-rgb), 0.05);
    color: var(--color-primary);
    padding-left: 20px;
}

.dropdown-menu .btn-outline-dark {
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}

.no-caret::after {
    display: none !important;
}

/* 7. Mobil Uyumluluk */
@media (max-width: 991px) {
    .d-flex.gap-1.gap-md-3.align-items-center > .dropdown {
        margin-right: 10px; /* Mobilde ikonlar arası daraltma */
    }
    .dropdown-menu-end {
        right: -10px !important;
    }
}

/* --- Wodacs Özel Buton Yapıları --- */

/* 1. Ana Renk Buton (Koyu Mor) */
.btn-wodacs-main {
    background-color: #35294f !important;
    color: #ffffff !important;
    border: 2px solid #35294f !important;
    transition: all 0.3s ease;
}

.btn-wodacs-main:hover {
    background-color: #4a3a6f !important; /* Hafif açılmış mor */
    border-color: #4a3a6f !important;
    color: #ffffff !important;
}

/* 2. Ana Renk Outline (İçi Boş Mor) */
.btn-wodacs-outline-main {
    background-color: transparent !important;
    color: #35294f !important;
    border: 1px solid #35294f !important;
    transition: all 0.3s ease;
}

.btn-wodacs-outline-main:hover {
    background-color: #35294f !important;
    color: #ffffff !important;
}

/* 3. İkincil Renk Buton (Gri/Gümüş) */
.btn-wodacs-silver {
    background-color: #b7b3c1 !important;
    color: #35294f !important;
    border: 2px solid #b7b3c1 !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-wodacs-silver:hover {
    background-color: #a29eac !important; /* Bir tık koyu gri */
    border-color: #a29eac !important;
}

/* 4. İkincil Renk Outline (İçi Boş Gri) */
.btn-wodacs-outline-silver {
    background-color: transparent !important;
    color: #b7b3c1 !important;
    border: 2px solid #b7b3c1 !important;
    transition: all 0.3s ease;
}

.btn-wodacs-outline-silver:hover {
    background-color: #b7b3c1 !important;
    color: #35294f !important;
}

.min-w-220 {
	min-width: 220px;
}

.wd-alert {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-radius: 12px;
    background: #f9f9fb;
    position: relative;
    overflow: hidden;
    font-size: .95rem;
    color: #444;
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
}

.wd-alert::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    border-radius: 12px 0 0 12px;
}

/* SUCCESS */
.wd-alert-success {
    background: #f2faf6;
    color: #1f7a55;
}
.wd-alert-success::before {
    background: #2ecc71;
}

/* DANGER */
.wd-alert-danger {
    background: #fff5f5;
    color: #9b2c2c;
}
.wd-alert-danger::before {
    background: #e74c3c;
}

/* WARNING */
.wd-alert-warning {
    background: #fffaf2;
    color: #8a6d1d;
}
.wd-alert-warning::before {
    background: #f1c40f;
}

/* SECONDARY */
.wd-alert-secondary {
    background: #f4f4f7;
    color: #555;
}
.wd-alert-secondary::before {
    background: #b7b3c1;
}

.wd-alert i {
    margin-right: 10px;
    font-size: 1.2rem;
    opacity: .8;
}

/* Header Arama Form */
.header-search-wrapper {
    position: relative !important;
    /* Eğer formun genişliği belli değilse buraya bir sınırlama koyabilirsin */
}

.ajax-search-box {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important; /* width: 100% yerine left ve right 0 kullanmak daha garantidir */
    width: 100% !important; /* Kapsayıcısının (%100) dışına taşmaz */
    z-index: 9999;
    margin-top: 2px;
    display: none;
    background: #fff;
    border: 1px solid #35294f;
    border-radius: 8px 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    /* İçeriklerin taşmaması için */
    overflow: hidden; 
}

/* İki sütunlu yapının dar alanlarda bozulmaması için row'u sıkıştıralım */
.ajax-search-box .row {
    margin: 0 !important;
}
/* Ürün Satırı Genel Ayarlar */
.live-search-item {
    transition: background-color 0.15s ease-in-out;
    border-bottom: 1px solid #f1f1f1 !important;
}

/* Üzerine gelince hover efekti */
.live-search-item:hover {
    background-color: #f8f9fa !important;
}

/* Ürün adı hover olunca hafifçe belirginleşsin */
.live-search-item:hover .text-truncate {
    color: #000 !important;
}

/* Fiyat Alanı Konumlandırma */
.price-area {
    display: flex;
    align-items: center;
}

/* Kutunun genel taşma ve scroll ayarı */
.ajax-search-box {
    /*max-height: 450px;*/
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox için ince scroll */
}

/* Chrome/Safari için scrollbar tasarımı */
.ajax-search-box::-webkit-scrollbar {
    width: 4px;
}
.ajax-search-box::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 10px;
}
.btn-search {
    background: #35294f !important;
    border-color: #35294f !important;
    font-weight: 600;
    transition: 0.2s;
}

.btn-search:hover {
    background: #4b3a70 !important;
    border-color: #4b3a70 !important;
}

/* Tıklandığında */
.btn-search:active,
.btn-search.active {
    background: #2a2040 !important;
    border-color: #2a2040 !important;
}

/* Focus (mavi glow'u öldürür) */
.btn-search:focus,
.btn-search:focus-visible {
    background: #4b3a70 !important;
    border-color: #4b3a70 !important;
    box-shadow: 0 0 0 0.2rem rgba(75, 58, 112, 0.4) !important; 
}


/* Disabled durumu */
.btn-search:disabled,
.btn-search.disabled {
    background: rgba(53,41,79,0.3); /* aynı renk, şeffaflaştırılmış */
    border-color: rgba(53,41,79,0.3);
    cursor: not-allowed;
    color: rgba(255,255,255,0.7);
}

.btn-search:disabled:hover,
.btn-search.disabled:hover {
    background: rgba(53,41,79,0.3); /* hoverda değişmez */
    border-color: rgba(53,41,79,0.3);
}

/* Bildirimlerin içinde birikeceği ana kutu */
#wodacs-toast-container {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Bildirimler arasındaki mesafe */
}

/* Her bir bildirim kutusu */
.wodacs-toast-item {
    min-width: 250px;
    background-color: #35294f;
    color: #fff;
    padding: 15px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    animation: slideInRight 0.5s ease forwards;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Çıkış animasyonu */
.wodacs-toast-item.fade-out {
    animation: slideOutRight 0.5s ease forwards;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* Ana Sayfa Genel */
.site-bg-light { background-color: #fcfcfc; }
.letter-spacing-1 { letter-spacing: 1px; }

/* Ürün Kartı Modern */
.product-card-modern {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}
.card-img-wrapper {
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #fff;
}
.card-img-wrapper img {
    object-fit: contain;
    padding: 15px;
    transition: transform 0.5s ease;
}
.product-card-modern:hover .card-img-wrapper img {
    transform: scale(1.08);
}

/* Banner Hover Efekti */
.hover-zoom img {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.hover-zoom:hover img {
    transform: scale(1.05);
}
.banner-caption {
    background: linear-gradient(transparent, rgba(63,43,87,0.7));
}
.text-shadow { text-shadow: 0 2px 4px rgba(63,43,87,0.5); }


.badge-discount-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    /*filter: drop-shadow(0 3px 5px rgba(0,0,0,0.2));*/
}

.badge-discount-seal {
    width: 42px;
    height: 42px;
    background-color: #a198b5;
    /*background-color: #3e2955;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-weight: bold;
    line-height: 1.1;

    /* Senin verdiğin özel SVG Path verisi */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.8147 37.411C20.7183 36.6702 19.2817 36.6702 18.1853 37.411V37.411C16.5949 38.4856 14.4244 37.9506 13.5155 36.2601V36.2601C12.889 35.0946 11.6169 34.427 10.3018 34.5734V34.5734C8.39427 34.7858 6.72096 33.3033 6.70187 31.3841V31.3841C6.6887 30.0609 5.87261 28.8786 4.64011 28.3971V28.3971C2.85236 27.6987 2.05963 25.6084 2.93464 23.9002V23.9002C3.53788 22.7224 3.36472 21.2963 2.49716 20.2972V20.2972C1.23876 18.8479 1.50822 16.6287 3.07688 15.5227V15.5227C4.15834 14.7603 4.66777 13.417 4.3639 12.1292V12.1292C3.92313 10.2611 5.19305 8.42132 7.096 8.17103V8.17103C8.40792 7.99847 9.48325 7.04582 9.81268 5.76426V5.76426C10.2905 3.90536 12.27 2.86646 14.0713 3.52918V3.52918C15.3131 3.98607 16.708 3.64226 17.5953 2.6606V2.6606C18.8822 1.23668 21.1178 1.23668 22.4047 2.6606V2.6606C23.292 3.64226 24.6869 3.98607 25.9287 3.52918V3.52918C27.73 2.86646 29.7095 3.90536 30.1873 5.76426V5.76426C30.5168 7.04582 31.5921 7.99847 32.904 8.17103V8.17103C34.8069 8.42132 36.0769 10.2611 35.6361 12.1292V12.1292C35.3322 13.417 35.8417 14.7603 36.9231 15.5227V15.5227C38.4918 16.6287 38.7612 18.8479 37.5028 20.2972V20.2972C36.6353 21.2963 36.4621 22.7224 37.0654 23.9002V23.9002C37.9404 25.6084 37.1476 27.6987 35.3599 28.3971V28.3971C34.1274 28.8786 33.3113 30.0609 33.2981 31.3841V31.3841C33.279 33.3033 31.6057 34.7858 29.6982 34.5734V34.5734C28.3831 34.427 27.111 35.0946 26.4845 36.2601V36.2601C25.5756 37.9506 23.4051 38.4856 21.8147 37.411V37.411Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
	mask-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.8147 37.411C20.7183 36.6702 19.2817 36.6702 18.1853 37.411V37.411C16.5949 38.4856 14.4244 37.9506 13.5155 36.2601V36.2601C12.889 35.0946 11.6169 34.427 10.3018 34.5734V34.5734C8.39427 34.7858 6.72096 33.3033 6.70187 31.3841V31.3841C6.6887 30.0609 5.87261 28.8786 4.64011 28.3971V28.3971C2.85236 27.6987 2.05963 25.6084 2.93464 23.9002V23.9002C3.53788 22.7224 3.36472 21.2963 2.49716 20.2972V20.2972C1.23876 18.8479 1.50822 16.6287 3.07688 15.5227V15.5227C4.15834 14.7603 4.66777 13.417 4.3639 12.1292V12.1292C3.92313 10.2611 5.19305 8.42132 7.096 8.17103V8.17103C8.40792 7.99847 9.48325 7.04582 9.81268 5.76426V5.76426C10.2905 3.90536 12.27 2.86646 14.0713 3.52918V3.52918C15.3131 3.98607 16.708 3.64226 17.5953 2.6606V2.6606C18.8822 1.23668 21.1178 1.23668 22.4047 2.6606V2.6606C23.292 3.64226 24.6869 3.98607 25.9287 3.52918V3.52918C27.73 2.86646 29.7095 3.90536 30.1873 5.76426V5.76426C30.5168 7.04582 31.5921 7.99847 32.904 8.17103V8.17103C34.8069 8.42132 36.0769 10.2611 35.6361 12.1292V12.1292C35.3322 13.417 35.8417 14.7603 36.9231 15.5227V15.5227C38.4918 16.6287 38.7612 18.8479 37.5028 20.2972V20.2972C36.6353 21.2963 36.4621 22.7224 37.0654 23.9002V23.9002C37.9404 25.6084 37.1476 27.6987 35.3599 28.3971V28.3971C34.1274 28.8786 33.3113 30.0609 33.2981 31.3841V31.3841C33.279 33.3033 31.6057 34.7858 29.6982 34.5734V34.5734C28.3831 34.427 27.111 35.0946 26.4845 36.2601V36.2601C25.5756 37.9506 23.4051 38.4856 21.8147 37.411V37.411Z' fill='black'/%3E%3C/svg%3E");
    
}

/* Yazı Düzeni */
.badge-discount-seal .percent {
    font-size: 0.75rem;
	font-weight: normal;
}

.badge-discount-seal .text {
    font-size: 0.450rem;
	font-weight: normal;
    text-transform: uppercase;
}