.product-card, .content-card {
    display: flex !important;
    background-color: #ffffff;
    border-radius: var(--border-radius-base) !important;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    overflow: hidden;
    text-decoration: none;
}
.product-card:hover, .content-card:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
    .product-card, .content-card { flex-direction: column !important; }
/* Tüm kartlar - Light Mode beyaz arka plan */
.product-card,
.content-card,
.katalog-card,
.video-card,
#kataloglar .bg-white,
#videolar .bg-white {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border-radius: var(--border-radius-base) !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
    overflow: hidden;
}

.product-card:hover,
.content-card:hover,
.katalog-card:hover,
.video-card:hover,
#kataloglar .bg-white:hover,
#videolar .bg-white:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Kart içi metin renkleri - Light Mode */
.product-card h3,
.content-card h3,
.katalog-card h3,
.video-card h3 {
    color: var(--color-text-heading) !important;
}

.product-card p,
.content-card p,
.katalog-card p,
.video-card p,
.product-card .text-body,
.content-card .text-body {
    color: var(--color-text-body) !important;
}

/* Referans kartları */
.reference-item {
    background-color: #ffffff;
    border-radius: var(--border-radius-base) !important;
    box-shadow: none;
    transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
    border: 1px solid #d1d5db;
}

.reference-item:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    border-color: var(--color-primary);
}
/* =============================================== */
/* DİNAMİK STİLLER (Veritabanından Üretildi)      */
/* Oluşturma: 2026-07-09 12:58:36 */
/* =============================================== */

