/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap');

/* === YENİ "DARK ROAST" RƏNG PALİTRASI === */
:root {
--primary-color: #8D5B4C; /* Açıq qəhvəyi (əsas vurğu) */
--secondary-color: #5D4037; /* Orta-tünd qəhvəyi (hover üçün) */
--background-color: #3E2723; /* Tünd espresso (əsas fon) */
--surface-color: #4E342E; /* Tünd qəhvəyi (kartlar, modallar üçün) */
--text-color: #F4EAD2; /* Açıq bej (əsas mətn) */
--text-color-muted: #D8C4B6; /* Daha solğun mətn (footer linkləri) */
--border-color: #6D4C41; /* Tünd sərhəd xətti */
--white-color: #ffffff; /* Saf ağ (düymə mətnləri) */
--shadow: 0 5px 20px rgba(0, 0, 0, 0.3); /* Kölgəni tündləşdirdik */
--special-filter-bg: #8D5B4C; /* Xüsusi filtr fonu üçün */
--special-filter-text: #ffffff;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* ****************************************************** */
/* === DƏYİŞİKLİK: Üfüqi Sürüşməni Tamamilə Ləğv Etmək === */
html, body {
 overflow-x: hidden !important; /* Qüvvətləndirici əlavə */
}
/* ****************************************************** */

html {
scroll-behavior: smooth;
}

body {
font-family: 'Montserrat', sans-serif;
color: var(--text-color);
line-height: 1.6;
overflow-x: hidden; /* Mövcud xassə */
background-color: var(--background-color);
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%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236D4C41' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
 linear-gradient(to bottom, var(--background-color), #2a1a17);
/* Düzəliş edildi: Header 20px aşağı endirildiyi üçün padding-top artırıldı */
padding-top: 120px;
}

body.modal-open {
overflow: hidden;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.btn-main {
background-color: var(--primary-color);
color: var(--white-color);
padding: 15px 35px;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
box-shadow: var(--shadow);
}

.btn-main:hover {
background-color: #6d4638;
transform: translateY(-3px);
}

.btn-small {
padding: 10px 25px;
font-size: 0.9rem;
}

/* === YENİ KREATIV & YIĞCAM BAŞLIQLAR === */
.section-title {
text-align: center;
margin-bottom: 45px;
position: relative;
padding: 0 15px;
}

.section-title h2 {
font-family: 'Playfair Display', serif;
font-size: 1.75rem; /* Daha kiçik və zərif ölçü */
color: var(--text-color); /* Açıq bej rəng (oxunaqlılıq üçün) */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px; /* Hərflər arası geniş məsafə (Premium hiss) */
position: relative;
display: inline-block;
z-index: 1;
padding: 0 10px;
margin-bottom: 10px;
}

/* Arxa plandakı zərif qradient xətt */
.section-title h2::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 110%; /* Mətndən biraz geniş */
height: 1px;
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
z-index: -1;
opacity: 0.6;
transition: width 0.4s ease, opacity 0.4s ease;
}

/* Hover effekti: Xətt genişlənir */
.section-title:hover h2::before {
width: 150%;
opacity: 1;
}

/* Dekorativ Romb (Aşağıda) */
.section-title h2::after {
content: '◆';
display: block;
font-size: 0.7rem;
color: var(--primary-color);
margin-top: 5px;
line-height: 1;
opacity: 0.7;
transform: scale(1);
transition: transform 0.3s ease;
}

.section-title:hover h2::after {
transform: scale(1.5);
}

.section-title p {
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem; /* Kiçik və oxunaqlı */
color: var(--text-color-muted);
max-width: 550px;
margin: 10px auto 0;
line-height: 1.5;
font-style: italic; /* Zəriflik üçün kursiv */
}

.section {
padding: 80px 20px;
}
/* Loader-in əsas fonu - Tünd Qəhvəyi */
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3e2723; /* Tünd qəhvəyi rəng */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
}

/* Loqo və dairə qutusu */
.logo-animation {
    position: relative;
    width: 150px; /* Qutunun ölçüsü */
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-logo {
    width: 80px; /* Loqonun ideal kiçik ölçüsü */
    height: auto;
    z-index: 2;
    animation: pulseLogo 1.5s infinite ease-in-out;
}

.loader-circle {
    position: absolute;
    width: 120px; /* Loqonun ətrafındakı dairə */
    height: 120px;
    border: 3px solid rgba(255, 255, 255, 0.1); /* Solğun ağ dairə */
    border-top: 3px solid #d4a373; /* Qəhvəyi tona uyğun qızılımsı rəng */
    border-radius: 50%;
    animation: spinCircle 1s linear infinite;
}

.loader-text {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: #d4a373; /* Mətnin rəngi */
    text-align: center;
    margin-top: 20px;
    letter-spacing: 2px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Animasiyalar */
@keyframes spinCircle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulseLogo {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.1); opacity: 1; }
}

.loader-hidden {
    opacity: 0;
    visibility: hidden;
}
/* === HEADER VƏ MENYU === */
.main-header {
 background-color: rgba(78, 52, 46, 0.9);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 padding: 15px 0;
 position: fixed;
 /* Düzəliş: Yuxarıdan 20px boşluq */
 top: 20px;
 /* Düzəliş: Kənarlardan 20px boşluq */
 left: 20px;
 right: 20px;
 /* Əlavə: Maksimal eni məhdudlaşdırır və mərkəzə gətirir */
 max-width: 1200px;
 margin: 0 auto;
 /* Əlavə: Border radius qutu effekti verir */
 border-radius: 15px;
 z-index: 999;
 box-shadow: none;
 transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease, top 0.4s ease, border-radius 0.4s ease;
}

.main-header.scrolled {
 background-color: var(--surface-color);
 box-shadow: var(--shadow);
 padding: 10px 0;
 /* Düzəliş: Scroll zamanı yuxarıya daha yaxın olsun */
 top: 10px;
}

.navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 /* Düzəliş: Headerin daxilində sağ/sol boşluqlar */
 padding: 0 20px;
}

