/* BEGIN: Inlined imports from app.css (generated) */
/* ==== BEGIN about/about.css ==== */
/* ------------------------------------------------------------------- */
/* TEMEL CSS DEĞİŞKENLERİ */
/* ------------------------------------------------------------------- */
/* Dark Mode Tanımı */
/* ------------------------------------------------------------------- */
/* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
/* ------------------------------------------------------------------- */
h1,
h2,
h5,
h6 {
  color: var(--text-dark) !important;
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* Vurgu İkon Stilleri */
.icon-vurgu-hero {
  color: var(--primary-color);
  font-size: 5rem;
  display: block;
  margin-bottom: 1rem;
}
.icon-feature {
  color: var(--primary-color);
  font-size: 2.5rem;
  margin-bottom: 10px;
}

/* CTA Düğmesi Stilleri */
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary-custom:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color);
  opacity: 1;
  filter: brightness(1.1);
}

/* Card ve Bölüm Stilleri */
.hero-section {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 6rem 0;
  border-radius: 15px;
}
.content-block {
  background-color: var(--content-bg);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 15px var(--shadow-color);
  height: 100%;
}
.value-card {
  background-color: var(--content-bg);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px var(--shadow-color);
  border-top: 4px solid var(--primary-color);
  height: 100%;
  transition: transform 0.3s;
}
.value-card:hover {
  transform: translateY(-5px);
}

/* Dark Mode Bileşen Uyumu */
.dark-mode .hero-section,
.dark-mode .content-block,
.dark-mode .value-card {
  background-color: var(--content-bg) !important;
  box-shadow: 0 4px 15px var(--shadow-color) !important;
}
.dark-mode .value-card {
  border-top: 4px solid var(--primary-color) !important;
}

/* ------------------------------------------------------------------- */
/* SABİT ÜST NAVIGASYON */
/* ------------------------------------------------------------------- */
#topNavbar {
  background-color: var(--content-bg) !important;
  box-shadow: 0 2px 10px var(--shadow-color) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 1050;
}
.container {
  padding-top: 80px;
}


/* ==== END about/about.css ==== */
/* ==== BEGIN businessAnalytics/budgetManagement.css ==== */
/* ------------------------------------------------------------------- */
        /* TEMEL CSS DEĞİŞKENLERİ (Sizin Kayıtlı Paletinizden) */
        /* ------------------------------------------------------------------- */

        /* Dark Mode Tanımı */

        /* Sayfa Geneli Stilleri */
        h1, h2, h5, h6 {
            color: var(--text-dark) !important;
        }
        i {
            color: var(--primary-color); /* Tüm ikonlar primary-color kullanacak */
        }
        .btn-primary-custom {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white; 
            transition: all 0.2s;
        }
        .btn-primary-custom:hover {
            opacity: 0.9;
        }
        .text-primary-custom {
             color: var(--primary-color) !important;
        }
        /* Gradient İkon Stili - primary-color tonlarını kullanır */
        .icon-gradient {
            background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 3rem;
            display: inline-block;
            transition: all 0.3s;
        }

    
        .hero-section {
            background-color: var(--content-bg);
            box-shadow: 0 4px 20px var(--shadow-color);
           
            border-radius: 15px;
        }

        /* BI Odak Kartları (Bütçe Yönetimi için yeniden kullanıldı) */
        .bi-focus-card {
            background-color: var(--content-bg);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 10px var(--shadow-color);
            transition: all 0.3s;
            border-top: 5px solid var(--primary-color); /* Vurgu çizgisi */
        }
        .bi-focus-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
        }
        
        /* Özellik Kartları (Tasarım Tutarlılığı için) */
        .feature-card {
            background-color: var(--content-bg);
            border-radius: 8px;
            border-left: 4px solid var(--primary-color); 
            box-shadow: 0 4px 6px var(--shadow-color); 
            transition: all 0.3s;
        }
        .feature-card:hover {
            transform: translateY(-3px); 
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }

        /* DARK MODE KURALLARI (Tutarlılık için) */
        .dark-mode .hero-section, 
        .dark-mode .bi-focus-card,
        .dark-mode .feature-card {
            background-color: var(--content-bg) !important; 
            box-shadow: 0 4px 10px var(--shadow-color) !important; 
        }

        .dark-mode .bi-focus-card, .dark-mode .feature-card {
             border-left: 5px solid var(--primary-color) !important;
        }
        .dark-mode .bi-focus-card:hover {
            transform: translateY(-5px) !important;
            box-shadow: 0 10px 20px var(--shadow-color) !important;
        }

        /* Dark Mode Switch Stili (Bootstrap 5 Switch) */
.theme-switch {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            background-color: var(--content-bg);
            padding: 10px 15px;
            border-radius: 8px;
            box-shadow: 0 4px 10px var(--shadow-color);
            border: 1px solid var(--text-light);
        }
/* ==== VISIBILITY FIXES FOR ICONS IN BUTTONS ==== */
.btn i,
.btn .bi,
.btn svg {
  color: currentColor !important;
  fill: currentColor !important;
}
.btn-primary-custom i,
.btn-primary-custom .bi,
.btn-primary i,
.btn-primary .bi {
  color: #fff !important;
}
.btn-outline-primary i,
.btn-outline-primary .bi {
  color: var(--primary-color) !important;
}
.input-group-text i,
.input-group-text .bi {
  color: currentColor !important;
}




        .blog-card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s;
    box-shadow: 0 4px 10px var(--shadow-color);
    height: 100%;
    background-color: var(--content-bg) !important;
}
.blog-card:hover {
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.2);
    transform: translateY(-5px);
}

/* ==== END businessAnalytics/budgetManagement.css ==== */
/* ==== BEGIN businessAnalytics/liveDashboard.css ==== */
/* ------------------------------------------------------------------- */
        /* TEMEL CSS DEĞİŞKENLERİ (Sizin Kayıtlı Paletinizden) */
        /* ------------------------------------------------------------------- */

        /* Dark Mode Tanımı */

        /* Genel Stil */
        .main-container {
            flex-grow: 1; 
            padding: 20px;
        }

        /* Sidebar Stili */
        .sidebar {
            width: 250px;
            background-color: var(--sidebar-bg);
            box-shadow: 2px 0 5px var(--shadow-color);
            padding-top: 20px;
            transition: background-color 0.3s, color 0.3s;
            height: 100vh; 
            position: sticky;
            top: 0;
        }
        .sidebar .nav-link {
            color: var(--sidebar-text);
            padding: 15px 20px;
            margin-bottom: 5px;
            transition: all 0.2s;
            border-radius: 8px;
        }
        .sidebar .nav-link:hover {
            background-color: rgba(52, 152, 219, 0.1);
        }
        .sidebar .nav-link.active {
            background-color: var(--sidebar-active-bg);
            color: var(--primary-color) !important;
            font-weight: bold;
            border-left: 5px solid var(--primary-color);
        }
        .sidebar .nav-link i {
            color: var(--primary-color) !important;
            font-size: 1.2rem;
            margin-right: 10px;
        }

        /* İçerik Kartları */
        .content-card {
            background-color: var(--content-bg);
            border-radius: 12px;
            box-shadow: 0 4px 10px var(--shadow-color);
            padding: 20px;
            margin-bottom: 20px;
            transition: all 0.3s;
            border-top: 5px solid transparent;
        }
        .content-card h5, .content-card p {
            color: var(--text-dark) !important;
        }
        .kpi-value {
            font-size: 2rem;
            font-weight: bold;
        }
        /* Dummy Grafik Stili (Daha Görsel) */
        .chart-dummy {
            height: 250px;
            border-radius: 8px;
            display: flex;
            align-items: flex-end; /* Çubukları aşağıdan başlatmak için */
            padding: 15px;
            position: relative;
            overflow: hidden;
        }
        .bar {
            width: 15%;
            margin: 0 5px;
            background-color: var(--primary-color);
            transition: height 0.5s;
            position: relative;
            opacity: 0.8;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }
        .bar-label {
            position: absolute;
            bottom: -20px;
            font-size: 0.7rem;
            width: 100%;
            text-align: center;
            color: var(--text-dark);
        }
        /* Pasta Grafik Görünümü */
        .pie-dummy {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            margin: 20px auto;
            background: conic-gradient(
                #2ecc71 0% 35%, 
                #f39c12 35% 65%, 
                #e74c3c 65% 85%, 
                var(--primary-color) 85% 100%
            );
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }
        
        /* Dark Mode İçin Dummy Grafikler */
        .dark-mode .chart-dummy .bar-label {
            color: var(--text-dark) !important;
        }
        
        /* Dark Mode Switch Stili */
        .theme-switch {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            background-color: var(--content-bg);
            padding: 10px 15px;
            border-radius: 8px;
            box-shadow: 0 4px 10px var(--shadow-color);
            border: 1px solid var(--text-light);
        }

/* ==== END businessAnalytics/liveDashboard.css ==== */
/* ==== BEGIN consulting/digiTransf.css ==== */
/* ------------------------------------------------------------------- */
/* TEMEL CSS DEĞİŞKENLERİ */
/* ------------------------------------------------------------------- */

/* Dark Mode Tanımı */

/* ------------------------------------------------------------------- */
/* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
/* ------------------------------------------------------------------- */
h1,
h2,
h5,
h6 {
  color: var(--text-dark) !important;
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* Vurgu İkon Stilleri (Sadece Primary Color) */
.icon-vurgu {
  color: var(--primary-color);
  font-size: 3rem;
  display: inline-block;
  transition: all 0.3s;
}
.icon-vurgu-hero {
  color: var(--primary-color);
  font-size: 5rem;
  display: block;
  margin-bottom: 1rem;
}

/* CTA Düğmesi Stilleri */
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary-custom:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color);
  opacity: 1;
  filter: brightness(1.1);
}

/* Card ve Bölüm Stilleri */
.hero-section {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 6rem 0;
  border-radius: 15px;
}
.bi-focus-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: all 0.3s;
  border-top: 5px solid var(--primary-color);
}
.bi-focus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.feature-card {
  background-color: var(--content-bg);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-3px);
}

/* Dark Mode Bileşen Uyumu */
.dark-mode .hero-section,
.dark-mode .bi-focus-card,
.dark-mode .feature-card {
  background-color: var(--content-bg) !important;
  box-shadow: 0 4px 10px var(--shadow-color) !important;
}
.dark-mode .bi-focus-card {
  border-top: 5px solid var(--primary-color) !important;
}
.dark-mode .feature-card {
  border-left: 4px solid var(--primary-color) !important;
}
.dark-mode .list-group-item {
  color: var(--text-dark) !important;
}

/* ------------------------------------------------------------------- */
/* SERVİS ADIMLARI ÖZEL STİLİ (Timeline Görünümü) */
/* ------------------------------------------------------------------- */
.step-container {
  position: relative;
  padding-left: 50px;
  margin-bottom: 40px;
}
.step-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  width: 4px;
  height: 100%;
  background: var(--primary-color);
  z-index: 1;
}
.step-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  text-align: center;
  line-height: 25px;
  font-weight: bold;
  z-index: 2;
  font-size: 1rem;
}
.step-content {
  background-color: var(--content-bg);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px var(--shadow-color);
  position: relative;
  margin-left: 15px;
  border-left: 5px solid var(--primary-color);
}
.dark-mode .step-content {
  border-left: 5px solid var(--primary-color);
}

/* ------------------------------------------------------------------- */
/* SABİT ÜST NAVIGASYON */
/* ------------------------------------------------------------------- */
#topNavbar {
  background-color: var(--content-bg) !important;
  box-shadow: 0 2px 10px var(--shadow-color) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 1050;
}
#topNavbar a,
#topNavbar button {
  color: var(--text-dark) !important;
  transition: color 0.3s;
}
.btn.p-0.me-2 {
  border-right: 1px solid var(--text-light);
  padding-right: 1rem !important;
}
.container {
  padding-top: 80px;
}

/* ==== END consulting/digiTransf.css ==== */
/* ==== BEGIN consulting/reqAnaly.css ==== */

/* Dark Mode Tanımı */

/* ------------------------------------------------------------------- */
/* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
/* ------------------------------------------------------------------- */
h1,
h2,
h5,
h6 {
  color: var(--text-dark) !important;
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* Vurgu İkon Stilleri (Sadece Primary Color) */
.icon-vurgu {
  color: var(--primary-color);
  font-size: 3rem;
  display: inline-block;
  transition: all 0.3s;
}
.icon-vurgu-hero {
  color: var(--primary-color);
  font-size: 5rem;
  display: block;
  margin-bottom: 1rem;
}

/* CTA Düğmesi Stilleri */
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary-custom:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color);
  opacity: 1;
  filter: brightness(1.1);
}

