:root {
    --renk1: #f3b81a;
    --renk2: #828282;
    --renk3: #dfa402;
    --nss-yellow: #f3b81a;
    --nss-dark: #212529;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

/* Top Bar */
.top-bar a {
    font-size: 0.85rem;
    opacity: 0.8;
    transition: opacity 0.3s;
}

    .top-bar a:hover {
        opacity: 1;
    }

/* Navbar Genel */
.navbar-nav .nav-link {
    font-size: 0.95rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.sarili-button {
    --bs-btn-bg: var(--renk1) !important;
    --bs-btn-border-color: var(--renk1) !important;
    --bs-btn-hover-bg: var(--renk3) !important;
    --bs-btn-hover-border-color: var(--renk3) !important;
    --bs-btn-active-bg: var(--renk3) !important;
    --bs-btn-active-border-color: var(--renk3) !important;
    --bs-btn-disabled-bg: var(--renk1) !important;
    --bs-btn-disabled-border-color: var(--renk1) !important;
}

.grili-button {
    background-color: #ffffff !important
}

    .grili-button:hover {
        background-color: var(--renk2) !important;
    }

.footer-a {
    color: #bdbdbd !important;
}

    .footer-a:hover {
        color: var(--renk1) !important;
    }

.ust-tel {
    color: #ffffff;
    text-decoration: auto;
    font-weight: 700;
}

/* Ana Konteyner */
.whatsapp-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Büyük ve Tam Ortalanmış Buton */
.whatsapp-main-button {
    background-color: #25d366;
    color: white;
    width: 70px;
    /* Boyut büyütüldü */
    height: 70px;
    border-radius: 50%;
    display: flex;
    /* Ortalama için flex */
    align-items: center;
    justify-content: center;
    font-size: 40px;
    /* İkon boyutu büyütüldü */
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

    .whatsapp-main-button:hover {
        transform: scale(1.1);
        background-color: #128c7e;
    }

/* Popup Penceresi */
.whatsapp-popup {
    display: none;
    /* Başlangıçta gizli */
    position: absolute;
    bottom: 85px;
    left: 0;
    width: 280px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

.popup-header {
    background: #075e54;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
}

.popup-body {
    padding: 20px;
    text-align: center;
}

.popup-btn {
    display: block;
    background: #25d366;
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    font-weight: bold;
}

.close-popup {
    cursor: pointer;
    font-size: 20px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- MEGA MENU CSS BAŞLANGICI --- */

/* Parent li elemanını statik yapıyoruz ki dropdown tüm genişliği alabilsin */
.navbar .megamenu-li {
    position: static;
}

/* Mega menu kutusu */
.navbar .megamenu {
    width: 100%;
    left: 0;
    right: 0;
    margin-top: 0;
    /* Navbardan kopuk durmaması için */
    border-radius: 0 0 10px 10px;
    /* Sadece alt köşeler yuvarlak */
    padding-bottom: 2rem;
}

/* Mega Menu İçindeki Tab Başlıkları */
.tabs-header .active-tab {
    border-bottom: 2px solid var(--renk1);
    /* Kırmızı çizgi */
    font-weight: 600;
    color: #000;
}

.tabs-header li {
    cursor: pointer;
    font-size: 0.9rem;
}

/* Link Listeleri */
.megamenu-list li {
    margin-bottom: 0.1rem;
}

.megamenu-list a {
    text-decoration: none;
    color: #444;
    font-size: 0.9rem;
    transition: color 0.2s;
}

    .megamenu-list a:hover {
        color: var(--renk1);
        /* Hover olunca kırmızı */
    }

/* Sağdaki Kartın Butonu */
.card .btn-light {
    color: #000;
}

    .card .btn-light:hover {
        background-color: #e2e2e2;
    }

/* --- MEGA MENU CSS BİTİŞİ --- */

/* Logo */
.navbar-brand {
    font-family: 'Arial Black', sans-serif;
    letter-spacing: -1px;
    font-size: 2rem;
}

/* Mevcut kodlarının altına ekle */

/* Mobil menü butonu (hamburger) etrafındaki border/focus çizgisini kaldırır, daha temiz görünür */
.navbar-toggler:focus {
    box-shadow: none;
}

/* Mobilde Fiyat Al butonu ile hamburger arasına biraz ince ayar */
@media (max-width: 991px) {
    .navbar-brand {
        font-size: 1.5rem;
        /* Mobilde logo biraz küçülebilir */
    }
}

/* --- LOGO AYARLARI --- */

/* Masaüstü Varsayılan Görünüm */
.logo-img {
    max-height: 25px;
    /* Masaüstünde ideal yükseklik */
    width: auto;
    /* Genişlik orantılı kalsın, logo sünmesin */
    display: block;
    transition: all 0.3s ease;
    /* Boyut değişiminde yumuşak geçiş */
}

/* Mobil ve Tablet Görünümü (991px altı) */
@media (max-width: 991px) {
    .logo-img {
        max-height: 35px;
        /* Mobilde logoyu küçültüyoruz */
        max-width: 140px;
        /* Çok uzun yatay bir logoysa taşmayı engelle */
    }

    /* Logo linkinin ekstra boşluklarını sıfırlayalım */
    .navbar-brand {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 10px;
        /* Butonlarla arasına biraz mesafe */
    }
}

/* --- GENEL FONT AYARLARI (KÜÇÜLTÜLMÜŞ) --- */

/* 1. En Üst Siyah Bant (Top Bar) */
.top-bar {
    font-size: 12px !important;
    /* Daha kompakt */
}

    .top-bar a {
        font-size: 12px !important;
    }

/* 2. Ana Menü Linkleri */
.navbar-nav .nav-link {
    font-size: 14px !important;
    /* 0.95rem'den 14px'e düştü */
    font-weight: 600;
    /* Font küçülünce okunabilirlik için kalınlığı koruduk */
}

/* 3. Mega Menü İçerikleri */
.tabs-header li {
    font-size: 13px !important;
    /* Sekme başlıkları */
}

.megamenu-list a {
    font-size: 13px !important;
    /* Link listeleri */
}

.megamenu .card-title {
    font-size: 1.1rem !important;
    /* Sağdaki kart başlığı */
}

.megamenu .card-text {
    font-size: 0.8rem !important;
    /* Sağdaki kart metni */
}

/* 4. Butonlar (Fiyat Al vb.) */
.navbar .btn {
    font-size: 13px !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* 5. Arama İkonu Butonu */
.navbar .btn-circle {
    width: 36px !important;
    /* 40px'den 36px'e düştü */
    height: 36px !important;
    font-size: 13px !important;
}

/* --- HERO / MANŞET BÖLÜMÜ --- */

.hero-section {
    margin-top:45px!important;
    position: relative;
    z-index: 10;
    /* Hero alanını diğer tüm bölümlerden daha üste çıkarır */
    background-color: transparent;
    /* Arka plan şeffaf olsun ki body rengi (beyaz) görünsün */
}

/* Tab Menü Stili */
.custom-tabs {
    border-bottom: 0;
}

    .custom-tabs .nav-link {
        color: #ffffff;
        /* Yazı rengi koyu gri */
        background: transparent;
        border: none;
        border-bottom: 3px solid transparent;
        /* Aktif değilken şeffaf çizgi */
        border-radius: 0;
        /* Köşeli yapı */
        font-weight: 500;
        font-size: 14px;
        /* Senin istediğin gibi biraz küçük */
        padding: 10px 20px 15px 0;
        /* Sağ tarafa boşluk, sola sıfır */
        margin-right: 20px;
        transition: all 0.3s;
    }

        /* Hover Efekti */
        .custom-tabs .nav-link:hover {
            color: var(--renk1);
        }

        /* Aktif Sekme Stili */
        .custom-tabs .nav-link.active {
            color: var(--renk1);
            /* Kırmızı yazı */
            background: transparent;
            border-bottom: 3px solid var(--renk1);
            /* Altına kırmızı çizgi */
            font-weight: 600;
        }

/* Başlık ve Metin Ayarları */
.hero-title {
    font-size: 2.5rem;
    /* Başlık boyutu */
    letter-spacing: -1px;
    line-height: 1.2;
}

.hero-desc {
    font-size: 1rem;
    max-width: 500px;
    /* Metin çok uzamasın diye sınır */
}

/* Görsel Ayarı */
.hero-img {
    max-height: 400px;
    /* Görsel çok devasa olmasın */
    width: auto;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .custom-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        /* Mobilde sekmeler yana kaydırılabilsin */
        white-space: nowrap;
        padding-bottom: 10px;
        /* Kaydırma çubuğu için yer */
    }

    .hero-title {
        font-size: 1.8rem;
        /* Mobilde başlığı küçült */
    }

    .hero-img {
        margin-top: 20px;
        max-height: 250px;
    }
}

/* --- HERO DEKORATİF BULUTLAR (İKON VERSİYONU) --- */

.cloud-icon {
    position: absolute;
    z-index: 20;
    line-height: 1;
    pointer-events: none;
}

/* Sol taraftaki bulut */
.cloud-left {
    font-size: 9rem;
    /* Büyüklük ayarı */
    color: #6c757d;
    /* Orta gri ton */
    opacity: 0.2;
    left: -50px;
    bottom: -100px;
}

/* Sağ taraftaki büyük bulut */
.cloud-right {
    right: -70px;
    font-size: 16rem;
    color: #495057;
    opacity: 0.4;
    bottom: 5px;
}

/* Mobil Ayarı */
@media (max-width: 768px) {
    .cloud-right {
        display: none;
    }
}

/* --- ÇÖZÜMLER BÖLÜMÜ STİLLERİ --- */

/* Gri Arka Plan Tonu (Bootstrap'ın bg-light'ını biraz daha açtık) */
.bg-light {
    background-color: #f8f9fa !important;
}

/* Filtre Butonları (Pills) Özelleştirme */
.filter-pills .nav-link.active {
    background-color: var(--renk1);
    /* Aktifken kırmızı */
    color: #fff;
}

.filter-pills .nav-link:not(.active) {
    background-color: #fff;
    /* Pasifken beyaz */
    color: #000;
    border-color: #dee2e6 !important;
    /* İnce gri kenarlık */
}

/* Kartların Genel Stili */
.solution-card {
    transition: all 0.3s ease;
    /* Yumuşak geçiş efekti */
}

    /* Kartların Üzerine Gelince (Hover) Efekti */
    .solution-card:hover {
        transform: translateY(-10px);
        /* 10px yukarı kalksın */
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
        /* Gölgesi artsın */
    }

    /* İkonların Boyutu */
    .solution-card i {
        font-size: 2.5rem;
    }

/* "Hepsini incele" Kartındaki Ok İşareti Efekti */
.view-all-card:hover i {
    transform: translateX(5px);
    /* Ok sağa kaysın */
    transition: transform 0.3s ease;
}

.solutions-section {
    position: relative;
    z-index: 1;
    /* Bu alan Hero'nun altında kalsın */
    /* Bulutların üzerine binebilmesi için üstten biraz boşluk bırakmıştık, onu koruyoruz */
}

/* --- BULUT SERVİSLERİ (DARK SECTION) STİLLERİ --- */

/* Ana Bölüm Arka Planı (Neredeyse Siyah) */
.cloud-section {
    background-color: #111111;
    /* Görseldeki zemin rengi */
}

    /* Sol Taraftaki Mavi Başlık */
    .cloud-section .text-primary {
        color: var(--renk1) !important;
        /* Bootstrap mavisinden biraz daha açık, görseldeki tona yakın */
    }

/* Koyu Ürün Kartları */
.dark-product-card {
    background-color: #27282c;
    /* Zemin renginden biraz daha açık gri */
    color: #fff;
    transition: transform 0.3s ease;
}

    .dark-product-card:hover {
        transform: translateY(-5px);
    }

    /* Kart İçindeki Yazıların Düzeni */
    .dark-product-card p {
        color: #a0a0a0 !important;
        /* Soluk gri metin */
        line-height: 1.6;
    }

/* Beyaz Kart İçin Özel Ayar */
.card.bg-white {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /* Hafif gölge */
    transition: transform 0.3s ease;
}

    .card.bg-white:hover {
        transform: translateY(-5px);
    }

/* Sol Taraftaki Özellik İkon Kutuları */
.icon-box i {
    opacity: 0.7;
    /* İkonlar çok parlamasın */
}

/* Buton Hover Efektleri */
.dark-product-card .btn-light:hover {
    background-color: #e2e2e2;
}

/* --- SABİT HEADER (STICKY HEADER) AYARLARI --- */

.fixed-header {
    position: fixed;
    /* Sayfaya çivile */
    top: 0;
    /* En tepeye yapıştır */
    left: 0;
    width: 100%;
    /* Tam genişlik */
    z-index: 1030;
    /* Diğer her şeyin (hero, bulutlar vb.) üzerinde dursun */
    background-color: #fff;
    /* Arkası şeffaf olmasın, içerik karışmasın */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Menü kayarken altına hafif gölge ekle */
}

/* Header sabitlenince akıştan çıkar ve sayfa içeriği yukarı kayar.
   Bunu engellemek için Body'ye üstten boşluk veriyoruz.
   Header'ın yüksekliği yaklaşık 100-110px civarında olduğu için bu değeri verdim.
*/
body {
    padding-top: 115px;
    overflow-x: hidden;
    /* Yatay taşmayı engelle (daha önce eklemiştik, dursun) */
}

/* Mobilde header daha kısa olabilir, boşluğu ayarlayalım */
@media (max-width: 991px) {
    body {
        padding-top: 90px;
        /* Mobilde daha az boşluk yeterli */
    }
}

/* --- ON-PREMISE (KIRMIZI) BÖLÜM STİLLERİ --- */

/* Bölüm Arka Planı */
.on-premise-section.bg-light {
    background-color: #f9f9f9 !important;
    /* Standart beyazdan bir tık daha gri, göz yormaz */
}

/* Kırmızı Ürün Kartları */
.red-product-card {
    background-color: var(--renk1);
    /* Logo Kırmızısı */
    color: #fff;
    transition: transform 0.3s ease;
}

    .red-product-card:hover {
        transform: translateY(-5px);
        /* Hover efekti */
    }

    /* Kart İçindeki Yazıların Opaklığı */
    .red-product-card .opacity-75 {
        opacity: 0.8 !important;
        /* Okunabilirliği koruyarak hafif şeffaflık */
    }

/* Kırmızı Kartın İçindeki Koyu Buton */
.btn-dark-red {
    background-color: #9e0e1e;
    /* Kart renginden daha koyu bordo */
    color: var(--renk1);
    border: none;
    transition: background-color 0.3s;
}

    .btn-dark-red:hover {
        background-color: var(--renk2);
        /* Hover olunca daha da koyulaşsın */
        color: #fff;
    }

/* 4. Kart (Siyah Kart) İçin */
/* Daha önce .dark-product-card yazmıştık, onu aynen kullanıyoruz. 
   Sadece bu bölümde arka plan açık olduğu için kartın siyahlığı güzel bir kontrast oluşturacak. */

/* --- SEKTÖRLER VE ANİMASYONLU BÖLÜM --- */

.sectors-section {
    position: relative;
    /* Telefonun taşma ihtimaline karşı dikey boşluğu geniş tutuyoruz */
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* --- Marquee (Kayan Yazı) Yapısı --- */
.marquee-container {
    padding: 60px 0;
    /* Telefonun arkasında kalacak alan */
    width: 100%;
}

.marquee-track {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    /* Alt satıra geçmeyi engelle */
    width: 100%;
}

.marquee-content {
    display: flex;
    gap: 20px;
    /* Kutular arası boşluk */
    /* Animasyon süresini buradan ayarlayabilirsin (örn: 30s) */
}

/* Etiketlerin (Pill) Tasarımı */
.sector-badge {
    display: inline-flex;
    align-items: center;
    background-color: #2c3e50;
    /* Koyu antrasit/lacivert ton */
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    /* Hap şekli */
    font-weight: 500;
    font-size: 1rem;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    /* İkon Rengi */
    .sector-badge i {
        color: #aab7c4;
    }

/* --- Animasyon Tanımları --- */

/* Sağa Doğru Kayan (Üst Sıra) */
.marquee-right .marquee-content {
    animation: scrollRight 40s linear infinite;
}

/* Sola Doğru Kayan (Alt Sıra) */
.marquee-left .marquee-content {
    animation: scrollLeft 40s linear infinite;
}

/* Keyframes: Sonsuz Döngü Mantığı */
@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
    /* İçeriğin yarısı kadar kaydır (kopyalar sayesinde döngü oluşur) */
}

@keyframes scrollRight {
    0% {
        transform: translateX(-50%);
    }
    /* Soldan başla */
    100% {
        transform: translateX(0);
    }
    /* Sağa git */
}

/* --- SEKTÖRLER BÖLÜMÜ (REVİZE EDİLMİŞ CSS) --- */

.sectors-section {
    position: relative;
    /* Telefon çok yüksek olduğu için üstten ve alttan boşluğu artırdık */
    padding-top: 8rem;
    padding-bottom: 8rem;
}

/* --- Kayan Kutu (Badge) Ayarları (BÜYÜTÜLDÜ) --- */
.sector-badge {
    display: inline-flex;
    align-items: center;
    background-color: #2c3e50;
    color: #fff;
    /* Font ve Padding büyütüldü */
    padding: 18px 35px;
    border-radius: 60px;
    font-weight: 600;
    font-size: 1.3rem;
    /* 1rem'den 1.3rem'e çıktı */
    white-space: nowrap;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

    .sector-badge i {
        font-size: 1.5rem;
        /* İkonlar da büyüdü */
        margin-right: 12px !important;
    }

/* --- Telefon Mockup (384x777 İçin Tam Uyum) --- */

.phone-mockup-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.phone-frame {
    /* İçerik (Ekran): 384px x 777px
       Çerçeve Kalınlığı: 13px (Sağ+Sol = 26px)
       
       Toplam Genişlik: 384 + 26 = 410px
       Toplam Yükseklik: 777 + 26 = 803px
    */
    width: 410px;
    height: 803px;
    position: relative;
    /* Geçiş efektini kaldırdık, sabit boyut */
}

.phone-notch {
    width: 160px;
    /* Telefon büyüyünce çentik de büyüdü */
    height: 32px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #111;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

/* Görsel Ayarı: Tam Oturma */
.phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 42px;
    /* Çerçeveye uyumlu */
    overflow: hidden;
    position: relative;
}

    .phone-screen img {
        width: 384px;
        /* Görselin orijinal genişliği */
        height: 777px;
        /* Görselin orijinal yüksekliği */
        object-fit: cover;
        /* veya 'contain', ama boyut birebir olduğu için tam oturur */
        display: block;
    }

/* Mobilde telefon zaten HTML'deki d-none ile gizlendiği için ekstra CSS'e gerek kalmadı */
html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    /* Yatay scroll'u zorla kapat */
}

/* 2. Sektörler Bölümünü Maskele */
.sectors-section {
    width: 100%;
    overflow: hidden;
    /* İçinden taşan animasyonları ve gölgeleri kırp */
    position: relative;
}

/* 3. Marquee (Kayan Yazı) Taşıyıcısını Sınırla */
.marquee-container {
    width: 100%;
    max-width: 100vw;
    /* Ekran genişliğini asla geçmesin */
}

/* 4. Telefonun gölgesi bazen taşma yapar, onu da garantiye alalım */
.phone-mockup-container {
    max-width: 100vw;
}

/* --- TELEFON KESİLME SORUNU ÇÖZÜMÜ --- */

.sectors-section {
    /* Eski değer (8rem) yetersiz kaldı, padding'i artırıyoruz */
    padding-top: 250px !important;
    /* Üstten daha fazla boşluk */
    padding-bottom: 250px !important;
    /* Alttan daha fazla boşluk */
    /* Alternatif olarak min-height vererek garantiye alalım */
    min-height: 1000px;
}

    /* Başlık telefonun arkasında kalmasın diye onu biraz daha yukarı itelim */
    .sectors-section h2 {
        margin-bottom: 3rem;
        /* Başlık ile telefon arasına mesafe */
        position: relative;
        z-index: 30;
        /* Telefonun (z-index:10) üstünde kalsın */
    }

/* Mobilde bu kadar boşluğa gerek yok, orayı da düzenleyelim */
@media (max-width: 991px) {
    .sectors-section {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
        min-height: auto;
    }
}

/* --- OK İŞARETLİ LOGO SLIDER STİLLERİ --- */

/* Logo Grupları */
.logo-group {
    padding: 20px 60px;
    /* Oklar için yanlardan boşluk bıraktık */
}

.ref-logo {
    height: 60px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

    .ref-logo:hover {
        filter: grayscale(0%);
        opacity: 1;
    }

/* Ok İşaretlerinin Özelleştirilmesi */
.custom-slider-arrow {
    width: 45px !important;
    height: 45px !important;
    background-color: #fff !important;
    /* Beyaz yuvarlak */
    border: 1px solid #dee2e6 !important;
    border-radius: 50% !important;
    color: var(--renk1) !important;
    /* Ok rengi kırmızı */
    font-size: 1.2rem !important;
    opacity: 1 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    .custom-slider-arrow:hover {
        background-color: var(--renk1) !important;
        color: #fff !important;
    }

/* Okların Konumu */
.carousel-control-prev.custom-slider-arrow {
    left: -20px !important;
    /* Container dışına taşması için */
}

.carousel-control-next.custom-slider-arrow {
    right: -20px !important;
}

/* Mobilde okları içeri alalım */
@media (max-width: 991px) {
    .custom-slider-arrow {
        width: 35px !important;
        height: 35px !important;
    }

    .carousel-control-prev.custom-slider-arrow {
        left: 0 !important;
    }

    .carousel-control-next.custom-slider-arrow {
        right: 0 !important;
    }

    .logo-group {
        flex-wrap: wrap;
        gap: 20px;
        padding: 20px;
    }
}

/* --- LOGO KUTUCUKLARI (LOGO BOX) --- */

.logo-group {
    padding: 30px 60px;
}

.logo-box {
    width: 200px;
    /* Sabit Genişlik */
    height: 120px;
    /* Sabit Yükseklik */
    background-color: #ffffff;
    border-radius: 15px;
    /* Yuvarlatılmış köşeler */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Çok hafif, modern bir gölge */
    border: 1px solid #f0f0f0;
    /* Belirginlik katmak için çok ince kenarlık */
    transition: all 0.3s ease;
}

    /* Kutuya hover yapınca efekt */
    .logo-box:hover {
        transform: translateY(-5px);
        /* Hafif yukarı kalkma */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        border-color: var(--renk1);
        /* Kurumsal kırmızıyla hafif çerçeve */
    }

/* Kutu içindeki logo ayarı */
.ref-logo {
    max-width: 100%;
    /* Kutu genişliğini aşmasın */
    max-height: 100%;
    /* Kutu yüksekliğini aşmasın */
    width: auto;
    height: auto;
    object-fit: contain;
    /* Logoyu sündürmeden kutuya sığdırır */
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.logo-box:hover .ref-logo {
    filter: grayscale(0%);
    /* Kutuya gelince logo renklensin */
    opacity: 1;
}

/* MOBİL UYUMLULUK */
@media (max-width: 768px) {
    .logo-box {
        width: 140px;
        /* Mobilde kutuları küçültelim */
        height: 90px;
        padding: 10px;
    }

    .logo-group {
        gap: 15px !important;
        /* Aradaki boşluğu azalt */
        padding: 20px;
    }
}

/* --- İSTATİSTİKLER (COUNTER) STİLLERİ --- */

.stats-section {
    border-top: 1px solid #f0f0f0;
}

/* İkon Kutusu - Tek Renk & Modern */
.stat-icon-wrap {
    width: 70px;
    height: 70px;
    background-color: #f8f9fa;
    /* Çok açık gri */
    color: var(--renk1);
    /* Kurumsal kırmızı ikon */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 20px;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.stat-item:hover .stat-icon-wrap {
    background-color: var(--renk1);
    color: #fff;
    transform: rotateY(180deg);
    /* Şık bir dönüş efekti */
}

/* Giriş Animasyonu Hazırlığı */
.stat-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease forwards;
    transition-delay: var(--delay);
}

    /* Sayfa oraya geldiğinde tetiklenecek class */
    .stat-item.animate {
        opacity: 1;
        transform: translateY(0);
    }

.stats-section h2 {
    color: #212529;
}

/* --- MİNİMAL MARKA KAYDIRICI STİLLERİ --- */

.minimal-brands-section {
    z-index: 5;
    /* Bulutların altında ama gri alanın üstünde dursun */
    position: relative;
}

.brand-marquee-minimal {
    width: 100%;
    display: flex;
    align-items: center;
}

.brand-track-minimal {
    display: flex;
    width: max-content;
    gap: 80px;
    /* Logolar arası mesafe */
    animation: scrollMiniBrands 150s linear infinite;
    /* Çok yavaş ve akıcı geçiş */
}

.mini-brand {
    height: 30px;
    /* Daha küçük ve minimal yükseklik */
    width: auto;
    object-fit: contain;
    /* Grimsi görünüm efekti */
    filter: grayscale(100%);
    opacity: 0.4;
    transition: all 0.3s ease;
}

    .mini-brand:hover {
        opacity: 0.8;
        /* Üzerine gelince biraz daha belirginleşsin */
    }

/* Yanlardaki yumuşak geçiş efektleri */
.fade-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 10;
    pointer-events: none;
}

    .fade-edge.left {
        left: 0;
        background: linear-gradient(to right, white, transparent);
    }

    .fade-edge.right {
        right: 0;
        background: linear-gradient(to left, white, transparent);
    }

/* Sonsuz Kayma Animasyonu */
@keyframes scrollMiniBrands {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Mobilde logolar biraz daha küçülsün ve boşluk daralsın */
@media (max-width: 768px) {
    .brand-track-minimal {
        gap: 40px;
    }

    .mini-brand {
        height: 22px;
    }
}

/* --- VİDEO EKRANI (ORATALANMIŞ) STİLLERİ --- */

.video-display-section {
    background-color: #ffffff;
}

/* Videonun içinde durduğu kutu */
.video-frame-wrapper {
    width: 100%;
    max-width: 1200px;
    /* Videonun maksimum genişliği (Kenarlardan boşluk bırakır) */
    margin: 0 auto;
    /* Ortalar */
    aspect-ratio: 16 / 9;
    /* Video oranını korur */
    background-color: #000;
    border: 1px solid #f0f0f0;
    /* Çok ince bir çerçeve hattı */
}

/* Video veya iframe'in kutuyu tam doldurması */
.video-background,
.video-background video,
.video-background iframe {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Butonun üzerine gelince efekt */
.video-display-section .btn-danger:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgb(54 54 54 / 20%) !important;
}

/* Mobilde boşlukları daraltalım */
@media (max-width: 768px) {
    .video-frame-wrapper {
        border-radius: 15px;
        /* Mobilde daha az kavis */
    }
}

/* --- BLOG SLIDER STİLLERİ --- */

/* Kart ve Resim Efektleri */
.blog-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .blog-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    }

.transition-scale {
    transition: transform 0.5s ease;
    height: 220px;
    object-fit: cover;
}

.blog-card:hover .transition-scale {
    transform: scale(1.1);
}

/* Kart Ok İşareti */
.blog-arrow {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: all 0.3s;
}

.blog-card:hover .blog-arrow {
    background-color: var(--renk1);
    color: #fff;
}

/* Nokta Göstergeleri (Indicators) */
.custom-indicators {
    bottom: -30px !important;
}

    .custom-indicators button {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background-color: #ccc !important;
        border: none !important;
        margin: 0 5px !important;
        opacity: 1 !important;
    }

        .custom-indicators button.active {
            background-color: var(--renk1) !important;
            /* Aktif nokta kırmızı */
            width: 25px !important;
            /* Aktif nokta daha uzun olabilir (Opsiyonel) */
            border-radius: 10px !important;
        }

/* Mobilde tek kart gösterimi için Row ayarı */
@media (max-width: 768px) {
    .blog-section h2 {
        font-size: 1.8rem;
    }
}

/* --- ÖZDEŞ BLOG KARTLARI --- */

.blog-card {
    height: 100%;
    /* Tüm kartlar aynı yükseklikte */
    border: none !important;
    border-radius: 20px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

    .blog-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }

/* Resim Alanı Sabitleme */
.blog-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    /* Resim alanı her zaman bu oranda kalır */
    overflow: hidden;
}

    .blog-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Resmi sündürmez, alanı doldurur */
        transition: transform 0.5s ease;
    }

.blog-card:hover .blog-img-wrap img {
    transform: scale(1.1);
}

/* Blog Etiketi */
.blog-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fff;
    padding: 5px 15px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* İçerik Alanı */
.blog-card .card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Alt kısımları kartın en altına iter */
}

.blog-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    color: #212529;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3.2em;
    /* Başlık alanını sabitler */
}

/* Kart Altı (Tarih ve Ok) */
.blog-footer {
    margin-top: auto;
    /* En alta yapıştırır */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-date {
    font-size: 0.85rem;
    color: #6c757d;
}

.blog-arrow {
    width: 35px;
    height: 35px;
    background-color: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: all 0.3s ease;
}

.blog-card:hover .blog-arrow {
    background-color: var(--renk1);
    color: #fff;
}

/* Blog alanına özel imleç */
#blogCarousel {
    cursor: grab;
    /* "El" işareti */
    user-select: none;
    /* Sürüklerken metinlerin seçilmesini engeller */
}

    #blogCarousel:active {
        cursor: grabbing;
        /* Tıklayınca "Yakalama" işareti */
    }

    /* Sürükleme sırasında resimlerin sürüklenmesini engelle (çakışma olmasın) */
    #blogCarousel img {
        pointer-events: none;
    }

/* --- SIK SORULAN SORULAR (FAQ) STİLLERİ --- */

.custom-faq .accordion-button {
    background-color: #fff !important;
    color: #1a2b4c;
    box-shadow: none !important;
    position: relative;
    font-size: 0.95rem;
}

    /* Standart oku gizleyip yeşil artı yapıyoruz */
    .custom-faq .accordion-button::after {
        content: '\2b';
        /* FontAwesome artı kodu yerine unicode */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        background-image: none !important;
        background-color: var(--renk1);
        /* Görseldeki yeşil */
        color: white;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: transform 0.3s ease;
    }

    /* Açıldığında ikon değişimi (isteğe bağlı) veya dönüşü */
    .custom-faq .accordion-button:not(.collapsed)::after {
        transform: rotate(45deg);
        /* Artıyı çarpıya döndürür */
        background-color: var(--renk2);
    }

/* Akordeon açılınca butonun alt köşelerinin yuvarlaklığını düzeltme */
.custom-faq .accordion-item.rounded-pill {
    border-radius: 50px !important;
}

.custom-faq .accordion-collapse {
    border-radius: 0 0 50px 50px;
    background: #fff;
}

/* Mobilde sütun ayarı */
@media (max-width: 991px) {
    .custom-faq .accordion-item {
        border-radius: 30px !important;
    }

    .custom-faq .accordion-button {
        font-size: 0.85rem;
    }
}

/* --- İLETİŞİM FORMU STİLLERİ --- */

/* Avatarlar */
.team-avatars {
    display: flex;
    margin-left: 10px;
}

.avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 3px solid #fff;
    margin-left: -10px;
    object-fit: cover;
}

/* Destek Rozeti */
.support-badge {
    display: inline-flex;
    align-items: center;
    background-color: #f0f4ff;
    color: #4361ee;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Form Giriş Alanları */
.custom-input,
.custom-input-group {
    padding: 15px 20px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    transition: all 0.3s ease;
}

    .custom-input:focus {
        border-color: #4361ee !important;
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1) !important;
    }

/* GÖNDER BUTONU VE OK EFEKTİ */
.btn-submit {
    background-color: #4361ee !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0;
    /* Başlangıçta boşluk yok */
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.arrow-icon {
    width: 0;
    opacity: 0;
    transition: all 0.3s ease;
    transform: translateX(-10px);
}

.btn-submit:hover {
    padding-right: 40px !important;
    /* Ok için alan aç */
    background-color: #3046c8 !important;
}

    .btn-submit:hover .arrow-icon {
        width: 20px;
        opacity: 1;
        transform: translateX(10px);
        /* Sağa doğru belirginleşen hareket */
    }

/* Mobilde Düzenleme */
@media (max-width: 991px) {
    .contact-form-section {
        text-align: center;
    }

    .team-avatars {
        justify-content: center;
    }

    .btn-submit {
        width: 100%;
        justify-content: center;
    }
}

/* --- FOOTER STİLLERİ --- */

.footer-section {
    background-color: #212529;
    border-top: 1px solid #f0f0f0;
}

/* Link Listeleri */
.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #495057;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

    .footer-links a:hover {
        color: var(--renk1);
        /* Kurumsal kırmızı */
    }

/* Sosyal Medya İkonları (Sağ Alt) */
.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: #f8f9fa;
    color: #333;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

    .social-icons a:hover {
        background-color: var(--renk1);
        color: #fff;
        transform: translateY(-3px);
    }

/* Yasal Linkler (En Alt) */
.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

    .footer-legal-links a {
        font-size: 0.75rem;
        color: #adb5bd;
        text-decoration: none;
    }

        .footer-legal-links a:hover {
            color: #6c757d;
        }

/* Telefon Numarası Rengi */
.text-danger {
    color: var(--renk1) !important;
}

/* Mobilde Hizalama */
@media (max-width: 767px) {
    .social-icons {
        margin-top: 20px;
        justify-content: center;
    }

    .footer-legal-links {
        justify-content: center;
        text-align: center;
    }
}

@media (min-width: 992px) {
    .footer-col-wrapper {
        padding-left: 20%;
        /* İçeriği biraz sağa iterek sütunu ortalar */
    }
}

.nss-testimonial-section {
    background-color: #f8f9fa;
    overflow: hidden;
}

.nss-slider-container {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.nss-slider-wrapper {
    overflow: hidden;
    width: 100%;
}

.nss-slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 20px;
    padding: 20px 0;
}

.nss-testimonial-card {
    min-width: calc(33.333% - 14px); /* 3 adet görünmesi için */
    background: transparent;
    border-radius: 12px;
    padding: 40px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0.5; /* Yan kartlar daha soluk */
}

    /* Ortadaki aktif kartın görseldeki beyaz kutu efekti */
    .nss-testimonial-card.nss-active {
        background: #ffffff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        opacity: 1;
    }

.nss-card-content p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    font-style: italic;
}

.nss-card-footer {
    display: flex;
    align-items: center;
    margin-top: 30px;
    gap: 15px;
}

    .nss-card-footer img {
        max-height: 35px;
        opacity: 0.7;
    }

    .nss-card-footer span {
        font-size: 0.9rem;
        color: #999;
        font-weight: 600;
    }

/* Ok Butonları */
.nss-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #eee;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nss-slider-btn:hover {
        background: #f0f0f0;
    }