.nav-logo {
display: flex;
align-items: center;
gap: 15px;
text-decoration: none;
color: var(--primary-color);
}

.nav-logo img {
height: 70px;
width: auto;
}

.nav-logo span {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 1.2rem;
transition: font-size 0.3s ease;
}

.nav-links {
list-style: none;
display: flex;
align-items: center;
gap: 30px;
}

.nav-links a {
text-decoration: none;
color: var(--text-color);
font-weight: 600;
position: relative;
padding-bottom: 5px;
}

.nav-links>li>a.no-underline::after {
display: none;
}

.nav-links>li>a::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background-color: var(--primary-color);
transition: width 0.4s ease;
}

.nav-links>li>a:hover::after {
width: 100%;
}

.nav-links .dropdown a i {
font-size: 0.8em;
margin-left: 5px;
transition: transform 0.3s ease;
}

.btn-register {
background-color: transparent;
color: var(--primary-color) !important;
border: 2px solid var(--primary-color);
padding: 8px 20px;
border-radius: 50px;
transition: all 0.3s ease;
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
}

.btn-register:hover {
background-color: var(--primary-color);
color: var(--white-color) !important;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(141, 91, 76, 0.3);
}

.btn-register::after {
display: none !important;
}

.btn-register i {
font-size: 1em;
}

.dropdown {
position: relative;
}

.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
background-color: var(--surface-color);
min-width: 220px;
box-shadow: var(--shadow);
z-index: 100;
list-style: none;
border-radius: 10px;
padding: 10px 0;
opacity: 0;
visibility: hidden;
transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}

.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}

.dropdown-content li a {
padding: 12px 20px;
display: block;
color: var(--text-color);
font-weight: 500;
}

.dropdown-content li a:hover {
background-color: var(--secondary-color);
}

.hamburger {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--primary-color);
z-index: 1001;
}

/* === QEYDİYYAT MODALI === */
.register-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
z-index: 2000;
display: none;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.4s ease;
}

.register-modal-overlay.active {
display: flex;
opacity: 1;
}

.register-modal-content {
background: var(--surface-color);
padding: 40px;
border-radius: 15px;
box-shadow: var(--shadow);
width: 90%;
max-width: 500px;
position: relative;
transform: scale(0.9);
transition: transform 0.4s ease;
}

.register-modal-overlay.active .register-modal-content {
transform: scale(1);
}

.register-modal-content h3 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: var(--primary-color);
text-align: center;
margin-bottom: 10px;
}

.register-modal-content p {
text-align: center;
margin-bottom: 30px;
color: var(--text-color);
}

.register-modal-content .form-group {
margin-bottom: 20px;
}

.form-input,
.form-group input,
#customer-notes,
select.form-input {
width: 100%;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
background-color: var(--background-color);
color: var(--text-color);
}

select.form-input option {
background-color: var(--surface-color);
color: var(--text-color);
}

.register-modal-content .submit-btn {
width: 100%;
background-color: #25D366;
color: var(--white-color);
border: none;
padding: 12px;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}

.register-modal-content .submit-btn:hover {
background-color: #128C7E;
}

.register-form-result {
text-align: center;
margin-top: 15px;
font-size: 0.9rem;
font-weight: 500;
}

#course-promo-modal .modal-content {
max-width: 600px;
text-align: left;
}

#course-promo-modal h2 {
font-family: 'Playfair Display', serif;
color: var(--primary-color);
text-align: center;
margin-bottom: 25px;
font-size: 2.2rem;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}

#course-promo-modal .course-details {
line-height: 1.8;
}

#course-promo-modal .course-details p {
margin-bottom: 15px;
font-size: 1rem;
color: var(--text-color);
}

#course-promo-modal .course-details strong {
color: var(--primary-color);
margin-right: 8px;
min-width: 120px;
display: inline-block;
}

#course-promo-modal .course-details i {
color: var(--primary-color);
margin-right: 10px;
width: 20px;
text-align: center;
}

/* === HERO KARUSELİ === */
.hero-carousel {
position: relative;
height: 90vh;
overflow: hidden;
color: var(--white-color);
}

.hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
justify-content: flex-start;
text-align: left;
opacity: 0;
transition: opacity 1.5s ease;
z-index: 1;
}

.hero-slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 50%);
z-index: -1;
}

.hero-slide.active {
opacity: 1;
z-index: 2;
}

.hero-content {
padding: 0 0 7% 7%;
}

.hero-content h1 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
animation: fadeInDown 1s both;
}

.hero-content p {
font-size: 1.1rem;
margin: 15px 0 25px;
max-width: 450px;
animation: fadeInUp 1s 0.5s both;
}

.hero-content .btn-main {
animation: fadeInUp 1s 1s both;
background-color: transparent;
border: 2px solid var(--white-color);
padding: 10px 25px;
}

.hero-content .btn-main:hover {
background-color: rgba(255, 255, 255, 0.2);
border-color: var(--white-color);
transform: translateY(-3px);
}

.hero-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 30px;
z-index: 5;
transform: translateY(-50%);
}

.hero-nav button {
background-color: rgba(255, 255, 255, 0.3);
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.hero-nav button:hover {
background-color: rgba(255, 255, 255, 0.6);
}

.hero-dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
gap: 10px;
}