/* Card ve Bölüm Stilleri */
.hero-section {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 6rem 0;
  border-radius: 15px;
}
.bi-focus-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: all 0.3s;
  border-top: 5px solid var(--primary-color);
}
.bi-focus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.feature-card {
  background-color: var(--content-bg);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-3px);
}

/* Dark Mode Bileşen Uyumu */
.dark-mode .hero-section,
.dark-mode .bi-focus-card,
.dark-mode .feature-card {
  background-color: var(--content-bg) !important;
  box-shadow: 0 4px 10px var(--shadow-color) !important;
}
.dark-mode .bi-focus-card {
  border-top: 5px solid var(--primary-color) !important;
}
.dark-mode .feature-card {
  border-left: 4px solid var(--primary-color) !important;
}
.dark-mode .list-group-item {
  color: var(--text-dark) !important;
}

/* ------------------------------------------------------------------- */
/* SERVİS ADIMLARI ÖZEL STİLİ (Basit 4 Adım) */
/* ------------------------------------------------------------------- */
.process-step {
  position: relative;
  padding: 20px;
  border-radius: 10px;
  background-color: var(--content-bg);
  box-shadow: 0 4px 10px var(--shadow-color);
  border-bottom: 4px solid var(--primary-color);
  transition: transform 0.3s;
}
.process-step:hover {
  transform: translateY(-5px);
}
.step-number {
  font-size: 2.5rem;
  color: var(--primary-color);
  font-weight: bold;
  margin-bottom: 10px;
}

/* ------------------------------------------------------------------- */
/* SABİT ÜST NAVIGASYON */
/* ------------------------------------------------------------------- */
#topNavbar {
  background-color: var(--content-bg) !important;
  box-shadow: 0 2px 10px var(--shadow-color) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 1050;
}
#topNavbar a,
#topNavbar button {
  color: var(--text-dark) !important;
  transition: color 0.3s;
}
.btn.p-0.me-2 {
  border-right: 1px solid var(--text-light);
  padding-right: 1rem !important;
}
.container {
  padding-top: 80px;
}

/* ==== END consulting/reqAnaly.css ==== */
/* ==== BEGIN consulting/swTraining.css ==== */
        /* ------------------------------------------------------------------- */
        /* TEMEL CSS DEĞİŞKENLERİ */
        /* ------------------------------------------------------------------- */

        /* Dark Mode Tanımı */

        /* ------------------------------------------------------------------- */
        /* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
        /* ------------------------------------------------------------------- */
        h1, h2, h5, h6 {
            color: var(--text-dark) !important;
        }
        .text-primary-custom {
             color: var(--primary-color) !important;
        }

        /* Vurgu İkon Stilleri (Sadece Primary Color) */
        .icon-vurgu {
            color: var(--primary-color);
            font-size: 3rem;
            display: inline-block;
            transition: all 0.3s;
        }
        .icon-vurgu-hero {
            color: var(--primary-color);
            font-size: 5rem;
            display: block;
            margin-bottom: 1rem;
        }

        /* CTA Düğmesi Stilleri */
        .btn-primary-custom {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white; 
            transition: all 0.25s ease-in-out;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .btn-primary-custom:hover {
            transform: scale(1.02);
            box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color); 
            opacity: 1; 
            filter: brightness(1.1);
        }

        /* Card ve Bölüm Stilleri */
        .hero-section {
            background-color: var(--content-bg);
            box-shadow: 0 4px 20px var(--shadow-color);
            padding: 6rem 0; 
            border-radius: 15px;
        }
        .bi-focus-card {
            background-color: var(--content-bg);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 10px var(--shadow-color);
            transition: all 0.3s;
            border-top: 5px solid var(--primary-color); 
        }
        .bi-focus-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
        }
        .feature-card {
            background-color: var(--content-bg);
            border-radius: 8px;
            border-left: 4px solid var(--primary-color); 
            box-shadow: 0 4px 6px var(--shadow-color); 
            transition: all 0.3s;
        }
        .feature-card:hover {
            transform: translateY(-3px); 
        }
        
        /* Dark Mode Bileşen Uyumu */
        .dark-mode .hero-section, 
        .dark-mode .bi-focus-card,
        .dark-mode .feature-card {
            background-color: var(--content-bg) !important; 
            box-shadow: 0 4px 10px var(--shadow-color) !important; 
        }
        .dark-mode .bi-focus-card {
             border-top: 5px solid var(--primary-color) !important;
        }
        .dark-mode .feature-card {
             border-left: 4px solid var(--primary-color) !important;
        }
        .dark-mode .list-group-item {
             color: var(--text-dark) !important;
        }
        
        /* ------------------------------------------------------------------- */
        /* MODÜL LİSTESİ ÖZEL STİLİ */
        /* ------------------------------------------------------------------- */
        .module-list-item {
            display: flex;
            align-items: center;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 8px;
            background-color: var(--content-bg);
            box-shadow: 0 2px 5px var(--shadow-color);
            border: 1px solid rgba(0, 0, 0, 0.05);
            transition: all 0.2s;
        }
        .module-list-item:hover {
            background-color: #f7f9fa; /* Hafif vurgu */
            transform: translateX(5px);
        }
        .dark-mode .module-list-item:hover {
            background-color: #2c3e50; 
        }

        /* ------------------------------------------------------------------- */
        /* SABİT ÜST NAVIGASYON */
        /* ------------------------------------------------------------------- */
        #topNavbar {
            background-color: var(--content-bg) !important;
            box-shadow: 0 2px 10px var(--shadow-color) !important;
            padding-top: 15px;
            padding-bottom: 15px;
            z-index: 1050; 
        }
        #topNavbar a, #topNavbar button {
            color: var(--text-dark) !important;
            transition: color 0.3s;
        }
        .btn.p-0.me-2 {
            border-right: 1px solid var(--text-light); 
            padding-right: 1rem !important;
        }
        .container {
            padding-top: 80px; 
        }

/* ==== END consulting/swTraining.css ==== */
/* ==== BEGIN consulting/workflowCons.css ==== */
/* ------------------------------------------------------------------- */
/* TEMEL CSS DEĞİŞKENLERİ */
/* ------------------------------------------------------------------- */

/* Dark Mode Tanımı */

/* ------------------------------------------------------------------- */
/* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
/* ------------------------------------------------------------------- */
h1,
h2,
h5,
h6 {
  color: var(--text-dark) !important;
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* Vurgu İkon Stilleri (Sadece Primary Color) */
.icon-vurgu {
  color: var(--primary-color);
  font-size: 3rem;
  display: inline-block;
  transition: all 0.3s;
}
.icon-vurgu-hero {
  color: var(--primary-color);
  font-size: 5rem;
  display: block;
  margin-bottom: 1rem;
}

/* CTA Düğmesi Stilleri */
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary-custom:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color);
  opacity: 1;
  filter: brightness(1.1);
}

/* Card ve Bölüm Stilleri */
.hero-section {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 6rem 0;
  border-radius: 15px;
}
.bi-focus-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: all 0.3s;
  border-top: 5px solid var(--primary-color);
}
.bi-focus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.feature-card {
  background-color: var(--content-bg);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-3px);
}

/* Dark Mode Bileşen Uyumu */
.dark-mode .hero-section,
.dark-mode .bi-focus-card,
.dark-mode .feature-card {
  background-color: var(--content-bg) !important;
  box-shadow: 0 4px 10px var(--shadow-color) !important;
}
.dark-mode .bi-focus-card {
  border-top: 5px solid var(--primary-color) !important;
}
.dark-mode .feature-card {
  border-left: 4px solid var(--primary-color) !important;
}
.dark-mode .list-group-item {
  color: var(--text-dark) !important;
}

/* ------------------------------------------------------------------- */
/* SERVİS ADIMLARI ÖZEL STİLİ (Timeline Görünümü) */
/* ------------------------------------------------------------------- */
.step-container {
  position: relative;
  padding-left: 50px;
  margin-bottom: 40px;
}
.step-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  width: 4px;
  height: 100%;
  background: var(--primary-color);
  z-index: 1;
}
.step-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  text-align: center;
  line-height: 25px;
  font-weight: bold;
  z-index: 2;
  font-size: 1rem;
}
.step-content {
  background-color: var(--content-bg);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px var(--shadow-color);
  position: relative;
  margin-left: 15px;
  border-left: 5px solid var(--primary-color);
}
.dark-mode .step-content {
  border-left: 5px solid var(--primary-color);
}

/* ------------------------------------------------------------------- */
/* SABİT ÜST NAVIGASYON */
/* ------------------------------------------------------------------- */
#topNavbar {
  background-color: var(--content-bg) !important;
  box-shadow: 0 2px 10px var(--shadow-color) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 1050;
}
#topNavbar a,
#topNavbar button {
  color: var(--text-dark) !important;
  transition: color 0.3s;
}
.btn.p-0.me-2 {
  border-right: 1px solid var(--text-light);
  padding-right: 1rem !important;
}
.container {
  padding-top: 80px;
}

/* ==== END consulting/workflowCons.css ==== */
/* ==== BEGIN contact/contact.css ==== */
/* Varsayılan Font */
/* Body styles are defined globally in app.css */

/* ========================================================================
           1. Kullanıcı Tanımlı Renk Paletleri (Light & Dark Mod)
           ======================================================================== */

/* Theme variables centralized in app.css */

/* Dark Mode Paleti */
/* Dark mode variables centralized in app.css */

/* ========================================================================
           2. Dark Mode Toggle ve Genel Stil
           ======================================================================== */

/* Sabit Dark Mode Butonu */
.dark-mode-toggle-fixed {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}
.dark-mode-toggle-fixed .btn {
  background-color: var(--content-bg);
  border: 1px solid var(--text-light);
  color: var(--text-dark);
  padding: 0.75rem;
  border-radius: 50%;
  transition: all 0.3s;
  box-shadow: 0 4px 8px var(--shadow-color);
}
.dark-mode-toggle-fixed .btn:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
  filter: brightness(1.1);
}
.dark-mode-toggle-fixed .btn i {
  font-size: 1.25rem;
}

/* ------------------------------------------------------------------- */
/* Renk Değişkeni Sınıfları */
/* ------------------------------------------------------------------- */
.text-dark-mode-aware {
  color: var(--text-dark) !important;
}
.text-text-light {
  color: var(--text-light) !important;
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* ------------------------------------------------------------------- */
/* Kart ve Form Stilleri */
/* ------------------------------------------------------------------- */
.hero-section-contact {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 4rem 0;
  border-radius: 0 0 15px 15px;
  margin-bottom: 3rem;
  transition: background-color 0.3s, box-shadow 0.3s;
}

/* İletişim Form Kartı */
.contact-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  box-shadow: 0 8px 15px var(--shadow-color);
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
  border-top: 5px solid var(--primary-color);
  color: var(--text-dark);
}
.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px var(--shadow-color);
}

.contact-card label {
  display: block;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.contact-card form input:not([type="checkbox"]),
.contact-card form textarea,
.contact-card form select {
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--text-light);
  background-color: var(--body-bg);
  color: var(--text-dark);
  transition: all 0.3s;
}
.contact-card form input:focus,
.contact-card form textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 5px var(--primary-color);
  outline: none;
  background-color: var(--content-bg);
}

/* Primary Buton */
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--content-bg);
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}
.dark-mode .btn-primary-custom {
  box-shadow: 0 4px 10px rgba(93, 173, 226, 0.3);
}
.btn-primary-custom:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color);
}

/* İletişim Bilgileri İkonları */
.contact-info i {
  color: var(--primary-color);
  font-size: 1.5rem;
  margin-right: 15px;
}