.prev-btn {
    left: -25px;
}

.next-btn {
    right: -25px;
}

@media (max-width: 992px) {
    .nss-testimonial-card {
        min-width: calc(50% - 10px); /* Tablette 2 adet */
    }
}

@media (max-width: 576px) {
    .nss-testimonial-card {
        min-width: 100%; /* Mobilde 1 adet */
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        /* Menünün ekranın %80'inden fazlasını kaplamamasını sağlar */
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iOS cihazlarda pürüzsüz kaydırma için */
    }

    .megamenu {
        /* Mobilde megamenu içeriğinin düzgün akmasını sağlar */
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
    }
}

/* Karartma katmanı stili */
#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* %50 siyahlık */
    z-index: 1040; /* Navbar'ın hemen altında kalmalı */
    display: none; /* Başlangıçta gizli */
}

/* Navbar'ın overlay üzerinde kalması için z-index ayarı */
.fixed-header {
    z-index: 1050;
}

/* Standart Bootstrap çerçevesini ve efektini temizleyelim */
.custom-hamburger {
    border: none !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.hamburger-lines {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
}

.line {
    display: block;
    height: 3px;
    width: 100%;
    border-radius: 10px;
    background: #333; /* Çizgi rengi */
    transition: all 0.3s ease-in-out;
}
/* Sadece mega-erpler listesi içindeki linkler */
.mega-erpler li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
    margin-bottom: 3px;
}

    /* Hover durumu: Arka plan hafif gri, yazı rengi ana renk */
    .mega-erpler li a:hover:not([style*="color: #909090"]) {
        background-color: #f1f4f9;
    }

