@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&display=swap');

/* PSFournier Std kaldırıldı, yerine Cormorant Garamond kullanılıyor */

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

:root {
    --header-height: 80px; /* Desktop: padding 20px top + 20px bottom + logo 40px */
    --header-height-mobile: 60px; /* Mobil: padding 15px top + 15px bottom + logo 30px */
    
    /* Stellar Carousel Variables */
    --space-blue: #0a1a2f;
    --cosmic-purple: #6c3fd1;
    --glass-accent: #aee1f9;
    --glass-bg: rgba(20, 30, 50, 0.7);
    --gradient: linear-gradient(135deg, #0a1a2f 0%, #6c3fd1 100%);
    --font-main: "Orbitron", Arial, sans-serif;
    --transition: 0.3s cubic-bezier(0.77, 0, 0.18, 1);
    --glow: 0 0 16px var(--glass-accent), 0 0 32px var(--cosmic-purple);
    --slide-width: 270px;
    --slide-height: 480px; /* 9:16 oranı için (270 * 16/9 = 480) */
    --carousel-radius: 420px;
    --carousel-perspective: 1200px;
    --starfield-layers: 3;
    --particle-count: 48;
    --cursor-size: 32px;
    --nav-size: 48px;
    --dot-size: 16px;
    --loading-bg: #0a1a2f;
    --loading-fg: var(--glass-accent);
    --stellar-gold: #ffd700;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    overflow-x: hidden;
    overflow-y: auto; /* Scroll aktif */
    background-color: #fff;
    color: #790c0c;
    /* Scroll bar gizli ama scroll işlevi aktif */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE ve Edge */
}

body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

html {
    overflow-x: hidden;
    overflow-y: auto; /* Scroll aktif */
    /* Scroll bar gizli ama scroll işlevi aktif */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE ve Edge */
}

html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

body.splash-active {
    overflow: hidden; /* Animasyon sırasında scroll engellenir */
}


/* Başlangıç Animasyonu (Perde) - Ayrı element */
.initial-curtain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%; /* Genişlik taşmasını önle */
    height: 100vh;
    background-color: #ffffff;
    z-index: 10000;
    animation: curtainUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
    overflow: hidden;
    box-sizing: border-box; /* Padding/margin taşmasını önle */
    display: flex;
    align-items: center;
    justify-content: center;
}

.initial-curtain-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    animation: logoShrink 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
}

.initial-curtain-logo img {
    max-width: 300px;
    width: auto;
    height: 300px;
    object-fit: contain;
    animation: logoImageShrink 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
}

@keyframes logoShrink {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.133); /* 40px / 300px = 0.133 */
    }
}

@keyframes logoImageShrink {
    0% {
        height: 300px;
        max-width: 300px;
    }
    100% {
        height: 40px;
        max-width: 40px;
    }
}

@keyframes curtainUp {
    0% {
        top: 0;
        height: 100vh;
    }
    100% {
        top: -100vh; /* Yukarı çıkıp kaybolsun - top: 0'a kadar çıksın */
        height: 100vh;
    }
}

/* Header Styles - Baştan görünür, transparan */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: transparent;
    overflow: visible;
    height: auto;
    display: block;
    transition: background-color 0.3s ease;
}

.header.scrolled {
    background-color: #ffffff;
}

/* Desktop'ta header görünür */
@media (min-width: 1367px) {
    .header {
        /* Animasyon kaldırıldı - header baştan görünür */
    }
    
    /* Desktop'ta header container - animasyon kaldırıldı */
    .header-container {
        /* Animasyon kaldırıldı - baştan normal görünüm */
    }
    
    /* Desktop'ta logo - animasyon kaldırıldı */
    .header-logo {
        /* Animasyon kaldırıldı - baştan normal görünüm */
    }
    
    /* Web görünümünde videoların boyutunu %50 küçült */
    .carousel-video {
        width: 100% !important; /* %50'den %25'e (yarı yarıya küçültüldü) */
        height: auto !important; /* Yükseklik de yarı yarıya */
       
    }
    
    
}


/* headerCurtainUp animasyonu kaldırıldı - artık initial-curtain kullanılıyor */

.header-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    /* Animasyon kaldırıldı - baştan normal görünüm */
}

/* Header Left Controls - Hamburger ve Search yan yana */
.header-left-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    order: -1;
    margin-right: auto;
}

.header-container .hamburger-menu {
    margin: 0; /* Margin'i kaldırdık çünkü artık header-left-controls içinde */
}

/* Search Icon - Hamburger menünün yanında */
.search-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; /* Başlangıçta beyaz (transparan header) */
    transition: color 0.3s ease, transform 0.3s ease;
    z-index: 1001;
    position: relative;
}

.search-icon:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.search-icon svg {
    width: 20px;
    height: 20px;
}

/* Header transparan iken search icon beyaz */
.header:not(.scrolled) .search-icon {
    color: #ffffff;
}

/* Header scroll sonrası (400px'den sonra) search icon siyah */
.header.scrolled .search-icon {
    color: #000000;
}

/* Search Container - Yumuşak kayarak açılan */
.search-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    z-index: 10000;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding-top: 80px;
}

.search-container.active {
    transform: translateY(0);
}

.search-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

.search-input {
    flex: 1;
    padding: 15px 20px;
    font-size: 18px;
    border: 2px solid #e0e0e0;
    border-radius: 30px;
    outline: none;
    transition: border-color 0.3s ease;
    font-family: inherit;
}

.search-input:focus {
    border-color: #474747;
}

.search-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: color 0.3s ease, transform 0.3s ease;
}

.search-close:hover {
    color: #000;
    transform: rotate(90deg);
}

.search-results {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 20px;
    max-height: 400px;
    overflow-y: auto;
}

.search-result-item {
    padding: 15px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.search-result-item:hover {
    background-color: #f0f0f0;
    transform: translateX(5px);
}

.search-result-item h3 {
    font-size: 16px;
    color: #474747;
    margin-bottom: 5px;
    font-weight: 500;
}

.search-result-item p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.search-result-item .highlight {
    background-color: #fff3cd;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
}

.search-no-results {
    padding: 40px 20px;
    text-align: center;
    color: #666;
    font-size: 16px;
}

/* Mobile Search Styles */
@media screen and (max-width: 768px) {
    
    .search-container {
        padding-top: 60px;
    }
    
    .search-wrapper {
        padding: 15px 20px;
        gap: 10px;
    }
    
    .search-input {
        padding: 12px 15px;
        font-size: 16px;
    }
    
    .search-results {
        padding: 0 20px 15px;
        max-height: 300px;
    }
    
    .search-result-item {
        padding: 12px;
    }
    
    .search-result-item h3 {
        font-size: 14px;
    }
    
    .search-result-item p {
        font-size: 13px;
    }
}

/* containerShrink animasyonu kaldırıldı */

/* Hamburger Menu - Başlangıçta gizli */
.hamburger-menu {
    width: 20px;
    height: 12px; /* İki çizgi için yükseklik azaltıldı */
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    z-index: 1001;
    position: relative;
    opacity: 0;
    animation: hamburgerFadeIn 0.6s ease-in-out 2s forwards;
    margin-left: 0; /* Sol tarafa al */
    margin-right: auto;
}

@keyframes hamburgerFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.hamburger-menu span {
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: #000;
    transition: all 0.3s ease;
    transform-origin: center;
}

.hamburger-menu:hover span {
    background-color: #666;
}

/* Header transparan iken hamburger menü beyaz */
.header:not(.scrolled) .hamburger-menu span {
    background-color: #fff;
}

.header:not(.scrolled) .hamburger-menu:hover span {
    background-color: rgba(255, 255, 255, 0.7);
}

/* Header Logo - Baştan normal görünüm
   Instagram / in-app WebView: min() desteklenmezse tüm max-width kuralı düşebilir; önce 78vw yedeği.
   Bazı WebView'lar sadece max-height ile intrinsic genişliği sınırlamaz — img için sabit height + max-width kutu. */
.header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 28px;
    max-width: 78vw; /* min() yok veya hatalıysa */
    max-width: min(78vw, 300px);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
    z-index: 10002;
    box-sizing: border-box;
}

.header-logo img {
    display: block;
    box-sizing: border-box;
    width: auto;
    max-width: 78vw;
    max-width: min(78vw, 300px);
    height: 28px;
    max-height: 28px;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    object-position: center center;
    transition: max-height 1s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-user-drag: none;
}

.header-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: 100%;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.header-spacer {
    width: 20px; /* Hamburger menu genişliği ile eşit */
}

/* Header Language Selector */
.header-language {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10003;
    pointer-events: auto;
    margin-left: auto;
}

.language-select {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.header.scrolled .language-select {
    color: #000000;
    border-color: rgba(0, 0, 0, 0.3);
    background: #ffffff;
}

.about-page .header:not(.scrolled) .language-select {
    color: #000000;
    border-color: rgba(0, 0, 0, 0.35);
}

.language-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}

.language-select option {
    color: #000000;
}

/* RTL support for Arabic */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .nav-list,
html[dir="rtl"] .nav-menu {
    text-align: right;
}

html[dir="rtl"] .nav-menu {
    left: auto;
    right: 0;
    transform: translateX(100%);
}

html[dir="rtl"] .nav-menu.active {
    transform: translateX(0);
}

html[dir="rtl"] .nav-close {
    right: auto;
    left: 30px;
}

html[dir="rtl"] .header-container {
    direction: rtl;
}

html[dir="rtl"] .header-left-controls {
    order: 2;
    position: absolute;
    right: 40px;
    left: auto;
    margin: 0;
}

html[dir="rtl"] .header-language {
    order: 0;
    position: absolute;
    left: 40px;
    right: auto;
    margin: 0;
}

html[dir="rtl"] .header-logo {
    order: 1;
}

/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
}

/* Quote Section - Hero ile Carousel arası */
.quote-section {
    width: 100%;
    height: 300px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    opacity: 0;
    transition: opacity 2.5s ease;
    
}

.quote-section.visible {
    opacity: 1;
}

.quote-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.quote-author {
    color: #474747;
    font-size: 24px;
    font-weight: 300;
    font-family: 'Cormorant Garamond', serif;
    text-align: center;
    margin: 0;
}

.quote-text {
    color: #000000;
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
    margin: 0;
    font-style: italic;
}

.quote-logo {
    height: 28px; /* .header-logo img ile aynı */
    max-height: 28px;
    width: auto;
    max-width: min(78vw, 300px);
    object-fit: contain;
    display: block;
    margin-top: 32px;
}

/* Quote Section Animasyon - Tüm metin için */
.quote-author,
.quote-text {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.quote-section.visible .quote-author,
.quote-section.visible .quote-text {
    opacity: 1;
}

/* Kurucu tanıtım — hero sonrası */
.founder-intro-section {
    width: 100%;
    background-color: #ffffff;
    padding: 56px 40px 64px;
}

.founder-intro-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 48px 56px;
    align-items: center;
}

.founder-intro-media {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.founder-intro-video {
    width: 100%;
    aspect-ratio: 9 / 16;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    background-color: #f4f4f4;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.founder-intro-content {
    min-width: 0;
}

.founder-intro-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 300;
    letter-spacing: 0.06em;
    color: #474747;
    margin: 0 0 24px;
    line-height: 1.15;
}

.founder-intro-body {
    color: #333;
    font-size: 17px;
    line-height: 1.75;
}

.founder-intro-body p {
    margin: 0 0 1.15em;
}

.founder-intro-body p:last-child {
    margin-bottom: 0;
}

.founder-intro-body strong {
    font-weight: 600;
    color: #1a1a1a;
}

@media screen and (max-width: 900px) {
    .founder-intro-section {
        padding: 40px 24px 48px;
    }

    .founder-intro-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .founder-intro-content {
        order: 1;
    }

    .founder-intro-media {
        order: 2;
        max-width: min(100%, 280px);
    }

    .founder-intro-title {
        text-align: center;
        margin-bottom: 20px;
    }

    .founder-intro-body {
        font-size: 16px;
        text-align: left;
    }
}

@media screen and (max-width: 480px) {
    .founder-intro-section {
        padding: 32px 16px 40px;
    }

    .founder-intro-media {
        max-width: min(100%, 240px);
    }

    .founder-intro-body {
        font-size: 15px;
        line-height: 1.7;
    }
}

/* Catalog Title Section - Quote ile Carousel arası */
.catalog-title-section {
    width: 100%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 40px;
}

.catalog-title-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalog-title {
    color: #474747 !important; /* Başlık rengi */
    font-size: 48px;
    font-weight: 300; /* İnce, zarif */
    font-family: 'Cormorant Garamond', serif; /* Zarif serif font */
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 4px; /* Daha zarif görünüm için artırıldı */
}

/* Quote Section Responsive */
@media screen and (max-width: 768px) {
    .quote-section {
        height: 200px;
        padding: 0 20px;
    }
    
    .quote-author {
        font-size: 20px;
    }
    
    .quote-text {
        font-size: 16px;
        line-height: 1.5;
    }

    .quote-text br {
        display: none;
    }
    
    .catalog-title-section {
        padding: 30px 20px;
    }
    
    .catalog-title {
        font-size: 32px;
        letter-spacing: 3px;
    }
}

@media screen and (max-width: 440px) {
    .quote-section {
        height: 200px;
        padding: 0 15px;
    }
    
    .quote-author {
        font-size: 18px;
    }
    
    .quote-text {
        font-size: 14px;
        line-height: 1.4;
    }
    
    .catalog-title-section {
        padding: 25px 15px;
    }
    
    .catalog-title {
        font-size: 24px;
        letter-spacing: 2px;
    }
}


.hero-split {
    display: flex;
    width: 100%;
    height: 100%;
}

.hero-video-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    height: 100%;
    background-color: #000000;
}

.hero-left {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.5);
    transition: opacity 1.5s ease-in-out;
    opacity: 1;
}

.hero-video.fade-out {
    opacity: 1;
}

/* Bulutgiris video için ekrana sığdır */
#videoRight {
    object-fit: cover !important;
    object-position: top center;
}

/* Bulutgiris video fallback image için de üst kısmını göster */
#videoRight + .fallback-image,
.hero-right .fallback-image {
    object-position: top center;
}

.hero-video-container img,
.hero-video-container .fallback-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: none; /* Varsayılan olarak gizli, video hata verirse gösterilecek */
    filter: brightness(0.5);
}

/* Hero Logo - Ortada beyaz */
.hero-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}


.hero-logo img {
    max-width: 157.5px; /* %30 küçültüldü (225px * 0.7 = 157.5px) */
    width: auto;
    height: auto;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
}

.hero-logo.fade-out {
    opacity: 0;
    transform: translate(-50%, -60%);
}

@media (max-width: 768px) {
    .hero-logo {
        display: none; /* Ortadaki logo mobilde gizli */
    }
}



/* Carousel Section */
.carousel-section {
    display: flex;
    flex-direction: row; /* Web görünümünde yan yana */
    align-items: center; /* Videoya göre dikey ortalama */
    justify-content: space-between;
    height: auto;
    width: 100%;
    background-color: #ffffff; /* Beyaz arka plan */
    position: relative;
    overflow: hidden;
    gap: 0;
  
}

/* Sol taraf - Video */
.carousel-video-container {
    width:22%; /* Video genişliği */
    height: auto;
    aspect-ratio: 9 / 16; /* Video aspect ratio - 9:16 formatı */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    overflow: hidden;
    margin-bottom: 5px;
    z-index: 11; /* Kartların arkasında kalması için */
}

.carousel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-style: preserve-3d;
    transform: translateZ(0);
    border-radius: 20px;
    transition: transform 0.3s ease;
    filter: brightness(0.8);
}

/* Sağ taraf - İçerik Wrapper */
.carousel-content-wrapper {
    flex: 1;
    display: flex !important; /* Web görünümünde görünür olması için */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
   
    position: relative;
    z-index: 2; /* Video'nun üstünde görünmesi için */
    min-width: 0; /* Flex overflow için */
}

/* Başlık */
.products-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 20px;
    padding-top: 20px;
    text-align: center;
    color: #474747;
    position: relative;
    display: inline-block;
    overflow: hidden;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

/* Animasyon aktif olduğunda */
.products-title.animate {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

/* Parlama efekti - sürekli döngü */
.products-title.animate::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.6),
        transparent
    );
    animation: shineLoop 3s ease-in-out 1.5s infinite;
    pointer-events: none;
    filter: blur(2px);
}