/* Harita Yer Tutucu Stili */
.map-placeholder {
  height: 200px;
  background-color: var(--body-bg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  border: 1px dashed var(--text-light);
  margin-top: 1rem;
}

/* ==== END contact/contact.css ==== */
/* ==== BEGIN eTransformation/crm.css ==== */

        /* Dark Mode Tanımı */

        /* Sayfa Geneli Stilleri */
        h1, h2, h5, h6 {
            color: var(--text-dark) !important;
        }
        i {
            color: var(--primary-color); 
        }
        .btn-primary-custom {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white; 
            transition: all 0.2s;
        }
        .btn-primary-custom:hover {
            opacity: 0.9;
        }
        .text-primary-custom {
             color: var(--primary-color) !important;
        }
        
        /* Gradient İkon Stili - primary-color tonlarını kullanır */
        .icon-gradient {
            background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 3rem;
            display: inline-block;
            transition: all 0.3s;
        }

        /* ------------------------------------------------------------------- */
        /* BİLEŞEN STİLLERİ (Önceki sayfa yapısı korundu) */
        /* ------------------------------------------------------------------- */
        
        .hero-section {
            background-color: var(--content-bg);
            box-shadow: 0 4px 20px var(--shadow-color);
            
        border-radius: 15px;
        }

        .bi-focus-card {
            background-color: var(--content-bg);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 10px var(--shadow-color);
            transition: all 0.3s;
            border-top: 5px solid var(--primary-color); /* Vurgu çizgisi */
        }
        .bi-focus-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
        }
        
        .feature-card {
            background-color: var(--content-bg);
            border-radius: 8px;
            border-left: 4px solid var(--primary-color); 
            box-shadow: 0 4px 6px var(--shadow-color); 
            transition: all 0.3s;
        }
        .feature-card:hover {
            transform: translateY(-3px); 
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }
        
        /* Görsel Yer Tutucu (Sade ve Kurumsal) */
        .visual-area {
            background-color: var(--body-bg);
            border-radius: 12px;
            padding: 40px;
            border: 1px dashed var(--text-light);
            box-shadow: inset 0 0 15px var(--shadow-color);
            text-align: center;
        }
        .dark-mode .visual-area {
            background-color: #314050; 
        }

        /* DARK MODE KURALLARI (Tutarlılık için) */
        .dark-mode .hero-section, 
        .dark-mode .bi-focus-card,
        .dark-mode .feature-card {
            background-color: var(--content-bg) !important; 
            box-shadow: 0 4px 10px var(--shadow-color) !important; 
        }

        .dark-mode .bi-focus-card {
             border-top: 5px solid var(--primary-color) !important; /* Dark mode border */
        }
        .dark-mode .feature-card {
             border-left: 4px solid var(--primary-color) !important; /* Dark mode border */
        }
        .dark-mode .bi-focus-card:hover {
            transform: translateY(-5px) !important;
            box-shadow: 0 10px 20px var(--shadow-color) !important;
        }

        /* Dark Mode Switch Stili */
        .theme-switch {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            background-color: var(--content-bg);
            padding: 10px 15px;
            border-radius: 8px;
            box-shadow: 0 4px 10px var(--shadow-color);
            border: 1px solid var(--text-light);
        }
        .blog-card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s;
    box-shadow: 0 4px 10px var(--shadow-color);
    height: 100%;
    background-color: var(--content-bg) !important;
}
.blog-card:hover {
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.2);
    transform: translateY(-5px);
}

/* ==== END eTransformation/crm.css ==== */
/* ==== BEGIN eTransformation/eAggr.css ==== */
/* ------------------------------------------------------------------- */
        /* TEMEL CSS DEĞİŞKENLERİ (Sizin Kayıtlı Paletinizden) */
        /* ------------------------------------------------------------------- */

        /* Dark Mode Tanımı */

        /* Sayfa Geneli Stilleri */
        h1, h2, h5, h6 {
            color: var(--text-dark) !important;
        }
        i {
            color: var(--primary-color); 
        }
        .btn-primary-custom {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white; 
            transition: all 0.2s;
        }
        .btn-primary-custom:hover {
            opacity: 0.9;
        }
        .text-primary-custom {
             color: var(--primary-color) !important;
        }
        
        /* Gradient İkon Stili - primary-color tonlarını kullanır */
        .icon-gradient {
            background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 3rem;
            display: inline-block;
            transition: all 0.3s;
        }

        /* ------------------------------------------------------------------- */
        /* BİLEŞEN STİLLERİ (Önceki sayfa yapısı korundu) */
        /* ------------------------------------------------------------------- */
        
        .hero-section {
            background-color: var(--content-bg);
            box-shadow: 0 4px 20px var(--shadow-color);
            padding: 6rem 0; 
            border-radius: 15px;
        }

        .bi-focus-card {
            background-color: var(--content-bg);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 10px var(--shadow-color);
            transition: all 0.3s;
            border-top: 5px solid var(--primary-color); /* Vurgu çizgisi */
        }
        .bi-focus-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
        }
        
        .feature-card {
            background-color: var(--content-bg);
            border-radius: 8px;
            border-left: 4px solid var(--primary-color); 
            box-shadow: 0 4px 6px var(--shadow-color); 
            transition: all 0.3s;
        }
        .feature-card:hover {
            transform: translateY(-3px); 
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }
        
        /* Görsel Yer Tutucu (Sade ve Kurumsal) */
        .visual-area {
            background-color: var(--body-bg);
            border-radius: 12px;
            padding: 40px;
            border: 1px dashed var(--text-light);
            box-shadow: inset 0 0 15px var(--shadow-color);
            text-align: center;
        }
        .dark-mode .visual-area {
            background-color: #314050; 
        }

        /* DARK MODE KURALLARI (Tutarlılık için) */
        .dark-mode .hero-section, 
        .dark-mode .bi-focus-card,
        .dark-mode .feature-card {
            background-color: var(--content-bg) !important; 
            box-shadow: 0 4px 10px var(--shadow-color) !important; 
        }

        .dark-mode .bi-focus-card {
             border-top: 5px solid var(--primary-color) !important; /* Dark mode border */
        }
        .dark-mode .feature-card {
             border-left: 4px solid var(--primary-color) !important; /* Dark mode border */
        }
        .dark-mode .bi-focus-card:hover {
            transform: translateY(-5px) !important;
            box-shadow: 0 10px 20px var(--shadow-color) !important;
        }

        /* Dark Mode Switch Stili */
        .theme-switch {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            background-color: var(--content-bg);
            padding: 10px 15px;
            border-radius: 8px;
            box-shadow: 0 4px 10px var(--shadow-color);
            border: 1px solid var(--text-light);
        }

/* ==== END eTransformation/eAggr.css ==== */
/* ==== BEGIN eTransformation/eBill.css ==== */
        /* ------------------------------------------------------------------- */
        /* TEMEL CSS DEĞİŞKENLERİ (Sizin Kayıtlı Paletinizden) */
        /* ------------------------------------------------------------------- */

        /* Dark Mode Tanımı */

        /* Sayfa Geneli Stilleri */
        h1, h2, h5, h6 {
            color: var(--text-dark) !important;
        }
        i {
            /* Tüm ikonlar ve vurgular artık sadece Primary Color kullanır */
            color: var(--primary-color); 
        }
        .btn-primary-custom {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white; 
            transition: all 0.2s;
        }
        .btn-primary-custom:hover {
            opacity: 0.9;
        }
        .text-primary-custom {
             color: var(--primary-color) !important;
        }
        
        /* Gradient İkon Stili - primary-color tonlarını kullanır */
        .icon-gradient {
            background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 3rem;
            display: inline-block;
            transition: all 0.3s;
        }

        /* ------------------------------------------------------------------- */
        /* BİLEŞEN STİLLERİ (Vurgu çizgileri Primary Color ile uyumlu hale getirildi) */
        /* ------------------------------------------------------------------- */
        
        .hero-section {
            background-color: var(--content-bg);
            box-shadow: 0 4px 20px var(--shadow-color);
            padding: 6rem 0; 
            border-radius: 15px;
        }

        .bi-focus-card {
            background-color: var(--content-bg);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 10px var(--shadow-color);
            transition: all 0.3s;
            border-top: 5px solid var(--primary-color); /* Vurgu çizgisi */
        }
        .bi-focus-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
        }
        
        .feature-card {
            background-color: var(--content-bg);
            border-radius: 8px;
            border-left: 4px solid var(--primary-color); /* Vurgu çizgisi */
            box-shadow: 0 4px 6px var(--shadow-color); 
            transition: all 0.3s;
        }
        .feature-card:hover {
            transform: translateY(-3px); 
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }
        
        .visual-area {
            background-color: var(--body-bg);
            border-radius: 12px;
            padding: 40px;
            border: 1px dashed var(--text-light);
            box-shadow: inset 0 0 15px var(--shadow-color);
            text-align: center;
        }
        .dark-mode .visual-area {
            background-color: #314050; 
        }

        /* DARK MODE KURALLARI (Tutarlılık için) */
        .dark-mode .hero-section, 
        .dark-mode .bi-focus-card,
        .dark-mode .feature-card {
            background-color: var(--content-bg) !important; 
            box-shadow: 0 4px 10px var(--shadow-color) !important; 
        }

        .dark-mode .bi-focus-card {
             border-top: 5px solid var(--primary-color) !important; /* Dark mode border */
        }
        .dark-mode .feature-card {
             border-left: 4px solid var(--primary-color) !important; /* Dark mode border */
        }
        .dark-mode .bi-focus-card:hover {
            transform: translateY(-5px) !important;
            box-shadow: 0 10px 20px var(--shadow-color) !important;
        }

        /* Dark Mode Switch Stili */
        .theme-switch {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            background-color: var(--content-bg);
            padding: 10px 15px;
            border-radius: 8px;
            box-shadow: 0 4px 10px var(--shadow-color);
            border: 1px solid var(--text-light);
        }

/* ==== END eTransformation/eBill.css ==== */
/* ==== BEGIN eTransformation/eBook.css ==== */
/* ------------------------------------------------------------------- */
/* TEMEL CSS DEĞİŞKENLERİ (Sizin Kayıtlı Paletinizden) */
/* ------------------------------------------------------------------- */
/* Dark Mode Tanımı */
/* Dark mode variables are centralized in app.css */

/* Sayfa Geneli Stilleri */
h1,
h2,
h5,
h6 {
  color: var(--text-dark) !important;
}
i {
  color: var(--primary-color);
}
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transition: all 0.2s;
}
.btn-primary-custom:hover {
  opacity: 0.9;
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* Gradient İkon Stili - primary-color tonlarını kullanır */
.icon-gradient {
  background: linear-gradient(
    to right,
    var(--gradient-start),
    var(--gradient-end)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3rem;
  display: inline-block;
  transition: all 0.3s;
}

/* ------------------------------------------------------------------- */
/* BİLEŞEN STİLLERİ (Önceki sayfa yapısı korundu) */
/* ------------------------------------------------------------------- */

.hero-section {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 6rem 0;
  border-radius: 15px;
}

.bi-focus-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: all 0.3s;
  border-top: 5px solid var(--primary-color); /* Vurgu çizgisi */
}
.bi-focus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

.feature-card {
  background-color: var(--content-bg);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Görsel Yer Tutucu (Sade ve Kurumsal) */
.visual-area {
  background-color: var(--body-bg);
  border-radius: 12px;
  padding: 40px;
  border: 1px dashed var(--text-light);
  box-shadow: inset 0 0 15px var(--shadow-color);
  text-align: center;
}
.dark-mode .visual-area {
  background-color: #314050;
}

/* DARK MODE KURALLARI (Tutarlılık için) */
.dark-mode .hero-section,
.dark-mode .bi-focus-card,
.dark-mode .feature-card {
  background-color: var(--content-bg) !important;
  box-shadow: 0 4px 10px var(--shadow-color) !important;
}

.dark-mode .bi-focus-card {
  border-top: 5px solid var(--primary-color) !important; /* Dark mode border */
}
.dark-mode .feature-card {
  border-left: 4px solid var(--primary-color) !important; /* Dark mode border */
}
.dark-mode .bi-focus-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 20px var(--shadow-color) !important;
}

/* Dark Mode Switch Stili */
.theme-switch {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background-color: var(--content-bg);
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 4px 10px var(--shadow-color);
  border: 1px solid var(--text-light);
}


/* ==== END eTransformation/eBook.css ==== */
/* ==== BEGIN products/enterprise.css ==== */

/* Karanlık Mod Renkleri (Önceki Tercihlerinizle Güncellendi) */

/* GENEL GEÇİŞLER */important
body, .navbar, .hero-section, .feature-card, .scope-item, .cta-section, .blog-card, h1, h2, h3, h5, h6, p, .nav-link, .dropdown-header {
    transition: color var(--transition-speed), background-color var(--transition-speed), box-shadow var(--transition-speed);
}
.hero-section { 
    background-color: var(--content-bg) !important; 
    box-shadow: 0 4px 20px var(--shadow-color);  
    border-radius: 15px;
}
.mega-menu, .feature-card, .scope-item, .cta-section, .blog-card { background-color: var(--content-bg) !important; }
h1, h2, h3, h5, h6 { color: var(--text-dark) !important; }
.lead, .text-muted, .small { color: var(--text-light) !important; }
.hero-section i { color: var(--primary-color) !important; font-size: 5rem !important; } 

/* Kart Stilleri */
.feature-card { 
    border: none; border-radius: 12px; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 10px var(--shadow-color);
    border-left: 5px solid var(--primary-color);
}
.feature-card i { font-size: 3rem !important; color: var(--primary-color) !important; }
.feature-card:hover { 
    /* Light Mode hover rengi korundu: primary-color ile uyumlu */
    box-shadow: 0 8px 30px rgba(52, 152, 219, 0.1); 
    transform: translateY(-8px); 
}
.feature-card:hover i { color: var(--secondary-color) !important; }

/* Kapsam ve Blog Stilleri */
.scope-item { padding: 1rem; border-radius: 8px; border-left: 4px solid var(--secondary-color); background-color: var(--content-bg); }
.scope-item i { font-size: 1.8rem !important; color: var(--primary-color) !important; }
.blog-card { 
    border: 1px solid rgba(0, 0, 0, 0.05); 
    border-radius: 12px; overflow: hidden; transition: all 0.4s; box-shadow: 0 4px 10px var(--shadow-color); background-color: var(--content-bg) !important;
    height: 100%;
}
.blog-card:hover { 
    /* Light Mode hover rengi korundu: primary-color ile uyumlu */
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.2); 
    transform: translateY(-5px); 
}
.dark-mode .blog-card-footer { border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* Dark Mode Toggle */
#dark-mode-toggle { margin-left: 1rem; cursor: pointer; font-size: 1.5rem; color: var(--primary-color); }


/* ==== END products/enterprise.css ==== */
/* ==== BEGIN products/middle.css ==== */
/* Karanlık Mod Renkleri (AYNI KALDI) */
/* GENEL GEÇİŞLER (TRANSITION) */
body, .navbar, .hero-section, .feature-card, .scope-item, .cta-section, .blog-card, h1, h2, h3, h5, h6, p, .nav-link, .dropdown-header {
    transition: color var(--transition-speed), background-color var(--transition-speed), box-shadow var(--transition-speed);
}

/* --- TEMA UYGULAMASI --- */
.hero-section { 
    background-color: var(--content-bg) !important; 
    box-shadow: 0 4px 20px var(--shadow-color); 
    padding: 6rem 0 !important; 
    border-radius: 15px;
}
.mega-menu, .feature-card, .scope-item, .cta-section, .blog-card { 
    background-color: var(--content-bg) !important; 
}

h1, h2, h3, h5, h6 { color: var(--text-dark) !important; }
.lead, .text-muted, .small { color: var(--text-light) !important; }

/* Vurgu Renkleri */
.hero-section i { color: var(--primary-color) !important; }
.feature-card i { color: var(--primary-color) !important; }
.feature-card:hover i { color: var(--secondary-color) !important; }
.scope-item i { color: var(--primary-color) !important; }

/* ======================================= */
/* 2. DÜZEN VE İKON BÜYÜKLÜĞÜ GÜNCELLEMELERİ */
/* ======================================= */

/* İKON BÜYÜKLÜĞÜ (AYNI) */
.hero-section i { font-size: 5rem !important; } 
.feature-card i { font-size: 3rem !important; } 
.scope-item i { font-size: 1.8rem !important; } 

/* Diğer Kart Stilleri (AYNI) */
.feature-card { 
    border: none; border-radius: 12px; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 10px var(--shadow-color);
    border-left: 5px solid var(--primary-color);
}
.feature-card:hover { box-shadow: 0 8px 30px rgba(52, 152, 219, 0.1); transform: translateY(-8px); }
.scope-item { padding: 1rem; border-radius: 8px; border-left: 4px solid var(--secondary-color); }

/* Blog/Başarı Hikayeleri Kartları (AYNI) */
.blog-card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s;
    box-shadow: 0 4px 10px var(--shadow-color);
    height: 100%;
}
.blog-card:hover {
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.2);
    transform: translateY(-5px);
}

