/* ================================================================
   1. MASAÜSTÜ (BİLGİSAYAR) AYARLARI
   ================================================================ */

/* Menü Listesinin Arasını Daralt */
header nav ul, 
.site-header nav ul, 
.nav-menu ul {
    display: flex !important;
    gap: 2px !important; /* Linklerin birbirine olan uzaklığı */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    align-items: center !important;
}

/* Menü Yazı Boyutu ve İç Boşluk */
header nav ul li a, 
.site-header nav ul li a, 
.nav-menu ul li a {
    font-size: 14px !important; /* Yazıyı küçülttük */
    padding: 5px 10px !important; /* Sağ-sol boşluğu daralttık */
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important; /* Yazıların alt satıra kaymasını önler */
    color: #0b3d59 !important; /* Senin lacivert tonun */
}

/* Eğer menü hala çok sağda duruyorsa logo ile arasını açmak için */
.navbar {
    justify-content: space-between !important;
}

/* Masaüstünde Hamburger Çizgisini KESİN GİZLE */
.menu-toggle {
    display: none !important;
}

/* ================================================================
   2. MOBİL (991px VE ALTI) - SAĞDAN AÇILAN YAN PANEL
   ================================================================ */

@media screen and (max-width: 991px) {
    
    /* Üç çizgiyi (Hamburger) SADECE MOBİLDE GÖSTER */
    .menu-toggle {
        display: block !important;
        float: right;
        margin-top: 10px;
        cursor: pointer;
        z-index: 10001; /* Panelden daha üstte olmalı */
    }

    /* Mobilde Menü: SAĞDAN KAYAN PANEL TASARIMI */
    nav.nav-menu {
		display: none !important;
		flex-direction: column;
		justify-content: flex-start !important; /* Ortadan en üste taşır */
		align-items: center;    /* Yatayda ortala */
        
        position: fixed; /* Sayfadan bağımsız sabit panel */
        top: 0;
        right: -100%; /* Başlangıçta ekranın sağında TAMAMEN GİZLİ */
        
        width: 70%;  /* Ekranın %70'ini kaplar, sol taraf açık kalır */
        height: 100vh; /* Boydan boya tam ekran yüksekliği */
        
        background-color: #0b3d59;
        z-index: 10000;
        transition: right 0.4s ease-in-out; /* Kayma efekti hızı */
        box-shadow: -5px 0 15px rgba(0,0,0,0.3);
        padding: 40px 0;
    }

    /* Menü Aktif Olduğunda (Active klası gelince sağdan içeri girer) */
    nav.nav-menu.active {
		display: flex !important;
        right: 0 !important; 
    }

    nav.nav-menu ul {
        flex-direction: column !important;
        gap: 20px !important; /* Menü elemanları arası mesafe */
        width: 100%;
        margin: 0;
        padding: 0;
    }

    nav.nav-menu ul li a {
        color: #ffffff !important;
        font-size: 19px !important;
        padding: 12px 0;
        display: block;
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        margin-right: 0 !important;
    }

    /* Menü içindeki "Bize Ulaşın" butonu için özel stil (opsiyonel) */
    .nav-contact-btn {
        margin-top: 30px;
        background-color: #00c3e3;
        color: #fff !important;
        padding: 12px 35px;
        border-radius: 8px;
        font-weight: 700;
    }

    /* Header'daki orijinal butonları mobilde gizle */
    .btn-cyan, .header-btn, .mobile-hidden {
        display: none !important;
    }
}











/* Buradan aşağısına senin diğer kart, footer, banner kodlarını ekleyebilirsin */



body {
    font-family: 'Poppins' !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Başlıkları daha belirgin yapmak için */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins' !important;
    font-weight: 700; /* Başlıklar kalın olsun */
}


.about-page .container {
    max-width: 1100px; /* Hakkımızda bölümü biraz daha "fit" dursun */
}

