/* In Stock Page Styles */

/* =================================
   Global Inter Font for All Content
   ================================= */

/* Apply Inter font to ALL text content on in-stock page */
/* Font family now managed by CSS variable */

/* =================================
   Hero Section: Inter Font and About page font sizes
   ================================= */
/* Target hero section in in-stock page - override font classes and Tailwind text sizes */
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.font-playfair,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-4xl,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-5xl,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-6xl,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-7xl {
    font-size: 1.1875rem !important; /* 19px - mobile */
    font-weight: 300 !important;
}

@media (min-width: 640px) {
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-4xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-5xl {
        font-size: 1.375rem !important; /* 22px - sm */
    }
}

@media (min-width: 768px) {
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-4xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-5xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-6xl {
        font-size: 1.625rem !important; /* 26px - md */
    }
}

@media (min-width: 1024px) {
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-4xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-5xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-6xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-7xl {
        font-size: 2.0625rem !important; /* 33px - lg */
    }
}

@media (min-width: 1280px) {
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-4xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-5xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-6xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-7xl {
        font-size: 2.5rem !important; /* 40px - xl */
    }
}

section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black p,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black p.font-manrope,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black p.text-base,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black p.text-lg {
    font-size: 1rem !important; /* text-base - mobile */
}

@media (min-width: 768px) {
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black p,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black p.text-base,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black p.text-lg {
        font-size: 1.125rem !important; /* text-lg - md */
    }
}

/* =================================
   In Stock Hero - Light Theme Text Colors
   ================================= */

/* In Stock hero text - Light temada beyaz (Projects ve Collection hero gibi) */
body.theme-light section.relative.min-h-\[44vh\].bg-marque-black:not(.projects-hero) h1,
body.theme-light section.relative.min-h-\[44vh\].bg-marque-black:not(.projects-hero) h1.text-white,
body.theme-light section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black:not(.projects-hero) h1,
body.theme-light section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black:not(.projects-hero) h1.text-white,
body.theme-light section.relative[class*="min-h"].bg-marque-black:not(.projects-hero):not(.nb-hero-section):not(.instock-overview-hero) h1,
body.theme-light section.relative[class*="min-h"].bg-marque-black:not(.projects-hero):not(.nb-hero-section):not(.instock-overview-hero) h1.text-white,
body.theme-light section.relative.min-h-\[44vh\].bg-marque-black:not(.projects-hero) p,
body.theme-light section.relative.min-h-\[44vh\].bg-marque-black:not(.projects-hero) p.text-white,
body.theme-light section.relative.min-h-\[44vh\].bg-marque-black:not(.projects-hero) p.text-white\/70,
body.theme-light section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black:not(.projects-hero) p,
body.theme-light section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black:not(.projects-hero) p.text-white,
body.theme-light section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black:not(.projects-hero) p.text-white\/70,
body.theme-light section.relative[class*="min-h"].bg-marque-black:not(.projects-hero):not(.nb-hero-section):not(.instock-overview-hero) p,
body.theme-light section.relative[class*="min-h"].bg-marque-black:not(.projects-hero):not(.nb-hero-section):not(.instock-overview-hero) p.text-white,
body.theme-light section.relative[class*="min-h"].bg-marque-black:not(.projects-hero):not(.nb-hero-section):not(.instock-overview-hero) p.text-white\/70 {
    color: rgba(255, 255, 255, 0.95) !important; /* Off-white */
    text-shadow: none !important; /* Gölge yok */
}

/* =================================
   Mobile Filter Accordion Styles
   ================================= */

/* Filter toggle button - only visible on mobile */
.filter-toggle-btn {
    display: none;
}

/* Mobile: Show toggle, hide content by default */
@media (max-width: 1023px) {
    .filter-toggle-btn {
        display: flex;
    }
    
    /* Filter content hidden by default on mobile */
    .filter-content-wrapper {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
        padding-top: 0;
    }
    
    /* Spacing between filter groups */
    .filter-content-wrapper .filter-group {
        margin-bottom: 1rem;
    }
    
    .filter-content-wrapper .filter-group:last-of-type {
        margin-bottom: 0;
    }
    
    /* Filter content expanded state */
    .filter-content-wrapper.expanded {
        max-height: 2000px;
        opacity: 1;
        padding-top: 1rem;
        transition: max-height 0.5s ease-in, opacity 0.3s ease-in, padding 0.3s ease-in;
    }
    
    /* Rotate toggle icon when expanded */
    .filter-toggle-btn.active .filter-toggle-icon {
        transform: rotate(180deg);
    }
    
    /* Add subtle highlight when filters are active */
    .filter-toggle-btn.has-active-filters {
        position: relative;
        border-color: rgba(201, 166, 107, 0.5);
        background-color: rgba(201, 166, 107, 0.1);
    }
    
    .filter-toggle-btn.has-active-filters::after {
        content: '';
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: 8px;
        height: 8px;
        background-color: #C9A66B;
        border-radius: 50%;
    }
}

/* Desktop: Always show content, hide toggle button */
@media (min-width: 1024px) {
    .filter-toggle-btn {
        display: none !important;
    }
    
    .filter-content-wrapper {
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        padding-top: 0 !important;
    }
    
    /* Spacing between filter groups on desktop */
    .filter-content-wrapper .filter-group {
        margin-bottom: 1.5rem;
    }
    
    .filter-content-wrapper .filter-group:last-of-type {
        margin-bottom: 0;
    }
}

/* =================================
   Page Introduction Section
   ================================= */

/* Page Introduction Section */
.in-stock-intro-section {
    width: 100%;
    padding: 1.5rem 1.5rem 0.75rem;
}

.in-stock-intro-container {
    width: 100%;
    margin: 0 auto;
}