/* Dark Mode Toggle (AYNI) */
#dark-mode-toggle { margin-left: 1rem; cursor: pointer; font-size: 1.5rem; color: var(--primary-color); }


/* ==== END products/middle.css ==== */
/* ==== BEGIN products/small.css ==== */
/* Karanlık Mod Renkleri */
body, .navbar, .hero-section, .feature-card, .scope-item, .cta-section, .blog-card, h1, h2, h3, h5, h6, p, .nav-link, .dropdown-header {
    transition: color var(--transition-speed), background-color var(--transition-speed), box-shadow var(--transition-speed);
}
.hero-section { background-color: var(--content-bg) !important; box-shadow: 0 4px 20px var(--shadow-color); }
.mega-menu, .feature-card, .scope-item, .cta-section { background-color: var(--content-bg) !important; }
h1, h2, h3, h5, h6 { color: var(--text-dark) !important; }
.lead, .text-muted, .small { color: var(--text-light) !important; }

/* Vurgu Renkleri */
.hero-section i { color: var(--primary-color) !important; }
.feature-card i { color: var(--primary-color) !important; }
.feature-card:hover i { color: var(--secondary-color) !important; }
.scope-item i { color: var(--primary-color) !important; }



.hero-section i { font-size: 5rem !important; } 
.feature-card i { font-size: 3rem !important; }
.scope-item i { font-size: 1.8rem !important; } 


/* Blog/Başarı Hikayeleri Kartları */
.blog-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s;
    box-shadow: 0 4px 10px var(--shadow-color);
    background-color: var(--content-bg) !important;
    height: 100%;
}
.blog-card:hover {
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.2);
    transform: translateY(-5px);
}
.blog-card img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}
.blog-card-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 1rem;
    margin-top: 1rem;
}
.dark-mode .blog-card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Diğer Kart Stilleri (Profesyonel Düzen) */
.feature-card { border: none; border-radius: 12px; }
.feature-card:hover { box-shadow: 0 8px 30px rgba(52, 152, 219, 0.1); }
.scope-item { border-left: 4px solid var(--secondary-color); }

/* Dark Mode Toggle */
#dark-mode-toggle {
    margin-left: 1rem;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: color 0.3s;
}

    /* Dark Mode Kuralları (Yapısal) */
    .dark-mode .hero-section, 
    .dark-mode .feature-card {
        background-color: #212b36 !important; /* content-bg Dark (Zorunlu) */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important; 
        border: none !important;
    }

    .dark-mode .feature-card {
        border-left: 5px solid #5dade2 !important; /* primary-color Dark (Zorunlu) */
    }
    
    .dark-mode .feature-card:hover {
        /* Dark Mode'da hover gölgesini koyu yap */
        transform: translateY(-5px) !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5) !important;
    }

/* ==== END products/small.css ==== */
/* ==== BEGIN projectManagement/erp.css ==== */
/* ------------------------------------------------------------------- */
/* TEMEL CSS DEĞİŞKENLERİ (Sizin Kayıtlı Paletinizden) */
/* ------------------------------------------------------------------- */

/* Dark Mode Tanımı */

/* ------------------------------------------------------------------- */
/* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
/* ------------------------------------------------------------------- */
h1,
h2,
h5,
h6 {
  color: var(--text-dark) !important;
}

/* CTA Düğmesi Stilleri */
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary-custom:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color);
  opacity: 1;
  filter: brightness(1.1);
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* Gradient yerine düz Primary Renk İkon Stili */
.icon-vurgu {
  color: var(
    --primary-color
  ); /* Artık gradient yerine ana rengi kullanıyoruz */
  font-size: 3rem;
  display: inline-block;
  transition: all 0.3s;
}
.icon-vurgu-hero {
  color: var(--primary-color); /* Hero bölümü için daha büyük ikon */
  font-size: 5rem;
  display: block;
  margin-bottom: 1rem;
}

/* Card ve Bölüm Stilleri */
.hero-section {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 6rem 0;
  border-radius: 15px;
}
.bi-focus-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: all 0.3s;
  border-top: 5px solid var(--primary-color);
}
.bi-focus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.feature-card {
  background-color: var(--content-bg);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-3px);
}
.visual-area {
  background-color: var(--body-bg);
  border-radius: 12px;
  padding: 40px;
  border: 1px dashed var(--text-light);
  box-shadow: inset 0 0 15px var(--shadow-color);
  text-align: center;
}

/* Dark Mode Bileşen Uyumu */
.dark-mode .hero-section,
.dark-mode .bi-focus-card,
.dark-mode .feature-card {
  background-color: var(--content-bg) !important;
  box-shadow: 0 4px 10px var(--shadow-color) !important;
}
.dark-mode .bi-focus-card {
  border-top: 5px solid var(--primary-color) !important;
}
.dark-mode .feature-card {
  border-left: 4px solid var(--primary-color) !important;
}
.dark-mode .visual-area {
  background-color: #314050;
}
.dark-mode .list-group-item {
  color: var(--text-dark) !important;
}

/* ------------------------------------------------------------------- */
/* ÖZEL RİSK DURUMU ETİKETLERİ (Sadece Tanımlı Renkleri Kullanır) */
/* ------------------------------------------------------------------- */
/* Düşük Risk (Success) - Primary Color (Mavi) */
.badge-success-custom {
  background-color: var(--primary-color) !important;
  color: white !important;
}

/* Yüksek Risk (Warning) - Text Light Color (Mat Gri) */
.badge-warning-custom {
  background-color: var(--text-light) !important;
  color: var(--text-dark) !important;
}

/* Kritik Risk (Danger) - Primary Color (Mavi - en önemli vurgu) */
.badge-danger-custom {
  background-color: var(
    --primary-color
  ) !important; /* Tekrar primary rengi kritik durum için kullanılır */
  color: white !important;
}

/* ------------------------------------------------------------------- */
/* SABİT ÜST NAVIGASYON */
/* ------------------------------------------------------------------- */
#topNavbar {
  background-color: var(--content-bg) !important;
  box-shadow: 0 2px 10px var(--shadow-color) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 1050;
}
#topNavbar a,
#topNavbar button {
  color: var(--text-dark) !important;
  transition: color 0.3s;
}
.btn.p-0.me-2 {
  border-right: 1px solid var(--text-light);
  padding-right: 1rem !important;
}
.container {
  padding-top: 80px;
}

/* ==== END projectManagement/erp.css ==== */
/* ==== BEGIN projectManagement/integration.css ==== */
/* ------------------------------------------------------------------- */
/* TEMEL CSS DEĞİŞKENLERİ */
/* ------------------------------------------------------------------- */

/* Dark Mode Tanımı */

/* ------------------------------------------------------------------- */
/* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
/* ------------------------------------------------------------------- */
h1,
h2,
h5,
h6 {
  color: var(--text-dark) !important;
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* Vurgu İkon Stilleri (Sadece Primary Color) */
.icon-vurgu {
  color: var(--primary-color);
  font-size: 3rem;
  display: inline-block;
  transition: all 0.3s;
}
.icon-vurgu-hero {
  color: var(--primary-color);
  font-size: 5rem;
  display: block;
  margin-bottom: 1rem;
}

/* CTA Düğmesi Stilleri */
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary-custom:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color);
  opacity: 1;
  filter: brightness(1.1);
}

/* Card ve Bölüm Stilleri */
.hero-section {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 6rem 0;
  border-radius: 15px;
}
.bi-focus-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: all 0.3s;
  border-top: 5px solid var(--primary-color);
}
.bi-focus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.feature-card {
  background-color: var(--content-bg);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-3px);
}
.visual-area {
  background-color: var(--body-bg);
  border-radius: 12px;
  padding: 40px;
  border: 1px dashed var(--text-light);
  box-shadow: inset 0 0 15px var(--shadow-color);
  text-align: center;
}

/* Dark Mode Bileşen Uyumu */
.dark-mode .hero-section,
.dark-mode .bi-focus-card,
.dark-mode .feature-card {
  background-color: var(--content-bg) !important;
  box-shadow: 0 4px 10px var(--shadow-color) !important;
}
.dark-mode .bi-focus-card {
  border-top: 5px solid var(--primary-color) !important;
}
.dark-mode .feature-card {
  border-left: 4px solid var(--primary-color) !important;
}
.dark-mode .visual-area {
  background-color: #314050;
}
.dark-mode .list-group-item {
  color: var(--text-dark) !important;
}

/* ------------------------------------------------------------------- */
/* ÖZEL RİSK ETİKETLERİ (Sadece Tanımlı Renkleri Kullanır) */
/* ------------------------------------------------------------------- */
.badge-success-custom {
  background-color: var(--primary-color) !important;
  color: white !important;
}
.badge-warning-custom {
  background-color: var(--text-light) !important;
  color: var(--text-dark) !important;
}
.badge-danger-custom {
  background-color: var(--primary-color) !important;
  color: white !important;
}

/* ------------------------------------------------------------------- */
/* ENTEGRASYON SÜREÇ KARTLARI ÖZEL STİLİ */
/* ------------------------------------------------------------------- */
.step-icon-wrapper {
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.5rem;
  margin: 0 auto 15px auto;
  box-shadow: 0 4px 8px var(--shadow-color);
}
.integration-step {
  position: relative;
  padding: 20px;
  border-radius: 12px;
  background-color: var(--content-bg);
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: transform 0.3s;
}
.integration-step:hover {
  transform: translateY(-5px);
}