.hero-dot {
width: 12px;
height: 12px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s ease;
}

.hero-dot.active {
background-color: var(--white-color);
}

/* === HƏRƏKƏTLİ ARAKƏSMƏLƏR === */
.icon-divider-section,
.gif-divider-section {
padding: 25px 0;
overflow: hidden;
white-space: nowrap;
border-top: 1px dashed var(--border-color);
border-bottom: 1px dashed var(--border-color);
}

.icon-divider-section {
background-color: var(--surface-color);
}

.gif-divider-section {
background-color: var(--secondary-color);
}

.icon-divider-section .icon-scroll-track {
display: flex;
animation: scroll 40s linear infinite;
}

.gif-divider-section .icon-scroll-track {
display: flex;
animation: scroll 50s linear infinite;
}

.icon-divider-section .icon-scroll-track span {
font-size: 2rem;
margin: 0 30px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
color: var(--text-color);
}

.gif-divider-section .icon-scroll-track i {
font-size: 2.2rem;
margin: 0 40px;
color: var(--primary-color);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}

/* === ƏMƏKDAŞLAR BÖLMƏSİ === */
.partner-logo-section {
background-color: var(--background-color);
padding: 40px 0;
overflow: hidden;
white-space: nowrap;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
position: relative;
}

.partner-logo-section::before,
.partner-logo-section::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100px;
z-index: 2;
}

.partner-logo-section::before {
left: 0;
background: linear-gradient(to right, var(--background-color), transparent);
}

.partner-logo-section::after {
right: 0;
background: linear-gradient(to left, var(--background-color), transparent);
}

.partner-logo-section .partner-scroll-track {
display: flex;
align-items: center;
width: max-content;
animation: scroll 30s linear infinite;
}

.partner-logo {
display: inline-block;
margin: 0 40px;
flex-shrink: 0;
}

.partner-logo img {
max-height: 60px;
width: auto;
opacity: 0.7;
transition: opacity 0.3s ease, filter 0.3s ease;
filter: grayscale(80%) brightness(1.5);
}

.partner-logo img:hover {
opacity: 1;
filter: none;
}

/* === 3D MƏHSUL KARUSELİ === */
#product-category-carousel {
position: relative;
background-color: var(--background-color);
padding-top: 150px;
padding-bottom: 100px;
}

#product-category-carousel::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%238D5B4C' d='M 0 0 V 20 C 150 80, 200 80, 250 20 C 350 60, 400 60, 450 20 C 550 70, 600 70, 650 20 C 750 80, 800 80, 850 20 C 950 60, 1000 60, 1000 20 V 0 Z' /%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: top center;
background-size: 100% 100%;
z-index: 1;
}

.category-split-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}

.category-wrapper h3 {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
color: var(--primary-color);
text-align: center;
margin-bottom: 30px;
}

.carousel-3d-wrapper {
position: relative;
padding-bottom: 60px;
}

.carousel-3d-container {
width: 100%;
height: 450px;
position: relative;
perspective: 1200px;
margin: 0 auto;
}

.carousel-3d-scene {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
user-select: none;
}

.carousel-3d-panel {
position: absolute;
left: calc(50% - 150px);
top: 10px;
width: 300px;
height: 420px;
background: var(--surface-color);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
backface-visibility: hidden;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 2px solid var(--border-color);
}

.carousel-3d-panel img {
width: 100%;
height: 200px;
object-fit: cover;
}

.panel-content {
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}

.panel-content h3 {
font-family: 'Playfair Display', serif;
color: var(--primary-color);
font-size: 1.8rem;
margin-bottom: 10px;
}

.panel-content p {
font-size: 0.95rem;
margin-bottom: 20px;
flex-grow: 1;
color: var(--text-color);
}

.carousel-3d-nav {
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
gap: 20px;
}

.carousel-3d-nav button {
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow);
}

.carousel-3d-nav button:hover {
background-color: #6d4638;
transform: scale(1.1);
}

/* === ÜSTÜNLÜKLƏR === */
.advantages-section {
position: relative;
background-color: #3E2723;
padding: 80px 0 50px 0;
overflow: hidden;
}

.advantages-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #5D4037;
border-radius: 0 0 50% 50% / 0 0 40px 40px;
z-index: 0;
}

.advantages-section .container {
position: relative;
z-index: 1;
}

.advantages-header {
text-align: left;
margin-bottom: 30px;
}

.advantages-header p {
color: #E91E63;
font-size: 1rem;
font-weight: 600;
font-family: 'Playfair Display', serif;
}

.advantages-header h2 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: var(--white-color);
margin: 0;
}

.advantages-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
position: relative;
}

.advantages-grid::before {
content: '';
position: absolute;
top: 40px;
left: 12.5%;
right: 12.5%;
width: 75%;
border-bottom: 2px dashed #E91E63;
z-index: 0;
}

.advantage-item {
text-align: center;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
z-index: 1;
background-color: var(--surface-color);
border: 1px solid transparent;
}

.advantage-item:hover {
transform: translateY(-8px);
border: 1px solid var(--primary-color);
box-shadow: var(--shadow);
}

.advantage-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
z-index: 1;
border: 3px solid var(--white-color);
}

.advantage-icon img {
width: 40px;
height: 40px;
object-fit: contain;
}

.advantage-item h3 {
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
color: var(--text-color);
margin-bottom: 8px;
}

.advantage-item p {
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-color-muted);
}

/* KREATIV KART RƏNGLƏRİ */
.advantages-grid .advantage-item:nth-child(1) .advantage-icon {
background-color: #E0F2F1;
}

.advantages-grid .advantage-item:nth-child(2) .advantage-icon {
background-color: #EDE7F6;
}