/* In Stock açıklama metni - Koleksiyon sayfasıyla aynı stil */
.in-stock-intro-text {
    color: #C0C0C0; /* Parlak silver rengi - Dark mode */
    font-family: var(--site-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
}

/* In Stock açıklama metni - Light mode için premium renk */
body.theme-light .in-stock-intro-text {
    color: #8B7355 !important; /* Koyu bronz/altın tonu - Light mode */
}

/* Click hint text - Dark mode: parlak beyaz */
.in-stock-click-hint {
    color: #FFFFFF !important; /* Parlak beyaz - Dark mode */
}

/* Click hint text - Light mode: tam siyah */
body.theme-light .in-stock-click-hint {
    color: #000000 !important; /* Tam siyah - Light mode */
}

/* Mobilde yazıyı daha küçük fontta göster */
@media (max-width: 768px) {
    .in-stock-intro-text {
        font-size: 0.875rem !important; /* 14px - mobilde ana metin */
    }
    .in-stock-click-hint {
        font-size: 0.75rem !important; /* 12px - mobilde ipucu metni bir tık daha küçük */
        display: block;
        margin-top: 0.25rem;
    }
}

/* =================================
   Slab Detail Panel - SEO Friendly Hide
   ================================= */
/* Default transition for smooth expand/collapse */
.slab-detail-panel {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out, margin 0.3s ease-out, border-width 0.3s ease-out;
}

/* Hidden state: visually hidden but content remains in HTML for SEO */
/* Google can see all content even when cards are collapsed */
.slab-detail-panel.hidden {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
}

/* Expanded state: visible with smooth transition */
.slab-detail-panel:not(.hidden) {
    max-height: 5000px; /* Large enough for any content */
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.3s ease-in, padding 0.3s ease-in, margin 0.3s ease-in, border-width 0.3s ease-in;
}

/* Hide stock status badge when card is open (but keep detail panel badge visible) */
.slab-card.open > .stock-status-badge {
    display: none;
}

/* Expand button rotation states */
.expand-btn svg {
    transition: transform 0.3s ease;
}

.expand-btn.rotated svg,
.slab-card.open .expand-btn svg {
    transform: rotate(180deg);
}

/* No results message visibility */
#no-results {
    display: none;
}

#no-results.visible {
    display: block;
}

/* Card visibility for filtering */
.slab-card.filter-hidden {
    display: none !important;
}

.slab-card.filter-visible {
    display: block;
}

/* Modal navigation button states */
#modal-prev.disabled,
#modal-next.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#modal-prev:not(.disabled),
#modal-next:not(.disabled) {
    opacity: 1;
    cursor: pointer;
}

/* Prevent body scroll when image modal is open */
body.modal-open {
    overflow: hidden;
}

