/* TIMELESS BEAUTY Section - Background Image Extended to Breadcrumb Line */
/* Breadcrumb yüksekliği: padding (0.45rem top + 0.45rem bottom) + içerik (~1rem) + border (1px) + margin-bottom (0.5rem) ≈ 2.4rem */
.about-section-1-bg {
    top: -5.4rem; /* Section padding (3rem) + breadcrumb toplam yüksekliği (2.4rem) */
    height: calc(100% + 5.4rem);
    left: 0;
}

@media (min-width: 640px) {
    /* Mobile: margin-bottom 1.5rem, toplam ≈ 2.9rem */
    .about-section-1-bg {
        top: -5.9rem; /* 3rem + 2.9rem */
        height: calc(100% + 5.9rem);
    }
}

@media (min-width: 768px) {
    /* Tablet: padding 0.5rem, section padding 5rem, margin-bottom 0.5rem, toplam ≈ 2.5rem */
    .about-section-1-bg {
        top: -7.5rem; /* 5rem + 2.5rem */
        height: calc(100% + 7.5rem);
    }
}

@media (min-width: 1024px) {
    /* Desktop: padding 0.55rem, section padding 8rem, margin-bottom 0.5rem, toplam ≈ 2.6rem */
    .about-section-1-bg {
        top: -10.6rem; /* 8rem + 2.6rem */
        height: calc(100% + 10.6rem);
    }
}

/* Dynamic background images via data attributes and CSS custom properties */
[data-bg-about-section1] {
    background-size: cover;
    background-position: center;
    background-image: var(--bg-about-section1, none);
}

[data-bg-about-section2] {
    background-size: cover;
    background-position: center;
    background-image: var(--bg-about-section2, none);
}

[data-bg-about-section3] {
    background-size: cover;
    background-position: center;
    background-image: var(--bg-about-section3, none);
}

/* Light Theme - About hero background image visibility */
body.theme-light .about-hero-bg-image {
    opacity: 0.9 !important; /* Light temada çok daha görünür (default opacity-20 yerine) */
}

/* Light Theme - About hero gradient overlay - tamamen kaldır */
body.theme-light section.relative[class*="min-h"].bg-marque-black .about-hero-overlay,
body.theme-light .about-hero-overlay {
    display: none !important;
}

/* Dark Theme - About hero overlay - hafif karartma (diğer sayfalardaki gibi) */
body.theme-dark .about-hero-overlay {
    display: block !important;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.55)) !important;
}

/* ============================================================
   ABOUT: Background images full visibility (Light + Dark)
   Goal: loaded background images should appear clear in both themes
   ============================================================ */

/* Hero background image */
body.theme-light .about-hero-bg-image,
body.theme-dark .about-hero-bg-image {
    opacity: 1 !important;
    filter: none !important;
}

/* Hero background video */
body.theme-light section.relative[class*="min-h"].bg-marque-black video,
body.theme-dark section.relative[class*="min-h"].bg-marque-black video {
    opacity: 1 !important;
    filter: none !important;
}

/* About sections: background visibility tuning */

/* Section 3 value item icons: dark gray/charcoal color */
.about-value-item svg.text-marque-gold,
section.bg-gray-50 .about-value-item svg.text-marque-gold {
    color: #4A4A4A !important; /* Dark gray/charcoal color */
}

/* Section 3 value item icons: darker gold color in dark theme (override) */
body.theme-dark .about-value-item svg.text-marque-gold,
body.theme-dark section.bg-gray-50 .about-value-item svg.text-marque-gold {
    color: #4A4A4A !important; /* Dark gray/charcoal color */
}

/* ============================================================
   ABOUT: Content headings in light theme
   - Section 1 & 2 içerik başlıkları (h2) light temada beyaz olmamalı
   - Global hero başlık kurallarını geçmek için daha spesifik selector
   ============================================================ */

html body.theme-light .about-section-1-text h2,
html body.theme-light .about-section-2-text h2 {
    color: #111827 !important; /* Koyu gri (nötr, beyaz değil, yüksek kontrast) */
}


/* Section 3: Info boxes - 20% smaller (all dimensions scaled to 80%) */
.about-value-item {
    padding: 1.6rem !important; /* p-8 (2rem) * 0.8 = 1.6rem */
}

