/* ==========================================
   1. GENEL AYARLAR VE SIFIRLAMA
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #fff;
    color: #333;
    overflow-x: hidden;
}

/* ==========================================
   2. HEADER (MENÜ) VE DAİRE LOGO
   ========================================== */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.4);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
}

.logo {
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
}

.logo-container h1 {
    font-size: 1.5rem;
}

.main-header nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
}

.main-header nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.main-header nav ul li a:hover {
    color: #ff9f43; /* Kıvılcım Turuncusu */
}

/* ==========================================
   3. ANA BANNER (PARALLAKS GİRİŞ)
   ========================================== */
.banner {
    position: relative;
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('header.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallaks Efekti */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 0 20px;
}

.banner-content h2 {
    font-size: 3rem;
    margin-bottom: 15px;
    font-weight: 800;
}

.banner-content h5 {
    font-size: 1.4rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cta-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #ff9f43;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.cta-button:hover {
    transform: scale(1.05);
    background-color: #e08528;
}

/* ==========================================
   HİZMETLERİMİZ - SAF GÖRSEL BELİRGİNLEŞME EFEKTİ
   ========================================== */
   /* ==========================================
   HİZMETLERİMİZ ÜST BAŞLIK ALANI (SOLA DAYALI & ŞEFFAF YAZILI)
   ========================================== */
.hizmetler-bolumu {
    width: 100%;
    background-color: #ffffff;
    padding: 0;
}

.hizmetler-ust-alan {
    position: relative;
    /* Üst boşluğu (padding-top) 80px'e çıkardık. 
       Böylece devasa "Dizayn" yazısının kırpılmasını tamamen engelliyoruz. */
    padding: 80px 5% 30px 5%; 
    background-color: #ffffff;
    overflow: hidden;
}

.hizmet-arka-plan-yazi {
    position: absolute;
    /* Ortalamayı kaldırıp yazıyı kutunun en üstüne (-10px) çektik. 
       Böylece "NELER YAPIYORUZ" başlığının üstünde, şık bir arka plan olarak kalacak. */
    top: -10px; 
    left: 3%;
    font-size: 13rem;
    font-weight: 900;
    /* Belirginlik oranını bozmadan koruyoruz */
    color: rgba(0, 0, 0, 0.064); 
    letter-spacing: 5px;
    user-select: none;
    z-index: 1;
    line-height: 1; /* Satır yüksekliğini sabitleyerek dikeyde taşmasını önledik */
}

/* Başlığı taşıyan ve sola yaslayan kapsayıcı */
.hizmet-baslik-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left; /* Başlığı ve altındaki her şeyi SOLA yatırır */
    z-index: 2; /* Şeffaf yazının üstünde kalması için */
}

.hizmet-ust-vurgu {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #ff9f43; /* Marka turuncunuz */
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

.hizmet-ana-baslik {
    font-size: 2.5rem;
    color: #111111;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
}

.hizmet-cizgi {
    width: 50px;
    height: 3px;
    background-color: #ff9f43;
    margin: 15px 0 0 0; /* Ortalamayı bozup tamamen SOLA yasladık */
}

/* --- RESPONSIVE AYARI --- */
@media (max-width: 992px) {
    .hizmet-arka-plan-yazi {
        font-size: 8rem; /* Mobil/Tablet ekranlarda yazının taşmaması için küçültme */
        top: 10px;
    }
    .hizmetler-ust-alan {
        padding: 40px 5% 30px 5%; /* Mobilde dikey mesafeleri biraz daha daraltıyoruz */
    }
}
.hizmetler-bolumu {
    width: 100%;
    background-color: #111; /* Kartlar hafif solukken arkadan görünecek asil koyu zemin */
    padding: 0;
}

.hizmetler-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
}