/* ─── Global Polish & Premium Details ───────────────────────────────────────── */
::selection { background: var(--color-primary, #0ea5e9); color: #fff; }
::-moz-selection { background: var(--color-primary, #0ea5e9); color: #fff; }

/* Modern Custom Scrollbar */
@media (min-width: 1024px) {
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: var(--color-bg-light, #f8fafc); }
    .dark-mode ::-webkit-scrollbar-track { background: var(--color-bg-dark, #0f172a); }
    ::-webkit-scrollbar-thumb { 
        background: color-mix(in srgb, var(--color-primary, #0ea5e9) 40%, transparent);
        border-radius: 10px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover { 
        background: var(--color-primary, #0ea5e9);
        border: 2px solid transparent;
        background-clip: padding-box;
    }
}

/* Global Focus & Accessibility Polish */
:focus-visible { outline: 2px solid var(--color-primary, #0ea5e9); outline-offset: 4px; }

/* =============================================== */
/* TAILWIND TEXT-PRIMARY OVERRIDE                 */
/* =============================================== */
.text-primary {
    --tw-text-opacity: 1 !important;
    color: var(--color-primary) !important;
}

/* =============================================== */
/* CSS VARIABLES                                  */
/* =============================================== */
:root {
    --color-primary: #65a30d;
    --color-primary-rgb: 101, 163, 13;
    --color-primary-alpha: #65a30d14;
    --color-primary-dark: #3c6107;
    --color-text-hero: #ffffff;
    --color-text-heading: #1a2e05;
    --color-text-body: #374151;
    --color-bg-light: #f0f9ff;
    --color-bg-dark: #1a2e05;
    --color-button-primary: #4d7c0f;
    --color-button-secondary: #3f6212;
    --font-family-base: 'Plus Jakarta Sans', sans-serif;
    --hero-height: 400px;
    --border-radius-base: 9px;
    --color-border: rgba(0,0,0,0.1);
    --color-heading: #1a2e05;
    --color-text: #374151;
    
    /* GLASSMOPRHISM VARIABLES */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-blur: blur(12px);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    --glass-hover-bg: rgba(255, 255, 255, 0.14);
    --glass-hover-border: rgba(255, 255, 255, 0.25);
}

/* ===================================================================== */
/* MERKEZİ TEMA TOKENLARI (theme_engine.php)                             */
/* :root = açık tema, html.dark-mode = karanlık tema. Bileşenler bu      */
/* değişkenleri tüketir; runtime tema geçişi cascade ile çözülür.        */
/* ===================================================================== */
:root {
    --bg-page: #f0f9ff;
    --sw-bg: #ffffff;
    --sw-heading: #1a2e05;
    --sw-text: #374151;
    --sw-muted: #64748b;
    --sw-accent: #52850a;
    --sw-link: #52850a;
    --sw-border: rgba(15,23,42,0.10);
    --sz-bg: rgba(101, 163, 13, 0.69);
    --sz-grad: linear-gradient(165deg, rgba(255,255,255,0.08) 0%, transparent 40%, rgba(0,0,0,0.08) 100%);
    --sz-heading: #0f172a;
    --sz-text: #1e293b;
    --sz-muted: #475569;
    --sz-accent: #52850a;
    --sz-eyebrow: #2c4a06;
    --sz-marker: #52850a;
    --sz-link: #52850a;
    --sz-border: rgba(15,23,42,0.10);
    --sd-heading: #ffffff;
    --sd-text: rgba(255,255,255,0.90);
    --sd-muted: rgba(255,255,255,0.66);
    --sd-accent: #bad692;
    --sd-marker: #ffffff;
    --sd-link: #bad692;
    --cw-bg: #ffffff;
    --cw-border: rgba(15,23,42,0.08);
    --cw-shadow: 0 8px 24px -6px rgba(0,0,0,0.10);
    --cw-heading: #0f172a;
    --cw-text: #1e293b;
    --cw-muted: #64748b;
    --cw-icon: #65a30d;
    --cz-bg: #ffffff;
    --cz-border: rgba(15,23,42,0.08);
    --cz-shadow: 0 8px 24px -6px rgba(0,0,0,0.10);
    --cz-heading: #0f172a;
    --cz-text: #1e293b;
    --cz-muted: #64748b;
    --cz-icon: #65a30d;
    --cd-bg: rgba(255,255,255,0.16);
    --cd-border: rgba(255,255,255,0.30);
    --cd-shadow: 0 8px 32px rgba(0,0,0,0.10);
    --cd-heading: #ffffff;
    --cd-text: rgba(255,255,255,0.92);
    --cd-muted: rgba(255,255,255,0.72);
    --cd-icon: #ffffff;
    --form-bg: #ffffff;
    --form-border: rgba(15,23,42,0.16);
    --form-shadow: 0 14px 40px rgba(15,23,42,0.10);
    --form-heading: #0f172a;
    --form-text: #475569;
    --form-input-bg: #ffffff;
    --form-input-text: #0f172a;
    --form-input-border: #94a3b8;
    --form-placeholder: rgba(15,23,42,0.45);
    --form-kvkk-bg: #f1f5f9;
    --form-kvkk-text: #334155;
    --cc-bg: #ffffff;
    --cc-border: rgba(15,23,42,0.12);
    --cc-shadow: 0 10px 30px rgba(15,23,42,0.08);
    --cc-text: #0f172a;
    --cc-muted: #475569;
    --cc-link-bg: #f8fafc;
    --cc-link-border: #cbd5e1;
    --cc-icon: #65a30d;
    --cc-link-hover-bg: rgba(101, 163, 13, 0.10);
    --cc-link-hover-border: #65a30d;
    --cc-link-hover-text: #52850a;
    --cc-link-hover-icon: #52850a;
    --cc-link-hover-shadow: 0 10px 26px -6px rgba(15,23,42,0.22);
    --brand: #65a30d;
    --brand-strong: #52850a;
    --brand-soft: #bad692;
}
html.dark-mode {
    --bg-page: #0b1220;
    --sw-bg: #0f172a;
    --sw-heading: #ffffff;
    --sw-text: rgba(255,255,255,0.90);
    --sw-muted: rgba(255,255,255,0.66);
    --sw-accent: #bad692;
    --sw-link: #bad692;
    --sw-border: rgba(255,255,255,0.18);
    --sz-bg: rgba(101, 163, 13, 0.9);
    --sz-grad: linear-gradient(165deg, rgba(0,0,0,0.20) 0%, transparent 60%);
    --sz-heading: #ffffff;
    --sz-text: rgba(255,255,255,0.90);
    --sz-muted: rgba(255,255,255,0.66);
    --sz-accent: #bad692;
    --sz-eyebrow: #ffffff;
    --sz-marker: #ffffff;
    --sz-link: #bad692;
    --sz-border: rgba(255,255,255,0.18);
    --sd-heading: #ffffff;
    --sd-text: rgba(255,255,255,0.90);
    --sd-muted: rgba(255,255,255,0.66);
    --sd-accent: #bad692;
    --sd-marker: #ffffff;
    --sd-link: #bad692;
    --cw-bg: #19243a;
    --cw-border: rgba(255,255,255,0.10);
    --cw-shadow: 0 10px 30px -8px rgba(0,0,0,0.55);
    --cw-heading: #ffffff;
    --cw-text: #cbd5e1;
    --cw-muted: #94a3b8;
    --cw-icon: #bad692;
    --cz-bg: #19243a;
    --cz-border: rgba(255,255,255,0.10);
    --cz-shadow: 0 10px 30px -8px rgba(0,0,0,0.55);
    --cz-heading: #ffffff;
    --cz-text: #cbd5e1;
    --cz-muted: #94a3b8;
    --cz-icon: #bad692;
    --cd-bg: #19243a;
    --cd-border: rgba(255,255,255,0.10);
    --cd-shadow: 0 10px 30px -8px rgba(0,0,0,0.55);
    --cd-heading: #ffffff;
    --cd-text: #cbd5e1;
    --cd-muted: #94a3b8;
    --cd-icon: #bad692;
    --form-bg: #111c2e;
    --form-border: rgba(255,255,255,0.10);
    --form-shadow: 0 16px 44px rgba(0,0,0,0.5);
    --form-heading: #ffffff;
    --form-text: #cbd5e1;
    --form-input-bg: #0b1424;
    --form-input-text: #f1f5f9;
    --form-input-border: rgba(255,255,255,0.18);
    --form-placeholder: rgba(255,255,255,0.42);
    --form-kvkk-bg: rgba(255,255,255,0.05);
    --form-kvkk-text: #cbd5e1;
    --cc-bg: #111c2e;
    --cc-border: rgba(255,255,255,0.10);
    --cc-shadow: 0 12px 34px rgba(0,0,0,0.5);
    --cc-text: #ffffff;
    --cc-muted: #cbd5e1;
    --cc-link-bg: rgba(255,255,255,0.04);
    --cc-link-border: rgba(255,255,255,0.12);
    --cc-icon: #bad692;
    --cc-link-hover-bg: rgba(255,255,255,0.12);
    --cc-link-hover-border: #bad692;
    --cc-link-hover-text: #bad692;
    --cc-link-hover-icon: #bad692;
    --cc-link-hover-shadow: 0 10px 26px -6px rgba(0,0,0,0.50);
    --brand: #65a30d;
    --brand-strong: #52850a;
    --brand-soft: #bad692;
}

/* =============================================== */
/* ZEBRA STRİPİNG - MODERN GLASS LOGIC            */
/* =============================================== */
/* ===================================================================== */
/* TOKEN TÜKETİCİ KATMANI — BÖLÜM ZEMİNLERİ & METİN                       */
/* Renkler theme_engine token'larından gelir; tema/mod cascade ile çözülür*/
/* ===================================================================== */

/* Bölüm zeminleri */
.bg-zebra {
    background-color: var(--sz-bg) !important;
    background-image: var(--sz-grad) !important;
}
section.bg-white {
    background-color: var(--sw-bg) !important;
}

/* ── bg-white bölüm metni ── */
section.bg-white .text-heading,
section.bg-white h1, section.bg-white h2, section.bg-white h3,
section.bg-white h4, section.bg-white h5, section.bg-white h6 {
    color: var(--sw-heading) !important;
}
section.bg-white .text-body,
section.bg-white p:not(.text-primary):not(.text-white),
section.bg-white li, section.bg-white td, section.bg-white th,
section.bg-white .prose, section.bg-white .prose p, section.bg-white .prose li {
    color: var(--sw-text) !important;
}
section.bg-white .text-primary,
section.bg-white span.text-primary,
section.bg-white .text-primary.uppercase {
    color: var(--sw-accent) !important;
    opacity: 1 !important;
}
section.bg-white .prose a { color: var(--sw-link) !important; }

/* ── bg-zebra bölüm metni ── */
.bg-zebra .text-heading,
.bg-zebra h1, .bg-zebra h2, .bg-zebra h3, .bg-zebra h4, .bg-zebra h5, .bg-zebra h6 {
    color: var(--sz-heading) !important;
}
.bg-zebra .text-body,
.bg-zebra p:not(.text-primary):not(.text-white),
.bg-zebra li, .bg-zebra td, .bg-zebra th,
.bg-zebra .prose, .bg-zebra .prose p, .bg-zebra .prose li {
    color: var(--sz-text) !important;
}
.bg-zebra .prose ul>li::marker,
.bg-zebra .prose ol>li::marker,
.bg-zebra .prose li::marker,
.bg-zebra li::marker {
    color: var(--sz-marker) !important;
}
.bg-zebra .text-primary,
.bg-zebra span.text-primary,
.bg-zebra h2.text-primary {
    color: var(--sz-accent) !important;
    opacity: 1 !important;
}
/* Küçük üst başlık (eyebrow): zemin marka renginde olduğundan kesin ayrışan ton */
.bg-zebra .text-primary.uppercase,
.bg-zebra .uppercase.text-primary,
section.bg-zebra .text-primary.uppercase {
    color: var(--sz-eyebrow) !important;
    opacity: 1 !important;
}
.bg-zebra .prose a {
    color: var(--sz-link) !important;
    border-bottom-color: var(--sz-link) !important;
}

/* ── bg-slate-900 / koyu bölüm metni ── */
section.bg-slate-900 .text-heading,
section.bg-slate-900 h1, section.bg-slate-900 h2, section.bg-slate-900 h3,
section.bg-slate-900 h4, section.bg-slate-900 h5, section.bg-slate-900 h6,
section.bg-slate-900 .prose h1, section.bg-slate-900 .prose h2,
section.bg-slate-900 .prose h3, section.bg-slate-900 .prose h4 {
    color: var(--sd-heading) !important;
}
section.bg-slate-900 .text-body,
section.bg-slate-900 p:not(.text-primary):not(.text-white),
section.bg-slate-900 li, section.bg-slate-900 td, section.bg-slate-900 th,
section.bg-slate-900 .prose, section.bg-slate-900 .prose p, section.bg-slate-900 .prose li {
    color: var(--sd-text) !important;
}
section.bg-slate-900 .prose ul>li::marker,
section.bg-slate-900 .prose ol>li::marker,
section.bg-slate-900 .prose li::marker {
    color: var(--sd-marker) !important;
}
section.bg-slate-900 .text-primary,
section.bg-slate-900 .text-primary.uppercase {
    color: var(--sd-accent) !important;
    opacity: 1 !important;
}
section.bg-slate-900 .prose a { color: var(--sd-link) !important; }

/* ===================================================================== */
/* TOKEN TÜKETİCİ KATMANI — BİLGİ KARTLARI (Değer/İstatistik/Tarihçe)     */
/* Kartlar bulundukları bölüme göre bağlamsal token tüketir; tema değeri  */
/* :root / html.dark-mode'da otomatik değişir.                            */
/* ===================================================================== */
.bg-white .value-card, .bg-white .stat-card, .bg-white .timeline-card,
.bg-zebra .value-card, .bg-zebra .stat-card, .bg-zebra .timeline-card,
.bg-slate-900 .value-card, .bg-slate-900 .stat-card, .bg-slate-900 .timeline-card {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
/* Beyaz bölümdeki bilgi kartları */
.bg-white .value-card, .bg-white .stat-card, .bg-white .timeline-card {
    background-color: var(--cw-bg) !important;
    border: 1px solid var(--cw-border) !important;
    box-shadow: var(--cw-shadow) !important;
}
.bg-white .value-card .value-title, .bg-white .value-card h3,
.bg-white .stat-card .stat-number, .bg-white .stat-card h3,
.bg-white .timeline-card .timeline-title, .bg-white .timeline-card h3 {
    color: var(--cw-heading) !important; text-shadow: none !important;
}
.bg-white .value-card .value-desc, .bg-white .value-card p,
.bg-white .stat-card .stat-label, .bg-white .stat-card p,
.bg-white .timeline-card .timeline-desc, .bg-white .timeline-card p {
    color: var(--cw-text) !important;
}
.bg-white .value-card i, .bg-white .stat-card i, .bg-white .timeline-card i { color: var(--cw-icon) !important; }

/* Zebra bölümdeki bilgi kartları */
.bg-zebra .value-card, .bg-zebra .stat-card, .bg-zebra .timeline-card {
    background-color: var(--cz-bg) !important;
    border: 1px solid var(--cz-border) !important;
    box-shadow: var(--cz-shadow) !important;
}
.bg-zebra .value-card .value-title, .bg-zebra .value-card h3,
.bg-zebra .stat-card .stat-number, .bg-zebra .stat-card h3,
.bg-zebra .timeline-card .timeline-title, .bg-zebra .timeline-card h3 {
    color: var(--cz-heading) !important; text-shadow: none !important;
}
.bg-zebra .value-card .value-desc, .bg-zebra .value-card p,
.bg-zebra .stat-card .stat-label, .bg-zebra .stat-card p,
.bg-zebra .timeline-card .timeline-desc, .bg-zebra .timeline-card p {
    color: var(--cz-text) !important;
}
.bg-zebra .value-card i, .bg-zebra .stat-card i, .bg-zebra .timeline-card i { color: var(--cz-icon) !important; }

/* Koyu bölümdeki bilgi kartları */
.bg-slate-900 .value-card, .bg-slate-900 .stat-card, .bg-slate-900 .timeline-card {
    background-color: var(--cd-bg) !important;
    border: 1px solid var(--cd-border) !important;
    box-shadow: var(--cd-shadow) !important;
}
.bg-slate-900 .value-card .value-title, .bg-slate-900 .value-card h3,
.bg-slate-900 .stat-card .stat-number, .bg-slate-900 .stat-card h3,
.bg-slate-900 .timeline-card .timeline-title, .bg-slate-900 .timeline-card h3 {
    color: var(--cd-heading) !important; text-shadow: none !important;
}
.bg-slate-900 .value-card .value-desc, .bg-slate-900 .value-card p,
.bg-slate-900 .stat-card .stat-label, .bg-slate-900 .stat-card p,
.bg-slate-900 .timeline-card .timeline-desc, .bg-slate-900 .timeline-card p {
    color: var(--cd-text) !important;
}
.bg-slate-900 .value-card i, .bg-slate-900 .stat-card i, .bg-slate-900 .timeline-card i { color: var(--cd-icon) !important; }

/* ===================================================================== */
/* TOKEN TÜKETİCİ KATMANI — MEDYA KARTLARI (ürün/içerik/kategori/video)   */
/* ===================================================================== */
/* Medya kartları (görsel içerdiği için) her temada opak beyaz yüzey + koyu metin
   kalır; bölüm metin kuralının beyaz-üstü-beyaz yapmasını engelleriz. */
.bg-zebra .product-card .text-heading, .bg-zebra .product-card h2, .bg-zebra .product-card h3, .bg-zebra .product-card h4,
.bg-zebra .content-card .text-heading, .bg-zebra .content-card h2, .bg-zebra .content-card h3, .bg-zebra .content-card h4,
.bg-zebra .video-card h3, .bg-zebra .katalog-card h3,
.bg-slate-900 .product-card .text-heading, .bg-slate-900 .product-card h3,
.bg-slate-900 .content-card .text-heading, .bg-slate-900 .content-card h3,
.bg-slate-900 .video-card h3, .bg-slate-900 .katalog-card h3,
.bg-zebra article.product-card .text-heading, .bg-zebra article.video-card h3, .bg-zebra article.katalog-card h3 {
    color: var(--color-text-heading) !important; text-shadow: none !important;
}
.bg-zebra .product-card p, .bg-zebra .product-card .text-body, .bg-zebra .content-card p, .bg-zebra .content-card .text-body,
.bg-zebra .video-card p, .bg-zebra .katalog-card p,
.bg-slate-900 .product-card p, .bg-slate-900 .content-card p, .bg-slate-900 .video-card p, .bg-slate-900 .katalog-card p {
    color: var(--color-text-body) !important;
}
.bg-zebra .product-card .text-primary, .bg-zebra .content-card .text-primary,
.bg-zebra .video-card .text-primary, .bg-zebra .katalog-card .text-primary,
.bg-slate-900 .product-card .text-primary, .bg-slate-900 .content-card .text-primary {
    color: var(--color-primary) !important; opacity: 1 !important;
}

/* SOLID ALL MODU - Her yer tema rengi */

/* =============================================== */
/* DARK MODE STİLLERİ                              */
/* =============================================== */
html.dark-mode {
    --color-text-heading: #f1f5f9;
    --color-text-body: #cbd5e1;
    --color-bg-light: #1e293b;
    --color-bg-dark: #0f172a;
    --color-border: rgba(255,255,255,0.1);
    --color-heading: #f1f5f9;
    --color-text: #94a3b8;
}

html.dark-mode body {
    background-color: #0f172a;
    color: #cbd5e1;
}



/* =============================================== */
/* GLOBAL KART HOVER — Tema Rengi İnce Gölge       */
/* =============================================== */
.card,
.content-card,
.product-card,
.katalog-card,
.video-card,
.reference-item,
.search-result-card,
.stat-card,
.team-card,
.timeline-card,
.value-card,
article[data-animate],
[class*="-card"]:not([class*="contact"]):not([class*="address"]) {
    transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease, background-color 0.35s ease !important;
}

.card:hover,
.content-card:hover,
.product-card:hover,
.katalog-card:hover,
.video-card:hover,
.reference-item:hover,
.search-result-card:hover,
.stat-card:hover,
.team-card:hover,
.timeline-card:hover,
.value-card:hover,
article[data-animate]:hover,
[class*="-card"]:not([class*="contact"]):not([class*="address"]):hover {
    box-shadow: 0 8px 24px -4px rgba(101, 163, 13, 0.18) !important;
}

/* Dark mode için de aynı */
html.dark-mode .card:hover,
html.dark-mode .content-card:hover,
html.dark-mode .product-card:hover,
html.dark-mode .katalog-card:hover,
html.dark-mode .video-card:hover,
html.dark-mode .reference-item:hover,
html.dark-mode .search-result-card:hover,
html.dark-mode .stat-card:hover,
html.dark-mode .team-card:hover,
html.dark-mode .timeline-card:hover,
html.dark-mode .value-card:hover,
html.dark-mode article[data-animate]:hover,
html.dark-mode [class*="-card"]:not([class*="contact"]):not([class*="address"]):hover {
    box-shadow: 0 8px 24px -4px rgba(101, 163, 13, 0.28) !important;
}

/* ─── GLOBAL: Buton Tema Rengi Gölgesi ─── */
.btn-primary {
    box-shadow: 0 4px 14px rgba(101, 163, 13, 0.30) !important;
    transition: box-shadow 0.4s ease, transform 0.4s ease, background-color 0.4s ease;
}
.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(101, 163, 13, 0.45) !important;
}
.btn-secondary {
    box-shadow: 0 4px 12px rgba(101, 163, 13, 0.20) !important;
    transition: box-shadow 0.4s ease, transform 0.4s ease, background-color 0.4s ease;
}
.btn-secondary:hover {
    box-shadow: 0 6px 18px rgba(101, 163, 13, 0.35) !important;
}


/* Tüm başlıklar - primary renk hariç */
html.dark-mode h1:not(.text-primary),
html.dark-mode h2:not(.text-primary),
html.dark-mode h3:not(.text-primary),
html.dark-mode h4:not(.text-primary),
html.dark-mode h5:not(.text-primary),
html.dark-mode h6:not(.text-primary),
html.dark-mode .text-heading:not(.text-primary) {
    color: #f1f5f9 !important;
}

/* Primary renk dark mode'da da korunsun (Sadece normal zeminlerde) */
html.dark-mode .text-primary {
    color: var(--color-primary);
}

/* Tüm paragraflar ve body text - primary hariç */
html.dark-mode p:not(.text-primary),
html.dark-mode span:not(.text-primary):not(.uppercase),
html.dark-mode li:not(.text-primary),
html.dark-mode td:not(.text-primary),
html.dark-mode th:not(.text-primary),
html.dark-mode label:not(.text-primary),
html.dark-mode .text-body:not(.text-primary) {
    color: #cbd5e1;
}

/* Küçük üst başlıklar primary renkte kalsın (Sadece normal zeminlerde) */
html.dark-mode span.text-primary,
html.dark-mode span.uppercase.text-primary {
    color: var(--color-primary);
}

/* Bold ve semibold metinler - primary hariç */
html.dark-mode strong:not(.text-primary),
html.dark-mode b:not(.text-primary),
html.dark-mode .font-bold:not(.text-primary),
html.dark-mode .font-semibold:not(.text-primary),
html.dark-mode .font-extrabold:not(.text-primary),
html.dark-mode .font-black:not(.text-primary) {
    color: #f1f5f9 !important;
}

/* Prose içindeki bold */
html.dark-mode .prose strong,
html.dark-mode .prose b {
    color: #f1f5f9 !important;
}

/* Prose dark mode - kapsamlı */
html.dark-mode .prose {
    color: #cbd5e1 !important;
}

html.dark-mode .prose h1,
html.dark-mode .prose h2,
html.dark-mode .prose h3,
html.dark-mode .prose h4,
html.dark-mode .prose h5,
html.dark-mode .prose h6 {
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

html.dark-mode .prose p {
    color: #cbd5e1 !important;
}

html.dark-mode .prose a {
    color: var(--color-primary) !important;
}

html.dark-mode .prose ul li::marker,
html.dark-mode .prose ol li::marker {
    color: #ffffff !important;
}

html.dark-mode .prose blockquote {
    border-left-color: var(--color-primary) !important;
    color: #94a3b8 !important;
}

/* Section içindeki tüm metinler */
html.dark-mode section strong,
html.dark-mode section b,
html.dark-mode div strong,
html.dark-mode div b,
html.dark-mode p strong,
html.dark-mode p b {
    color: #f1f5f9 !important;
}

/* Slate ve gray renk sınıfları */
html.dark-mode .text-slate-600,
html.dark-mode .text-slate-700,
html.dark-mode .text-gray-600,
html.dark-mode .text-gray-700 {
    color: #94a3b8 !important;
}

html.dark-mode .text-slate-800,
html.dark-mode .text-slate-900,
html.dark-mode .text-gray-800,
html.dark-mode .text-gray-900,
html.dark-mode .text-black {
    color: #f1f5f9 !important;
}

html.dark-mode .text-slate-500,
html.dark-mode .text-gray-500 {
    color: #64748b !important;
}

/* Arka plan renkleri */
html.dark-mode .bg-white:not(.value-card):not(.team-card) {
    background-color: #0f172a !important;
}

html.dark-mode .value-card,
html.dark-mode .team-card {
    background-color: #1e293b !important;
}

html.dark-mode .bg-slate-50,
html.dark-mode .bg-gray-50 {
    background-color: #0f172a !important;
}

html.dark-mode .bg-slate-100,
html.dark-mode .bg-gray-100 {
    background-color: #0f172a !important;
}

html.dark-mode .bg-slate-200,
html.dark-mode .bg-gray-200 {
    background-color: #334155 !important;
}

/* Border renkleri */
html.dark-mode .border,
html.dark-mode .border-slate-200,
html.dark-mode .border-gray-200,
html.dark-mode .border-slate-100,
html.dark-mode .border-gray-100 {
    border-color: #334155 !important;
}

html.dark-mode .border-slate-300,
html.dark-mode .border-gray-300 {
    border-color: #475569 !important;
}

/* Kartlar */
html.dark-mode .product-card,
html.dark-mode .content-card,
html.dark-mode .katalog-card,
html.dark-mode .video-card,
html.dark-mode .reference-item {
    border-color: #334155;
}
html.dark-mode #videolar .bg-white,
html.dark-mode article[data-animate] {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .product-card:hover,
html.dark-mode .content-card:hover,
html.dark-mode .katalog-card:hover,
html.dark-mode .video-card:hover,
html.dark-mode #kataloglar .bg-white:hover,
html.dark-mode #videolar .bg-white:hover,
html.dark-mode article[data-animate]:hover {
    border-color: var(--color-primary) !important;
    box-shadow: none !important;
}

html.dark-mode .product-card h3,
html.dark-mode .product-card p,
html.dark-mode .content-card h3,
html.dark-mode .content-card p,
html.dark-mode .katalog-card h3,
html.dark-mode .katalog-card p,
html.dark-mode .video-card h3,
html.dark-mode .video-card p,
html.dark-mode .reference-item p,
html.dark-mode #kataloglar .bg-white h3,
html.dark-mode #kataloglar .bg-white p,
html.dark-mode #videolar .bg-white h3,
html.dark-mode #videolar .bg-white p,
html.dark-mode article[data-animate] h3,
html.dark-mode article[data-animate] p {
    color: #e2e8f0 !important;
}

html.dark-mode .product-card .text-body,
html.dark-mode .content-card .text-body,
html.dark-mode .katalog-card .text-body,
html.dark-mode .video-card .text-body,
html.dark-mode article[data-animate] .text-body {
    color: #ffffff !important;
}

/* Referans logoları dark mode'da daha görünür */
html.dark-mode .reference-item {
    border-color: rgba(255,255,255,0.25) !important;
    background-color: #1e293b !important;
}
html.dark-mode .reference-item img {
    filter: invert(1) grayscale(100%);
    opacity: 0.75;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

html.dark-mode .reference-item:hover img {
    filter: invert(0) grayscale(0%);
    opacity: 1;
}

/* Gölgeler */
html.dark-mode .shadow-md,
html.dark-mode .shadow-lg,
html.dark-mode .shadow-xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3) !important;
}

/* Mobil menü */
html.dark-mode #mobile-menu {
    background-color: #1e293b !important;
}

html.dark-mode #mobile-menu .border-gray-200,
html.dark-mode #mobile-menu .border-gray-100 {
    border-color: #334155 !important;
}

html.dark-mode .mobile-nav-link {
    color: #e2e8f0 !important;
}

html.dark-mode #mobile-menu .bg-slate-50 {
    background-color: #0f172a !important;
}

/* Mobil menü logo - dark mode */
.mobile-logo-text {
    color: var(--color-text-heading, #1e293b);
}

html.dark-mode .mobile-logo-normal {
    display: none !important;
}

html.dark-mode .mobile-logo-white {
    display: block !important;
}

html.dark-mode .mobile-logo-text {
    color: #f1f5f9 !important;
}

/* Footer */
html.dark-mode footer {
    background-color: #020617 !important;
}

/* Input ve form elemanları */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #64748b !important;
}

/* Dark mode icon toggle */
html.dark-mode .dark-mode-icon-light {
    display: none !important;
}
html.dark-mode .dark-mode-icon-dark {
    display: inline-block !important;
}

/* Dark mode label toggle (mobil menü için) */
html.dark-mode .dark-mode-label-light {
    display: none !important;
}
html.dark-mode .dark-mode-label-dark {
    display: inline !important;
}

/* Mobil dark mode switch */
html.dark-mode .dark-mode-switch {
    background-color: var(--color-primary) !important;
}
html.dark-mode .dark-mode-switch-dot {
    transform: translateX(16px);
}

/* =============================================== */
/* NAVBAR DARK MODE                                */
/* =============================================== */
html.dark-mode #header.scrolled {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode #header.scrolled .nav-link {
    color: #e2e8f0 !important;
}

html.dark-mode #header.scrolled .nav-link:hover {
    color: var(--color-primary) !important;
}

html.dark-mode #header.scrolled .logo-text {
    color: #f1f5f9 !important;
}

/* Dark mode'da scrolled header'da beyaz logo göster */
html.dark-mode #header.scrolled .logo-normal {
    display: none !important;
}
html.dark-mode #header.scrolled .logo-white {
    display: block !important;
}

/* Hamburger menü dark mode */
html.dark-mode #header.scrolled .hamburger-line {
    background-color: #f1f5f9 !important;
}

/* Overflow dropdown dark mode */
html.dark-mode #overflow-dropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode #overflow-dropdown a {
    color: #e2e8f0 !important;
}

html.dark-mode #overflow-dropdown a:hover {
    background-color: #334155 !important;
    color: var(--color-primary) !important;
}

html.dark-mode .overflow-submenu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Submenu dark mode */
html.dark-mode .submenu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .submenu::before {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .has-submenu:hover .submenu {
    border-color: var(--color-primary) !important;
    box-shadow:
        0 0 0 4px rgba(var(--color-primary-rgb), 0.12),
        0 12px 32px -4px rgba(var(--color-primary-rgb), 0.28) !important;
}

html.dark-mode .has-submenu:hover .submenu::before {
    border-color: var(--color-primary) !important;
}

html.dark-mode .submenu-item {
    color: #cbd5e1 !important;
}

html.dark-mode .submenu-item:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    font-weight: 600;
    border-left-color: #ffffff !important;
}

/* =============================================== */
/* SLIDER DARK MODE                                */
/* =============================================== */
html.dark-mode #home {
    background-color: #0f172a !important;
}

/* Slider dark mode */
html.dark-mode .slider-item {
    background-color: #0f172a !important;
}

html.dark-mode .slider-content-wrapper {
    background-color: #0f172a !important;
}

html.dark-mode .slider-item h1,
html.dark-mode .slider-item h2 {
    color: #ffffff !important;
}

html.dark-mode .slider-item p {
    color: #ffffff !important;
}

/* Hero section dark mode */
html.dark-mode .hero-section {
    background-color: #0f172a !important;
}

html.dark-mode .hero-section h1 {
    color: #ffffff !important;
}

html.dark-mode .hero-section p {
    color: rgba(255,255,255,0.85) !important;
}

/* Page banner dark mode */
html.dark-mode .page-banner {
    background-color: #1e293b !important;
}

html.dark-mode .page-banner h1 {
    color: #f1f5f9 !important;
}

html.dark-mode .page-banner p,
html.dark-mode .page-banner .breadcrumb {
    color: #94a3b8 !important;
}

/* Pattern slider dark mode */
html.dark-mode .bg-pattern-slider {
    background-color: #0f172a !important;
}

html.dark-mode .bg-pattern-slider h1,
html.dark-mode .bg-pattern-slider h2,
html.dark-mode .bg-pattern-slider .text-slate-900 {
    color: #f1f5f9 !important;
}

html.dark-mode .bg-pattern-slider p,
html.dark-mode .bg-pattern-slider .text-slate-600 {
    color: #94a3b8 !important;
}

/* Slider buton dark mode */
html.dark-mode .bg-pattern-slider a.bg-slate-900 {
    background-color: var(--color-primary) !important;
}

/* Slider indicators dark mode */
html.dark-mode .slider-indicator:not(.active) {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

/* =============================================== */
/* SECTION VE SAYFA DARK MODE                      */
/* =============================================== */

/* Section başlıkları */
html.dark-mode section h2,
html.dark-mode section h3,
html.dark-mode section .text-2xl,
html.dark-mode section .text-3xl,
html.dark-mode section .text-4xl {
    color: #f1f5f9 !important;
}

html.dark-mode section p,
html.dark-mode section .text-slate-600,
html.dark-mode section .text-gray-600 {
    color: #ffffff !important;
}

/* İletişim kartları — .contact-card/.address-card cam ::after kullanır, buraya dahil etme */
html.dark-mode [class*="contact"] .bg-white:not(.contact-card):not(.address-card),
html.dark-mode #iletisim-bilgileri .bg-white,
html.dark-mode section .bg-white.border:not(.contact-card):not(.address-card) {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
}

html.dark-mode section .bg-white.border:hover {
    border-color: #475569 !important;
}

/* İletişim sayfası içindeki tüm bg-white kutular */
html.dark-mode main .bg-white.border-slate-200,
html.dark-mode main .bg-white.border {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode main .bg-white.border-slate-200:hover,
html.dark-mode main .bg-white.border:hover {
    border-color: #475569 !important;
}

/* İletişim kartları içindeki bg-slate-50 alanlar */
html.dark-mode main .bg-slate-50 {
    background-color: #0f172a !important;
}

/* Referanslar section */
html.dark-mode #referanslar,
html.dark-mode .references-section {
    /* Zebra striping'e bırak - özel renk verme */
}

/* Galeri section */
html.dark-mode #galeri,
html.dark-mode .gallery-section {
    /* Zebra striping'e bırak - özel renk verme */
}

/* İletişim section */
html.dark-mode #iletisim,
html.dark-mode .contact-section {
    /* Zebra striping'e bırak - özel renk verme */
}

/* Harita container */
html.dark-mode .map-container {
    border-color: #334155 !important;
}

/* Breadcrumb */
html.dark-mode .breadcrumb,
html.dark-mode .breadcrumb a,
html.dark-mode nav[aria-label="breadcrumb"] {
    color: #94a3b8 !important;
}

html.dark-mode .breadcrumb a:hover {
    color: var(--color-primary) !important;
}

/* Arama modal */
html.dark-mode #search-modal .bg-white {
    background-color: #1e293b !important;
}

html.dark-mode #search-modal input {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark-mode #search-modal .border-b {
    border-color: #334155 !important;
}

html.dark-mode .search-result-item:hover {
    background-color: #334155 !important;
}

/* WhatsApp butonu */
html.dark-mode #whatsapp-button {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

/* Pagination */
html.dark-mode .pagination a,
html.dark-mode .pagination span {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .pagination a:hover {
    background-color: #334155 !important;
}

html.dark-mode .pagination .active {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

/* Pagination - nav içindeki linkler */
html.dark-mode nav[aria-label="Sayfalama"] a {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark-mode nav[aria-label="Sayfalama"] a:hover {
    background-color: #334155 !important;
    color: var(--color-primary) !important;
}

html.dark-mode nav[aria-label="Sayfalama"] span.bg-primary {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

html.dark-mode nav[aria-label="Sayfalama"] span.text-slate-400 {
    color: #64748b !important;
}

/* Detay sayfaları */
html.dark-mode .detail-page,
html.dark-mode .single-post,
html.dark-mode .single-product {
    background-color: #0f172a !important;
}

/* Sidebar */
html.dark-mode aside,
html.dark-mode .sidebar {
    background-color: transparent !important;
    border-color: #334155 !important;
}

html.dark-mode aside > div,
html.dark-mode .sidebar > div {
    background-color: transparent !important;
    border-color: #334155 !important;
}

/* Kategori kartı - light ve dark mode'da tema rengi border */
aside .sticky > div {
    border-color: var(--color-primary) !important;
}

html.dark-mode aside .sticky > div {
    border-color: var(--color-primary) !important;
}

html.dark-mode aside h3,
html.dark-mode .sidebar h3 {
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

html.dark-mode aside ul,
html.dark-mode .sidebar ul {
    border-color: #334155 !important;
}

/* Tags */
html.dark-mode .tag,
html.dark-mode [class*="tag"]:not([class*="instagram"]) {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Badges */
html.dark-mode .badge {
    background-color: #334155 !important;
}

/* Alerts */
html.dark-mode .alert {
    border-color: #475569 !important;
}

/* Accordion */
html.dark-mode .accordion-item {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .accordion-button {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Tabs */
html.dark-mode .tab-button {
    color: #94a3b8 !important;
}

html.dark-mode .tab-button.active {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Lightbox */
html.dark-mode #lightbox {
    background-color: rgba(0, 0, 0, 0.95) !important;
}

/* Cookie consent */
html.dark-mode .cookie-consent {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Cookie consent banner - ID ile */
html.dark-mode #cookie-consent-banner {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Floating card layout dark mode */
html.dark-mode .product-card > div:last-child,
html.dark-mode .content-card > div:last-child {
    background-color: #1e293b !important;
}

/* Form section dark mode */
html.dark-mode form.bg-slate-50,
html.dark-mode .bg-slate-50 form {
    background-color: #1e293b !important;
}

/* İletişim formu container */
html.dark-mode #contact-form {
    background-color: #1e293b !important;
}

/* Select dropdown dark mode */
html.dark-mode select option {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Solid all — form select */
body select,
body select.bg-white {
    background-color: transparent;
}

/* File input dark mode */
html.dark-mode input[type="file"] {
    color: #94a3b8 !important;
}

html.dark-mode input[type="file"]::file-selector-button {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border: none !important;
}

/* Arama sayfası dark mode */
html.dark-mode .search-filter-btn {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

html.dark-mode .search-filter-btn:hover {
    background-color: #334155 !important;
}

/* Video kartları dark mode */
html.dark-mode .video-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Katalog kartları dark mode */
html.dark-mode .catalog-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Ürün detay sayfası dark mode */
html.dark-mode .product-detail-section {
    background-color: #0f172a !important;
}

html.dark-mode .product-gallery-thumb {
    border-color: #334155 !important;
}

html.dark-mode .product-gallery-thumb.active {
    border-color: var(--color-primary) !important;
}

/* Ürün detay iletişim butonları dark mode */
html.dark-mode .contact-btn {
    color: #e2e8f0 !important;
    border-color: #e2e8f0 !important;
    background-color: transparent !important;
}
html.dark-mode .btn-whatsapp,
html.dark-mode .btn-mail {
    color: #e2e8f0 !important;
    border-color: #e2e8f0 !important;
}

/* Anahtar kelimeler dark mode */
html.dark-mode .text-slate-500 {
    color: #94a3b8 !important;
}
html.dark-mode .product-keywords {
    color: #94a3b8 !important;
}

/* Ürün fiyat alanı dark mode */
html.dark-mode .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

html.dark-mode .border-blue-400 {
    border-color: rgba(59, 130, 246, 0.5) !important;
}

html.dark-mode .text-blue-600 {
    color: #60a5fa !important;
}

html.dark-mode .text-blue-700 {
    color: #93c5fd !important;
}

/* Table dark mode */
html.dark-mode table {
    background-color: #1e293b !important;
}

html.dark-mode th {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

html.dark-mode td {
    border-color: #334155 !important;
}

html.dark-mode tr:hover {
    background-color: #334155 !important;
}

/* Code blocks dark mode */
html.dark-mode pre,
html.dark-mode code {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Blockquote dark mode */
html.dark-mode blockquote {
    background-color: #1e293b !important;
    border-left-color: var(--color-primary) !important;
    color: #cbd5e1 !important;
}

/* Scroll to top button */
html.dark-mode #scroll-to-top {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode #scroll-to-top:hover {
    background-color: var(--color-primary) !important;
}

/* Link renkleri */
html.dark-mode a:not(.btn-primary):not(.bg-primary):not([class*="text-"]) {
    color: #94a3b8;
}

html.dark-mode a:not(.btn-primary):not(.bg-primary):hover {
    color: var(--color-primary);
}

/* Divider ve separator */
html.dark-mode hr,
html.dark-mode .divider {
    border-color: #334155 !important;
}

/* Loading spinner */
html.dark-mode .spinner,
html.dark-mode .loading {
    border-color: #334155 !important;
    border-top-color: var(--color-primary) !important;
}

/* Tooltip */
html.dark-mode .tooltip {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Empty state */
html.dark-mode .empty-state {
    color: #64748b !important;
}

/* Icon colors */
html.dark-mode .fa-solid,
html.dark-mode .fa-regular,
html.dark-mode .fas,
html.dark-mode .far {
    color: inherit;
}

/* Specific icon overrides */
html.dark-mode .text-slate-400 i,
html.dark-mode .text-gray-400 i {
    color: #64748b !important;
}

/* =============================================== */

html {
    font-size: 87.5%; /* 14px taban boyutu - siteyi daha zarif hale getirmek için küçültüldü */
}

body {
    font-family: var(--font-family-base);
    color: var(--color-text-body);
    background-color: var(--color-bg-light);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    color: var(--color-text-heading);
}

.text-primary { color: var(--color-primary); }
.text-primary-dark { color: var(--color-primary); filter: brightness(0.8); }
.hover\:text-primary-dark:hover { color: var(--color-primary) !important; filter: brightness(0.8) !important; }

.bg-primary { background-color: var(--color-primary); }
.bg-primary-dark { background-color: var(--color-primary); filter: brightness(0.8); }
.hover\:bg-primary-dark:hover { background-color: var(--color-primary) !important; filter: brightness(0.8) !important; }

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

.bg-dark { background-color: var(--color-bg-dark); }
.text-hero-heading { color: var(--color-text-hero); }
.text-heading { color: var(--color-text-heading); }
.text-body { color: var(--color-text-body); }

.btn-primary {
    background-color: var(--color-button-primary);
    color: #ffffff;
}
.btn-primary:hover {
    background-color: var(--color-button-secondary);
}

/* Zebra Button - Secondary (Buton Hover Rengi kullanır) */
.btn-secondary {
    background-color: var(--color-button-secondary);
    color: #ffffff;
}
.btn-secondary:hover {
    background-color: var(--color-button-primary);
}

.prose a {
    color: var(--color-button-primary);
}
.prose a:hover {
    color: var(--color-button-secondary);
}
.prose blockquote {
    border-left-color: var(--color-primary);
}

/* Global Border Radius & Hero Height overrides */
/* Sadece ana bileşenlere veriyoruz, her şeye değil! */
.rounded-xl, .rounded-lg, .rounded-md, .rounded-sm, 
.btn, button, input, select, textarea, .product-card, .content-card, .btn-primary, .btn-secondary {
    border-radius: var(--border-radius-base);
}

/* İçerik modülü görselleri — border-radius dinamik */
main section img,
.prose img {
    border-radius: var(--border-radius-base);
}

/* İletişim barı içindeki butonların birbirini itmesini ve yuvarlak kalmasını engelliyoruz */
[id^="contact-widget-"] button {
    border-radius: 0 !important;
}

/* Yuvarlak elementler hariç (avatar, badge vb.) */
.rounded-full {
    border-radius: 9999px !important;
}

.hero-section {
    height: var(--hero-height) !important;
}

/* Hero section tema rengi arka plan */
.hero-section.bg-primary {
    background: var(--color-primary) !important;
}

html.dark-mode .hero-section.bg-primary {
    background: var(--color-primary-dark) !important;
}


.product-card, .content-card {
    display: flex !important;
    background-color: #ffffff;
    border-radius: var(--border-radius-base) !important;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    overflow: hidden;
    text-decoration: none;
}
.product-card:hover, .content-card:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
    .product-card, .content-card { flex-direction: column !important; }
/* Tüm kartlar - Light Mode beyaz arka plan */
.product-card,
.content-card,
.katalog-card,
.video-card,
#kataloglar .bg-white,
#videolar .bg-white {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border-radius: var(--border-radius-base) !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
    overflow: hidden;
}

.product-card:hover,
.content-card:hover,
.katalog-card:hover,
.video-card:hover,
#kataloglar .bg-white:hover,
#videolar .bg-white:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Kart içi metin renkleri - Light Mode */
.product-card h3,
.content-card h3,
.katalog-card h3,
.video-card h3 {
    color: var(--color-text-heading) !important;
}

.product-card p,
.content-card p,
.katalog-card p,
.video-card p,
.product-card .text-body,
.content-card .text-body {
    color: var(--color-text-body) !important;
}

/* Referans kartları */
.reference-item {
    background-color: #ffffff;
    border-radius: var(--border-radius-base) !important;
    box-shadow: none;
    transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
    border: 1px solid #d1d5db;
}

.reference-item:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    border-color: var(--color-primary);
}


/* =============================================== */
/* STATİK STİLLER (Orijinal styles.css içeriği)    */
/* =============================================== */

/* NAVBAR TRANSPARENCY */
#header {
    background: rgba(255,255,255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(255,255,255, 0.2);
}
#header .logo-text, #header .nav-link, #header #mobile-menu-button {
    color: white;
}
#header.scrolled {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-bottom-color: transparent;
}
#header.scrolled .logo-text, #header.scrolled #mobile-menu-button {
    color: var(--color-text-heading);
}
#header.scrolled .nav-link {
    color: var(--color-text-body);
}
#header.scrolled .nav-link:hover {
    color: var(--color-primary);
}

/* Submenu light modda koyu metin — solid_all hariç */
html:not(.dark-mode):not([data-solid-all="1"]) #header .has-submenu .submenu .submenu-item {
    color: #374151 !important;
}
html:not(.dark-mode):not([data-solid-all="1"]) #header .has-submenu .submenu .submenu-item:hover {
    color: var(--color-primary) !important;
}


#mobile-menu {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#mobile-menu.open {
    transform: translateX(0);
}
#menu-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
#menu-overlay.open {
    opacity: 1;
    visibility: visible;
}
#header.menu-is-open {
    z-index: 39 !important;
}
[data-animate] {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-animate="fade-in"] { transform: translateY(10px); }
[data-animate="fade-up"] { transform: translateY(15px); }
[data-animate="fade-down"] { transform: translateY(-15px); }
[data-animate="zoom-in"] { transform: scale(0.95); }

.is-visible[data-animate] {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.lightbox-transition {
    transition: opacity 0.3s ease-in-out;
}
.lightbox-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--border-radius-base);
    opacity: 0.7;
    transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.lightbox-thumb:hover {
    opacity: 1;
    transform: scale(1.05);
}
.lightbox-thumb.active {
    opacity: 1;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.3);
}

/* Lightbox scrollbar gizleme */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Lightbox animasyonları */
#lightbox {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#lightbox-img {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Lightbox buton hover efektleri */
#lightbox button:hover {
    transform: scale(1.05);
}