/* ERP başlık yazısı için stil (ilk satır) */
.mega-erpler li:first-child a {
    font-weight: 700;
    letter-spacing: 0.5px;
    padding-left: 15px;
    margin-bottom: 10px;
    pointer-events: none; /* Başlığın tıklanmasını engeller */
}

/* Logo (Görsel) Ayarları */
.mega-erpler .mini-brand {
    height: 22px;
    width: auto;
    max-width: 70px;
    object-fit: contain;
    /* Logoların sırıtmaması için hafif şeffaflık */
    opacity: 0.8;
    transition: transform 0.2s ease;
}

/* Hover'da logoyu canlandır */
.mega-erpler li a:hover .mini-brand {
    opacity: 1;
    transform: scale(1.05);
}

/* "Daha Fazlası" linki için özel dokunuş */
.mega-erpler li a[style*="text-decoration: underline"] {
    text-decoration: none !important; /* Çizgiyi kaldırıyoruz, daha modern durması için */
    color: var(--renk1) !important;
    font-size: 13px;
    margin-top: 8px;
    padding-top: 12px;
    border-radius: 0;
}

    .mega-erpler li a[style*="text-decoration: underline"] i {
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    .mega-erpler li a[style*="text-decoration: underline"]:hover i {
        transform: translateX(5px);
    }

.megamenu-list li a:hover .mini-brand {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}
/* Mevcut .mega-erpler class'ına bu özellikleri ekle veya güncelle */
.mega-erpler {
    position: relative; /* Çizginin konumlanması için şart */
    padding-right: 25px; /* Çizgi ile yazı arasındaki mesafe */
}

    /* Soluklaşan dikey çizgi efekti */
    .mega-erpler::after {
        content: "";
        position: absolute;
        right: 0;
        top: 10%; /* Üstten %10 boşluk bırakır */
        height: 80%; /* Çizginin toplam uzunluğu (kısalmış oldu) */
        width: 1px;
        /* Yukarıdan aşağıya: Şeffaf -> Gri -> Şeffaf geçişi */
        background: linear-gradient( to bottom, transparent, rgba(224, 224, 224, 1) 20%, rgba(224, 224, 224, 1) 80%, transparent );
    }

/* Mobil görünümde (alt alta binince) çizgiyi gizlemek için */
@media (max-width: 991px) {
    .mega-erpler::after {
        display: none;
    }
}

/* Ana Konteyner */
.nss-sectors-container {
    padding: 20px 0;
    font-family: 'Inter', sans-serif; /* Daha modern bir font için */
}

/* Liste Genel Ayarları */
.nss-sector-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    /* Liste Öğeleri */
    .nss-sector-list li {
        margin-bottom: 2px;
    }

        /* Link Tasarımı */
        .nss-sector-list li a {
            display: flex;
            align-items: center;
            text-decoration: none !important;
            color: #444;
            font-size: 14.5px;
            font-weight: 400;
            transition: all 0.3s ease;
            padding: 4px 8px;
            border-radius: 4px;
        }

    /* FontAwesome İkon Ayarları */
    .nss-sector-list .sector-icon {
        width: 28px; /* Sabit genişlik hizalamayı korur */
        font-size: 18px;
        margin-right: 12px;
        color: #909090; /* Başlangıçta gri */
        transition: all 0.3s ease;
        display: flex;
        justify-content: center;
    }

    /* Hover Durumu: Metin Kırmızıya Döner */
    .nss-sector-list li a:hover {
        color: var(--renk1);
        background-color: rgba(211, 47, 47, 0.03); /* Çok hafif kırmızı fon */
    }

        /* Hover Durumu: İkon Kırmızı Parlar */
        .nss-sector-list li a:hover .sector-icon {
            color: var(--renk1);
            transform: scale(1.1);
            filter: drop-shadow(0 0 4px rgba(211, 47, 47, 0.4));
        }

    /* Tüm Sektörler Linki */
    .nss-sector-list .nss-all-sectors {
        margin-top: 20px;
        padding-left: 8px;
    }

        .nss-sector-list .nss-all-sectors a {
            color: var(--renk1) !important;
            font-weight: 600;
            padding: 0;
        }


            .nss-sector-list .nss-all-sectors a i {
                font-size: 12px;
                margin-left: 6px;
                transition: transform 0.2s;
            }

            .nss-sector-list .nss-all-sectors a:hover i {
                transform: translateX(4px);
            }


            /* Sayfanın tam yüksekliğini kullanmasını sağla */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

/* İçerik alanına esneklik vererek footer'ı aşağı itmesini sağla */
.icerik-gelecek {
    flex: 1 0 auto;
}

/* Footer'ın kendi yüksekliğini korumasını sağla */
footer {
    flex-shrink: 0;
}
/* HAKKIMIZDA */
/* Başlık Animasyonu */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-header-anim {
    animation: fadeInUp 1.2s ease-out;
}

/* Hakkımızda Özel Stilleri */
.about-section {
    padding: 80px 0;
}

.section-title {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
    font-weight: 700;
}

    .section-title::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 60px;
        height: 3px;
        background-color: var(--renk1); /* Bootstrap Danger rengi */
    }