@keyframes shineLoop {
    0% {
        left: -100%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    40% {
        left: 150%;
        opacity: 1;
    }
    50% {
        left: 150%;
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    90% {
        left: -100%;
        opacity: 1;
    }
    100% {
        left: -100%;
        opacity: 0;
    }
}

/* Carousel Wrapper - Yeni yapı için */
.carousel-content-wrapper .carousel-wrapper {
    width: 100% !important;
    overflow: visible !important; /* Kartlar hover ile yukarı kalkınca kesilmemesi için */
    position: relative !important;
    height: auto !important; /* Videoya göre otomatik yükseklik */
    display: flex !important; /* Kartları ortalamak için */
    align-items: center !important; /* Dikey ortalama */
    justify-content: center !important; /* Yatay ortalama */
    max-width: 100% !important;
    padding-top: 30px !important; /* Yukarı kalkan kartlar için alan */
    padding-bottom: 30px !important;
}

.carousel-content-wrapper .carousel-slider {
    display: flex !important; /* Web görünümünde görünür */
}

.carousel-content-wrapper .card-slider {
    display: block !important; /* Web görünümünde görünür */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Carousel Slider - Otomatik kaydırma */
.carousel-slider {
    display: flex;
    gap: 30px;
    width: fit-content;
    animation: slideLeft 30s linear infinite;
    will-change: transform;
    cursor: grab;
    /* transform: translateX(0); kaldırıldı - animasyon kendi transform'unu kullanıyor */
}

.carousel-slider:active {
    cursor: grabbing;
    animation-play-state: paused;
}

@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Kart genişliği: calc(22vw * 0.5) = 11vw, Gap: 30px */
        /* 8 kart için: (11vw + 30px) * 8 */
        /* İlk 8 kart kayar, klonlanmış 8 kart görünür, sonra animasyon başa döner */
        transform: translateX(calc(-1 * (11vw + 30px) * 8)); /* 8 kart için tam döngü (genişlik + gap) - ilk set bitince ikinci set görünür */
    }
}

/* Animasyonun kesintisiz çalışması için */
.carousel-slider {
    animation-iteration-count: infinite !important;
    animation-fill-mode: none !important;
    animation-delay: 0s !important;
}

/* Animasyonun başlangıçta çalışmasını garanti et */
.carousel-content-wrapper .carousel-slider {
    animation: slideLeft 30s linear infinite !important;
    animation-play-state: running !important;
    animation-iteration-count: infinite !important;
    animation-delay: 0s !important;
    animation-fill-mode: none !important;
}

/* Animasyonun hemen başlamasını garanti et - sayfa yüklendiğinde */
.carousel-slider {
    animation: slideLeft 30s linear infinite !important;
    animation-play-state: running !important;
    animation-iteration-count: infinite !important;
    animation-delay: 0s !important;
    animation-fill-mode: none !important;
    /* transform: translateX(0) !important; kaldırıldı - animasyon transform'u kullanıyor */
}

/* Sayfa yüklendiğinde animasyonun başlamasını garantile */
.carousel-content-wrapper .carousel-slider {
    animation: slideLeft 30s linear infinite !important;
    animation-play-state: running !important;
    animation-iteration-count: infinite !important;
    animation-delay: 0s !important;
    animation-fill-mode: none !important;
    /* transform: translateX(0) !important; kaldırıldı - animasyon transform'u kullanıyor */
}

/* Kartlar - Slider versiyonu */
.card-slider {
    flex: 0 0 auto; /* Videoya göre dinamik boyut */
    /* Video container width: 22vw, aspect-ratio: 9/16 */
    /* Video height = 22vw * 16/9 = 39.11vw */
    /* Kart width = video width / 2 = 11vw */
    /* Kart height = kart width * 16/9 = 11vw * 16/9 = 19.56vw (video height'ın yarısı: 39.11vw / 2 = 19.56vw) */
    width: calc(22vw * 0.5); /* Video genişliğinin yarısı */
    height: calc(22vw * 0.5 * 16 / 9); /* Kart genişliği * 16/9 (9:16 formatı için) */
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
    transform: translateY(0);
    aspect-ratio: 9 / 16; /* Kart aspect ratio - 9:16 formatı */
}

.card-slider:hover {
    transform: translateY(-20px); /* Y ekseninde yukarı yükselme */
    z-index: 10; /* Hover sırasında diğer kartların üstünde görünsün */
}

.card-slider .img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* PDF'li kartlar (0-7) - Yeni ön görseller */
.card-slider[data-index="0"] .img { background-image: url('images/facetemkatalogongorsel.jpg'); }
.card-slider[data-index="1"] .img { background-image: url('images/elastykatalogongorsel.jpg'); }
.card-slider[data-index="2"] .img { background-image: url('images/sticol-card.webp'); }
.card-slider[data-index="3"] .img { background-image: url('images/yourlinekatalogongorsel.jpg'); }
.card-slider[data-index="4"] .img { background-image: url('images/bellavitapdrn.jpg'); }
.card-slider[data-index="5"] .img { background-image: url('images/bellavitaaqua.jpg'); }
.card-slider[data-index="6"] .img { background-image: url('images/bioskin.jpg'); }
.card-slider[data-index="7"] .img { background-image: url('images/pinkbella.jpg'); }

/* Logo Slider - Kartların altında */
/* Katalog Banner - Logo Slider'ın üstünde */
.catalog-banner {
    width: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.catalog-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.catalog-banner-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 40px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
}

.catalog-banner-content {
    max-width: 1400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
}

.catalog-banner-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 300;
    letter-spacing: 2px;
    margin: 0;
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: left;
}

.catalog-banner-button {
    display: inline-block;
    padding: 15px 40px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: all 0.3s ease;
    width: fit-content;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.catalog-banner-button:hover {
    background-color: #000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.logo-slider-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 0; /* Kartların altında normal konumlandırma */
    padding: 40px 0; /* Üst ve alt boşluk */
}

.logo-slider {
    display: flex;
    gap: 40px;
    width: fit-content;
    animation: logoSlide 50s linear infinite;
    will-change: transform;
}

.logo-item {
    flex: 0 0 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.logo-item:hover {
    opacity: 1;
}

.logo-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

/* logoyazisiyah.png için küçük boyut */
.logo-item img[src*="logoyazisiyah"] {
    max-width: 60%;
    max-height: 60%;
}

/* Bellavita, Aileene ve Diamonds logoları için hizalama düzeltmesi */
.logo-item img[src*="bellavitapdrn"],
.logo-item img[src*="aileenelogo"],
.logo-item img[src*="diamondslogo"]
.logo-item img[src*="dermavline-"] {
    transform: translateY(-5px);
    position: relative;
}

.logo-item:hover img {
    filter: grayscale(0%);
}

@keyframes logoSlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-1 * (120px + 40px) * 24)); /* 24 item (ilk set) için tam döngü - 3 kez tekrar için */
    }
}

/* Eski carousel stilleri - sadece mobilde kullanılıyor, web görünümünde gizli */
.carousel-wrapper:not(.carousel-content-wrapper .carousel-wrapper) {
    display: none; /* Web görünümünde eski carousel gizli */
}

.carousel:not(.carousel-slider) {
    display: none; /* Web görünümünde eski carousel gizli */
}

.carousel:active {
    cursor: grabbing;
}

.carousel.dragging {
    animation-play-state: paused;
}

.cardb {
    display: grid;
    place-items: center;
    width: 152px; /* 190px'in %80'i */
    height: 270px; /* 338px'in %80'i - 9:16 oranı korunuyor */
    position: absolute;
    border-radius: 5px;
    overflow: hidden;
}

.cb1 {
    background-image: url('images/bolum5.png');
    background-size: cover;
    background-position: center;
}

.cb2 {
    background-image: url('images/bolum4.png');
    background-size: cover;
    background-position: center;
}

.cb3 {
    background-image: url('images/bolum3.png');
    background-size: cover;
    background-position: center;
}

.cb4 {
    background-image: url('images/bolum2.png');
    background-size: cover;
    background-position: center;
}

.cb5 {
    background-image: url('images/bolum1.png');
    background-size: cover;
    background-position: center;
}

.cb6 {
    background-image: url('images/bolum5.png');
    background-size: cover;
    background-position: center;
}

.cb7 {
    background-image: url('images/bolum4.png');
    background-size: cover;
    background-position: center;
}

.cb8 {
    background-image: url('images/bolum3.png');
    background-size: cover;
    background-position: center;
}


.card {
    display: grid;
    place-items: center;
    width: 152px; /* 190px'in %80'i */
    height: 270px; /* 338px'in %80'i - 9:16 oranı korunuyor */
    aspect-ratio: 9 / 16;
    background-color: #333;
    position: absolute;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    -webkit-box-reflect: below 3px linear-gradient(transparent 75%, rgba(255, 255, 255, 0.125));
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}



.card .img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    filter: brightness(1);
    background-size: cover;
    background-position: center;
    object-fit: cover;
}

/* Card positions */
.c1 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(45deg) rotateX(90deg) translateY(135px) translateZ(224px) rotateZ(180deg);
}

.c1 .img {
    background-image: url('images/bolum1.png');
    background-size: cover;
}

.c2 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(90deg) rotateX(90deg) translateY(135px) translateZ(224px) rotateZ(180deg);
}

.c2 .img {
    background-image: url('images/bolum2.png');
    background-size: cover;
}

.c3 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(135deg) rotateX(90deg) translateY(135px) translateZ(224px) rotateZ(180deg);
}

.c3 .img {
    background-image: url('images/bolum3.png');
    background-size: cover;
}

.c4 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(180deg) rotateX(90deg) translateY(135px) translateZ(224px) rotateZ(180deg);
}

.c4 .img {
    background-image: url('images/bolum4.png');
    background-size: cover;
}

.c5 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(225deg) rotateX(90deg) translateY(135px) translateZ(224px) rotateZ(180deg);
}

.c5 .img {
    background-image: url('images/bolum5.png');
    background-size: cover;
}

.c6 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(270deg) rotateX(90deg) translateY(135px) translateZ(224px) rotateZ(180deg);
}

.c6 .img {
    background-image: url('images/bolum1.png');
    background-size: cover;
}

.c7 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(315deg) rotateX(90deg) translateY(135px) translateZ(224px) rotateZ(180deg);
}

.c7 .img {
    background-image: url('images/bolum2.png');
    background-size: cover;
}

.c8 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(360deg) rotateX(90deg) translateY(135px) translateZ(224px) rotateZ(180deg);
}

.c8 .img {
    background-image: url('images/bolum3.png');
    background-size: cover;
}


/* Background cards */
.cb1 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(45deg) rotateX(90deg) translateY(135px) translateZ(223px) rotateZ(180deg) scaleX(-1);
}

.cb2 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(90deg) rotateX(90deg) translateY(135px) translateZ(223px) rotateZ(180deg) scaleX(-1);
}

.cb3 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(135deg) rotateX(90deg) translateY(135px) translateZ(223px) rotateZ(180deg) scaleX(-1);
}

.cb4 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(180deg) rotateX(90deg) translateY(135px) translateZ(223px) rotateZ(180deg) scaleX(-1);
}

.cb5 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(225deg) rotateX(90deg) translateY(135px) translateZ(223px) rotateZ(180deg) scaleX(-1);
}

.cb6 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(270deg) rotateX(90deg) translateY(135px) translateZ(223px) rotateZ(180deg) scaleX(-1);
}

.cb7 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(315deg) rotateX(90deg) translateY(135px) translateZ(223px) rotateZ(180deg) scaleX(-1);
}

.cb8 {
    padding: 0;
    transform-origin: center center;
    transform: rotateZ(360deg) rotateX(90deg) translateY(135px) translateZ(223px) rotateZ(180deg) scaleX(-1);
}


@keyframes rotate {
    to {
        transform: perspective(1000px) rotateX(70deg) rotateZ(360deg);
    }
}
@media screen and (max-width: 1400px) {
    .header.visible {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    
    .header {
        /* Animasyon kaldırıldı - header baştan görünür */
    }
    .carousel-video {
        width: 100% !important;
        height: 100% !important;
    }
    
    .carousel-video-container {
        max-width: 100%;
        width: 25%;
        height: auto;
        max-height: 58vh;
       
    }
}
@media screen and (max-width: 1023px) {
    /* Header görünür olsun */
    .header.visible {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    
    
    .header {
        /* Animasyon kaldırıldı - header baştan görünür */
    }
    
    /* Eski carousel ayarları kaldırıldı - yeni yapı için temiz başlangıç */
}


/* Media query'ler büyükten küçüğe doğru sıralanmalı - en spesifik en sonda */






/* Mobil görünümler - 1100px ve altı */
@media screen and (max-width: 1100px) {
    .carousel-section {
        flex-direction: column;
        padding: 0;
    }
    
    .carousel-video-container {
        width: 100%;
        height: 100vh; /* Tam ekran yükseklik */
        flex: none;
        position: relative;
        overflow: hidden;
    }
    
    .carousel-video {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ekranı tam kaplar */
    }
    
    .carousel-content-wrapper {
        width: 100%;
    }
    
    /* Mobil görünümde kartların boyutunu daha da büyüt (3 katına çıkar) */
    .card-slider {
        width: calc(22vw * 0.5 * 3) !important; /* 11vw'den 33vw'ye (3 katı) */
        height: calc(22vw * 0.5 * 16 / 9 * 3) !important; /* Yükseklik de 3 katı */
    }
    
    /* Başlık font size küçült */
    .products-title {
        font-size: 36px;
    }
    
    .content-section h2 {
        font-size: 36px;
    }
    
    /* Logo slider mobil ayarları */
    .catalog-banner {
        min-height: 300px;
    }
    
    .catalog-banner-overlay {
        padding: 40px 20px;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    }
    
    .catalog-banner-content {
        gap: 25px;
    }
    
    .catalog-banner-title {
        font-size: 32px;
    }
    
    .catalog-banner-button {
        padding: 12px 30px;
        font-size: 16px;
    }
    
    .logo-slider-wrapper {
        margin-top: 0; /* Kartların altında normal konumlandırma */
        padding: 30px 0; /* Üst ve alt boşluk */
    }
    
    .logo-item {
        flex: 0 0 100px;
        height: 60px;
    }
    
    .logo-slider {
        gap: 30px;
    }
    
    @keyframes logoSlide {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-1 * (100px + 30px) * 24));
        }
    }
    
    /* Mobil için hizalama düzeltmesi */
    .logo-item img[src*="bellavitapdrn"],
    .logo-item img[src*="aileenelogo"],
    .logo-item img[src*="diamondslogo"] {
        transform: translateY(-8px);
    }
}
@media screen and (max-width: 1024px) {
    .carousel-video-container {
        width: 58% !important;
        height: 100vh; /* Tam ekran yükseklik */
        overflow: hidden;
        align-self: center !important;
    }
}
@media screen and (max-width: 820px) {
    .carousel-video-container {
        width: 58% !important;
        height: 100vh; /* Tam ekran yükseklik */
        overflow: hidden;
        align-self: center !important;
    }
}
@media screen and (max-width: 768px) {
    .carousel-video-container {
        width: 58% !important;
        height: 100vh; /* Tam ekran yükseklik */
        overflow: hidden;
        align-self: center !important;
    }
}


@media screen and (max-width: 440px) {
    .carousel-video-container {
        width: 90% !important;
        height: 100vh; /* Tam ekran yükseklik */
        overflow: hidden;
        align-self: center !important;
    }
    
    .carousel-video {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ekranı tam kaplar */
    }
    
    .carousel-content-wrapper {
        padding: 20px 10px;
    }
    
    /* Başlık font size küçült */
    .products-title {
        font-size: 28px;
    }
    
    .content-section h2 {
        font-size: 28px;
    }
    
    /* Katalog Banner mobil görünüm */
    .catalog-banner {
        min-height: 250px;
    }
    
    .catalog-banner-overlay {
        padding: 30px 15px;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
    }
    
    .catalog-banner-content {
        gap: 20px;
    }
    
    .catalog-banner-title {
        font-size: 28px;
    }
    
    .catalog-banner-button {
        padding: 10px 25px;
        font-size: 14px;
    }
    
    /* Logo slider küçük ekran ayarları */
    .logo-slider-wrapper {
        margin-top: 0; /* Kartların altında normal konumlandırma */
        padding: 20px 0; /* Üst ve alt boşluk */
    }
    
    .logo-item {
        flex: 0 0 80px;
        height: 50px;
    }
    
    .logo-slider {
        gap: 20px;
    }
    
    @keyframes logoSlide {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-1 * (80px + 20px) * 24));
        }
    }
    
    /* Küçük ekran için hizalama düzeltmesi */
    .logo-item img[src*="bellavitapdrn"],
    .logo-item img[src*="aileenelogo"],
    .logo-item img[src*="diamondslogo"] {
        transform: translateY(-6px);
    }
}