.hizmet-karti {
    position: relative;
    height: 500px;
    background-size: cover;
    background-position: center;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;

    /* 1. KARTIN NORMAL HALİ: Renk eklemiyoruz, resmi filtrelerle hafif geride tutuyoruz */
    filter: grayscale(40%) brightness(75%); /* Hafif siyah-beyaz ve loş (yazılar okunsun diye) */
    transition: filter 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
/* ==========================================
   HİZMET KARTLARI LINK VE HOVER DÜZENLEMESİ
   ========================================== */
.hizmet-karti-link {
    text-decoration: none; /* Alt çizgiyi kaldırır */
    color: inherit; /* Orijinal renkleri korur */
    display: block; /* Tıklama alanını tüm karta yayar */
    outline: none;
}

/* Kartın tamamına gelindiğinde kart hafifçe yükselsin */
.hizmet-karti-link:hover .hizmet-karti {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

/* Kartın üstündeyken "DAHA FAZLA" yazısını turuncu yap */
.hizmet-karti-link:hover .daha-fazla {
    color: #ff9f43; /* Marka turuncunuz */
    transition: color 0.2s ease;
}

/* Kartın üstündeyken ok işaretini hafifçe sağa kaydır */
.hizmet-karti-link:hover .daha-fazla .ok {
    transform: translateX(6px);
    transition: transform 0.2s ease;
    display: inline-block;
}

/* Son kartın sağ çizgisini kaldır */
.hizmet-karti:last-child {
    border-right: none;
}

/* 2. İMLEÇ ÜZERİNE GELDİĞİNDE (HOVER) */
.hizmet-karti:hover {
    /* SIFIR RENK KATMANI: Bütün filtreleri kaldırıp görseli orijinal, jilet gibi net ve renkli haline getiriyoruz */
    filter: grayscale(0%) brightness(100%); 
    
    /* Hafif bir öne çıkma hissi için kartı çok az yukarı esnetelim */
    transform: scale(1.01); 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    z-index: 5; /* Gölgelendirme diğer kartların üstüne taşsın */
}

/* --- İÇERİK STİLLERİ (Değişmedi, Sabit) --- */
.kart-numara {
    font-size: 5rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px #ff9f43; /* Dokuz Dizayn Turuncusu */
    line-height: 1;
    opacity: 0.7;
    transition: all 0.4s ease;
}

.kart-icerik {
    text-align: left;
    z-index: 2;
    /* Yazıların altına hafif, belirsiz bir gölge atıyoruz ki görsel parladığında beyaz yazılar kaybolmasın */
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); 
}

.kart-icerik h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.kart-icerik p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 25px;
}

.daha-fazla {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.daha-fazla .ok {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

/* Hover anında detayların canlanması */
.hizmet-karti:hover .kart-numara {
    transform: translateY(-5px);
    opacity: 1;
    -webkit-text-stroke: 2px #fff; /* Üzerine gelince numara çizgisi beyaza dönsün */
}

.hizmet-karti:hover .daha-fazla {
    color: #ff9f43;
}

.hizmet-karti:hover .daha-fazla .ok {
    transform: translateX(8px);
}

/* --- RESPONSIVE DÜZEN --- */
@media (max-width: 1024px) {
    .hizmetler-grid { grid-template-columns: repeat(2, 1fr); }
    .hizmet-karti { border-bottom: 1px solid rgba(255, 255, 255, 0.1); height: 450px; }
}
@media (max-width: 600px) {
    .hizmetler-grid { grid-template-columns: 1fr; }
    .hizmet-karti { height: 400px; padding: 30px 20px; }
    .kart-numara { font-size: 4rem; }
}
/* ==========================================
   MOBİL VE TABLET UYUMLULUĞU (RESPONSIVE)
   ========================================== */
@media (max-width: 1024px) {
    .hizmetler-grid {
        grid-template-columns: repeat(2, 1fr); /* Tabletlerde 2'li düzen */
    }
    .hizmet-karti {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        height: 450px;
    }
}

@media (max-width: 600px) {
    .hizmetler-grid {
        grid-template-columns: 1fr; /* Mobilde tamamen alt alta tek sütun */
    }
    .hizmet-karti {
        height: 400px;
        padding: 30px 20px;
    }
    .kart-numara {
        font-size: 4rem;
    }
}
/* ==========================================
   5. HAKKIMIZDA (YENİ SU DAMGASI EFEKTLİ TASARIM)
   ========================================== */
.hakkimizda-yeni {
    position: relative;
    padding: 120px 5%;
    background-color: #fdfdfd;
    overflow: hidden;
}

.hakkimizda-yeni .arka-plan-yazi {
    position: absolute;
    top: 10px;
    right: -20px;
    font-size: 13rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.064);
    letter-spacing: 8px;
    user-select: none;
    z-index: 1;
    text-transform: uppercase;
}

.hakkimizda-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    z-index: 2;
}