.stats-card {
    border: none;
    border-radius: 15px;
    transition: transform 0.3s ease;
    background: #f8f9fa;
}

    .stats-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

.about-img-wrapper {
    position: relative;
}

    .about-img-wrapper img {
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }

/* HAKKIMIZDA */

/*İŞ ORTAKLIĞI*/
/* İş Ortaklığına Özel Kartlar */
.partner-card {
    border: 1px solid #eee;
    padding: 40px 30px;
    border-radius: 20px;
    transition: all 0.4s ease;
    height: 100%;
}

    .partner-card:hover {
        border-color: var(--renk1);
        box-shadow: 0 15px 45px rgba(220, 53, 69, 0.1);
        transform: translateY(-5px);
    }

.partner-icon-circle {
    width: 70px;
    height: 70px;
    background: rgba(220, 53, 69, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: var(--renk1);
    font-size: 28px;
    transition: 0.3s;
}

.partner-card:hover .partner-icon-circle {
    background: var(--renk1);
    color: #fff;
}

/* Başvuru Alanı Stil */
.cta-box {
    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
    border-radius: 30px;
    padding: 60px;
    color: #fff;
}
/*İŞ ORTAKLIĞI*/

/*SÜRDÜRÜLEBİLİRLİK*/

/* Sürdürülebilirlik Sayfası Teması */
.sustainability-card {
    background: #fff;
    border: none;
    border-top: 4px solid var(--renk1); /* Vurgu rengi */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    padding: 40px;
    border-radius: 12px;
    height: 100%;
    transition: transform 0.3s ease;
}

    .sustainability-card:hover {
        transform: translateY(-8px);
    }

.eco-icon {
    font-size: 3rem;
    color: #198754; /* Doğa dostu yeşil */
    margin-bottom: 20px;
    opacity: 0.8;
}

.green-gradient-bg {
    background: linear-gradient(135deg, #198754 0%, #146c43 100%);
    border-radius: 20px;
    padding: 50px;
    color: white;
}

/*SÜRDÜRÜLEBİLİRLİK*/

/*İK*/

/* İnsan Kaynakları Özel Stilleri */
.hr-card {
    border: none;
    border-radius: 20px;
    background: #fff;
    padding: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    height: 100%;
}

    .hr-card:hover {
        box-shadow: 0 15px 35px rgba(220, 53, 69, 0.1);
        transform: translateY(-10px);
    }

.benefit-icon {
    width: 60px;
    height: 60px;
    background: #f8f9fa;
    color: var(--renk1);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.job-item {
    background: #fff;
    border-radius: 15px;
    padding: 20px 30px;
    margin-bottom: 15px;
    border-left: 5px solid var(--renk1);
    transition: 0.3s;
    cursor: pointer;
}

    .job-item:hover {
        background: #fdfdfd;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

/*İK*/


/*iletişim*/

/* İletişim Sayfası Özel Stilleri */
.contact-card {
    border: none;
    border-radius: 20px;
    background: #fff;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: 100%;
    transition: 0.3s;
}

    .contact-card:hover {
        transform: translateY(-5px);
    }

.contact-icon {
    width: 50px;
    height: 50px;
    background: rgba(220, 53, 69, 0.1);
    color: var(--renk1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 20px;
}

.map-container {
    filter: grayscale(100%) invert(92%) contrast(83%); /* Kurumsal hava için gri harita */
    border-radius: 20px;
    overflow: hidden;
    height: 450px;
}

.form-control:focus {
    border-color: var(--renk1);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.1);
}

/*iletişim*/


/*blog*/

/* Blog Kartları */
.blog-post-card {
    border: none;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    transition: 0.3s;
    margin-bottom: 40px;
}

    .blog-post-card:hover {
        box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    }

.blog-img-wrapper {
    height: 350px;
    overflow: hidden;
}

    .blog-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: 0.5s;
    }

.blog-post-card:hover .blog-img-wrapper img {
    transform: scale(1.05);
}

/* Sidebar (Sağ Taraf) */
.sidebar-widget {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.widget-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding-left: 15px;
}

.tag-cloud a {
    display: inline-block;
    padding: 5px 15px;
    background: #f8f9fa;
    color: #666;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.85rem;
    margin: 3px;
    transition: 0.3s;
}

    .tag-cloud a:hover {
        background: var(--renk1);
        color: #fff;
    }

/* 1. Ana Takvim Kutusunu Genişlet */
.flatpickr-calendar {
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. Günlerin bulunduğu iç kapsayıcıları genişlet */
.flatpickr-rContainer {
    width: 100% !important;
}

.flatpickr-days {
    width: 100% !important;
    border: none !important;
}

.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    justify-content: space-around; /* Günleri eşit dağıt */
}

/* 3. Gün İsimlerini (Pt, Sa...) Genişlet */
.flatpickr-weekdays {
    width: 100% !important;
    background: transparent !important;
}

span.flatpickr-weekday {
    background: transparent !important;
    flex: 1; /* Her bir gün ismini eşit genişlet */
}

/* 4. RAKAMLARI YAYMA (En Önemli Kısım) */
.flatpickr-day {
    max-width: none !important; /* Varsayılan genişlik sınırını kaldır */
    flex-basis: 14.28% !important; /* 7 gün olduğu için 100/7 = %14.28 */
    height: 40px !important; /* Biraz daha uzun ve şık olsun */
    line-height: 40px !important; /* Rakamı dikeyde ortala */
    margin: 0 !important; /* Aradaki boşlukları sıfırla */
    border-radius: 5px !important; /* Kare değil hafif oval olsun */
}

    /* 5. Seçili Günün Rengi (Senin Kırmızın) */
    .flatpickr-day.selected,
    .flatpickr-day.today {
        background: #dc3545 !important;
        border-color: #dc3545 !important;
        color: white !important;
    }

/*blog*/

/* Referans Logoları (Gri'den Renkli'ye Geçiş) */
/* Yeni Referans Kartı Tasarımı */
.client-ref-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%; /* Kartların boyunu eşitler */
}

    .client-ref-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.08);
        border-color: #dc3545; /* Hover'da markanızın kırmızısı */
    }

