* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Kutuların taşmasını engeller */
}

body {
    font-family: 'Montserrat', sans-serif; /* Tüm sitede bu fontu kullan */
    line-height: 1.6;
    background-color: #f9f9f9; /* Gözü yormayan çok açık gri zemin */
}

/* --- KAPSAYICI (CONTAINER) --- */
/* İçerikleri ortalamak ve kenarlardan boşluk bırakmak için */
.container {
    width: 90%;
    max-width: 1200px; /* Geniş ekranlarda içeriği 1200px'e sabitler */
    margin: 0 auto; /* Ortalar */
    display: flex; /* İçindekileri yan yana dizer */
    justify-content: space-between; /* Logo sola, menü sağa */
    align-items: center; /* Dikey olarak ortalar */
}

/* --- HEADER (MENÜ ÇUBUĞU) --- */
header {
    background-color: #ffffff; /* Beyaz arka plan (Dost İnşaat Tarzı) */
    height: 90px; /* Menü yüksekliği */
    display: flex;
    align-items: center; /* İçindekileri dikey ortala */
    
    /* Modern Gölge Efekti */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    
    /* Yapışkan Menü Özelliği (Sayfa kayınca üstte kalır) */
    position: sticky;
    top: 0;
    z-index: 1000; /* Her şeyin üstünde dursun */
}

/* --- LOGO TASARIMI --- */
.logo {
    font-size: 28px;
    font-weight: 800; /* Çok kalın */
    color: #222; /* Koyu antrasit renk */
    text-decoration: none; /* Altçizgiyi kaldır */
    letter-spacing: -1px; /* Harfleri sıklaştır */
}

.logo span {
    color: #c0392b; /* İNŞAAT yazısı için kiremit kırmızısı */
    /* Burayı şirketinin kurumsal rengiyle değiştirebilirsin */
}

/* --- MENÜ LİNKLERİ --- */
nav {
    flex-grow: 1; /* Boş alanı doldursun */
    display: flex;
    justify-content: center; /* İçindeki linkleri yatayda ortalasın */
}

nav ul {
    display: flex; /* Yan yana diz */
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none; /* Noktaları kaldır */
}

nav ul li {
    margin-left: 35px; /* Linklerin arasını aç */
}

nav ul li a {
    color: #444; /* Yazı rengi koyu gri */
    text-decoration: none;
    font-size: 13px; /* Kibar ve küçük font */
    font-weight: 600; /* Orta kalınlık */
    text-transform: uppercase; /* Hepsi büyük harf */
    letter-spacing: 1px; /* Harf aralığı */
    transition: color 0.3s ease; /* Renk değişimi yumuşak olsun */
}

/* Mouse ile üzerine gelince */
nav ul li a:hover {
    color: #c0392b; /* Logo rengiyle aynı olsun */
}

.hero {
    position: relative; /* İçindeki yazıları serbestçe yerleştirebilmek için */
    width: 100%;
    height: 600px; /* Vitrinin yüksekliği (İstersen arttırabilirsin) */
    background-image: url('images/slider.jpg'); /* Arka plan resmi */
    background-size: cover; /* Resmi kutuya sığdır (Kesmeden doldur) */
    background-position: center; /* Resmin ortasını göster */
    display: flex; /* İçeriği ortalamak için Flexbox */
    align-items: center; /* Dikey ortala */
    justify-content: center; /* Yatay ortala */
    text-align: center; /* Yazıları ortala */
}

/* Karartma Perdesi (Resim çok parlaksa yazı okunmaz, bu yüzden siyah perde çekiyoruz) */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Siyahın %50 saydam hali */
    z-index: 1; /* Resmin üstünde, yazının altında dursun */
}

/* Yazı ve İçerik Alanı */
.hero-content {
    position: relative;
    z-index: 2; /* Perdenin üstünde dursun */
    max-width: 800px; /* Yazılar çok kenara yayılmasın */
    padding: 20px;
    color: white;
}

/* Ana Başlık (H1) */
.hero-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    letter-spacing: 1px;
}