.advantages-grid .advantage-item:nth-child(3) .advantage-icon {
background-color: #E3F2FD;
}

.advantages-grid .advantage-item:nth-child(4) .advantage-icon {
background-color: #FFF8E1;
}

/* === ƏN ÇOX SEÇİLƏNLƏR === */
#featured-products {
background: transparent;
padding-top: 100px;
padding-bottom: 100px;
position: relative;
overflow: hidden;
}

#featured-products .section-title p {
margin-bottom: 40px;
}

#featured-products .filter-buttons-wrapper {
margin-bottom: 20px;
}

/* Filtr düymələri */
.filter-btn {
background-color: var(--surface-color);
color: var(--text-color);
border: 2px solid var(--border-color);
padding: 10px 25px;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.filter-btn:hover {
background-color: var(--secondary-color);
border-color: var(--primary-color);
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(141, 91, 76, 0.2);
}

.filter-btn.active {
background-color: var(--primary-color);
color: var(--white-color);
border-color: var(--primary-color);
box-shadow: 0 8px 15px rgba(141, 91, 76, 0.25);
transform: translateY(-2px);
}

/* SƏVİYYƏ 1: Əsas filtr */
.filter-btn.main-filter-btn {
background-color: var(--surface-color);
color: var(--text-color-muted);
border: 2px solid var(--border-color);
}

.filter-btn.main-filter-btn.active {
background-color: var(--primary-color);
color: var(--white-color);
border-color: var(--primary-color);
}

/* SƏVİYYƏ 2: Alt filtr wrapper */
.filter-buttons-wrapper.sub-filter-wrapper {
min-height: 48px;
margin-bottom: 50px;
margin-top: 0;
}

.filter-buttons.sub-filters {
display: none;
animation: fadeIn 0.4s;
}

.filter-buttons.sub-filters.active {
display: flex;
}

.filter-buttons.sub-filters .filter-btn {
border: 1px solid var(--border-color);
background-color: var(--background-color);
color: var(--text-color-muted);
padding: 8px 20px;
font-size: 0.9rem;
}

.filter-buttons.sub-filters .filter-btn.active {
background-color: var(--secondary-color);
border-color: var(--primary-color);
color: var(--white-color);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}

#featured-products .carousel-control {
background-color: rgba(78, 52, 46, 0.6);
backdrop-filter: blur(4px);
border: 1px solid rgba(109, 76, 65, 0.5);
color: var(--text-color);
}

#featured-products .carousel-control:hover {
background-color: rgba(78, 52, 46, 0.9);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#featured-products .product-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.18);
}

/* === KARTLARIN ÜMUMİ STİLİ === */
.product-card,
.blog-card,
.faq-item,
.team-card {
background-color: var(--surface-color);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card {
text-align: center;
}

.product-card:hover,
.blog-card:hover,
.team-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.product-card img,
.blog-card img {
width: 100%;
object-fit: cover;
}

.product-card img {
height: 250px;
}

.blog-card img {
height: 200px;
}

.product-card-content {
padding: 20px;
}

.product-card-content h3 {
font-family: 'Playfair Display', serif;
color: var(--primary-color);
font-size: 1.5rem;
}

.product-card-content .price {
font-weight: 700;
font-size: 1.2rem;
margin: 10px 0;
color: var(--text-color);
}

.academy-section {
background-color: var(--secondary-color);
}

.academy-carousel .product-card-content {
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.academy-carousel .product-card-content p {
margin-bottom: 20px;
flex-grow: 1;
color: var(--text-color);
}

.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}

.blog-card.clickable-blog {
cursor: pointer;
}

.blog-card-content {
padding: 25px;
}

.blog-card-content .tag {
background-color: var(--secondary-color);
color: var(--primary-color);
padding: 5px 10px;
border-radius: 5px;
font-size: 0.8rem;
font-weight: 600;
display: inline-block;
margin-bottom: 15px;
}

.blog-card-content h4 {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
margin-bottom: 15px;
color: var(--text-color);
}

.blog-card-content a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
}

.faq-accordion {
max-width: 800px;
margin: 0 auto;
}

.faq-question {
width: 100%;
background: none;
border: none;
text-align: left;
padding: 20px;
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-color);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}

.faq-question::after {
content: '\f078';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
transition: transform 0.3s ease;
color: var(--text-color);
}

.faq-question.active::after {
transform: rotate(180deg);
}

.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
}

.faq-answer p {
padding: 0 20px 20px;
line-height: 1.7;
color: var(--text-color);
}

#team {
background-color: var(--secondary-color);
}

.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.team-card {
padding: 30px;
text-align: center;
}

.team-card img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 5px solid var(--border-color);
margin-bottom: 20px;
}

.team-card h3 {
font-family: 'Playfair Display', serif;
color: var(--primary-color);
font-size: 1.5rem;
}

.team-card p {
font-weight: 500;
color: var(--text-color);
margin-bottom: 15px;
}

.team-social a {
color: var(--primary-color);
margin: 0 10px;
font-size: 1.2rem;
transition: color 0.3s ease;
}

.team-social a:hover {
color: #6d4638;
}

/* === FOOTER === */
.main-footer {
background-color: var(--primary-color);
color: var(--white-color);
padding: 60px 0;
}

.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}

.footer-col h4 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
margin-bottom: 20px;
border-bottom: 2px solid var(--border-color);
padding-bottom: 10px;
display: inline-block;
}

.footer-col p,
.footer-col ul {
list-style: none;
padding: 0;
color: var(--text-color-muted);
}

.footer-col a {
color: var(--text-color-muted);
text-decoration: none;
transition: color 0.3s;
}

.footer-col a:hover {
color: var(--white-color);
}