/* Logo Alanı */
.ref-logo-area {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-bottom: 1px solid #f8f9fa;
    padding: 20px;
    position: relative;
}

    .ref-logo-area img {
        max-width: 80%;
        max-height: 60px;
        opacity: 0.7;
        transition: all 0.4s ease;
    }

.client-ref-card:hover .ref-logo-area img {
    filter: grayscale(0%); /* Renkli */
    opacity: 1;
    transform: scale(1.05);
}

/* Bilgi Alanı (İsim ve Proje Tipi) */
.ref-info-area {
    padding: 20px;
    text-align: center;
    background: #fff;
}

.ref-client-name {
    font-weight: 700;
    font-size: 1rem;
    color: #212529;
    margin-bottom: 8px;
    display: block;
}

.ref-project-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    background: #f8f9fa; /* Açık gri zemin */
    color: #6c757d;
    border: 1px solid #e9ecef;
    display: inline-block;
    margin: 2px;
}

/* Hover durumunda badge'in de rengi değişsin isterseniz: */
.client-ref-card:hover .ref-project-badge {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

/* Sektör Filtre Butonları */
.ref-filter-btn {
    border: 1px solid #e9ecef;
    background: #fff;
    color: #6c757d;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 600;
    margin: 0 5px 10px;
    transition: 0.3s;
}


/* Başarı Hikayesi Kartları */
.success-story-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    height: 100%;
    transition: 0.3s;
}

.story-header {
    background: #212529;
    padding: 20px;
    color: #fff;
}

.story-body {
    padding: 30px;
}

.story-metric {
    background: #f8f9fa;
    border-left: 4px solid #dc3545;
    padding: 15px;
    margin-top: 20px;
    border-radius: 0 10px 10px 0;
}

/* Fiyat Kartları */
.pricing-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    z-index: 1;
}

    .pricing-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.08);
        border-color: #dc3545;
    }

    /* Popüler Paket Vurgusu */
    .pricing-card.popular {
        border: 2px solid #dc3545;
        background: #fff;
        transform: scale(1.05); /* Diğerlerinden biraz büyük durur */
        z-index: 2; /* Diğerlerinin üstüne çıkar */
        box-shadow: 0 10px 30px rgba(220, 53, 69, 0.15);
    }

/* Fiyat Kartı Temel Ayarı */
.pricing-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 40px 20px; /* Mobilde taşmasın diye padding'i hafif kıstım */
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden; /* Kuşağın taşan kısımlarını kesmek için şart */
    height: 100%;
    z-index: 1;
}

    /* Öne Çıkan Paket (PRO veya ELİT) */
    .pricing-card.popular {
        border: 2px solid rgb(243 184 26);
        transform: scale(1.05);
        z-index: 5;
        box-shadow: 0 15px 40px rgba(243, 184, 26, 0.30);
    }

/* DÜZELTİLEN KUŞAK (RIBBON) KODU */
.popular-badge {
    background: #dc3545;
    color: #fff;
    width: 200px; /* Genişliği artırdık ki yazı sığsın */
    position: absolute;
    top: 40px;
    right: -40px; /* Köşeye tam oturması için sağa ittik */
    transform: rotate(45deg); /* 45 derece çevirdik */
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    z-index: 10;
    line-height: 1.2;
}

/* Kıyaslama Tablosu Sütun Ayarı (3'lü yapı için) */
.comp-table th {
    width: 20%; /* Sütunları eşitledik */
}

    .comp-table th:first-child {
        width: 40%; /* Özellik ismi alanı geniş olsun */
    }

.price-number {
    font-size: 2rem;
    font-weight: 800;
    color: #212529;
}

.price-currency {
    font-size: 1.5rem;
    vertical-align: super;
}


.price-number-yenileme {
    font-size: 1rem;
    font-weight: 500;
    color: #212529;
}

.price-currency-yenileme {
    font-size: 1rem;
}
.price-period {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Kıyaslama Tablosu */
.comparison-table-wrapper {
    overflow-x: auto; /* Mobilde tablo taşarsa kaydırma çubuğu çıksın */
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    padding: 20px;
}

.comp-table {
    width: 100%;
    border-collapse: separate; /* Köşeleri yuvarlatmak için */
    border-spacing: 0;
}

    .comp-table th {
        background: #212529;
        color: #fff;
        padding: 15px;
        text-align: center;
        font-weight: 600;
    }

        .comp-table th:first-child {
            border-top-left-radius: 10px;
            text-align: left;
            width: 30%;
        }

        .comp-table th:last-child {
            border-top-right-radius: 10px;
        }

    .comp-table td {
        padding: 15px;
        border-bottom: 1px solid #eee;
        text-align: center;
        color: #555;
    }

    .comp-table tr:last-child td {
        border-bottom: none;
    }

    .comp-table tr:hover td {
        background-color: #f8f9fa;
    }

    .comp-table .feature-title {
        text-align: left;
        font-weight: 600;
        color: #212529;
    }

.comp-cat-header td {
    background-color: #f1f3f5;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 10px 15px;
    color: #495057;
    text-align: left;
}

.check-icon {
    color: #198754;
    font-size: 1.2rem;
}
/* Yeşil Tik */
.cross-icon {
    color: #dee2e6;
    font-size: 1.2rem;
}
/* Gri Çizgi */

/* 1. Header veya Navbar'ın altındaki görünmez boşlukları sıfırlar */
header, .fixed-header, nav.navbar {
    margin-bottom: 0 !important;
}

/* 2. İçerik alanının üstündeki fazlalığı alır */
.icerik-gelecek {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. Eğer Header 'Fixed' (Sabit) ise ve Body'de fazla boşluk varsa: */
/* Not: Header yüksekliğiniz örn. 100px ise ve burası 120px ise 20px boşluk kalır. 
   Bunu tam header boyuna eşitlemelisiniz. */
/* Eğer header sabit DEĞİLSE bu değeri 0 yapın */
body {
    padding-top: 80px; /* Burayı header yüksekliğinize göre azaltarak deneyin */
}

/* Sınırsız Özellikler Bandı */
.unlimited-badge-container {
    background: #fff;
    border: 1px dashed #dc3545; /* Kesikli kırmızı çizgi (Kupon/Fırsat hissi verir) */
    border-radius: 15px;
    padding: 25px;
    margin-top: 50px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.05);
}

    .unlimited-badge-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background: #dc3545;
    }

.feature-pill {
    display: inline-flex;
    align-items: center;
    background: #f8f9fa;
    padding: 8px 20px;
    border-radius: 30px;
    margin: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    border: 1px solid #eee;
}

    .feature-pill i {
        color: var(--renk1);
        margin-right: 8px;
    }

/* ERP Entegrasyon Vurgusu */
.erp-highlight-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1); /* Yarı saydam cam efekti */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 30px;
    border-radius: 50px;
    margin-top: 25px;
    transition: 0.3s;
    /* Kırmızı Nabız Animasyonu */
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    animation: pulseRed 2s infinite;
}

    .erp-highlight-badge:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.02);
    }

@keyframes pulseRed {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(243, 184, 26, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(243, 184, 26, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(243, 184, 26, 0);
    }
}

/* 1. Kapsayıcının Kilidini Masaüstünde Aç */
.comparison-table-wrapper {
    /* Mobilde yine yana kaysın diye auto bırakıyoruz */
    overflow-x: auto;
}

/* Sadece Masaüstünde (992px üstü) sticky çalışsın diye overflow'u kapatıyoruz */
@media (min-width: 992px) {
    .comparison-table-wrapper {
        overflow: visible !important;
    }
}

/* 2. Başlıkları Sabitleme Ayarı */
.comp-table thead th {
    position: sticky;
    top: 0;
    z-index: 999; /* En üstte durması için yüksek sayı */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Altına gölge */
    border-bottom: 2px solid #dc3545; /* Altına ince kırmızı çizgi (şık durur) */
}

/* Eğer sitende SABİT (Fixed) bir üst menü varsa, onun altında kalmaması için: */
/* Menün yoksa burayı 0px yap. Menün varsa yüksekliği kadar (örn: 80px) yaz. */
@media (min-width: 992px) {
    .comp-table thead th {
        top: 25px; /* Örnek: Header yüksekliğin 80px ise 5px de boşluk bırakır */
    }
}

/* 3. Arka Plan Renklerini Düzeltme (Şeffaf olursa alttan yazı geçer) */
/* İlk kutu (Özellikler yazan yer) Beyaz olsun */
.comp-table thead th:first-child {
    background-color: #fff !important;
    color: #333 !important;
}

/* Diğer başlıklar (LITE, START, ELITE) Koyu Olsun */
.comp-table thead th:not(:first-child) {
    background-color: #212529;
    color: #fff;
}

/* PRO olan Sarı kalsın (Senin HTML'indeki inline style geçerli olur ama garanti olsun) */
.comp-table thead th:nth-child(4) {
    background-color: #f3b81a !important;
    color: #000 !important;
}

/* SADECE MOBİL İÇİN ÖZEL AYAR (992px altı) */
@media (max-width: 991px) {

    .comparison-table-wrapper {
        /* 1. Tabloya bir boy sınırı veriyoruz (Ekranın %75'i kadar) */
        max-height: 70vh;
        /* 2. Hem dikey hem yatay kaydırmayı açıyoruz */
        overflow-y: auto;
        overflow-x: auto;
        /* 3. Mobilde kutunun sınırları belli olsun */
        border: 1px solid #dee2e6;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
    }

    /* 4. Başlığı kutunun en tepesine yapıştır (Menü boşluğu gerekmez, kutuya yapışacak) */
    .comp-table thead th {
        top: 0 !important;
        z-index: 100 !important;
        border-bottom: 2px solid #dc3545; /* Ayrım çizgisi */
    }

    /* İsteğe bağlı: Mobilde scroll çubuklarını biraz daha şık yapalım */
    .comparison-table-wrapper::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .comparison-table-wrapper::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }

    .comparison-table-wrapper {
        /* Üstteki boşluğu kaldırıyoruz ki başlık en tepeye yapışsın */
        padding: 0 !important;
        /* Kenarlıkları da sıfırlayalım, tam ekran otursun */
        border: none !important;
        border-radius: 0 !important;
    }

    /* Tablo başlığının üstünde hiç boşluk kalmasın */
    .comp-table thead th {
        top: -1px !important; /* Arada ince çizgi kalmaması için -1px yukarı çekiyoruz */
        border-top: none !important;
    }
}


