.product-card, .content-card {
    display: flex !important;
    background-color: #ffffff;
    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: all 0.3s 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: all 0.3s 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: all 0.3s 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-04-11 21:15:28 */
/* =============================================== */
:root {
    --color-primary: #ca8a04;
    --color-primary-rgb: 202, 138, 4;
    --color-primary-alpha: #ca8a0414;
    --color-primary-dark: #795202;
    --color-text-hero: #ffffff;
    --color-text-heading: #422006;
    --color-text-body: #374151;
    --color-bg-light: #f0f9ff;
    --color-bg-dark: #422006;
    --color-button-primary: #ca8a04;
    --color-button-secondary: #a16207;
    --font-family-base: 'Space Grotesk', sans-serif;
    --hero-height: 400px;
    --border-radius-base: 0px;
    --color-border: rgba(0,0,0,0.1);
    --color-heading: #422006;
    --color-text: #374151;
}

/* =============================================== */
/* ZEBRA STRİPİNG - MARKA RENGİ                   */
/* =============================================== */
/* TINT MOD — Hafif opacity arka plan */
.bg-zebra {
    background-color: rgba(202, 138, 4, 0.2) !important;
}

.bg-zebra .text-body,
.bg-zebra p:not(.text-primary):not(.text-white),
.bg-zebra .prose {
    color: #1e293b !important;
}

.bg-zebra .text-heading,
.bg-zebra h1:not(.text-primary):not(.text-white),
.bg-zebra h2:not(.text-primary):not(.text-white),
.bg-zebra h3:not(.text-primary):not(.text-white),
.bg-zebra h4:not(.text-primary):not(.text-white),
.bg-zebra h5:not(.text-primary):not(.text-white),
.bg-zebra h6:not(.text-primary):not(.text-white) {
    color: #0f172a !important;
}

.bg-zebra .text-primary,
.bg-zebra span.text-primary,
.bg-zebra h2.text-primary,
.bg-zebra .uppercase.text-primary {
    color: #0f172a !important;
}

html.dark-mode .bg-zebra {
    background-color: rgba(202, 138, 4, 0.15) !important;
}

html.dark-mode .bg-zebra .text-body,
html.dark-mode .bg-zebra p:not(.text-primary):not(.text-white),
html.dark-mode .bg-zebra .prose {
    color: #ffffff !important;
}

html.dark-mode .bg-zebra .text-heading,
html.dark-mode .bg-zebra h1:not(.text-primary):not(.text-white),
html.dark-mode .bg-zebra h2:not(.text-primary):not(.text-white),
html.dark-mode .bg-zebra h3:not(.text-primary):not(.text-white),
html.dark-mode .bg-zebra h4:not(.text-primary):not(.text-white),
html.dark-mode .bg-zebra h5:not(.text-primary):not(.text-white),
html.dark-mode .bg-zebra h6:not(.text-primary):not(.text-white) {
    color: #ffffff !important;
}

html.dark-mode .bg-zebra .text-primary,
html.dark-mode .bg-zebra span.text-primary,
html.dark-mode .bg-zebra h2.text-primary,
html.dark-mode .bg-zebra .uppercase.text-primary {
    color: #ffffff !important;
}

/* =============================================== */
/* 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 EFEKTİ - İNCE ÇİZGİ          */
/* =============================================== */
/* Tüm kartların hover efektini tema renginde ince çizgi olarak override et */
.card:hover,
.content-card:hover,
.product-card:hover,
.katalog-card:hover,
.video-card:hover,
.reference-item:hover,
.search-result-card:hover,
.contact-card:hover,
.stat-card:hover,
.team-card:hover,
.timeline-card:hover,
.value-card:hover,
article[data-animate]:hover,
[class*="-card"]:hover {
    box-shadow: none !important;
    border-color: var(--color-primary) !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 .contact-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"]:hover {
    box-shadow: none !important;
    border-color: var(--color-primary) !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 */
html.dark-mode .text-primary {
    color: var(--color-primary) !important;
}

/* 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 (span.text-primary.uppercase) primary renkte kalsın */
html.dark-mode span.text-primary,
html.dark-mode span.uppercase.text-primary {
    color: var(--color-primary) !important;
}

/* 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: #64748b !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 - her zaman belirgin border ile */
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,
html.dark-mode #kataloglar .bg-white,
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: #94a3b8 !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: grayscale(100%) brightness(0) invert(1);
    opacity: 0.75;
}

html.dark-mode .reference-item:hover img {
    filter: grayscale(0%) brightness(1);
    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(var(--color-primary-rgb), 0.12) !important;
    color: var(--color-primary) !important;
    border-left-color: var(--color-primary) !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: #94a3b8 !important;
}

/* İletişim kartları */
html.dark-mode .contact-card,
html.dark-mode [class*="contact"] .bg-white,
html.dark-mode #iletisim-bilgileri .bg-white,
html.dark-mode section .bg-white.border {
    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"] {
    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);
}