/* Responsive lightbox */
@media (max-width: 768px) {
    #lightbox-thumbnails .lightbox-thumb {
        width: 40px;
        height: 40px;
        margin: 0 2px;
    }
    
    #lightbox {
        padding: 8px !important;
    }
    
    #lightbox-img {
        max-width: 95vw !important;
        max-height: 60vh !important;
    }
    
    /* Lightbox bottom controls mobil spacing */
    #lightbox .space-y-4 {
        gap: 12px;
    }
    
    #lightbox .space-x-6 {
        gap: 16px;
    }
    
    /* Mobile slider 3:4 aspect ratio */
    #home {
        height: 75vh !important;
        max-height: calc(100vw * 4/3) !important;
    }
    
    /* Thumbnail container mobil scroll */
    #lightbox-thumbnails {
        max-width: calc(100vw - 32px);
        padding: 0 8px;
    }
}

.slider-indicator.active {
    background-color: #ffffff;
}

.prose {
    line-height: 1.8;
    font-size: 1rem;
}
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    font-weight: 600;
    margin-bottom: 0.75em;
    margin-top: 1.75em;
}
.prose h2 {
    font-size: 1.75rem;
    line-height: 2.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
}
.prose h3 {
    font-size: 1.375rem;
    line-height: 1.75rem;
}
.prose h4 {
    font-size: 1.125rem;
    line-height: 1.5rem;
}
.prose p {
    margin-bottom: 1.25em;
}
.prose ul {
    list-style-type: disc !important;
    padding-left: 1.5rem;
    margin-bottom: 1.25em;
}
.prose ol {
    list-style-type: decimal !important;
    padding-left: 1.5rem;
    margin-bottom: 1.25em;
}
.prose ul ul {
    list-style-type: circle !important;
}
.prose ul ul ul {
    list-style-type: square !important;
}
.prose li {
    display: list-item !important;
    margin-bottom: 0.5em;
    padding-left: 0.5rem;
}
.prose li::marker {
    color: #64748b;
}