.hakkimizda-gorsel img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
}

.hakkimizda-icerik {
    text-align: left;
}

.hakkimizda-icerik .ust-baslik {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ff9f43;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.hakkimizda-icerik .ana-baslik {
    font-size: 2.2rem;
    color: #2c3e50;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 20px;
}

.hakkimizda-icerik .cizgi {
    width: 50px;
    height: 3px;
    background-color: #ff9f43;
    margin-bottom: 25px;
}

.hakkimizda-icerik p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

/* ==========================================
   6. İLETİŞİM
   ========================================== */
   /* --- SAĞ TARAF: Form Elemanlarını Enine Genişletip Boydan Kısaltma --- */
.iletisim-formu {
    background: #f9f9f9;
    padding: 25px 35px; /* Üstten/alttan kısaltıp, yanlardan genişlettik */
    border-radius: 4px;
    border: 1px solid #eeeeee;
    
    /* Formun sağa doğru daha geniş yayılması için sınırı 750px'e yükselttik */
    max-width: 750px; 
    width: 100%;
    box-sizing: border-box;
}

.form-grup {
    margin-bottom: 12px; /* Elemanlar arası dikey boşluğu daraltarak boyu kısalttık */
}

.form-grup label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #333333;
    margin-bottom: 4px; /* Label ile input arasını sıktık */
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Input ve Textarea Alanları */
.form-grup input[type="text"],
.form-grup input[type="email"],
.form-grup input[type="tel"],
.form-grup textarea {
    width: 100%;
    padding: 9px 12px; /* Dikey padding'i 1px daha kısaltarak kompakt yaptık */
    font-size: 0.9rem;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #ffffff;
    color: #222222;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Mesaj Kutusunu Boydan Kısaltma */
.form-grup textarea {
    height: 85px; /* Yüksekliği 110px'den 85px'e düşürerek formu dikeyde ciddi oranda daralttık */
    resize: vertical;
}

/* Gönder Butonu */
.form-grup button[type="submit"] {
    background-color: #ff9f43;
    color: #ffffff;
    padding: 10px 25px; /* Butonun da dikey et kalınlığını azalttık */
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: auto;
    margin-top: 5px;
    transition: all 0.3s ease;
}
.iletisim {
    padding: 80px 5%;
    background-color: #f4f6f7;
}

.iletisim-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 50px;
}

.iletisim-bilgi, .iletisim-form-kutusu {
    flex: 1;
}

.iletisim-bilgi h2 {
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 20px;
}

.iletisim-bilgi .aciklama {
    color: #7f8c8d;
    line-height: 1.6;
    margin-bottom: 30px;
}

.iletisim-bilgi address p {
    font-style: normal;
    margin-bottom: 15px;
    color: #34495e;
}

.iletisim-bilgi address a {
    color: #ff9f43;
    text-decoration: none;
    font-weight: bold;
}

.iletisim-form-kutusu {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-top: 4px solid #ff9f43;
}

.form-grup {
    margin-bottom: 20px;
}

.form-grup label {
    display: block;
    margin-bottom: 8px;
    color: #2c3e50;
    font-weight: bold;
}

.form-grup input, .form-grup textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s;
}

.form-grup input:focus, .form-grup textarea:focus {
    border-color: #ff9f43;
}

.form-button {
    width: 100%;
    padding: 14px;
    background-color: #2c3e50;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.form-button:hover {
    background-color: #ff9f43;
}
/* ==========================================
   FORM İÇİ YAN YANA SOSYAL MEDYA LİNKLERİ
   ========================================== */
.sosyal-medya-form-satir {
    margin-bottom: 15px !important;
}

/* Yan yana tam 4 eşit parçaya bölen modern grid altyapısı */
.form-sosyal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px; /* Kutuların arasındaki milimetrik eşit mesafe */
    width: 100%;
    box-sizing: border-box;
}