/* Dark Mode Uyumu */
.dark-mode .integration-step {
  background-color: var(--content-bg) !important;
}

/* ------------------------------------------------------------------- */
/* SABİT ÜST NAVIGASYON */
/* ------------------------------------------------------------------- */
#topNavbar {
  background-color: var(--content-bg) !important;
  box-shadow: 0 2px 10px var(--shadow-color) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 1050;
}
#topNavbar a,
#topNavbar button {
  color: var(--text-dark) !important;
  transition: color 0.3s;
}
.btn.p-0.me-2 {
  border-right: 1px solid var(--text-light);
  padding-right: 1rem !important;
}
.container {
  padding-top: 80px;
}

/* ==== END projectManagement/integration.css ==== */
/* ==== BEGIN projectManagement/sw.css ==== */

/* Dark Mode Tanımı */

/* ------------------------------------------------------------------- */
/* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
/* ------------------------------------------------------------------- */
h1,
h2,
h5,
h6 {
  color: var(--text-dark) !important;
}

/* CTA Düğmesi Stilleri */
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary-custom:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color);
  opacity: 1;
  filter: brightness(1.1);
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* Düz Primary Renk İkon Stili (Vurgu) */
.icon-vurgu {
  color: var(--primary-color);
  font-size: 3rem;
  display: inline-block;
  transition: all 0.3s;
}
.icon-vurgu-hero {
  color: var(--primary-color);
  font-size: 5rem;
  display: block;
  margin-bottom: 1rem;
}

/* Card ve Bölüm Stilleri */
.hero-section {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 6rem 0;
  border-radius: 15px;
}
.bi-focus-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: all 0.3s;
  border-top: 5px solid var(--primary-color);
}
.bi-focus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.feature-card {
  background-color: var(--content-bg);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-3px);
}
.visual-area {
  background-color: var(--body-bg);
  border-radius: 12px;
  padding: 40px;
  border: 1px dashed var(--text-light);
  box-shadow: inset 0 0 15px var(--shadow-color);
  text-align: center;
}

/* Dark Mode Bileşen Uyumu */
.dark-mode .hero-section,
.dark-mode .bi-focus-card,
.dark-mode .feature-card {
  background-color: var(--content-bg) !important;
  box-shadow: 0 4px 10px var(--shadow-color) !important;
}
.dark-mode .bi-focus-card {
  border-top: 5px solid var(--primary-color) !important;
}
.dark-mode .feature-card {
  border-left: 4px solid var(--primary-color) !important;
}
.dark-mode .visual-area {
  background-color: #314050;
}
.dark-mode .list-group-item {
  color: var(--text-dark) !important;
}

/* ------------------------------------------------------------------- */
/* ÖZEL ETİKETLER */
/* ------------------------------------------------------------------- */
/* Başarı/Vurgu Durumları - Primary Color (Mavi) */
.badge-primary-custom {
  background-color: var(--primary-color) !important;
  color: white !important;
}

/* Nötr/Gri Tonlar - Text Light Color (Mat Gri) */
.badge-neutral-custom {
  background-color: var(--text-light) !important;
  color: var(--text-dark) !important;
}

/* ------------------------------------------------------------------- */
/* SABİT ÜST NAVIGASYON */
/* ------------------------------------------------------------------- */
#topNavbar {
  background-color: var(--content-bg) !important;
  box-shadow: 0 2px 10px var(--shadow-color) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 1050;
}
#topNavbar a,
#topNavbar button {
  color: var(--text-dark) !important;
  transition: color 0.3s;
}
.btn.p-0.me-2 {
  border-right: 1px solid var(--text-light);
  padding-right: 1rem !important;
}
.container {
  padding-top: 80px;
}

/* ==== END projectManagement/sw.css ==== */
/* ==== BEGIN references/references.css ==== */

    /* -------------------------------------- */
    /* Light Mode (Varsayılan) Paletiniz */
    /* -------------------------------------- */

    /* -------------------------------------- */
    /* Dark Mode Paletiniz */
    /* -------------------------------------- */

    /* Genel Sayfa ve Bileşen Stilleri */
    .text-primary-custom {
        color: var(--primary-color) !important;
    }

    /* Buton Stili (Tema uyumlu) */
    .btn-primary-custom {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
        transition: background-color .3s, border-color .3s, transform .2s;
    }
    .btn-primary-custom:hover {
        background-color: #2980b9; 
        border-color: #2980b9;
        transform: translateY(-2px);
    }

    /* Dark Mode Toggle Butonu için basit stil */
    #darkModeToggle {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1050;
        background-color: var(--content-bg);
        color: var(--text-dark);
        border: 1px solid var(--text-light);
        padding: 10px 15px;
        border-radius: 50px;
        cursor: pointer;
        box-shadow: 0 4px 8px var(--shadow-color);
        transition: all 0.3s;
    }
    #darkModeToggle:hover {
        background-color: var(--primary-color);
        color: #fff;
    }

    /* Referans Kartı Stili (contact-card) */
    .contact-card {
        background-color: var(--content-bg);
        box-shadow: 0 8px 25px var(--shadow-color);
        border-radius: 12px;
        transition: all 0.5s ease;
        border: 1px solid var(--text-light);
        border-top: 5px solid var(--primary-color); 
    }

    /* Carousel Okları için Dark Mode Uyumu */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-image: none;
        background-color: var(--primary-color);
        opacity: 0.8;
    }
    .carousel-control-prev span,
    .carousel-control-next span {
        /* HTML'deki inline stil geçersiz kılındı */
        filter: none !important;
    }

    .blockquote p { color: var(--text-dark); }
    .blockquote-footer strong { color: var(--text-dark); }


/* ==== END references/references.css ==== */
/* ==== BEGIN servData/cloud.css ==== */
/* ------------------------------------------------------------------- */
/* TEMEL CSS DEĞİŞKENLERİ */
/* ------------------------------------------------------------------- */

/* Dark Mode Tanımı */

/* ------------------------------------------------------------------- */
/* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
/* ------------------------------------------------------------------- */
h1,
h2,
h5,
h6 {
  color: var(--text-dark) !important;
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* Vurgu İkon Stilleri (Sadece Primary Color) */
.icon-vurgu {
  color: var(--primary-color);
  font-size: 3rem;
  display: inline-block;
  transition: all 0.3s;
}
.icon-vurgu-hero {
  color: var(--primary-color);
  font-size: 5rem;
  display: block;
  margin-bottom: 1rem;
}

/* CTA Düğmesi Stilleri */
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary-custom:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color);
  opacity: 1;
  filter: brightness(1.1);
}

/* Card ve Bölüm Stilleri */
.hero-section {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 6rem 0;
  border-radius: 15px;
}
.bi-focus-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: all 0.3s;
  border-top: 5px solid var(--primary-color);
}
.bi-focus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.feature-card {
  background-color: var(--content-bg);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-3px);
}
.visual-area {
  background-color: var(--body-bg);
  border-radius: 12px;
  padding: 40px;
  border: 1px dashed var(--text-light);
  box-shadow: inset 0 0 15px var(--shadow-color);
  text-align: center;
}

/* Dark Mode Bileşen Uyumu */
.dark-mode .hero-section,
.dark-mode .bi-focus-card,
.dark-mode .feature-card {
  background-color: var(--content-bg) !important;
  box-shadow: 0 4px 10px var(--shadow-color) !important;
}
.dark-mode .bi-focus-card {
  border-top: 5px solid var(--primary-color) !important;
}
.dark-mode .feature-card {
  border-left: 4px solid var(--primary-color) !important;
}
.dark-mode .visual-area {
  background-color: #314050;
}
.dark-mode .list-group-item {
  color: var(--text-dark) !important;
}

/* ------------------------------------------------------------------- */
/* SERVİS ADIMLARI ÖZEL STİLİ */
/* ------------------------------------------------------------------- */
.step-num-wrapper {
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 10px var(--shadow-color);
}
.support-step-card {
  position: relative;
  padding: 30px 20px 20px 20px;
  margin-top: 20px;
  border-radius: 12px;
  background-color: var(--content-bg);
  box-shadow: 0 4px 10px var(--shadow-color);
  height: 100%;
}
/* İletişim Kartları Stili */
.contact-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  border: 1px solid var(--body-bg);
  box-shadow: 0 4px 10px var(--shadow-color);
  text-align: center;
  height: 100%;
}
.contact-card i {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 15px;
}

/* ------------------------------------------------------------------- */
/* SABİT ÜST NAVIGASYON */
/* ------------------------------------------------------------------- */
#topNavbar {
  background-color: var(--content-bg) !important;
  box-shadow: 0 2px 10px var(--shadow-color) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 1050;
}
#topNavbar a,
#topNavbar button {
  color: var(--text-dark) !important;
  transition: color 0.3s;
}
.btn.p-0.me-2 {
  border-right: 1px solid var(--text-light);
  padding-right: 1rem !important;
}
.container {
  padding-top: 80px;
}

/* ==== END servData/cloud.css ==== */
/* ==== BEGIN servData/database.css ==== */


        /* ------------------------------------------------------------------- */
        /* TEMEL CSS DEĞİŞKENLERİ */
        /* ------------------------------------------------------------------- */

        /* Dark Mode Tanımı */

        /* ------------------------------------------------------------------- */
        /* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
        /* ------------------------------------------------------------------- */
        h1, h2, h5, h6 {
            color: var(--text-dark) !important;
        }
        .text-primary-custom {
             color: var(--primary-color) !important;
        }

        /* Vurgu İkon Stilleri (Sadece Primary Color) */
        .icon-vurgu {
            color: var(--primary-color);
            font-size: 3rem;
            display: inline-block;
            transition: all 0.3s;
        }
        .icon-vurgu-hero {
            color: var(--primary-color);
            font-size: 5rem;
            display: block;
            margin-bottom: 1rem;
        }

        /* CTA Düğmesi Stilleri */
        .btn-primary-custom {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white; 
            transition: all 0.25s ease-in-out;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .btn-primary-custom:hover {
            transform: scale(1.02);
            box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color); 
            opacity: 1; 
            filter: brightness(1.1);
        }

        /* Card ve Bölüm Stilleri */
        .hero-section {
            background-color: var(--content-bg);
            box-shadow: 0 4px 20px var(--shadow-color);
            padding: 6rem 0; 
            border-radius: 15px;
        }
        .bi-focus-card {
            background-color: var(--content-bg);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 10px var(--shadow-color);
            transition: all 0.3s;
            border-top: 5px solid var(--primary-color); 
        }
        .bi-focus-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
        }
        .feature-card {
            background-color: var(--content-bg);
            border-radius: 8px;
            border-left: 4px solid var(--primary-color); 
            box-shadow: 0 4px 6px var(--shadow-color); 
            transition: all 0.3s;
        }
        .feature-card:hover {
            transform: translateY(-3px); 
        }
        .visual-area { /* Bu kısım artık kullanılmıyor ama stil tanımını koruyalım. */
            background-color: var(--body-bg);
            border-radius: 12px;
            padding: 40px;
            border: 1px dashed var(--text-light);
            box-shadow: inset 0 0 15px var(--shadow-color);
            text-align: center;
        }

        /* Dark Mode Bileşen Uyumu */
        .dark-mode .hero-section, 
        .dark-mode .bi-focus-card,
        .dark-mode .feature-card {
            background-color: var(--content-bg) !important; 
            box-shadow: 0 4px 10px var(--shadow-color) !important; 
        }
        .dark-mode .bi-focus-card {
             border-top: 5px solid var(--primary-color) !important;
        }
        .dark-mode .feature-card {
             border-left: 4px solid var(--primary-color) !important;
        }
        .dark-mode .visual-area {
            background-color: #314050; 
        }
        .dark-mode .list-group-item {
             color: var(--text-dark) !important;
        }
        
        /* ------------------------------------------------------------------- */
        /* SERVİS ADIMLARI ÖZEL STİLİ */
        /* ------------------------------------------------------------------- */
        .step-num-wrapper {
            background-color: var(--primary-color);
            color: white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 4px 10px var(--shadow-color);
        }
        .support-step-card {
            position: relative;
            padding: 30px 20px 20px 20px;
            margin-top: 20px; 
            border-radius: 12px;
            background-color: var(--content-bg);
            box-shadow: 0 4px 10px var(--shadow-color);
            height: 100%;
            border-left: 4px solid var(--primary-color); /* Farklı bir vurgu ekledik */
        }
        .support-step-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px var(--shadow-color);
        }
        
        /* ------------------------------------------------------------------- */
        /* SABİT ÜST NAVIGASYON */
        /* ------------------------------------------------------------------- */
        #topNavbar {
            background-color: var(--content-bg) !important;
            box-shadow: 0 2px 10px var(--shadow-color) !important;
            padding-top: 15px;
            padding-bottom: 15px;
            z-index: 1050; 
        }
        #topNavbar a, #topNavbar button {
            color: var(--text-dark) !important;
            transition: color 0.3s;
        }
        .btn.p-0.me-2 {
            border-right: 1px solid var(--text-light); 
            padding-right: 1rem !important;
        }
        .container {
            padding-top: 80px; 
        }