/* --- NSS KURUMSAL SARI TEMA (#f3b81a) --- */

/* Özel Renk Sınıfları */
.text-nss {
    color: var(--nss-yellow) !important;
}

.bg-nss {
    background-color: var(--nss-yellow) !important;
    color: #000 !important; /* Sarı üstüne siyah yazı okunur */
}

/* Özel Sarı Buton */
.btn-nss {
    background-color: var(--nss-yellow);
    color: #000;
    font-weight: 700;
    border: 2px solid var(--nss-yellow);
    transition: all 0.3s ease;
}

    .btn-nss:hover {
        background-color: transparent;
        color: var(--nss-yellow);
        box-shadow: 0 0 15px rgba(243, 184, 26, 0.4); /* Sarı Glow Efekti */
    }

.btn-outline-nss {
    border: 2px solid var(--nss-yellow);
    color: var(--nss-yellow);
    font-weight: 700;
}

    .btn-outline-nss:hover {
        background-color: var(--nss-yellow);
        color: #000;
    }

/* --- AKADEMİ KARTLARI --- */

.course-card {
    border: 1px solid #eee;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    transition: all 0.4s ease;
    height: 100%;
    position: relative;
}

    /* Hover durumunda kart yukarı kalkar ve altı sarı parlar */
    .course-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        border-bottom: 4px solid var(--nss-yellow);
    }

.course-thumb {
    position: relative;
    height: 220px;
    overflow: hidden;
}

    .course-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.5s;
    }

.course-card:hover .course-thumb img {
    transform: scale(1.1);
}

/* Sarı Badge */
.course-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--nss-yellow);
    color: #000;
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.course-content {
    padding: 25px;
}

.instructor-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--nss-yellow); /* Avatar çevresi sarı */
    padding: 2px;
}

/* --- ÖZELLİK KUTULARI (ICONLAR) --- */
.feature-box-anim {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    transition: 0.3s;
    border: 1px solid #f0f0f0;
    height: 100%;
}

    .feature-box-anim:hover {
        background: #fff;
        border-color: var(--nss-yellow);
        box-shadow: 0 10px 30px rgba(243, 184, 26, 0.15); /* Sarı gölge */
        transform: translateY(-5px);
    }

    /* İkon Rengi: Siyahtan Sarıya Geçiş */
    .feature-box-anim i {
        font-size: 2.5rem;
        margin-bottom: 20px;
        background: -webkit-linear-gradient(45deg, #212529, #f3b81a);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/* --- SSS (FAQ) Sayfası Özel Stilleri --- */

/* Arama Kutusu (Hero içindeki) */
.faq-search-box {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.faq-search-input {
    height: 60px;
    padding-left: 55px;
    border-radius: 50px;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    font-size: 1.1rem;
}

    .faq-search-input:focus {
        box-shadow: 0 10px 30px rgba(243, 184, 26, 0.3); /* Sarı gölge */
        outline: none;
    }

.faq-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nss-yellow);
    font-size: 1.2rem;
}

/* Kategori Butonları */
.faq-category-btn {
    background: #fff;
    border: 1px solid #eee;
    padding: 15px 20px;
    border-radius: 12px;
    font-weight: 600;
    color: var(--nss-dark);
    text-align: left;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
}

    .faq-category-btn:hover,
    .faq-category-btn.active {
        background: var(--nss-yellow);
        color: #000;
        border-color: var(--nss-yellow);
        box-shadow: 0 5px 15px rgba(243, 184, 26, 0.2);
    }

    .faq-category-btn i {
        font-size: 1.2rem;
    }

/* Akordeon (Açılır/Kapanır Sorular) Tasarımı */
.accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 15px !important;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid #f8f9fa;
}

.accordion-button {
    font-weight: 700;
    color: var(--nss-dark);
    background: #fff;
    padding: 20px 25px;
    font-size: 1.05rem;
    box-shadow: none !important; /* Mavi çizgiyi kaldır */
}

    /* Tıklanınca (Aktifken) */
    .accordion-button:not(.collapsed) {
        color: #000;
        background-color: rgba(243, 184, 26, 0.1); /* Çok açık sarı zemin */
        border-bottom: 1px solid rgba(243, 184, 26, 0.2);
    }

    /* Ok İşaretini Sarı Yapma */
    .accordion-button::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }

    .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f3b81a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        transform: rotate(-180deg);
    }

.accordion-body {
    padding: 25px;
    color: #6c757d;
    line-height: 1.7;
}

/* Soru Numarası Yuvarlağı */
.faq-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #f8f9fa;
    color: #aaa;
    border-radius: 50%;
    font-size: 0.75rem;
    margin-right: 15px;
    transition: 0.3s;
}

.accordion-button:not(.collapsed) .faq-number {
    background: var(--nss-yellow);
    color: #000;
}

/* --- KULLANIM KILAVUZU / DOKÜMANTASYON --- */

/* Kategori Kartları (Iconlu) */
.manual-cat-card {
    background: #fff;
    border: 1px solid #eee;
    padding: 25px;
    border-radius: 16px;
    transition: 0.3s;
    text-align: center;
    height: 100%;
    cursor: pointer;
}

    .manual-cat-card:hover {
        border-color: var(--nss-yellow);
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

.manual-icon-box {
    width: 70px;
    height: 70px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8rem;
    color: var(--nss-dark);
    transition: 0.3s;
}

.manual-cat-card:hover .manual-icon-box {
    background: var(--nss-yellow);
    color: #000;
}

/* Sol Sidebar Navigasyon */
.doc-sidebar {
    position: sticky;
    top: 100px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 20px;
}

.doc-nav-item {
    display: block;
    padding: 10px 15px;
    color: #555;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: 0.2s;
    border-left: 3px solid transparent;
}

    .doc-nav-item:hover {
        background: #fdfdfd;
        color: #000;
        padding-left: 20px; /* Sağa kayma efekti */
    }

    .doc-nav-item.active {
        background: rgba(243, 184, 26, 0.1);
        color: #000;
        font-weight: 700;
        border-left-color: var(--nss-yellow);
    }

.doc-nav-header {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #999;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 20px;
    padding-left: 15px;
}

/* Video Eğitim Kartı */
.video-tutorial-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    group: video;
}

.video-thumb {
    position: relative;
    height: 160px;
}

    .video-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.8);
        transition: 0.3s;
    }

.video-tutorial-card:hover .video-thumb img {
    filter: brightness(0.6);
    transform: scale(1.05);
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: var(--nss-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.2rem;
    box-shadow: 0 0 0 5px rgba(243, 184, 26, 0.4);
    transition: 0.3s;
}

.video-tutorial-card:hover .play-btn {
    transform: translate(-50%, -50%) scale(1.2);
}

/* Breadcrumb (Sayfa Yolu) */
.nss-breadcrumb .breadcrumb-item a {
    color: #6c757d;
    text-decoration: none;
}

.nss-breadcrumb .breadcrumb-item.active {
    color: var(--nss-yellow);
    font-weight: 600;
}

/* --- ÜRÜN SAYFASI ÖZEL STİLLERİ --- */

/* Sade Hero Alanı */
.product-hero {
    background: var(--nss-dark); /* Siyah zemin */
    padding: 80px 0;
    position: relative;
    border-bottom: 4px solid var(--nss-yellow); /* Altına sarı çizgi */
}

/* Tanım Kutuları (Nedir?) */
.info-box {
    background: #fff;
    padding: 40px;
    border-left: 5px solid var(--nss-yellow);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    height: 100%;
    transition: 0.3s;
}

    .info-box:hover {
        transform: translateX(5px); /* Hafif sağa kayma */
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }

/* Özellik Maddeleri (Tikli Liste) */
.feature-list-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.feature-check {
    min-width: 30px;
    height: 30px;
    background: rgba(243, 184, 26, 0.2); /* Açık sarı */
    color: #b58500; /* Koyu sarı yazı */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 0.9rem;
}

/* Grid Özellik Kartları */
.prod-feature-card {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.3s;
    text-align: center;
}

    .prod-feature-card:hover {
        background: #fff;
        border-color: var(--nss-yellow);
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        transform: translateY(-5px);
    }

.prod-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--nss-dark);
    transition: 0.3s;
}

.prod-feature-card:hover .prod-icon {
    color: var(--nss-yellow);
}

/* --- TÜM ÜRÜNLER (SHOWCASE) STİLLERİ --- */

.product-overview-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    transition: all 0.4s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

    /* Hover Efekti: Yukarı kalkma ve Alt Çizgi */
    .product-overview-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.08);
        border-color: #fff;
    }

    /* Hover'da alttan çıkan sarı çizgi efekti */
    .product-overview-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0%;
        height: 4px;
        background: var(--nss-yellow);
        transition: 0.4s;
    }

    .product-overview-card:hover::after {
        width: 100%;
    }

/* İkon Stili */
.overview-icon {
    font-size: 3rem;
    color: var(--nss-dark);
    margin-bottom: 25px;
    transition: 0.4s;
    display: inline-block;
}

.product-overview-card:hover .overview-icon {
    color: var(--nss-yellow);
    transform: scale(1.1) rotateY(180deg); /* Hafif döndürme efekti */
}

.overview-title {
    font-weight: 800;
    margin-bottom: 15px;
    color: #212529;
}

.overview-desc {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.overview-link {
    color: var(--nss-dark);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
}

    .overview-link:hover {
        color: var(--nss-yellow);
    }

    .overview-link i {
        font-size: 0.8rem;
        margin-left: 5px;
        transition: 0.3s;
    }

    .overview-link:hover i {
        margin-left: 10px; /* Ok işareti sağa kayar */
    }

/* --- ERP ENTEGRASYON SAYFASI ÖZEL --- */

/* Hero Logo Alanı */
.integration-hero-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.int-logo-box {
    background: #fff;
    width: 120px;
    height: 120px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-shadow: 0 0 20px rgba(255,255,255,0.1);
    position: relative;
    z-index: 2;
}

    .int-logo-box img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* Ortadaki Çarpı/Artı İşareti */
.int-connector {
    font-size: 2rem;
    color: var(--nss-yellow);
    margin: 0 20px;
    animation: pulseConnector 2s infinite;
}

@keyframes pulseConnector {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
        text-shadow: 0 0 15px var(--nss-yellow);
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/* Bağlantı Çizgisi Animasyonu (Arka Planda) */
.connection-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--nss-yellow), transparent);
    z-index: 1;
    opacity: 0.5;
}