/* Üç butonun da ortak ana tasarımı (Başlangıçta hepsi stabil ve aynı durur) */
.form-sosyal-link, 
.form-sosyal-link2, 
.form-sosyal-link3, 
.form-sosyal-link4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Logo ile yazı arasındaki mesafe */
    background-color: #ffffff;
    border: 1px solid #cccccc;
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;
    color: #444444;
    font-size: 0.85rem;
    font-weight: 600;
    box-sizing: border-box;
    /* Renk ve gölge geçişlerinin pürüzsüz olması için akıcı geçiş efekti */
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* İçlerindeki SVG ikonların ortak başlangıç boyutu */
.form-sosyal-link svg,
.form-sosyal-link2 svg,
.form-sosyal-link3 svg,
.form-sosyal-link4 svg {
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease;
}

/* İkonların hover (üzerine gelindiğinde) anında hafifçe büyüme reaksiyonu */
.form-sosyal-link:hover svg,
.form-sosyal-link2:hover svg,
.form-sosyal-link3:hover svg,
.form-sosyal-link4:hover svg {
    transform: scale(1.1);
}


/* --- ÖZEL HOVER RENK BAĞLANTILARI --- */

/* 1. WHATSAPP HOVER EFEKTİ (form-sosyal-link) */
.form-sosyal-link:hover {
    border-color: #25D366; /* Orijinal WhatsApp Yeşili */
    color: #25D366;
    background-color: #f6fff9; /* Çok hafif yeşil tonlu temiz arka plan */
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.15);
}

/* 2. INSTAGRAM HOVER EFEKTİ (form-sosyal-link2) */
.form-sosyal-link2:hover {
    border-color: #F77737; /* Orijinal Instagram Gün Batımı Turuncusu */
    color: #F77737;
    background-color: #fffaf5; /* Çok hafif turuncu tonlu temiz arka plan */
    box-shadow: 0 4px 10px rgba(247, 119, 55, 0.15);
}

/* 3. FACEBOOK HOVER EFEKTİ (form-sosyal-link3) */
.form-sosyal-link3:hover {
    border-color: #1877F2; /* Orijinal Facebook Reaksiyon Mavisi */
    color: #1877F2;
    background-color: #f4f8ff; /* Çok hafif mavi tonlu temiz arka plan */
    box-shadow: 0 4px 10px rgba(24, 119, 242, 0.15);
}
.form-sosyal-link4:hover {
    border-color: #E60023; /* Orijinal Pinterest Kırmızısı */
    color: #E60023;
    background-color: #fff5f7; /* Çok hafif kırmızı tonlu temiz arka plan */
    box-shadow: 0 4px 10px rgba(230, 0, 35, 0.15);
}


/* --- MOBİL CİHAZ EMNİYET AYARI --- */
@media (max-width: 480px) {
    /* Dar ekranlarda yazıların sığmama ihtimaline karşı yazıları gizliyoruz */
    .form-sosyal-link span, 
    .form-sosyal-link2 span, 
    .form-sosyal-link3 span,
    .form-sosyal-link4 span {
        display: none;
    }
    
    /* Sadece ikonlar kalacağı için tıklama alanını dengeli tutuyoruz */
    .form-sosyal-link, 
    .form-sosyal-link2, 
    .form-sosyal-link3,
    .form-sosyal-link4 {
        padding: 12px;
    }
    
    /* Mobilde parmakla rahat basılsın diye ikonları hafifçe büyütüyoruz */
    .form-sosyal-link svg,
    .form-sosyal-link2 svg,
    .form-sosyal-link3 svg,
    .form-sosyal-link4 svg {
        width: 20px;
        height: 20px;
    }
}
/* ==========================================
   DOKUZ DİZAYN KURUMSAL FOOTER TASARIMI
   ========================================== */
.main-footer-bolumu {
    background-color: #1a1a1a; /* Görseldeki gibi şık koyu antrasit tonu */
    color: #bcbcbc;
    padding: 70px 0 20px 0;
    font-family: inherit;
    border-top: 3px solid #ff9f43; /* En üste ince marka turuncusu bir hat çektik */
}

.footer-konteyner {
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
    margin: 0 auto;
}

/* 3 Sütunlu Grid Sistemi */
.footer-grid {
    display: grid;
    grid-template-columns: 1.51fr 1fr 1.2fr; /* Sütun genişlik dengesi */
    gap: 50px;
    margin-bottom: 50px;
}