@media screen and (max-width: 376px) {
    .carousel-video-container {
        width: 74% !important;
        height: 100vh; /* Tam ekran yükseklik */
        overflow: hidden;
        align-self: center !important;
        
    }
    
    .carousel-video {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ekranı tam kaplar */
    }
    
    .carousel-content-wrapper {
        padding: 15px 10px;
    }
    
    /* Başlık font size küçült */
    .products-title {
        font-size: 24px;
    }
    
    .content-section h2 {
        font-size: 24px;
    }
}

@media screen and (max-width: 992px) {
    .carousel-section {
        flex-direction: column-reverse;
        padding: 20px 20px;
    }
    .carousel-video {
        width: 68%;
        height: 68%;
    }
    
    .carousel-video-container {
        max-width: 100%;
        width: 100%;
        height: auto;
        max-height: 50vh;
        order: 2; /* Video altta */
    }
    
    /* Başlık font size küçült */
    .products-title {
        font-size: 32px;
    }
    
    .content-section h2 {
        font-size: 32px;
    }
}


/* Content Section */
.content-section {
    min-height: 100vh;
    padding: 100px 40px;
    background-color: #fff;
    color: #474747;
}

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

.content-section h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: #474747;
}

/* Tüm başlıklar için PSFournier Std Light */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    color: #474747 !important;
}

.content-section p {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #666;
}