/* ── İÇERİK MODÜLÜ KOYU BÖLÜM (.bg-slate-900) — okunabilir metin ── */
section.bg-slate-900 .prose,
section.bg-slate-900 .prose p,
section.bg-slate-900 .prose li,
section.bg-slate-900 p,
section.bg-slate-900 li,
section.bg-slate-900 .text-body,
section.bg-slate-900 span:not(.text-primary) {
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 1 !important;
}
section.bg-slate-900 h1, section.bg-slate-900 h2, section.bg-slate-900 h3,
section.bg-slate-900 h4, section.bg-slate-900 h5, section.bg-slate-900 h6,
section.bg-slate-900 .text-heading,
section.bg-slate-900 strong, section.bg-slate-900 b,
section.bg-slate-900 .prose strong {
    color: #ffffff !important;
    opacity: 1 !important;
}
section.bg-slate-900 .prose ul > li::marker,
section.bg-slate-900 .prose ol > li::marker,
section.bg-slate-900 .prose li::marker,
section.bg-slate-900 li::marker {
    color: rgba(255, 255, 255, 0.55) !important;
}
section.bg-slate-900 .text-primary {
    color: #bad692 !important;
    opacity: 1 !important;
}
section.bg-slate-900 .prose a {
    color: #bad692 !important;
    border-bottom-color: rgba(255,255,255,0.4) !important;
}
.prose a {
    text-decoration: none;
    font-weight: 500;
    transition: color 0.4s ease, border-color 0.4s ease;
    border-bottom: 1px solid #fdba74;
}
.prose strong {
    font-weight: 700;
}
.prose blockquote {
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.25rem;
    font-style: italic;
}