.hero-content h1 span {
    color: #c0392b; /* "İNŞA EDİYORUZ" kısmını kırmızı yapalım */
}

/* Alt Açıklama Yazısı */
.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
    font-weight: 400;
    opacity: 0.9; /* Hafif saydamlık şıklık katar */
}

/* --- BUTON TASARIMLARI --- */
.btn {
    display: inline-block;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 4px; /* Köşeleri hafif yuvarla */
    transition: all 0.3s ease;
    margin: 5px; /* Butonlar birbirine yapışmasın */
}

/* Kırmızı Dolu Buton */
.btn-primary {
    background-color: #c0392b;
    color: white;
    border: 2px solid #c0392b;
}

.btn-primary:hover {
    background-color: transparent; /* Üzerine gelince içi boşalsın */
    color: #c0392b;
}

/* Şeffaf Çerçeveli Buton */
.btn-outline {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.btn-outline:hover {
    background-color: white; /* Üzerine gelince içi dolsun */
    color: #333;
}

/* --- HİZMETLER (SERVİSLER) BÖLÜMÜ --- */
.services {
    padding: 80px 0; /* Üstten ve alttan geniş boşluk */
    background-color: #f9f9f9; /* Hafif gri zemin */
}

/* Kutuların Dizilimi */
.services .container {
    display: flex; /* Yan yana diz */
    justify-content: space-between; /* Aralarını aç */
    gap: 30px; /* Kutular birbirine yapışmasın */
    flex-wrap: wrap; /* Telefondan girilirse alt alta geçsin */
}

/* Tek Bir Kutunun Tasarımı */
.service-box {
    background-color: white; /* Kutunun içi beyaz */
    padding: 40px 30px; /* İç boşluk */
    text-align: center; /* Yazıları ve ikonu ortala */
    border-radius: 8px; /* Köşeleri yuvarla */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Hafif gölge */
    flex: 1; /* Kutuların hepsi eşit genişlikte olsun */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hareket efekti */
}

/* Kutuya Mouse ile Gelince (Hover Efekti) */
.service-box:hover {
    transform: translateY(-10px); /* Yukarı kalksın */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Gölge büyüsün */
    border-bottom: 3px solid #c0392b; /* Altına kırmızı çizgi */
}

/* İkon Tasarımı */
.service-box i {
    font-size: 50px;
    color: #c0392b; /* Mika Kırmızısı */
    margin-bottom: 20px;
}

/* Başlık Tasarımı */
.service-box h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #222;
    font-weight: 700;
}

/* Açıklama Yazısı (Burası güncellendi) */
.service-box p {
    color: #555;
    font-size: 15px; /* Okunabilirliği artırdık */
    line-height: 1.6;
    margin-top: 10px;
}

/* --- YENİ EKLENEN: BUTON ALANI --- */
.services-btn-container {
    width: 100%; /* Bulunduğu satırı tamamen kaplasın */
    text-align: center; /* Butonu ortalasın */
    margin-top: 50px; /* Kutularla buton arasına mesafe */
}

/* --- HAKKIMIZDA ÖZET BÖLÜMÜ --- */
.about-section {
    padding: 100px 0; /* Geniş bir boşluk bırakalım */
    background-color: #ffffff; /* Bembeyaz zemin */
}

/* İçeriği Hizalama */
.about-section .container {
    display: flex; /* Yan yana getir */
    align-items: center; /* Dikey olarak ortala */
    justify-content: space-between; /* Aralarını aç */
    flex-wrap: wrap; /* Mobilde alt alta geçsin */
}

/* Sol Taraf (Yazı) Ayarları */
.about-content {
    flex: 1; /* Mevcut alanın yarısını kaplasın */
    padding-right: 50px; /* Resimle arasına mesafe koy */
    min-width: 300px; /* Çok küçülürse alt satıra geçsin */
}

/* Küçük Üst Başlık (BİZ KİMİZ?) */
.sub-title {
    color: #c0392b; /* Kırmızı renk */
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    display: block;
}