/* Responsive Design - 1024px için mobil görünüm */
@media (max-width: 1024px) {
    .hero-split {
        flex-direction: column;
    }

    .hero-left {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .hero-video-container {
        height: 100vh; /* Her video tam ekran */
    }
    
    .hero-section {
        height: 200vh; /* İki video için toplam yükseklik */
    }
    
    .hero-logo {
        display: none !important; /* Desktop logo gizle */
    }
}

/* Nav Menu - Mobil görünümde font küçültme */
@media (max-width: 768px) {
    /* Mobil görünümde nav menu tam ekran */
    .nav-menu {
        width: 100% !important;
    }
    
    .nav-list > li > a,
    .nav-list > li > .submenu-toggle {
        font-size: 12px !important;
        padding: 15px 30px;
    }
    
    .submenu > li > a,
    .submenu > li > .submenu-toggle-2 {
        font-size: 11px !important;
        padding: 12px 30px 12px 50px;
    }
    
    .submenu-2 > li > a {
        font-size: 10px !important;
        padding: 10px 30px 10px 70px;
    }
    
    .submenu-2 > li > .submenu-toggle-3 {
        font-size: 10px !important;
        padding: 10px 30px 10px 70px;
    }
    
    .submenu-3 > li > a {
        font-size: 9px !important;
        padding: 8px 30px 8px 90px;
    }
    
    .submenu-toggle .arrow,
    .submenu-toggle-2 .arrow,
    .submenu-toggle-3 .arrow {
        font-size: 16px;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-container {
        padding: 15px 20px;
    }
    
    .header-left-controls {
        gap: 10px;
    }
    
    .search-icon {
        padding: 6px;
    }
    
    .search-icon svg {
        width: 18px;
        height: 18px;
    }

    /* Mobil: 200px tavan — esdiersadeyazi (header) ile esdiersiyah (gövde) aynı kutuda */
    .quote-logo {
        height: 24px;
        max-height: 24px;
        max-width: 82vw;
        max-width: min(82vw, 200px);
        width: auto;
    }

    .hero-logo img {
        max-width: 140px; /* %30 küçültüldü (200px * 0.7 = 140px) */
    }

    .hero-split {
        flex-direction: column;
    }

    .hero-left {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .hero-video-container {
        height: 100vh; /* Mobilde her video tam ekran */
    }
    
    .hero-section {
        height: 200vh; /* İki video için toplam yükseklik */
    }

    .content-section {
        padding: 60px 20px;
    }

    .content-section h2 {
        font-size: 32px;
    }

    .header {
        /* Animasyon kaldırıldı - header baştan görünür */
    }
    
    .header.visible {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    
    .header-container {
        /* Animasyon kaldırıldı - baştan normal görünüm */
    }

    .header-logo {
        height: 24px;
        max-width: 82vw;
        max-width: min(82vw, 200px);
    }

    .header-logo img {
        max-width: 82vw;
        max-width: min(82vw, 200px);
        height: 24px;
        max-height: 24px;
        /* Instagram / FB in-app: intrinsic genişliği hâlâ büyüten motorlar */
        object-fit: contain;
    }
}

/* In-app (Instagram, Facebook) WebView: sert piksel; script.js applyInAppHeaderLogoSize aynı sınırı inline verir */
@media (max-width: 1024px) {
    .header .header-logo {
        max-width: 200px !important;
        max-width: min(82vw, 200px) !important;
        width: auto !important;
    }

    .header .header-logo .header-logo-link,
    .header .header-logo img {
        max-width: 200px !important;
        max-width: min(82vw, 200px) !important;
        min-width: 0 !important;
    }

    .header .header-logo img {
        width: auto !important;
        height: 24px !important;
        max-height: 24px !important;
        object-fit: contain !important;
    }
}

/*
 * Instagram / Facebook in-app (ve bazı satır in-app): absolute + translate(-50%,-50%) ile
 * büyük PNG, bazı WebView sürümlerinde tüm satır yüksekliğinde çizilebiliyor.
 * UA sınıfı (html.ua-inapp-browser) <head> içi script + stiller; transform kaldır, grid hizalama.
 */
html.ua-inapp-browser .header .header-spacer {
    display: none !important;
}

html.ua-inapp-browser .header {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

html.ua-inapp-browser .header .header-container {
    display: grid !important;
    /* Orta sütun: logo kutusu 200px tavan; 1fr auto 1fr orta sütunda sıkıştırmayı engelle */
    grid-template-columns: minmax(0, 1fr) minmax(0, min(82vw, 200px)) minmax(0, 1fr) !important;
    align-items: center;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Diğer mobil tarayıcılarla aynı yatay boşluk + güvenli alan; üst/alt: @768 15px + in-app ince ayar */
    padding-top: 19px;
    padding-bottom: 16px;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
}

html.ua-inapp-browser .header .header-left-controls {
    position: static !important;
    grid-column: 1;
    justify-self: start;
    margin: 0 !important;
    order: 0 !important;
    left: auto !important;
    right: auto !important;
}

html.ua-inapp-browser .header .header-logo {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    grid-column: 2;
    justify-self: center;
    align-self: center;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

html.ua-inapp-browser .header .header-language {
    position: static !important;
    grid-column: 3;
    justify-self: end;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
}

html.ua-inapp-browser .header .header-logo .header-logo-link,
html.ua-inapp-browser .header .header-logo img {
    max-width: 100% !important;
    min-width: 0 !important;
}

html.ua-inapp-browser .header .header-logo img {
    width: auto !important;
    max-width: min(82vw, 200px) !important;
    height: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    margin: 0 auto;
}

/* Arapça RTL: sütunları yer değiştir (mutlak konum yok) */
html[dir="rtl"].ua-inapp-browser .header .header-container {
    direction: rtl;
}

html[dir="rtl"].ua-inapp-browser .header .header-language {
    grid-column: 1;
    justify-self: start;
    position: static !important;
    left: auto !important;
    right: auto !important;
}

html[dir="rtl"].ua-inapp-browser .header .header-left-controls {
    grid-column: 3;
    justify-self: end;
    position: static !important;
    right: auto !important;
    left: auto !important;
}

/*
 * Sayfa içi ESDIER marka logoları = header ile aynı boyut
 * (Instagram: @media (max-width:768) bazen eşleşmediği / stiller baskılandığı için UA + !important)
 */
html.ua-inapp-browser .quote-logo,
html.ua-inapp-browser .blog-placeholder-logo img,
html.ua-inapp-browser .product-detail-placeholder .placeholder-logo,
html.ua-inapp-browser .catalog-placeholder .placeholder-logo {
    max-width: 82vw !important;
    max-width: min(82vw, 200px) !important;
    width: auto !important;
    height: 24px !important;
    max-height: 24px !important;
    min-height: 0 !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
}

html.ua-inapp-browser .product-detail-placeholder .placeholder-logo-picture {
    max-width: 82vw !important;
    max-width: min(82vw, 200px) !important;
    width: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

html.ua-inapp-browser .footer-logo {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    height: 24px !important;
    min-height: 24px !important;
    max-width: min(82vw, 200px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html.ua-inapp-browser .footer-logo img {
    max-width: min(82vw, 200px) !important;
    width: auto !important;
    height: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
}

@media (min-width: 769px) {
    html.ua-inapp-browser .quote-logo,
    html.ua-inapp-browser .blog-placeholder-logo img,
    html.ua-inapp-browser .product-detail-placeholder .placeholder-logo,
    html.ua-inapp-browser .catalog-placeholder .placeholder-logo,
    html.ua-inapp-browser .footer-logo img {
        max-width: min(78vw, 300px) !important;
        height: 28px !important;
        max-height: 28px !important;
    }

    html.ua-inapp-browser .product-detail-placeholder .placeholder-logo-picture {
        max-width: min(78vw, 300px) !important;
    }

    html.ua-inapp-browser .footer-logo {
        height: 28px !important;
        min-height: 28px !important;
        max-width: min(78vw, 300px) !important;
    }
}

/* Navigation Menu */
.nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 30%; /* Web görünümde ekranın %30'unu kaplar */
    height: 100vh;
    background: rgba(255, 255, 255, 0.5) !important; /* Opacity 80% */
    backdrop-filter: blur(20px);
    z-index: 10000;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
    padding-top: 80px;
}

/* Close Button */
.nav-close {
    position: absolute;
    top: 20px;
    right: 30px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    transition: all 0.3s ease;
}

.nav-close:hover {
    transform: rotate(90deg);
}

.nav-close span {
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: #000;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.nav-close span:first-child {
    transform: rotate(45deg);
}

.nav-close span:last-child {
    transform: rotate(-45deg);
}

.nav-close:hover span {
    background-color: #666;
}

.nav-menu.active {
    transform: translateX(0);
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 40px 0;
}

.nav-list > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-list > li > a,
.nav-list > li > .submenu-toggle {
    display: block;
    padding: 20px 40px;
    color: #666; /* Gri renk */
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
}

.nav-list > li > a:hover,
.nav-list > li > .submenu-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    padding-left: 50px;
    color: #000; /* Hover'da siyah */
}

.submenu-toggle,
.submenu-toggle-2,
.submenu-toggle-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.submenu-toggle .arrow,
.submenu-toggle-2 .arrow,
.submenu-toggle-3 .arrow {
    transition: transform 0.3s ease;
    font-size: 20px;
    color: #666;
}

.submenu-toggle.active .arrow,
.submenu-toggle-2.active .arrow,
.submenu-toggle-3.active .arrow {
    transform: rotate(90deg);
}

.submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: rgba(0, 0, 0, 0.02);
}

.submenu.active {
    max-height: 1000px;
}

.submenu > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.submenu > li > a,
.submenu > li > .submenu-toggle-2 {
    display: block;
    padding: 15px 40px 15px 60px;
    color: #666; /* Gri renk */
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.3s ease;
}

.submenu > li > a:hover,
.submenu > li > .submenu-toggle-2:hover {
    background: rgba(0, 0, 0, 0.05);
    padding-left: 70px;
    color: #000; /* Hover'da siyah */
}

.submenu-2 {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: rgba(0, 0, 0, 0.03);
}

.submenu-2.active {
    max-height: 500px;
}

.submenu-2 > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.submenu-2 > li > a {
    display: block;
    padding: 12px 40px 12px 80px;
    color: #666; /* Gri renk */
    text-decoration: none;
    font-size: 14px;
    font-weight: 300;
    transition: all 0.3s ease;
}

.submenu-2 > li > a:hover {
    background: rgba(0, 0, 0, 0.05);
    padding-left: 90px;
    color: #000; /* Hover'da siyah */
}

.submenu-toggle-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.submenu-toggle-3 .arrow {
    transition: transform 0.3s ease;
    font-size: 18px;
    color: #666;
}

.submenu-toggle-3.active .arrow {
    transform: rotate(90deg);
}

.submenu-3 {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: rgba(0, 0, 0, 0.04);
}

.submenu-3.active {
    max-height: 500px;
}

.submenu-3 > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.submenu-3 > li > a {
    display: block;
    padding: 10px 40px 10px 100px;
    color: #666; /* Gri renk */
    text-decoration: none;
    font-size: 13px;
    font-weight: 300;
    transition: all 0.3s ease;
}

.submenu-3 > li > a:hover {
    background: rgba(0, 0, 0, 0.05);
    padding-left: 110px;
    color: #000; /* Hover'da siyah */
}

.submenu-2 > li > .submenu-toggle-3 {
    display: block;
    padding: 12px 40px 12px 80px;
    color: #666; /* Gri renk */
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s ease;
}

.submenu-2 > li > .submenu-toggle-3:hover {
    background: rgba(0, 0, 0, 0.05);
    padding-left: 90px;
    color: #000; /* Hover'da siyah */
}

/* Hamburger menu active state */
.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

.hamburger-menu.active span:nth-child(2) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Product Popup */
.product-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-popup.active {
    display: flex;
    opacity: 1;
}

.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 1; /* Popup container'ın altında */
    pointer-events: auto; /* Overlay tıklanabilir (kapatma için) */
}

.popup-container {
    position: relative;
    width: 100%;
    max-width: 800px; /* Web'de biraz daha büyük */
    max-height: 85vh;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 36px 70px 10px 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    z-index: 2; /* Overlay'in üstünde */
    overflow: hidden;
}

.product-popup.active .popup-container {
    transform: scale(1);
}

.popup-close {
    position: absolute;
    top: 10px; /* Resmin üstüne gelmemesi için yukarı kaydırıldı */
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.3s ease;
}

.popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.popup-close span {
    position: absolute;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

.popup-close span:first-child {
    transform: rotate(45deg);
}

.popup-close span:last-child {
    transform: rotate(-45deg);
}

.popup-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.popup-image-container {
    width: 100%;
    max-width: 100%;
    max-height: 70vh; /* Web'de biraz daha büyük */
    height: auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 1;
}

.popup-image-container img {
    max-width: 100%;
    max-height: 70vh; /* Web'de biraz daha büyük */
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.popup-image-container iframe {
    width: 100%;
    height: 70vh;
    border: none;
    display: block;
    background: #fff;
}

.popup-info {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    margin-top: auto;
}

.popup-button {
    display: inline-block;
    padding: 15px 40px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.popup-button:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.popup-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    z-index: 10001;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.3s ease;
}

.popup-nav:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.popup-prev {
    left: 0px; /* Resmin soluna gelmemesi için dışarı kaydırıldı */
}

.popup-next {
    right: 0px; /* Resmin sağına gelmemesi için dışarı kaydırıldı */
}

/* Scientific Gallery Modal */
.scientific-item {
    cursor: pointer;
}

.scientific-gallery-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.scientific-gallery-modal.active {
    display: flex;
    opacity: 1;
}

.scientific-gallery-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 36px 70px 24px 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    z-index: 2;
}

.scientific-gallery-modal.active .scientific-gallery-container {
    transform: scale(1);
}

.scientific-gallery-media {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.scientific-gallery-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.scientific-gallery-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

/* Mobil görünüm - Tam ekran */
@media screen and (max-width: 1024px) {
    .popup-container {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 10002 !important; /* PDF iframe'inin üstünde olması için */
        pointer-events: none; /* Container tıklamaları engellemesin */
    }
    
    /* Mobil görünümde kontroller tıklanabilir olmalı */
    .popup-container .popup-close,
    .popup-container .popup-nav {
        pointer-events: auto !important;
    }
    
    .popup-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    
    .popup-image-container {
        position: relative;
        max-width: 90%; /* PDF'i küçült - butonlar için alan bırak */
        max-height: calc(100vh - 160px); /* Alt ve üst için boşluk bırak (butonlar için) */
        width: 90%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        padding: 60px 50px; /* Butonlar için padding */
    }
    
    .popup-image-container img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
    }
    
    /* PDF için mobil görünüm - küçültülmüş */
    .popup-image-container iframe {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        position: relative !important; /* Fixed yerine relative */
        top: auto !important;
        left: auto !important;
        z-index: 1 !important; /* Butonların altında */
        background: #fff;
        border: none;
        pointer-events: auto; /* PDF içinde scroll için */
        border-radius: 10px;
    }
    
    /* Kapatma butonu sağ üstte - PDF'in dışında */
    .popup-close {
        position: fixed !important;
        top: 20px !important; /* Üstten boşluk */
        right: 20px !important; /* Sağdan boşluk */
        width: 50px !important;
        height: 50px !important;
        z-index: 10004 !important; /* En üstte */
        background: rgba(0, 0, 0, 0.8) !important;
        backdrop-filter: blur(10px);
        pointer-events: auto !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }
    
    .popup-close span {
        background: #fff !important;
    }
    
    /* Navigasyon okları - PDF'in yanlarında */
    .popup-nav {
        position: fixed !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
        z-index: 10004 !important; /* En üstte */
        background: rgba(0, 0, 0, 0.8) !important;
        backdrop-filter: blur(10px);
        pointer-events: auto !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        color: #fff !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    /* Sol ok - solda (tüm parent selector'ları ile) */
    .popup-container .popup-nav.popup-prev,
    .product-popup .popup-nav.popup-prev,
    .product-popup.active .popup-nav.popup-prev,
    #popupPrev {
        left: 10px !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Sağ ok - sağda (tüm parent selector'ları ile) */
    .popup-container .popup-nav.popup-next,
    .product-popup .popup-nav.popup-next,
    .product-popup.active .popup-nav.popup-next,
    #popupNext {
        right: 10px !important;
        left: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Bilimsel Etkinliklerimiz Section */
.scientific-events-section {
    width: 100%;
    min-height: 70vh;
    background-color: #ffffff;
    padding: 80px 40px 40px; /* Alt padding'i azalttık - Tedavi Alanlarımız ile arasındaki boşluğu kapatmak için */
    position: relative;
}

.scientific-events-container {
    max-width: 1400px;
    margin: 0 auto;
}

.scientific-events-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 300;
    letter-spacing: 2px;
    text-align: center;
    color: #474747;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.scientific-events-title.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Tabs */
.scientific-tabs {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.scientific-tab {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #666;
    background: transparent;
    border: 2px solid #ddd;
    padding: 15px 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.scientific-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #000;
    transition: left 0.3s ease;
    z-index: -1;
}

.scientific-tab:hover {
    color: #000;
    border-color: #000;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3),
                0 0 15px rgba(0, 0, 0, 0.2),
                0 0 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.scientific-tab:hover::before {
    left: -100%;
}

.scientific-tab.active {
    color: #fff;
    background: #000;
    border-color: #000;
}

.scientific-tab.active::before {
    left: 0;
}

/* Content Containers */
.scientific-content {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.scientific-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.scientific-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    padding: 20px 0;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}

.scientific-scroll-wrapper:active {
    cursor: grabbing;
}

.scientific-scroll-wrapper.grabbing {
    cursor: grabbing;
}

.scientific-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
}

.scientific-scroll-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.scientific-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.scientific-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.scientific-items-container {
    display: flex;
    gap: 30px;
    width: fit-content;
    padding: 10px;
}

/* Scientific Items */
.scientific-item {
    flex: 0 0 400px;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .scientific-item:hover {
        transform: translateY(-10px);
    }
}

.scientific-item-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
}

.scientific-item-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.scientific-item-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.scientific-item-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #000;
    text-align: center;
    margin: 0;
    padding: 10px 0;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .treatment-areas-page-section {
        padding: 30px 20px 30px; /* Mobilde padding'i daha da azalttık */
        min-height: auto; /* min-height'ı kaldırdık */
    }
    
    .products-page-section {
        min-height: auto; /* Mobilde min-height'ı kaldırdık */
    }
    
    .products-right {
        min-height: auto !important; /* Mobilde min-height'ı kaldırdık */
    }
    
    .products-layout {
        gap: 20px !important; /* Gap'i azalttık */
    }
    
    .scientific-events-section {
        padding: 30px 20px 30px; /* Üst ve alt padding'i azalttık - Tedavi Alanlarımız ile arasındaki boşluğu kapatmak için */
    }

    .scientific-events-title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .scientific-tabs {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .scientific-tab {
        width: 100%;
        padding: 12px 20px;
        font-size: 16px;
    }

    .scientific-item {
        flex: 0 0 300px;
    }


    .scientific-items-container {
        gap: 20px;
    }
}

@media screen and (max-width: 440px) {
    .scientific-events-title {
        font-size: 24px;
    }

    .scientific-tab {
        font-size: 14px;
        padding: 10px 15px;
    }

    .scientific-item {
        flex: 0 0 280px;
    }


    .scientific-item-title {
        font-size: 16px;
    }
}

/* Tedavi Alanlarımız Section */
.treatment-areas-section {
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    padding: 80px 40px;
    position: relative;
}

.treatment-areas-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Sol Taraf - Başlık ve Butonlar (%25) */
.treatment-left {
    flex: 0 0 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: sticky;
    top: 100px;
    height: fit-content;
}

.treatment-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 2px;
    text-align: center;
    color: #474747;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.treatment-title.animate {
    opacity: 1;
    transform: translateY(0);
}

.treatment-tabs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.treatment-tab {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 1.5px;
    color: #666;
    background: transparent;
    border: 2px solid #ddd;
    padding: 20px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
    width: 100%;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.treatment-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #000;
    transition: left 0.3s ease;
    z-index: -1;
}

.treatment-tab:hover {
    color: #000;
    border-color: #000;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3),
                0 0 15px rgba(0, 0, 0, 0.2),
                0 0 25px rgba(0, 0, 0, 0.1);
    transform: translateX(5px);
}

.treatment-tab:hover::before {
    left: -100%;
}

.treatment-tab.active {
    color: #fff;
    background: #000;
    border-color: #000;
}

.treatment-tab.active::before {
    left: 0;
}

/* Sağ Taraf - Video/Görsel Container (%75) */
.treatment-right {
    flex: 1;
    min-height: 600px;
}

.treatment-media-container {
    width: 100%;
    height: 100%;
    min-height: 600px;
    background-color: #f5f5f5;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.treatment-media-placeholder {
    color: #999;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
}

.treatment-media-container video,
.treatment-media-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Mobile Responsive */
@media screen and (max-width: 1024px) {
    .treatment-areas-section {
        padding: 60px 20px;
    }

    .treatment-areas-container {
        flex-direction: column;
        gap: 40px;
    }

    .treatment-left {
        flex: 1;
        position: relative;
        top: 0;
        padding: 0;
        width: 100%;
    }

    .treatment-title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .treatment-tabs {
        flex-direction: row;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap;
    }

    .treatment-tab {
        flex: 0 1 auto;
        min-width: 120px;
        padding: 12px 20px;
        font-size: 16px;
    }

    .treatment-right {
        flex: 1;
        width: 100%;
        min-height: 400px;
    }

    .treatment-media-container {
        min-height: 400px;
    }
}

@media screen and (max-width: 768px) {
    .treatment-areas-section {
        padding: 60px 20px;
    }

    .treatment-title {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .treatment-tabs {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .treatment-tab {
        width: 100%;
        padding: 12px 20px;
        font-size: 16px;
    }

    .treatment-right {
        min-height: 300px;
    }

    .treatment-media-container {
        min-height: 300px;
    }
}

@media screen and (max-width: 440px) {
    .treatment-areas-section {
        padding: 40px 15px;
    }

    .treatment-title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .treatment-tab {
        font-size: 14px;
        padding: 10px 15px;
    }

    .treatment-right {
        min-height: 250px;
    }

    .treatment-media-container {
        min-height: 250px;
    }
}

/* Instagram Floating Button */
.instagram-float {
    position: fixed;
    bottom: 130px; /* 20px yukarı alındı (100px'den 120px'e) */
    right: 40px;
    width: 60px;
    height: 60px;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.instagram-float:hover {
    transform: scale(1.1);
}

.instagram-icon {
    width: 32px;
    height: 32px;
    fill: #000;
    position: relative;
    z-index: 1;
}

/* Parlama efekti - ÜRÜNLERİMİZ başlığındaki gibi */
.instagram-float::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.6),
        transparent
    );
    animation: instagramShineLoop 3s ease-in-out infinite;
    pointer-events: none;
    filter: blur(2px);
    border-radius: 50%;
}

@keyframes instagramShineLoop {
    0% {
        left: -100%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    40% {
        left: 150%;
        opacity: 1;
    }
    50% {
        left: 150%;
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    90% {
        left: -100%;
        opacity: 1;
    }
    100% {
        left: -100%;
        opacity: 0;
    }
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 70px; /* 20px yukarı alındı (30px'den 50px'e) */
    right: 40px;
    width: 60px;
    height: 60px;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-icon {
    width: 32px;
    height: 32px;
    fill: #000;
    position: relative;
    z-index: 1;
}

/* Parlama efekti - ÜRÜNLERİMİZ başlığındaki gibi */
.whatsapp-float::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.6),
        transparent
    );
    animation: whatsappShineLoop 3s ease-in-out infinite;
    pointer-events: none;
    filter: blur(2px);
    border-radius: 50%;
}

@keyframes whatsappShineLoop {
    0% {
        left: -100%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    40% {
        left: 150%;
        opacity: 1;
    }
    50% {
        left: 150%;
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    90% {
        left: -100%;
        opacity: 1;
    }
    100% {
        left: -100%;
        opacity: 0;
    }
}

/* Mobile Social Buttons */
@media screen and (max-width: 768px) {
    .instagram-float {
        width: 55px;
        height: 55px;
        bottom: 120px; /* 20px yukarı alındı (85px'den 105px'e) */
        right: 20px;
    }

    .instagram-icon {
        width: 28px;
        height: 28px;
    }

    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 60px; /* 20px yukarı alındı (20px'den 40px'e) */
        right: 20px;
    }

    .whatsapp-icon {
        width: 28px;
        height: 28px;
    }
}

@media screen and (max-width: 440px) {
    .instagram-float {
        width: 50px;
        height: 50px;
        bottom: 110px; /* 20px yukarı alındı (75px'den 95px'e) */
        right: 15px;
    }

    .instagram-icon {
        width: 24px;
        height: 24px;
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 60px; /* 20px yukarı alındı (15px'den 35px'e) */
        right: 15px;
    }

    .whatsapp-icon {
        width: 24px;
        height: 24px;
    }
}

/* Footer */
.footer {
    width: 100%;
    height: 60px; /* Küçültüldü (80px'den 60px'e) */
    background-color: #ffffff;
    position: relative;
    border-top: 1px solid #e0e0e0;
    display: block;
    z-index: 10000;
    visibility: visible;
    transition: position 0.3s ease;
}

/* Footer fixed - 600px'den sonra */
.footer.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    position: relative;
}

/* Sol taraf - Copyright */
.footer-left {
    flex: 1;
    display: flex;
    align-items: center;
}

.footer-copyright {
    font-family: 'Cormorant Garamond', serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #000;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-copyright:hover {
    opacity: 0.7;
}

/* Orta - Logo (yükseklik = header .header-logo img) */
.footer-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 28px;
    max-width: min(78vw, 300px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.footer-logo:hover {
    opacity: 0.7;
}

.footer-logo img {
    max-width: min(78vw, 300px);
    max-height: 28px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Sağ taraf - Social Media Icons */
.footer-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.footer-social-icon {
    width: 19px; /* 5px küçültüldü (24px'den 19px'e) */
    height: 19px; /* 5px küçültüldü (24px'den 19px'e) */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-social-icon svg {
    width: 100%;
    height: 100%;
    fill: #000;
}

.footer-social-icon:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

/* Mobile Footer — tek satır: sol copyright | ortada logo | sağ sosyal */
@media screen and (max-width: 768px) {
    .footer {
        height: auto;
        min-height: 52px;
        padding: 10px 0;
        box-sizing: border-box;
    }

    .footer-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
        row-gap: 0;
        padding: 0 12px;
        justify-content: stretch;
    }

    .footer-left {
        order: unset;
        flex: unset;
        width: auto;
        min-width: 0;
        justify-content: flex-start;
    }

    .footer-logo {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        justify-self: center;
        grid-column: 2;
        height: 22px;
        max-width: min(36vw, 128px);
        width: auto;
        order: unset;
    }

    .footer-logo img {
        max-width: min(36vw, 128px) !important;
        max-height: 22px !important;
        height: auto;
        width: auto;
        object-fit: contain;
    }

    .footer-right {
        order: unset;
        flex: unset;
        justify-content: flex-end;
        gap: 12px;
        min-width: 0;
        grid-column: 3;
    }

    .footer-copyright {
        font-size: 9px;
        line-height: 1.25;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .footer-social-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    html.ua-inapp-browser .footer-logo,
    html.ua-inapp-browser .footer-logo img {
        max-width: min(36vw, 128px) !important;
        max-height: 22px !important;
        height: 22px !important;
        width: auto !important;
        min-height: 0 !important;
    }

    html.ua-inapp-browser .footer-logo {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }
}

@media screen and (max-width: 440px) {
    .footer {
        padding: 8px 0;
        min-height: 48px;
    }

    .footer-container {
        column-gap: 8px;
        padding: 0 10px;
    }

    .footer-logo {
        max-width: min(34vw, 118px);
        height: 20px;
    }

    .footer-logo img {
        max-width: min(34vw, 118px) !important;
        max-height: 20px !important;
    }

    .footer-copyright {
        font-size: 8px;
        letter-spacing: 0;
    }

    .footer-social-icon {
        width: 15px;
        height: 15px;
    }

    html.ua-inapp-browser .footer-logo,
    html.ua-inapp-browser .footer-logo img {
        max-width: min(34vw, 118px) !important;
        max-height: 20px !important;
        height: 20px !important;
    }
}

/* Blog Section */
.blog-section {
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    padding: 80px 40px;
    position: relative;
}

.blog-container {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.blog-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 300;
    letter-spacing: 2px;
    color: #474747;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.blog-title.animate {
    opacity: 1;
    transform: translateY(0);
}

.blog-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #666;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.blog-subtitle.animate {
    opacity: 1;
    transform: translateY(0);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: #ffffff;
    min-height: 200px;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-color: #000;
}

.blog-card-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    background-color: #f5f5f5;
}

.blog-card-image picture {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-content {
    padding: 25px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 100px;
}

.blog-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #000;
    text-align: center;
    margin: 0;
    transition: color 0.3s ease;
}

.blog-card:hover .blog-card-title {
    color: #000;
}

/* Mobile Blog */
@media screen and (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media screen and (max-width: 768px) {
    .blog-section {
        padding: 60px 20px;
    }

    .blog-title {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .blog-subtitle {
        font-size: 18px;
        margin-bottom: 40px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

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

    .blog-card-content {
        padding: 20px 15px;
        min-height: 80px;
    }

    .blog-card-title {
        font-size: 18px;
    }
}

@media screen and (max-width: 440px) {
    .blog-title {
        font-size: 24px;
    }

    .blog-subtitle {
        font-size: 16px;
    }

    .blog-card-image {
        height: 180px;
    }

    .blog-card-content {
        padding: 15px 10px;
        min-height: 70px;
    }

    .blog-card-title {
        font-size: 16px;
    }
}

/* İş ortakları (SSS üstü — ana sayfalar) */
.partners-section {
    width: 100%;
    padding: 50px 24px 40px;
}

.partners-container {
    max-width: 1100px;
    margin: 0 auto;
}

.partners-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 3px;
    text-align: center;
    color: #474747;
    margin: 0 0 36px;
}

.partners-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px 48px;
}

.partners-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    transition: opacity 0.25s ease, transform 0.25s ease;
    text-decoration: none;
}

.partners-link:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

.partners-link:focus-visible {
    outline: 2px solid #333;
    outline-offset: 3px;
}

.partners-link img {
    display: block;
    max-height: 56px;
    width: auto;
    max-width: 220px;
    height: auto;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .partners-section {
        padding: 36px 16px 32px;
    }

    .partners-title {
        font-size: 24px;
        margin-bottom: 28px;
    }

    .partners-logos {
        flex-direction: column;
        gap: 20px;
    }

    .partners-link img {
        max-height: 48px;
        max-width: 180px;
    }
}

/* Sık Sorulan Sorular Section */
.faq-section {
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    padding: 80px 40px;
    position: relative;
    display: block !important;
    visibility: visible !important;
    z-index: 10;
}

.faq-container {
    max-width: 1000px;
    margin: 0 auto;
}

.faq-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 300;
    letter-spacing: 2px;
    text-align: center;
    color: #474747;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.faq-title.animate {
    opacity: 1;
    transform: translateY(0);
}

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

.faq-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.faq-question {
    width: 100%;
    padding: 20px 25px;
    background-color: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #000;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: #f5f5f5;
}

.faq-question span:first-child {
    flex: 1;
    padding-right: 20px;
}

.faq-icon {
    font-size: 24px;
    font-weight: 300;
    color: #000;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 25px;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 25px 20px 25px;
}

.faq-answer p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.6;
    color: #666;
    margin: 0;
    padding-top: 20px;
}

/* Mobile FAQ */
@media screen and (max-width: 768px) {
    .faq-section {
        padding: 60px 20px;
    }

    .faq-title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .faq-question {
        padding: 15px 20px;
        font-size: 16px;
    }

    .faq-answer {
        padding: 0 20px;
    }

    .faq-item.active .faq-answer {
        padding: 0 20px 15px 20px;
    }

    .faq-answer p {
        font-size: 14px;
        padding-top: 15px;
    }

    .faq-icon {
        font-size: 20px;
    }
}

@media screen and (max-width: 440px) {
    .faq-title {
        font-size: 24px;
    }

    .faq-question {
        padding: 12px 15px;
        font-size: 14px;
    }

    .faq-answer {
        padding: 0 15px;
    }

    .faq-item.active .faq-answer {
        padding: 0 15px 12px 15px;
    }

    .faq-answer p {
        font-size: 13px;
        padding-top: 12px;
    }
}

/* Products Hero Video */
.products-hero-video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, width, height, top, left, padding;
}

/* Hakkımızda sayfası hero section arka plan */
#aboutHeroVideo {
    background-image: url('images/tedavialanlarimiz-poster.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff; /* Fallback renk */
}

/* İletişim sayfası hero — video yüklenene kadar poster */
#contactHeroVideo {
    background-image: url('images/tedavialanlarimiz-poster.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
}

.products-hero-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    aspect-ratio: 16 / 9 !important;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hakkımızda / İletişim hero: video ekrana tam sığdır */
#aboutHeroVideo .products-hero-video,
#contactHeroVideo .products-hero-video {
    position: relative;
    z-index: 1;
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; /* Ekranı tam kaplasın */
    object-position: center center; /* Ortalanmış */
    background: transparent !important;
}

/* Kozmetik sayfası için video tam sığsın */
#cosmeticHeroVideo .products-hero-video {
    object-fit: contain !important;
    object-position: center center;
    background: #a9c1c3;
    transform: scale(1.20);
}

/* Mobil görünümde hakkımızda sayfası video ekranı tam kaplasın */
@media screen and (max-width: 768px) {
    #aboutHeroVideo .products-hero-video,
    #contactHeroVideo .products-hero-video {
        transform: translateX(0px);
    }

    #aboutHeroVideo .products-hero-video,
    #contactHeroVideo .products-hero-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        aspect-ratio: 9 / 16 !important;
    }
}

.products-hero-video-container.scrolled {
    display: none;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Mobil görünümde video görünür kalmalı */
@media screen and (max-width: 768px) {
    .products-hero-video-container.scrolled {
        display: block !important;
    }
}

/* Products Scrolled Video Container */
.products-scrolled-video-container {
    flex: 0 0 25%;
    display: none;
    position: relative;
    height: fit-content;
}

.products-layout.scrolled .products-scrolled-video-container {
    display: block;
    grid-column: 1;
    position: sticky;
    top: 100px;
    align-self: start;
    height: fit-content;
    width: 100%;
    max-width: 100%;
    padding-right: 80px;
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition: ease-in-out 3s ;
}

.products-scrolled-video {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16 !important; /* 16:9 formatı */
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    max-width: 100%;
}

/* Products Page Section */
.products-page-section {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    padding: 120px 40px 80px;
    position: relative;
    margin-top: 100vh;
    z-index: 2;
    /* Sticky için overflow kontrolü - hidden olmamalı */
    overflow: visible;
}

/* Tedavi Alanlarımız Section - Hero video olmadığı için margin-top yok */
.treatment-areas-page-section {
    margin-top: 0;
    padding: 60px 40px 80px; /* Üst padding'i azalttık */
}

/* Tedavi Alanları Ürün Kartları - Yatay Slider */
.treatment-products-grid {
    display: flex;
    gap: 30px;
    margin-top: 40px;
    overflow-x: auto; /* Mouse ile sürüklenebilir yapmak için */
    overflow-y: hidden;
    padding: 10px 0 20px;
    position: relative;
    width: 100%;
    cursor: grab;
    scrollbar-width: none; /* Firefox için scrollbar gizle */
    -ms-overflow-style: none; /* IE ve Edge için scrollbar gizle */
    touch-action: pan-y;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.treatment-products-grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera için scrollbar gizle */
}

.treatment-products-grid:active {
    cursor: grabbing;
}

.treatment-products-grid-wrapper {
    display: flex;
    gap: 30px;
    will-change: transform;
    /* Animasyon JavaScript ile kontrol edilecek */
}

.treatment-products-grid-wrapper.auto-scroll {
    animation: slideLeft 60s linear infinite; /* Varsayılan süre - JavaScript ile dinamik olarak ayarlanacak */
}

.treatment-products-grid-wrapper.dragging {
    animation: none !important;
    cursor: grabbing;
}

@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.treatment-products-grid::-webkit-scrollbar {
    height: 8px;
}

.treatment-products-grid::-webkit-scrollbar-track {
    background: transparent;
}

.treatment-products-grid::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

.treatment-products-grid::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

.treatment-product-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 280px; /* Sabit genişlik, küçülmez */
    min-width: 280px;
    flex-shrink: 0;
}

.treatment-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.treatment-product-image {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 4px;
}

.treatment-product-image picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
}

.treatment-product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.treatment-product-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #000;
    margin: 15px 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.treatment-product-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-top: auto;
}