.footer-sutun h4 {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* Başlık altındaki mini dekoratif turuncu çizgi */
.footer-cizgi {
    width: 35px;
    height: 2px;
    background-color: #ff9f43;
    margin-bottom: 25px;
}

/* 1. Sütun: Logo alanı */
.footer-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-logo {
    height: 45px;
    width: 45px;
    object-fit: contain;
    border-radius: 4px;
}

.footer-logo-wrapper h3 {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-hakkimizda p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #aaaaaa;
}

/* 2. Sütun: Link listesi */
.footer-linkler ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-linkler ul li {
    margin-bottom: 12px;
}

.footer-linkler ul li a {
    color: #aaaaaa;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    display: inline-block;
}

/* Linklerin üzerine gelince sağa kayma ve turuncu olma efekti */
.footer-linkler ul li a:hover {
    color: #ff9f43;
    transform: translateX(5px);
}

/* 3. Sütun: İletişim */
.footer-iletisim p {
    font-size: 0.9rem;
    margin-bottom: 12px;
    line-height: 1.5;
}

.footer-iletisim p strong {
    color: #ffffff;
}

/* --- FOOTER SOSYAL MEDYA İKON DÜZENİ --- */
.footer-sosyal-medya {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.footer-sosyal-ikon {
    width: 38px;
    height: 38px;
    background-color: #262626; /* Koyu buton arka planı */
    border: 1px solid #333333;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.25s ease;
}

.footer-sosyal-ikon svg {
    width: 18px;
    height: 18px;
}

/* Butonların kendine özel kurumsal hover renkleri */
.footer-sosyal-ikon.wa-f:hover {
    background-color: #25D366;
    border-color: #25D366;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    transform: translateY(-3px);
}

.footer-sosyal-ikon.ig-f:hover {
    background-color: #F77737;
    border-color: #F77737;
    box-shadow: 0 4px 12px rgba(247, 119, 55, 0.3);
    transform: translateY(-3px);
}

.footer-sosyal-ikon.fb-f:hover {
    background-color: #1877F2;
    border-color: #1877F2;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
    transform: translateY(-3px);
}
.footer-sosyal-ikon.pt-f:hover {
    background-color: #E60023;
    border-color: #E60023;
    box-shadow: 0 4px 12px rgba(230, 0, 35, 0.3);
    transform: translateY(-3px);
}

/* Telif Hakkı Çizgisi */
.footer-alt-bar {
    border-top: 1px solid #2a2a2a;
    padding-top: 20px;
    text-align: center;
}

.footer-alt-bar p {
    font-size: 0.8rem;
    color: #666666;
}

/* --- RESPONSIVE AYARLAR (MOBİL UYUMLULUK) --- */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr; /* Tabletlerde 2 sütuna düşer */
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Mobilde hepsi tek sütun alt alta sıralanır */
        gap: 35px;
    }
    .main-footer-bolumu {
        padding: 50px 0 20px 0;
    }
}

/* ==========================================
   8. MEDIYA QUERIES (RESPONSIVE)
   ========================================== */
@media (max-width: 992px) {
    .banner-content h2 {
        font-size: 2.5rem;
    }
    .hakkimizda-yeni .arka-plan-yazi {
        font-size: 8rem;
    }
    .hakkimizda-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .iletisim-container {
        gap: 30px;
    }
}

/* ==========================================
   MOBİL NAV - LOGO ÜSTTE, MENÜ ALT SATIRLARA SARAR
   (Header akışa dahil olur, banner'ın üstüne binmez)
   ========================================== */
@media (max-width: 768px) {
    .main-header {
        position: static; /* Artık banner'ın üstünde değil, kendi alanını kaplıyor */
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 18px 5% 16px 5%;
        background-color: #0f0f0f; /* Opak zemin: görsellerle karışmasın */
    }
    .logo-container {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
    }
    .logo-container h1 {
        font-size: 1.35rem;
    }
    .logo {
        height: 70px !important;
        width: 70px !important;
    }
    .main-header nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 22px;
        row-gap: 10px;
    }
    .main-header nav ul li a {
        font-size: 0.95rem;
    }
    .banner-content h2 {
        font-size: 2rem;
    }
    .iletisim-container {
        flex-direction: column;
    }
}
/* ==========================================
   9. HARİTA ALANI (FULL-WIDTH GOOGLE MAPS)
   ========================================== */
