/* style.css */

:root {
    --kurumsal-mavi: #005A9C;
    --acik-gri: #f8f9fa;
    --koyu-mavi: #00428a;
    --ana-gri: #333;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--ana-gri);
    font-size: 0.9rem;
    line-height: 1.6;
    background-color: var(--acik-gri);
    text-align: center; /* Genel metin hizalaması merkeze alındı */
}

h1, h2, h3, h4, h5, h6 {
    color: var(--kurumsal-mavi);
    text-align: center; /* Başlıklar da merkeze hizalı */
}

a {
    color: var(--kurumsal-mavi);
    text-decoration: none;
}

a:hover {
    color: var(--koyu-mavi);
    text-decoration: underline;
}

/* Navbar Stili */
.navbar {
    background-color: #fff;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
}

.navbar-brand {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--kurumsal-mavi);
}

.navbar-brand:hover {
    color: var(--koyu-mavi);
    text-decoration: none; /* Navbar brand hover efekti kaldırıldı */
}


.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 90, 156, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* Toggler icon rengi ayarlandı */
}

.navbar-nav .nav-link {
    color: var(--ana-gri);
    margin-left: 1rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--kurumsal-mavi);
}


/* Hero Section (Ortak Stil - Hizmete Özel Arkaplan ve Başlıklar HTML'de) */
.service-hero-section {
    background-size: cover;
    background-position: center;
    padding: 8rem 0;
    color: white;
    position: relative;
    overflow: hidden;
    text-align: center; /* Hero section metin hizalaması merkeze alındı */
}

.service-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 90, 156, 0.6);
    z-index: 1;
}

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

.service-hero-section h1 {
    color: white;
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
}