.container {
    width: 100%;
    max-width: 1000px; /* İçeriğin yayılacağı maksimum genişlik */
    margin-right: auto; /* Sağdan ortala */
    margin-left: auto;  /* Soldan ortala */
    padding-right: 20px; /* Mobilde kenarlara sıfır yapışmaması için */
    padding-left: 20px;
}
/* Sayfa Banner ve Bölümler için genel düzen */
section {
    width: 100%;
    overflow: hidden; /* Taşmaları engelle */
}
/* --- HEADER & NAVBAR --- */
.site-header {
    background: #fff;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between; /* Logo solda, menü ortada/sağda */
    align-items: center !important;  /* BU SATIR: Hepsini dikeyde tam ortalar */
    padding: 10px 0;
    height: 80px; /* Header yüksekliğini sabitleyerek hizayı garantileriz */
}

/* Menü Linklerini de Kendi İçinde Hizalayalım */
nav.nav-menu ul {
    display: flex !important;
    align-items: center !important; /* Linkleri butonla aynı hizaya çeker */
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 30px;
}

.logo a {
    text-decoration: none;
}

.brand {
    font-weight: 900;
    font-size: 26px;
    color: #0b3d59;
    letter-spacing: -1.5px;
    display: block;
}

.sub-brand {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: #00c3e3;
    letter-spacing: 5px;
    text-align: center;
    border-top: 1px solid #eee;
    margin-top: 2px;
}

.main-nav ul {
    display: flex;
    list-style: none;
}

.main-nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 14px;
    margin: 0 15px;
    transition: 0.3s;
}

.main-nav ul li a.active, .main-nav ul li a:hover {
    color: #00c3e3;
}

.btn-cyan {
    background: #00c3e3;
    color: #fff;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 13px;
    transition: 0.3s;
}

/* --- HERO SLIDER --- */
.slider-wrapper {
    position: relative;
    height: 600px;
    overflow: hidden;
    background-color: #000;
}

.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.hero-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,25,50,0.7) 0%, rgba(0,0,0,0.2) 100%);
}

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










.hero-content h1 {
    color: #fff;
     font-size: 30px;
    font-weight: 800;
    margin-bottom: 5px;
}

.hero-content h1 span {
    color: #fff;
}

.hero-content p {
	text-align: center;
    color: #e0e0e0;
  font-size: 17px;
    font-weight: 500;
    margin-bottom: 50px;
}

.hero-btns a {
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    display: inline-block;
    transition: 0.3s;
}

.btn-solid {
    background: #fff;
    color: #0b3d59;
    margin-right: 15px;
}

.btn-outline {
    border: 2px solid #fff;
    color: #fff;
}

.btn-outline:hover {
    background: #fff;
    color: #0b3d59;
}


/* Slider Ana Buton (Turkuaz) */
.btn-hero-main {
    background-color: #00c3e3;
    color: #fff !important;
    padding: 14px 35px;
    border-radius: 50px; /* Oval tasarım */
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    border: 2px solid #00c3e3;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-hero-main:hover {
    background-color: transparent;
    color: #00c3e3 !important;
}

/* Slider Çerçeve Buton (Beyaz Şeffaf) */
.btn-hero-outline {
    background-color: transparent;
    color: #fff !important;
    padding: 14px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    border: 2px solid #fff;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-hero-outline:hover {
    background-color: #fff;
    color: #0b3d59 !important; /* Senin koyu lacivert tonun */
}

