.hero-section {
    padding: 60px 0;
    background-color: #f8f9fa;
}
.hero-section .display-5 { font-weight: 300; color: #495057; }
.hero-section .display-4 { font-weight: 700; }
.hero-section .lead { color: #6c757d; margin-top: 15px; }
.hero-section .btn-group { margin-top: 30px; }
.hero-section .btn-icon { display: inline-flex; align-items: center; }
.hero-section .btn-icon i { margin-right: 8px; }

.feature-box {
    display: flex; align-items: center; gap: 20px;
    padding: 25px 20px; background-color: #ffffff;
    border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease; text-decoration: none; color: #212529;
}
.feature-box:hover {
    transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    color: var(--bs-primary);
}
.feature-box .icon { font-size: 2.5rem; color: var(--bs-primary); flex-shrink: 0; }
.feature-box h6 { font-weight: 600; margin-bottom: 5px; }
.feature-box p { font-size: 0.9rem; color: #6c757d; margin-bottom: 0; line-height: 1.4; }
#urunler-bolumu { padding: 80px 0; }

/* =================================================================== */
/* ========== SUNUCU ÖZELLİKLERİ BÖLÜMÜ STİLLERİ ========== */
/* =================================================================== */
.server-features-section {
    padding: 80px 0;
    background-color: #ffffff; /* Temiz bir beyaz arka plan */
    border-top: 1px solid var(--bs-border-color);
}

.feature-card-v2 {
    background-color: #ffffff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 35px 30px;
    height: 100%;
    text-align: left; /* İçerik sola hizalı */
    transition: all 0.3s ease;
    display: flex; /* İkon ve metni yan yana getirmek için */
    align-items: flex-start; /* Dikeyde yukarı hizala */
    gap: 25px; /* İkon ve metin arası boşluk */
}

.feature-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.07);
    border-color: var(--datakale-orange, #f39200);
}

.feature-card-v2 .feature-icon {
    font-size: 36px;
    color: var(--datakale-orange, #f39200);
    flex-shrink: 0; /* İkonun küçülmesini engelle */
    margin-top: 5px;
}

.feature-card-v2 .feature-content h4 {
    font-size: 21px;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 8px;
}

.feature-card-v2 .feature-content p {
    font-size: 16px;
    font-weight: 300;
    color: var(--bs-secondary);
    line-height: 1.6;
    margin: 0;
}


/* =================================================================== */
/* ========== HERO BÖLÜMÜ SUNUCU TÜRÜ LİSTESİ STİLLERİ ========== */
/* =================================================================== */
.server-type-list {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Her bir öğe arasına boşluk verir */
}

.server-type-item {
    display: flex;
    align-items: flex-start; /* İkon ve metni dikeyde yukarı hizalar */
    gap: 20px;
    padding: 20px;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    transition: all 0.3s ease;
}

.server-type-item:hover {
    transform: translateX(5px);
    box-shadow: var(--bs-box-shadow-xm);
    border-color: var(--bs-theme);
}

.server-type-item i {
    font-size: 28px;
    color: var(--bs-theme);
    margin-top: 4px;
    flex-shrink: 0;
}

.server-type-item h6 {
    font-size: 19px;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0 0 5px 0;
}

.server-type-item p {
    font-size: 16px;
    font-weight: 300;
    color: var(--bs-secondary);
    line-height: 1.5;
    margin: 0;
}


/* Hero Bölümündeki Mavi Renkleri Yeşile Çevir */
.hero-section .text-primary {
    color: #66c21b !important;
}

.hero-section .btn-primary {
    background-color: #66c21b;
    border-color: #66c21b;
}

.hero-section .btn-primary:hover {
    background-color: #58a817;
    border-color: #66c21b;
}

.hero-section .btn-outline-primary {
    color: #66c21b;
    border-color: #66c21b;
}

.hero-section .btn-outline-primary:hover {
    background-color: #66c21b;
    border-color: #66c21b;
    color: #fff;
}


/* =================================================================== */
/* HERO BÖLÜMÜ - 'SUCCESS' RENKLERİNİ İSTENEN YEŞİL İLE EZME */
/* =================================================================== */

/* Ana Başlık Rengi */
.hero-section .text-success {
    color: #66c21b !important;
}

/* Ana Buton (Dolu Yeşil) */
.hero-section .btn-success {
    background-color: #66c21b;
    border-color: #66c21b;
}

/* Ana Buton Hover Rengi (Yeşilin biraz koyusu) */
.hero-section .btn-success:hover {
    background-color: #58a817;
    border-color: #58a817;
}

/* İkincil Buton (Çerçeveli Yeşil) */
.hero-section .btn-outline-success {
    color: #66c21b;
    border-color: #66c21b;
}

/* İkincil Buton Hover Rengi */
.hero-section .btn-outline-success:hover {
    background-color: #66c21b;
    border-color: #66c21b;
    color: #fff;
}


/* =================================================================== */
/* HERO BÖLÜMÜ - DÜNYA HARİTASI ARKA PLAN STİLLERİ (GÜNCELLENDİ) */
/* =================================================================== */

.hero-section {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
    background-image: url('/docs/img/world-map-bg.png');
    background-repeat: no-repeat;
    
    /* Resmi hem dikeyde hem yatayda ortalar */
    background-position: center center;
    
    /* Resmin taşmadan, tamamı görünecek şekilde boyutlanmasını sağlar */
    background-size: contain;
    
    /* Resmin zarif görünmesi için şeffaflık (değeri artırıp azaltabilirsiniz) */
    opacity: 100;
    
    z-index: 1;
    transition: all 0.4s ease;
}

/* =================================================================== */
/* MOBİL CİHAZLAR İÇİN DÜZENLEME (992px altı) */
/* =================================================================== */
@media (max-width: 991.98px) {
    .hero-section::before {
        /* Resmi yatayda ortalı, dikeyde en üste hizalar */
        background-position: center top;

        /* Resmin genişliğini %150 yaparak üst kısmının daha belirgin olmasını sağlar */
        background-size: 150% auto;

        /* Yazıların okunabilirliği için şeffaflığı biraz daha ayarlayalım */
        opacity: 100;
    }
}


/* =================================================================== */
/* ÖZELLİKLER BÖLÜMÜ - HAREKETLİ ARKA PLAN ANİMASYONU (GÜNCELLENDİ) */
/* =================================================================== */

/* 1. Ana bölümü animasyona hazırlıyoruz */
.server-features-section {
    position: relative;
    overflow: hidden;
}

/* 2. İçeriğin (başlıklar, kartlar vs.) animasyonun ÜSTÜNDE kalmasını garantiliyoruz */
.server-features-section > .container {
    position: relative;
    z-index: 2;
}

/* 3. Animasyon ikonlarının içinde bulunacağı katman */
.animation-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Konteynerin arkasında, ama bölümün içinde */
    pointer-events: none;
}

/* 4. Her bir hareketli ikonun temel stili */
.floating-icon {
    position: absolute;
    display: block;
    animation: floatAndSway infinite ease-in-out;
    bottom: -150px;
}

/* 5. (EN ÖNEMLİ DÜZELTME) İkonların fontunu zorla uyguluyoruz */
.floating-icon .bi {
    font-family: 'bootstrap-icons' !important;
    font-style: normal;
}

/* 6. Süzülme ve sallanma animasyonunun tanımı (Değişiklik yok) */
@keyframes floatAndSway {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translateX(-20px) rotate(180deg);
    }
    100% {
        transform: translateY(-120vh) translateX(20px) rotate(360deg);
        opacity: 0;
    }
}



/* =================================================================== */
/* YENİ BÖLÜMLER İÇİN ORTAK STİLLER */
/* =================================================================== */
.ai-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.ai-section.bg-light {
    background-color: #f8f9fa; /* Zeminleri ayırmak için hafif gri */
}
.ai-section .section-title-ai {
    font-size: 42px;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 15px;
    text-align: center;
}
.ai-section .section-subtitle-ai {
    font-size: 19px;
    font-weight: 300;
    color: var(--bs-secondary);
    max-width: 700px;
    margin: 0 auto 60px auto;
    text-align: center;
    line-height: 1.7;
}

/* =================================================================== */
/* BÖLÜM 1: SÜREÇ NASIL İLERLİYOR? STİLLERİ */
/* =================================================================== */
.process-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.process-step {
    text-align: center;
    width: 22%;
    position: relative;
    z-index: 2;
}
.step-icon-wrapper {
    width: 90px;
    height: 90px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--datakale-orange, #f39200), #a45f00);
    color: #fff;
    font-size: 36px;
    position: relative;
    box-shadow: 0 10px 20px rgba(243, 146, 0, 0.2);
}
.step-number {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background-color: #fff;
    color: var(--datakale-orange, #f39200);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.process-step h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.process-step p {
    font-size: 16px;
    color: var(--bs-secondary);
    line-height: 1.6;
}
.timeline-line {
    position: absolute;
    top: 45px;
    left: 10%;
    width: 80%;
    height: 2px;
    background: var(--bs-border-color);
    z-index: 1;
}

/* =================================================================== */
/* BÖLÜM 2: 7/24 ASİSTAN STİLLERİ */
/* =================================================================== */
.assistant-feature {
    display: flex;
    gap: 20px;
    text-align: left;
    margin-bottom: 30px;
}
.assistant-feature.text-end { text-align: right; flex-direction: row-reverse; }
.assistant-feature .icon {
    font-size: 28px;
    color: var(--datakale-orange, #f39200);
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
}
.assistant-feature h5 { font-size: 19px; font-weight: 600; margin-bottom: 5px; }
.assistant-feature p { font-size: 16px; color: var(--bs-secondary); line-height: 1.6; }
.central-image-wrapper {
    position: relative;
    text-align: center;
}
.central-image-wrapper img {
    max-width: 80%;
    border-radius: 50%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
.central-image-wrapper::before { /* Dekoratif halka */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding-bottom: 100%; /* 1:1 oranını korumak için */
    border: 2px solid rgba(115, 7, 243, 0.1); /* Morumsu halkanın rengi */
    border-radius: 50%;
    z-index: -1;
}

/* =================================================================== */
/* BÖLÜM 3: ÖZEL ARAYÜZLER STİLLERİ */
/* =================================================================== */
.section-badge {
    display: inline-block;
    padding: 8px 20px;
    background-color: rgba(243, 146, 0, 0.1);
    color: var(--datakale-orange, #f39200);
    font-weight: 500;
    border-radius: 50px;
    margin-bottom: 20px;
}
.interface-card {
    background-color: #fff;
    padding: 30px;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--bs-border-color);
    height: 100%;
    transition: all 0.3s ease;
}
.interface-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}
.interface-card h5 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.interface-card p { color: var(--bs-secondary); margin-bottom: 15px; }
.interface-card ul { list-style: none; padding: 0; }
.interface-card ul li { color: var(--bs-secondary); }
.interface-card ul li i { color: var(--bs-success); margin-right: 8px; }
.sub-feature-card {
    background-color: #fff;
    padding: 15px;
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--bs-border-color);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}
.sub-feature-card i { font-size: 24px; margin-bottom: 10px; display: block; color: var(--datakale-orange, #f39200); }

/* =================================================================== */
/* BÖLÜM 4: SSS (AKORDİYON) STİLLERİ */
/* =================================================================== */
.faq-accordion .accordion-item {
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
    margin-bottom: 15px;
    border-radius: var(--bs-border-radius-lg) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
.faq-accordion .accordion-button {
    font-size: 18px;
    font-weight: 600;
    color: var(--bs-body-color);
}
.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--datakale-orange, #f39200);
    background-color: #fff;
    box-shadow: none;
}
.faq-accordion .accordion-button:focus { box-shadow: none; }
.faq-accordion .accordion-body {
    font-size: 16px;
    color: var(--bs-secondary);
    line-height: 1.7;
}

/* =================================================================== */
/* MOBİL UYUMLULUK DÜZENLEMELERİ */
/* =================================================================== */
@media (max-width: 767.98px) {
    .process-timeline { flex-direction: column; gap: 40px; }
    .process-step { width: 100%; }
    .timeline-line { display: none; }
    .assistant-feature, .assistant-feature.text-end {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}


/* =================================================================== */
/* YENİ BÖLÜMLER İÇİN ANİMASYON GÖRÜNÜRLÜK DÜZELTMESİ */
/* =================================================================== */

.ai-section > .container {
    position: relative;
    z-index: 2;
}



/* =================================================================== */
/* ÖZEL YAZILIM SAYFASI - YENİ BÖLÜM STİLLERİ */
/* =================================================================== */

/* Avantajlar Bölümü Kart Stili */
.benefit-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 30px;
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    height: 100%;
    transition: all 0.3s ease;
}
.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: var(--datakale-orange, #f39200);
}
.benefit-card .icon {
    font-size: 38px;
    margin-bottom: 20px;
    color: var(--datakale-orange, #f39200);
}
.benefit-card h5 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.benefit-card p {
    font-size: 16px;
    color: var(--bs-secondary);
    line-height: 1.6;
}

/* Hizmetlerimiz Bölümü (Merkezi Resim) */
.services-image-wrapper img {
    max-width: 100%;
    border-radius: 16px;
}

/* =================================================================== */
/* ÖZEL YAZILIM - AVANTAJLAR BÖLÜMÜ KART STİLİ (V2) */
/* =================================================================== */
.advantage-card {
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 30px;
    height: 100%;
    transition: all 0.3s ease;
}

.advantage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: var(--datakale-orange, #f39200);
}

/* İkon ve Başlığı yan yana getiren kısım */
.advantage-header {
    display: flex;
    align-items: center;
    gap: 15px; /* İkon ve başlık arası boşluk */
    margin-bottom: 15px;
}

.advantage-header .icon {
    font-size: 28px;
    color: var(--datakale-orange, #f39200);
    flex-shrink: 0;
}

.advantage-header h5 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0; /* Flex gap kullandığımız için ekstra boşluğa gerek yok */
}

.advantage-card p {
    font-size: 16px;
    color: var(--bs-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}


/* =================================================================== */
/* ÖZEL YAZILIM - GENEL ÖZELLİKLER BÖLÜMÜ STİLLERİ */
/* =================================================================== */
.general-features-section {
    padding: 100px 0;
}

.feature-pill {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 25px;
    border: 1px solid var(--bs-border-color);
    border-radius: 50px; /* Yuvarlak hatlı (pill) görünüm için */
    height: 100%;
    transition: all 0.3s ease;
}

.feature-pill:hover {
    border-color: var(--datakale-orange, #f39200);
    box-shadow: 0 10px 25px rgba(0,0,0,0.07);
    transform: translateY(-5px);
}

.feature-pill .icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    background-color: var(--datakale-orange, #f39200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
}

.feature-pill .text-content h5 {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--bs-body-color);
}

.feature-pill .text-content p {
    font-size: 15px;
    color: var(--bs-secondary);
    line-height: 1.5;
    margin-bottom: 0;
}


/* =================================================================== */
/* EKOSİSTEM SAYFASI - YENİ BÖLÜM STİLLERİ */
/* =================================================================== */

/* Ekosistem Hero Bölümü */
.hero-ecosystem-page {
    padding: 100px 0;
    background-color: #f8f9fa;
    position: relative;
    overflow: hidden;
}

/* =================================================================== */
/* EKOSİSTEM SAYFASI - PUZZLE KARTLARI (NİHAİ DÜZELTİLMİŞ VERSİYON) */
/* =================================================================== */

.puzzle-card-wrapper {
    padding-top: 5px;
    padding-bottom: 20px;
}

.puzzle-card {
    /* DEĞİŞİKLİK: Ana taşıyıcının arka planı şeffaf yapıldı. */
    background-color: transparent; 
    height: 100%;
    position: relative; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: visible;
}

/* Kart içeriği, beyaz rengin ve içeriğin asıl taşıyıcısıdır. */
.puzzle-card-content {
    padding: 35px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative; 
    z-index: 2; 
    background-color: #fff; /* Beyaz arka plan sadece burada! */
    border-radius: 12px; 
}

.puzzle-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    z-index: 10;
}

/* --- Puzzle Efektini Oluşturan Ana Kodlar --- */
.puzzle-card::before, .puzzle-card::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; 
    height: 44px;
    border-radius: 50%;
    z-index: 1; 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Çıkıntı (Sağ taraf) */
.puzzle-card.first::after, 
.puzzle-card.middle::after {
    right: -22px; 
    background-color: #fff; /* Kartın renginde olmalı, bu doğru. */
    box-shadow: 5px 0px 15px rgba(0, 0, 0, 0.07);
}

/* Girinti (Sol taraf) */
.puzzle-card.middle::before,
.puzzle-card.last::before {
    left: -22px;
    /* Bu renk, bölümün (#temel-taslar) arka plan rengiyle aynı olmalı. */
    background-color: #f8f9fa; 
    box-shadow: inset -6px 0px 12px rgba(0, 0, 0, 0.06);
}

/* --- Hover anında Puzzle Parçası Animasyonu --- */
.puzzle-card.first:hover + .col-lg-4 .puzzle-card.middle::before {
    transform: translateY(-50%) scale(1.1);
    box-shadow: inset -8px 0px 15px rgba(0, 0, 0, 0.1);
}
.puzzle-card.middle:hover::after {
    transform: translateY(-50%) scale(1.1);
}
.puzzle-card.middle:hover + .col-lg-4 .puzzle-card.last::before {
    transform: translateY(-50%) scale(1.1);
    box-shadow: inset -8px 0px 15px rgba(0, 0, 0, 0.1);
}

/* --- Kart İçi Stiller (Değişiklik yok) --- */
.puzzle-card .icon {
    font-size: 36px;
    color: var(--bs-body-color);
    margin-bottom: 20px;
    transition: color 0.3s ease;
}
.puzzle-card:hover .icon {
    color: var(--datakale-orange, #f39200);
}
.puzzle-card h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
}
.puzzle-card p {
    font-size: 16px;
    color: var(--bs-secondary);
    line-height: 1.6;
    flex-grow: 1; 
}
.puzzle-card .btn-explore {
    margin-top: 20px;
    background-color: transparent;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.puzzle-card:hover .btn-explore {
    background-color: var(--datakale-orange, #f39200);
    border-color: var(--datakale-orange, #f39200);
    color: #fff;
}
.puzzle-card .btn-explore i {
    color: var(--bs-body-color);
    transition: all 0.3s ease;
}
.puzzle-card:hover .btn-explore i {
    color: #fff;
    transform: translateX(4px);
}

/* Mobil cihazlarda puzzle efektini gizle */
@media (max-width: 991.98px) {
    .puzzle-card::before, .puzzle-card::after {
        display: none;
    }
}

/* Son CTA Bölümü */
.final-cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--bs-theme), var(--bs-body-color));
    color: #fff;
    border-radius: 20px;
}
.final-cta-section h2 {
    font-size: 38px;
    font-weight: 600;
}
.final-cta-section p {
    font-size: 18px;
    opacity: 0.8;
}
.final-cta-section .btn-light {
    font-weight: 600;
    padding: 14px 40px;
    border-radius: 50px;
}


        /* Sadece bu sayfaya özel, kayan yazı animasyonu için CSS */
        .scrolling-ticker-wrapper {
            background-color: var(--bs-danger);
            color: #fff;
            padding: 15px 0;
            overflow: hidden;
            white-space: nowrap;
        }
        .scrolling-ticker {
            display: inline-block;
            animation: ticker-scroll 30s linear infinite;
        }
        .scrolling-ticker span {
            font-size: 1.1rem;
            font-weight: 500;
            margin-right: 50px;
        }
        .scrolling-ticker span i {
            margin-right: 10px;
            opacity: 0.8;
        }
        @keyframes ticker-scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .module-card {
            border: 1px solid var(--bs-border-color);
            border-radius: var(--bs-border-radius-lg);
            padding: 30px;
            height: 100%;
            background-color: #fff;
            transition: all 0.3s ease;
        }
        .module-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.08);
            border-color: var(--datakale-orange, #f39200);
        }
        .module-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        .module-header .icon { font-size: 3rem; color: var(--datakale-orange, #f39200); }
        .module-card h4 { font-size: 1.4rem; font-weight: 600; }
        .module-card p { color: var(--bs-secondary); }

/* =================================================================== */
/* EKOSİSTEM HERO BÖLÜMÜ - 'SUCCESS' RENKLERİNİ İSTENEN YEŞİL İLE EZME */
/* =================================================================== */

/* Ana Başlık Rengi */
.hero-ecosystem-page .text-success {
    color: #66c21b !important;
}

/* Ana Buton (Dolu Yeşil) */
.hero-ecosystem-page .btn-success {
    background-color: #66c21b;
    border-color: #66c21b;
}

/* Ana Buton Hover Rengi (Yeşilin biraz koyusu) */
.hero-ecosystem-page .btn-success:hover {
    background-color: #58a817;
    border-color: #58a817;
}

/* İkincil Buton (Çerçeveli Yeşil) */
.hero-ecosystem-page .btn-outline-success {
    color: #66c21b;
    border-color: #66c21b;
}

/* İkincil Buton Hover Rengi */
.hero-ecosystem-page .btn-outline-success:hover {
    background-color: #66c21b;
    border-color: #66c21b;
    color: #fff;
}

.hero-v6 {
  position: relative;
}

/* 2. SVG'yi içeren dalga katmanını sayfa akışından çıkarıp yukarıya sabitliyoruz. */
.hero-v6 .section-divider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0; /* SVG'nin etrafındaki ekstra boşlukları kaldırır */
}

.hero-v6 .section-divider .shape-fill {
  fill: #FFFFFF; /* Dalgayı beyaz yapar, arkaplanla bütünleşir */
}