.service-hero-section p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.service-hero-section .cta-button {
    background-color: var(--kurumsal-mavi);
    border: none;
    border-radius: 0.3rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.service-hero-section .cta-button:hover {
    background-color: var(--koyu-mavi);
}


/* Orta Bölüm Metni (Ortak Stil - İçerik HTML'de) */
.service-intermediate-section {
    padding: 3rem 20px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    margin-bottom: 2rem;
    text-align: center; /* Orta bölüm metin hizalaması merkeze alındı */
}


/* Hizmet Detayları Bölümü (Ortak Stil - İçerik HTML'de) */
.service-details-section {
    padding: 4rem 0;
    text-align: center; /* Hizmet detayları bölümü metin hizalaması merkeze alındı */
}

.service-details-section h2 {
    margin-bottom: 2.5rem;
}

.service-details-section p {
    color: #555;
    margin-bottom: 1.2rem;
    text-align: left; /* Paragraflar sola hizalı */
}

.service-details-section ul {
    padding-left: 20px;
    margin-bottom: 1.2rem;
    text-align: left; /* Listeler sola hizalı */
}

.service-details-section li {
    color: #555;
    margin-bottom: 0.5rem;
}

.service-details-section .service-feature {
    margin-bottom: 2rem;
}

.service-details-section .service-feature i { /* Örnek ikon stili - Font Awesome veya benzeri kullanabilirsiniz */
    color: var(--kurumsal-mavi);
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
}

.service-details-section .service-feature h3 {
    margin-bottom: 0.8rem;
}


/* SSS Bölümü (Ortak Stil - İçerik HTML'de) */
.service-faq-section {
    padding: 4rem 0;
    background-color: var(--acik-gri);
    text-align: center; /* SSS bölümü metin hizalaması merkeze alındı */
}

.service-faq-section h2 {
    margin-bottom: 2.5rem;
}

.service-faq-section .accordion-button {
    color: var(--kurumsal-mavi);
    font-weight: 500;
}

.service-faq-section .accordion-button:not(.collapsed) {
    color: var(--kurumsal-mavi);
    background-color: rgba(0, 90, 156, 0.05);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}

.service-faq-section .accordion-button:focus {
    border-color: var(--kurumsal-mavi);
    box-shadow: 0 0 0 0.25rem rgba(0, 90, 156, 0.25);
}

.service-faq-section .accordion-body {
    text-align: left; /* Accordion içeriği sola hizalı */
    color: #555;
}


/* Ankara Hizmet Bölgesi (Ortak Stil - İçerik HTML'de) */
.ankara-bolgesi-section {
    padding: 4rem 0;
    text-align: center; /* Ankara bölgesi bölümü metin hizalaması merkeze alındı */
}

.ankara-bolgesi-section h2 {
    margin-bottom: 2rem;
}

.ankara-ilceler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.ankara-ilceler span {
    background-color: #e9ecef;
    color: var(--ana-gri);
    padding: 0.5rem 1rem;
    border-radius: 0.3rem;
    font-size: 0.85rem;
}


/* 7/24 Çağrı Desteği Bölümü (Ortak Stil - İçerik HTML'de) */
.call-support-section {
    padding: 4rem 0;
    background-color: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    text-align: center; /* Çağrı destek bölümü metin hizalaması merkeze alındı */
}

.call-support-section .container {
    max-width: 1200px; /* Container genişliği ayarlandı */
    margin: 0 auto;
}

.call-support-section .row {
    justify-content: center; /* Row içeriği merkeze hizalı */
}


.call-support-section .icon-box-icon {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px; /* İkon kutusu genişliği ayarlandı */
    height: 70px; /* İkon kutusu yüksekliği ayarlandı */
    border-radius: 50%;
    background-color: rgba(0, 90, 156, 0.1); /* İkon kutusu arka plan rengi */
    color: var(--kurumsal-mavi); /* İkon rengi */
}

.call-support-section .icon-box-icon svg {
    width: 35px; /* SVG ikon genişliği ayarlandı */
    height: 35px; /* SVG ikon yüksekliği ayarlandı */
    fill: var(--kurumsal-mavi); /* SVG ikon dolgu rengi */
}


.call-support-section .icon-box-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.call-support-section .icon-box-description {
    color: #777;
}


/* Footer (Ortak Stil - İçerik HTML'de) */
footer {
    background-color: #343a40;
    color: #fff;
    padding: 2rem 0;
    text-align: center; /* Footer metin hizalaması merkeze alındı */
    margin-top: 5rem;
}

footer p {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

footer a {
    color: #fff;
    margin: 0 0.5rem;
}

footer a:hover {
    color: #eee;
    text-decoration: underline;
}


.footer-cta-button {
    background-color: var(--kurumsal-mavi);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.3rem;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.footer-cta-button:hover {
    background-color: var(--koyu-mavi);
}


.footer-nav {
    margin-top: 1rem;
}

.footer-nav a {
    margin: 0 1rem;
}

/* style.css dosyanıza ekleyin */

/* Dropdown Menü Stili */
.navbar-nav .dropdown-menu {
    border: 1px solid #eee; /* Kenarlık ekleyerek daha belirgin hale getiriyoruz */
    border-radius: 0.5rem; /* Köşeleri yuvarlatıyoruz */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* Hafif gölge ekleyerek derinlik katıyoruz */
    padding: 0.5rem 0; /* İçeriği biraz daha ferah gösteriyoruz */
    background-color: #fff; /* Arka plan rengini beyaz yapıyoruz (navbar ile kontrast için) */
    font-size: 0.9rem; /* Yazı boyutunu navbar ile uyumlu hale getiriyoruz */
}

/* Dropdown Öğesi Stili */
.navbar-nav .dropdown-item {
    padding: 0.5rem 1.5rem; /* Öğeler arası boşluğu ayarlıyoruz */
    color: var(--ana-gri); /* Metin rengini ana gri ton yapıyoruz */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Hover efekti için geçiş animasyonu ekliyoruz */
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
    background-color: var(--acik-gri); /* Hover ve focus durumunda açık gri arka plan */
    color: var(--kurumsal-mavi); /* Hover ve focus durumunda metin rengini kurumsal mavi yapıyoruz */
}

/* Dropdown Ayırıcı (isteğe bağlı) */
.navbar-nav .dropdown-divider {
    border-top: 1px solid #eee; /* Ayırıcı çizgisini daha hafif yapıyoruz */
    margin: 0.5rem 0; /* Ayırıcı çizgisinin üst ve alt boşluğunu ayarlıyoruz */
}

/* Dropdown Toggle (Hizmetler Butonu) Stili (isteğe bağlı - zaten navbar stilinde) */
.navbar-nav .dropdown-toggle {
    /* İstenirse buraya özel stiller eklenebilir, örneğin: */
    /* color: var(--kurumsal-mavi);  */
}

/* style.css dosyanızın sonuna ekleyin */

/* Sabit Header (Navbar) Stili */
.fixed-header {
    position: fixed; /* Sabit позиция */
    top: 0; /* Sayfanın en üstüne yapışır */
    left: 0; /* Sayfanın soluna yapışır */
    right: 0; /* Sayfanın sağına yapışır (tam genişlik) */
    z-index: 1000; /* Diğer içeriklerin üzerinde kalmasını sağlar */
    background-color: #fff; /* Arka plan rengi (isteğe bağlı, beyaz yaptık) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Hafif gölge (isteğe bağlı) */
}

/* Sayfa İçeriğini Sabit Header Altına İtme (Önemli!) */
body {
    padding-top: 70px; /* Navbar yüksekliği kadar üst boşluk (tahmini, gerekirse ayarlayın) */
}

/* (Alternatif olarak, sadece ilk section'a margin-top da verebilirsiniz, örneğin:)
section:first-of-type {
    margin-top: 70px; !* Navbar yüksekliği kadar üst boşluk *!
}
*/
/* style.css dosyanıza ekleyin */

/* Hizmet Detayları Kutucuk Stilleri */
.service-details-section .service-box {
    background-color: #fff; /* Kutucuk arka plan rengi (isteğe bağlı) */
    border: 1px solid #eee; /* Kutucuk kenarlığı */
    border-radius: 0.5rem; /* Kutucuk köşe радиус */
    padding: 1.5rem; /* Kutucuk iç boşluğu */
    margin-bottom: 1.5rem; /* Kutucuklar arası alt boşluk */
    display: flex;
    flex-direction: column; /* İçeriği dikey hizala */
    align-items: center; /* İkonu ve başlığı ortala */
    text-align: center; /* Genel metin hizalaması (başlık için) */
}

.service-details-section .service-box i {
    font-size: 2.5rem; /* İkon boyutunu büyütüyoruz */
    margin-bottom: 1rem; /* İkon ve başlık arası boşluk */
    color: var(--kurumsal-mavi); /* İkon rengi */
}

.service-details-section .service-box h3 {
    margin-bottom: 1rem; /* Başlık alt boşluğu */
    color: var(--kurumsal-mavi); /* Başlık rengi */
    font-size: 1.1rem; /* Başlık yazı boyutu */
    text-align: center; /* Başlığı kutucuk içinde ortala */
}

.service-details-section .service-box p {
    color: #555; /* Açıklama metni rengi */
    text-align: justify; /* Açıklama metnini iki yana yasla */
    font-size: 0.9rem; /* Açıklama metni boyutu */
}

/* style.css dosyanıza ekleyin */

/* Pursaklar Harita Bölümü Stilleri */
/* style.css dosyanıza ekleyin - EĞER YOKSA VEYA EKSİKSE EKLEYİN */

/* Harita Bölümü Stilleri */
.map-section {
    background-color: #f8f9fa; /* Açık gri arka plan */
}

.map-section h2 {
    color: var(--kurumsal-mavi);
    text-align: center;
    margin-bottom: 2rem;
}

.map-section .harita-responsive {
    overflow: hidden;
    padding-bottom: 75%; /* 4:3 aspect ratio için (16:9 yerine 4:3 daha iyi durabilir mobilde) */
    position: relative;
    height: 0;
}

.map-section .harita-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border: 0; /* İframe kenarlığını kaldırır */
    border-radius: 0.5rem; /* İframe köşe радиус (isteğe bağlı) */
}


/* Pursaklar Hizmet Özellikleri Bölümü Stilleri */
.service-features-section {
    background-color: #fff; /* Beyaz arka plan */
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.service-features-section h2 {
    color: var(--kurumsal-mavi);
    text-align: center;
    margin-bottom: 2rem;
}

.service-features-section p {
    color: #777;
    text-align: center;
    margin-bottom: 3rem;
    font-size: 1.0rem;
}

.service-features-section .service-feature {
    margin-bottom: 2rem;
}

.service-features-section .service-box i.bi { /* Bootstrap Icons için */
    font-size: 2.2rem; /* İkon boyutunu biraz küçültelim bu bölümde */
}

.service-features-section .service-box h3 {
    font-size: 1.05rem; /* Başlık boyutunu biraz küçültelim bu bölümde */
}

/*Logo metni*/
.servis-destek-metini{
    font-size: larger;
    color: #005A9C;
    text-align: center; /* Genel metin hizalaması */
}