:root {
        --primary-color: #d90429;
        --primary-color-light: #ef233c;
        --secondary-dark: #2b2d42;
    }
    
    body { background-color: #edf2f4; color: #333; }

    .contact-hero {
        position: relative; height: 400px; background-attachment: fixed; background-position: center; background-size: cover;
        display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden;
    }
    .contact-hero::before {
        content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(217, 4, 41, 0.4) 100%); z-index: 1;
    }
    .hero-content { position: relative; z-index: 2; max-width: 700px; padding: 0 20px; }
    .hero-content h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 15px; }

    .contact-container { max-width: 1200px; margin: -80px auto 50px; padding: 0 20px; position: relative; z-index: 10; }
    .contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px; margin-bottom: 50px; }

    /* BİLGİ KARTI */
    .contact-info-card { background: #fff; padding: 50px 40px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.05); position: relative; overflow: hidden; }
    .info-header h3 { font-size: 1.8rem; color: #2b2d42; margin-bottom: 30px; font-weight: 700; border-left: 5px solid var(--primary-color); padding-left: 15px; }
    .info-row { display: flex; align-items: flex-start; margin-bottom: 35px; }
    .icon-box { width: 60px; height: 60px; background: rgba(217, 4, 41, 0.1); color: var(--primary-color); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-right: 20px; }

    /* FORM KARTI */
    .contact-form-card { background: #fff; padding: 50px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.05); }
    .form-style { width: 100%; padding: 15px 0; border: none; border-bottom: 2px solid #ddd; font-size: 1rem; background: transparent; transition: 0.3s; margin-bottom: 25px; }
    .form-style:focus { outline: none; border-bottom-color: var(--primary-color); }
    .btn-send { background: linear-gradient(90deg, var(--primary-color), var(--primary-color-light)); color: #fff; padding: 18px 40px; border: none; border-radius: 50px; font-weight: 700; cursor: pointer; width: 100%; transition: 0.4s; box-shadow: 0 10px 20px rgba(217, 4, 41, 0.3); }

    /* SSS STİLLERİ */
    .faq-section { margin-bottom: 50px; }
    .faq-title { text-align: center; font-size: 2.2rem; color: #2b2d42; margin-bottom: 35px; font-weight: 800; font-family: 'Montserrat', sans-serif; }
    .accordion { display: flex; flex-direction: column; gap: 15px; max-width: 1000px; margin: 0 auto; }
    .accordion-item { background: #fff; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); overflow: hidden; transition: 0.3s; border-left: 0 solid var(--primary-color); }
    .accordion-header { width: 100%; padding: 25px 30px; background: none; border: none; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 600; color: #333; cursor: pointer; text-align: left; }
    .accordion-header .icon { font-size: 1.4rem; color: #aaa; transition: 0.3s; }
    .accordion-content { max-height: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0, 1, 0, 1); background: #fff; padding: 0 30px; }
    .accordion-content p { padding: 0 0 25px; color: #666; line-height: 1.7; border-top: 1px solid #f1f1f1; padding-top: 20px; }
    .accordion-item.active { border-left-width: 6px; }
    .accordion-item.active .icon { transform: rotate(45deg); color: var(--primary-color); }
    .accordion-item.active .accordion-content { max-height: 1000px; transition: all 0.4s cubic-bezier(1, 0, 1, 0); }

    /* HARİTA */
    .map-card { background: #fff; border-radius: 20px; padding: 15px; box-shadow: 0 20px 50px rgba(0,0,0,0.05); height: 450px; margin-top: 50px; }
    .map-card iframe { width: 100%; height: 100%; border: none; border-radius: 15px; }

    @media (max-width: 992px) { .contact-grid { grid-template-columns: 1fr; } .contact-container { margin-top: -50px; } }
.contact-section { /* İletişim bölümünün ana kapsayıcısı */
    max-width: 600px; /* Genişliği en fazla 600 piksel ile sınırla */
    margin: 50px auto; /* Üstten/alttan 50px boşluk bırak, yatayda ortala */
    background-color: #ffffff; 
    padding: 30px; /* İçeriğe her yönden 30px boşluk ver */
    border-radius: 10px; /* Köşeleri 10px yuvarlat */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Hafif bir gölge ekle */
}

.contact-section h2, /* İletişim bölümündeki H2 başlıkları */
.contact-section h3 { /* İletişim bölümündeki H3 başlıkları */
    color: #c62828; 
    margin-bottom: 15px; /* Altına 15px boşluk bırak */
}

.contact-info p { /* İletişim bilgilerindeki paragraflar */
    margin: 6px 0; /* Üstten/alttan 6px boşluk bırak */
    font-size: 15px; /* Yazı boyutunu 15px yap */
}

.contact-form { /* İletişim formu kapsayıcısı */
    display: flex; /* Esnek kutu düzenini aç */
    flex-direction: column; /* Elemanları alt alta diz */
    gap: 12px; /* Elemanlar arasına 12px boşluk koy */
    margin-top: 20px; /* Üstten 20px boşluk bırak */
}

.contact-form input, /* Formdaki giriş alanları */
.contact-form textarea { /* Formdaki metin alanı */
    padding: 10px; /* İçeriğe 10px boşluk ver */
    font-size: 14px; /* Yazı boyutunu 14px yap */
    border: 1px solid #ccc; /* Gri renkte ince kenarlık ekle */
    border-radius: 6px; /* Köşeleri 6px yuvarlat */
    resize: vertical; /* Sadece dikey boyutlandırmaya izin ver */
}

.contact-form button { /* Formdaki gönder butonu */
    background-color: #c62828; 
    color: white; 
    border: none; /* Kenarlık çizgisini kaldır */
    padding: 12px; /* İçeriğe 12px boşluk ver */
    font-size: 16px; /* Yazı boyutunu 16px yap */
    border-radius: 6px; /* Köşeleri 6px yuvarlat */
    cursor: pointer; /* Üzerine gelince el imleci göster */
    transition: background-color 0.3s; 
}

.contact-form button:hover { /* Butonun üzerine gelince */
    background-color: #b71c1c; 
}

.map-container iframe { /* Harita kapsayıcısındaki iframe */
    width: 100%; /* Genişliği %100 yap */
    height: 300px; /* Yüksekliği 300px yap */
    border: 0; /* Kenarlık çizgisini kaldır */
    border-radius: 10px; /* Köşeleri 10px yuvarlat */
}

body { /* Sayfanın genel gövdesi */
    background-color: #edf2f4; 
    color: #333;
}

.contact-hero { /* İletişim sayfasının üst (hero) bölümü */
    position: relative; /* İçindeki mutlak konumlu öğeler için referans ol */
    height: 400px; /* Yüksekliği 400px yap */
    background-color: #1a1a1a; 
    background-attachment: fixed; /* Arka plan resmini sabitle (parallax etkisi) */
    background-position: center; /* Arka plan resmini ortala */
    background-size: cover; /* Resmi alanı kaplayacak şekilde boyutlandır */
    display: flex; align-items: center; justify-content: center; /* İçeriği hem yatay hem dikey ortala */
    text-align: center; color: #fff; overflow: hidden; /* Metni ortala, beyaz yap, taşanları gizle */
}

.contact-hero::before { /* Hero bölümünün üzerindeki karartma katmanı */
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Boş içerik oluştur ve tüm alanı kapla */
    background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(217, 4, 41, 0.4) 100%); /* Siyah ve kırmızı geçişli yarı saydam arka plan */
    z-index: 1; /* İçeriğin altında, arka planın üstünde dur */
}

.hero-content { position: relative; z-index: 2; max-width: 700px; padding: 0 20px; } /* İçerik katmanı, en üstte dur, genişliği sınırla */
.hero-content h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 15px; text-shadow: 0 10px 30px rgba(0,0,0,0.5); } /* Büyük, kalın başlık, gölgeli */
.hero-content p { font-size: 1.3rem; opacity: 0.9; font-weight: 300; } /* İnce, hafif şeffaf açıklama metni */

.contact-container { /* Ana iletişim içerik kutusu */
    max-width: 1200px; margin: -80px auto 50px; padding: 0 20px; /* Genişliği sınırla, yukarıya doğru negatif marj ver (overlap etkisi), ortala */
    position: relative; z-index: 10; /* Diğer öğelerin üzerinde durmasını sağla */
}

.contact-grid { /* İletişim kartlarını saran ızgara */
    display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px; /* İki sütunlu yapı (sol dar, sağ geniş), aralarında boşluk */
}

.contact-info-card { /* İletişim bilgileri kartı */
    background: #fff; /* Beyaz arka plan */
    padding: 50px 40px; border-radius: 20px; /* İç boşluk ve yuvarlak köşeler */
    box-shadow: 0 20px 50px rgba(0,0,0,0.05); /* Yumuşak gölge */
    height: 100%; /* Yüksekliği ebeveyne eşitle */
    position: relative; overflow: hidden; /* Taşan dekoratif öğeleri gizle */
}

.contact-info-card::after { /* Kartın arkasındaki dekoratif ikon */
    content: '\f3c5'; font-family: "Font Awesome 5 Free"; font-weight: 900; /* Font Awesome konum ikonu */
    position: absolute; bottom: -30px; right: -30px; font-size: 15rem; /* Sağ alt köşeye yerleştir, çok büyük yap */
    color: rgba(0,0,0,0.03); z-index: 0; pointer-events: none; 
}

.info-header h3 { font-size: 1.8rem; color: #2b2d42; margin-bottom: 30px; font-weight: 700; border-left: 5px solid var(--primary-color, #d90429); padding-left: 15px; } /* Solu çizgili başlık */

.info-row { display: flex; align-items: flex-start; margin-bottom: 35px; position: relative; z-index: 1; } /* Bilgi satırlarını yan yana diz */

.icon-box { /* İkon kutusu */
    width: 60px; height: 60px; background: rgba(217, 4, 41, 0.1); /* Boyutlar ve açık kırmızı arka plan */
    color: var(--primary-color, #d90429); border-radius: 15px; 
    display: flex; align-items: center; justify-content: center; /* İkonu ortala */
    font-size: 1.5rem; margin-right: 20px; /* İkon boyutu ve sağ boşluk */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yaylanma efektli geçiş */
}

.info-row:hover .icon-box { /* Satıra gelince ikon kutusu efekti */
    background: var(--primary-color, #d90429); color: #fff; 
    transform: rotateY(360deg) scale(1.1); box-shadow: 0 10px 20px rgba(217, 4, 41, 0.3); /* Döndür, büyüt ve gölge ekle */
}

.info-details h5 { margin: 0 0 5px; font-size: 1.1rem; color: #2b2d42; font-weight: 700; } /* Bilgi başlığı (Adres vb.) */
.info-details p { margin: 0; color: #666; font-size: 0.95rem; line-height: 1.6; } /* Bilgi metni */

.social-links { margin-top: 40px; display: flex; gap: 15px; } /* Sosyal medya ikonları grubu */
.social-btn { /* Sosyal medya butonu */
    width: 45px; height: 45px; border-radius: 50%; background: #f8f9fa; border: 1px solid #eee; 
    display: flex; align-items: center; justify-content: center; /* İkonu ortala */
    color: #555; text-decoration: none; transition: all 0.3s ease; 
}

.social-btn:hover { background: var(--primary-color, #d90429); color: #fff; transform: translateY(-5px); border-color: var(--primary-color, #d90429); } 

.contact-form-card { /* İletişim formu kartı */
    background: #fff; 
    padding: 50px; border-radius: 20px; /* İç boşluk ve yuvarlak köşeler */
    box-shadow: 0 20px 50px rgba(0,0,0,0.05); /* Yumuşak gölge */
}

.contact-form-card h3 { font-size: 2rem; margin-bottom: 10px; color: #2b2d42; } /* Form başlığı */
.contact-form-card p { margin-bottom: 40px; color: #777; } /* Form açıklama metni */

.input-group { position: relative; margin-bottom: 30px; } /* Input grubu kapsayıcısı */
.form-style { /* Özel stil input alanı */
    width: 100%; padding: 15px 0; border: none; border-bottom: 2px solid #ddd; /* Sadece alt çizgi olsun */
    font-size: 1rem; color: #333; background: transparent; transition: border-color 0.3s; /* Şeffaf zemin, geçiş efekti */
}

.form-style:focus { outline: none; border-bottom-color: var(--primary-color, #d90429); } /* Odaklanınca alt çizgi kırmızı olsun */
.form-style::placeholder { color: #aaa; transition: color 0.3s; } /* Placeholder rengi */
.form-style:focus::placeholder { color: var(--primary-color, #d90429); opacity: 0.5; } /* Odaklanınca placeholder rengi değişsin */

.btn-send { /* Gönder butonu */
    background: linear-gradient(90deg, #d90429, #ef233c); color: #fff; 
    padding: 18px 40px; border: none; border-radius: 50px; /* Dolgun boyut, tam yuvarlak kenarlar */
    font-weight: 700; font-size: 1rem; cursor: pointer; /* Kalın yazı, el imleci */
    box-shadow: 0 10px 20px rgba(217, 4, 41, 0.3); transition: all 0.4s ease; /* Kırmızı gölge, geçiş efekti */
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; /* Tam genişlik, içeriği ortala */
}

.btn-send:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(217, 4, 41, 0.5); } /* Hover: Yukarı zıplat, gölgeyi büyüt */

.faq-wrapper { margin-top: 80px; max-width: 900px; margin-left: auto; margin-right: auto; } /* SSS bölümü kapsayıcısı, ortala */
.faq-title { text-align: center; margin-bottom: 40px; color: #2b2d42; font-size: 2rem; font-weight: 700; } /* SSS başlığı */

.faq-item { margin-bottom: 15px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.03); border: 1px solid #fff; } /* SSS öğesi kartı */
.faq-btn { /* SSS sorusu (buton) */
    width: 100%; text-align: left; padding: 20px; background: #fff; border: none; /* Tam genişlik, sola hizala */
    font-size: 1.1rem; font-weight: 600; color: #333; cursor: pointer; /* Kalın yazı */
    display: flex; justify-content: space-between; align-items: center; transition: all 0.3s; /* İkonu sağa yasla */
}

.faq-btn:hover { color: var(--primary-color, #d90429); background-color: #fff; } /* Hover: Yazıyı kırmızı yap */
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: #fafafa; } /* Cevap alanı (başlangıçta kapalı) */
.faq-content p { padding: 20px; color: #666; margin: 0; line-height: 1.6; } /* Cevap metni */
.faq-btn.active i { transform: rotate(45deg); color: var(--primary-color, #d90429); } /* Aktif olunca ikonu döndür ve kırmızı yap */
.faq-btn i { transition: transform 0.3s; color: #ccc; } /* İkon geçiş efekti */

.float-whatsapp { /* Sabit Whatsapp butonu */
    position: fixed; width: 60px; height: 60px; bottom: 30px; right: 30px; /* Sağ alt köşeye sabitle */
    background-color: #25d366; color: #FFF; border-radius: 50px; 
    text-align: center; font-size: 30px; box-shadow: 2px 2px 10px rgba(0,0,0,0.2); /* Büyük ikon, gölge */
    z-index: 1000; display: flex; align-items: center; justify-content: center; /* En üstte dur, ortala */
    transition: all 0.3s ease; text-decoration: none; /* Geçiş efekti */
}

.float-whatsapp:hover { background-color: #128C7E; transform: scale(1.1); } /* Hover: Koyu yeşil, büyüt */

.modern-map { /* Harita kapsayıcısı */
    margin-top: 80px; border-radius: 20px; overflow: hidden; /* Üst boşluk, yuvarlak köşeler, taşanları gizle */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); height: 450px; position: relative; /* Gölge, yükseklik */
    background: #fff; padding: 10px; 
}

.modern-map iframe { /* Harita iframes'i */
    width: 100%; height: 100%; border: none; border-radius: 15px; /* Tam boyut, kenarlıksız */
    filter: grayscale(100%) contrast(1.1); transition: filter 0.5s ease; /* Siyah-beyaz filtre */
}

.modern-map:hover iframe { filter: grayscale(0%); } /* Hover: Renkli hale getir */
  :root { /* CSS değişkenleri (Tema renkleri) */
        --primary-color: #d90429; 
        --primary-color-light: #ef233c; 
        --secondary-dark: #2b2d42;
    }
    
    body { background-color: #edf2f4; color: #333; } /* Genel sayfa arka planı ve yazı rengi */

    .contact-hero { /* İletişim hero bölümü */
        position: relative; height: 400px; background-attachment: fixed; background-position: center; background-size: cover; /* Parallax arka plan */
        display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; /* İçeriği ortala */
    }
    .contact-hero::before { /* Hero üzerindeki karartma katmanı */
        content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Tüm alanı kapla */
        background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(217, 4, 41, 0.4) 100%); z-index: 1; 
    }
    .hero-content { position: relative; z-index: 2; max-width: 700px; padding: 0 20px; } /* İçerik katmanı */
    .hero-content h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 15px; } /* Hero başlığı */

    .contact-container { max-width: 1200px; margin: -80px auto 50px; padding: 0 20px; position: relative; z-index: 10; } /* Ana içerik kutusu, yukarıya taşma efekti */
    .contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px; margin-bottom: 50px; } /* İki sütunlu ızgara */

    /* BİLGİ KARTI */
    .contact-info-card { background: #fff; padding: 50px 40px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.05); position: relative; overflow: hidden; } /* Bilgi kartı stili */
    .info-header h3 { font-size: 1.8rem; color: #2b2d42; margin-bottom: 30px; font-weight: 700; border-left: 5px solid var(--primary-color); padding-left: 15px; } /* Kart başlığı */
    .info-row { display: flex; align-items: flex-start; margin-bottom: 35px; } /* Bilgi satırı */
    .icon-box { width: 60px; height: 60px; background: rgba(217, 4, 41, 0.1); color: var(--primary-color); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-right: 20px; } /* İkon kutusu */

    /* FORM KARTI */
    .contact-form-card { background: #fff; padding: 50px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.05); } /* Form kartı stili */
    .form-style { width: 100%; padding: 15px 0; border: none; border-bottom: 2px solid #ddd; font-size: 1rem; background: transparent; transition: 0.3s; margin-bottom: 25px; } /* Input stili */
    .form-style:focus { outline: none; border-bottom-color: var(--primary-color); } /* Input odaklanma efekti */
    .btn-send { background: linear-gradient(90deg, var(--primary-color), var(--primary-color-light)); color: #fff; padding: 18px 40px; border: none; border-radius: 50px; font-weight: 700; cursor: pointer; width: 100%; transition: 0.4s; box-shadow: 0 10px 20px rgba(217, 4, 41, 0.3); } /* Gönder butonu */

    /* SSS STİLLERİ */
    .faq-section { margin-bottom: 50px; } /* SSS bölümü */
    .faq-title { text-align: center; font-size: 2.2rem; color: #2b2d42; margin-bottom: 35px; font-weight: 800; font-family: 'Montserrat', sans-serif; } /* SSS başlığı */
    .accordion { display: flex; flex-direction: column; gap: 15px; max-width: 1000px; margin: 0 auto; } /* Akordeon yapısı */
    .accordion-item { background: #fff; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); overflow: hidden; transition: 0.3s; border-left: 0 solid var(--primary-color); } /* Akordeon öğesi */
    .accordion-header { width: 100%; padding: 25px 30px; background: none; border: none; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 600; color: #333; cursor: pointer; text-align: left; } /* Soru başlığı */
    .accordion-header .icon { font-size: 1.4rem; color: #aaa; transition: 0.3s; } /* Soru ikonu */
    .accordion-content { max-height: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0, 1, 0, 1); background: #fff; padding: 0 30px; } /* Cevap alanı (gizli) */
    .accordion-content p { padding: 0 0 25px; color: #666; line-height: 1.7; border-top: 1px solid #f1f1f1; padding-top: 20px; } /* Cevap metni */
    .accordion-item.active { border-left-width: 6px; } /* Aktif öğe sol çizgi */
    .accordion-item.active .icon { transform: rotate(45deg); color: var(--primary-color); } /* Aktif öğe ikon değişimi */
    .accordion-item.active .accordion-content { max-height: 1000px; transition: all 0.4s cubic-bezier(1, 0, 1, 0); } /* Aktif öğe cevap görünümü */

    /* HARİTA */
    .map-card { background: #fff; border-radius: 20px; padding: 15px; box-shadow: 0 20px 50px rgba(0,0,0,0.05); height: 450px; margin-top: 50px; } /* Harita kartı */
    .map-card iframe { width: 100%; height: 100%; border: none; border-radius: 15px; } /* Harita iframe'i */

    @media (max-width: 992px) { .contact-grid { grid-template-columns: 1fr; } .contact-container { margin-top: -50px; } } /* Mobil uyumluluk */
@media (max-width: 992px) { /* 992px altı ekranlar için */
    .contact-grid { grid-template-columns: 1fr; } /* Tek sütuna düşür */
    .contact-container { margin-top: -50px; } /* Üst marjı azalt */
    .hero-content h1 { font-size: 2.5rem; } /* Başlık boyutunu küçült */
}