/* Genel Stil Ayarları */
* {
    box-sizing: border-box; /* Kutuların boyutlandırma modelini belirler */
    margin: 0; /* Dış boşlukları sıfırlar */
    padding: 0; /* İç boşlukları sıfırlar */
}

body {  
   font-family: 'Roboto', sans-serif; /* Ana yazı tipi */
    line-height: 1.6; /* Satır yüksekliği */
   color: #333; /* Genel metin rengi */
   background-color: #f8f8f8; /* Arka plan rengi */
   scroll-behavior: smooth; /* Sayfa içi geçişlerde yumuşak kaydırma */
}


.container {
    width: 90%; /* Konteyner genişliği */
    max-width: 1200px; /* Maksimum konteyner genişliği */
    margin: auto; /* Ortalamak için otomatik dış boşluk */
    overflow: hidden; /* Taşmaları gizle */
}

/* Başlıklar ve Bağlantılar */
h1, h2, h3 {
    color: #004d99; /* Kurumsal Mavi */
    margin-bottom: 1rem; /* Alt boşluk */
    padding: 1px 0;
}

a {
    text-decoration: none; /* Alt çizgiyi kaldır */
    color: #004d99; /* Bağlantı rengi */
}

ul {
    list-style: none; /* Liste işaretlerini kaldır */
}

/* Bölüm Başlıkları */
.section-padding {
    padding: 80px 0; /* Bölümlerin üst ve alt boşlukları */
}

.bg-light {
    background-color: #f0f4f8; /* Açık arka plan rengi */
}

.section-title {
    font-size: 2.8rem; /* Bölüm başlığı boyutu */
    text-align: center; /* Ortala */
    margin-bottom: 20px; /* Alt boşluk */
    color: #004d99;
}

.section-subtitle {
    font-size: 1.2rem; /* Alt başlık boyutu */
    text-align: center; /* Ortala */
    margin-bottom: 60px; /* Alt boşluk */
    color: #666;
}

/* Buton Stilleri */
.btn {
    display: inline-block; /* Satır içi blok element */
    padding: 12px 28px; /* İç boşluk */
    border-radius: 50px; /* Yuvarlak köşeler */
    font-weight: bold; /* Kalın yazı */
    transition: all 0.3s ease; /* Geçiş efekti */
    text-align: center;
}

.btn-primary {
    background-color: #ff7f00; /* Turuncu Vurgu */
    color: #ffffff; /* Metin rengi */
    border: 2px solid #ff7f00; /* Kenarlık */
}

.btn-primary:hover {
    background-color: #e67300; /* Hover rengi */
    border-color: #e67300;
    transform: translateY(-3px); /* Hafif yukarı kayma efekti */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Hafif gölge */
}

/* Header Stilleri */
.header {
    background: #ffffff; /* Beyaz arka plan */
    padding: 1rem 0; /* İç boşluk */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); /* Hafif gölge */
    position: sticky; /* Yapışkan header */
    top: 0; /* Üste sabitle */
    z-index: 1000; /* Diğer elementlerin üzerinde olmasını sağlar */
}

.header .container {
    display: flex; /* Flexbox kullanımı */
    justify-content: space-between; /* Öğeleri iki yana yasla */
    align-items: center; /* Dikeyde ortala */
}

/* Logo ve Başlık İçin Yeni Stiller */
.logo {
    display: flex; /* Logo ve başlığı yan yana hizalamak için flexbox kullan */
    align-items: center; /* Dikeyde ortala */
    gap: 30px; /* Logo ile başlık arasına boşluk ekle */
}

.logo img { /* Logo görseli için stil */
    height: 80px; /* Logonun yüksekliği */
    width: auto; /* Orantılı genişlik */
    border-radius: 5px; /* Hafif yuvarlak köşeler */
}

.logo h1 {
    font-size: 1.8rem; /* Logo başlık boyutu */
    margin: 0; /* Başlık boşluğunu sıfırla */
    color: #004d99; /* Logo rengi */
    letter-spacing: -0.5px; /* Harf aralığı */
}

.main-nav ul {
    display: flex; /* Navigasyon öğelerini yan yana diz */
}

.main-nav ul li {
    margin-left: 30px; /* Liste öğeleri arası boşluk */
}

.main-nav ul li a {
    color: #555; /* Navigasyon bağlantı rengi */
    font-weight: 500; /* Yazı kalınlığı */
    transition: color 0.3s ease, transform 0.3s ease; /* Geçiş efekti */
    position: relative; /* Alt çizgi için konumlandırma */
}