.treatment-product-btn:hover {
    background-color: #333;
    color: #fff;
}

/* Mobil görünüm */
@media screen and (max-width: 768px) {
    .treatment-products-grid {
        gap: 20px;
        margin-top: 30px;
        padding: 10px 0 15px;
    }

    .treatment-product-card {
        padding: 15px;
        flex: 0 0 220px;
        min-width: 220px;
    }

    .treatment-product-image {
        height: 150px;
    }

    .treatment-product-title {
        font-size: 16px;
        min-height: 40px;
    }

    .treatment-product-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

@media screen and (max-width: 440px) {
    .treatment-product-card {
        flex: 0 0 200px;
        min-width: 200px;
    }

    .treatment-product-image {
        height: 140px;
    }
}

.products-page-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    /* Sticky için container yüksekliği içeriğe göre otomatik belirlenmeli */
}

.products-page-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 300;
    letter-spacing: 2px;
    text-align: center;
    color: #474747;
    margin-bottom: 60px;
}

.products-layout {
    display: grid;
    grid-template-columns: minmax(220px, 25%) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    position: relative;
    /* Sticky için kritik: Grid container yüksekliği sağ taraftaki içeriğe (products-right) göre belirlenir */
    /* products-right içindeki tüm içerik yüksekliği grid container'ın yüksekliğini belirler */
    /* Grid'de align-items: start kullanıldığında, container yüksekliği en uzun item'a göre belirlenir */
    /* Bu sayede products-right yüksekliği products-layout yüksekliğini belirler */
    overflow: visible;
}

.products-layout.scrolled {
    display: grid;
    
    gap: 40px;
    align-items: start;
}

/* Sol Taraf - Kategoriler (%25) */
.products-left {
    grid-column: 1;
    align-self: start;
    height: fit-content;
    position: relative;
    z-index: 3;
    background: #ffffff;
}


