/* --- SEÇENEK 2: DİNAMİK VE GRADIENT --- */
:root {
    --primary-blue: #0284c7;
    --gradient-blue: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    --gradient-green: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    --text-dark: #0f172a;
    --text-light: #475569;
    --bg-white: rgba(255, 255, 255, 0.95); /* Camsı (glass) header efekti için */
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f1f5f9; color: var(--text-dark); line-height: 1.6; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Header (Camsı Tasarım) */
#main-header { background: var(--bg-white); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.05); position: fixed; width: 100%; top: 0; z-index: 1000; transition: all 0.3s ease;}
.header-container { display: flex; justify-content: space-between; align-items: center; min-height: 80px; padding: 10px 0; }
.logo a { text-decoration: none; font-size: 36px; font-weight: 800; color: var(--primary-blue); text-transform: uppercase; letter-spacing: 1px; padding-left: 20px;}
.logo span { color: #f59e0b; }
.main-nav a {
    position: relative; /* EKLENDİ */
    text-decoration: none;
    color: var(--text-dark);
    margin: 0 15px;
    font-weight: 600;
    transition: opacity 0.3s;
}

/* EKLENDİ */
.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background-color: var(--primary-blue);
    transition: width 0.3s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--primary-blue);
    opacity: 0.6;
    transition: 0.2s;
}

/* Gradient Butonlar */
.btn-call, .btn-primary, .btn-secondary {
    border-radius: 12px; /* Tatlı ve modern köşe dönüşü */
    text-decoration: none; font-weight: bold; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none;
}
.btn-call { background: var(--gradient-green); color: white; padding: 12px 24px; box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3); border-radius: 30px}
.btn-primary { background: var(--gradient-blue); color: white; padding: 14px 28px; box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3); }
.btn-secondary { background: transparent; border: 2px solid #0ea5e9; color: #0ea5e9; padding: 12px 28px; }

/* Hover Efektleri */
.btn-call:hover, .btn-primary:hover { opacity: 0.9; transform: scale(1.02); }
.btn-secondary:hover { background: rgba(14, 165, 233, 0.1); opacity: 0.8; }

/* Hero ve Kartlar */
.hero { background: radial-gradient(circle at top right, #e0f2fe 0%, #f1f5f9 100%); padding: 160px 20px 100px; text-align: center; }
.hero h1 { font-size: 2.8rem; background: var(--gradient-blue); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 20px; font-weight: 900; }
.hero p { font-size: 1.2rem; color: var(--text-light); max-width: 600px; margin: 0 auto 30px; }
.hero-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.services-summary { display: flex; gap: 20px; margin-top: -40px; position: relative; z-index: 10; }

.service-card {
    background: white; padding: 30px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); flex: 1; text-align: center; transition: all 0.3s ease;
}
.service-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 20px 40px rgba(14, 165, 233, 0.1); }
.service-card h3 { color: var(--primary-blue); margin-bottom: 15px; font-size: 1.4rem; }
.review-card{background-color: #a7dc9b; padding: 5%; border-radius: 5%; margin: 1%;}
.review-card:hover{opacity: 0.9; transform: scale(1.02);}

/* Responsive (Mobil) */
/* Responsive (Mobil) - DÜZELTİLMİŞ VERSİYON */
@media screen and (max-width: 768px) {
    .header-container { 
        flex-direction: column; 
        gap: 12px; 
        padding: 15px 0; 
    }
    
    /* Logo mobilde çok bağırmasın diye bir tık küçülttük */
    .logo a { 
        font-size: 22px; 
    }

    /* Menü ortalama düzeltmesi */
    .main-nav { 
        display: flex; 
        flex-wrap: wrap; 
        justify-content: center; 
        align-items: center;
        gap: 12px 15px; /* Dikeyde 12px, yatayda 15px eşit boşluk */
        width: 100%;
    }

    .main-nav a { 
        margin: 0; /* Kenar boşluklarını sıfırladık ki 'gap' ile tam ortalansın */
        font-size: 14px; /* Mobilde yan yana daha rahat sığması için */
    }

    /* Hemen Ara butonu orantı düzeltmesi */
    .btn-call { 
        width: auto; /* Tam ekran kaplamasını engelledik */
        min-width: 220px; /* İdeal bir buton genişliği verdik */
        margin: 5px auto 0; /* Butonu tam merkeze sabitledik */
        padding: 10px 20px; /* Yüksekliğini biraz tıraşladık */
        font-size: 15px;
    }

    /* Mobilde Header daha fazla yer kapladığı için alttaki yazının üstünü biraz daha açtık */
    .hero { padding: 210px 20px 60px; } 
    .hero h1 { font-size: 2rem; margin-top: 10px; }

    .services-summary { flex-direction: column; margin-top: 20px; }
    
    /* Alttaki acil usta çağır butonları tam genişlik kalabilir */
    .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
    
    .container div[style*="display: flex"] { flex-direction: column !important; gap: 20px !important; }

    

}