/* Yazı tipini Google Fonts üzerinden sitemize çekiyoruz */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

/* --- GENEL AYARLAR --- */
* { 
    margin: 0;           /* Tarayıcının varsayılan dış boşluklarını sıfırlar */
    padding: 0;          /* Tarayıcının varsayılan iç boşluklarını sıfırlar */
    box-sizing: border-box; /* Kutu boyutlarını taşmalara karşı korur */
    font-family: 'Open Sans', sans-serif; /* Tüm sitede bu yazı tipini kullan */
}

html { 
    scroll-behavior: smooth; /* Menü linklerine tıklayınca yumuşakça kaymayı sağlar */
}

body { 
    background-color: #ffffff; 
    color: #333; 
    line-height: 1.6; /* Satır aralarını biraz açarak okumayı kolaylaştırır */
}

/* İçeriklerin sağa sola yapışmasını engeller, ortada derli toplu tutar */
.container { 
    width: 90%; 
    max-width: 1200px; 
    margin: 0 auto; 
}


/* --- EN ÜST BİLGİ ÇUBUĞU (Siyah İnce Çubuk) --- */
.top-bar { 
    background-color: #f8f8f8; 
    border-bottom: 1px solid #e1e1e1; 
    padding: 10px 0; 
    font-size: 13px; 
}

.top-bar-inner { 
    display: flex; /* İçindeki elemanları yan yana dizer */
    justify-content: space-between; /* Birini en sağa, diğerini en sola yaslar */
    align-items: center; 
}

.social-icons a { 
    color: #666; 
    margin-right: 15px; 
    font-size: 16px; 
    text-decoration: none; /* Linklerin altındaki çizgiyi kaldırır */
}

.phone a { 
    color: #666; 
    text-decoration: none; 
    font-weight: 600; 
}


/* --- MENÜ VE LOGO ALANI --- */
.header { 
    background-color: #ffffff; 
    padding: 6px 0; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Altına hafif bir gölge verir */
    position: sticky; /* Sayfa aşağı kaydırıldığında menünün üstte sabit kalmasını sağlar */
    top: 0; 
    z-index: 1000; /* Diğer tüm içeriklerin üstünde durmasını sağlar */
}