.footer-col li {
margin-bottom: 10px;
}

.social-links a {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin-right: 10px;
color: var(--white-color);
transition: background-color 0.3s;
}

.social-links a:hover {
background-color: var(--white-color);
color: var(--primary-color);
}

.footer-bottom {
padding-top: 20px;
margin-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
text-align: center;
}

.footer-bottom .container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

.footer-bottom p {
font-size: 0.9rem;
color: var(--text-color-muted);
margin: 0;
opacity: 0.8;
}

.footer-bottom a {
color: var(--white-color);
text-decoration: none;
font-weight: 600;
}

.footer-bottom a:hover {
text-decoration: underline;
}

/* === KARUSEL ÜMUMİ STILLƏRİ === */
.carousel-wrapper {
position: relative;
padding: 0 40px;
}

.products-carousel {
display: flex;
gap: 30px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 20px 5px;
scrollbar-width: none;
-ms-overflow-style: none;
}

.products-carousel::-webkit-scrollbar {
display: none;
}

.products-carousel .product-card {
flex: 0 0 300px;
width: 300px;
}

.carousel-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(78, 52, 46, 0.8);
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
color: var(--text-color);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 10;
transition: background-color 0.3s;
}

.carousel-control:hover {
background-color: var(--surface-color);
}

.carousel-control.prev {
left: -10px;
}

.carousel-control.next {
right: -10px;
}

/* === VİDEO BÖLMƏSİ === */
#video-promo {
position: relative;
height: 70vh;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white-color);
overflow: hidden;
}

.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/senet.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
z-index: 1;
}

.video-promo-content {
position: relative;
z-index: 2;
}

#video-promo h2 {
font-family: 'Playfair Display', serif;
font-size: 3.5rem;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}

#video-promo p {
font-size: 1.2rem;
margin: 10px auto 40px;
max-width: 500px;
}

.play-button-wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
cursor: pointer;
}

.play-button {
width: 100%;
height: 100%;
background-color: rgba(141, 91, 76, 0.8);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 3px solid var(--white-color);
transition: transform 0.3s ease, background-color 0.3s ease;
}

.play-button-wrapper:hover .play-button {
transform: scale(1.1);
background-color: var(--primary-color);
}

.play-button i {
font-size: 2rem;
color: var(--white-color);
transform: translateX(3px);
}

.play-button-wrapper::before,
.play-button-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--primary-color);
z-index: -1;
animation: pulse 2s infinite ease-out;
}

.play-button-wrapper::after {
animation-delay: 1s;
}

/* === MODAL PƏNCƏRƏLƏR === */
.modal {
display: none;
position: fixed;
z-index: 1001;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
}

.modal.fade-in {
animation: fadeIn 0.4s;
}

.modal-content {
background-color: var(--surface-color);
margin: 5% auto;
padding: 20px;
border: 1px solid var(--border-color);
width: 90%;
max-width: 500px;
border-radius: 15px;
position: relative;
animation: slideIn 0.5s;
color: var(--text-color);
}

.close-btn {
color: #aaa;
position: absolute;
top: 15px;
right: 25px;
font-size: 35px;
font-weight: bold;
cursor: pointer;
}

.video-modal-content {
max-width: 1100px;
background: transparent;
border: none;
padding: 0;
}

#close-video-modal {
color: white;
font-size: 50px;
top: -15px;
right: 0px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
background: #000;
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#product-detail-modal .modal-content {
max-width: 800px;
padding: 30px;
}

.product-modal-layout {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 30px;
align-items: flex-start;
}

.product-modal-gallery {
display: flex;
flex-direction: column;
gap: 15px;
align-self: flex-start;
}

.product-modal-main-image {
border-radius: 15px;
overflow: hidden;
border: 1px solid var(--border-color);
background-color: var(--background-color);
position: relative;
}

.product-modal-main-image img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: opacity 0.3s ease-in-out;
}

.product-modal-thumbnails {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}

.thumbnail-img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
border: 2px solid var(--border-color);
opacity: 0.7;
transition: all 0.3s ease;
}

.thumbnail-img:hover {
opacity: 1;
border-color: var(--primary-color);
}

.thumbnail-img.active {
opacity: 1;
border-color: var(--primary-color);
box-shadow: 0 0 8px rgba(141, 91, 76, 0.5);
}

.product-modal-info {
display: flex;
flex-direction: column;
}

.product-modal-info h2 {
font-size: 2.5rem;
color: var(--text-color);
}

.product-modal-info .price {
font-size: 1.8rem;
margin: 10px 0 20px;
color: var(--primary-color);
}

.product-modal-info .description {
margin-bottom: 25px;
color: var(--text-color-muted);
}

.product-specs p {
margin-bottom: 10px;
color: var(--text-color);
}

.product-specs p i {
color: var(--primary-color);
}

.product-modal-buttons {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
}

.whatsapp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #25D366;
color: white !important;
padding: 12px 25px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: background-color 0.3s ease;
border: none;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
margin-top: 0;
}

.whatsapp-btn:hover {
background-color: #128C7E;
color: white !important;
}

.whatsapp-btn i {
font-size: 1.5rem;
margin-right: 10px;
}

/* === "ÖZ TORTUNU YARAT" === */
#create-your-cake main,
.cake-display-container,
#create-your-cake header {
text-align: center;
}

#create-your-cake header h1 {
font-family: 'Playfair Display', serif;
font-size: 3.5rem;
color: var(--primary-color);
margin-bottom: 10px;
}

#create-your-cake header p {
margin-bottom: 40px;
color: var(--text-color);
}

.cake-types {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 40px;
}