/* Icon container margin */
.about-value-item > div.mb-6 {
    margin-bottom: 1.2rem !important; /* mb-6 (1.5rem) * 0.8 = 1.2rem */
}

/* Icon size */
.about-value-item svg {
    width: 3.2rem !important; /* w-16 (4rem) * 0.8 = 3.2rem */
    height: 3.2rem !important; /* h-16 (4rem) * 0.8 = 3.2rem */
}

/* Heading font size and margin */
.about-value-item h3 {
    font-size: 1.25rem !important; /* mobil */
    margin-bottom: 0.8rem !important; /* mb-4 (1rem) * 0.8 = 0.8rem */
    font-weight: 700 !important; /* Bold */
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .about-value-item h3 {
        font-size: 1.375rem !important; /* tablet */
    }
}

@media (min-width: 1024px) {
    .about-value-item h3 {
        font-size: 1.25rem !important; /* masaüstü — önceki md değeri */
    }
}

/* Text font size */
.about-value-item p {
    font-size: 0.875rem !important; /* mobil */
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .about-value-item p {
        font-size: 1rem !important; /* tablet */
    }
}

@media (min-width: 1024px) {
    .about-value-item p {
        font-size: 0.9rem !important; /* masaüstü — önceki değer */
    }
}

/* Font family now managed by CSS variable */

/* Hero title: Slightly larger font sizes (half step up) */
.about-hero-title {
    font-size: 1.3125rem !important; /* 21px — mobil */
    color: rgba(255, 255, 255, 0.95) !important; /* Off-white, not pure white */
}