/* ==== END servData/database.css ==== */
/* ==== BEGIN supportServices/onsite.css ==== */
/* ------------------------------------------------------------------- */
/* TEMEL CSS DEĞİŞKENLERİ */
/* ------------------------------------------------------------------- */

/* Dark Mode Tanımı */

/* ------------------------------------------------------------------- */
/* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
/* ------------------------------------------------------------------- */
h1,
h2,
h5,
h6 {
  color: var(--text-dark) !important;
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* Vurgu İkon Stilleri (Sadece Primary Color) */
.icon-vurgu {
  color: var(--primary-color);
  font-size: 3rem;
  display: inline-block;
  transition: all 0.3s;
}
.icon-vurgu-hero {
  color: var(--primary-color);
  font-size: 5rem;
  display: block;
  margin-bottom: 1rem;
}

/* CTA Düğmesi Stilleri */
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary-custom:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color);
  opacity: 1;
  filter: brightness(1.1);
}

/* Card ve Bölüm Stilleri */
.hero-section {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 6rem 0;
  border-radius: 15px;
}
.bi-focus-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: all 0.3s;
  border-top: 5px solid var(--primary-color);
}
.bi-focus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.feature-card {
  background-color: var(--content-bg);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-3px);
}
.visual-area {
  background-color: var(--body-bg);
  border-radius: 12px;
  padding: 40px;
  border: 1px dashed var(--text-light);
  box-shadow: inset 0 0 15px var(--shadow-color);
  text-align: center;
}

/* Dark Mode Bileşen Uyumu */
.dark-mode .hero-section,
.dark-mode .bi-focus-card,
.dark-mode .feature-card {
  background-color: var(--content-bg) !important;
  box-shadow: 0 4px 10px var(--shadow-color) !important;
}
.dark-mode .bi-focus-card {
  border-top: 5px solid var(--primary-color) !important;
}
.dark-mode .feature-card {
  border-left: 4px solid var(--primary-color) !important;
}
.dark-mode .visual-area {
  background-color: #314050;
}
.dark-mode .list-group-item {
  color: var(--text-dark) !important;
}

/* ------------------------------------------------------------------- */
/* YERİNDE SERVİS ADIMLARI ÖZEL STİLİ */
/* ------------------------------------------------------------------- */
.step-num-wrapper {
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 10px var(--shadow-color);
}
.support-step-card {
  position: relative;
  padding: 30px 20px 20px 20px;
  margin-top: 20px;
  border-radius: 12px;
  background-color: var(--content-bg);
  box-shadow: 0 4px 10px var(--shadow-color);
  height: 100%;
}
/* İletişim Kartları Stili */
.contact-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  border: 1px solid var(--body-bg);
  box-shadow: 0 4px 10px var(--shadow-color);
  text-align: center;
  height: 100%;
}
.contact-card i {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 15px;
}

/* ------------------------------------------------------------------- */
/* SABİT ÜST NAVIGASYON */
/* ------------------------------------------------------------------- */
#topNavbar {
  background-color: var(--content-bg) !important;
  box-shadow: 0 2px 10px var(--shadow-color) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 1050;
}
#topNavbar a,
#topNavbar button {
  color: var(--text-dark) !important;
  transition: color 0.3s;
}
.btn.p-0.me-2 {
  border-right: 1px solid var(--text-light);
  padding-right: 1rem !important;
}
.container {
  padding-top: 80px;
}

/* ==== END supportServices/onsite.css ==== */
/* ==== BEGIN supportServices/remote.css ==== */
/* ------------------------------------------------------------------- */
/* TEMEL CSS DEĞİŞKENLERİ */
/* ------------------------------------------------------------------- */

/* Dark Mode Tanımı */

/* ------------------------------------------------------------------- */
/* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
/* ------------------------------------------------------------------- */
h1,
h2,
h5,
h6 {
  color: var(--text-dark) !important;
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* Vurgu İkon Stilleri (Sadece Primary Color) */
.icon-vurgu {
  color: var(--primary-color);
  font-size: 3rem;
  display: inline-block;
  transition: all 0.3s;
}
.icon-vurgu-hero {
  color: var(--primary-color);
  font-size: 5rem;
  display: block;
  margin-bottom: 1rem;
}

/* CTA Düğmesi Stilleri */
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary-custom:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color);
  opacity: 1;
  filter: brightness(1.1);
}

/* Card ve Bölüm Stilleri */
.hero-section {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 6rem 0;
  border-radius: 15px;
}
.bi-focus-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: all 0.3s;
  border-top: 5px solid var(--primary-color);
}
.bi-focus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.feature-card {
  background-color: var(--content-bg);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-3px);
}
.visual-area {
  background-color: var(--body-bg);
  border-radius: 12px;
  padding: 40px;
  border: 1px dashed var(--text-light);
  box-shadow: inset 0 0 15px var(--shadow-color);
  text-align: center;
}

/* Dark Mode Bileşen Uyumu */
.dark-mode .hero-section,
.dark-mode .bi-focus-card,
.dark-mode .feature-card {
  background-color: var(--content-bg) !important;
  box-shadow: 0 4px 10px var(--shadow-color) !important;
}
.dark-mode .bi-focus-card {
  border-top: 5px solid var(--primary-color) !important;
}
.dark-mode .feature-card {
  border-left: 4px solid var(--primary-color) !important;
}
.dark-mode .visual-area {
  background-color: #314050;
}
.dark-mode .list-group-item {
  color: var(--text-dark) !important;
}

/* ------------------------------------------------------------------- */
/* DESTEK ADIMLARI ÖZEL STİLİ */
/* ------------------------------------------------------------------- */
.step-num-wrapper {
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 10px var(--shadow-color);
}
.support-step-card {
  position: relative;
  padding: 30px 20px 20px 20px;
  margin-top: 20px;
  border-radius: 12px;
  background-color: var(--content-bg);
  box-shadow: 0 4px 10px var(--shadow-color);
  height: 100%;
}
/* İletişim Kartları Stili */
.contact-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  border: 1px solid var(--body-bg);
  box-shadow: 0 4px 10px var(--shadow-color);
  text-align: center;
}
.contact-card i {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 15px;
}

/* ------------------------------------------------------------------- */
/* SABİT ÜST NAVIGASYON */
/* ------------------------------------------------------------------- */
#topNavbar {
  background-color: var(--content-bg) !important;
  box-shadow: 0 2px 10px var(--shadow-color) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 1050;
}
#topNavbar a,
#topNavbar button {
  color: var(--text-dark) !important;
  transition: color 0.3s;
}
.btn.p-0.me-2 {
  border-right: 1px solid var(--text-light);
  padding-right: 1rem !important;
}
.container {
  padding-top: 80px;
}

/* ==== END supportServices/remote.css ==== */
/* ==== BEGIN swDev/desktop.css ==== */
        /* ------------------------------------------------------------------- */
        /* TEMEL CSS DEĞİŞKENLERİ */
        /* ------------------------------------------------------------------- */

        /* Dark Mode Tanımı */

        /* ------------------------------------------------------------------- */
        /* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
        /* ------------------------------------------------------------------- */
        h1, h2, h5, h6 {
            color: var(--text-dark) !important;
        }
        .text-primary-custom {
             color: var(--primary-color) !important;
        }

        /* Vurgu İkon Stilleri (Sadece Primary Color) */
        .icon-vurgu {
            color: var(--primary-color);
            font-size: 3rem;
            display: inline-block;
            transition: all 0.3s;
        }
        .icon-vurgu-hero {
            color: var(--primary-color);
            font-size: 5rem;
            display: block;
            margin-bottom: 1rem;
        }

        /* CTA Düğmesi Stilleri */
        .btn-primary-custom {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white; 
            transition: all 0.25s ease-in-out;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .btn-primary-custom:hover {
            transform: scale(1.02);
            box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color); 
            opacity: 1; 
            filter: brightness(1.1);
        }

        /* Card ve Bölüm Stilleri */
        .hero-section {
            background-color: var(--content-bg);
            box-shadow: 0 4px 20px var(--shadow-color);
            padding: 6rem 0; 
            border-radius: 15px;
        }
        .bi-focus-card {
            background-color: var(--content-bg);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 10px var(--shadow-color);
            transition: all 0.3s;
            border-top: 5px solid var(--primary-color); 
        }
        .bi-focus-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
        }
        .feature-card {
            background-color: var(--content-bg);
            border-radius: 8px;
            border-left: 4px solid var(--primary-color); 
            box-shadow: 0 4px 6px var(--shadow-color); 
            transition: all 0.3s;
        }
        .feature-card:hover {
            transform: translateY(-3px); 
        }
        
        /* Dark Mode Bileşen Uyumu */
        .dark-mode .hero-section, 
        .dark-mode .bi-focus-card,
        .dark-mode .feature-card {
            background-color: var(--content-bg) !important; 
            box-shadow: 0 4px 10px var(--shadow-color) !important; 
        }
        .dark-mode .bi-focus-card {
             border-top: 5px solid var(--primary-color) !important;
        }
        .dark-mode .feature-card {
             border-left: 4px solid var(--primary-color) !important;
        }
        .dark-mode .list-group-item {
             color: var(--text-dark) !important;
        }
        
        /* ------------------------------------------------------------------- */
        /* SERVİS ADIMLARI ÖZEL STİLİ */
        /* ------------------------------------------------------------------- */
        .support-step-card {
            position: relative;
            padding: 30px 20px 20px 20px;
            margin-top: 20px; 
            border-radius: 12px;
            background-color: var(--content-bg);
            box-shadow: 0 4px 10px var(--shadow-color);
            height: 100%;
            border-left: 4px solid var(--primary-color); 
        }
        .support-step-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px var(--shadow-color);
        }
        
        /* ------------------------------------------------------------------- */
        /* SABİT ÜST NAVIGASYON */
        /* ------------------------------------------------------------------- */
        #topNavbar {
            background-color: var(--content-bg) !important;
            box-shadow: 0 2px 10px var(--shadow-color) !important;
            padding-top: 15px;
            padding-bottom: 15px;
            z-index: 1050; 
        }
        #topNavbar a, #topNavbar button {
            color: var(--text-dark) !important;
            transition: color 0.3s;
        }
        .btn.p-0.me-2 {
            border-right: 1px solid var(--text-light); 
            padding-right: 1rem !important;
        }
        .container {
            padding-top: 80px; 
        }

/* ==== END swDev/desktop.css ==== */
/* ==== BEGIN swDev/mobile.css ==== */
/* TEMEL CSS DEĞİŞKENLERİ */
/* ------------------------------------------------------------------- */

/* Dark Mode Tanımı */

/* ------------------------------------------------------------------- */
/* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
/* ------------------------------------------------------------------- */
h1,
h2,
h5,
h6 {
  color: var(--text-dark) !important;
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* Vurgu İkon Stilleri (Sadece Primary Color) */
.icon-vurgu {
  color: var(--primary-color);
  font-size: 3rem;
  display: inline-block;
  transition: all 0.3s;
}
.icon-vurgu-hero {
  color: var(--primary-color);
  font-size: 5rem;
  display: block;
  margin-bottom: 1rem;
}

/* CTA Düğmesi Stilleri */
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary-custom:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color);
  opacity: 1;
  filter: brightness(1.1);
}

/* Card ve Bölüm Stilleri */
.hero-section {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 6rem 0;
  border-radius: 15px;
}
.bi-focus-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: all 0.3s;
  border-top: 5px solid var(--primary-color);
}
.bi-focus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.feature-card {
  background-color: var(--content-bg);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-3px);
}

/* Dark Mode Bileşen Uyumu */
.dark-mode .hero-section,
.dark-mode .bi-focus-card,
.dark-mode .feature-card {
  background-color: var(--content-bg) !important;
  box-shadow: 0 4px 10px var(--shadow-color) !important;
}
.dark-mode .bi-focus-card {
  border-top: 5px solid var(--primary-color) !important;
}
.dark-mode .feature-card {
  border-left: 4px solid var(--primary-color) !important;
}
.dark-mode .list-group-item {
  color: var(--text-dark) !important;
}

