/* ---------------------------------------------------------
   GLOBAL CSS DEĞİŞKENLERİ (Varsayılan Tema: Koyu/Dark)
   --------------------------------------------------------- */
:root {
    /* Varsayılan Renkler (Koyu Tema) */
    --bg-color: #0B0F19;
    --text-color: #ffffff;
    --text-muted: #94a3b8; /* Slate-400 */

    --primary-color: #2563eb; /* Blue-600 */
    --primary-hover: #1d4ed8; /* Blue-700 */

    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.05);
    --card-hover-bg: rgba(255, 255, 255, 0.06);
    --overlay-start: rgba(11, 15, 25, 0.95);
    --overlay-end: transparent;
}

/* ---------------------------------------------------------
   MODÜL TEMALARI (Override)
   --------------------------------------------------------- */

/* SLIDER MODÜLÜ (Aydınlık Tema) */
#slider-app {
    --bg-color: #ffffff;
    --text-color: #0f172a; /* Slate-900 */
    --text-muted: #475569; /* Slate-600 */

    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --card-bg: #ffffff;
    --card-border: #e2e8f0; /* Slate-200 */

    --overlay-start: rgba(255, 255, 255, 0.95);
    --overlay-end: transparent;
}

/* ---------------------------------------------------------
   HAKKIMIZDA MODÜLÜ (Aydınlık / Beyaz Tema)
   --------------------------------------------------------- */
#about-app {
    /* Arka planı beyaz yapıyoruz */
    --bg-color: #ffffff;
    /* Yazı rengini koyu (Slate-900) yapıyoruz ki beyaz üstünde okunsun */
    --text-color: #0f172a;
    /* Alt metinleri gri (Slate-600) yapıyoruz */
    --text-muted: #475569;
    /* Kartların arka planını çok açık gri yapıyoruz */
    --card-bg: #f8fafc; /* Slate-50 */
    --card-border: #e2e8f0; /* Slate-200 */
    --card-hover-bg: #ffffff;
}

    /* Hakkımızda modülü içindeki özel vurgular için ek ayarlar */
    #about-app .text-main {
        color: var(--text-color); /* Koyu renk */
    }

    #about-app .text-sub {
        color: var(--text-muted); /* Gri renk */
    }

    /* Kartların gölgesini biraz daha belirgin yapalım (Beyaz tema olduğu için) */
    #about-app .glass-card {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    }

        #about-app .glass-card:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            background: #ffffff;
        }


/* ---------------------------------------------------------
   NEDEN BİZ MODÜLÜ (Dark & Premium Tema)
   --------------------------------------------------------- */
#why-us-app {
    /* Arka Plan: Slider ile uyumlu çok koyu lacivert */
    --bg-color: #0B0F19;
    /* Yazı Renkleri */
    --text-color: #ffffff; /* Ana metinler bembeyaz */
    --text-muted: #94a3b8; /* Açıklamalar metalik gri (Slate-400) */
    /* Kart Ayarları (Glassmorphism - Dark) */
    --card-bg: rgba(255, 255, 255, 0.03); /* %3 opaklıkta beyaz (Koyu cam) */
    --card-border: rgba(255, 255, 255, 0.05); /* Çok silik beyaz kenarlık */
    --card-hover-bg: rgba(255, 255, 255, 0.07); /* Hover'da biraz daha aydınlık */
}

    /* Neden Biz Kartları İçin Özel Efektler */
    #why-us-app .glass-card {
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        /* Koyu temada gölgeler daha siyah ve yayvan olmalı */
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    }

        #why-us-app .glass-card:hover {
            background: var(--card-hover-bg);
            transform: translateY(-8px);
            /* Hover durumunda Neon Mor (Purple) Glow Efekti */
            border-color: rgba(168, 85, 247, 0.5); /* Purple-500 */
            box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.6), 0 0 20px rgba(168, 85, 247, 0.2);
        }

    /* İkon Kutuları (Koyu Mod Uyumu) */
    #why-us-app .w-14 {
        /* Varsayılan: Transparan mor zemin */
        background-color: rgba(168, 85, 247, 0.1);
        color: #d8b4fe; /* Açık lila ikon rengi */
        transition: all 0.3s ease;
    }

    /* Kartın üstüne gelince ikon parlasın */
    #why-us-app .glass-card:hover .w-14 {
        background-color: #a855f7; /* Canlı mor */
        color: #ffffff; /* Beyaz ikon */
        box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); /* İkonun etrafına ışık yay */
    }

    /* Üst kısımdaki küçük başlık (SPAN) */
    #why-us-app .text-purple-600 {
        color: #c084fc !important; /* Koyu zemin üstünde okunması için açık mora çevirdik */
    }

    /* Arka plan süslemesi (Grid deseni) için opaklık ayarı */
    #why-us-app .absolute.opacity-\[0\.03\] {
        opacity: 0.1 !important; /* Desen koyu zeminde daha belirgin olsun */
        background-image: radial-gradient(#334155 1px, transparent 1px) !important; /* Noktalar gri olsun */
    }

/* ---------------------------------------------------------
   HİZMETLER MODÜLÜ (Premium Light Tema)
   --------------------------------------------------------- */