@media (min-width: 640px) and (max-width: 767.98px) {
    .about-hero-title {
        font-size: 1.5rem !important; /* 24px — sm */
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .about-hero-title {
        font-size: 1.75rem !important; /* 28px — tablet; lg+ aşağıda */
    }
}

@media (min-width: 1024px) {
    .about-hero-title {
        font-size: 2.0625rem !important; /* 33px - between text-3xl (30px) and text-4xl (36px) */
    }
}

@media (min-width: 1280px) {
    .about-hero-title {
        font-size: 2.5rem !important; /* 40px - between text-4xl (36px) and text-5xl (48px) */
    }
}

/* Override font-playfair and font-inter classes for hero */
.about-hero-title.font-playfair,
.about-hero-subtitle.font-inter,
.about-hero-subtitle.italic,
.about-hero-subtitle.font-inter.italic {
    font-style: normal !important; /* Remove italic */
}

/* Hero subtitle: Off-white color, not pure white */
.about-hero-subtitle {
    color: rgba(255, 255, 255, 0.95) !important; /* Off-white, not pure white */
}

/* Alt başlık: lg altı bir kademe büyük (Tailwind text-base / text-lg üstüne) */
@media (max-width: 767.98px) {
    .about-hero-subtitle {
        font-size: 1.125rem !important; /* 18px */
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .about-hero-subtitle {
        font-size: 1.25rem !important; /* 20px */
    }
}

/* Light theme: Hero title and subtitle - white, no shadow - En spesifik selector'lar */
body.theme-light section.relative[class*="min-h"] h1.about-hero-title.text-white,
body.theme-light section[class*="hero"] h1.about-hero-title.text-white,
body.theme-light section.relative[class*="min-h"].bg-marque-black h1.about-hero-title.text-white,
body.theme-light .about-hero-title,
body.theme-light .about-hero-title.text-white,
body.theme-light section.relative[class*="min-h"] p.about-hero-subtitle.text-marque-gold,
body.theme-light section[class*="hero"] p.about-hero-subtitle.text-marque-gold,
body.theme-light section.relative[class*="min-h"].bg-marque-black p.about-hero-subtitle.text-marque-gold,
body.theme-light .about-hero-subtitle,
body.theme-light .about-hero-subtitle.text-marque-gold {
    color: rgba(255, 255, 255, 0.95) !important; /* Off-white, not pure white */
    text-shadow: none !important; /* Gölge efekti kaldırıldı */
}

/* Font family now managed by CSS variable */

/* Section 1: Match Section 2 text rendering exactly - Fix wildcard override */
.about-section-1-text {
    font-weight: 400 !important; /* Match Section 2 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Apply font-weight to all child elements in Section 1 */
.about-section-1-text * {
    font-weight: inherit !important; /* Inherit from parent */
}

.about-section-1-text > div:last-child,
.about-section-1-text > div:last-child * {
    font-weight: 400 !important; /* Explicit normal weight for text content */
    color: rgba(255, 255, 255, 0.7) !important; /* Explicit match to Section 2 */
    line-height: 2 !important; /* Increased line spacing */
    font-size: 0.9375rem !important; /* 15px — mobil */
}

@media (min-width: 640px) {
    .about-section-1-text > div:last-child,
    .about-section-1-text > div:last-child * {
        font-size: 1.0625rem !important; /* 17px — sm */
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .about-section-1-text > div:last-child,
    .about-section-1-text > div:last-child * {
        font-size: 1.1875rem !important; /* 19px — tablet */
    }
}

@media (min-width: 1024px) {
    .about-section-1-text > div:last-child,
    .about-section-1-text > div:last-child * {
        font-size: 1.0625rem !important; /* önceki 768+ masaüstü değeri */
    }
}

/* Light theme: Section 1 text content - black color */
body.theme-light .about-section-1-text > div:last-child,
body.theme-light .about-section-1-text > div:last-child * {
    color: #000000 !important; /* Black text in light theme */
}

.about-section-1-text h2 {
    font-weight: 700 !important; /* Bold */
    color: #ffffff !important; /* Explicit white */
    font-size: 1.125rem !important; /* 18px — mobil */
}

@media (min-width: 640px) {
    .about-section-1-text h2 {
        font-size: 1.25rem !important; /* 20px — sm */
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .about-section-1-text h2 {
        font-size: 1.375rem !important; /* 22px — tablet */
    }
}

@media (min-width: 1024px) {
    .about-section-1-text h2 {
        font-size: 1.5rem !important; /* text-3xl (1.875rem) -> text-2xl (1.5rem) */
    }
}

/* Light theme: Section 1 heading - dark gray color */
body.theme-light .about-section-1-text h2 {
    color: #111827 !important; /* Dark gray heading in light theme */
}

/* Section 1 and Section 2: Center headings horizontally, keep text left-aligned */
.about-section-1-text h2,
.about-section-2-text h2 {
    text-align: center !important;
}

/* Section 2: Heading font sizes - one step smaller */
.about-section-2-text h2 {
    font-size: 1.125rem !important; /* 18px — mobil */
    font-weight: 700 !important; /* Bold */
}

@media (min-width: 640px) {
    .about-section-2-text h2 {
        font-size: 1.25rem !important; /* 20px — sm */
    }
}

/* Dark theme: keep headings white for contrast */
body.theme-dark .about-section-1-text h2,
body.theme-dark .about-section-2-text h2 {
    color: #ffffff !important;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .about-section-2-text h2 {
        font-size: 1.375rem !important; /* 22px — tablet */
    }
}

@media (min-width: 1024px) {
    .about-section-2-text h2 {
        font-size: 1.5rem !important; /* masaüstü — önceki değer */
    }
}

/* Move Section 1 heading and line up (only heading and line, not the content) */
section.bg-marque-black .about-section-1-text > h2 {
    transform: translateY(-1rem) !important; /* Move heading up slightly - increased */
    position: relative !important;
}

section.bg-marque-black .about-section-1-text > h2 + div.w-20 {
    transform: translateY(-0.75rem) !important; /* Move line up less than heading - increased */
    position: relative !important;
}

@media (min-width: 768px) {
    section.bg-marque-black .about-section-1-text > h2 {
        transform: translateY(-1.25rem) !important; /* Slightly more on larger screens - increased */
    }
    
    section.bg-marque-black .about-section-1-text > h2 + div.w-20 {
        transform: translateY(-1rem) !important; /* Line slightly lower than heading - increased */
    }
}

@media (min-width: 1024px) {
    section.bg-marque-black .about-section-1-text > h2 {
        transform: translateY(-1.75rem) !important; /* Moderate amount on desktop - increased */
    }
    
    section.bg-marque-black .about-section-1-text > h2 + div.w-20 {
        transform: translateY(-1.5rem) !important; /* Line slightly lower than heading - increased */
    }
}

/* Move Section 2 heading and line up (only heading and line, not the content) */
section.bg-black .about-section-2-text {
    padding-top: 1rem !important; /* Add padding to prevent clipping */
}

section.bg-black .about-section-2-text > h2 {
    transform: translateY(-1rem) !important; /* Move heading up slightly - increased */
    position: relative !important;
}

section.bg-black .about-section-2-text > h2 + div.w-20 {
    transform: translateY(-0.75rem) !important; /* Move line up less than heading - increased */
    position: relative !important;
}

@media (min-width: 768px) {
    section.bg-black .about-section-2-text {
        padding-top: 1.5rem !important; /* More padding on larger screens */
    }
    
    section.bg-black .about-section-2-text > h2 {
        transform: translateY(-1.25rem) !important; /* Slightly more on larger screens - increased */
    }
    
    section.bg-black .about-section-2-text > h2 + div.w-20 {
        transform: translateY(-1rem) !important; /* Line slightly lower than heading - increased */
    }
}

@media (min-width: 1024px) {
    section.bg-black .about-section-2-text {
        padding-top: 2rem !important; /* Even more padding on desktop */
    }
    
    section.bg-black .about-section-2-text > h2 {
        transform: translateY(-1.75rem) !important; /* Moderate amount on desktop - increased */
    }
    
    section.bg-black .about-section-2-text > h2 + div.w-20 {
        transform: translateY(-1.5rem) !important; /* Line slightly lower than heading - increased */
    }
}

/* Font family now managed by CSS variable */

/* Center the gold line under headings */
.about-section-1-text h2 + div,
.about-section-2-text h2 + div {
    margin-left: auto !important;
    margin-right: auto !important;
}

.about-section-1-text > div:last-child,
.about-section-2-text > div:last-child {
    text-align: left !important;
    line-height: 2 !important; /* Increased line spacing */
}

.about-section-2-text > div:last-child,
.about-section-2-text > div:last-child * {
    line-height: 2 !important; /* Increased line spacing */
    font-size: 0.9375rem !important; /* 15px — mobil */
}

@media (min-width: 640px) {
    .about-section-2-text > div:last-child,
    .about-section-2-text > div:last-child * {
        font-size: 1.0625rem !important; /* 17px — sm */
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .about-section-2-text > div:last-child,
    .about-section-2-text > div:last-child * {
        font-size: 1.1875rem !important; /* 19px — tablet */
    }
}

@media (min-width: 1024px) {
    .about-section-2-text > div:last-child,
    .about-section-2-text > div:last-child * {
        font-size: 1.0625rem !important; /* önceki 768+ masaüstü */
    }
}

/* Font family now managed by CSS variable */

/* Section 1 and Section 2: Same background color for consistency */
section.relative.overflow-hidden.bg-marque-black,
section.relative.overflow-hidden.bg-black {
    background-color: #0a0a0a !important; /* marque-black */
}

/* ============================================================
   ABOUT SECTION HEADINGS - Theme-aware (dark=white, light=dark)
   - about-section-heading: tek class, tema renkleri CSS'te
   ============================================================ */

.about-section-heading {
    color: #ffffff !important; /* Dark theme: beyaz başlık */
}

body.theme-light .about-section-heading {
    color: #111827 !important; /* Light theme: koyu gri başlık */
}

/* Eski selector'lar - geriye dönük uyumluluk */
html body.theme-light section.bg-marque-black .about-section-1-text h2,
html body.theme-light section.bg-black .about-section-2-text h2 {
    color: #111827 !important;
}

/* WCAG 2.1: prefers-reduced-motion – animasyonları azalt */
@media (prefers-reduced-motion: reduce) {
    .about-section-1-image img,
    .about-section-2-image img {
        transition: none !important;
        transform: none !important;
    }
    .about-value-item {
        transition: none !important;
    }
    .about-hero-bg-image,
    .about-hero-overlay,
    .about-hero-title,
    .about-hero-subtitle {
        transition: none !important;
        animation: none !important;
    }
}