/* Genel Stil Ayarları ve Bootstrap Üzerine Eklemeler */

:root {
    --bs-primary: #0056b3; /* Koyu Mavi */
    --bs-secondary: #f0f4f8; /* Açık Gri Mavi */
    --bs-success: #28a745;   /* Yeşil (WhatsApp için) */
    --bs-dark: #212529;      /* Footer için koyu gri */
    --bs-light: #f8f9fa;     /* Açık arka planlar */
    --bs-body-color: #555;   /* Varsayılan metin rengi */
    --bs-heading-color: #333; /* Başlık metin rengi */
}

/* Font Aileleri */
body {
    font-family: 'Roboto', sans-serif;
    color: var(--bs-body-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: var(--bs-heading-color);
}

/* Hero Section Özelleştirmeleri */
.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('res1.png') no-repeat center center/cover;
    min-height: 80vh; /* Daha büyük hero alanı */
    position: relative;
    overflow: hidden;
    color: white; /* Metin rengi beyaz */
}

.hero-section h1 {
    font-size: 3.8rem; /* Daha büyük başlık */
    font-weight: 700;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
    color: white; /* Başlık rengini beyaz tut */
}

.hero-section p {
    font-size: 1.4rem;
    font-weight: 300;
}

/* Navbar Scroll Etkisi */
.navbar-scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
}

.navbar-scrolled .nav-link {
    color: var(--bs-primary) !important;
}

.navbar-scrolled .nav-link.active {
    font-weight: bold;
}

/* Feature ve Service Kartlarına Hover Efekti */
.feature-item, .service-card, .why-us-card, .contact-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 4px solid transparent; /* Varsayılan border */
}

.feature-item:hover, .service-card:hover, .why-us-card:hover, .contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Özel service-card hover rengi */
.service-card:hover {
    border-color: var(--bs-primary);
}

/* Why Us Card Özel Stilleri */
.why-us-card .icon-circle {
    width: 70px;
    height: 70px;
    background-color: var(--bs-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.why-us-card:hover .icon-circle {
    background-color: var(--bs-white);
    color: var(--bs-primary);
}

.why-us-card:hover h4, .why-us-card:hover p {
    color: var(--bs-white); /* Hover'da metin rengi beyaz olsun */
}

.why-us-card:hover {
    background-color: var(--bs-primary); /* Hover'da arka plan primary renk olsun */
    color: var(--bs-white);
}

/* About Section Gorsel */
.about-img {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Daha belirgin gölge */
}

/* Hizmet Bölgeleri Badgeleri */
.badge {
    white-space: nowrap; /* Metnin tek satırda kalmasını sağlar */
    display: inline-flex; /* İkon ile metni hizalamak için */
    align-items: center;
}

/* Küçük Ekranlar İçin Navbar Marka Boyutu */
@media (max-width: 991.98px) {
    .navbar-brand img {
        max-height: 40px; /* Mobil görünümde logo küçülsün */
    }
    .navbar-collapse {
        background-color: var(--bs-light); /* Mobil menü arkaplanı */
        border-top: 1px solid var(--bs-border-color);
        margin-top: 10px;
        padding: 10px 0;
    }
    .navbar-nav .nav-item {
        text-align: center;
    }
    .navbar-nav .nav-link {
        padding: 10px 0;
        color: var(--bs-primary) !important; /* Mobil menü linkleri */
    }
    .navbar-nav .nav-link.active {
        font-weight: bold;
    }
    .navbar-toggler {
        border: none; /* Kenarlık kaldırma */
    }
    .d-sm-flex { /* Hero butonu mobil için dikey */
        flex-direction: column;
    }
    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
    .hero-section h1 {
        font-size: 2.8rem;
    }
    .hero-section p {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .hero-section {
        min-height: 60vh;
        padding: 90px 0;
    }
    .hero-section h1 {
        font-size: 2.2rem;
    }
    .hero-section p {
        font-size: 1rem;
    }
    .display-4 {
        font-size: calc(1.475rem + 2.7vw); /* Bootstrap varsayılanını küçült */
    }
    .display-5 {
        font-size: calc(1.425rem + 2.1vw);
    }
    .display-6 {
        font-size: calc(1.375rem + 1.5vw);
    }
    .feature-item, .service-card, .why-us-card, .contact-card {
        margin-bottom: 1rem; /* Dikey boşluk */
    }
}

@media (max-width: 575.98px) {
    .hero-section {
        padding: 60px 0;
    }
    .hero-section h1 {
        font-size: 1.8rem;
    }
    .hero-section p {
        font-size: 0.95rem;
    }
    .btn-lg {
        font-size: 0.9rem;
        padding: 12px 20px;
    }
    .px-4 {
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
    }
}