.main-nav ul li a:hover {
    color: #ff7f00; /* Hover rengi */
    transform: translateY(-2px); /* Hafif yukarı kayma efekti */
}

.main-nav ul li a::after {
    content: ''; /* Sahte element */
    position: absolute; /* Konumlandırma */
    width: 0; /* Başlangıçta genişlik sıfır */
    height: 2px; /* Çizgi kalınlığı */
    background: #ff7f00; /* Çizgi rengi */
    left: 0; /* Soldan başla */
    bottom: -5px; /* Bağlantının altında konumlandır */
    transition: width 0.3s ease; /* Genişlik geçiş efekti */
}

.main-nav ul li a:hover::after {
    width: 100%; /* Hover'da tam genişlik */
}

/* Hero Bölümü Stilleri */
.hero-section {
    background: linear-gradient(rgba(0, 77, 153, 0.8), rgba(0, 77, 153, 0.8)), url('logo3.png') no-repeat center center/cover; /* Arka plan resmi ve degrade */
    color: #ffffff; /* Metin rengi */
    padding: 150px 0; /* İç boşluk */
    text-align: center; /* Metni ortala */
    display: flex; /* Flexbox kullanımı */
    align-items: center; /* Dikeyde ortala */
    min-height: 60vh; /* Minimum yükseklik */
}

.hero-content h2 {
    font-size: 3.5rem; /* Başlık boyutu */
    margin-bottom: 20px; /* Alt boşluk */
    color: #ffffff;
    line-height: 1.2;
}

.hero-content p {
    font-size: 1.3rem; /* Paragraf boyutu */
    margin-bottom: 40px; /* Alt boşluk */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Hizmetler Bölümü Stilleri */
.service-grid {
    display: grid; /* Grid düzeni */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Duyarlı sütunlar */
    gap: 30px; /* Izgara boşluğu */
}

.service-card {
    background: #ffffff; /* Kart arka planı */
    padding: 30px; /* İç boşluk */
    border-radius: 10px; /* Yuvarlak köşeler */
    box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* Gölge */
    text-align: center; /* Metni ortala */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Geçiş efekti */
}

.service-card:hover {
    transform: translateY(-10px); /* Hafif yukarı kayma efekti */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Daha belirgin gölge */
}

.service-icon {
    font-size: 3.5rem; /* İkon boyutu */
    color: #ff7f00; /* İkon rengi */
    margin-bottom: 20px; /* Alt boşluk */
}

.service-card h3 {
    font-size: 1.7rem; /* Kart başlığı boyutu */
    margin-bottom: 15px; /* Alt boşluk */
    color: #004d99;
}

.service-card p {
    font-size: 1rem; /* Kart metin boyutu */
    color: #666;
}

/* Hakkımızda Bölümü Stilleri */
.about-content {
    text-align: center; /* Metni ortala */
    max-width: 900px;
    margin: 0 auto;
}

.about-content p {
    font-size: 1.1rem; /* Paragraf boyutu */
    margin-bottom: 20px; /* Alt boşluk */
    color: #555;
}

/* Projeler Bölümü Stilleri */
.projects-section {
    background-color: #ffffff; /* Arka plan rengi */
}

.project-grid {
    display: grid; /* Grid düzeni */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Duyarlı sütunlar */
    gap: 30px; /* Izgara boşluğu */
}

.project-card {
    background: #ffffff; /* Kart arka planı */
    border-radius: 10px; /* Yuvarlak köşeler */
    box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* Gölge */
    overflow: hidden; /* Taşmaları gizle */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Geçiş efekti */
}

.project-card:hover {
    transform: translateY(-10px); /* Hafif yukarı kayma efekti */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Daha belirgin gölge */
}

.project-image {
    width: 100%; /* Resim genişliği */
    height: 250px; /* Resim yüksekliği */
    object-fit: cover; /* Resmi kutuya sığdır */
    display: block; /* Blok element */
}

.project-card h3 {
    font-size: 1.5rem; /* Proje başlığı boyutu */
    margin: 20px 20px 10px; /* Boşluklar */
    color: #004d99;
}

.project-card p {
    font-size: 1rem; /* Proje metin boyutu */
    margin: 0 20px 20px; /* Boşluklar */
    color: #666;
}

/* Neden Biz? Bölümü Stilleri (Yeni Bölüm) */
.why-us-section {
    background-color: #f0f4f8; /* Açık arka plan rengi */
}

.why-us-grid {
    display: grid; /* Grid düzeni */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Duyarlı sütunlar */
    gap: 30px; /* Izgara boşluğu */
}

.why-us-item {
    background: #ffffff; /* Kart arka planı */
    padding: 30px; /* İç boşluk */
    border-radius: 10px; /* Yuvarlak köşeler */
    box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* Gölge */
    text-align: center; /* Metni ortala */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Geçiş efekti */
}

.why-us-item:hover {
    transform: translateY(-10px); /* Hafif yukarı kayma efekti */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Daha belirgin gölge */
}

.why-us-icon {
    font-size: 3.5rem; /* İkon boyutu */
    color: #004d99; /* İkon rengi */
    margin-bottom: 20px; /* Alt boşluk */
}

.why-us-item h3 {
    font-size: 1.7rem; /* Kart başlığı boyutu */
    margin-bottom: 15px; /* Alt boşluk */
    color: #ff7f00; /* Turuncu vurgu rengi */
}

.why-us-item p {
    font-size: 1rem; /* Kart metin boyutu */
    color: #666;
}

/* İletişim Bölümü Stilleri */
.contact-section {
    background-color: #ffffff; /* Arka plan rengi */
}

.contact-info-grid {
    display: grid; /* Grid düzeni */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Duyarlı sütunlar */
    gap: 30px; /* Izgara boşluğu */
    margin-bottom: 50px; /* Alt boşluk */
    text-align: center;
}

.contact-item {
    background: #ffffff; /* Kart arka planı */
    padding: 30px; /* İç boşluk */
    border-radius: 10px; /* Yuvarlak köşeler */
    box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* Gölge */
}

.contact-icon {
    font-size: 2.5rem; /* İkon boyutu */
    color: #004d99; /* İkon rengi */
    margin-bottom: 15px; /* Alt boşluk */
}

.contact-item p {
    font-size: 1.1rem; /* Metin boyutu */
    color: #555;
}

/* İletişim Formu Stilleri (Eğer kullanılacaksa) */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
}