.products-categories {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.product-category-group {
    width: 100%;
}

/* İç içe kategori grupları için özel stil */
.product-subcategories .product-category-group {
    border: none;
    margin: 0;
}

.product-subcategories .product-category-group .product-category-btn {
    border: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 30px 15px 50px;
    font-size: 16px;
    box-shadow: none;
}

.product-subcategories .product-category-group .product-category-btn:hover {
    background-color: #f5f5f5;
    color: #000;
    border-color: #e0e0e0;
    box-shadow: none;
}

.product-subcategories .product-category-group .product-category-btn.active {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

.product-subcategories .product-category-group .product-subcategories {
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.product-subcategories .product-category-group .product-subcategories .product-subcategory-btn {
    padding-left: 70px;
}

.product-category-btn {
    width: 100%;
    padding: 20px 30px;
    background: transparent;
    border: 2px solid #ddd;
    border-bottom: none;
    text-align: left;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.treatment-area-btn {
    padding: 0;
    border: none;
    overflow: hidden;
    position: relative;
    height: 103px;
}

.treatment-area-btn .treatment-menu-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.treatment-area-btn .treatment-menu-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.35);
}

.treatment-area-btn .treatment-menu-image {
    transition: transform 0.6s ease;
    transform-origin: center;
}

.treatment-area-btn:hover .treatment-menu-image {
    transform: scale(1);
}

.product-category-btn:hover {
    color: #000;
    border-color: #000;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3),
                0 0 15px rgba(0, 0, 0, 0.2),
                0 0 25px rgba(0, 0, 0, 0.1);
}

.product-category-btn.active {
    color: #fff;
    background: #000;
    border-color: #000;
}

.product-subcategories {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-left: 2px solid #ddd;
    border-right: 2px solid #ddd;
}

.product-category-group:last-child .product-subcategories {
    border-bottom: 2px solid #ddd;
}

.product-category-btn.active ~ .product-subcategories {
    max-height: 500px;
}

.product-subcategory-btn {
    width: 100%;
    padding: 15px 30px 15px 50px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-subcategory-btn:hover {
    background-color: #f5f5f5;
    color: #000;
}

.product-subcategory-btn.active {
    background-color: #000;
    color: #fff;
}

/* Sağ Taraf - Tüm İçerik (%75) */
.products-right {
    grid-column: 2;
    min-height: 600px;
    /* KRİTİK: Bu kolonun yüksekliği grid container (products-layout) yüksekliğini belirler */
    /* İçerik yüksekliği (products-content-layout) bu kolonun yüksekliğini belirler */
    /* Bu sayede sticky çalışır */
    /* Grid'de bu kolonun yüksekliği container'ın yüksekliğini belirler */
    height: auto;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.products-layout.scrolled .products-right {
    grid-column: 2;
}

/* İçerik Layout - Yazılar ve Video yan yana */
.products-content-layout {
    display: grid;
    
    gap: 40px;
    align-items: start;
    /* Grid container yüksekliği en uzun item'a (products-text-section) göre belirlenir */
    height: auto;
    min-width: 0;
}

/* Facetem CaHA Dolgu 1.5ml x 1 için özel layout: 50% yazı+resim, 25% video */
.products-content-layout.layout-3-columns {
    grid-template-columns: 50% 35%;
}

.products-content-layout.layout-3-columns .products-media-section {
    display: flex !important;
    visibility: visible !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100% !important;
    position: relative;
    z-index: 10;
    align-self: start; /* Başlıkla hizalamak için */
    margin-top: -45px; /* Başlık yüksekliği kadar yukarı çek (başlık font-size: 32px + line-height ≈ 40-45px) */
}

.products-content-layout.layout-3-columns .products-video-container {
    display: block !important;
    visibility: visible !important;
    width: 100%;
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
    position: relative;
    z-index: 10;
}

/* Alt başlık ürünlerde başlık yüksekliğini hesaplayıp video container'ı başlıkla hizalamak */
.products-content-layout.layout-3-columns .product-detail-title {
    margin-top: 0;
    margin-bottom: 30px;
}

/* urunlerimiz için video yukarı hizalama */
.products-content-layout.layout-urunlerimiz .products-media-section {
    align-self: start;
    margin-top: 0;
}

.products-content-layout.layout-urunlerimiz .products-video-container {
    margin-top: -100px; /* Video yukarı hizalamak için */
}

.products-content-layout.layout-3-columns .bioskin-slider-container {
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* Facetem Genel Layout - 16:15 görsel, altında metin, video görünür */
.products-content-layout.layout-general {
    grid-template-columns: 50% 35%;
    gap: 30px;
}

.products-content-layout.layout-general .products-media-section {
    display: block; /* Video container görünür */
}

.products-content-layout.layout-general .product-image-container {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
    display: block;
}

.products-content-layout.layout-general .product-image-container img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 10px;
}

.products-content-layout.layout-general .product-detail-title {
    margin-bottom: 15px; /* Başlık ile metin arası boşluk azaltıldı */
    margin-top: 0;
}

.products-content-layout.layout-general .product-short-info {
    display: block;
    width: 100%;
    clear: both;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.8;
    color: #666;
    text-align: justify;
    margin-top: 0;
    margin-bottom: 20px;
}

.products-content-layout.layout-general .product-short-info p {
    text-indent: 1.5em; /* Her paragraf başlangıç boşluğu (ilk paragraf dahil) */
    margin: 0 0 1em 0; /* Paragraflar arası boşluk */
}

/* Layout-general için logo container (Facetem ana sayfası) */
.products-content-layout.layout-general .product-logo-container {
    width: 100%;
    max-width: 300px;
    margin: 30px auto 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    clear: both;
}

.products-content-layout.layout-general .product-logo-container img {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 25px;
}

/* ============================================ */
/* Diamond-S Genel Layout - Ayrı class yapısı */
/* ============================================ */
.products-content-layout.layout-general-diamond {
    grid-template-columns: 50% 35%;
    gap: 30px;
}

.products-content-layout.layout-general-diamond .products-media-section {
    display: block;
}

.products-content-layout.layout-general-diamond .product-detail {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.products-content-layout.layout-general-diamond .product-image-container {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
    display: block;
}

.products-content-layout.layout-general-diamond .product-image-container img {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: contain;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 10px;
}

.products-content-layout.layout-general-diamond .product-detail-title {
    margin-bottom: 15px;
    margin-top: 0;
}

.products-content-layout.layout-general-diamond .product-short-info {
    display: block;
    width: 100%;
    clear: both;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.8;
    color: #666;
    text-align: justify;
    margin-top: 0;
    margin-bottom: 20px;
}

.products-content-layout.layout-general-diamond .product-short-info p {
    text-indent: 1.5em;
    margin: 0 0 1em 0;
}

.products-content-layout.layout-general-diamond .product-logo-container {
    width: 100%;
    max-width: 300px;
    margin: 30px auto 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    clear: both;
}

.products-content-layout.layout-general-diamond .product-logo-container img {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 25px;
}

/* ============================================ */
/* Elasty Genel Layout - Ayrı class yapısı */
/* ============================================ */
.products-content-layout.layout-general-elasty {
    grid-template-columns: 50% 35%;
    gap: 30px;
}

.products-content-layout.layout-general-elasty .products-media-section {
    display: block;
}

.products-content-layout.layout-general-elasty .product-detail {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.products-content-layout.layout-general-elasty .product-image-container {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
    display: block;
}

.products-content-layout.layout-general-elasty .product-image-container img {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: contain;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 10px;
}

.products-content-layout.layout-general-elasty .product-detail-title {
    margin-bottom: 15px;
    margin-top: 0;
}

.products-content-layout.layout-general-elasty .product-short-info {
    display: block;
    width: 100%;
    clear: both;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.8;
    color: #666;
    text-align: justify;
    margin-top: 0;
    margin-bottom: 20px;
}

.products-content-layout.layout-general-elasty .product-short-info p {
    text-indent: 1.5em;
    margin: 0 0 1em 0;
}

.products-content-layout.layout-general-elasty .product-logo-container {
    width: 100%;
    max-width: 300px;
    margin: 30px auto 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    clear: both;
}

.products-content-layout.layout-general-elasty .product-logo-container img {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 25px;
}

/* ============================================ */
/* Aileene Genel Layout - Ayrı class yapısı */
/* ============================================ */
.products-content-layout.layout-general-aileene {
    grid-template-columns: 50% 35%;
    gap: 30px;
}

.products-content-layout.layout-general-aileene .products-media-section {
    display: block;
}

.products-content-layout.layout-general-aileene .product-detail {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.products-content-layout.layout-general-aileene .product-image-container {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
    display: block;
}

.products-content-layout.layout-general-aileene .product-image-container img {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: contain;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 10px;
}

.products-content-layout.layout-general-aileene .product-detail-title {
    margin-bottom: 15px;
    margin-top: 0;
}

.products-content-layout.layout-general-aileene .product-short-info {
    display: block;
    width: 100%;
    clear: both;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.8;
    color: #666;
    text-align: justify;
    margin-top: 0;
    margin-bottom: 20px;
}

.products-content-layout.layout-general-aileene .product-short-info p {
    text-indent: 1.5em;
    margin: 0 0 1em 0;
}

.products-content-layout.layout-general-aileene .product-logo-container {
    width: 100%;
    max-width: 300px;
    margin: 30px auto 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    clear: both;
}

.products-content-layout.layout-general-aileene .product-logo-container img {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 25px;
}

/* ============================================ */
/* Elasty Exogen Genel Layout - Ayrı class yapısı */
/* ============================================ */
.products-content-layout.layout-general-elasty-exogen {
    grid-template-columns: 50% 35%;
    gap: 30px;
}

.products-content-layout.layout-general-elasty-exogen .products-media-section {
    display: block;
}

.products-content-layout.layout-general-elasty-exogen .product-detail {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.products-content-layout.layout-general-elasty-exogen .product-image-container {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
    display: block;
}

.products-content-layout.layout-general-elasty-exogen .product-image-container img {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: contain;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 10px;
}

.products-content-layout.layout-general-elasty-exogen .product-detail-title {
    margin-bottom: 15px;
    margin-top: 0;
}

.products-content-layout.layout-general-elasty-exogen .product-short-info {
    display: block;
    width: 100%;
    clear: both;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.8;
    color: #666;
    text-align: justify;
    margin-top: 0;
    margin-bottom: 20px;
}

.products-content-layout.layout-general-elasty-exogen .product-short-info p {
    text-indent: 1.5em;
    margin: 0 0 1em 0;
}

.products-content-layout.layout-general-elasty-exogen .product-logo-container {
    width: 100%;
    max-width: 300px;
    margin: 30px auto 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    clear: both;
}

.products-content-layout.layout-general-elasty-exogen .product-logo-container img {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 25px;
}

.text-black {
    color: #000 !important;
}

/* ============================================ */
/* Bioskin Slider Styles */
/* ============================================ */
.bioskin-slider-container {
    width: 100%;
    max-width: 100%;
    margin: 30px 0;
    position: relative;
    z-index: 1;
    overflow: visible;
    box-sizing: border-box;
}

.bioskin-video-placeholder {
    width: 100%;
    max-width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 400;
    color: #999;
    text-align: center;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
}

.bioskin-video-placeholder p {
    margin: 0;
    padding: 0;
}

.bioskin-select-menu {
    width: 100%;
    max-width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 40px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}

.bioskin-select-menu:hover {
    border-color: #999;
}

.bioskin-select-menu:focus {
    outline: none;
    border-color: #000;
}

.bioskin-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}

.bioskin-slider-track {
    display: flex;
    transition: transform 0.5s ease;
    width: 3600%; /* 36 slides * 100% */
}

.bioskin-slide {
    width: 2.777777%; /* 100% / 36 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bioskin-slide picture,
.yourline-slide picture,
.dermavline-slide picture,
.elastypdo-slide picture,
.elastykanul-slide picture,
.elabokanul-slide picture,
.elastymesoneedle-slide picture,
.bellapdrn-slide picture {
    display: block;
    width: 100%;
}

.bioskin-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    object-fit: contain;
}

.bioskin-description {
    margin: 20px 0;
    padding: 15px;
    padding-bottom: 25px; /* Alt taşma için ekstra padding */
    background-color: #ffffff;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    text-align: center;
    min-height: auto;
    overflow: visible;
    word-wrap: break-word;
}

.bioskin-description .bioskin-title {
    color: #000;
    font-weight: 600;
    display: block;
   
}

.bioskin-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding: 5px 0;
}

.bioskin-pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.bioskin-pagination-btn:hover {
    background-color: #e0e0e0;
    border-color: #999;
}

.bioskin-pagination-btn.active {
    background-color: #333;
    color: #fff;
    border-color: #333;
    font-weight: 700;
}

.bioskin-pagination-ellipsis {
    padding: 0 4px;
    color: #666;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============================================ */
/* Yourline Slider Styles */
/* ============================================ */
.yourline-slider-container {
    width: 100%;
    max-width: 100%;
    margin: 30px 0;
    position: relative;
    z-index: 1;
    overflow: visible;
    box-sizing: border-box;
}

.yourline-select-menu {
    width: 100%;
    max-width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 40px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}

.yourline-select-menu:hover {
    border-color: #999;
}

.yourline-select-menu:focus {
    outline: none;
    border-color: #000;
}

.yourline-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}

.yourline-slider-track {
    display: flex;
    transition: transform 0.5s ease;
    width: 600%; /* 6 slides * 100% */
}

.yourline-slide {
    width: 16.666%; /* 100% / 6 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yourline-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    object-fit: contain;
}

.yourline-description {
    margin: 20px 0;
    padding: 0 12px 25px;
    background-color: #ffffff;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    text-align: center;
    min-height: auto;
    overflow: visible;
    word-wrap: break-word;
}

.yourline-description .yourline-title {
    color: #000;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.yourline-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 40px;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding: 5px 0;
}

.yourline-pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.yourline-pagination-btn:hover {
    background-color: #e0e0e0;
    border-color: #999;
}

.yourline-pagination-btn.active {
    background-color: #333;
    color: #fff;
    border-color: #333;
    font-weight: 700;
}

.yourline-logo-container {
    text-align: center;
    margin-top: 30px;
    width: 100%;
}

.yourline-logo {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Dermavline Slider Styles */
.dermavline-slider-container {
    width: 100%;
    max-width: 100%;
    margin: 30px 0;
    position: relative;
    z-index: 1;
    overflow: visible;
    box-sizing: border-box;
}

.dermavline-select-menu {
    width: 100%;
    max-width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 40px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}

.dermavline-select-menu:hover {
    border-color: #999;
}

.dermavline-select-menu:focus {
    outline: none;
    border-color: #000;
}

.dermavline-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}

.dermavline-slider-track {
    display: flex;
    transition: transform 0.5s ease;
    width: 300%; /* 3 slides * 100% */
}

.dermavline-slide {
    width: 33.333%; /* 100% / 3 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dermavline-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    object-fit: contain;
}

.dermavline-description {
    margin: 20px 0;
    padding: 15px;
    padding-bottom: 25px;
    background-color: #ffffff;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    text-align: center;
    min-height: 200px;
    overflow: visible;
    word-wrap: break-word;
    word-break: normal;
}

.dermavline-description .dermavline-title {
    color: #000;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.dermavline-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding: 5px 0;
}

.dermavline-pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.dermavline-pagination-btn:hover {
    background-color: #e0e0e0;
    border-color: #999;
}

.dermavline-pagination-btn.active {
    background-color: #333;
    color: #fff;
    border-color: #333;
    font-weight: 700;
}

.dermavline-logo-container {
    text-align: center;
    margin-top: 30px;
    width: 100%;
}

.dermavline-logo {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Elasty PDO Slider Styles */
.elastypdo-slider-container {
    width: 100%;
    max-width: 100%;
    margin: 30px 0;
    position: relative;
    z-index: 1;
    overflow: visible;
    box-sizing: border-box;
}

.elastypdo-select-menu {
    width: 100%;
    max-width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 40px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}

.elastypdo-select-menu:hover {
    border-color: #999;
}

.elastypdo-select-menu:focus {
    outline: none;
    border-color: #000;
}

.elastypdo-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}

.elastypdo-slider-track {
    display: flex;
    transition: transform 0.5s ease;
    width: 600%; /* 6 slides * 100% */
}

.elastypdo-slide {
    width: 16.666%; /* 100% / 6 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elastypdo-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    object-fit: contain;
}

.elastypdo-description {
    margin: 20px 0;
    
    padding-bottom: 25px;
    background-color: #ffffff;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    text-align: center;
    min-height: auto;
    overflow: visible;
    word-wrap: break-word;
}

.elastypdo-description .elastypdo-title {
    color: #000;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.elastypdo-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding: 5px 0;
}

.elastypdo-pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.elastypdo-pagination-btn:hover {
    background-color: #e0e0e0;
    border-color: #999;
}

.elastypdo-pagination-btn.active {
    background-color: #333;
    color: #fff;
    border-color: #333;
    font-weight: 700;
}

.elastypdo-pagination-ellipsis {
    padding: 0 8px;
    color: #666;
    font-size: 14px;
    user-select: none;
    display: flex;
    align-items: center;
}

.elastypdo-logo-container {
    text-align: center;
    margin-top: 30px;
    width: 100%;
}

.elastypdo-logo {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Elasty Kanül Slider Styles */
.elastykanul-slider-container {
    width: 100%;
    max-width: 100%;
    margin: 30px 0;
    position: relative;
    z-index: 1;
    overflow: visible;
    box-sizing: border-box;
}

.elastykanul-select-menu {
    width: 100%;
    max-width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 40px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}

.elastykanul-select-menu:hover {
    border-color: #999;
}

.elastykanul-select-menu:focus {
    outline: none;
    border-color: #000;
}

.elastykanul-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}

.elastykanul-slider-track {
    display: flex;
    transition: transform 0.5s ease;
    width: 200%; /* 2 slides * 100% */
}

.elastykanul-slide {
    width: 50%; /* 100% / 2 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elastykanul-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    object-fit: contain;
}

.elastykanul-description {
    margin: 20px 0;
    
    padding-bottom: 25px;
    background-color: #ffffff;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    text-align: center;
    min-height: auto;
    overflow: visible;
    word-wrap: break-word;
}

.elastykanul-description .elastykanul-title {
    color: #000;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.elastykanul-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding: 5px 0;
}

.elastykanul-pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.elastykanul-pagination-btn:hover {
    background-color: #e0e0e0;
    border-color: #999;
}

.elastykanul-pagination-btn.active {
    background-color: #333;
    color: #fff;
    border-color: #333;
    font-weight: 700;
}

/* Elabo Kanül Slider Styles */
.elabokanul-slider-container {
    width: 100%;
    max-width: 100%;
    margin: 30px 0;
    position: relative;
    z-index: 1;
    overflow: visible;
    box-sizing: border-box;
}

.elabokanul-select-menu {
    width: 100%;
    max-width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 40px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}

.elabokanul-select-menu:hover {
    border-color: #999;
}

.elabokanul-select-menu:focus {
    outline: none;
    border-color: #000;
}

.elabokanul-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}

.elabokanul-slider-track {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%; /* 1 slide * 100% */
}

.elabokanul-slide {
    width: 100%; /* 100% / 1 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elabokanul-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    object-fit: contain;
}

.elabokanul-description {
    margin: 20px 0;
    padding: 15px;
    padding-bottom: 25px;
    background-color: #ffffff;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    text-align: center;
    min-height: auto;
    overflow: visible;
    word-wrap: break-word;
}

.elabokanul-description .elabokanul-title {
    color: #000;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.elabokanul-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding: 5px 0;
}

.elabokanul-pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.elabokanul-pagination-btn:hover {
    background-color: #e0e0e0;
    border-color: #999;
}

.elabokanul-pagination-btn.active {
    background-color: #333;
    color: #fff;
    border-color: #333;
    font-weight: 700;
}

.elabokanul-logo-container {
    text-align: center;
    margin-top: 30px;
    width: 100%;
}

.elabokanul-logo {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Elasty Mezo Needle Slider Styles */
.elastymesoneedle-slider-container {
    width: 100%;
    max-width: 100%;
    margin: 30px 0;
    position: relative;
    z-index: 1;
    overflow: visible;
    box-sizing: border-box;
}

.elastymesoneedle-select-menu {
    width: 100%;
    max-width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 40px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}

.elastymesoneedle-select-menu:hover {
    border-color: #999;
}

.elastymesoneedle-select-menu:focus {
    outline: none;
    border-color: #000;
}

.elastymesoneedle-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}

.elastymesoneedle-slider-track {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%; /* 1 slide * 100% */
}

.elastymesoneedle-slide {
    width: 100%; /* 100% / 1 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elastymesoneedle-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    object-fit: contain;
}

.elastymesoneedle-description {
    margin: 20px 0;
    padding: 15px;
    padding-bottom: 25px;
    background-color: #ffffff;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    text-align: center;
    min-height: auto;
    overflow: visible;
    word-wrap: break-word;
}

.elastymesoneedle-description .elastymesoneedle-title {
    color: #000;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.elastymesoneedle-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding: 5px 0;
}

.elastymesoneedle-pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.elastymesoneedle-pagination-btn:hover {
    background-color: #e0e0e0;
    border-color: #999;
}

.elastymesoneedle-pagination-btn.active {
    background-color: #333;
    color: #fff;
    border-color: #333;
    font-weight: 700;
}

.elastymesoneedle-logo-container {
    text-align: center;
    margin-top: 30px;
    width: 100%;
}

.elastymesoneedle-logo {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.bellapdrn-logo-container {
    text-align: center;
    margin-top: 30px;
    width: 100%;
}

.bellapdrn-logo {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Bella PDRN Slider Styles */
.bellapdrn-slider-container {
    width: 100%;
    max-width: 100%;
    margin: 30px 0;
    position: relative;
    z-index: 1;
    overflow: visible;
    box-sizing: border-box;
}

.bellapdrn-select-menu {
    width: 100%;
    max-width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 40px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}

.bellapdrn-select-menu:hover {
    border-color: #999;
}

.bellapdrn-select-menu:focus {
    outline: none;
    border-color: #000;
}

.bellapdrn-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}

.bellapdrn-slider-track {
    display: flex;
    transition: transform 0.5s ease;
    width: 200%; /* 2 slide * 100% */
}

.bellapdrn-slide {
    width: 50%; /* 100% / 2 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bellapdrn-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    object-fit: contain;
}

.bellapdrn-description {
    margin: 20px 0;
    padding: 15px;
    padding-bottom: 25px;
    background-color: #ffffff;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    text-align: center;
    min-height: auto;
    overflow: visible;
    word-wrap: break-word;
}

.bellapdrn-description .bellapdrn-title {
    color: #000;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.bellapdrn-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding: 5px 0;
}

.bellapdrn-pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.bellapdrn-pagination-btn:hover {
    background-color: #e0e0e0;
    border-color: #999;
}

.bellapdrn-pagination-btn.active {
    background-color: #333;
    color: #fff;
    border-color: #333;
    font-weight: 700;
}

.products-text-section {
    width: 100%;
    /* Bu section'ın yüksekliği products-content-layout grid'inin yüksekliğini belirler */
    /* İçerik: product-detail-container */
    height: auto;
    overflow: visible; /* Float'ın düzgün çalışması için */
}

/* Tüm ürünler için: Ürün fotoğrafı solda float left, logo metnin altında */
.products-content-layout.layout-3-columns .product-detail {
    overflow: visible; /* Yazıların resmin altına geçebilmesi için */
}

/* Ürün fotoğrafı (solda float left) */
.products-content-layout.layout-3-columns .product-image-container {
    float: left;
    width: 47%;
    max-width: 300px;
    margin: 0 30px 12px 0;
    padding: 0;
    display: block;
}

.products-content-layout.layout-3-columns .product-image-container img {
    width: 100%;
    height: auto;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 25px;
}

/* Yazılar (resmin yanından başlar) */
.products-content-layout.layout-3-columns .product-short-info {
    display: block;
    overflow: visible;
    width: auto;
    min-width: 0;
}

/* Logo (metnin altında) */
.products-content-layout.layout-3-columns .product-logo-container {
    width: 100%;
    max-width: 300px;
    margin: 30px auto 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    clear: both; /* Float'ı temizle */
}

.products-content-layout.layout-3-columns .product-logo-container img {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 25px;
}

.products-media-section {
    width: 100%;
    position: sticky;
    top: 100px;
    height: fit-content;
}

.product-detail-container {
    width: 100%;
    min-height: 600px;
    /* İçerik yüksekliği otomatik olarak hesaplanır */
    height: auto;
    overflow: visible; /* Float'ın düzgün çalışması için */
}

.product-detail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    color: #999;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 1px;
}

.product-detail-placeholder .placeholder-logo-picture {
    display: block;
    max-width: min(78vw, 300px);
    width: 100%;
    margin: 0 auto;
}

.product-detail-placeholder .placeholder-logo {
    max-width: min(78vw, 300px);
    width: auto;
    height: auto;
    max-height: 28px; /* .header-logo img masaüstü */
    object-fit: contain;
    opacity: 0.8;
}

.product-detail-placeholder .placeholder-video {
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: contain;
}

#treatmentPlaceholder {
    min-height: 0;
}

.product-detail {
    width: 100%;
}

/* Clearfix için */
.products-content-layout.layout-3-columns .product-detail::after {
    content: "";
    display: table;
    clear: both;
}

.product-detail-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 2px;
    color: #474747;
    margin-bottom: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.product-detail-content {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 40px;
}

/* Kısa Bilgi Yazısı */
.product-short-info {
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.5;
    white-space: pre-line; /* Satır sonlarını koru */
    color: #666;
    margin-bottom: 40px;
   
}

/* Logo Container (Uzunlamasına) */
.product-logo-container {
    width: 100%;
    max-width: 300px;
    margin: 40px auto;
    padding: 0; /* Padding kaldırıldı */
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

.product-logo-container img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    padding: 0; /* Padding kaldırıldı */
    margin: 0; /* Margin kaldırıldı */
    border-radius: 25px;
}

/* Marka logoları (PDRN White SVG, Pink Bella PNG vb.) — köşe kırpması / taşma olmasın */
.product-logo-container,
.product-logo-container picture {
    overflow: visible;
}

.product-logo-container img[src$=".svg"],
.product-logo-container img[src*=".svg"],
.product-logo-container img[src*="pinkbellalogo"],
.products-content-layout.layout-general .product-logo-container img[src$=".svg"],
.products-content-layout.layout-general .product-logo-container img[src*="pinkbellalogo"],
.products-content-layout.layout-general-diamond .product-logo-container img[src$=".svg"],
.products-content-layout.layout-general-diamond .product-logo-container img[src*="pinkbellalogo"],
.products-content-layout.layout-general-elasty .product-logo-container img[src$=".svg"],
.products-content-layout.layout-general-elasty .product-logo-container img[src*="pinkbellalogo"],
.products-content-layout.layout-general-aileene .product-logo-container img[src$=".svg"],
.products-content-layout.layout-general-aileene .product-logo-container img[src*="pinkbellalogo"],
.products-content-layout.layout-general-elasty-exogen .product-logo-container img[src$=".svg"],
.products-content-layout.layout-general-elasty-exogen .product-logo-container img[src*="pinkbellalogo"],
.products-content-layout.layout-3-columns .product-logo-container img[src$=".svg"],
.products-content-layout.layout-3-columns .product-logo-container img[src*="pinkbellalogo"] {
    border-radius: 0;
    object-fit: contain;
    object-position: center center;
    max-width: min(100%, 320px);
    width: 100%;
    height: auto;
    padding: 6px 10px;
    box-sizing: border-box;
}

/* Video Container (Artık products-media-section içinde) */
.products-video-container {
    width: 100%;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
    visibility: visible;
}

.products-video-container.animate-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.products-video {
    width: 100%;
    height: auto;
    
    aspect-ratio: 9 / 16 !important; /* Video aspect ratio - 9:16 formatı (dikey) */
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.products-video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    background-color: #f5f5f5;
    border-radius: 10px;
    color: #999;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 300;
}

.products-layout.scrolled .products-video-container {
    width: 100%;
   
}

/* Layout her zaman grid olarak kalmalı - scroll sırasında değişmemeli */
.products-layout,
.products-layout.scrolled {
    display: grid !important;
    grid-template-columns: 25% 75% !important;
}

/* Zebra Modeli Bilgi Akışı Bölümü (products-right içinde, products-content-layout'ın altında, 100% width) */
.product-zebra-section {
    width: 100vw; /* Viewport genişliğinin tamamı */
    margin-left: calc(-50vw + 50%); /* products-right'ın sol kenarından başlayarak sayfanın soluna kadar */
    margin-right: calc(-50vw + 50%); /* products-right'ın sağ kenarından başlayarak sayfanın sağına kadar */
    background-color: #ffffff;
    padding: 60px 40px; /* products-page-section padding'i ile uyumlu */
    margin-top: 60px;
    /* Video ve text layout'unu etkilemez - products-content-layout'ın altında */
    clear: both;
    position: relative;
}

.product-zebra-container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Zebra Blok - İlk (Resim Sol, Yazı Sağ), Sonraki (Yazı Sol, Resim Sağ) */
.product-zebra-block {
    display: flex;
    gap: 30px;
    margin-bottom: 45px;
    align-items: center;
}

.product-zebra-block:first-child {
    margin-top: 0;
    /* İlk blok: Resim solda, yazı sağda */
    flex-direction: row;
}

/* İkinci blok ve sonrası zaten DOM'da yazı önce, resim sonra şeklinde eklendiği için flex-direction: row yeterli */

.product-zebra-text {
    flex: 0 0 50%; /* Yazı %50 */
    padding: 15px;
}

.product-zebra-text h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #474747;
    margin-bottom: 15px;
}

.product-zebra-text p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.8;
    color: #666;
}

.product-zebra-image {
    flex: 0 0 50%; /* Resim %50 */
    aspect-ratio: 1; /* Web: Kare formatı (1:1) */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.product-zebra-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile Responsive - Products Page */
@media screen and (max-width: 1024px) {
    .products-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 40px;
    }

    .products-left {
        grid-column: 1 !important;
        position: relative;
        top: 0;
    }

    .products-right {
        grid-column: 1 !important;
        width: 100%;
    }

    .products-content-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 40px;
    }

    .products-content-layout.layout-3-columns {
        grid-template-columns: 1fr !important;
    }

    .products-content-layout.layout-general {
        grid-template-columns: 1fr !important;
    }

    .products-content-layout.layout-general .product-image-container img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    /* Mobilde float'ı kaldır */
    .products-content-layout.layout-3-columns .product-logo-container {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px auto !important;
    }

    /* Mobilde float'ı kaldır */
    .products-content-layout.layout-3-columns .product-logo-container {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 20px auto;
    }

    .products-media-section {
        position: relative;
        top: 0;
    }

    .products-video-container {
        width: 100%;
        margin-top: 0;
    }

    .products-video {
        aspect-ratio: 9 / 16 !important; /* Mobilde de 9:16 formatı (dikey) */
    }

    .product-logo-container {
        max-width: 100%;
    }

    .product-zebra-section {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding: 45px 20px; /* products-page-section padding'i ile uyumlu (20px) */
    }

    .product-zebra-container {
        padding: 0 20px;
    }

    .product-zebra-block {
        flex-direction: row !important; /* Mobilde de yan yana */
        gap: 22px;
        margin-bottom: 34px;
    }

    .product-zebra-text {
        flex: 0 0 50% !important;
        width: 50% !important;
        padding: 11px;
    }

    .product-zebra-image {
        flex: 0 0 50% !important;
        width: 50% !important;
        aspect-ratio: 1 !important; /* Mobil: Kare formatı (1:1) */
    }

}

.products-layout.scrolled .products-left {
    flex: none;
    grid-column: 1;
    position: sticky;
    top: 100px;
    height: fit-content;
    align-self: start;
   
    overflow-y: auto;
}

.products-layout.scrolled .products-scrolled-video-container {
    grid-column: 3;
    height: fit-content;
    position: sticky;
    top: 100px;
    align-self: start;
}

/* Mobile Products Page */
@media screen and (max-width: 1024px) {
    .products-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 40px;
    }

    .products-layout.scrolled {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .products-layout.scrolled .products-left {
        grid-column: 1 !important;
        width: 100%;
    }

    .products-layout.scrolled .products-right {
        grid-column: 1 !important;
        width: 100%;
    }

    .products-layout.scrolled .products-scrolled-video-container {
        grid-column: auto;
        order: 3;
        width: 100%;
        padding-right: 0;
        position: relative;
        top: 0;
    }

    .products-scrolled-video {
        width: 100% !important;
        aspect-ratio: 16 / 9;
    }

    .products-left {
        flex: 1;
        position: relative;
        top: 0;
        width: 100%;
    }

    .products-right {
        flex: 1;
        min-height: 400px;
    }

    .product-detail-container {
        min-height: 400px;
    }

    .product-detail-placeholder {
        min-height: 400px;
    }
}

@media screen and (max-width: 768px) {
    /* Tedavi Alanlarımız - mobilde tek sütun */
    .products-layout {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
    }

    .products-left {
        width: 100%;
        position: relative;
        z-index: 2;
        background: #ffffff;
        padding: 0;
    }

    .products-categories {
        gap: 0;
    }

    .treatment-area-btn {
        height: 96px;
    }

    .treatment-area-btn .treatment-menu-image {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .products-right {
        width: 100%;
        position: relative;
        z-index: 1;
        margin-top: 10px;
    }

    .products-content-layout {
        min-width: 0;
    }

    .products-page-section {
        padding: 100px 20px 60px;
        margin-top: 100vh;
    }

    .products-hero-video-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 1;
        transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform, width, height, top, left;
    }

    .products-hero-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 9 / 16 !important; /* 16:9 formatı */
        transition: all 1.2s ease cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Kozmetik: mobilde video viewport'u tam kaplasın (letterbox yok) */
    #cosmeticHeroVideo.products-hero-video-container {
        width: 100%;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: -webkit-fill-available;
    }

    #cosmeticHeroVideo .products-hero-video {
        width: 100% !important;
        height: 100% !important;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover !important;
        object-position: center center;
        aspect-ratio: unset !important;
        transform: none !important;
        background: #a9c1c3;
    }

    .products-hero-video-container.scrolled {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none;
        z-index: 2;
        padding-top: 80px;
        border-radius: 10px;
        overflow: visible;
        box-shadow: none;
        background: transparent;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .products-hero-video-container.scrolled .products-hero-video {
        width: 100%;
        height: auto !important;
        object-fit: cover;
        aspect-ratio: 16 / 9 !important;
        transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .products-page-title {
        font-size: 32px;
        margin-bottom: 20px; /* Mobilde margin'i azalttık */
    }
    
    .treatment-products-grid {
        margin-top: 20px !important; /* Mobilde margin-top'u azalttık */
    }

    .products-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .products-layout.scrolled {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .products-layout.scrolled .products-hero-video-container {
        order: 0;
        width: 100% !important;
        padding-right: 0;
        position: relative !important;
        top: 0 !important;
        margin-bottom: 20px;
        padding-top: 80px;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .products-layout.scrolled .products-left {
        grid-column: 1 !important;
        width: 100%;
    }

    .products-layout.scrolled .products-right {
        grid-column: 1 !important;
        width: 100%;
    }

    .products-layout.scrolled .products-scrolled-video-container {
        display: none;
    }

    .product-category-btn {
        
        font-size: 16px;
    }

    .product-subcategory-btn {
        padding: 12px 20px 12px 40px;
        font-size: 14px;
    }

    .product-detail-title {
        font-size: 28px;
    }

    .product-detail-content {
        font-size: 14px;
    }
}

@media screen and (max-width: 440px) {
    .products-page-section {
        margin-top: 100vh;
    }

    .products-hero-video-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform, width, height, top, left;
    }

    #cosmeticHeroVideo.products-hero-video-container {
        height: 100vh;
        height: 100dvh;
        min-height: -webkit-fill-available;
    }

    .products-hero-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 16 / 9; /* 16:9 formatı */
        transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    #cosmeticHeroVideo .products-hero-video {
        aspect-ratio: unset !important;
        object-fit: cover !important;
        min-width: 100%;
        min-height: 100%;
        transform: none !important;
    }

    .products-hero-video-container.scrolled {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none;
        z-index: 2;
        padding-top: 60px;
        border-radius: 10px;
        overflow: visible;
        box-shadow: none;
        background: transparent;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .products-hero-video-container.scrolled .products-hero-video {
        width: 100%;
        height: auto !important;
        object-fit: contain;
        aspect-ratio: 16 / 9 !important;
        display: block;
        transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .products-page-title {
        font-size: 24px;
    }

    .products-layout.scrolled {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .products-layout.scrolled .products-left {
        grid-column: 1 !important;
        position: relative;
        top: 0;
        width: 100%;
    }

    .products-layout.scrolled .products-right {
        grid-column: 1 !important;
    }

    .products-layout.scrolled .products-scrolled-video-container {
        grid-column: 1 !important;
        width: 100%;
        padding-right: 0;
    }

    .products-scrolled-video {
        width: 100% !important;
        aspect-ratio: 16 / 9;
    }

    .product-category-btn {
       
        font-size: 14px;
    }

    .product-subcategory-btn {
        padding: 10px 15px 10px 30px;
        font-size: 13px;
    }

    .product-detail-title {
        font-size: 22px;
    }

    .product-detail-content {
        font-size: 13px;
    }
}

/* İletişim Formu Section */
.contact-section {
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    padding: 80px 40px;
    position: relative;
    /* Mobilde .products-hero-video-container z-index:1; formun üstte görünmesi için */
    z-index: 2;
}

.contact-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.contact-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 300;
    letter-spacing: 2px;
    color: #474747;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.contact-title.animate {
    opacity: 1;
    transform: translateY(0);
}

.contact-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #666;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.contact-subtitle.animate {
    opacity: 1;
    transform: translateY(0);
}

.contact-form {
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
}

.form-row {
    margin-bottom: 25px;
}

.form-group {
    width: 100%;
}

.form-group label {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #000;
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #000;
    background-color: #ffffff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-submit-btn {
    width: 100%;
    padding: 18px 40px;
    background-color: #000;
    color: #fff;
    border: 2px solid #000;
    border-radius: 5px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.contact-submit-btn:hover {
    background-color: transparent;
    color: #000;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3),
                0 0 15px rgba(0, 0, 0, 0.2),
                0 0 25px rgba(0, 0, 0, 0.1);
}

.contact-submit-btn:active {
    transform: translateY(1px);
}

/* Mobile Contact Form */
@media screen and (max-width: 768px) {
    .contact-section {
        padding: 60px 20px;
    }

    .contact-title {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .contact-subtitle {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .form-row {
        margin-bottom: 20px;
    }

    .form-group input,
    .form-group textarea {
        padding: 12px;
        font-size: 14px;
    }

    .contact-submit-btn {
        padding: 15px 30px;
        font-size: 16px;
    }
}

@media screen and (max-width: 440px) {
    .contact-title {
        font-size: 24px;
    }

    .contact-subtitle {
        font-size: 14px;
    }

    .form-group label {
        font-size: 12px;
    }

    .form-group input,
    .form-group textarea {
        padding: 10px;
        font-size: 13px;
    }

    .contact-submit-btn {
        padding: 12px 25px;
        font-size: 14px;
    }
}

/* Mobile Bioskin Pagination */
@media screen and (max-width: 768px) {
    .bioskin-description {
        margin: 15px 0;
        padding: 12px;
        font-size: 13px;
        line-height: 1.5;
        min-height: 60px;
    }

    .bioskin-slider-dots {
        gap: 3px;
        margin-top: 15px;
        padding: 3px 0;
    }

    .bioskin-pagination-btn {
        min-width: 28px;
        height: 28px;
        padding: 3px 6px;
        border-radius: 5px;
        font-size: 11px;
    }

    .bioskin-pagination-ellipsis {
        padding: 0 3px;
        font-size: 11px;
    }
    
    /* Yourline responsive styles */
    .yourline-description {
        margin: 15px 0;
        
        font-size: 13px;
        line-height: 1.5;
        min-height: 60px;
    }

    .yourline-slider-dots {
        gap: 3px;
        margin-top: 15px;
        padding: 3px 0;
    }

    .yourline-pagination-btn {
        min-width: 28px;
        height: 28px;
        padding: 3px 6px;
        border-radius: 5px;
        font-size: 11px;
    }
}

@media screen and (max-width: 480px) {
    .bioskin-description {
        margin: 12px 0;
        padding: 10px;
        font-size: 12px;
        line-height: 1.4;
        min-height: 50px;
    }

    .bioskin-slider-dots {
        gap: 2px;
        margin-top: 12px;
        padding: 2px 0;
    }

    .bioskin-pagination-btn {
        min-width: 24px;
        height: 24px;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 10px;
    }

    .bioskin-pagination-ellipsis {
        padding: 0 2px;
        font-size: 10px;
    }
    
    /* Yourline responsive styles */
    .yourline-description {
        margin: 12px 0;
       
        font-size: 12px;
        line-height: 1.4;
        min-height: 50px;
    }

    .yourline-slider-dots {
        gap: 2px;
        margin-top: 12px;
        padding: 2px 0;
    }

    .yourline-pagination-btn {
        min-width: 24px;
        height: 24px;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 10px;
    }

    .dermavline-description {
        margin: 15px 0;
        padding: 12px;
        font-size: 13px;
        line-height: 1.5;
        min-height: 60px;
    }

    .dermavline-slider-dots {
        gap: 3px;
        margin-top: 15px;
        padding: 3px 0;
    }

    .dermavline-pagination-btn {
        min-width: 28px;
        height: 28px;
        padding: 3px 6px;
        border-radius: 5px;
        font-size: 11px;
    }
}

@media screen and (max-width: 480px) {
    .dermavline-description {
        margin: 12px 0;
        padding: 10px;
        font-size: 12px;
        line-height: 1.4;
        min-height: 50px;
    }

    .dermavline-slider-dots {
        gap: 2px;
        margin-top: 12px;
        padding: 2px 0;
    }

    .dermavline-pagination-btn {
        min-width: 24px;
        height: 24px;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 10px;
    }

    .elastypdo-description {
        margin: 15px 0;
        padding: 12px;
        font-size: 13px;
        line-height: 1.5;
        min-height: 60px;
    }

    .elastypdo-slider-dots {
        gap: 3px;
        margin-top: 15px;
        padding: 3px 0;
    }

    .elastypdo-pagination-btn {
        min-width: 28px;
        height: 28px;
        padding: 3px 6px;
        border-radius: 5px;
        font-size: 11px;
    }

    /* Bella PDRN responsive styles */
    .bellapdrn-description {
        margin: 15px 0;
        padding: 12px;
        font-size: 13px;
        line-height: 1.5;
        min-height: 60px;
    }

    .bellapdrn-slider-dots {
        gap: 3px;
        margin-top: 15px;
        padding: 3px 0;
    }

    .bellapdrn-pagination-btn {
        min-width: 28px;
        height: 28px;
        padding: 3px 6px;
        border-radius: 5px;
        font-size: 11px;
    }
}

@media screen and (max-width: 480px) {
    .elastypdo-description {
        margin: 12px 0;
        padding: 10px;
        font-size: 12px;
        line-height: 1.4;
        min-height: 50px;
    }

    .elastypdo-slider-dots {
        gap: 2px;
        margin-top: 12px;
        padding: 2px 0;
    }

    .elastypdo-pagination-btn {
        min-width: 24px;
        height: 24px;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 10px;
    }

    .elastykanul-description {
        margin: 15px 0;
        padding: 12px;
        font-size: 13px;
        line-height: 1.5;
        min-height: 60px;
    }

    .elastykanul-slider-dots {
        gap: 3px;
        margin-top: 15px;
        padding: 3px 0;
    }

    .elastykanul-pagination-btn {
        min-width: 28px;
        height: 28px;
        padding: 3px 6px;
        border-radius: 5px;
        font-size: 11px;
    }
}

@media screen and (max-width: 480px) {
    .elastykanul-description {
        margin: 12px 0;
        padding: 10px;
        font-size: 12px;
        line-height: 1.4;
        min-height: 50px;
    }

    .elastykanul-slider-dots {
        gap: 2px;
        margin-top: 12px;
        padding: 2px 0;
    }

    .elastykanul-pagination-btn {
        min-width: 24px;
        height: 24px;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 10px;
    }

    .elabokanul-description {
        margin: 15px 0;
        padding: 12px;
        font-size: 13px;
        line-height: 1.5;
        min-height: 60px;
    }

    .elabokanul-slider-dots {
        gap: 3px;
        margin-top: 15px;
        padding: 3px 0;
    }

    .elabokanul-pagination-btn {
        min-width: 28px;
        height: 28px;
        padding: 3px 6px;
        border-radius: 5px;
        font-size: 11px;
    }
}

@media screen and (max-width: 480px) {
    .elabokanul-description {
        margin: 12px 0;
        padding: 10px;
        font-size: 12px;
        line-height: 1.4;
        min-height: 50px;
    }

    .elabokanul-slider-dots {
        gap: 2px;
        margin-top: 12px;
        padding: 2px 0;
    }

    .elabokanul-pagination-btn {
        min-width: 24px;
        height: 24px;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 10px;
    }

    /* Elasty Mezo Needle responsive styles */
    .elastymesoneedle-description {
        margin: 15px 0;
        padding: 12px;
        font-size: 13px;
        line-height: 1.5;
        min-height: 60px;
    }

    .elastymesoneedle-slider-dots {
        gap: 3px;
        margin-top: 15px;
        padding: 3px 0;
    }

    .elastymesoneedle-pagination-btn {
        min-width: 28px;
        height: 28px;
        padding: 3px 6px;
        border-radius: 5px;
        font-size: 11px;
    }
}

@media screen and (max-width: 480px) {
    .elastymesoneedle-description {
        margin: 12px 0;
        padding: 10px;
        font-size: 12px;
        line-height: 1.4;
        min-height: 50px;
    }

    .elastymesoneedle-slider-dots {
        gap: 2px;
        margin-top: 12px;
        padding: 2px 0;
    }

    .elastymesoneedle-pagination-btn {
        min-width: 24px;
        height: 24px;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 10px;
    }

    /* Bella PDRN responsive styles */
    .bellapdrn-description {
        margin: 12px 0;
        padding: 10px;
        font-size: 12px;
        line-height: 1.4;
        min-height: 50px;
    }

    .bellapdrn-slider-dots {
        gap: 2px;
        margin-top: 12px;
        padding: 2px 0;
    }

    .bellapdrn-pagination-btn {
        min-width: 24px;
        height: 24px;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 10px;
    }
}

/* Blog Page Styles */
.blog-content-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    padding: 40px 40px 60px;
    text-align: center;
}

.blog-placeholder-text {
    max-width: 800px;
    margin: 0 auto 40px;
}

.blog-placeholder-logo {
    margin-top: 40px;
}

/* Masaüstü: .header-logo img ile aynı; mobil: aşağıdaki @768 ile header mobil ile aynı */
.blog-placeholder-logo img {
    display: block;
    width: auto;
    max-width: min(78vw, 300px);
    height: auto;
    max-height: 28px;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    opacity: 0.9;
}

.blog-placeholder-text p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: 0.5px;
    color: #666;
    text-align: justify;
    margin: 0;
}

.blog-article {
    padding: 40px;
    max-width: 100%;
    overflow: visible;
}

/* Blog görseli solda float left (Olidia ürünü gibi) */
.blog-article-image {
    float: left;
    width: 100%;
    max-width: 300px;
    margin: 0 30px 12px 0;
    padding: 0;
    display: block;
}

.blog-article-image picture {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.blog-article-image img.blog-image {
    width: 100%;
    height: auto;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 25px;
}

.blog-article-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 2px;
    color: #000;
    margin-bottom: 30px;
    line-height: 1.3;
    text-align: center;
    clear: both;
}

.blog-article-content {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.8;
    color: #666;
    text-align: justify;
    display: block;
    overflow: visible;
    width: auto;
    min-width: 0;
}

.blog-article-content p {
    margin-bottom: 20px;
}

/* Clearfix için */
.blog-article::after {
    content: "";
    display: table;
    clear: both;
}

.blog-article-content h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #000;
    margin-top: 30px;
    margin-bottom: 15px;
}

.blog-article-content ul,
.blog-article-content ol {
    margin-bottom: 20px;
    padding-left: 30px;
}

.blog-article-content li {
    margin-bottom: 10px;
}

.blog-article-content strong {
    font-weight: 600;
    color: #000;
}

.blog-topic-btn.active {
    background: #000;
    color: #fff;
}

/* Blog + Katalog sol menü kutusu: ürün sayfasındaki border-bottom:none yüzünden dış/ara çizgiler zayıf kalıyordu */
.blog-page-section .products-categories,
.catalog-page-section .products-categories {
    border: 2px solid #ddd;
    box-sizing: border-box;
}

.blog-page-section .products-categories .product-category-group .product-category-btn {
    border: none;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: none;
}

.blog-page-section .products-categories .product-category-group .product-category-btn:hover {
    box-shadow: none;
    border-color: #e0e0e0;
}

.blog-page-section .products-categories .product-category-group:last-child .product-category-btn {
    border-bottom: none;
}

.blog-page-section .products-categories .product-category-btn.active {
    border-left: none;
    border-right: none;
    border-color: #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.blog-page-section .products-categories .product-category-group:last-child .product-category-btn.active {
    border-bottom: none;
}

/* Katalog: butonlar doğrudan .products-categories altında (product-category-group yok) */
.catalog-page-section .products-categories .product-category-btn {
    border: none;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: none;
}

.catalog-page-section .products-categories .product-category-btn:hover {
    box-shadow: none;
    border-color: #e0e0e0;
}

.catalog-page-section .products-categories .product-category-btn:last-child {
    border-bottom: none;
}

.catalog-page-section .products-categories .product-category-btn.active {
    border-left: none;
    border-right: none;
    border-color: #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.catalog-page-section .products-categories .product-category-btn.active:last-child {
    border-bottom: none;
}

@media screen and (max-width: 768px) {
    .blog-article {
        padding: 20px;
    }

    .blog-article-image {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px 0;
    }

    .blog-article-title {
        font-size: 24px;
        margin-bottom: 20px;
        letter-spacing: 1px;
    }

    .blog-article-content {
        font-size: 14px;
        line-height: 1.8;
        width: 100%;
    }

    .blog-article-content h3 {
        font-size: 20px;
        margin-top: 25px;
        margin-bottom: 12px;
        letter-spacing: 0.5px;
    }

    .blog-article-content ul,
    .blog-article-content ol {
        padding-left: 20px;
    }

    .blog-content-placeholder {
        min-height: 400px;
        padding: 60px 20px;
    }

    .blog-placeholder-text {
        margin-bottom: 30px;
    }

    .blog-placeholder-logo {
        margin-top: 30px;
    }

    .blog-placeholder-logo img {
        max-width: 82vw;
        max-width: min(82vw, 200px);
        max-height: 24px;
        height: 24px;
        /* .header .header-logo img @768 ile bire bir */
    }

    .blog-placeholder-text {
        max-width: 100%;
    }

    .blog-placeholder-text p {
        font-size: 16px;
        text-align: left;
    }

    /* Ürün / katalog sayfa-içi placeholder: mobil = header */
    .product-detail-placeholder .placeholder-logo-picture {
        max-width: min(82vw, 200px) !important;
    }

    .product-detail-placeholder .placeholder-logo {
        max-width: min(82vw, 200px) !important;
        max-height: 24px !important;
    }

    .catalog-placeholder .placeholder-logo {
        max-width: min(82vw, 200px) !important;
        max-height: 24px !important;
    }
}

/* ============================================
   HAKKIMIZDA SAYFASI STİLLERİ
   ============================================ */

.about-page-section {
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    padding: 120px 40px 80px;
    position: relative;
    margin-top: 100vh;
    z-index: 2;
    overflow: visible;
}

.about-page-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.about-page-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 64px;
    font-weight: 300;
    letter-spacing: 4px;
    margin-bottom: 80px;
    text-align: center;
    color: #000;
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Fade-in-up animasyonu */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.fade-in-up.animate {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.about-section {
    width: 100%;
}

.about-section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 30px;
    color: #000;
    text-align: left;
}

.about-section-content {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.8;
    color: #666;
    text-align: justify;
}

.about-section-content p {
    margin-bottom: 20px;
}

.about-section-content p:last-child {
    margin-bottom: 0;
}

/* Values Grid */
/* İletişim bilgisi satırları: tel / mail / harita — paragraf rengi (#666); :visited / UA mavi ezilmesin */
a.contact-page-link {
    color: inherit;
    text-decoration: none;
}

a.contact-page-link:hover {
    text-decoration: underline;
    opacity: 0.9;
}

.about-value-item a.contact-page-link,
.about-value-item a.contact-page-link:visited,
.about-value-item a.contact-page-link:active {
    color: #666;
}

.about-value-item a.contact-page-link:hover {
    color: #666;
    opacity: 0.85;
    text-decoration: underline;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 30px;
}

.about-value-item {
    padding: 30px;
    background-color: #fafafa;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-value-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-value-item h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: #000;
}

.about-value-item p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 0;
}