.cake-type-btn {
background-color: var(--surface-color);
color: var(--text-color);
border: 2px solid var(--border-color);
padding: 12px 25px;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}

.cake-type-btn:hover,
.cake-type-btn.active {
background-color: var(--primary-color);
color: var(--white-color);
border-color: var(--primary-color);
transform: translateY(-3px);
box-shadow: var(--shadow);
}

.cake-display-container {
position: relative;
margin-top: 30px;
}

#cake-carousel {
position: relative;
max-width: 450px;
margin: 0 auto 20px auto;
}

#main-cake-image {
width: 100%;
max-width: 450px;
height: 450px;
object-fit: cover;
border-radius: 20px;
box-shadow: var(--shadow);
cursor: pointer;
transition: transform 0.3s ease;
}

#main-cake-image:hover {
transform: scale(1.03);
}

#cake-carousel .carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(78, 52, 46, 0.7);
border: none;
border-radius: 50%;
width: 45px;
height: 45px;
font-size: 24px;
cursor: pointer;
color: var(--text-color);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 10;
}

#cake-carousel .carousel-arrow.prev {
left: -20px;
}

#cake-carousel .carousel-arrow.next {
right: -20px;
}

#image-modal {
display: none;
align-items: center;
justify-content: center;
}

#image-modal .modal-content {
background: transparent;
border: none;
width: auto;
max-width: 90vw;
max-height: 90vh;
padding: 0;
margin: 0;
box-shadow: none;
animation: none;
}

#modal-img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 15px;
}

#image-modal .close-btn {
color: white;
font-size: 50px;
top: 20px;
right: 35px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#customization-panel .modal-content {
max-width: 1100px;
width: 95%;
background-color: var(--background-color);
}

.customizer-layout {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
gap: 30px;
align-items: flex-start;
}

.options-col,
.summary-col {
background: var(--surface-color);
padding: 25px;
border-radius: 15px;
box-shadow: var(--shadow);
}

.options-col h3,
.summary-col h3 {
font-family: 'Playfair Display', serif;
color: var(--primary-color);
margin-bottom: 20px;
text-align: center;
font-size: 1.8rem;
}

.option-group {
margin-bottom: 25px;
}

.option-group label {
font-weight: 600;
display: block;
margin-bottom: 10px;
color: var(--text-color);
}

.option-group select {
width: 100%;
padding: 10px;
border-radius: 8px;
border: 1px solid var(--border-color);
background-color: var(--background-color);
color: var(--text-color);
}

.option-group select option {
background-color: var(--surface-color);
color: var(--text-color);
}

.weight-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

.weight-btn {
flex-grow: 1;
background: var(--surface-color);
color: var(--text-color);
border: 1px solid var(--border-color);
padding: 8px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}

.weight-btn:hover,
.weight-btn.active {
background: var(--primary-color);
color: var(--white-color);
border-color: var(--primary-color);
}

.builder-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 450px;
}

.cake-visual-container {
position: relative;
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}

.cake-layer {
position: absolute;
width: 80%;
max-width: 300px;
transition: all 0.5s ease-in-out;
opacity: 0;
}

.cake-layer.biscuit-bottom { transform: translateY(80px); z-index: 1; }
.cake-layer.filling-extra { transform: scale(0.9); z-index: 2; opacity: 0.8; }
.cake-layer.filling { transform: scale(0.9); z-index: 3; opacity: 0.8; }
.cake-layer.filling-2 { transform: scale(0.9); z-index: 4; opacity: 0.8; }
.cake-layer.biscuit-top { transform: translateY(-80px); z-index: 5; }
.cake-layer.visible { opacity: 1; }
.cake-layer.visible.biscuit-bottom { transform: translateY(80px); }
.cake-layer.visible.filling-extra { transform: translateY(40px) scale(0.85); opacity: 0.8; }
.cake-layer.visible.filling { transform: translateY(0px) scale(0.85); opacity: 0.8; }
.cake-layer.visible.filling-2 { transform: translateY(-40px) scale(0.85); opacity: 0.8; }
.cake-layer.visible.biscuit-top { transform: translateY(-80px); }

.biscuit-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
width: 100%;
margin-top: 20px;
}

.biscuit-controls .carousel-arrow {
position: static;
transform: none;
width: 40px;
height: 40px;
font-size: 20px;
background-color: var(--surface-color);
color: var(--text-color);
}

#biscuit-name {
font-weight: 600;
color: var(--primary-color);
font-size: 1.2rem;
text-align: center;
margin: 0;
}

#summary-list {
list-style: none;
min-height: 200px;
padding: 0;
}

#summary-list li {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--border-color);
color: var(--text-color);
}

.total-price-container {
margin-top: 20px;
padding-top: 15px;
border-top: 2px solid var(--primary-color);
text-align: center;
}

.total-price-container h4 {
font-size: 1.5rem;
color: var(--text-color);
}

.total-price-container span {
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
}

#customer-info-modal h2 {
font-family: 'Playfair Display', serif;
color: var(--primary-color);
text-align: center;
margin-bottom: 25px;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: var(--text-color-muted);
}

.btn-ai {
background-color: #4A90E2;
margin-top: 25px;
position: relative;
overflow: hidden;
animation: vibrate-jiggle 2s infinite ease-in-out;
}

.btn-ai:hover {
background-color: #357ABD;
}

.btn-ai i {
margin-right: 8px;
}

#ai-prompt {
width: 100%;
min-height: 80px;
padding: 10px;
border-radius: 8px;
border: 1px solid var(--border-color);
resize: vertical;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
background-color: var(--background-color);
color: var(--text-color);
}

.loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid var(--primary-color);
width: 50px;
height: 50px;
animation: spin 1.5s linear infinite;
margin: 20px auto;
}