/* Footer branding styles */
.footer-branding {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Hover effects */
.footer-branding:hover {
    opacity: 1 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.product-card-grid .product-card h3 {
    /* Başlığın 2 satırdan sonra kesilmesini sağlar */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.5em; /* 2 satır yükseklik (text-lg için) */
}
.product-card-grid .product-card p {
     /* Özetin 3 satırdan sonra kesilmesini sağlar */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 3.75em; /* 3 satır yükseklik (text-sm için) */
}

/* =============================================== */
/* MOBİL OPTİMİZASYON                              */
/* =============================================== */

/* Touch-friendly minimum boyutlar */
@media (max-width: 768px) {
    /* Tıklanabilir alanlar minimum 44px */
    button, 
    a.btn-primary, 
    .btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Form elemanları */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important; /* iOS zoom engellemek için */
        min-height: 48px;
        padding: 12px 16px;
    }
    
    /* Container padding */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Section padding azaltma */
    section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
    
    /* Başlık boyutları */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }
    
    /* Paragraf spacing */
    p {
        margin-bottom: 1rem;
    }
    
    /* Grid gap azaltma */
    .gap-8 {
        gap: 1rem !important;
    }
    .gap-10 {
        gap: 1.25rem !important;
    }
    .gap-12 {
        gap: 1.5rem !important;
    }
    
    /* Kart içi padding */
    .content-card > div:last-child,
    .product-card > div:last-child {
        padding: 1rem !important;
    }
    
    /* Hero section mobil */
    .hero-section {
        height: auto !important;
        min-height: 280px !important;
        padding: 80px 0 40px !important;
    }
    
    .hero-section h1 {
        font-size: 1.5rem !important;
    }
    
    .hero-section p {
        font-size: 0.9rem !important;
    }
}

/* Küçük mobil (375px ve altı) */
@media (max-width: 375px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    h1 {
        font-size: 1.5rem !important;
    }
    h2 {
        font-size: 1.25rem !important;
    }
    h3 {
        font-size: 1.125rem !important;
    }
    
    /* Buton boyutları */
    .btn-primary,
    a.btn-primary {
        padding: 10px 20px !important;
        font-size: 0.875rem !important;
    }
}

/* Mobil Slider Optimizasyonu */
@media (max-width: 768px) {
    /* Slider mobilde tam ekran */
    #home {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .slider-container {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: none !important;
    }
    
    /* Slider mobil düzeni */
    .bg-pattern-slider {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 80px !important; /* Navbar sonrası - azaltıldı */
    }
    
    .bg-pattern-slider > .container {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    
    .bg-pattern-slider .flex.flex-col.md\:grid {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    /* İçerik alanı - ortalı, biraz boşluk */
    .bg-pattern-slider .flex.flex-col.md\:grid > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 1.5rem !important;
        gap: 0.75rem !important;
    }
    
    /* Görsel alanı - ortalı */
    .bg-pattern-slider .flex.flex-col.md\:grid > div:last-child {
        height: auto !important;
        max-height: 35vh !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 1.5rem !important;
    }
    
    .bg-pattern-slider .flex.flex-col.md\:grid > div:last-child img {
        max-height: 35vh !important;
        width: auto !important;
        object-fit: contain !important;
    }
    
    .bg-pattern-slider h1,
    .bg-pattern-slider h2 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;
        text-align: center !important;
    }
    
    .bg-pattern-slider p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.75rem !important;
        text-align: center !important;
    }
    
    /* Slider butonları */
    .slider-item a.inline-flex {
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
    }
    
    /* Mobil slider navigasyon butonları */
    #prev-slide, #next-slide {
        display: flex !important;
        position: absolute !important;
        bottom: 30px !important;
        top: auto !important;
        transform: none !important;
        padding: 12px !important;
        background: rgba(0, 0, 0, 0.5) !important;
    }
    
    #prev-slide {
        left: calc(50% - 60px) !important;
    }
    
    #next-slide {
        right: calc(50% - 60px) !important;
    }
    
    #prev-slide svg, #next-slide svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Fullscreen slider mobil içerik padding */
    #home .slider-item > div.relative.z-20 {
        padding-top: 80px !important;
    }
}

/* Mobil Navbar Optimizasyonu */
@media (max-width: 1023px) {
    #header nav {
        height: 64px !important;
    }
    
    #header .logo-white,
    #header .logo-normal {
        height: 32px !important;
    }
    
    /* Hamburger button */
    #mobile-menu-button {
        width: 44px;
        height: 44px;
    }
}

/* Mobil Menü İyileştirmeleri */
#mobile-menu {
    width: 85% !important;
    max-width: 320px !important;
}

#mobile-menu nav {
    padding-bottom: 100px; /* Alt butonlar için alan */
}

#mobile-menu .mobile-nav-link {
    padding: 14px 0 !important;
    font-size: 1rem !important;
}

#mobile-menu .mobile-submenu .mobile-nav-link {
    padding: 10px 0 !important;
    font-size: 0.9rem !important;
}

/* Mobil Footer */
@media (max-width: 768px) {
    footer {
        margin-top: 0 !important;
    }
    
    footer .container {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    footer h4 {
        font-size: 0.875rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    footer ul {
        margin-top: 0.5rem !important;
    }
    
    footer li {
        margin-bottom: 0.5rem !important;
    }
    
    footer a {
        font-size: 0.875rem !important;
    }
    
    /* Footer logo */
    footer img {
        height: 40px !important;
    }
    
    /* Footer grid */
    footer .grid {
        gap: 1.5rem !important;
    }
    
    /* Copyright bar */
    footer .border-t {
        padding: 1rem 0 !important;
    }
    
    footer .border-t span,
    footer .border-t a {
        font-size: 0.75rem !important;
    }
}

/* Mobil İletişim Kartları */
@media (max-width: 768px) {
    #iletisim .p-6 {
        padding: 1rem !important;
    }
    
    #iletisim .w-12 {
        width: 40px !important;
        height: 40px !important;
    }
    
    #iletisim .w-12 i {
        font-size: 1rem !important;
    }
    
    #iletisim h4 {
        font-size: 1rem !important;
    }
    
    #iletisim .p-3 {
        padding: 0.75rem !important;
    }
    
    /* Harita minimum yükseklik */
    #iletisim iframe {
        min-height: 300px !important;
    }
}

/* Mobil Galeri */
@media (max-width: 640px) {
    #gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .gallery-item {
        aspect-ratio: 1 !important;
    }
}

/* Mobil Referanslar */
@media (max-width: 640px) {
    #referanslar .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .reference-item {
        padding: 0.75rem !important;
    }
    
    .reference-item img {
        width: 100% !important;
    }
}

/* Mobil Lightbox */
@media (max-width: 768px) {
    #lightbox {
        padding: 8px !important;
    }
    
    #lightbox-img {
        max-height: 50vh !important;
    }
    
    #lightbox button {
        padding: 8px !important;
    }
    
    #lightbox button svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    #lightbox-thumbnails {
        max-width: 100% !important;
        padding: 0 8px !important;
    }
    
    .lightbox-thumb {
        width: 48px !important;
        height: 48px !important;
    }
}

/* Mobil Cookie Banner */
@media (max-width: 640px) {
    #cookie-consent-banner {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        padding: 12px !important;
    }
    
    #cookie-consent-banner h4 {
        font-size: 0.875rem !important;
    }
    
    #cookie-consent-banner p {
        font-size: 0.75rem !important;
    }
    
    #cookie-consent-banner button {
        padding: 10px 8px !important;
        font-size: 0.75rem !important;
    }
}

/* Mobil WhatsApp Butonu */
@media (max-width: 768px) {
    #whatsapp-button {
        bottom: 16px !important;
        right: 16px !important;
        width: 52px !important;
        height: 52px !important;
    }
    
    #whatsapp-button i {
        font-size: 1.5rem !important;
    }
}

/* Prose mobil */
@media (max-width: 768px) {
    .prose {
        font-size: 0.9375rem !important;
        line-height: 1.7 !important;
    }
    
    .prose h2 {
        font-size: 1.25rem !important;
        margin-top: 1.5rem !important;
    }
    
    .prose h3 {
        font-size: 1.125rem !important;
    }
    
    .prose ul,
    .prose ol {
        padding-left: 1.25rem !important;
    }
    
    .prose blockquote {
        padding-left: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Smooth scroll için iOS fix */
html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Tap highlight kaldırma */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Performans optimizasyonu - GPU hızlandırma */
.slider-item,
[data-animate],
#mobile-menu,
#search-modal .bg-white {
    will-change: transform, opacity;
}

/* Slider tepesindeki boşluk düzeltmesi */
#home {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Header fixed olduğu için slider tam ekran olmalı */
.slider-container {
    position: relative;
}

/* Slider içerik ortalama - header yüksekliğini hesaba kat */
#home .slider-item .relative.z-20 {
    padding-top: 0;
}


/* Slider pattern için header offset */
.bg-pattern-slider {
    padding-top: 0 !important;
}

/* Safe area padding (notch'lu telefonlar için) */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    #mobile-menu {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    
    footer {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    
    #cookie-consent-banner {
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
    
    #whatsapp-button {
        bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)) !important;
    }
}