/* Teknik Tablo (Feature List) */
.tech-spec-item {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid #eee;
    margin-bottom: 10px;
    transition: 0.3s;
}

    .tech-spec-item:hover {
        border-color: var(--nss-yellow);
        transform: translateX(5px);
    }

.tech-spec-icon {
    width: 35px;
    height: 35px;
    background: rgba(243, 184, 26, 0.15);
    color: #b58500;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 0.9rem;
}

/* --- DİĞER ENTEGRASYONLAR SAYFASI --- */

/* Kart Yapısı */
.other-int-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yaylanma efekti */
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: default;
}

    /* Hover: Yukarı Kalkma ve Sarı Gölge */
    .other-int-card:hover {
        transform: translateY(-10px);
        border-color: var(--nss-yellow);
        box-shadow: 0 15px 30px rgba(243, 184, 26, 0.15);
    }

/* Logo Alanı */
.other-int-logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

    .other-int-logo img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
        filter: grayscale(100%); /* Başlangıçta siyah-beyaz */
        opacity: 0.7;
        transition: 0.4s;
    }

.other-int-card:hover .other-int-logo img {
    filter: grayscale(0%); /* Hover'da renklenir */
    opacity: 1;
    transform: scale(1.1);
}

/* Uyum Rozeti */
.compatibility-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #f8f9fa;
    color: #6c757d;
    transition: 0.4s;
}

.other-int-card:hover .compatibility-badge {
    background: var(--nss-yellow);
    color: #000;
}

/* Giriş Animasyonu (Kartlar sırayla gelir) */
.animate-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Her karta farklı gecikme vererek dalga efekti yaratıyoruz */
.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.delay-5 {
    animation-delay: 0.5s;
}
/* ...diğerleri için devam eder */

/* --- BANKA & ÖDEME SİSTEMLERİ STİLLERİ --- */

/* Kart Markaları (Bonus, World vs.) Kutuları */
.bank-brand-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: 0.3s;
    font-weight: 700;
    color: #555;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

    .bank-brand-box:hover {
        border-color: var(--nss-yellow);
        color: #000;
        transform: translateY(-5px);
    }

/* Finansal Özellik Kartı */
.fin-feature-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 30px;
    height: 100%;
    border-left: 4px solid transparent;
    transition: 0.3s;
}

    .fin-feature-card:hover {
        background: #fff;
        border-left-color: var(--nss-yellow);
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }

.fin-icon {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--nss-yellow);
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Link ile Ödeme Simülasyonu (Görseli Yoksa CSS ile yapalım) */
.pay-link-demo {
    background: #212529;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    font-family: monospace;
    font-size: 0.9rem;
    position: relative;
}

    .pay-link-demo::before {
        content: 'SMS ÖNİZLEME';
        position: absolute;
        top: -10px;
        right: 10px;
        background: var(--nss-yellow);
        color: #000;
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 4px;
        font-weight: bold;
    }

/* --- DİĞER ÖDEME KURULUŞLARI LİSTESİ --- */

/* Kart Yapısı (ERP listesiyle aynı temel) */
.payment-grid-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 25px 15px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    position: relative;
    overflow: hidden;
}

    .payment-grid-card:hover {
        transform: translateY(-10px);
        border-color: var(--nss-yellow);
        box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    }

/* Logo Alanı - Ödeme logoları genelde yataydır */
.payment-logo-area {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

    .payment-logo-area img {
        max-height: 100%;
        max-width: 90%;
        object-fit: contain;
        filter: grayscale(100%);
        opacity: 0.7;
        transition: 0.4s;
    }

.payment-grid-card:hover .payment-logo-area img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Kategori Rozeti (Sanal POS, Cüzdan vs.) */
.fin-badge {
    font-size: 0.7rem;
    padding: 4px 10px;
    background: #f8f9fa;
    border-radius: 20px;
    color: #6c757d;
    font-weight: 600;
    transition: 0.3s;
}

.payment-grid-card:hover .fin-badge {
    background: var(--nss-yellow);
    color: #000;
}

/* --- TÜM BANKALAR / EVRENSEL POS SAYFASI --- */

/* Hero Alanındaki Hareketli Kart Yığını */
.universal-card-stack {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 0 auto;
}

.uni-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: linear-gradient(135deg, #333, #000);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    display: flex;
    justify-content: space-between;
    padding: 20px;
    color: #fff;
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

    /* Kartların Pozisyonları */
    .uni-card:nth-child(1) {
        transform: translateY(0) scale(1);
        z-index: 3;
        background: linear-gradient(135deg, #2c3e50, #000000);
    }

    .uni-card:nth-child(2) {
        transform: translateY(15px) scale(0.95);
        z-index: 2;
        opacity: 0.8;
        background: linear-gradient(135deg, #1a2a6c, #b21f1f);
    }
    /* Renkli */
    .uni-card:nth-child(3) {
        transform: translateY(30px) scale(0.90);
        z-index: 1;
        opacity: 0.6;
        background: linear-gradient(135deg, #f12711, #f5af19);
    }
/* Renkli */

/* Hover Durumu: Kartlar Yelpaze Gibi Açılır */
.universal-card-stack:hover .uni-card:nth-child(1) {
    transform: translateY(-40px) scale(1);
}

.universal-card-stack:hover .uni-card:nth-child(2) {
    transform: translateY(0) scale(1) rotate(-5deg);
    opacity: 1;
}

.universal-card-stack:hover .uni-card:nth-child(3) {
    transform: translateY(0) scale(1) rotate(5deg);
    opacity: 1;
}

/* Kart Programı Kutuları (Bonus, World vb. yazıları için) */
.card-program-badge {
    background: #fff;
    border: 1px solid #eee;
    color: #555;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

    .card-program-badge:hover {
        background: var(--nss-yellow);
        color: #000;
        transform: translateY(-3px);
        border-color: var(--nss-yellow);
    }

/* --- SEKTÖR SAYFALARI STİLLERİ --- */

/* Sektör Hero Arkaplanı */
.sector-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.2); /* Görseli karartıp yazıyı öne çıkarır */
    z-index: 0;
}

/* Sorun vs Çözüm Kartı (Before/After) */
.pain-point-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    border-left: 5px solid #ddd;
    transition: 0.3s;
    height: 100%;
    position: relative;
    overflow: hidden;
}

    .pain-point-card.solved {
        border-left-color: #28a745; /* Yeşil Çizgi */
        background: #f8fff9;
    }

    .pain-point-card.problem {
        border-left-color: #dc3545; /* Kırmızı Çizgi */
        background: #fff5f5;
    }

.pain-icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

/* Sektörel Özellik Grid Kartı */
.sector-feature-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: 0.4s;
}

    .sector-feature-box:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.08);
        border-color: var(--nss-yellow);
    }

.sector-icon {
    font-size: 2.5rem;
    color: var(--nss-yellow);
    margin-bottom: 20px;
    display: inline-block;
    transition: 0.4s;
}

.sector-feature-box:hover .sector-icon {
    transform: scale(1.1) rotate(5deg);
    color: #000;
}

/* OEM Arama Simülasyonu */
.oem-search-demo {
    background: #2c3e50;
    padding: 20px;
    border-radius: 10px;
    color: #fff;
    font-family: monospace;
}

.oem-badge {
    background: var(--nss-yellow);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    margin-right: 5px;
}

/* --- SEKTÖR HERO BUTON DÜZELTMESİ --- */

.btn-sector-hero {
    background-color: var(--nss-yellow);
    color: #000;
    border: 2px solid var(--nss-yellow); /* Sınırları belirginleştir */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(243, 184, 26, 0.4); /* Normalde sarı gölge */
}

    .btn-sector-hero:hover {
        background-color: #ffffff !important; /* Arka plan BEYAZ */
        color: #000 !important; /* Yazı SİYAH */
        border-color: #ffffff !important;
        transform: translateY(-5px) scale(1.05); /* Yukarı kalkma ve büyüme */
        box-shadow: 0 15px 30px rgba(0,0,0,0.5); /* Koyu gölge ile öne çıkarma */
    }

/* --- UNIVERSAL / DİĞER SEKTÖRLER STİLLERİ --- */

/* Hero Arkaplanı: Çok Renkli Gradyan (Çeşitliliği Temsilen) */
.universal-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #1a1a1a 0%, #2c3e50 50%, #000000 100%);
    z-index: 0;
}

/* Hareketli Etiket Bulutu (Tag Cloud) */
.sector-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.sector-tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    cursor: default;
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
}

    .sector-tag:hover {
        background: var(--nss-yellow);
        color: #000;
        transform: translateY(-5px) scale(1.1);
        box-shadow: 0 10px 20px rgba(243, 184, 26, 0.3);
        border-color: var(--nss-yellow);
    }

/* Modüler Kart Yapısı (Lego Mantığı) */
.module-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    height: 100%;
    border: 1px solid #eee;
    transition: 0.5s;
    z-index: 1;
}

    .module-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100px;
        background: var(--nss-yellow);
        opacity: 0.1;
        border-radius: 0 0 0 100%;
        transition: 0.5s;
        z-index: -1;
    }

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

        .module-card:hover::before {
            width: 200%;
            height: 200%;
            border-radius: 0;
            opacity: 0.05;
        }

.module-icon-large {
    font-size: 3rem;
    margin-bottom: 25px;
    background: -webkit-linear-gradient(45deg, #333, var(--nss-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- TELEFON DESTEK SAYFASI STİLLERİ --- */

/* Hero Alanı: İnsan Odaklı */
.support-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Güven veren, sakin bir ofis ortamı / kulaklıklı uzman görseli */
    background-image: url('https://images.unsplash.com/photo-1534536281715-e28d76689b4d?q=80&w=2000&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    opacity: 0.15; /* Görseli arka plana gömüyoruz */
    z-index: 0;
}

/* Nabız Efektli Telefon İkonu */
.phone-pulse-icon {
    width: 80px;
    height: 80px;
    background: var(--nss-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #000;
    position: relative;
    margin: 0 auto 20px auto;
    box-shadow: 0 0 0 0 rgba(243, 184, 26, 0.7);
    animation: pulse-yellow 2s infinite;
}

@keyframes pulse-yellow {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(243, 184, 26, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(243, 184, 26, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(243, 184, 26, 0);
    }
}

/* İstatistik Kutuları */
.support-stat-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    transition: 0.3s;
}

    .support-stat-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        border-color: var(--nss-yellow);
    }

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #000;
    margin-bottom: 5px;
    display: block;
}

/* Ekip Üyesi Kartı (Opsiyonel - Güven için) */
.support-member-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    border: 1px solid transparent;
    transition: 0.3s;
}

    .support-member-card:hover {
        background: #fff;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        border-color: #eee;
    }

.member-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid var(--nss-yellow);
}

/* --- MAİL DESTEK SAYFASI STİLLERİ --- */

/* Hero Arkaplanı: Dijital İletişim */
.mail-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Klavye, ekran veya soyut ağ görseli */
    background-image: url('https://images.unsplash.com/photo-1557200134-90327ee9fafa?q=80&w=2000&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    z-index: 0;
}

/* Süzülen Kağıt Uçak Animasyonu */
.floating-plane {
    font-size: 4rem;
    color: var(--nss-yellow);
    animation: float-plane 3s ease-in-out infinite;
    display: inline-block;
    margin-bottom: 20px;
    text-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

@keyframes float-plane {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(5deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* Ticket Süreç Adımları (Step) */
.ticket-step {
    position: relative;
    padding: 30px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 15px;
    text-align: center;
    height: 100%;
    transition: 0.3s;
}

    .ticket-step:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.05);
        border-color: var(--nss-yellow);
    }

.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: var(--nss-yellow);
    color: #000;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

/* --- TICKET DESTEK SAYFASI STİLLERİ --- */

/* Hero Arkaplanı: Dashboard / Teknoloji */
.ticket-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Modern, temiz, mavi tonlu bir arayüz görseli */
    background-image: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2000&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: 0;
}