.filter-buttons {
text-align: center;
margin-bottom: 40px;
margin-top: 30px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
}

/* === SƏBƏT (SHOPPING CART) === */
.cart-icon-wrapper {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
background-color: var(--primary-color);
color: var(--white-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.8rem;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
z-index: 1000;
transition: transform 0.3s ease;
}

.cart-icon-wrapper:hover {
transform: scale(1.1);
}

.cart-badge {
position: absolute;
top: -5px;
right: -5px;
background-color: #E74C3C;
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 0.8rem;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid var(--white-color);
display: none;
}

.cart-badge.visible {
display: flex;
}

.course-promo-btn {
position: fixed;
bottom: 100px;
right: 30px;
z-index: 1001;
background-color: #E74C3C;
color: var(--white-color);
width: 60px;
height: 60px;
padding: 0;
border-radius: 50%;
font-size: 1.8rem;
cursor: pointer;
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
animation: pulse-light 2.5s infinite;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
transition: transform 0.3s ease;
}

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

.cart-sidebar {
position: fixed;
top: 0;
right: -100%;
width: 400px;
max-width: 90vw;
height: 100%;
background-color: var(--surface-color);
z-index: 2000;
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);
transition: right 0.4s ease-in-out;
display: flex;
flex-direction: column;
}

.cart-sidebar.active {
right: 0;
}

.cart-header {
padding: 20px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}

.cart-header h3 {
font-family: 'Playfair Display', serif;
color: var(--primary-color);
font-size: 1.8rem;
}

.cart-header .close-cart-btn {
font-size: 1.5rem;
cursor: pointer;
color: var(--text-color);
}

.cart-items-container {
flex-grow: 1;
overflow-y: auto;
padding: 20px;
}

.cart-empty-message {
text-align: center;
margin-top: 50px;
color: var(--text-color-muted);
}

.cart-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px dashed var(--border-color);
}

.cart-item img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 10px;
}

.cart-item-info {
flex-grow: 1;
display: flex;
flex-direction: column;
}

.cart-item-info h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 5px;
color: var(--text-color);
}

.cart-item-info .price {
color: var(--primary-color);
font-weight: 700;
}

.cart-item-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}

.quantity-control {
display: flex;
align-items: center;
border: 1px solid var(--border-color);
border-radius: 20px;
}

.quantity-control button {
background: none;
border: none;
cursor: pointer;
padding: 5px 10px;
font-size: 1rem;
color: var(--primary-color);
}

.quantity-control span {
padding: 0 10px;
font-weight: 600;
color: var(--text-color);
}

.remove-item-btn {
background: none;
border: none;
color: #E74C3C;
cursor: pointer;
font-size: 1.2rem;
}

.cart-footer {
padding: 20px;
border-top: 2px solid var(--primary-color);
}

.cart-total {
display: flex;
justify-content: space-between;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 20px;
color: var(--text-color);
}

.cart-total span:last-child {
color: var(--primary-color);
font-size: 1.4rem;
}

.checkout-btn {
width: 100%;
padding: 15px;
font-size: 1.1rem;
}

/* === KEYFRAMES === */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from { transform: translateY(-50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-50px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(50px); }
to { transform: translateY(0); opacity: 1; }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.8); opacity: 0; }
}
@keyframes pulse-light {
0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
70% { box-shadow: 0 0 0 20px rgba(231, 76, 60, 0); }
100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}
@keyframes vibrate-jiggle {
0% { transform: scale(1); }
10% { transform: scale(1.04) rotate(-2deg); }
20% { transform: scale(1.04) rotate(2deg); }
30% { transform: scale(1.04) rotate(-2deg); }
40% { transform: scale(1) rotate(0); }
100% { transform: scale(1) rotate(0); }
}

/* === MOBİL ADAPTASİYA === */
@media (max-width: 992px) {
 /* Düzəliş: Headerin mobil görünüşdə də kənarlardan boşluq buraxması */
 .main-header {
  left: 10px;
  right: 10px;
  top: 10px; /* Mobildə daha az yuxarı boşluq */
  max-width: none;
 }
 .main-header.scrolled {
  /* Scroll zamanı tam yuxarıya bitişsin */
  top: 0;
  left: 0;
  right: 0;
  border-radius: 0;
 }
 .navbar {
  padding: 0 10px; /* Navbar daxilində kiçik padding */
 }

.nav-logo { gap: 20px; }
.nav-logo img { height: 50px; }
.nav-logo span { font-size: 1rem; }
.nav-links {
 flex-direction: column;
 position: fixed;
 top: 0;
 right: -100%;
 width: 300px;
 max-width: 80%;
 height: 100vh;
 background-color: var(--surface-color);
 padding-top: 100px;
 align-items: flex-start;
 transition: right 0.4s ease-in-out;
 box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
 gap: 0;
}
.nav-links.active { right: 0; }
.nav-links li { width: 100%; text-align: left; }
.nav-links li a { display: block; padding: 15px 30px; width: 100%; }
.nav-links .btn-register { margin: 15px 30px; text-align: center; display: block; }
.hamburger { display: block; }
.dropdown:hover .dropdown-content { display: none; }
.dropdown.active .dropdown-content { display: block; max-height: 500px;}
.dropdown-content {
 position: static;
 background-color: var(--background-color);
 box-shadow: none;
 padding: 0;
 border-radius: 0;
 min-width: auto;
 max-height: 0;
 overflow: hidden;
 opacity: 1;
 transform: none;
 transition: max-height 0.4s ease-out;
 visibility: visible;
}
.dropdown.active>a i { transform: rotate(180deg); }
.dropdown-content li { text-align: right; }
.dropdown-content li a { padding: 10px 45px; color: var(--text-color); font-weight: 500; }
.category-split-container { grid-template-columns: 1fr; gap: 60px; }
.team-grid { grid-template-columns: repeat(2, 1fr); }
.customizer-layout {
 grid-template-columns: 1fr 1.5fr;
 grid-template-areas:
 "options builder"
 "summary summary";
}
.options-col { grid-area: options; }
.builder-col { grid-area: builder; }
.summary-col { grid-area: summary; }
.advantages-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
.advantages-grid::before { display: none; }
}