#services-app {
    --bg-color: #ffffff; /* Arka plan tam beyaz */
    --text-color: #0f172a; /* Yazılar koyu lacivert (Netlik için) */
    --text-muted: #64748b; /* Açıklamalar gri */
    /* Kart Ayarları (Clean UI) */
    --card-bg: #ffffff;
    --card-border: #f1f5f9; /* Çok silik gri kenarlık */
}

    /* Hizmet Kartları İçin Özel Gölgelendirme */
    #services-app .glass-card {
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        /* Başlangıçta çok hafif gölge */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
        transition: all 0.3s ease;
    }

        #services-app .glass-card:hover {
            transform: translateY(-5px); /* Yukarı doğru hafif hareket */
            border-color: #3b82f6; /* Hover'da kenarlık maviye dönsün */
            /* Hover'da belirgin ve yumuşak gölge */
            box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.05);
        }

    /* Arka Plan Dekoru (Hafif Mavi Geçişler) */
    #services-app .bg-decoration {
        background: radial-gradient(circle at top right, #eff6ff, transparent 40%), radial-gradient(circle at bottom left, #f8fafc, transparent 40%);
        opacity: 0.6;
    }


/* ÜRÜNLER MODÜLÜ (Yarı Koyu / Gri Tema) */
#products-app {
    /*    --bg-color: #0F1422;
    --card-bg: rgba(255, 255, 255, 0.02);
*/
    /* Arka planı beyaz yapıyoruz */
    --bg-color: #ffffff;
    /* Yazı rengini koyu (Slate-900) yapıyoruz ki beyaz üstünde okunsun */
    --text-color: #0f172a;
    /* Alt metinleri gri (Slate-600) yapıyoruz */
    --text-muted: #475569;
    /* Kartların arka planını çok açık gri yapıyoruz */
    --card-bg: #f8fafc; /* Slate-50 */
    --card-border: #e2e8f0; /* Slate-200 */
    --card-hover-bg: #ffffff;
}

/* ---------------------------------------------------------
   İLETİŞİM MODÜLÜ (Premium & Modern Stil)
   --------------------------------------------------------- */
#contact-app {
    /* Arka Plan: Düz renk yerine çok hafif, modern bir gradyan */
    background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%);
    /* Metin Renkleri */
    --text-color: #1E293B;
    --text-muted: #64748B;
    /* Kart Ayarları */
    --card-bg: #FFFFFF;
    --card-border: #FFFFFF;
}

    /* Kartların Görünümü */
    #contact-app .glass-card {
        border: 1px solid rgba(226, 232, 240, 0.6);
        background: #FFFFFF;
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04);
        border-radius: 1.5rem;
        transition: all 0.3s ease; /* Geçişleri yumuşat */
    }

        /* Hover (Üzerine Gelme) Efekti */
        #contact-app .glass-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px -5px rgba(59, 130, 246, 0.15);
            border-color: rgba(59, 130, 246, 0.3);
        }

    /* İkon Kutularının Özelleştirilmesi */
    #contact-app .w-12 {
        background-color: #EFF6FF;
        color: #2563EB;
        transition: all 0.3s ease;
    }

    /* Kartın üzerine gelince ikon kutusu parlasın */
    #contact-app .glass-card:hover .w-12 {
        background-color: #2563EB;
        color: #FFFFFF;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    }

    /* En Alttaki Genel Bilgiler Kutusu */
    #contact-app .max-w-4xl {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    }

    /* DÜZELTME: Linkler (Telefon ve Mail)
   Sadece 'border' sınıfı OLMAYAN linkleri hedefliyoruz.
   Böylece harita butonu (class="... border ...") bu kuraldan etkilenmez ve Tailwind sınıfları çalışır.
*/
    #contact-app a:not(.border) {
        color: var(--text-muted);
        font-weight: 500;
        transition: color 0.2s;
    }

        #contact-app a:not(.border):hover {
            color: #2563EB; /* Sadece metin linkleri mavi olsun */
        }
        
        /* ---------------------------------------------------------
   ORTAK SINIFLAR (Utility Classes)
   --------------------------------------------------------- */

/* Modül Kapsayıcısı */
.module-section {
    background-color: var(--bg-color);
    color: var(--text-color);
    position: relative;
    overflow: hidden;
    /*padding: 6rem 0;*/ /* py-24 karşılığı */
}

/* Yazı Renkleri */
.text-main {
    color: var(--text-color);
}

.text-sub {
    color: var(--text-muted);
}

/* Glassmorphism Kart */
.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

    .glass-card:hover {
        background: var(--card-hover-bg);
        transform: translateY(-5px);
        box-shadow: 0 15px 30px -5px rgba(0,0,0,0.1); /* Gölgeyi hafiflettik */
    }

/* Butonlar */
.btn-primary {
    background-color: var(--primary-color);
    color: #ffffff;
    transition: background-color 0.3s;
}

    .btn-primary:hover {
        background-color: var(--primary-hover);
    }

/* Slider Overlay (Gradient) */
.slider-overlay {
    background: linear-gradient(to right, var(--overlay-start), var(--overlay-start) 20%, var(--overlay-end));
}