.harita-bolumu {
    width: 100%;
    height: 450px;
    display: block;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    line-height: 0; /* İframe altındaki gizli 3px'lik boşluğu tamamen yok eder */
    overflow: hidden;
}

.harita-bolumu iframe {
    width: 100%;
    height: 100%;
    filter: grayscale(30%) contrast(110%); /* Endüstriyel tasarıma uyması için haritayı hafifçe matlaştırır */
    transition: filter 0.3s ease;
}

/* Fareyle haritanın üzerine gelindiğinde harita canlansın ve orijinal renklerine dönsün */
.harita-bolumu iframe:hover {
    filter: grayscale(0%) contrast(100%);
}

/* Mobil Ekranlar İçin Yükseklik Ayarı */
@media (max-width: 768px) {
    .harita-bolumu {
        height: 300px; /* Telefonlarda çok dikey yer kaplamasın diye yüksekliği düşürüyoruz */
    }
}
/* ==========================================
   REFERANSLARIMIZ (HİZALANMIŞ & BÜYÜTÜLMÜŞ KARE GRID)
   ========================================== */
.referanslar-bolumu {
    width: 100%;
    background-color: #fdfdfd;
    /* Üst ve alt boşlukları "Neler Yapıyoruz" alanı ile eşitledik */
    padding: 80px 0; 
}

.referans-konteyner {
    width: 100%;
    /* "Neler Yapıyoruz" alanındaki ana hizayı (%5 yan boşluk) 
       birebir yakalamak için max-width'i kaldırdık */
    padding: 0 5%; 
    box-sizing: border-box;
}

/* Sola dayalı, arkası şeffaf yazılı üst alan */
.referans-ust-alan {
    position: relative;
    padding: 20px 0 40px 0;
    overflow: hidden;
}

.referans-arka-plan-yazi {
    position: absolute;
    top: -10px;
    left: 0;
    font-size: 11rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.062);
    letter-spacing: 5px;
    user-select: none;
    z-index: 1;
    text-transform: uppercase;
}

.referans-baslik-wrapper {
    position: relative;
    text-align: left;
    z-index: 2;
}