@media (max-width: 768px) {
/* BAŞLIQLARIN MOBİL VERSİYASI */
.section-title h2 {
 font-size: 1.35rem; /* Mobildə daha kiçik */
 letter-spacing: 1.5px;
}
.section-title p {
 font-size: 0.85rem;
}

.hero-content { padding: 0 0 12% 5%; }
.hero-content h1 { font-size: 1.9rem; }
.hero-content p { font-size: 0.9rem; }
.hero-slide { background-position: right center; }
.hero-nav { padding: 0 15px; }
.hero-nav button { width: 40px; height: 40px; font-size: 18px; }
.filter-buttons-wrapper {
 overflow-x: auto;
 scrollbar-width: none;
 -ms-overflow-style: none;
 padding-bottom: 15px;
 margin-left: -20px;
 margin-right: -20px;
 padding-left: 20px;
 padding-right: 20px;
}
.filter-buttons-wrapper::-webkit-scrollbar { display: none; }
.filter-buttons {
 flex-wrap: nowrap;
 width: max-content;
 justify-content: flex-start;
 gap: 10px;
 margin-bottom: 0;
}
.filter-btn { flex-shrink: 0; }
.carousel-3d-container { height: 400px; perspective: 800px; }
.carousel-3d-panel { width: 240px; height: 360px; left: calc(50% - 120px); }
.carousel-3d-panel img { height: 150px; }
.panel-content h3 { font-size: 1.5rem; }
.team-grid {
 display: flex;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 padding-bottom: 20px;
 scrollbar-width: none;
}
.team-card { flex: 0 0 80%; scroll-snap-align: center; margin-right: 20px; }
.team-grid::-webkit-scrollbar { display: none; }
.carousel-wrapper { 
    padding: 0; 
}
.carousel-control { display: none; }
.products-carousel .product-card { flex: 0 0 80%; width: 80%; }
.product-modal-layout { grid-template-columns: 1fr; }
#product-detail-modal .modal-content { max-height: 85vh; overflow-y: auto; }
#create-your-cake header h1 { font-size: 2.5rem; }
.cake-type-btn { padding: 10px 20px; font-size: 0.9rem; flex-shrink: 0; }
.customizer-layout {
 grid-template-columns: 1fr;
 grid-template-areas:
 "builder"
 "options"
 "summary";
}
#customization-panel .modal-content { height: 95vh; overflow-y: auto; }
.cake-carousel-wrapper {
 overflow-x: auto;
 scrollbar-width: none;
 -ms-overflow-style: none;
 padding-bottom: 15px;
}
.cake-carousel-wrapper::-webkit-scrollbar { display: none; }
.cake-types { flex-wrap: nowrap; width: max-content; gap: 10px; margin-bottom: 0; }
.advantages-header { text-align: center; }
.advantages-scroll-wrapper {
 overflow: hidden;
 -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
 mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
 margin: 0 -20px;
 padding: 0 20px;
}
.advantages-grid {
 grid-template-columns: none;
 display: flex;
 width: max-content;
 gap: 20px;
 animation: scroll 30s linear infinite;
 padding-bottom: 10px;
}
.advantages-grid::before { display: none; }
.advantage-item { flex-shrink: 0; width: 280px; padding: 20px; margin-bottom: 0; }
.advantage-item:not(:last-child)::after { display: none; }

.filter-buttons-wrapper.main-filter-wrapper { margin-bottom: 10px; }
.filter-buttons-wrapper.sub-filter-wrapper { margin-bottom: 40px; min-height: 44px; }
    
    /* ****************************************************** */
    /* === YENİ ƏLAVƏ: Məhsul Karuselini Tam Kənara Yapışdırmaq === */
    #featured-products .container {
        /* Featured products konteynerinin kənar boşluğunu ləğv edir */
        padding-left: 0;
        padding-right: 0;
    }

    .products-carousel {
        /* Karuselin öz daxili paddingini ləğv edir ki, kənara yapışsın */
        padding-left: 0;
        padding-right: 0;
        /* Və ya kənarda bir az boşluq saxlamaq üçün */
        /* padding: 20px 10px; kimi də saxlanıla bilər, lakin sıfır tələb olunur */
    }
    
    /* Kartlar arasındakı boşluğu tənzimləmək üçün, əgər kənarda bitişmirsə */
    .products-carousel .product-card {
        /* Birinci kartın soldan, sonuncu kartın sağdan boşluğunu ləğv edir */
        margin-left: 10px; /* Əgər kənar kartın başlanğıcda bir boşluğu varsa */
    }
    .products-carousel .product-card:first-child {
        margin-left: 20px; /* Başlanğıcda kənar boşluq verib */
    }
    .products-carousel .product-card:last-child {
        padding-right: 20px; /* Sona doğru sürüşmə boşluğu verir */
    }
    /* Mən Sizin mövcud products-carousel padding: 20px 5px; dəyərini qoruyub 
       konteyneri sıfırlamaqla kifayətlənirəm. Əgər problem qalarsa, 
       products-carousel-in daxilindəki padding-i yoxlamaq lazımdır. */
    /* ****************************************************** */
}