/* ------------------------------------------------------------------- */
/* SERVİS ADIMLARI ÖZEL STİLİ */
/* ------------------------------------------------------------------- */
.support-step-card {
  position: relative;
  padding: 30px 20px 20px 20px;
  margin-top: 20px;
  border-radius: 12px;
  background-color: var(--content-bg);
  box-shadow: 0 4px 10px var(--shadow-color);
  height: 100%;
  border-left: 4px solid var(--primary-color);
}
.support-step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px var(--shadow-color);
}

/* ------------------------------------------------------------------- */
/* SABİT ÜST NAVIGASYON */
/* ------------------------------------------------------------------- */
#topNavbar {
  background-color: var(--content-bg) !important;
  box-shadow: 0 2px 10px var(--shadow-color) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 1050;
}
#topNavbar a,
#topNavbar button {
  color: var(--text-dark) !important;
  transition: color 0.3s;
}
.btn.p-0.me-2 {
  border-right: 1px solid var(--text-light);
  padding-right: 1rem !important;
}
.container {
  padding-top: 80px;
}

/* ==== END swDev/mobile.css ==== */
/* ==== BEGIN swDev/service.css ==== */
/* ------------------------------------------------------------------- */
/* TEMEL CSS DEĞİŞKENLERİ */
/* ------------------------------------------------------------------- */

/* Dark Mode Tanımı */

/* ------------------------------------------------------------------- */
/* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
/* ------------------------------------------------------------------- */
h1,
h2,
h5,
h6 {
  color: var(--text-dark) !important;
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* Vurgu İkon Stilleri (Sadece Primary Color) */
.icon-vurgu {
  color: var(--primary-color);
  font-size: 3rem;
  display: inline-block;
  transition: all 0.3s;
}
.icon-vurgu-hero {
  color: var(--primary-color);
  font-size: 5rem;
  display: block;
  margin-bottom: 1rem;
}

/* CTA Düğmesi Stilleri */
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary-custom:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color);
  opacity: 1;
  filter: brightness(1.1);
}

/* Card ve Bölüm Stilleri */
.hero-section {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 6rem 0;
  border-radius: 15px;
}
.bi-focus-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: all 0.3s;
  border-top: 5px solid var(--primary-color);
}
.bi-focus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.feature-card {
  background-color: var(--content-bg);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-3px);
}

/* Dark Mode Bileşen Uyumu */
.dark-mode .hero-section,
.dark-mode .bi-focus-card,
.dark-mode .feature-card {
  background-color: var(--content-bg) !important;
  box-shadow: 0 4px 10px var(--shadow-color) !important;
}
.dark-mode .bi-focus-card {
  border-top: 5px solid var(--primary-color) !important;
}
.dark-mode .feature-card {
  border-left: 4px solid var(--primary-color) !important;
}
.dark-mode .list-group-item {
  color: var(--text-dark) !important;
}

/* ------------------------------------------------------------------- */
/* SERVİS ADIMLARI ÖZEL STİLİ */
/* ------------------------------------------------------------------- */
.support-step-card {
  position: relative;
  padding: 30px 20px 20px 20px;
  margin-top: 20px;
  border-radius: 12px;
  background-color: var(--content-bg);
  box-shadow: 0 4px 10px var(--shadow-color);
  height: 100%;
  border-left: 4px solid var(--primary-color);
}
.support-step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px var(--shadow-color);
}

/* ------------------------------------------------------------------- */
/* SABİT ÜST NAVIGASYON */
/* ------------------------------------------------------------------- */
#topNavbar {
  background-color: var(--content-bg) !important;
  box-shadow: 0 2px 10px var(--shadow-color) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 1050;
}
#topNavbar a,
#topNavbar button {
  color: var(--text-dark) !important;
  transition: color 0.3s;
}
.btn.p-0.me-2 {
  border-right: 1px solid var(--text-light);
  padding-right: 1rem !important;
}
.container {
  padding-top: 80px;
}

/* ==== END swDev/service.css ==== */
/* ==== BEGIN swDev/web.css ==== */
/* ------------------------------------------------------------------- */
/* TEMEL CSS DEĞİŞKENLERİ */
/* ------------------------------------------------------------------- */

/* Dark Mode Tanımı */

/* ------------------------------------------------------------------- */
/* SAYFA GENELİ VE BİLEŞEN STİLLERİ */
/* ------------------------------------------------------------------- */
h1,
h2,
h5,
h6 {
  color: var(--text-dark) !important;
}
.text-primary-custom {
  color: var(--primary-color) !important;
}

/* Vurgu İkon Stilleri (Sadece Primary Color) */
.icon-vurgu {
  color: var(--primary-color);
  font-size: 3rem;
  display: inline-block;
  transition: all 0.3s;
}
.icon-vurgu-hero {
  color: var(--primary-color);
  font-size: 5rem;
  display: block;
  margin-bottom: 1rem;
}

/* CTA Düğmesi Stilleri */
.btn-primary-custom {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary-custom:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px var(--primary-color), 0 0 5px var(--primary-color);
  opacity: 1;
  filter: brightness(1.1);
}

/* Card ve Bölüm Stilleri */
.hero-section {
  background-color: var(--content-bg);
  box-shadow: 0 4px 20px var(--shadow-color);
  padding: 6rem 0;
  border-radius: 15px;
}
.bi-focus-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: all 0.3s;
  border-top: 5px solid var(--primary-color);
}
.bi-focus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.feature-card {
  background-color: var(--content-bg);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-3px);
}

/* Dark Mode Bileşen Uyumu */
.dark-mode .hero-section,
.dark-mode .bi-focus-card,
.dark-mode .feature-card {
  background-color: var(--content-bg) !important;
  box-shadow: 0 4px 10px var(--shadow-color) !important;
}
.dark-mode .bi-focus-card {
  border-top: 5px solid var(--primary-color) !important;
}
.dark-mode .feature-card {
  border-left: 4px solid var(--primary-color) !important;
}
.dark-mode .list-group-item {
  color: var(--text-dark) !important;
}

/* ------------------------------------------------------------------- */
/* SERVİS ADIMLARI ÖZEL STİLİ */
/* ------------------------------------------------------------------- */
.support-step-card {
  position: relative;
  padding: 30px 20px 20px 20px;
  margin-top: 20px;
  border-radius: 12px;
  background-color: var(--content-bg);
  box-shadow: 0 4px 10px var(--shadow-color);
  height: 100%;
  border-left: 4px solid var(--primary-color);
}
.support-step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px var(--shadow-color);
}

/* ------------------------------------------------------------------- */
/* SABİT ÜST NAVIGASYON */
/* ------------------------------------------------------------------- */
#topNavbar {
  background-color: var(--content-bg) !important;
  box-shadow: 0 2px 10px var(--shadow-color) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 1050;
}
#topNavbar a,
#topNavbar button {
  color: var(--text-dark) !important;
  transition: color 0.3s;
}
.btn.p-0.me-2 {
  border-right: 1px solid var(--text-light);
  padding-right: 1rem !important;
}
.container {
  padding-top: 80px;
}

/* ==== END swDev/web.css ==== */
/* ==== BEGIN warehouse/warehouse.css ==== */
        /* ------------------------------------------------------------------- */
        /* TEMEL CSS DEĞİŞKENLERİ (Sizin Kayıtlı Paletinizden) */
        /* ------------------------------------------------------------------- */

        /* Dark Mode Tanımı */

        /* Sayfa Geneli Stilleri */
        h1, h2, h5, h6 {
            color: var(--text-dark);
        }
        i {
            color: var(--primary-color);
        }
        .btn-primary-custom {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white; 
        }
        .btn-primary-custom:hover {
            opacity: 0.9;
        }

        /* ------------------------------------------------------------------- */
        /* DARK MODE VE ANİMASYON GEÇİŞ KURALLARI */
        /* ------------------------------------------------------------------- */
        .dark-mode .hero-section, 
        .dark-mode .feature-card,
        .dark-mode .wms-focus-card {
            background-color: var(--content-bg) !important; 
            box-shadow: 0 4px 10px var(--shadow-color) !important; 
            border: none !important;
        }

        .dark-mode .feature-card {
            border-left: 5px solid var(--primary-color) !important;
        }
        
        .dark-mode .feature-card:hover {
            transform: translateY(-5px) !important;
            box-shadow: 0 10px 20px var(--shadow-color) !important;
        }

        .dark-mode h1, .dark-mode h2, .dark-mode h5, .dark-mode h6 {
            color: var(--text-dark) !important; 
        }

        /* WMS Odak Kartları (Basit ve Yalın) */
        .wms-focus-card {
            background-color: var(--content-bg);
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 4px 8px var(--shadow-color);
            transition: all 0.3s;
            border-top: 4px solid var(--primary-color);
        }
        .wms-focus-card:hover {
            transform: scale(1.03);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

        /* Dark Mode Switch Stili (Bootstrap 5 Switch) */
        .theme-switch {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            background-color: var(--content-bg);
            padding: 10px 15px;
            border-radius: 8px;
            box-shadow: 0 4px 10px var(--shadow-color);
            border: 1px solid var(--text-light);
        }
.blog-card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s;
    box-shadow: 0 4px 10px var(--shadow-color);
    height: 100%;
    background-color: var(--content-bg);
}
.blog-card:hover {
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.2);
    transform: translateY(-5px);
}

/* ==== END warehouse/warehouse.css ==== */
/* ==== BEGIN workflow/workflow.css ==== */
 

        /* Dark Mode Tanımı */

        /* Sayfa Geneli Stilleri */
        h1, h2, h5, h6 {
            color: var(--text-dark);
        }
        i {
            color: var(--primary-color);
        }
        .btn-primary-custom {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white; 
        }
        .btn-primary-custom:hover {
            opacity: 0.9;
        }

        /* ------------------------------------------------------------------- */
        /* DARK MODE VE ANİMASYON GEÇİŞ KURALLARI */
        /* ------------------------------------------------------------------- */
        .dark-mode .hero-section, 
        .dark-mode .feature-card,
        .dark-mode .workflow-step {
            background-color: var(--content-bg) !important; 
            box-shadow: 0 4px 10px var(--shadow-color) !important; 
            border: none !important;
        }

        .dark-mode .feature-card {
            border-left: 5px solid var(--primary-color) !important;
        }
        
        .dark-mode .feature-card:hover {
            transform: translateY(-5px) !important;
            box-shadow: 0 10px 20px var(--shadow-color) !important;
        }

        .dark-mode h1, .dark-mode h2, .dark-mode h5, .dark-mode h6 {
            color: var(--text-dark) !important; 
        }

        /* Yeni Akış Adımı Stili */
        .workflow-step {
            background-color: var(--content-bg);
            border-radius: 12px;
            box-shadow: 0 4px 10px var(--shadow-color);
            padding: 30px;
            transition: all 0.3s;
            position: relative;
        }
        .workflow-step:hover {
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
            transform: translateY(-3px);
        }
        
        /* Akış Çizgisi */
        .workflow-line {
            position: relative;
            height: 3px;
            background-color: var(--primary-color);
            margin: 0 10%;
            top: 50px; 
            z-index: 0;
        }
        .dark-mode .workflow-line {
             background-color: var(--primary-color);
        }

        /* Dark Mode Switch Stili (Bootstrap 5 Switch) */
        .theme-switch {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            background-color: var(--content-bg);
            padding: 10px 15px;
            border-radius: 8px;
            box-shadow: 0 4px 10px var(--shadow-color);
            border: 1px solid var(--text-light);
        }

/* ==== END workflow/workflow.css ==== */
/* END: Inlined imports from app.css (generated) */

/* Central app stylesheet imports */





























/* Theme variables and dark mode (canonical) */
:root {
  --primary-color: #3498db;
  --text-dark: #2c3e50;
  --text-light: #7f8c8d;
  --body-bg: #eff1f3;
  --content-bg: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.08);
  --toggle-icon-color: var(--text-dark);
}
body.dark-mode {
  --primary-color: #5dade2;
  --text-dark: #ecf0f1;
  --text-light: #bdc3c7;
  --body-bg: #2c3e50;
  --content-bg: #212b36;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --toggle-icon-color: var(--text-light);
}