.contact-form textarea {
    resize: vertical; /* Sadece dikeyde yeniden boyutlandırma */
}

.contact-form button {
    width: auto;
    align-self: center; /* Butonu ortala */
    padding: 15px 40px;
    font-size: 1.1rem;
}


/* Footer Stilleri */
.footer {
    background: #222; /* Koyu arka plan */
    color: #ffffff; /* Metin rengi */
    padding: 30px 0; /* İç boşluk */
    text-align: center; /* Metni ortala */
}

.footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer p {
    margin-bottom: 15px; /* Alt boşluk */
    font-size: 0.9rem;
}

.social-links a {
    color: #ffffff; /* Sosyal medya ikon rengi */
    font-size: 1.5rem; /* İkon boyutu */
    margin: 0 10px; /* İkonlar arası boşluk */
    transition: color 0.3s ease; /* Geçiş efekti */
}

.social-links a:hover {
    color: #ff7f00; /* Hover rengi */
}

/* Duyarlı Tasarım (Responsive Design) */
@media (max-width: 768px) {
    .header .container {
        flex-direction: column; /* Küçük ekranlarda dikey hizala */
        text-align: center;
    }

    .main-nav ul {
        flex-direction: column; /* Menü öğelerini dikey hizala */
        margin-top: 15px;
    }

    .main-nav ul li {
        margin: 10px 0; /* Dikey boşluk */
    }

    .hero-content h2 {
        font-size: 2.5rem; /* Başlık boyutunu küçült */
    }

    .hero-content p {
        font-size: 1rem; /* Paragraf boyutunu küçült */
    }

    .section-title {
        font-size: 2rem; /* Bölüm başlığı boyutunu küçült */
    }

    .section-subtitle {
        font-size: 1rem; /* Alt başlık boyutunu küçült */
        margin-bottom: 40px;
    }

    .service-grid, .project-grid, .contact-info-grid, .why-us-grid {
        grid-template-columns: 1fr; /* Tek sütuna düşür */
    }

    .service-card, .project-card, .contact-item, .why-us-item {
        padding: 25px; /* İç boşlukları ayarla */
    }
}

@media (max-width: 480px) {
    .logo h1 {
        font-size: 1.5rem; /* Logo başlık boyutunu daha da küçült */
    }

    .hero-content h2 {
        font-size: 2rem; /* Başlık boyutunu daha da küçült */
    }

    .btn {
        padding: 10px 20px; /* Buton boyutunu küçült */
        font-size: 0.9rem;
    }

    .section-padding {
        padding: 50px 0; /* Bölüm boşluklarını küçült */
    }
}