.referans-ust-vurgu {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #ff9f43; /* Marka turuncunuz */
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

.referans-ana-baslik {
    font-size: 2.5rem;
    color: #111111;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.referans-cizgi {
    width: 50px;
    height: 3px;
    background-color: #ff9f43;
    margin: 15px 0 0 0;
}

/* --- KUTULARI BÜYÜTEN VE SAĞA YAYAN GRID AYARI --- */
.referans-grid {
    display: grid;
    /* Yan yana 6 yerine 4 kutu yaparak her bir kutunun devasa ve 
       "Neler Yapıyoruz" kartlarıyla benzer büyüklükte olmasını sağladık */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; /* Kutuların arasındaki nefes alma boşluğunu artırdık */
    z-index: 2;
    position: relative;
    width: 100%;
}

/* Kare Referans Kutusu Tasarımı */
.referans-kutu {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    aspect-ratio: 1 / 1; /* Kare formunu korur */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px; /* İç boşluğu artırarak logoların daha korunaklı ve şık durmasını sağladık */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Logoların Kutu İçindeki Davranışı */
.referans-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* --- HOVER EFEKTLERİ --- */
.referans-kutu:hover {
    transform: translateY(-5px);
    border-color: #ff9f43;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.referans-kutu:hover .referans-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* --- MOBİL UYUMLULUK AYARLARI --- */
@media (max-width: 992px) {
    .referans-grid {
        grid-template-columns: repeat(2, 1fr); /* Tabletlerde yan yana 2 büyük kutu */
        gap: 20px;
    }
    .referans-arka-plan-yazi {
        font-size: 7rem;
    }
}

@media (max-width: 576px) {
    .referans-grid {
        grid-template-columns: repeat(1, 1fr); /* Mobilde tam genişlikte tekli büyük kutular */
        gap: 20px;
    }
    .referans-kutu {
        padding: 30px;
    }
}
/* ==========================================================================
   DOKUZ DİZAYN - HİZALANMIŞ PRESTİJ PROJE VİTRİNİ STİLLERİ
   ========================================================================== */

.anasayfa-prestij-vitrin {
    width: 100%;
    padding: 60px 0 80px 0;
    background-color: #ffffff;
    box-sizing: border-box;
}

/* Sola yatık, sitenin diğer başlıklarıyla milimetrik hizalı ana başlık */
.anasayfa-prestij-vitrin .vitrin-ana-baslik {
    font-size: 2.2rem;
    color: #111111;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 40px;
    padding: 0 5%; /* Ürünler başlığının tam başladığı sol çizgi */
}

/* Kapsayıcının sınırlarını kaldırıp %5 sol-sağ padding ile hizayı sabitledik */
.anasayfa-prestij-vitrin .vitrin-kapsayici {
    display: flex;
    width: 100%;
    padding: 0 5%;
    gap: 50px; /* Görsel ve metin arası boşluk */
    align-items: center;
    box-sizing: border-box;
}

/* Sol Taraf: Görsel Alanı */
.anasayfa-prestij-vitrin .vitrin-gorsel-alani {
    flex: 1;
    position: relative;
    height: 420px; /* Ürün kartı derinliğiyle dengeli yükseklik */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.anasayfa-prestij-vitrin .vitrin-gorsel-alani img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.anasayfa-prestij-vitrin .vitrin-gorsel-etiket {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #ff9f43; /* Dokuz Dizayn Turuncusu */
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sağ Taraf: Alt Başlık ve Açıklama Metni */
.anasayfa-prestij-vitrin .vitrin-metin-alani {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.anasayfa-prestij-vitrin .vitrin-metin-alani h3 {
    font-size: 1.8rem; /* Ana başlık yukarı kayınca bu alt başlık kibarlaştırıldı */
    color: #222222;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.anasayfa-prestij-vitrin .vitrin-cizgi {
    width: 60px;
    height: 3px;
    background-color: #ff9f43; /* Marka çizgisi turuncuya çekildi */
    margin: 18px 0;
}

.anasayfa-prestij-vitrin .vitrin-metin-alani p {
    font-size: 1rem;
    color: #555555;
    line-height: 1.6;
    margin: 0 0 30px 0;
}

/* Buton Tasarımı */
.anasayfa-prestij-vitrin .vitrin-buton {
    display: inline-flex;
    align-items: center;
    background-color: #111111;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 28px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 4px;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.anasayfa-prestij-vitrin .vitrin-buton .ok-isareti {
    transition: transform 0.25s ease;
}

/* --- HOVER REAKSİYONLARI --- */
.anasayfa-prestij-vitrin .vitrin-gorsel-alani:hover img {
    transform: scale(1.04);
}

.anasayfa-prestij-vitrin .vitrin-buton:hover {
    background-color: #ff9f43;
    transform: translateY(-2px);
}

.anasayfa-prestij-vitrin .vitrin-buton:hover .ok-isareti {
    transform: translateX(5px);
}

/* ==========================================
   MOBİL AYARLARI
   ========================================== */
@media (max-width: 992px) {
    .anasayfa-prestij-vitrin .vitrin-kapsayici {
        flex-direction: column;
        gap: 35px;
    }
    .anasayfa-prestij-vitrin .vitrin-gorsel-alani {
        width: 100%;
        height: 320px;
    }
    .anasayfa-prestij-vitrin .vitrin-ana-baslik {
        margin-bottom: 25px;
    }
}
/* ==========================================================================
   DOKUZ DİZAYN - MATERYAL DETAY FOTOĞRAF GALERİSİ TASARIMI
   ========================================================================== */

.park-galeri-bolumu {
    width: 100%;
    padding: 70px 0 90px 0;
    background-color: #ffffff; /* Haberlerin gri arka planından sonra temiz beyaz zemin */
    box-sizing: border-box;
}

.galeri-baslik-alani {
    padding: 0 5%;
    margin-bottom: 40px;
    text-align: left;
}

.galeri-baslik-alani h2 {
    font-size: 2.2rem;
    color: #111111;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.galeri-baslik-alani p {
    font-size: 1rem;
    color: #666666;
    margin: 0;
}

/* Jilet gibi 4'lü hizalı duran modern galeri grid yapısı */
.galeri-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Yan yana jilet gibi 4 görsel */
    gap: 1px; /* Fotoğraflar arası temiz boşluk */
    padding: 0 5%;
    box-sizing: border-box;
}

/* Her Bir Fotoğraf Kartı */
.galeri-item {
    position: relative;
    height: 260px; /* Sabit şık yükseklik */
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    background-color: #111111;
    cursor: pointer;
    box-sizing: border-box;
}

.galeri-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Sünme yapmayı önler */
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Fotoğrafın üstüne gelince kararacak ve yazı çıkaracak katman */
.galeri-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65); /* Hafif karartma perdesi */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0; /* Başlangıçta görünmez */
    transition: opacity 0.3s ease;
}

.galeri-overlay span {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

/* --- GALERİ HOVER ETKİLEŞİMLERİ --- */
.galeri-item:hover img {
    transform: scale(1.06); /* Arka plandaki görsel hafif büyür */
}

.galeri-item:hover .galeri-overlay {
    opacity: 1; /* Karartma perdesi devreye girer */
}

.galeri-item:hover .galeri-overlay span {
    transform: translateY(0); /* Yazı hafifçe yukarı yükselerek oturur */
}

/* ==========================================
   GALERİ MOBİL UYUMLULUK AYARLARI
   ========================================== */
@media (max-width: 1200px) {
    .galeri-grid {
        grid-template-columns: repeat(3, 1fr); /* Ekran daralınca 3'lü dizilim */
    }
}

@media (max-width: 768px) {
    .galeri-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablet ve geniş telefonlarda 2'li */
        gap: 15px;
    }
    .galeri-item {
        height: 180px; /* Mobilde kart boyları küçülür */
    }
    /* Mobilde dokunmatik için overlay şeffaflığı hafif açık kalabilir veya sabitlenebilir */
}

@media (max-width: 480px) {
    .galeri-grid {
        grid-template-columns: 1fr; /* Küçük telefonlarda tekli jilet sıra */
    }
}
/* ==========================================================================
   DOKUZ DİZAYN - PROGRESS CIRCLE BACK TO TOP STİLLERİ
   ========================================================================== */

.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #111111; /* Kurumsal mat siyah zemin */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999; /* Her şeyin en üstünde kalması için */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    
    /* Başlangıçta gizli ve hafif aşağıda bekler */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

/* Sayfa aşağı kaydırılınca aktif olacak sınıf */
.scroll-to-top.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Ortadaki Beyaz Ok İşareti */
.scroll-to-top .arrow-up {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
    position: absolute;
    z-index: 3;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* SVG Dairelerinin Ortak Tabanı */
.progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg); /* Çemberin dolmaya tam saat 12 yönünden başlaması için */
    z-index: 2;
}

.progress-circle circle {
    fill: none;
    stroke-width: 3px; /* Çember etrafındaki şerit kalınlığı */
}

/* Çemberin Arkasındaki Sönük Gri Yol */
.progress-bg {
    stroke: rgba(255, 255, 255, 0.1);
}

/* İlerledikçe Dolacak Olan Dokuz Dizayn Turuncusu Şerit */
.progress-bar {
    stroke: #ff9f43; /* Kurumsal Turuncumuz */
    stroke-linecap: round; /* Çember uçlarının yumuşak bitmesi için */
    
    /* Çemberin matematiksel çevre hesabı (2 * PI * r) -> 2 * 3.1415 * 22 = ~138.2 */
    stroke-dasharray: 138.2;
    stroke-dashoffset: 138.2; /* Başlangıçta tamamen boş */
    transition: stroke-dashoffset 0.1s linear;
}

/* --- FARE ÜSTÜNE GELİNCE (HOVER) REAKSİYONU --- */
.scroll-to-top:hover {
    background-color: #000000;
    box-shadow: 0 6px 20px rgba(255, 159, 67, 0.2); /* Etrafına hafif turuncu parlama */
}

.scroll-to-top:hover .arrow-up {
    color: #ff9f43; /* Ok işareti turuncuya döner */
    transform: translateY(-3px); /* Ok hafifçe yukarı zıplar */
}