/* Base elements and helpers */
body { background-color: var(--body-bg); color: var(--text-dark); transition: background-color .3s ease, color .3s ease; }
.custom-container { max-width: 1500px; margin: 0 auto; padding: 0 10px; }
.hero-section { padding: 100px 0; }
.service-card { background: var(--content-bg); border-radius: 12px; box-shadow: 0 4px 12px var(--shadow-color); padding: 30px 20px; transition: transform .3s, box-shadow .3s, background-color .3s; height: 100%; color: var(--text-dark); border: 1px solid transparent; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); border: 1px solid var(--primary-color); }
body.dark-mode .service-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.service-icon { font-size: 2rem; color: var(--primary-color); margin-bottom: 15px; }
.btn-primary { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: var(--content-bg) !important; transition: all .3s ease; }
.btn-outline-primary { color: var(--primary-color) !important; border-color: var(--primary-color) !important; transition: all .3s ease; }
.btn-outline-primary:hover { background-color: var(--primary-color) !important; color: var(--content-bg) !important; }
.bg-content { background-color: var(--content-bg) !important; }
.text-dark-mode-aware { color: var(--text-dark) !important; }
.text-muted { color: var(--text-light) !important; }
#page-dark-mode-toggle { color: var(--toggle-icon-color); transition: color .3s; cursor: pointer; position: fixed; top: 20px; right: 20px; font-size: 1.5rem; z-index: 1030; background-color: var(--content-bg); padding: 10px; border-radius: 50%; box-shadow: 0 4px 8px var(--shadow-color); }
#page-dark-mode-toggle:hover { color: var(--primary-color); }

/* Layout: keep footer at bottom and account for fixed navbar */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main[role="main"] { flex: 1 0 auto; }
footer { margin-top: auto; }

/* Navbar & Mega Menu (inlined from navbar.css) */
.custom-navbar { background-color: var(--content-bg) !important; border-bottom: 1px solid rgba(0,0,0,0.05); }
.custom-navbar .navbar-brand { color: var(--primary-color) !important; transition: color 0.3s ease; }
.custom-navbar .nav-link { color: var(--nav-link-color, var(--text-dark)) !important; font-weight: 500; padding: 1rem 0.75rem; border-bottom: 3px solid transparent; transition: color 0.3s ease, border-color 0.3s ease; }
.custom-navbar .nav-link:hover,
.custom-navbar .nav-link.active,
.custom-navbar .nav-link[aria-expanded="true"] { color: var(--nav-link-hover-color, var(--primary-color)) !important; border-bottom-color: var(--primary-color); }
#dark-mode-toggle { color: var(--text-dark); transition: color 0.3s ease; }
.form-switch .form-check-input { border-color: var(--text-light); }
.form-switch .form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); }
.form-check-label { color: var(--text-dark); }

/* Mega menu */
.mega-menu { background-color: var(--dropdown-bg, var(--content-bg)); border-top: 3px solid var(--primary-color); padding: 20px 30px; left: 0 !important; right: 0 !important; transform: none !important; white-space: nowrap; }
.mega-menu .dropdown-header { color: var(--primary-color); font-weight: 700; padding: 0; margin-bottom: 15px; text-transform: uppercase; font-size: 0.9rem; }
.mega-menu .dropdown-header i { margin-right: 8px; font-size: 1.3em; }
.mega-menu .dropdown-item { color: var(--text-dark); font-weight: 500; padding: 7px 10px; margin-bottom: 3px; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease; white-space: nowrap; }
.mega-menu .dropdown-item:hover,
.mega-menu .dropdown-item:focus { background-color: var(--dropdown-item-hover-bg, #f5f5f5); color: var(--primary-color); }
.mega-menu .dropdown-item i { margin-right: 10px; color: var(--primary-color); font-size: 1.15em; }
.mega-menu .row { display: flex; flex-wrap: nowrap; }

/* Navbar toggler */
.custom-navbar .navbar-toggler { border-color: var(--primary-color); }
.custom-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%233498db' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
body.dark-mode .custom-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%235dade2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

/* Fixed navbar + page offset */
.custom-navbar{position:fixed;top:0;left:0;right:0;z-index:1040;}
body{padding-top:72px;}

/* Spacing for top-level menu */
@media (min-width: 992px) { .custom-navbar .navbar-nav { gap: 1.5rem; } .custom-navbar .nav-link { padding: 0.75rem 0.5rem; font-size: 1rem; } }
@media (min-width: 1200px) { .custom-navbar .navbar-nav { gap: 2rem; } }
@media (max-width: 991.98px) {
  .custom-navbar .nav-link { padding: 10px 0; border-bottom: none !important; }
  .custom-navbar .nav-link:hover,
  .custom-navbar .nav-link.active,
  .custom-navbar .nav-link[aria-expanded="true"] { color: var(--nav-link-hover-color, var(--primary-color)) !important; }
  .mega-menu { position: relative !important; transform: none !important; left: 0 !important; min-width: 100% !important; border-top: none; border-bottom: 3px solid var(--primary-color); margin-top: 10px; white-space: normal; }
  .mega-menu .row { flex-direction: column; gap: 1.5rem !important; }
  .mega-menu .col-auto { width: 100%; margin-bottom: 10px; }
}



/* BEGIN: Appended standalone css files (generated) */
/* ==== BEGIN VibeWeb.UI\wwwroot\css\_Carousel.css ==== */

/* ======================================= */
/* 1. RENK PALETİ VE TEMEL STİLLER (MAT & GÖZ YORMAYAN) */
/* ======================================= */
/* Karanlık Mod (Dark Mode) */
/* --- GENEL STİL UYGULAMASI VE GEÇİŞLER --- */
body, .hero-section, .service-card, .bg-white, .btn-primary, .btn-secondary, .form-control {
    transition: color var(--transition-speed), background-color var(--transition-speed), box-shadow var(--transition-speed), border-color var(--transition-speed);
}
.text-primary { color: var(--primary-color) !important; }
.text-muted { color: var(--text-light) !important; }

/* KARTLAR VE ARKA PLANLAR */
/* bg-white ve hero-section, content-bg'yi kullandığı için, Dark Mode'da #2c3e50 olacaktır. */
.hero-section, .service-card { background-color: var(--content-bg) !important; }

/* Karusel, Contact ve diğer beyaz alanlar content-bg'ye bağlı */
.bg-white, #referanslar, .contact-section, #referans-carousel-wrapper { 
    background-color: var(--content-bg) !important;
}

/* Form alanlarının rengini ayarlama */
.form-control {
    background-color: var(--body-bg);
    color: var(--text-dark);
    border-color: var(--text-light) !important;
}
.dark-mode .form-control {
    background-color: var(--body-bg);
    border-color: var(--text-light) !important;
}

.service-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-color);
    padding: 30px 20px; 
    height: 100%;
    color: var(--text-dark);
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px var(--shadow-color);
}
.service-icon, .service-card img { color: var(--primary-color); margin-bottom: 15px; }

/* BUTON VURGUSU */
.btn-primary { 
    background-color: var(--primary-color); 
    border-color: var(--primary-color);
}
.btn-primary:hover {
    background-color: var(--text-dark); 
    border-color: var(--text-dark);
}

.custom-container { max-width: 1500px; margin-left:auto; margin-right:auto; padding-left:10px; padding-right:10px; }




/* ==== END VibeWeb.UI\wwwroot\css\_Carousel.css ==== */
/* ==== BEGIN VibeWeb.UI\wwwroot\css\site.css ==== */
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ==== END VibeWeb.UI\wwwroot\css\site.css ==== */
/* ==== BEGIN VibeWeb.UI\wwwroot\css\core\core.css ==== */
    /* ------------------------------------------------------------------- */
    /* DARK MODE DESTEK TANIMLARI (BAŞLANGIÇ) - Canvas'tan Alınmıştır */
    /* ------------------------------------------------------------------- */
    
    /* Varsayılan: LIGHT MODE */
/* DARK MODE AKTİF: body'de .dark-mode sınıfı olduğunda çalışır */
/* Genel Sayfa Stilleri */
/* Özel Container */
    .custom-container { 
        max-width: 1500px; 
        margin: auto; 
        padding: 0 10px; 
    }

    /* Hero Section */
    .hero-section { 
        padding: 100px 0; 
    }

    /* Card Stilleri (Service Card) */
    .service-card { 
        background: var(--content-bg); /* Dark Mode uyumlu arka plan */
        border-radius: 12px; 
        box-shadow: 0 4px 12px var(--shadow-color); /* Dark Mode uyumlu gölge */
        padding: 30px 20px; 
        transition: transform .3s, box-shadow .3s, background-color .3s; 
        height: 100%; 
        color: var(--text-dark); /* Kart içindeki metin rengi */
        border: 1px solid transparent;
    }

    .service-card:hover { 
        transform: translateY(-5px); 
        box-shadow: 0 8px 24px rgba(0,0,0,0.15); 
        border: 1px solid var(--primary-color);
    }
    .dark-mode .service-card:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,0.5); 
    }

    /* İkon Stilleri */
    .service-icon { 
        font-size: 2rem; 
        color: var(--primary-color); /* Vurgu rengi */
        margin-bottom: 15px; 
    }

    /* Buton Stilleri */
    .btn-primary {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: var(--content-bg) !important;
        transition: all 0.3s ease;
    }
    .btn-outline-primary {
        color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        transition: all 0.3s ease;
    }
    .btn-outline-primary:hover {
        background-color: var(--primary-color) !important;
        color: var(--content-bg) !important;
    }

    /* Arka Plan Stilleri (Özellikle .bg-white yerine kullanılacak) */
    .bg-content {
        background-color: var(--content-bg) !important;
    }

    /* Metin Renkleri (Tüm sayfa için) */
    .text-dark-mode-aware {
        color: var(--text-dark) !important;
    }
    .text-text-light {
        color: var(--text-light) !important;
    }
    
    /* Bootstrap'in text-muted sınıfını temaya uyumlu hale getir */
    .text-muted {
        color: var(--text-light) !important;
    }
    
    /* Toggle Butonu Stili */
    #page-dark-mode-toggle {
        color: var(--toggle-icon-color);
        transition: color 0.3s;
        cursor: pointer;
        position: fixed;
        top: 20px;
        right: 20px;
        font-size: 1.5rem;
        z-index: 1030;
        background-color: var(--content-bg);
        padding: 10px;
        border-radius: 50%;
        box-shadow: 0 4px 8px var(--shadow-color);
    }
    #page-dark-mode-toggle:hover {
        color: var(--primary-color);
    }


/* ==== END VibeWeb.UI\wwwroot\css\core\core.css ==== */
/* ==== BEGIN VibeWeb.UI\wwwroot\css\core\corex.css ==== */
:root {
  --primary-color: #3498db; 
  --text-dark: #2c3e50; 
  --text-light: #7f8c8d;
  --body-bg: #eff1f3; /* 1. Ton: Açık Mat Gri-Mavi (Ana Arka Plan) */
  --content-bg: #ffffff; /* 2. Ton: Beyaz (Alternatif Bölüm/Kart Arka Planı) */
  --shadow-color: rgba(0, 0, 0, 0.08); 
  --transition-speed: 0.5s;
}

.dark-mode {
  --primary-color: #5dade2; 
  --text-dark: #ecf0f1; 
  --text-light: #bdc3c7; 
  
  --body-bg: #2c3e50; /* 1. Ton: Koyu Mavi-Gri (Ana Arka Plan) */
  --content-bg: #212b36; /* 2. Ton: DAHA KOYU ARKA PLAN (Alternatif Bölüm/Kart Arka Planı) */
  
  --shadow-color: rgba(0, 0, 0, 0.3);
}

body, .hero-section, .service-card, .bg-white, .btn-primary, .btn-secondary, .form-control, .form-label, hr {
    transition: color var(--transition-speed), background-color var(--transition-speed), box-shadow var(--transition-speed), border-color var(--transition-speed);
}
body { background-color: var(--body-bg); color: var(--text-dark); }
.text-primary { color: var(--primary-color) !important; }
.text-muted { color: var(--text-light) !important; }

.hero-section, .service-card, .bg-white, #referanslar, .contact-section, #referans-carousel-wrapper { 
    background-color: var(--content-bg) !important;
}


.bg-section-alt {
    background-color: var(--content-bg) !important;
}

.form-control {
    background-color: var(--body-bg); /* Light Mode: Açık Gri, Dark Mode: Koyu Mavi-Gri (#2c3e50) */
    color: var(--text-dark);
    border-color: var(--text-light) !important;
}

.hero-section {
    background-color: var(--body-bg) !important;
}
.contact-section {
    background-color: var(--body-bg) !important;
}


hr {
    border-top: 1px solid var(--text-light) !important;
    border-color: var(--text-light) !important; 
    opacity: 0.5; 
}

.service-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-color);
    padding: 30px 20px; 
    height: 100%;
    color: var(--text-dark);
    /* Kartların arka planı content-bg'dir. */
    background-color: var(--content-bg) !important;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px var(--shadow-color);
}
.service-icon, .service-card img { color: var(--primary-color); margin-bottom: 15px; }

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

.custom-container { max-width: 1500px; margin-left:auto; margin-right:auto; padding-left:10px; padding-right:10px; }
/* ==== END VibeWeb.UI\wwwroot\css\core\corex.css ==== */
/* END: Appended standalone css files (generated) */