/* Mobilde butonların alt alta gelmesi için */
/* Slider içerik alanı (Mobilde) */
@media (max-width: 768px) {
    .hero-content {
        text-align: center !important; /* Tüm yazıları yatayda ortalar */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Butonu ve metinleri merkeze sabitler */
        justify-content: center !important;
        width: 100% !important;
        padding: 0 20px;
    }

    .hero-content h1 {
        font-size: 32px !important; /* Mobilde çok büyükse buradan ayarla */
        margin-bottom: 10px !important;
        text-align: center !important;
        width: 100% !important;
    }

    .hero-content p {
        text-align: center !important;
        margin-bottom: 30px !important;
        width: 100% !important;
    }

    /* Eğer buton hala solda kalıyorsa */
    .hero-btns, .hero-buttons {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
}



/* --- HİZMETLER (SERVICES) BÖLÜMÜ --- */
/* Tasarımı Bozmadan 4'lü Grid Ayarları */
/* ANA IZGARA: Kesin 4'lü ve Tam Genişlik */
/* 1. Genişlik Sorununu Çözen Container */
.custom-container {
    width: 100%;
    max-width: 1000px !important; /* Temanın dar kalıbından kurtarıyoruz */
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. Grid Yapısı (Net 4 Sütun) */
.fiber-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
}

/* 3. Kart Tasarımı (Sıkışmayı Önler) */
/* Kartların genel yapısını daraltıyoruz */
.fiber-card {
    background: #fff;
    padding: 25px 15px; /* İç boşluğu azalttık */
    border-radius: 16px;
    border: 1px solid #eee;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    
    /* BURASI KRİTİK: Yüksekliği 400'den 320'ye düşürdük */
    min-height: 320px; 
}

/* Başlık ve açıklama arasındaki mesafeyi düzenliyoruz */
.fiber-content h2 {
    font-size: 15px; /* Fontu bir tık küçülttük */
    color: #0b3d59;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
    min-height: 40px; /* Başlık alanını daralttık */
}

.fiber-content p {
    font-size: 13px;
    color: #6c757d;
    line-height: 1.5;
    margin-bottom: 15px; /* Alt boşluğu azalttık */
}

/* Butonun altındaki gereksiz mesafeyi bitiriyoruz */
.fiber-action-btn {
    margin-top: auto !important; 
    display: inline-block !important;
    border: 2px solid #0b3d59;
    color: #0b3d59;
    padding: 8px 22px; /* Butonu biraz daha kibarlaştırdık */
    border-radius: 30px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: 0.3s;
    width: fit-content;
}

.fiber-card:hover {
    transform: translateY(-8px);
    border-color: #00c3e3;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* 4. İkon ve Numara */
.fiber-icon-wrap {
    width: 65px;
    height: 65px;
    background: #f0faff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 25px;
    color: #00c3e3;
    font-size: 28px;
}

.fiber-badge {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 22px;
    font-weight: 900;
    color: #f3f3f3;
}

/* 5. Metin ve Başlık */
.fiber-content h2 {
    font-size: 17px;
    color: #0b3d59;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
    min-height: 48px; /* Başlıklar aynı hizaya gelir */
}

.fiber-content p {
    font-size: 15px;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* 6. Buton Düzenlemesi (Kesin Çözüm) */
.fiber-action-btn {
    margin-top: auto !important; /* Her zaman en alta yaslar */
    display: inline-block !important; /* Dikey uzamayı kesinlikle engeller */
    border: 2px solid #0b3d59;
    color: #0b3d59;
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: 0.3s;
    width: fit-content; /* Sadece içeriği kadar genişler */
}

.fiber-action-btn:hover {
    background: #0b3d59;
    color: #fff;
}

/* Responsive (Tablet ve Mobil) */
@media (max-width: 1200px) {
    .fiber-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 650px) {
    .fiber-grid { grid-template-columns: 1fr !important; }
}












/* --- NEDEN BİZ BÖLÜMÜ (ORTALANMIŞ STİLLER) --- */








/* Hizmetlerimiz Başlık Altı Çizgisi */
.why-us-section h2 {
    position: relative;
    padding-bottom: 20px; /* Çizgi ile yazı arasındaki mesafe */
    margin-bottom: 30px;
    display: inline-block; /* Çizginin sadece yazı genişliğinde olması için */
}

.why-us-section h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 60px; /* Çizginin uzunluğu */
    background: #0b3d59; /* Sitenin turkuaz rengi */
    border-radius: 50px;
    
    /* Fiber parlaması efekti */
    box-shadow: 0px 0px 8px rgba(0, 195, 227, 0.6);
}

/* Opsiyonel: Çizginin yanına daha ince ve sönük bir devam çizgisi eklemek istersen */
.why-us-section h2::before {
    content: "";
    position: absolute;
    left: 70px; /* Ana çizginin bittiği yerin biraz ilerisi */
    bottom: 1px; /* Ana çizgiden biraz daha ince durması için */
    height: 2px;
    width: 100px;
    background: rgba(0, 195, 227, 0.2); /* Daha şeffaf ve sönük */
    border-radius: 50px;
}



.why-us-section {
    background-color: #eef7ff; /* Görseldeki açık mavi arka plan */
    padding: 80px 0; /* Boşluk artırıldı */
    position: relative;
    overflow: hidden;
    text-align: center; /* Tüm içerik merkezlendi */
}

/* Konteyneri ortalamak için özel sınıf */
.ortalanmis-konteyner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.why-us-wrapper {
    display: flex;
    align-items: center;
    justify-content: center; /* Ortalanmış flex yapısı */
    gap: 50px; /* İçerik ve resim arası boşluk */
    max-width: 1000px; /* Çok yayılmaması için sınırlandı */
}

.why-us-content {
    flex: 1;
    text-align: left; /* Metinler sola dayalı kalır (referans görsel gibi) */
}

.why-us-title h2 {
    color: #0b3d59;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 5px;
}

.why-us-title p {
    color: #444;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 50px;
}

/* Sayılar Izgarası (Referans Görsel Düzeni) */
/* --- SAYAÇLAR (STATS) DÜZENLEMESİ --- */
.stats-grid {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap; /* Çizgilerin kaymaması için */
}

.stat-item {
    text-align: center;
    /* ÖNEMLİ: Her bir öğeye eşit ve geniş iç boşluk vererek arayı açıyoruz */
    padding: 0 55px; 
}

.stat-number {
    display: block;
    font-size: 30px; /* Daha büyük sayılar */
    font-weight: 700;
    color: #0b3d59;
    line-height: 1;
    margin-bottom: 10px;
}

.stat-text {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.5px;
    white-space: nowrap; /* Metin alt satıra geçmez */
}

/* Dikey Çizgiler (Referans Görseldeki Gibi) */
.stat-divider {
    width: 1px;
    height: 60px; /* Sayı boyu kadar çizgi */
    background-color: #cbd5e0; /* Hafif gri çizgi */
    margin: 0; /* Gap 0 olduğu için */
}

/* Sağ Görsel Alanı Optimizasyonu */
.why-us-image {
    flex: 0 0 auto; /* Esnemez */
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-with-badge {
    position: relative;
    display: inline-block;
}

.personnel-img {
    max-width: 350px; /* Çok büyük olmaması için sınırlandı */
    height: auto;
    border-radius: 50%; /* Yuvarlak resim efekti */
    border: 5px solid #fff; /* Beyaz çerçeve */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.iso-badge {
    position: absolute;
    top: -20px;
    right: -20px;
    background: #fff;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* Mobil Uyumluluk */
@media (max-width: 992px) {
    .why-us-wrapper { flex-direction: column; text-align: center; gap: 30px; }
    .why-us-content { text-align: center; }
    .stats-grid { flex-wrap: wrap; justify-content: center; }
    .stat-divider { display: none; } /* Mobilde çizgiler gizlenir */
    .stat-item { width: 45%; margin-bottom: 30px; }
    .personnel-img { max-width: 250px; }
}




/* Site Map Listesi */
/* --- SİTEMAP ÖZEL DÜZENLEME --- */
.sitemap-col {
    grid-column: span 1; /* Eğer alan dar gelirse 'span 2' yapabilirsin */
}

.sitemap-container {
    display: flex;
    gap: 30px; /* İki sütun arası boşluk */
}

.sitemap-list {
    list-style: none;
    flex: 1;
}

.sitemap-list li {
    margin-bottom: 12px;
}

.sitemap-list li a {
    color: #cbd5e0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px; /* İkon ile yazı arası */
}

/* Madde İkonu (Ok/Chevron) Stili */
.sitemap-list li a i {
    font-size: 10px;
    color: #00c3e3; /* Turkuaz ikonlar */
    transition: 0.3s;
}

.sitemap-list li a:hover {
    color: #fff;
}

.sitemap-list li a:hover i {
    transform: translateX(3px); /* Üzerine gelince ikon hafif sağa kayar */
    color: #fff;
}

/* Mobil için sitemap'i tek sütuna düşür */
@media (max-width: 600px) {
    .sitemap-container {
        flex-direction: column;
        gap: 0;
    }
}









/* --- HİZMETLER DETAY SAYFASI (3'lü Izgara) --- */

.services-detailed {
    padding: 80px 0;
    background: #fff;
	
}

/* Kapsayıcıyı Grid Yapıyoruz */
.services-detailed .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tam olarak 3 eşit sütun */
    gap: 30px; /* Kartlar arası boşluk */
	
}

/* Kart Yapısı (Eski Row yapısını Card'a çeviriyoruz) */
.service-row {
    display: flex;
    flex-direction: column; /* İçeriği alt alta diz */
    background: #ffffff;
    border: 1px solid #eef2f5;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;

}

/* Hover Efekti */
.service-row:hover {
    transform: translateY(-10px);
    border-color: #00c3e3;
    box-shadow: 0 15px 45px rgba(0,195,227,0.15);
}

/* İkon Kutusu */
.image-box {
    width: 90px;
    height: 90px;
    background: #f4f7f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: 0.4s;
}

.image-box i {
    font-size: 40px;
    color: #00c3e3;
}

.service-row:hover .image-box {
    background: #00c3e3;
}

.service-row:hover .image-box i {
    color: #fff;
}

/* Metin Alanları */
.service-text h2 {
    font-size: 22px;
    color: #0b3d59;
    font-weight: 800;
    margin-bottom: 15px;
}

.service-text p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Sayı Göstergesini (01, 02) Küçültüyoruz */
.service-number {
    font-size: 40px;
    font-weight: 900;
    color: rgba(11, 61, 89, 0.03);
    position: absolute;
    top: 10px;
    right: 20px;
}

/* Özellik Listesini 3'lü düzende gizleyebilir veya sadeleştirebiliriz */
.service-features {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    text-align: left;
    display: inline-block;
}

.service-features li {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 5px;
}

/* Buton */
.btn-outline-dark {
    padding: 10px 20px;
    font-size: 14px;
    border: 2px solid #0b3d59;
    border-radius: 50px;
    color: #0b3d59;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .services-detailed .container {
        grid-template-columns: repeat(2, 1fr); /* Tablete 2'li */
    }
}

@media (max-width: 650px) {
    .services-detailed .container {
        grid-template-columns: 1fr; /* Mobilde tekli */
    }
}

/* --- HİZMETLER ÜST BANNER (ESKİ HALİNE DÖNÜŞ) --- */
.page-banner {
    background: linear-gradient(rgba(11, 61, 89, 0.85), rgba(11, 61, 89, 0.85)), 
                url('https://images.unsplash.com/photo-1551703599-6b3e8379aa8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    text-align: center;
    color: #fff;
}












/* --- HAKKIMIZDA SAYFASI (GÜNCELLENMİŞ) --- */
.about-content {  padding-top: 30px; background: #fff; }

.about-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
    align-items: center; 
	max-width: 1000px;
}

.sub-title { 
    color: #00c3e3; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 13px;
    display: block;
    margin-bottom: 10px;
}

.about-text h2 { font-size: 26px; color: #0b3d59; font-weight: 700; margin-bottom: 25px; }
.about-text h2 span { color: #00c3e3; }
.about-text p { color: #555; margin-bottom: 20px; font-size: 14px; line-height: 1.8; }

.about-features { display: flex; gap: 30px; margin-top: 30px; }
.feat-item { display: flex; align-items: center; gap: 15px; }
.feat-item i { font-size: 20px; color: #00c3e3; }
.feat-item h4 { color: #0b3d59; font-weight: 700; }

.about-image { position: relative; }
.about-image img { width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

.experience-badge {
    position: absolute;
    bottom: -30px;
    left: 30px;
    background: #00c3e3;
    color: #fff;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,195,227,0.3);
    z-index: 5;
}

/* --- VİZYON MİSYON KARTLARI (HİZALAMA DÜZELTİLDİ) --- */
.vision-mission { 
    padding: 60px 0 80px 0; /* Üst ve alt boşluk dengelendi */
    background: #fff;
}

.vision-mission .container { 
    display: flex; 
    gap: 30px; 
    max-width: 1100px; /* Footer ile aynı genişlik */
    margin: 0 auto;
}

.vm-card {
    flex: 1;
    background: #f4f7f6;
    padding: 50px 40px;
    border-radius: 20px;
    text-align: center;
    transition: 0.3s ease-in-out;
    border: 1px solid transparent;
}

.vm-card:hover { 
    background: #0b3d59; 
    color: #fff; 
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(11, 61, 89, 0.2);
}

.vm-card i { font-size: 45px; color: #00c3e3; margin-bottom: 20px; }
.vm-card h3 { font-size: 24px; margin-bottom: 15px; color: #0b3d59; transition: 0.3s; }
.vm-card:hover h3 { color: #fff; }
.vm-card p { font-size: 15px; line-height: 1.7; transition: 0.3s; }
.vm-card:hover p { color: #cbd5e0; }

/* --- RESPONSIVE AYARLAR --- */
@media (max-width: 992px) {
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .vision-mission .container { flex-direction: column; padding: 0 20px; }
    .about-image { order: -1; margin-bottom: 50px; }
    .vm-card { padding: 40px 25px; }
}









/* --- İLETİŞİM SAYFASI --- */
.contact-cards { padding: 100px 0; background: #fdfdfd; }

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.c-card {
    background: #fff;
    padding: 50px 30px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #eee;
    transition: 0.4s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.c-card:hover {
    transform: translateY(-10px);
    border-color: #00c3e3;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.c-icon {
    width: 70px;
    height: 70px;
    background: rgba(0, 195, 227, 0.1);
    color: #00c3e3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 25px;
    transition: 0.3s;
}

.c-card:hover .c-icon {
    background: #00c3e3;
    color: #fff;
}

/* WhatsApp Özel Stil */
.c-card.whatsapp:hover .c-icon {
    background: #25D366;
    border-color: #25D366;
}

.c-card h3 { color: #0b3d59; font-size: 20px; margin-bottom: 15px; font-weight: 800; }
.c-card p { color: #666; font-size: 14px; margin-bottom: 25px; line-height: 1.6; }

.c-link {
    font-weight: 700;
    color: #00c3e3;
    text-decoration: none;
    font-size: 15px;
    padding: 10px 20px;
    background: #f4f7f6;
    border-radius: 50px;
    transition: 0.3s;
}

.c-card:hover .c-link {
    background: #0b3d59;
    color: #fff;
}

.contact-map { line-height: 0; filter: grayscale(100%) invert(90%); transition: 0.5s; }
.contact-map:hover { filter: grayscale(0%) invert(0%); }

@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
}






.main-footer1 {
    background: #051c2c;
    color: #fff;
    padding-top: 60px;
    margin-bottom: 0 !important;
    position: relative;
    overflow: hidden;
	max-width: 1000px;
}


/* ================================================================
   GÜNCELLENMİŞ VE TEMİZLENMİŞ FOOTER & RESPONSIVE DÜZENİ
   ================================================================ */

/* --- 1. ANA FOOTER GÖVDE (MASAÜSTÜ) --- */
.main-footer {
    background: #051c2c;
    color: #fff;
    padding-top: 60px;
    margin-bottom: 0 !important;
    position: relative;
    overflow: hidden;
}

/* İçerikleri Sayfa Ortasına Topla */
.footer-grid-centered {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1000px;
    margin: 0 auto 50px auto;
    text-align: left; /* Yazıları blok olarak sola yasla */
}

.footer-col-centered h3 {
    font-size: 14px;
    margin-bottom: 25px;
    color: #fff;
    text-transform: uppercase;
}

.footer-col-centered p {
    color: #cbd5e0;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start !important; /* İkon ve metni sola yasla */
}

/* Sosyal Medya İkonları */
.social-icons-footer {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    justify-content: flex-start !important;
}

.social-icons-footer a {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff !important;
    font-size: 16px;
    transition: 0.3s ease;
    text-decoration: none;
}

.social-icons-footer a:hover {
    background: #00c3e3;
    transform: translateY(-3px);
}

/* Site Map Linkleri */
.sitemap-flex {
    display: flex;
    gap: 50px;
}

.sitemap-flex ul { list-style: none; padding: 0; }
.sitemap-flex li { margin-bottom: 12px; }
.sitemap-flex a { 
    color: #cbd5e0; 
    text-decoration: none; 
    font-size: 12px; 
    transition: 0.3s;
}
.sitemap-flex a:hover { color: #fff; }

/* --- 2. ALT BANT (COPYRIGHT - MASAÜSTÜ YAN YANA) --- */
.footer-copyright-fixed {
    background: rgba(0, 0, 0, 0.4);
    padding: 20px 0;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.bottom-flex-container {
    display: flex;
    justify-content: space-between; /* Copyright Sola, Linkler Sağa */
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.bottom-flex-container p { color: #cbd5e0; font-size: 13px; margin: 0; }
.bottom-flex-container span { color: #00c3e3; font-weight: 700; }

.bottom-flex-container a {
    color: #a0aec0 !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: 0.3s;
    white-space: nowrap;
}


.bottom-policy-links { display: flex; gap: 25px; }
.bottom-policy-links a {
    color: #a0aec0 !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: 0.3s;
    white-space: nowrap;
}

.bottom-policy-links a:hover { color: #fff !important; }

/* --- 3. MOBİL UYUMLULUK (RESPONSIVE KİLİDİ) --- */
@media (max-width: 992px) {
    /* Genel kaymayı engelle */
    html, body { overflow-x: hidden !important; width: 100%; }

    /* Footer Sütunlarını Alt Alta Al */
    .footer-grid-centered {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 40px !important;
    }

    .footer-col-centered p, .social-icons-footer {
        justify-content: center !important;
    }

    /* Mobilde Site Map 2 Sütun */
    .sitemap-flex {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        max-width: 300px;
        margin: 0 auto !important;
        text-align: center!important;
    }

    /* Alt Bant Yazılarını Alt Alta Al */
    .bottom-flex-container {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }

    .bottom-policy-links {
        justify-content: center;
        margin-left: 0 !important;
    }
}

/* Ölü bölge (parlak şerit) temizliği */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #051c2c; /* Sayfa dibi boşluğu footer ile aynı renk */
}




   /* Keşif Butonu */
.btn-kesif {
    background-color: #00c3e3; /* Turkuaz renk */
    color: #ffffff !important;
    padding: 10px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-kesif:hover {
    background-color: #0b3d59; /* Üzerine gelince koyu mavi */
    color: #fff;
}




/* Slider Buton Grubu */
.slider-btns {
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
}

/* ANA BUTON TASARIMI */
.btn-fiber-main {
    background-color: #00c3e3 !important; /* Senin turkuaz rengin */
    color: #ffffff !important;           /* Yazı her zaman beyaz */
    padding: 14px 35px !important;       /* Buton genişliği */
    border-radius: 50px !important;      /* Oval yapı */
    text-decoration: none !important;    /* Alt çizgiyi kaldır */
    font-weight: 800 !important;         /* Kalın yazı */
    font-size: 15px !important;          /* Okunabilir boyut */
    display: inline-block !important;    /* Buton formu kazandır */
    border: 2px solid #00c3e3 !important;
    text-transform: uppercase !important; /* Harfleri büyüt */
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 195, 227, 0.4); /* Hafif parlama efekti */
}

/* Üzerine gelince (Hover) efekti */
.btn-fiber-main:hover {
    background-color: transparent !important;
    color: #00c3e3 !important;
    transform: translateY(-3px); /* Hafif yukarı kalkma */
}






/* Slider Altı Çizgili Tasarım */
.slider-wrapper {
    position: relative; /* Divider'ın düzgün durması için şart */
    overflow: hidden;
}

.slider-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg); /* Çizgiyi aşağı bakacak şekilde çevirir */
    z-index: 10;
}

.slider-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 90px; /* Çizginin yüksekliği - İsteğine göre değiştirebilirsin */
}

.slider-divider .shape-fill {
    fill: #ffffff; /* Alttaki beyaz bölümle birleşmesi için beyaz yaptık */
}

/* Slider'ın altındaki bölümün (hizmetler) üst boşluğunu biraz açalım */
.services-detailed {
    padding-top: 40px !important;
}



/* Hizmetlerimiz Başlık Altı Çizgisi */
.services-detailed h2 {
    position: relative;
    padding-bottom: 20px; /* Çizgi ile yazı arasındaki mesafe */
    margin-bottom: 30px;
    display: inline-block; /* Çizginin sadece yazı genişliğinde olması için */
}

.services-detailed h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 60px; /* Çizginin uzunluğu */
    background: #0b3d59; /* Sitenin turkuaz rengi */
    border-radius: 50px;
    
    /* Fiber parlaması efekti */
    box-shadow: 0px 0px 8px rgba(0, 195, 227, 0.6);
}

/* Opsiyonel: Çizginin yanına daha ince ve sönük bir devam çizgisi eklemek istersen */
.services-detailed h2::before {
    content: "";
    position: absolute;
    left: 70px; /* Ana çizginin bittiği yerin biraz ilerisi */
    bottom: 1px; /* Ana çizgiden biraz daha ince durması için */
    height: 2px;
    width: 100px;
    background: rgba(0, 195, 227, 0.2); /* Daha şeffaf ve sönük */
    border-radius: 50px;
}
















/* HİZMET DETAY*/
.hizmet-detay-section {
    padding: 60px 0;
    background: #fff;
}

.hizmet-konteyner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    overflow: hidden; /* Taşmaları önler */
}

/* RESİM KUTUSU: Sihirli dokunuş burada */
.resim-alani {
    float: left; /* Resmi sola yaslar, metin etrafından akar */
    width: 380px; /* Resim kutusunun genişliği */
    margin-right: 30px; /* Sağdaki metinle mesafe */
    margin-bottom: 15px; /* Alttaki metinle mesafe */
    background: #f9f9f9;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}



.resim-alani img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.resim-notu {
    font-size: 13px;
    color: #888;
    text-align: center;
    margin-top: 10px !important;
}

/* METİN ALANI */
.detay-baslik {
    color: #0b3d59;
    font-size: 30px;
    font-weight: 800;
	margin-top: 0 !important; /* Tarayıcının verdiği boşluğu sıfırlar */
    padding-top: 0 !important;
    line-height: 1.2; /* Başlığın satır yüksekliğini resimle dengelemek için */
}

.alt-baslik {
    color: #0b3d59;
    font-size: 22px;
    margin: 30px 0 15px 0;
}

.metin-alani p {
    font-size: 17px;
    line-height: 1.8;
    color: #444;
}

/* MOBİLDE RESMİ ÜSTE ALMA */
@media screen and (max-width: 768px) {
    .resim-alani {
        float: none; /* Akışı iptal et */
        width: 100%;
        margin-right: 0;
        margin-bottom: 25px;
    }
}



/* 1. Tüm sayfanın dışarı taşmasını engelle */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important; /* Sağa kaymayı fiziksel olarak yasaklar */
}

@media screen and (max-width: 991px) {
    /* 2. Container yapılarını ekran genişliğine zorla */
    .container, .custom-container, .ortalanmis-konteyner {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* 3. Grid (Izgara) yapılarını mobilde tek sütuna zorla */
    .fiber-grid, .contact-grid, .services-detailed .container {
        display: block !important; /* Grid bazen mobilde genişlik hesaplama hatası yapar */
        width: 100% !important;
    }

    /* 4. Banner ve Hero metinlerinin dışarı taşmasını engelle */
    .page-banner h1, .hero-content h1 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        font-size: 28px !important; /* Mobilde çok büyükse küçültüyoruz */
    }

    /* 5. Neden Biz bölümündeki sayaçların (stats) kaymasını engelle */
    .stats-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
    }
    
    .stat-item {
        padding: 0 10px !important;
        width: 45% !important; /* Yan yana iki tane sığdırır */
    }
}