.header-inner { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.logo a { 
    text-decoration: none; 
    color: #333; 
    font-size: 24px; 
    font-weight: 700; 
}

.nav-menu ul { 
    list-style: none; /* Linklerin başındaki madde işaretlerini (noktaları) siler */
    display: flex; 
}

.nav-menu ul li { 
    margin-left: 30px; /* Linklerin arasına boşluk koyar */
}

.nav-menu ul li a { 
    text-decoration: none; 
    color: #333; 
    font-weight: 600; 
    font-size: 15px; 
    text-transform: uppercase; /* Tüm harfleri büyük harf yapar */
    transition: color 0.3s; /* Renk değişirken aniden değil, yumuşakça değişir */
}

.nav-menu ul li a:hover, .nav-menu ul li a.active { 
    color: #d92525; /* Farenin imleci üzerine gelince rengi kırmızı yap */
}

.hamburger { 
    display: none; /* Masaüstünde bu butonu gizle (sadece mobilde açılacak) */
    font-size: 24px; 
    cursor: pointer; 
}


/* --- KAYAN SLİDER (HERO) ALANI --- */
.hero { 
    position: relative; 
    overflow: hidden; /* Dışarı taşan resimleri gizler */
    height: 600px; 
    background-color: #222; 
}

.slider-container { 
    width: 100%; 
    height: 100%; 
    position: relative; 
}

/* Her bir slaytın ayarı */
.slide { 
    position: absolute; /* Slaytları üst üste bindirir */
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    opacity: 0; /* Başlangıçta görünmez (şeffaf) yapar */
    transition: opacity 1s ease-in-out; /* Görünür olurken fade (karışma) efekti verir */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 1; 
}

/* Sadece 'active' class'ına sahip olan slayt görünür olur */
.slide.active { 
    opacity: 1; 
    z-index: 10; 
}

/* Slaytın arka planındaki fotoğrafın ayarı */
.slide-bg { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* Resmi sündürmez, ekrana düzgünce sığdırır */
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    filter: brightness(0.5); /* Beyaz yazı okunsun diye resmi %50 karartır */
}

/* Slaytın içindeki yazıların yukarı kayarak gelme ayarı */
.slide-content { 
    text-align: center; 
    color: #fff; 
    z-index: 20; 
    transform: translateY(50px); /* Başlangıçta yazıyı 50px aşağıda tutar */
    opacity: 0; 
    transition: transform 0.8s ease-out 0.5s, opacity 0.8s ease-out 0.5s; /* 0.5 saniye gecikmeli gelir */
}

.slide.active .slide-content { 
    transform: translateY(0); /* Yazıyı asıl yerine kaydırır */
    opacity: 1; 
}

.slide-content h2 { 
    font-size: 48px; 
    margin-bottom: 20px; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
}

.slide-content p { 
    font-size: 18px; 
    max-width: 700px; 
    margin: 0 auto 40px auto; 
}


/* --- BUTONLAR --- */
.hero-buttons { margin-top: 20px; }

.btn { 
    padding: 15px 30px; 
    text-decoration: none; 
    font-weight: 600; 
    text-transform: uppercase; 
    display: inline-block; 
    border-radius: 3px; 
    transition: 0.3s; 
    margin: 5px; 
}

.btn-red { background-color: #d92525; color: #fff; }
.btn-red:hover { background-color: #b01c1c; }

.btn-dark { background-color: #333; color: #fff; border: 1px solid #555; }
.btn-dark:hover { background-color: #555; }


/* --- HİZMETLER BÖLÜMÜ --- */
.services { padding: 80px 0; }

.section-title { text-align: center; margin-bottom: 50px; }
.section-title h2 { font-size: 32px; color: #333; margin-bottom: 10px; }
.title-line { width: 50px; height: 3px; background-color: #d92525; margin: 0 auto; }

.services-grid { 
    display: flex; /* Kartları yan yana dizer */
    justify-content: space-between; 
    gap: 30px; 
    flex-wrap: wrap; /* Sığmazsa alt satıra atar (Mobil için şarttır) */
}

.service-card { flex: 1; min-width: 300px; text-align: center; }

/* Hizmet resimlerinin çerçeve ayarı */
.service-img { 
    width: 100%; 
    height: 220px; 
    overflow: hidden; /* Resim büyüyünce kartın dışına taşmasını engeller */
    border-radius: 5px; 
}

.service-img img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.4s ease; /* Büyüme hızını ayarlar */
}

/* Kartın üzerine gelince resmi büyütür */
.service-card:hover .service-img img { 
    transform: scale(1.08); 
}

.service-card h3 { margin: 20px 0 10px; font-size: 20px; }
.card-line { width: 30px; height: 2px; background-color: #ccc; margin: 0 auto 15px auto; }


/* --- KURUMSAL (ÖZELLİKLER) BÖLÜMÜ --- */
.features { background-color: #f9f9f9; padding: 80px 0; }
.features-grid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.feature-box { flex: 1; min-width: 300px; text-align: center; padding: 20px; }
.feature-box i { font-size: 40px; color: #444; margin-bottom: 20px; }
.feature-box h3 { margin-bottom: 15px; }


/* --- FOOTER (EN ALT KISIM) --- */
.footer { background-color: #222; color: #aaa; padding-top: 60px; }
.footer-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.footer-col { flex: 1; min-width: 250px; }
.footer-col h3 { color: #fff; margin-bottom: 20px; font-size: 18px; text-transform: uppercase; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: #aaa; text-decoration: none; transition: 0.3s; }
.footer-col ul li a:hover { color: #fff; }
.footer-bottom { background-color: #111; text-align: center; padding: 20px 0; font-size: 14px; }


/* --- WHATSAPP BUTONU --- */
.whatsapp { 
    position: fixed; /* Ekranı kaydırsan da sabit kalır */
    bottom: 20px; 
    right: 20px; 
    background: #25D366; 
    color: white; 
    font-size: 30px; 
    padding: 15px; 
    border-radius: 50%; /* Tam yuvarlak yapar */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Gölge verir */
    z-index: 1000; 
    transition: 0.3s; 
}
.whatsapp:hover { 
    background: #128C7E; 
    transform: scale(1.1); /* Üzerine gelince biraz büyür */
}


/* --- MOBİL UYUMLULUK (MEDIA QUERIES) --- */
/* Ekran boyutu 768px (Tablet/Telefon) veya daha küçükse bu kuralları uygula */
@media (max-width: 768px) {
    .nav-menu { 
        display: none; /* Menüyü standart halinde gizler */
        width: 100%; 
        position: absolute; 
        top: 100%; 
        left: 0; 
        background-color: #fff; 
        box-shadow: 0 5px 5px rgba(0,0,0,0.1); 
    }
    
    /* JavaScript ile 'active' eklenince menü açılır */
    .nav-menu.active { 
        display: block; 
    }
    
    .nav-menu ul { flex-direction: column; /* Linkleri alt alta dizer */ }
    .nav-menu ul li { margin: 0; text-align: center; border-bottom: 1px solid #eee; }
    .nav-menu ul li a { display: block; padding: 15px; }
    
    .hamburger { display: block; /* 3 Çizgi butonunu gösterir */ }
    
    .hero { height: 500px; /* Mobilde slider boyunu biraz kısaltır */ }
    .slide-content h2 { font-size: 32px; /* Başlığı küçültür */ }
    .slide-content p { font-size: 16px; /* Yazıyı küçültür */ }
}
/* iPhone otomatik telefon linklerini düzenle */
a[href^="tel"] {

}
/* Sadece alt kısımdaki (footer) telefon linklerini beyaz yapar */
.footer a[href^="tel"] {
    color: #ffffff !important;
    text-decoration: none !important; /* Alt çizgiyi kaldırır */
	 font-weight: bold; /* Okunurluğu artırmak için kalınlaştırır */
}

/* Üst kısımdaki (header) telefon linkini görünür (siyah/gri) yapar */
.header a[href^="tel"], .top-bar a[href^="tel"] {
    color: #333333 !important; /* Burayı koyu bir renk yapıyoruz */
}