/* Ana Başlık */
.about-content h2 {
    font-size: 36px;
    color: #222;
    line-height: 1.3;
    margin-bottom: 25px;
    font-weight: 800;
}

/* Paragraf Yazıları */
.about-content p {
    color: #666;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
}

/* Sağ Taraf (Resim) Ayarları */
.about-image {
    flex: 1; /* Diğer yarıyı kaplasın */
    position: relative;
}

.about-image img {
    width: 100%; /* Kutusuna tam sığsın */
    border-radius: 8px; /* Köşeleri yumuşat */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* Havalı bir gölge ver */
}

/* --- MOBİL UYUMLULUK (Responsive) --- */
/* Ekran 768px'den küçükse (Tablet ve Telefon) */
@media (max-width: 768px) {
    .about-section .container {
        flex-direction: column; /* Yan yana değil, alt alta olsun */
    }

    .about-content {
        padding-right: 0;
        margin-bottom: 40px; /* Resimle arasına boşluk */
        text-align: center; /* Mobilde yazıları ortala */
    }
}
/* --- MODERN PROJE VİTRİNİ (Revize: Aydınlık Tema) --- */
.project-showcase {
    padding: 100px 0;
    background-color: #f4f4f4; /* Hafif gri zemin (Hakkımızda beyazdı, bu gri olsun) */
    color: #333; /* Yazılar tekrar koyu renk */
    overflow: hidden;
}

.project-showcase .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Sol Yazı Alanı */
.showcase-info {
    width: 40%;
    padding-right: 40px;
}

/* Başlık Renkleri (Koyu Gri) */
.showcase-info h2 {
    color: #222; 
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Açıklama Yazısı */
.showcase-info p {
    color: #555; /* Okunaklı gri */
    font-size: 16px;
    line-height: 1.7;
}

.sub-title {
    color: #c0392b; /* Kırmızı */
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.mt-30 {
    margin-top: 30px;
}

/* --- SAĞ TARAF: KART SLIDER ALANI --- */
.slider-wrapper {
    width: 50%;
    height: 450px;
    position: relative;
    perspective: 1000px;
}

/* Kart Tasarımı */
.project-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    /* Kartın gri zeminde belli olması için gölgeyi ayarladık */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); 
    transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    opacity: 0;
    transform: translateY(100%) scale(0.9);
    z-index: 0;
    background-color: white; /* Resim yüklenmezse arkası beyaz kalsın */
}

/* Aktif ve Çıkış Yapan Kart Ayarları (Aynı kalıyor) */
.project-card.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    z-index: 2;
}

.project-card.exit {
    opacity: 0;
    transform: translateY(-20%) scale(0.95);
    z-index: 1;
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kart Üzerindeki Yazı (Gradient) */
.card-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    /* Yazı okunsun diye resmin üzerine siyah gölge atıyoruz */
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); 
    color: white;
}

.card-caption h3 {
    font-size: 24px;
    margin-bottom: 5px;
    font-weight: 700;
}

.card-caption span {
    font-size: 14px;
    color: #f1c40f; /* Sarı */
    font-weight: 600;
}

/* Mobil */
@media (max-width: 900px) {
    .project-showcase .container {
        flex-direction: column;
    }
    .showcase-info {
        width: 100%;
        text-align: center;
        margin-bottom: 50px;
        padding-right: 0;
    }
    .slider-wrapper {
        width: 100%;
        height: 350px;
    }
}

/* Kart tasarımları aynen kalıyor, çünkü zaten çok şıktı */
.project-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); /* Gölgeyi biraz daha koyulaştırdık */
    transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    opacity: 0;
    transform: translateY(100%) scale(0.9);
    z-index: 0;
}

.project-card.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    z-index: 2;
}

.project-card.exit {
    opacity: 0;
    transform: translateY(-20%) scale(0.95);
    z-index: 1;
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);
    color: white;
}

.card-caption h3 {
    font-size: 24px;
    margin-bottom: 5px;
    font-weight: 700;
}