/* Landscape mode optimizasyonu */
@media (max-height: 500px) and (orientation: landscape) {
    #home,
    .slider-container {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
    }
    
    .hero-section {
        min-height: 200px !important;
        padding: 60px 0 30px !important;
    }
    
    section {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
}

/* =============================================== */
/* DİL SEÇİCİ PANELİ STİLLERİ                     */
/* =============================================== */

/* Panel arka planı */
#language-panel {
    background-color: #ffffff;
}

#language-panel .panel-header {
    background-color: #f8fafc;
    border-color: #e2e8f0;
}

#language-panel .panel-header .title {
    color: #1e293b;
}

#language-panel .panel-header .subtitle {
    color: #64748b;
}

#language-panel .panel-footer {
    background-color: #f8fafc;
    border-color: #e2e8f0;
}

/* Dil seçenekleri */
#language-panel .lang-item {
    background-color: #ffffff;
    border-color: #e2e8f0;
    color: #334155;
    border-radius: var(--border-radius-base, 8px);
    transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

#language-panel .lang-item:hover {
    background-color: #f1f5f9;
    border-color: var(--color-primary);
}

#language-panel .lang-item.active {
    background-color: rgba(var(--color-primary-rgb), 0.1);
    border-color: var(--color-primary);
}

/* Dark mode dil paneli */
html.dark-mode #language-panel {
    background-color: #1e293b;
}

html.dark-mode #language-panel .panel-header {
    background-color: #0f172a;
    border-color: #334155;
}

html.dark-mode #language-panel .panel-header .title {
    color: #f1f5f9;
}

html.dark-mode #language-panel .panel-header .subtitle {
    color: #94a3b8;
}

html.dark-mode #language-panel .panel-footer {
    background-color: #0f172a;
    border-color: #334155;
}

html.dark-mode #language-panel .lang-item {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

html.dark-mode #language-panel .lang-item:hover {
    background-color: #334155;
    border-color: var(--color-primary);
}

html.dark-mode #language-panel .lang-item.active {
    background-color: rgba(var(--color-primary-rgb), 0.2);
    border-color: var(--color-primary);
}


/* =============================================== */
/* GOOGLE TRANSLATE TOOLBAR GİZLE                  */
/* =============================================== */

/* Google Translate üst bar'ı tamamen gizle */
.goog-te-banner-frame,
.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Body'nin üstüne eklenen margin'i kaldır */
body {
    top: 0 !important;
    position: static !important;
}

/* Google Translate iframe'i gizle */
iframe.goog-te-banner-frame {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* Translate widget'ı gizle */
#google_translate_element {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Google'ın eklediği body top offset'i sıfırla */
html body {
    top: 0 !important;
}

/* VIP class - Google bazen bunu ekliyor */
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-l4eHX-hSRGPd {
    display: none !important;
}

/* =============================================================================
   PROSE (İÇERİK) AKILLI RENK SİSTEMİ
   Arka plan rengine göre metin, kalın yazı ve başlık renklerini otomatik ayarlar.
   ============================================================================= */

/* Prose içeriği — token tabanlı (tema/mod cascade ile çözülür) */
section.bg-white .prose,
section.bg-white .prose p,
section.bg-white .prose li {
    color: var(--sw-text) !important;
}
section.bg-white .prose strong,
section.bg-white .prose b,
section.bg-white .prose h1,
section.bg-white .prose h2,
section.bg-white .prose h3,
section.bg-white .prose h4 {
    color: var(--sw-heading) !important;
}

section.bg-zebra .prose,
section.bg-zebra .prose p,
section.bg-zebra .prose li {
    color: var(--sz-text) !important;
}
section.bg-zebra .prose strong,
section.bg-zebra .prose b,
section.bg-zebra .prose h1,
section.bg-zebra .prose h2,
section.bg-zebra .prose h3,
section.bg-zebra .prose h4 {
    color: var(--sz-heading) !important;
    font-weight: 700;
}

section.bg-slate-900 .prose,
section.bg-slate-900 .prose p,
section.bg-slate-900 .prose li {
    color: var(--sd-text) !important;
}
section.bg-slate-900 .prose strong,
section.bg-slate-900 .prose b,
section.bg-slate-900 .prose h1,
section.bg-slate-900 .prose h2,
section.bg-slate-900 .prose h3,
section.bg-slate-900 .prose h4 {
    color: var(--sd-heading) !important;
    font-weight: 700;
}


/* ── MOBİL İLETİŞİM PANELİ (BOTTOM SHEET) ── */
#contact-sheet {
    background: var(--solid-bg1, var(--color-primary)) !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.4) !important;
}
#sheet-handle {
    background-color: rgba(255,255,255,0.3) !important;
}
.sheet-label {
    color: #ffffff !important;
}
.contact-float-btn {
    border: 1px solid rgba(255,255,255,0.2) !important;
}

/* ── DİĞER KÜÇÜK BİLEŞENLER ── */
.breadcrumb-item, .breadcrumb-link {
    color: rgba(255,255,255,0.8) !important;
}
.breadcrumb-item.active {
    color: #ffffff !important;
}
/* Sayfalama pasif butonlar */
nav[aria-label="Sayfalama"] a:not(.bg-primary) {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}

/* Scroll To Top Butonu (varsa) */
#scroll-to-top {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}
#scroll-to-top:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}


/* =============================================================================
   İLETİŞİM BÖLÜMÜ TEMİZLİĞİ (Dark Mode — sadece zebra/koyu bölümler)
   ============================================================================= */
html.dark-mode section.bg-zebra .contact-card-title,
html.dark-mode section.bg-zebra .contact-link-label,
html.dark-mode section.bg-zebra .contact-link-value,
html.dark-mode section.bg-zebra .address-text,
html.dark-mode section.bg-zebra .contact-card-header,
html.dark-mode section.bg-zebra .contact-link-content {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
}
html.dark-mode section.bg-zebra .contact-card,
html.dark-mode section.bg-zebra .address-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
html.dark-mode section.bg-zebra .contact-card::after,
html.dark-mode section.bg-zebra .address-card::after {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}
html.dark-mode section.bg-zebra .contact-link {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}
html.dark-mode section.bg-zebra .contact-link:hover .contact-link-icon {
    color: var(--color-primary) !important;
}


/* =============================================================================
   İletişim Kartları — Bölüm bağlamlı token tüketimi (cw / cz / cc)
   Zebra opaklığı ≥70 olsa bile bg-white bölümü --cw-* ile opak kalır.
   ============================================================================= */
section.bg-white .contact-card,
section.bg-white .address-card,
section.bg-white .branch-accordion,
section.bg-white .branch-contact-category,
section.bg-white .contact-cards-container,
section.bg-white#iletisim,
section.bg-white #iletisim-bilgileri {
    --cc-surface-bg: var(--cw-bg);
    --cc-surface-border: var(--cw-border);
    --cc-surface-shadow: var(--cw-shadow);
    --cc-text: var(--cw-text);
    --cc-muted: var(--cw-muted);
}

section.bg-zebra .contact-card,
section.bg-zebra .address-card,
section.bg-zebra .branch-accordion,
section.bg-zebra .branch-contact-category,
section.bg-zebra .contact-cards-container,
section.bg-zebra#iletisim,
section.bg-zebra #iletisim-bilgileri {
    --cc-surface-bg: var(--cz-bg);
    --cc-surface-border: var(--cz-border);
    --cc-surface-shadow: var(--cz-shadow);
    --cc-text: var(--cz-text);
    --cc-muted: var(--cz-muted);
}

/* Harita çerçevesi — cam/şeffaf zemin haritayı soluk göstermesin */
section.bg-white .shadow-lg.overflow-hidden {
    background-color: #ffffff !important;
}
section.bg-zebra .shadow-lg.overflow-hidden {
    background-color: #ffffff !important;
}