/* Durum Rozetleri (Status Badges) */
.ticket-badge {
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

.status-open {
    background: #dc3545;
    color: #fff;
}
/* Kırmızı - Açık */
.status-progress {
    background: #ffc107;
    color: #000;
}
/* Sarı - İşlemde */
.status-solved {
    background: #198754;
    color: #fff;
}
/* Yeşil - Çözüldü */

/* Ticket Kartı Animasyonu */
.ticket-demo-card {
    background: #1e293b;
    border-radius: 12px;
    border: 1px solid #334155;
    padding: 20px;
    position: relative;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    transition: 0.4s;
}

    .ticket-demo-card:hover {
        transform: translateY(-5px);
        border-color: var(--nss-yellow);
    }

/* İlerleme Çubuğu (Timeline) */
.ticket-timeline-line {
    position: absolute;
    left: 20px;
    top: 50px;
    bottom: 20px;
    width: 2px;
    background: #334155;
}

.ticket-timeline-item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
}

.ticket-timeline-dot {
    position: absolute;
    left: -5px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #94a3b8;
    border: 2px solid #1e293b;
}

    .ticket-timeline-dot.active {
        background: var(--nss-yellow);
        box-shadow: 0 0 10px rgba(243, 184, 26, 0.5);
    }

/* --- TICKET GİRİŞ BUTONU HOVER DÜZELTMESİ --- */

.btn-ticket-login {
    transition: all 0.3s ease;
}

    .btn-ticket-login:hover {
        background-color: #ffffff !important; /* Arka plan BEYAZ */
        color: #000000 !important; /* Yazı SİYAH */
        border-color: #ffffff !important; /* Kenarlık BEYAZ */
        transform: translateY(-3px); /* Hafif yukarı kalkma */
        box-shadow: 0 10px 25px rgba(255, 255, 255, 0.3); /* Beyaz parlama gölgesi */
    }

/* --- SATIŞ DESTEK SAYFASI STİLLERİ --- */

/* Hero Arkaplanı: Toplantı ve İşbirliği */
.sales-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Modern bir ofis toplantısı veya el sıkışma görseli */
    background-image: url(/Content/img//banner/banner1.png);
    background-position: center;
    opacity: 0.15;
    z-index: 0;
}

.sales-hero-bg-destek {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    opacity: 0.15;
    z-index: 0;
}

/* Takvim / Randevu Kartı Animasyonu */
.meeting-card {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    transform: rotate(-3deg);
    transition: 0.5s;
    border: 1px solid #eee;
    max-width: 300px;
    margin: 0 auto;
}

    .meeting-card:hover {
        transform: rotate(0deg) scale(1.05);
        z-index: 2;
        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
        border-color: #dddddd;
    }

.avatar-group {
    display: flex;
    margin-bottom: 15px;
}

.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    background-size: cover;
    margin-left: -10px;
}

    .avatar-circle:first-child {
        margin-left: 0;
    }

/* Adım Kartları (Süreç) */
.process-box {
    text-align: center;
    padding: 30px 20px;
    background: #fff;
    border-radius: 20px;
    transition: 0.3s;
    height: 100%;
    border: 1px solid transparent;
}

    .process-box:hover {
        background: #f8f9fa;
        border-color: #eee;
        transform: translateY(-5px);
    }

.process-number {
    font-size: 4rem;
    font-weight: 900;
    color: #f1f1f1;
    line-height: 1;
    margin-bottom: -30px;
    position: relative;
    z-index: 0;
}

.process-content {
    position: relative;
    z-index: 1;
}

/* --- GÜVENLİK & KVKK SAYFASI STİLLERİ --- */

/* Hero Arkaplanı: Siber Güvenlik */
.security-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dijital kilit, matrix veya siber ağ görseli */
    background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2000&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: 0;
}

/* Nefes Alan Kalkan Animasyonu */
.security-shield-icon {
    font-size: 5rem;
    color: #4ade80; /* Parlak Yeşil */
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(74, 222, 128, 0.4));
    animation: shield-breathe 3s infinite ease-in-out;
}

@keyframes shield-breathe {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 15px rgba(74, 222, 128, 0.4));
    }

    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 30px rgba(74, 222, 128, 0.6));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 15px rgba(74, 222, 128, 0.4));
    }
}

/* Güvenlik Kartları (Tech Specs) */
.security-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px;
    height: 100%;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

    .security-card:hover {
        transform: translateY(-5px);
        border-color: #4ade80;
        box-shadow: 0 10px 30px rgba(74, 222, 128, 0.1);
    }

    .security-card::after {
        content: '\f023'; /* FontAwesome Lock Icon */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        bottom: -20px;
        right: -20px;
        font-size: 6rem;
        color: #f1f5f9;
        z-index: 0;
        transform: rotate(-15deg);
        transition: 0.3s;
    }

    .security-card:hover::after {
        color: #dcfce7;
        transform: rotate(0deg);
    }

.security-content {
    position: relative;
    z-index: 1;
}

/* ISO Sertifika Rozetleri */
.iso-badge {
    background: #fff;
    border: 2px solid #eee;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: 0.3s;
}

    .iso-badge:hover {
        border-color: var(--nss-yellow);
        transform: scale(1.05);
    }

/* --- BLOG DETAY SAYFASI STİLLERİ --- */

/* Makale İçeriği Tipografisi */
.blog-detail-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}

    .blog-detail-content p {
        margin-bottom: 1.5rem;
    }

    .blog-detail-content h2 {
        font-weight: 800;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
        color: #000;
    }

    .blog-detail-content h3 {
        font-weight: 700;
        margin-top: 2rem;
        margin-bottom: 0.8rem;
        color: #333;
    }

/* Alıntı (Quote) Kutusu */
.blog-quote {
    background: #f8f9fa;
    border-left: 5px solid var(--nss-yellow);
    padding: 25px;
    font-style: italic;
    font-size: 1.2rem;
    color: #555;
    margin: 30px 0;
    border-radius: 0 10px 10px 0;
}

/* Yazar Kartı (Makale Sonu) */
.author-card {
    background: #fff;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin-top: 40px;
}

.author-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
    border: 3px solid #eee;
}

/* Sidebar (Yapışkan Yan Menü) */
.sidebar-sticky {
    position: sticky;
    top: 100px; /* Üstten 100px boşluk bırakarak yapışır */
}

.sidebar-widget {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
}

.widget-title {
    font-weight: 800;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--renk1);
    position: relative;
}

    .widget-title::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 50px;
        height: 2px;
        background: var(--nss-yellow);
    }

/* Yan Menüdeki Küçük Yazılar */
.mini-post-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    margin-bottom: 15px;
    transition: 0.2s;
}

    .mini-post-link:hover {
        color: var(--nss-yellow);
    }

.mini-post-img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    margin-right: 15px;
}
.ustten-bosluk {
    margin-top: 25px!important;
}


.meeting-card {
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Yumuşak bir yaylanma efekti */
    will-change: transform;
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    cursor: pointer;
}

/* Üstteki Kartın Hareketi */
.card-top-left:hover {
    /* Mevcut rotasyonunu koruyarak sola ve yukarı esner */
    transform: rotate(-8deg) translate(-15px, -15px) scale(1.02) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
    z-index: 10;
}

.card-bottom-right {
    /* Animasyonun merkezi sağ üst köşe olsun */
    transform-origin: top right;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

    .card-bottom-right:hover {
        /* Sağ üst köşe sabit kalır.
       Dönüş açısını biraz azaltarak (örneğin 3'ten 0'a veya negatif bir değere) 
       ve yukarı-sola hafif bir translate ile sol üst köşeyi yukarı kaldırmış oluruz.
    */
        transform: rotate(0deg) translate(-10px, -20px) scale(1.03) !important;
        box-shadow: 0 40px 80px rgba(0,0,0,0.2);
        z-index: 10;
    }

/* Kartların içindeki yazıların netliği için küçük bir dokunuş */
.meeting-card h5, .meeting-card p, .meeting-card span {
    transform: translateZ(0);
}


/* --- HAREKETLİ B2B İSTATİSTİK ŞERİDİ (REVİZE) --- */

.animated-stats-strip {
    background-color: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 50px 0;
    overflow: hidden;
}

.stat-box-animated {
    text-align: center;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Daire Kapsayıcısı */
.circle-wrapper {
    position: relative;
    width: 140px; /* Daire biraz büyüdü */
    height: 140px;
    margin: 0 auto 25px;
    display: flex;
    flex-direction: column; /* İçerik alt alta */
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.stat-box-animated:hover .circle-wrapper {
    transform: scale(1.05); /* Hover'da hafif büyüme */
}

/* Dönen Çerçeve (Dikey Çizgiler & Yavaş Dönüş) */
.rotating-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke: #e5e7eb; /* Açık gri */
    stroke-width: 4; /* Çizgiler biraz daha belirgin */
    /* Dikey/Kesik çizgi efekti: 2 birim dolu, 10 birim boş */
    stroke-dasharray: 2 12;
    stroke-linecap: butt; /* Keskin uçlar (Dikey görünüm için) */
    transition: stroke 0.4s ease;
}

/* Hover'da Sarı Olur ve Döner */
.stat-box-animated:hover .rotating-border {
    stroke: var(--nss-yellow);
    animation: spinBorder 20s linear infinite; /* ÇOK YAVAŞ DÖNÜŞ */
}

@keyframes spinBorder {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* İçerik Düzeni (Rakam ve İkon) */
.stat-inner-content {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Rakam Stili (Üstte ve Ayrışmış) */
.stat-number-big {
    font-size: 1.8rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 8px; /* İkonla arasına boşluk */
    transition: color 0.3s;
    font-family: 'Segoe UI', sans-serif;
}

.stat-box-animated:hover .stat-number-big {
    color: var(--nss-yellow); /* Hover'da rakam sararır */
}

/* İkon Stili (Altta) */
.stat-icon-small {
    font-size: 1.5rem;
    color: #9ca3af; /* Pasif gri */
    transition: all 0.3s ease;
}

.stat-box-animated:hover .stat-icon-small {
    color: #111; /* Hover'da ikon siyahlaşır */
    transform: scale(1.1);
}

/* Başlık Metni */
.stat-title-animated {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    margin: 0;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.stat-box-animated:hover .stat-title-animated {
    font-weight: 800;
    color: #000;
}

/* Masaüstü Varsayılan Ayarlar */
.btn-custom-hero {
    padding: 14px 45px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-custom-hero i {
        margin-right: 10px;
    }

/* MOBİL AYARLAR (Tablet ve Telefon) */
@media (max-width: 768px) {
    .btn-custom-hero {
        padding: 10px 20px !important; /* Daha dar padding */
        font-size: 0.9rem !important; /* Daha küçük font */
        min-width: 130px; /* Butonlar çok küçülüp dengesiz durmasın */
    }

        .btn-custom-hero i {
            margin-right: 6px !important; /* İkon boşluğunu mobilde daralt */
            font-size: 0.85rem;
        }

    .gap-2 {
        gap: 10px !important; /* Butonlar arası boşluğu mobilde azalt */
    }
}