.card-caption span {
    font-size: 14px;
    color: #f1c40f;
    font-weight: 600;
}

/* Mobil Uyumluluk */
@media (max-width: 900px) {
    .project-showcase .container {
        flex-direction: column;
    }
    .showcase-info {
        width: 100%;
        text-align: center;
        margin-bottom: 50px;
        padding-right: 0;
    }
    .slider-wrapper {
        width: 100%;
        height: 350px;
    }
}

/* --- FOOTER (ALT BİLGİ) TASARIMI --- */
footer {
    background-color: #001f3f; /* Ford tarzı Kurumsal Lacivert */
    color: white;
    padding: 60px 0; /* Geniş iç boşluk */
    font-size: 14px;
    border-top: 5px solid #c0392b; /* Üstüne ince bir kırmızı çizgi (Mika Rengi) çok yakışır */
}

footer .container {
    display: flex;
    justify-content: space-between; /* Sağa ve sola yasla */
    align-items: flex-start; /* Yukarıdan hizala */
    flex-wrap: wrap; /* Mobilde sıkışırsa alta geçsin */
}

/* --- SOL TARAF --- */
.footer-left {
    max-width: 60%; /* Sol taraf ekranın %60'ını kaplasın */
}

.footer-left h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.footer-left p {
    margin-bottom: 8px;
    opacity: 0.9; /* Hafif şeffaflık zarif durur */
    line-height: 1.6;
}

.footer-left .mersis {
    font-weight: 600;
    margin-top: 15px;
}

.copyright {
    margin-top: 30px;
    font-size: 12px;
    opacity: 0.6;
}

/* --- SAĞ TARAF --- */
.footer-right {
    display: flex;
    flex-direction: column; /* Alt alta diz (İkonlar üstte, logo altta) */
    align-items: flex-end; /* Sağa yasla */
}

/* Sosyal Medya İkonları */
.social-icons {
    display: flex;
    gap: 15px; /* İkonların arası */
    margin-bottom: 30px; /* Logo ile mesafe */
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.7); /* İnce beyaz çerçeve */
    border-radius: 50%; /* Tam yuvarlak yap */
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* İkona gelince içi dolsun */
.social-icons a:hover {
    background-color: white;
    color: #001f3f; /* İkon rengi lacivert olsun */
    border-color: white;
}

/* Sağ Alttaki Logo */
.footer-logo {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    color: white;
}

.footer-logo span {
    color: white; /* Logoyu tamamen beyaz yaptık, koyu zeminde daha asil durur */
}