.is-solid-card .contact-card-title,
.is-solid-card .address-text,
.is-solid-card .contact-card-header h3,
.is-solid-card .contact-number,
.is-solid-card .branch-header-info h3,
.is-solid-card .branch-contact-header,
section.bg-white .is-solid-card .contact-link span,
section.bg-white .is-solid-card .contact-link span *,
section.bg-white .is-solid-card .contact-link-value {
    color: var(--cc-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.is-solid-card .contact-link-label,
.is-solid-card .branch-header-info p,
section.bg-white .is-solid-card .contact-link-label {
    color: var(--cc-muted) !important;
    opacity: 1 !important;
}

/* bg-white bölümlerinde is-glass-card kalsa bile yüzeyi solid-card gibi davransın */
section.bg-white .contact-card.is-glass-card::after,
section.bg-white .address-card.is-glass-card::after,
section.bg-white .branch-accordion.is-glass-card::after,
section.bg-white .branch-contact-category.is-glass-card::after {
    background: var(--cc-surface-bg) !important;
    border: 1px solid var(--cc-surface-border) !important;
    box-shadow: var(--cc-surface-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

section.bg-white .is-glass-card .contact-card-title,
section.bg-white .is-glass-card .address-text,
section.bg-white .is-glass-card .contact-link-value,
section.bg-white .is-glass-card .branch-header-info h3,
section.bg-white .is-glass-card .contact-number,
section.bg-white .is-glass-card .branch-contact-header {
    color: var(--cc-text) !important;
    opacity: 1 !important;
}

section.bg-white .is-glass-card .contact-link-label,
section.bg-white .is-glass-card .branch-header-info p {
    color: var(--cc-muted) !important;
    opacity: 1 !important;
}

section.bg-white .is-glass-card .contact-link,
section.bg-white .is-glass-card .branch-contact-category {
    background: var(--cc-link-bg) !important;
    border: 1px solid var(--cc-link-border) !important;
}

section.bg-white .is-glass-card .contact-link-icon {
    color: var(--cc-muted) !important;
    border-left-color: var(--cc-link-border) !important;
}

.is-solid-card::after {
    background: var(--cc-surface-bg) !important;
    border: 1px solid var(--cc-surface-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    box-shadow: var(--cc-surface-shadow) !important;
}

.is-solid-card .contact-link,
.is-solid-card .branch-contact-category {
    background: var(--cc-link-bg) !important;
    border: 1px solid var(--cc-link-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    transition:
        background-color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        color 0.4s ease !important;
}

.is-solid-card .contact-link-value,
.is-solid-card .contact-link-label,
.is-solid-card .contact-link-icon {
    transition: color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease !important;
}

.is-solid-card .contact-link-icon {
    color: var(--cc-muted) !important;
    border-left-color: var(--cc-link-border) !important;
}

/* =============================================================================
   İLETİŞİM LİNKİ HOVER — TOKEN TÜKETİCİ (tema/mod farkı --cc-link-hover-* ile)
   Düz beyaz yerine: açık temada ince marka tonu + gerçek gölge,
   koyu temada cam yansıması. Değerler :root / html.dark-mode'da çözülür.
   ============================================================================= */
.contact-link:hover,
.contact-card .contact-link:hover,
.address-card .contact-link:hover,
.is-solid-card .contact-link:hover,
.is-glass-card .contact-link:hover,
section.bg-white .contact-link:hover,
section.bg-zebra .contact-link:hover,
html.dark-mode .contact-link:hover,
html.dark-mode section.bg-zebra .contact-link:hover,
html.dark-mode section.bg-white .contact-link:hover {
    background: var(--cc-link-hover-bg) !important;
    background-color: var(--cc-link-hover-bg) !important;
    border-color: var(--cc-link-hover-border) !important;
    box-shadow: var(--cc-link-hover-shadow) !important;
}
.contact-link:hover span,
.contact-link:hover span *,
.contact-link:hover p,
.contact-link:hover i,
.contact-link:hover .contact-link-value,
.contact-link:hover .contact-link-label,
.is-solid-card .contact-link:hover *,
.is-glass-card .contact-link:hover *,
section.bg-zebra .contact-link:hover *,
html.dark-mode .contact-link:hover * {
    color: var(--cc-link-hover-text) !important;
    opacity: 1 !important;
}
.contact-link:hover .contact-link-icon,
.is-solid-card .contact-link:hover .contact-link-icon,
.is-glass-card .contact-link:hover .contact-link-icon,
section.bg-zebra .contact-link:hover .contact-link-icon,
html.dark-mode .contact-link:hover .contact-link-icon {
    color: var(--cc-link-hover-icon) !important;
    border-left-color: var(--cc-link-hover-border) !important;
}

/* Şube linkleri (branch) — aynı token mantığı */
.branch-contact-link:hover,
.is-solid-card .branch-contact-link:hover,
.is-glass-card .branch-contact-link:hover,
section.bg-zebra .branch-contact-link:hover,
html.dark-mode .branch-contact-link:hover {
    background: var(--cc-link-hover-bg) !important;
    background-color: var(--cc-link-hover-bg) !important;
    border-color: var(--cc-link-hover-border) !important;
    box-shadow: var(--cc-link-hover-shadow) !important;
}
.branch-contact-link:hover,
.branch-contact-link:hover *,
.is-solid-card .branch-contact-link:hover *,
.is-glass-card .branch-contact-link:hover *,
section.bg-zebra .branch-contact-link:hover *,
html.dark-mode .branch-contact-link:hover * {
    color: var(--cc-link-hover-text) !important;
}

/* =============================================================================
   MANDATORY CARD BORDER OVERRIDES (Corporate Theme-Color Border in Both Themes)
   ============================================================================= */
/* 1. Light Theme Cards (Solid) */
.is-solid-card::after,
.branch-accordion.is-solid-card::after,
.branch-contact-category.is-solid-card::after {
    border: 1.5px solid var(--color-primary) !important;
}

/* 2. Dark Theme Cards (Glass) */
.is-glass-card::after,
.branch-accordion.is-glass-card::after,
.branch-contact-category.is-glass-card::after {
    border: 1.5px solid var(--color-primary) !important;
}


/* =============================================================================
   İLETİŞİM HOVER — TOKEN TÜKETİCİ (eski sabit beyaz hover blokları kaldırıldı)
   bg-zebra / theme-color / dark-mode bağlamlarının tümü --cc-link-hover-* ile
   çözülür: açık temada ince marka tonu + nötr gölge, koyu temada cam + gölge.
   ============================================================================= */
section.bg-zebra .contact-link:hover,
section.bg-zebra .branch-contact-link:hover,
html.dark-mode .contact-link:hover,
html.dark-mode .contact-card .contact-link:hover,
html.dark-mode .address-card .contact-link:hover,
html.dark-mode .is-glass-card .contact-link:hover,
html.dark-mode .is-solid-card .contact-link:hover,
html.dark-mode section.bg-white .contact-link:hover,
html.dark-mode section.bg-zebra .contact-link:hover,
html.dark-mode .branch-contact-link:hover,
html.dark-mode section.bg-zebra .branch-contact-link:hover {
    background: var(--cc-link-hover-bg) !important;
    background-color: var(--cc-link-hover-bg) !important;
    border-color: var(--cc-link-hover-border) !important;
    box-shadow: var(--cc-link-hover-shadow) !important;
}

section.bg-zebra .contact-link:hover span,
section.bg-zebra .contact-link:hover span *,
section.bg-zebra .contact-link:hover p,
section.bg-zebra .contact-link:hover i,
section.bg-zebra .contact-link:hover .contact-link-value,
section.bg-zebra .contact-link:hover .contact-link-label,
section.bg-zebra .branch-contact-link:hover,
section.bg-zebra .branch-contact-link:hover *,
html.dark-mode .contact-link:hover .contact-link-value,
html.dark-mode .contact-link:hover .contact-link-label,
html.dark-mode .is-glass-card .contact-link:hover *,
html.dark-mode .is-solid-card .contact-link:hover *,
html.dark-mode section.bg-zebra .contact-link:hover *,
html.dark-mode .branch-contact-link:hover * {
    color: var(--cc-link-hover-text) !important;
    opacity: 1 !important;
}

section.bg-zebra .contact-link:hover .contact-link-icon,
section.bg-zebra .branch-contact-link:hover .contact-link-icon,
html.dark-mode .contact-link:hover .contact-link-icon,
html.dark-mode .is-glass-card .contact-link:hover .contact-link-icon,
html.dark-mode .is-solid-card .contact-link:hover .contact-link-icon,
html.dark-mode section.bg-zebra .contact-link:hover .contact-link-icon {
    color: var(--cc-link-hover-icon) !important;
    border-left-color: var(--cc-link-hover-border) !important;
}

/* =============================================================================
   HEADING DECORATOR OVERRIDES FOR HIGH CONTRAST ON THEME-COLORED BACKGROUNDS
   ============================================================================= */

/* 1. Normal (Tinted) Background Modunda Başlık Dekorasyonları */
    
    /* Kırmızı Arka Planlarda Yüksek Opaklık Uyumluluğu */
    
    /* Dark Mode - bg-zebra bölümleri her zaman yüksek kontrastlı beyaz olmalı */
    html.dark-mode .bg-zebra .section-heading::before,
    html.dark-mode .bg-zebra .prose h2::before,
    html.dark-mode .bg-zebra .prose h3::before {
        background: linear-gradient(to bottom, #ffffff, transparent) !important;
    }

/* =============================================================================
   BİRLEŞİK FORM & İLETİŞİM TEMASI — tüm modlar, yüksek kontrast
   ============================================================================= */
.icf-form {
    --icf-card-bg: var(--form-bg);
    --icf-card-border: var(--form-border);
    --icf-card-shadow: var(--form-shadow);
    --icf-label: var(--form-heading);
    --icf-subtitle: var(--form-text);
    --icf-input-bg: var(--form-input-bg);
    --icf-input-text: var(--form-input-text);
    --icf-input-border: var(--form-input-border);
    --icf-input-placeholder: var(--form-placeholder);
    --icf-kvkk-bg: var(--form-kvkk-bg);
    --icf-kvkk-text: var(--form-kvkk-text);
    --icf-dropdown-bg: var(--form-input-bg);
    --icf-dropdown-border: var(--form-input-border);
    --icf-dropdown-text: var(--form-input-text);
    --icf-dropdown-hover-bg: var(--form-kvkk-bg);
}

#contact-form {
    background: var(--form-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--form-border) !important;
    box-shadow: var(--form-shadow) !important;
}

#contact-form.is-glass-card::after,
#contact-form.is-solid-card::after {
    display: none !important;
    content: none !important;
}

#contact-form label,
#contact-form .text-heading,
#contact-form h2 {
    color: var(--form-heading) !important;
}

#contact-form .text-body,
#contact-form p {
    color: var(--form-text) !important;
}

#contact-form input:not([type="submit"]):not([type="checkbox"]):not([type="file"]),
#contact-form textarea,
#contact-form .csd-trigger {
    background: var(--form-input-bg) !important;
    color: var(--form-input-text) !important;
    border-color: var(--form-input-border) !important;
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
    color: var(--form-placeholder) !important;
}

#contact-form input:focus,
#contact-form textarea:focus,
#contact-form .csd-trigger:focus-visible {
    background: var(--form-input-bg) !important;
    color: var(--form-input-text) !important;
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(101, 163, 13, 0.15) !important;
}

#contact-form .bg-slate-50 {
    background: var(--form-kvkk-bg) !important;
}

#contact-form .bg-slate-50 label,
#contact-form label[for="kvkk_onay"] {
    color: var(--form-kvkk-text) !important;
}

#contact-form .csd-list {
    background: var(--form-input-bg) !important;
    border-color: var(--form-input-border) !important;
    color: var(--form-input-text) !important;
}

#contact-form .csd-option {
    color: var(--form-input-text) !important;
}

#contact-form .csd-option:hover {
    background: var(--form-kvkk-bg) !important;
    color: var(--color-primary) !important;
}

#contact-form .csd-value,
#contact-form .csd-arrow {
    color: var(--form-input-text) !important;
}

#contact-form input[type="file"] {
    color: var(--form-text) !important;
}

#contact-form input[type="file"]::file-selector-button {
    background: var(--form-kvkk-bg) !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--form-input-border) !important;
}

#contact-form .form-message--error {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
}

#contact-form .form-message--success {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border-color: #a7f3d0 !important;
}

/* Açık yüzeyli bölümlerde cam kartları opak token yüzeyine çek */
section.bg-white .is-glass-card::after,
section.bg-white .branch-accordion.is-glass-card::after,
section.bg-white .branch-contact-category.is-glass-card::after {
    background: var(--cc-surface-bg) !important;
    border: 1px solid var(--cc-surface-border) !important;
    box-shadow: var(--cc-surface-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

section.bg-white .is-glass-card .contact-card-title,
section.bg-white .is-glass-card .address-text,
section.bg-white .is-glass-card .contact-link-value,
section.bg-white .is-glass-card .branch-header-info h3,
section.bg-white .is-glass-card .contact-number,
section.bg-white .branch-accordion.is-glass-card .branch-header-info h3,
section.bg-white .branch-accordion.is-glass-card .branch-contact-header,
section.bg-white .branch-accordion.is-glass-card .contact-number {
    color: var(--cc-text) !important;
}

section.bg-white .is-glass-card .contact-link-label,
section.bg-white .is-glass-card .contact-link-icon,
section.bg-white .branch-accordion.is-glass-card .branch-header-info p {
    color: var(--cc-muted) !important;
}

section.bg-white .is-glass-card .contact-link,
section.bg-white .is-glass-card .branch-contact-category {
    background: var(--cc-link-bg) !important;
    border-color: var(--cc-link-border) !important;
}

section.bg-zebra .contact-card::after,
section.bg-zebra .address-card::after {
    background: var(--cc-surface-bg) !important;
    border: 1px solid var(--cc-surface-border) !important;
    box-shadow: var(--cc-surface-shadow) !important;
}

section.bg-zebra .contact-card-title,
section.bg-zebra .contact-link-value,
section.bg-zebra .address-text {
    color: var(--cc-text) !important;
}

section.bg-zebra .contact-link-label,
section.bg-zebra .contact-link-icon {
    color: var(--cc-muted) !important;
}

section.bg-zebra .contact-link {
    background: var(--cc-link-bg) !important;
    border-color: var(--cc-link-border) !important;
}

html.dark-mode .icf-form {
    --icf-card-bg: #1e293b;
    --icf-card-border: #334155;
    --icf-card-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    --icf-label: #f1f5f9;
    --icf-subtitle: #94a3b8;
    --icf-input-bg: #0f172a;
    --icf-input-text: #e2e8f0;
    --icf-input-border: #475569;
    --icf-input-placeholder: #64748b;
    --icf-kvkk-bg: rgba(15, 23, 42, 0.65);
    --icf-kvkk-text: #cbd5e1;
    --icf-dropdown-bg: #1e293b;
    --icf-dropdown-border: #475569;
    --icf-dropdown-text: #e2e8f0;
    --icf-dropdown-hover-bg: #334155;
}

html.dark-mode #contact-form {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
}

html.dark-mode #contact-form label,
html.dark-mode #contact-form .text-heading {
    color: #f1f5f9 !important;
}

html.dark-mode #contact-form input:not([type="submit"]):not([type="checkbox"]):not([type="file"]),
html.dark-mode #contact-form textarea,
html.dark-mode #contact-form .csd-trigger {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

html.dark-mode #contact-form .bg-slate-50 {
    background: rgba(15, 23, 42, 0.65) !important;
}

html.dark-mode #contact-form .bg-slate-50 label {
    color: #cbd5e1 !important;
}

html.dark-mode #contact-form .csd-list {
    background: #1e293b !important;
    border-color: #475569 !important;
}