/* WCAG 2.1: Reduce animations when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .expand-btn svg,
    #modal-prev,
    #modal-next,
    #close-image-modal,
    .faq-panel {
        transition: none !important;
    }
}

/* Fix filter input and select background colors */
aside.filter-panel select,
aside.filter-panel input[type="text"],
.filter-panel select,
.filter-panel input[type="text"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Light theme - ONLY when main doesn't have bg-marque-black */
body main:not(.bg-marque-black) aside.filter-panel select,
body main:not(.bg-marque-black) aside.filter-panel input[type="text"],
body main:not(.bg-marque-black) .filter-panel select,
body main:not(.bg-marque-black) .filter-panel input[type="text"],
html body main:not(.bg-marque-black) aside.filter-panel select,
html body main:not(.bg-marque-black) aside.filter-panel input[type="text"],
html body main:not(.bg-marque-black) .filter-panel select,
html body main:not(.bg-marque-black) .filter-panel input[type="text"] {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a1a !important;
}

/* Light theme - in-stock pages: wrapper is div.bg-marque-black (no main), so filter inputs need explicit light background */
body.theme-light .bg-marque-black aside.filter-panel select,
body.theme-light .bg-marque-black aside.filter-panel input[type="text"],
body.theme-light .bg-marque-black .filter-panel select,
body.theme-light .bg-marque-black .filter-panel input[type="text"],
html body.theme-light .bg-marque-black aside.filter-panel select,
html body.theme-light .bg-marque-black aside.filter-panel input[type="text"],
html body.theme-light .bg-marque-black .filter-panel select,
html body.theme-light .bg-marque-black .filter-panel input[type="text"] {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a1a !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}
body.theme-light .bg-marque-black aside.filter-panel select option,
body.theme-light .bg-marque-black .filter-panel select option,
html body.theme-light .bg-marque-black aside.filter-panel select option,
html body.theme-light .bg-marque-black .filter-panel select option {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}
body.theme-light .bg-marque-black aside.filter-panel input[type="text"]::placeholder,
body.theme-light .bg-marque-black .filter-panel input[type="text"]::placeholder,
html body.theme-light .bg-marque-black aside.filter-panel input[type="text"]::placeholder,
html body.theme-light .bg-marque-black .filter-panel input[type="text"]::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* Light theme - filter panel titles and labels (in-stock: h2 "Filters" and label text) readable on light background */
body.theme-light .bg-marque-black aside.filter-panel h2.text-white,
body.theme-light .bg-marque-black aside.filter-panel .filter-content-wrapper label,
body.theme-light .bg-marque-black aside.filter-panel .filter-content-wrapper label[class*="text-white"],
html body.theme-light .bg-marque-black aside.filter-panel h2.text-white,
html body.theme-light .bg-marque-black aside.filter-panel .filter-content-wrapper label,
html body.theme-light .bg-marque-black aside.filter-panel .filter-content-wrapper label[class*="text-white"] {
    color: #1a1a1a !important;
}

body main:not(.bg-marque-black) aside.filter-panel select option,
body main:not(.bg-marque-black) .filter-panel select option,
html body main:not(.bg-marque-black) aside.filter-panel select option,
html body main:not(.bg-marque-black) .filter-panel select option {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

body main:not(.bg-marque-black) aside.filter-panel input[type="text"]::placeholder,
body main:not(.bg-marque-black) .filter-panel input[type="text"]::placeholder,
html body main:not(.bg-marque-black) aside.filter-panel input[type="text"]::placeholder,
html body main:not(.bg-marque-black) .filter-panel input[type="text"]::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* Dark theme - MUST come AFTER light theme to override it - MAXIMUM specificity */
/* Override Tailwind bg-black/20 class - only when NOT in light theme */
html body:not(.theme-light) main.bg-marque-black aside.filter-panel select.bg-black\/20,
html body:not(.theme-light) main.bg-marque-black aside.filter-panel select[class*="bg-black"],
html body:not(.theme-light) main.bg-marque-black aside.filter-panel input[type="text"].bg-black\/20,
html body:not(.theme-light) main.bg-marque-black aside.filter-panel input[type="text"][class*="bg-black"],
html body:not(.theme-light) main.bg-marque-black .filter-panel select.bg-black\/20,
html body:not(.theme-light) main.bg-marque-black .filter-panel select[class*="bg-black"],
html body:not(.theme-light) main.bg-marque-black .filter-panel input[type="text"].bg-black\/20,
html body:not(.theme-light) main.bg-marque-black .filter-panel input[type="text"][class*="bg-black"],
html body:not(.theme-light) main.bg-marque-black aside.filter-panel select,
html body:not(.theme-light) main.bg-marque-black aside.filter-panel input[type="text"],
html body:not(.theme-light) main.bg-marque-black .filter-panel select,
html body:not(.theme-light) main.bg-marque-black .filter-panel input[type="text"],
body:not(.theme-light) main.bg-marque-black aside.filter-panel select.bg-black\/20,
body:not(.theme-light) main.bg-marque-black aside.filter-panel select[class*="bg-black"],
body:not(.theme-light) main.bg-marque-black aside.filter-panel input[type="text"].bg-black\/20,
body:not(.theme-light) main.bg-marque-black aside.filter-panel input[type="text"][class*="bg-black"],
body:not(.theme-light) main.bg-marque-black .filter-panel select.bg-black\/20,
body:not(.theme-light) main.bg-marque-black .filter-panel select[class*="bg-black"],
body:not(.theme-light) main.bg-marque-black .filter-panel input[type="text"].bg-black\/20,
body:not(.theme-light) main.bg-marque-black .filter-panel input[type="text"][class*="bg-black"],
body:not(.theme-light) main.bg-marque-black aside.filter-panel select,
body:not(.theme-light) main.bg-marque-black aside.filter-panel input[type="text"],
body:not(.theme-light) main.bg-marque-black .filter-panel select,
body:not(.theme-light) main.bg-marque-black .filter-panel input[type="text"],
main.bg-marque-black:not(.theme-light) aside.filter-panel select,
main.bg-marque-black:not(.theme-light) aside.filter-panel input[type="text"],
main.bg-marque-black:not(.theme-light) .filter-panel select,
main.bg-marque-black:not(.theme-light) .filter-panel input[type="text"],
.bg-marque-black:not(.theme-light) aside.filter-panel select,
.bg-marque-black:not(.theme-light) aside.filter-panel input[type="text"],
.bg-marque-black:not(.theme-light) .filter-panel select,
.bg-marque-black:not(.theme-light) .filter-panel input[type="text"] {
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Dropdown options - dark theme (only when not light theme) */
html body:not(.theme-light) main.bg-marque-black aside.filter-panel select option,
html body:not(.theme-light) main.bg-marque-black .filter-panel select option,
body:not(.theme-light) main.bg-marque-black aside.filter-panel select option,
body:not(.theme-light) main.bg-marque-black .filter-panel select option,
main.bg-marque-black:not(.theme-light) aside.filter-panel select option,
main.bg-marque-black:not(.theme-light) .filter-panel select option,
.bg-marque-black:not(.theme-light) aside.filter-panel select option,
.bg-marque-black:not(.theme-light) .filter-panel select option {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
}

html body:not(.theme-light) main.bg-marque-black aside.filter-panel input[type="text"]::placeholder,
html body:not(.theme-light) main.bg-marque-black .filter-panel input[type="text"]::placeholder,
body:not(.theme-light) main.bg-marque-black aside.filter-panel input[type="text"]::placeholder,
body:not(.theme-light) main.bg-marque-black .filter-panel input[type="text"]::placeholder,
main.bg-marque-black:not(.theme-light) aside.filter-panel input[type="text"]::placeholder,
main.bg-marque-black:not(.theme-light) .filter-panel input[type="text"]::placeholder,
.bg-marque-black:not(.theme-light) aside.filter-panel input[type="text"]::placeholder,
.bg-marque-black:not(.theme-light) .filter-panel input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Dark theme - ensure dark theme when prefers-color-scheme is dark */
@media (prefers-color-scheme: dark) {
    /* Override Tailwind bg-black/20 class */
    html body main.bg-marque-black aside.filter-panel select.bg-black\/20,
    html body main.bg-marque-black aside.filter-panel select[class*="bg-black"],
    html body main.bg-marque-black aside.filter-panel input[type="text"].bg-black\/20,
    html body main.bg-marque-black aside.filter-panel input[type="text"][class*="bg-black"],
    html body main.bg-marque-black .filter-panel select.bg-black\/20,
    html body main.bg-marque-black .filter-panel select[class*="bg-black"],
    html body main.bg-marque-black .filter-panel input[type="text"].bg-black\/20,
    html body main.bg-marque-black .filter-panel input[type="text"][class*="bg-black"],
    html body main.bg-marque-black aside.filter-panel select,
    html body main.bg-marque-black aside.filter-panel input[type="text"],
    html body main.bg-marque-black .filter-panel select,
    html body main.bg-marque-black .filter-panel input[type="text"],
    body main.bg-marque-black aside.filter-panel select.bg-black\/20,
    body main.bg-marque-black aside.filter-panel select[class*="bg-black"],
    body main.bg-marque-black aside.filter-panel input[type="text"].bg-black\/20,
    body main.bg-marque-black aside.filter-panel input[type="text"][class*="bg-black"],
    body main.bg-marque-black .filter-panel select.bg-black\/20,
    body main.bg-marque-black .filter-panel select[class*="bg-black"],
    body main.bg-marque-black .filter-panel input[type="text"].bg-black\/20,
    body main.bg-marque-black .filter-panel input[type="text"][class*="bg-black"],
    body main.bg-marque-black aside.filter-panel select,
    body main.bg-marque-black aside.filter-panel input[type="text"],
    body main.bg-marque-black .filter-panel select,
    body main.bg-marque-black .filter-panel input[type="text"],
    main.bg-marque-black aside.filter-panel select,
    main.bg-marque-black aside.filter-panel input[type="text"],
    main.bg-marque-black .filter-panel select,
    main.bg-marque-black .filter-panel input[type="text"],
    .bg-marque-black aside.filter-panel select,
    .bg-marque-black aside.filter-panel input[type="text"],
    .bg-marque-black .filter-panel select,
    .bg-marque-black .filter-panel input[type="text"] {
        background-color: rgba(0, 0, 0, 0.7) !important;
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }
    
    html body main.bg-marque-black aside.filter-panel select option,
    html body main.bg-marque-black .filter-panel select option,
    body main.bg-marque-black aside.filter-panel select option,
    body main.bg-marque-black .filter-panel select option,
    main.bg-marque-black aside.filter-panel select option,
    main.bg-marque-black .filter-panel select option,
    .bg-marque-black aside.filter-panel select option,
    .bg-marque-black .filter-panel select option {
        background-color: #0a0a0a !important;
        color: #ffffff !important;
    }
    
    html body main.bg-marque-black aside.filter-panel input[type="text"]::placeholder,
    html body main.bg-marque-black .filter-panel input[type="text"]::placeholder,
    body main.bg-marque-black aside.filter-panel input[type="text"]::placeholder,
    body main.bg-marque-black .filter-panel input[type="text"]::placeholder,
    main.bg-marque-black aside.filter-panel input[type="text"]::placeholder,
    main.bg-marque-black .filter-panel input[type="text"]::placeholder,
    .bg-marque-black aside.filter-panel input[type="text"]::placeholder,
    .bg-marque-black .filter-panel input[type="text"]::placeholder {
        color: rgba(255, 255, 255, 0.4) !important;
    }
}

/* Light theme - override dark theme when body has theme-light class (MUST come after dark theme) */
body.theme-light main.bg-marque-black aside.filter-panel select,
body.theme-light main.bg-marque-black aside.filter-panel input[type="text"],
body.theme-light main.bg-marque-black .filter-panel select,
body.theme-light main.bg-marque-black .filter-panel input[type="text"],
html body.theme-light main.bg-marque-black aside.filter-panel select,
html body.theme-light main.bg-marque-black aside.filter-panel input[type="text"],
html body.theme-light main.bg-marque-black .filter-panel select,
html body.theme-light main.bg-marque-black .filter-panel input[type="text"],
body.theme-light main.bg-marque-black aside.filter-panel select[class*="bg-black"],
body.theme-light main.bg-marque-black aside.filter-panel input[type="text"][class*="bg-black"],
body.theme-light main.bg-marque-black .filter-panel select[class*="bg-black"],
body.theme-light main.bg-marque-black .filter-panel input[type="text"][class*="bg-black"] {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a1a !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light main.bg-marque-black aside.filter-panel select option,
body.theme-light main.bg-marque-black .filter-panel select option,
html body.theme-light main.bg-marque-black aside.filter-panel select option,
html body.theme-light main.bg-marque-black .filter-panel select option,
body.theme-light main.bg-marque-black aside.filter-panel select[class*="bg-black"] option,
body.theme-light main.bg-marque-black .filter-panel select[class*="bg-black"] option {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

body.theme-light main.bg-marque-black aside.filter-panel input[type="text"]::placeholder,
body.theme-light main.bg-marque-black .filter-panel input[type="text"]::placeholder,
html body.theme-light main.bg-marque-black aside.filter-panel input[type="text"]::placeholder,
html body.theme-light main.bg-marque-black .filter-panel input[type="text"]::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* =================================
   Stock Status Badge Styling (All Sizes)
   ================================= */

/* Stock status badge - data attribute based styling (applies to all badges including detail panel) */
.stock-status-badge[data-status="in_stock"],
.slab-detail-panel .stock-status-badge[data-status="in_stock"],
.slab-detail-panel table .stock-status-badge[data-status="in_stock"] {
    background-color: rgba(34, 197, 94, 0.3) !important;
    color: rgb(134, 239, 172) !important;
    border-color: rgb(74, 222, 128) !important;
}

.stock-status-badge[data-status="reserved"],
.slab-detail-panel .stock-status-badge[data-status="reserved"],
.slab-detail-panel table .stock-status-badge[data-status="reserved"] {
    background-color: rgba(234, 179, 8, 0.3) !important;
    color: rgb(253, 224, 71) !important;
    border-color: rgb(250, 204, 21) !important;
}

.stock-status-badge[data-status="sold"],
.slab-detail-panel .stock-status-badge[data-status="sold"],
.slab-detail-panel table .stock-status-badge[data-status="sold"] {
    background-color: rgba(220, 38, 38, 0.3) !important;
    color: rgb(248, 113, 113) !important;
    border-color: rgb(239, 68, 68) !important;
}

.stock-status-badge[data-status]:not([data-status="in_stock"]):not([data-status="reserved"]):not([data-status="sold"]),
.slab-detail-panel .stock-status-badge[data-status]:not([data-status="in_stock"]):not([data-status="reserved"]):not([data-status="sold"]),
.slab-detail-panel table .stock-status-badge[data-status]:not([data-status="in_stock"]):not([data-status="reserved"]):not([data-status="sold"]) {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: rgb(255, 255, 255) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Light theme - Stock status badge text must be dark gray for readability */
body.theme-light .stock-status-badge[data-status="in_stock"],
body.theme-light .stock-status-badge[data-status="reserved"],
body.theme-light .stock-status-badge[data-status="sold"],
body.theme-light .stock-status-badge[data-status],
body.theme-light .slab-detail-panel .stock-status-badge[data-status="in_stock"],
body.theme-light .slab-detail-panel .stock-status-badge[data-status="reserved"],
body.theme-light .slab-detail-panel .stock-status-badge[data-status="sold"],
body.theme-light .slab-detail-panel .stock-status-badge[data-status],
body.theme-light .slab-detail-panel table .stock-status-badge[data-status="in_stock"],
body.theme-light .slab-detail-panel table .stock-status-badge[data-status="reserved"],
body.theme-light .slab-detail-panel table .stock-status-badge[data-status="sold"],
body.theme-light .slab-detail-panel table .stock-status-badge[data-status] {
    color: #374151 !important; /* Gray-700 - gri-siyah ton */
}

/* =================================
   In Stock Card Font Size Fix (Mobile)
   ================================= */
@media (max-width: 767.98px) {
    /* Stone Name (h3) */
    .slab-card h3 {
        font-size: 0.9375rem !important; /* 15px - from text-lg */
        margin-bottom: 0.125rem !important;
    }

    /* Bundle Number (p) */
    .slab-card p.text-marque-gold {
        font-size: 0.75rem !important; /* 12px - from text-sm */
        margin-bottom: 0.25rem !important;
    }

    /* Dimensions, Surface Area, Pcs (div space-y-1) */
    .slab-card .space-y-1 p {
        font-size: 0.75rem !important; /* 12px - from text-sm */
        line-height: 1.2 !important;
    }

    /* "Click to view details" hint */
    .slab-card .italic.text-xs {
        font-size: 0.625rem !important; /* 10px - from text-xs */
    }

    .stock-status-badge {
        font-size: 10px !important; /* Even smaller badge on mobile */
        padding: 0.125rem 0.375rem !important;
        bottom: 0.5rem !important;
        right: 0.5rem !important;
    }

    /* Card padding adjustment */
    .slab-card {
        padding: 0.75rem !important;
    }

    /* Expanded Detail Panel Specs Table */
    .slab-detail-panel table {
        font-size: 0.8125rem !important; /* 13px - from text-sm */
    }

    .slab-detail-panel td {
        padding-top: 0.375rem !important; /* Reduce vertical padding */
        padding-bottom: 0.375rem !important;
    }

    .slab-detail-panel .text-xl {
        font-size: 1.125rem !important; /* Reduce header size in detail panel if any */
    }
}

/* =================================
   In Stock Card Thumbnail Fix
   ================================= */

/* Fix thumbnail image cropping - show full image without cropping */
.in-stock-thumbnail {
    object-fit: contain !important; /* Changed from object-cover to show full image */
    background-color: rgba(0, 0, 0, 0.2); /* Subtle background for better visibility */
}

/* Light theme thumbnail background */
body.theme-light .in-stock-thumbnail {
    background-color: rgba(0, 0, 0, 0.05); /* Lighter background for light theme */
}

/* WCAG 2.2.1: Focus visible for gallery images (list page) */
.slab-main-image:focus-visible,
.additional-image-thumb:focus-visible {
    outline: 2px solid #d4af37;
    outline-offset: 2px;
}

/* =================================
   Additional Thumbnails Container
   ================================= */

/* Additional thumbnails container - positioned below main image */
.additional-thumbnails-container {
    position: relative;
    width: 100%;
}

/* Light theme - lighter background for thumbnails container */
body.theme-light .additional-thumbnails-container {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

/* =================================
   Light Theme: In Stock Badge Text Color
   ================================= */

/* Light theme - make "In Stock" text dark gray (charcoal) for readability - HIGH SPECIFICITY */
html body.theme-light .stock-status-badge.text-green-300,
html body.theme-light main .stock-status-badge.text-green-300,
body.theme-light main.bg-marque-black .stock-status-badge.text-green-300 {
    color: #4a4a4a !important;
}

/* Light theme - make "Reserved" text dark gray (charcoal) for readability - HIGH SPECIFICITY */
html body.theme-light .stock-status-badge.text-yellow-300,
html body.theme-light main .stock-status-badge.text-yellow-300,
body.theme-light main.bg-marque-black .stock-status-badge.text-yellow-300 {
    color: #4a4a4a !important;
}

/* Light theme - make "Sold" text dark gray (charcoal) for readability - HIGH SPECIFICITY */
html body.theme-light .stock-status-badge.text-red-500,
html body.theme-light main .stock-status-badge.text-red-500,
body.theme-light main.bg-marque-black .stock-status-badge.text-red-500 {
    color: #4a4a4a !important;
}

/* Light theme - make "In Stock" text dark gray (charcoal) in expanded detail panel - HIGH SPECIFICITY */
html body.theme-light .slab-detail-panel .text-green-300,
html body.theme-light main .slab-detail-panel .text-green-300,
html body.theme-light .slab-detail-panel span.text-green-300,
body.theme-light main.bg-marque-black .slab-detail-panel .text-green-300 {
    color: #4a4a4a !important;
}

/* Light theme - make "Reserved" text dark gray (charcoal) in expanded detail panel - HIGH SPECIFICITY */
html body.theme-light .slab-detail-panel .text-yellow-300,
html body.theme-light main .slab-detail-panel .text-yellow-300,
html body.theme-light .slab-detail-panel span.text-yellow-300,
body.theme-light main.bg-marque-black .slab-detail-panel .text-yellow-300 {
    color: #4a4a4a !important;
}

/* Light theme - make "Sold" text dark gray (charcoal) in expanded detail panel - HIGH SPECIFICITY */
html body.theme-light .slab-detail-panel .text-red-500,
html body.theme-light main .slab-detail-panel .text-red-500,
html body.theme-light .slab-detail-panel span.text-red-500,
body.theme-light main.bg-marque-black .slab-detail-panel .text-red-500 {
    color: #4a4a4a !important;
}

/* =================================
   Dark Theme: In Stock Badge Text Color
   ================================= */

/* Dark theme - make "In Stock" text white for readability - HIGH SPECIFICITY */
html body.theme-dark .stock-status-badge.text-green-300,
html body:not(.theme-light) .stock-status-badge.text-green-300,
main.bg-marque-black .stock-status-badge.text-green-300,
html body.theme-dark main .stock-status-badge.text-green-300 {
    color: #ffffff !important;
}

/* Dark theme - make "Reserved" text white for readability - HIGH SPECIFICITY */
html body.theme-dark .stock-status-badge.text-yellow-300,
html body:not(.theme-light) .stock-status-badge.text-yellow-300,
main.bg-marque-black .stock-status-badge.text-yellow-300,
html body.theme-dark main .stock-status-badge.text-yellow-300 {
    color: #ffffff !important;
}

/* Dark theme - make "Sold" text white for readability - HIGH SPECIFICITY */
html body.theme-dark .stock-status-badge.text-red-500,
html body:not(.theme-light) .stock-status-badge.text-red-500,
main.bg-marque-black .stock-status-badge.text-red-500,
html body.theme-dark main .stock-status-badge.text-red-500 {
    color: #ffffff !important;
}

/* Dark theme - make "In Stock" text white in expanded detail panel - HIGH SPECIFICITY */
html body.theme-dark .slab-detail-panel .text-green-300,
html body:not(.theme-light) .slab-detail-panel .text-green-300,
html body.theme-dark .slab-detail-panel span.text-green-300,
main.bg-marque-black .slab-detail-panel .text-green-300,
html body.theme-dark main .slab-detail-panel .text-green-300 {
    color: #ffffff !important;
}

/* Dark theme - make "Reserved" text white in expanded detail panel - HIGH SPECIFICITY */
html body.theme-dark .slab-detail-panel .text-yellow-300,
html body:not(.theme-light) .slab-detail-panel .text-yellow-300,
html body.theme-dark .slab-detail-panel span.text-yellow-300,
main.bg-marque-black .slab-detail-panel .text-yellow-300,
html body.theme-dark main .slab-detail-panel .text-yellow-300 {
    color: #ffffff !important;
}

/* Dark theme - make "Sold" text white in expanded detail panel - HIGH SPECIFICITY */
html body.theme-dark .slab-detail-panel .text-red-500,
html body:not(.theme-light) .slab-detail-panel .text-red-500,
html body.theme-dark .slab-detail-panel span.text-red-500,
main.bg-marque-black .slab-detail-panel .text-red-500,
html body.theme-dark main .slab-detail-panel .text-red-500 {
    color: #ffffff !important;
}

/* =================================
   ULTRA HIGH PRIORITY: Force text colors with maximum specificity
   ================================= */

/* Light theme - ULTRA SPECIFIC selectors for stock status badges */
html body.theme-light main.bg-marque-black .stock-status-badge[class*="text-green-300"],
html body.theme-light main.bg-marque-black .stock-status-badge[class*="text-yellow-300"],
html body.theme-light main.bg-marque-black .stock-status-badge[class*="text-red-500"],
html body.theme-light .stock-status-badge[class*="text-green-300"],
html body.theme-light .stock-status-badge[class*="text-yellow-300"],
html body.theme-light .stock-status-badge[class*="text-red-500"] {
    color: #4a4a4a !important;
}

/* Light theme - ULTRA SPECIFIC selectors for detail panel */
html body.theme-light main.bg-marque-black .slab-detail-panel [class*="text-green-300"],
html body.theme-light main.bg-marque-black .slab-detail-panel [class*="text-yellow-300"],
html body.theme-light main.bg-marque-black .slab-detail-panel [class*="text-red-500"],
html body.theme-light .slab-detail-panel [class*="text-green-300"],
html body.theme-light .slab-detail-panel [class*="text-yellow-300"],
html body.theme-light .slab-detail-panel [class*="text-red-500"] {
    color: #4a4a4a !important;
}

/* Dark theme - ULTRA SPECIFIC selectors for stock status badges */
html body.theme-dark main.bg-marque-black .stock-status-badge[class*="text-green-300"],
html body.theme-dark main.bg-marque-black .stock-status-badge[class*="text-yellow-300"],
html body.theme-dark main.bg-marque-black .stock-status-badge[class*="text-red-500"],
html body:not(.theme-light) main.bg-marque-black .stock-status-badge[class*="text-green-300"],
html body:not(.theme-light) main.bg-marque-black .stock-status-badge[class*="text-yellow-300"],
html body:not(.theme-light) main.bg-marque-black .stock-status-badge[class*="text-red-500"] {
    color: #ffffff !important;
}

/* Dark theme - ULTRA SPECIFIC selectors for detail panel */
html body.theme-dark main.bg-marque-black .slab-detail-panel [class*="text-green-300"],
html body.theme-dark main.bg-marque-black .slab-detail-panel [class*="text-yellow-300"],
html body.theme-dark main.bg-marque-black .slab-detail-panel [class*="text-red-500"],
html body:not(.theme-light) main.bg-marque-black .slab-detail-panel [class*="text-green-300"],
html body:not(.theme-light) main.bg-marque-black .slab-detail-panel [class*="text-yellow-300"],
html body:not(.theme-light) main.bg-marque-black .slab-detail-panel [class*="text-red-500"] {
    color: #ffffff !important;
}

/* =================================
   FINAL OVERRIDE: Direct class targeting with maximum specificity
   ================================= */

/* Light theme - Direct class override for ALL stock status text */
body.theme-light .stock-status-badge.text-green-300,
body.theme-light .stock-status-badge.text-yellow-300,
body.theme-light .stock-status-badge.text-red-500,
body.theme-light main .stock-status-badge.text-green-300,
body.theme-light main .stock-status-badge.text-yellow-300,
body.theme-light main .stock-status-badge.text-red-500,
body.theme-light main.bg-marque-black .stock-status-badge.text-green-300,
body.theme-light main.bg-marque-black .stock-status-badge.text-yellow-300,
body.theme-light main.bg-marque-black .stock-status-badge.text-red-500 {
    color: #4a4a4a !important;
}

body.theme-light .slab-detail-panel .text-green-300,
body.theme-light .slab-detail-panel .text-yellow-300,
body.theme-light .slab-detail-panel .text-red-500,
body.theme-light main .slab-detail-panel .text-green-300,
body.theme-light main .slab-detail-panel .text-yellow-300,
body.theme-light main .slab-detail-panel .text-red-500,
body.theme-light main.bg-marque-black .slab-detail-panel .text-green-300,
body.theme-light main.bg-marque-black .slab-detail-panel .text-yellow-300,
body.theme-light main.bg-marque-black .slab-detail-panel .text-red-500,
body.theme-light .slab-detail-panel span.text-green-300,
body.theme-light .slab-detail-panel span.text-yellow-300,
body.theme-light .slab-detail-panel span.text-red-500 {
    color: #4a4a4a !important;
}

/* Dark theme - Direct class override for ALL stock status text */
body.theme-dark .stock-status-badge.text-green-300,
body.theme-dark .stock-status-badge.text-yellow-300,
body.theme-dark .stock-status-badge.text-red-500,
body.theme-dark main .stock-status-badge.text-green-300,
body.theme-dark main .stock-status-badge.text-yellow-300,
body.theme-dark main .stock-status-badge.text-red-500,
main.bg-marque-black .stock-status-badge.text-green-300,
main.bg-marque-black .stock-status-badge.text-yellow-300,
main.bg-marque-black .stock-status-badge.text-red-500 {
    color: #ffffff !important;
}

body.theme-dark .slab-detail-panel .text-green-300,
body.theme-dark .slab-detail-panel .text-yellow-300,
body.theme-dark .slab-detail-panel .text-red-500,
body.theme-dark main .slab-detail-panel .text-green-300,
body.theme-dark main .slab-detail-panel .text-yellow-300,
body.theme-dark main .slab-detail-panel .text-red-500,
main.bg-marque-black .slab-detail-panel .text-green-300,
main.bg-marque-black .slab-detail-panel .text-yellow-300,
main.bg-marque-black .slab-detail-panel .text-red-500,
body.theme-dark .slab-detail-panel span.text-green-300,
body.theme-dark .slab-detail-panel span.text-yellow-300,
body.theme-dark .slab-detail-panel span.text-red-500 {
    color: #ffffff !important;
}

/* =================================
   Light Theme: In Stock Product Name (h3) Color Fix
   ================================= */

/* Light theme - make product name (h3) dark for readability - MAXIMUM SPECIFICITY */
html body.theme-light main.bg-marque-black .slab-card h3.text-white.font-inter,
html body.theme-light main.bg-marque-black .slab-card h3.text-white,
html body.theme-light .slab-card h3.text-white.font-inter,
html body.theme-light .slab-card h3.text-white,
body.theme-light main.bg-marque-black .slab-card h3.text-white,
body.theme-light .slab-card h3.text-white,
html body.theme-light main.bg-marque-black .slab-card h3,
html body.theme-light .slab-card h3,
body.theme-light main.bg-marque-black .slab-card h3,
body.theme-light .slab-card h3 {
    color: #1a1a1a !important; /* Dark gray/black for light theme */
}

/* Also target with attribute selector for extra specificity */
html body.theme-light main.bg-marque-black .slab-card h3[class*="text-white"],
html body.theme-light .slab-card h3[class*="text-white"],
body.theme-light main.bg-marque-black .slab-card h3[class*="text-white"],
body.theme-light .slab-card h3[class*="text-white"] {
    color: #1a1a1a !important; /* Dark gray/black for light theme */
}

/* Dark theme - keep product name white */
html body.theme-dark main.bg-marque-black .slab-card h3.text-white,
html body:not(.theme-light) main.bg-marque-black .slab-card h3.text-white,
main.bg-marque-black .slab-card h3.text-white,
html body.theme-dark .slab-card h3.text-white,
html body:not(.theme-light) .slab-card h3.text-white {
    color: #ffffff !important; /* White for dark theme */
}

/* =================================
   ULTRA HIGH PRIORITY: Force product name color in light theme
   ================================= */

/* Light theme - ULTRA SPECIFIC override for product name - MUST be at the end */
html body.theme-light main.bg-marque-black article.slab-card h3.text-white.font-inter.text-lg,
html body.theme-light main.bg-marque-black article.slab-card h3.text-white.font-inter,
html body.theme-light main.bg-marque-black article.slab-card h3.text-white,
html body.theme-light main.bg-marque-black .slab-card h3.text-white.font-inter.text-lg,
html body.theme-light main.bg-marque-black .slab-card h3.text-white.font-inter,
html body.theme-light main.bg-marque-black .slab-card h3.text-white,
html body.theme-light article.slab-card h3.text-white.font-inter.text-lg,
html body.theme-light article.slab-card h3.text-white.font-inter,
html body.theme-light article.slab-card h3.text-white,
html body.theme-light .slab-card h3.text-white.font-inter.text-lg,
html body.theme-light .slab-card h3.text-white.font-inter,
html body.theme-light .slab-card h3.text-white,
body.theme-light main.bg-marque-black article.slab-card h3.text-white,
body.theme-light main.bg-marque-black .slab-card h3.text-white,
body.theme-light article.slab-card h3.text-white,
body.theme-light .slab-card h3.text-white {
    color: #1a1a1a !important; /* Dark gray/black for light theme - MAXIMUM PRIORITY */
}

/* =================================
   Filter Input Dark Theme Override - FINAL (MAXIMUM PRIORITY)
   Override Tailwind bg-black/20 class for dark theme
   Only apply when NOT in light theme
   ================================= */
/* When body has theme-dark, filter inputs are always dark (does not depend on main.bg-marque-black) */
body.theme-dark aside.filter-panel select,
body.theme-dark aside.filter-panel input[type="text"],
body.theme-dark .filter-panel select,
body.theme-dark .filter-panel input[type="text"] {
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
body.theme-dark aside.filter-panel select option,
body.theme-dark .filter-panel select option {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
}
body.theme-dark aside.filter-panel input[type="text"]::placeholder,
body.theme-dark .filter-panel input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

html body:not(.theme-light) main.bg-marque-black aside.filter-panel select[class*="bg-black"],
html body:not(.theme-light) main.bg-marque-black aside.filter-panel input[type="text"][class*="bg-black"],
html body:not(.theme-light) main.bg-marque-black .filter-panel select[class*="bg-black"],
html body:not(.theme-light) main.bg-marque-black .filter-panel input[type="text"][class*="bg-black"],
body:not(.theme-light) main.bg-marque-black aside.filter-panel select[class*="bg-black"],
body:not(.theme-light) main.bg-marque-black aside.filter-panel input[type="text"][class*="bg-black"],
body:not(.theme-light) main.bg-marque-black .filter-panel select[class*="bg-black"],
body:not(.theme-light) main.bg-marque-black .filter-panel input[type="text"][class*="bg-black"],
main.bg-marque-black:not(.theme-light) aside.filter-panel select[class*="bg-black"],
main.bg-marque-black:not(.theme-light) aside.filter-panel input[type="text"][class*="bg-black"],
main.bg-marque-black:not(.theme-light) .filter-panel select[class*="bg-black"],
main.bg-marque-black:not(.theme-light) .filter-panel input[type="text"][class*="bg-black"] {
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Dropdown options - dark theme (when dropdown is open) */
html body:not(.theme-light) main.bg-marque-black aside.filter-panel select[class*="bg-black"] option,
html body:not(.theme-light) main.bg-marque-black .filter-panel select[class*="bg-black"] option,
body:not(.theme-light) main.bg-marque-black aside.filter-panel select[class*="bg-black"] option,
body:not(.theme-light) main.bg-marque-black .filter-panel select[class*="bg-black"] option,
html body:not(.theme-light) main.bg-marque-black aside.filter-panel select option,
html body:not(.theme-light) main.bg-marque-black .filter-panel select option,
body:not(.theme-light) main.bg-marque-black aside.filter-panel select option,
body:not(.theme-light) main.bg-marque-black .filter-panel select option {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
}

/* CTA split row: WhatsApp + Contact Us side by side */
.cta-split-row {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}
.cta-split-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0.5rem;
    border-radius: 0.25rem;
    font-family: var(--site-font-family);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.cta-split-contact {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
}
.cta-split-contact:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
}
.cta-split-wa {
    /* Match visual weight of other CTAs by default, but keep WhatsApp hover accent */
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    gap: 0.4rem;
}
.cta-split-wa:hover {
    background: rgba(37,211,102,0.08);
    border-color: #25d366;
    color: #25d366;
}
.cta-wa-svg {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}
.cta-wa-text {
    font-size: 0.9375rem;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: none;
}
.theme-light .cta-split-contact {
    background: rgba(0,0,0,0.05);
    color: #1a1a1a;
    border-color: rgba(0,0,0,0.12);
}
.theme-light .cta-split-contact:hover {
    background: rgba(0,0,0,0.1);
    border-color: rgba(0,0,0,0.18);
}
.theme-light .cta-split-wa {
    background: rgba(0,0,0,0.05);
    color: #1a1a1a;
    border-color: rgba(0,0,0,0.12);
}
.theme-light .cta-split-wa:hover {
    background: rgba(37,211,102,0.06);
    border-color: #25d366;
    color: #128c7e;
}

/* FAQ accordion - open state (inline style yasağı için sınıf kullanımı) */
.faq-panel.faq-panel-open {
    max-height: 80rem;
}