/* --- MOBİL UYUMLULUK --- */
@media (max-width: 768px) {
    footer .container {
        flex-direction: column; /* Alt alta diz */
        text-align: center; /* Her şeyi ortala */
    }

    .footer-left {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .footer-right {
        align-items: center; /* Mobilde ikonları ortala */
        width: 100%;
    }
}

/* --- FOOTER E-BÜLTEN KUTUSU TASARIMI --- */
.newsletter-box {
    margin-top: 20px; /* Üstteki yazılardan biraz ayrilsin */
    max-width: 350px; /* Çok geniş olmasın, kibar dursun */
}

.newsletter-box span {
    display: block;
    font-size: 13px;
    color: #ccc; /* Hafif gri açıklama yazısı */
    margin-bottom: 8px;
}

.newsletter-form {
    display: flex; /* Input ve butonu yan yana yapıştır */
    background: rgba(255, 255, 255, 0.1); /* Hafif şeffaf arka plan */
    border-radius: 4px; /* Köşeleri yuvarla */
    padding: 3px; /* İç çerçeve boşluğu */
    border: 1px solid rgba(255, 255, 255, 0.2); /* İnce çerçeve */
}

.newsletter-form input {
    flex: 1; /* Kalan boşluğu kapla */
    background: transparent; /* Arka planı şeffaf yap */
    border: none; /* Çerçeveyi kaldır */
    padding: 10px 15px;
    color: white; /* Yazı rengi beyaz */
    font-size: 13px;
    outline: none; /* Tıklayınca çıkan mavi çizgiyi kaldır */
    font-family: 'Montserrat', sans-serif;
}

/* Input içindeki "placeholder" yazısının rengi */
.newsletter-form input::placeholder {
    color: #bbb;
}

.newsletter-form button {
    background-color: #c0392b; /* Mika Kırmızısı */
    color: white;
    border: none;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.3s;
}

.newsletter-form button:hover {
    background-color: #e74c3c; /* Üzerine gelince rengi açılsın */
}

/* --- DİL DEĞİŞTİRİCİ (Language Switcher) --- */
.header-content {
    display: flex;
    justify-content: space-between; /* Logo sola, diğerleri sağa */
    align-items: center;
    gap: 20px; /* Elemanlar arasına boşluk */
    /* ... diğer kodlar ... */
}

.language-switcher {
    display: flex;
    align-items: center;
    font-weight: 700; /* Kalın yazı */
    font-size: 14px;
    margin-left: auto; /* En sağa itmek için (Eğer header flex ise çalışır) */
}

/* Mobilde menü içine girmemesi için ayar (Gerekirse) */
@media (max-width: 768px) {
     .language-switcher {
         /* Mobil menü tasarımına göre burayı ayarlamak gerekebilir. 
            Şimdilik masaüstü odaklı gidelim. */
         display: none; /* Mobilde yer kalmazsa gizle veya menü içine al */
     }
}

.lang-link {
    text-decoration: none;
    color: #333; /* Standart koyu renk */
    padding: 5px;
    transition: color 0.3s;
}

.lang-link:hover {
    color: #c0392b; /* Mika Kırmızısı (Üzerine gelince) */
}

.divider {
    margin: 0 5px;
    color: #ccc; /* Araya silik bir çizgi */
}

/* --- AKTİF DİL RENGİ (Önemli!) --- */
/* Türkçe sayfadayken TR kırmızı olsun */
html[lang="tr"] .tr-link {
    color: #c0392b;
    pointer-events: none; /* Zaten bu dildeyiz, tıklanmasın */
}

/* İngilizce sayfadayken EN kırmızı olsun */
html[lang="en"] .en-link {
    color: #c0392b;
    pointer-events: none;
}

/* --- ILETISIM HARITA BOLUMU --- */
.map-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.map-inner {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.map-section h2 {
    font-size: 28px;
    color: #222;
    font-weight: 700;
    margin-bottom: 10px;
}

.map-section p {
    color: #555;
    margin-bottom: 20px;
}

.map-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    background-color: #f0f0f0;
}

.map-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-link {
    display: inline-block;
    margin-top: 14px;
    color: #c0392b;
    text-decoration: none;
    font-weight: 600;
}

.map-link:hover {
    text-decoration: underline;
}

/* --- ILETISIM FORMU VE BILGILER --- */
.contact-section {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.contact-inner {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
}

.contact-form h2,
.contact-info h2 {
    font-size: 28px;
    color: #1f3c88;
    font-weight: 700;
    margin-bottom: 16px;
}

.contact-status {
    display: none;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

.contact-status.success {
    display: block;
    background-color: #eaf7f0;
    color: #1f7a3a;
    border: 1px solid #bfe7d0;
}

.contact-status.error {
    display: block;
    background-color: #fdecec;
    color: #9c2d2d;
    border: 1px solid #f4c4c4;
}

.contact-form-fields {
    display: block;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    background-color: #ffffff;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192,57,43,0.12);
}

.g-recaptcha {
    margin: 10px 0 20px;
}

.contact-info p {
    color: #666;
    margin-bottom: 24px;
    line-height: 1.7;
}

.info-block h3 {
    font-size: 18px;
    color: #222;
    font-weight: 700;
    margin-bottom: 16px;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    color: #555;
    line-height: 1.5;
}

.info-list i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #1f3c88;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

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

    .form-row {
        grid-template-columns: 1fr;
    }
}