/* Product List */
.about-product-list,
.about-certification-list {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

.about-product-list li,
.about-certification-list li {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
}

.about-product-list li::before,
.about-certification-list li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: #000;
    font-size: 20px;
}

.about-product-list li strong,
.about-certification-list li strong {
    font-weight: 600;
    color: #000;
}

/* Responsive Styles */
@media screen and (max-width: 1024px) {
    .about-page-section {
        padding: 100px 30px 60px;
    }

    .about-page-title {
        font-size: 48px;
        margin-bottom: 60px;
    }

    .about-section-title {
        font-size: 32px;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media screen and (max-width: 768px) {
    .about-page-section {
        padding: 100px 20px 60px;
        margin-top: 100vh;
    }

    .about-page-title {
        font-size: 36px;
        letter-spacing: 2px;
        margin-bottom: 40px;
    }

    .about-content {
        gap: 40px;
    }

    .about-section-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .about-section-content {
        font-size: 16px;
        text-align: left;
    }

    .about-values-grid {
        gap: 20px;
    }

    .about-value-item {
        padding: 20px;
    }

    .about-value-item h3 {
        font-size: 20px;
    }

    .about-value-item p {
        font-size: 14px;
    }

    .about-product-list li,
    .about-certification-list li {
        font-size: 16px;
        padding-left: 25px;
    }
}

/* Hakkımızda sayfası için özel header stilleri - 400px'e kadar siyah menu ve search */
.about-page .header:not(.scrolled) .hamburger-menu span {
    background-color: #000000 !important;
}

.about-page .header:not(.scrolled) .hamburger-menu:hover span {
    background-color: #333333 !important;
}

.about-page .header:not(.scrolled) .search-icon {
    color: #000000 !important;
}

.about-page .header:not(.scrolled) .search-icon:hover {
    color: #333333 !important;
}

/* ==================== CATALOG PAGE STYLES ==================== */
.catalog-pdf-container {
    width: 100%;
    height: 100%;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background-color: #f9f9f9;
    gap: 12px;
}

.catalog-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 80vh;
}

.catalog-placeholder .placeholder-logo {
    max-width: min(78vw, 300px);
    max-height: 28px; /* header .header-logo img (masaüstü) */
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.3;
}

.catalog-btn.active {
    background-color: #000;
    color: #fff;
}

.catalog-pdf-frame {
    width: 100%;
    flex: 1 1 auto;
    min-height: 80vh;
    height: 80vh;
    max-height: 85vh;
}

.catalog-pdf-open-new {
    display: none;
    align-self: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px;
    color: #333;
    text-decoration: underline;
    padding: 4px 8px;
}

.catalog-pdf-open-new:active {
    opacity: 0.7;
}

/* Responsive adjustments for catalog page */
@media screen and (max-width: 768px) {
    .catalog-pdf-container {
        min-height: 0;
        max-height: none;
        height: auto;
        -webkit-overflow-scrolling: touch;
    }

    .catalog-pdf-frame {
        min-height: 72vh;
        height: 72vh;
        max-height: 78vh;
        width: 100%;
        max-width: 100%;
    }

    .catalog-pdf-container.has-pdf .catalog-pdf-open-new {
        display: inline-block;
        align-self: center;
    }
}