html.dark-mode section.bg-zebra .contact-card::after,
html.dark-mode section.bg-zebra .address-card::after {
    background: rgba(30, 41, 59, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode section.bg-zebra .contact-card-title,
html.dark-mode section.bg-zebra .contact-link-value,
html.dark-mode section.bg-zebra .address-text,
html.dark-mode section.bg-zebra .contact-link-label {
    color: #f1f5f9 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html.dark-mode section.bg-zebra .contact-link {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* =============================================================================
   FINAL — İletişim kartları/linkleri: tema-duyarlı resting + hover (en son söz)
   Açık tema beyaz/koyu yazı, koyu tema koyu/açık yazı, hover her temada primary
   ============================================================================= */
.contact-card.is-solid-card .contact-link,
.address-card.is-solid-card .contact-link,
.branch-contact-category.is-solid-card {
    background: var(--cc-link-bg) !important;
    border: 1px solid var(--cc-link-border) !important;
    transition:
        background-color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        color 0.4s ease !important;
}

.contact-card .contact-link:hover,
.address-card .contact-link:hover,
.is-solid-card .contact-link:hover,
.is-glass-card .contact-link:hover,
.branch-contact-category:hover {
    background: var(--cc-link-hover-bg) !important;
    background-color: var(--cc-link-hover-bg) !important;
    border-color: var(--cc-link-hover-border) !important;
    box-shadow: var(--cc-link-hover-shadow) !important;
}

.contact-card .contact-link:hover .contact-link-value,
.contact-card .contact-link:hover .contact-link-label,
.address-card .contact-link:hover .contact-link-value,
.address-card .contact-link:hover .contact-link-label,
.is-solid-card .contact-link:hover .contact-link-value,
.is-solid-card .contact-link:hover .contact-link-label,
.is-glass-card .contact-link:hover .contact-link-value,
.is-glass-card .contact-link:hover .contact-link-label {
    color: var(--cc-link-hover-text) !important;
    opacity: 1 !important;
}

.contact-card .contact-link:hover .contact-link-icon,
.address-card .contact-link:hover .contact-link-icon,
.is-solid-card .contact-link:hover .contact-link-icon,
.is-glass-card .contact-link:hover .contact-link-icon {
    color: var(--cc-link-hover-icon) !important;
    border-left-color: var(--cc-link-hover-border) !important;
    opacity: 1 !important;
}

/* =============================================================================
   FINAL — MEDYA KARTLARI (ürün/içerik/katalog/video) BAĞLAMSAL TOKEN TÜKETİCİ
   "En son söz": bölüm zeminine (beyaz/zebra/koyu) göre te_card token'ı.
   Böylece solid_all'da zebra (solid2) zemininde de istasyon sayfasıyla aynı
   tutarlı kart elde edilir (parlak zeminde opak beyaz, koyu zeminde cam).
   ============================================================================= */
section.bg-white .product-card, section.bg-white .content-card,
section.bg-white .katalog-card, section.bg-white .video-card,
section.bg-white article[data-animate] {
    background: var(--cw-bg) !important;
    background-color: var(--cw-bg) !important;
    border: 1px solid var(--cw-border) !important;
    box-shadow: var(--cw-shadow) !important;
}
section.bg-white .product-card h2, section.bg-white .product-card h3,
section.bg-white .content-card h2, section.bg-white .content-card h3,
section.bg-white .katalog-card h3, section.bg-white .video-card h3,
section.bg-white article[data-animate] h3 {
    color: var(--cw-heading) !important; text-shadow: none !important;
}
section.bg-white .product-card p, section.bg-white .content-card p,
section.bg-white .katalog-card p, section.bg-white .video-card p,
section.bg-white .product-card span:not(.text-primary),
section.bg-white .content-card span:not(.text-primary) {
    color: var(--cw-text) !important;
}
section.bg-white .product-card i, section.bg-white .content-card i { color: var(--cw-icon) !important; }

section.bg-zebra .product-card, section.bg-zebra .content-card,
section.bg-zebra .katalog-card, section.bg-zebra .video-card,
section.bg-zebra article[data-animate] {
    background: var(--cz-bg) !important;
    background-color: var(--cz-bg) !important;
    border: 1px solid var(--cz-border) !important;
    box-shadow: var(--cz-shadow) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
section.bg-zebra .product-card h2, section.bg-zebra .product-card h3,
section.bg-zebra .content-card h2, section.bg-zebra .content-card h3,
section.bg-zebra .katalog-card h3, section.bg-zebra .video-card h3,
section.bg-zebra article[data-animate] h3 {
    color: var(--cz-heading) !important; text-shadow: none !important;
}
section.bg-zebra .product-card p, section.bg-zebra .content-card p,
section.bg-zebra .katalog-card p, section.bg-zebra .video-card p,
section.bg-zebra .product-card span:not(.text-primary),
section.bg-zebra .content-card span:not(.text-primary) {
    color: var(--cz-text) !important;
}
section.bg-zebra .product-card .text-primary,
section.bg-zebra .content-card .text-primary,
section.bg-zebra .katalog-card .text-primary,
section.bg-zebra .video-card .text-primary,
section.bg-zebra .product-card a.text-primary,
section.bg-zebra .content-card a.text-primary {
    color: var(--cz-icon) !important;
    opacity: 1 !important;
}
section.bg-white .product-card .text-primary,
section.bg-white .content-card .text-primary,
section.bg-white .katalog-card .text-primary,
section.bg-white .video-card .text-primary {
    color: var(--cw-icon) !important;
    opacity: 1 !important;
}
section.bg-zebra .product-card i, section.bg-zebra .content-card i { color: var(--cz-icon) !important; }

section.bg-slate-900 .product-card, section.bg-slate-900 .content-card,
section.bg-slate-900 .katalog-card, section.bg-slate-900 .video-card,
section.bg-slate-900 article[data-animate] {
    background: var(--cd-bg) !important;
    background-color: var(--cd-bg) !important;
    border: 1px solid var(--cd-border) !important;
    box-shadow: var(--cd-shadow) !important;
}
section.bg-slate-900 .product-card h2, section.bg-slate-900 .product-card h3,
section.bg-slate-900 .content-card h2, section.bg-slate-900 .content-card h3,
section.bg-slate-900 .katalog-card h3, section.bg-slate-900 .video-card h3,
section.bg-slate-900 article[data-animate] h3 {
    color: var(--cd-heading) !important; text-shadow: none !important;
}
section.bg-slate-900 .product-card p, section.bg-slate-900 .content-card p,
section.bg-slate-900 .katalog-card p, section.bg-slate-900 .video-card p {
    color: var(--cd-text) !important;
}
section.bg-slate-900 .product-card i, section.bg-slate-900 .content-card i { color: var(--cd-icon) !important; }

/* Kart başlığı hover (group-hover:text-primary) — bölüm vurgu tonuna gider */
section.bg-white .product-card:hover h3, section.bg-white .content-card:hover h3,
section.bg-white .katalog-card:hover h3, section.bg-white .video-card:hover h3 { color: var(--sw-accent) !important; }
section.bg-zebra .product-card:hover h3, section.bg-zebra .content-card:hover h3,
section.bg-zebra .katalog-card:hover h3, section.bg-zebra .video-card:hover h3 { color: var(--sz-accent) !important; }
section.bg-slate-900 .product-card:hover h3, section.bg-slate-900 .content-card:hover h3,
section.bg-slate-900 .katalog-card:hover h3, section.bg-slate-900 .video-card:hover h3 { color: var(--sd-accent) !important; }

/* =============================================================================
   FINAL — İLETİŞİM KARTLARI: medya kartlarıyla aynı bağlamsal token mantığı
   solid_all / yüksek opaklıkta site metin rengi (beyaz) kart içine sızmasın.
   ============================================================================= */
section.bg-white .contact-card.is-solid-card::after,
section.bg-white .address-card.is-solid-card::after,
section.bg-white .branch-accordion.is-solid-card::after,
section.bg-white .branch-contact-category.is-solid-card::after {
    background: var(--cw-bg) !important;
    background-color: var(--cw-bg) !important;
    border: 1px solid var(--cw-border) !important;
    box-shadow: var(--cw-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
section.bg-white .contact-card .contact-card-title,
section.bg-white .contact-card .address-text,
section.bg-white .address-card .address-text,
section.bg-white .contact-card .contact-link-value,
section.bg-white .address-card .contact-link-value,
section.bg-white .contact-card .contact-number,
section.bg-white .contact-card .branch-header-info h3,
section.bg-white .contact-card .branch-contact-header {
    color: var(--cw-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
section.bg-white .contact-card .contact-link-label,
section.bg-white .address-card .contact-link-label,
section.bg-white .contact-card .contact-link-icon,
section.bg-white .address-card .contact-link-icon,
section.bg-white .contact-card .branch-header-info p {
    color: var(--cw-muted) !important;
    opacity: 1 !important;
}
section.bg-white .contact-card .contact-link,
section.bg-white .address-card .contact-link,
section.bg-white .contact-card .branch-contact-category {
    background: var(--cc-link-bg) !important;
    border: 1px solid var(--cc-link-border) !important;
}

section.bg-zebra .contact-card.is-solid-card::after,
section.bg-zebra .address-card.is-solid-card::after,
section.bg-zebra .branch-accordion.is-solid-card::after,
section.bg-zebra .branch-contact-category.is-solid-card::after {
    background: var(--cz-bg) !important;
    background-color: var(--cz-bg) !important;
    border: 1px solid var(--cz-border) !important;
    box-shadow: var(--cz-shadow) !important;
}
section.bg-zebra .contact-card .contact-card-title,
section.bg-zebra .contact-card .address-text,
section.bg-zebra .address-card .address-text,
section.bg-zebra .contact-card .contact-link-value,
section.bg-zebra .address-card .contact-link-value,
section.bg-zebra .contact-card .contact-number,
section.bg-zebra .contact-card .branch-header-info h3,
section.bg-zebra .contact-card .branch-contact-header {
    color: var(--cz-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
section.bg-zebra .contact-card .contact-link-label,
section.bg-zebra .address-card .contact-link-label,
section.bg-zebra .contact-card .contact-link-icon,
section.bg-zebra .address-card .contact-link-icon,
section.bg-zebra .contact-card .branch-header-info p {
    color: var(--cz-muted) !important;
    opacity: 1 !important;
}
section.bg-zebra .contact-card .contact-link,
section.bg-zebra .address-card .contact-link,
section.bg-zebra .contact-card .branch-contact-category {
    background: var(--cc-link-bg) !important;
    border: 1px solid var(--cc-link-border) !important;
}
section.bg-zebra .contact-card .contact-link-value,
section.bg-zebra .address-card .contact-link-value,
section.bg-zebra .contact-card .contact-link-label,
section.bg-zebra .address-card .contact-link-label,
section.bg-zebra .contact-card .contact-card-title,
section.bg-zebra .contact-card .address-text,
section.bg-zebra .address-card .address-text {
    color: var(--cz-text) !important;
}
section.bg-zebra .contact-card .contact-link-label,
section.bg-zebra .address-card .contact-link-label,
section.bg-zebra .contact-card .contact-link-icon,
section.bg-zebra .address-card .contact-link-icon {
    color: var(--cz-muted) !important;
}

/* is-glass-card + contact.css beyaz metin override'ını ez (opak açık yüzeyde) */
section.bg-zebra .contact-card.is-glass-card .contact-card-title,
section.bg-zebra .contact-card.is-glass-card .address-text,
section.bg-zebra .address-card.is-glass-card .address-text,
section.bg-zebra .contact-card.is-glass-card .contact-link-value,
section.bg-zebra .address-card.is-glass-card .contact-link-value,
section.bg-zebra .contact-card.is-glass-card .contact-link-label,
section.bg-zebra .address-card.is-glass-card .contact-link-label,
section.bg-zebra .contact-card.is-glass-card .contact-link-icon,
section.bg-zebra .address-card.is-glass-card .contact-link-icon {
    color: var(--cz-text) !important;
}
section.bg-zebra .contact-card.is-glass-card .contact-link-label,
section.bg-zebra .address-card.is-glass-card .contact-link-label,
section.bg-zebra .contact-card.is-glass-card .contact-link-icon,
section.bg-zebra .address-card.is-glass-card .contact-link-icon {
    color: var(--cz-muted) !important;
}
section.bg-zebra .contact-card.is-glass-card::after,
section.bg-zebra .address-card.is-glass-card::after {
    background: var(--cz-bg) !important;
    background-color: var(--cz-bg) !important;
    border: 1px solid var(--cz-border) !important;
    box-shadow: var(--cz-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Kart gövdesi hover: cam parlama yok — yalnızca .contact-link satırı vurgulanır */
.contact-card.is-solid-card:hover::after,
.address-card.is-solid-card:hover::after,
.contact-card.is-glass-card:hover::after,
.address-card.is-glass-card:hover::after,
section.bg-white .contact-card:hover:not(:has(.contact-link:hover))::after,
section.bg-white .address-card:hover::after,
section.bg-zebra .contact-card:hover:not(:has(.contact-link:hover))::after,
section.bg-zebra .address-card:hover::after {
    background: var(--cc-surface-bg) !important;
    background-color: var(--cc-surface-bg) !important;
    border-color: var(--cc-surface-border) !important;
    box-shadow: var(--cc-surface-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
}


/* ===========================
   Dark mode navbar: disable blur/glass
   (dynamic_styles is loaded after page CSS, so this override wins)
   =========================== */
html.dark-mode #overflow-dropdown,
html.dark-mode #overflow-dropdown *,
html.dark-mode .submenu,
html.dark-mode .overflow-submenu,
html.dark-mode #menu-overlay,
html.dark-mode #mobile-menu .backdrop-blur-sm {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.dark-mode #overflow-dropdown,
html.dark-mode .submenu,
html.dark-mode .overflow-submenu,
html.dark-mode #menu-overlay {
    background-color: #1e293b !important;
}