/* İ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;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: all 0.3s 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: all 0.3s 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: all 0.3s 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);
}


#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: all 0.2s 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,
.prose ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25em;
}
.prose li {
    margin-bottom: 0.5em;
    padding-left: 0.5rem;
}
.prose li::marker {
    color: #64748b;
}
.prose a {
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, border-color 0.2s 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: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Hover effects */
.footer-branding:hover {
    opacity: 1 !important;
    transform: translateY(-1px);
    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: all 0.2s 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;
}


/* =============================================== */
/* DİL PANELİ - TEMA UYUMLU STİLLER               */
/* =============================================== */

/* Light mod */
.lang-panel-bg {
    background-color: #ffffff;
}
.lang-panel-border-b { border-bottom: 1px solid #e2e8f0; }
.lang-panel-border-t { border-top: 1px solid #e2e8f0; }
.lang-panel-footer-bg { background-color: #f8fafc; }
.lang-panel-heading { color: #1e293b; }
.lang-panel-text { color: #64748b; }

.lang-item { border: 1px solid #e2e8f0; }
.lang-item-inactive { background-color: #f8fafc; }
.lang-item-inactive:hover { border-color: #cbd5e1; background-color: #f1f5f9; }
.lang-item-active {
    border-color: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb), 0.08);
}

/* Dark mod */
html.dark-mode .lang-panel-bg { background-color: #1e293b; }
html.dark-mode .lang-panel-border-b { border-bottom-color: #334155; }
html.dark-mode .lang-panel-border-t { border-top-color: #334155; }
html.dark-mode .lang-panel-footer-bg { background-color: #0f172a; }
html.dark-mode .lang-panel-heading { color: #f1f5f9; }
html.dark-mode .lang-panel-text { color: #94a3b8; }
html.dark-mode .lang-item { border-color: #334155; }
html.dark-mode .lang-item-inactive { background-color: #0f172a; }
html.dark-mode .lang-item-inactive:hover { border-color: #475569; background-color: #1e293b; }

/* Solid all mod */
[data-solid-all="1"] .lang-panel-bg { background-color: #422006; }
[data-solid-all="1"] .lang-panel-border-b { border-bottom-color: rgba(255,255,255,0.12); }
[data-solid-all="1"] .lang-panel-border-t { border-top-color: rgba(255,255,255,0.12); }
[data-solid-all="1"] .lang-panel-footer-bg { background-color: rgba(0,0,0,0.15); }
[data-solid-all="1"] .lang-panel-heading { color: #ffffff; }
[data-solid-all="1"] .lang-panel-text { color: rgba(255,255,255,0.65); }
[data-solid-all="1"] .lang-item { border-color: rgba(255,255,255,0.15); }
[data-solid-all="1"] .lang-item-inactive { background-color: rgba(255,255,255,0.07); }
[data-solid-all="1"] .lang-item-inactive:hover { border-color: rgba(255,255,255,0.35); background-color: rgba(255,255,255,0.12); }
[data-solid-all="1"] .lang-item-active {
    border-color: rgba(255,255,255,0.6);
    background-color: rgba(255,255,255,0.15);
}