/* --- Genel Sayfa Ayarları --- */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f7f6;
    color: #333;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.network-container {
    display: flex;
    flex: 1; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;     
    padding: 40px 20px;
    box-sizing: border-box;
}

/* --- Ana Logo --- */
.main-logo-container {
    margin-bottom: 120px; 
    position: relative;   
    width: 100%; /* Logonun içinde esneyebileceği alanı tanımlar */
    max-width: 350px; /* Logonun alabileceği en büyük genişlik */
    display: flex;
    justify-content: center;
}

/* GÜNCELLENMİŞ VE BASİTLEŞTİRİLMİŞ KURAL BURADA */
/* Bu kural PNG, JPG gibi tüm resim formatları için geçerlidir */
.main-logo-container img {
    width: 100%; /* Üstündeki konteynerin (max-width ile sınırlı) genişliğine tam uyar */
    height: auto;   /* Resmin oranının bozulmasını engeller */
    display: block; /* Olası hizalama sorunlarını giderir */
}


.main-logo-container::after {
    content: ''; 
    position: absolute;
    left: 50%;
    bottom: -120px; 
    transform: translateX(-50%);
    width: 2px; 
    height: 120px; 
    background-color: #cccccc; 
}

/* --- Alt Logolar Konteyneri --- */
.sub-logos-container {
    display: flex; 
    justify-content: center;
    flex-wrap: wrap;
    gap: 80px; 
    position: relative;
    padding: 0 40px; 
}

/* ... Diğer tüm stilleriniz burada devam ediyor ... */
/* (Alt logolar, iletişim, footer ve responsive stillerinde değişiklik yok) */
.sub-logos-container::before { content: ''; position: absolute; top: -60px; left: 0; right: 0; height: 2px; background-color: #cccccc; }
.logo-wrapper { position: relative; text-align: center; }
.logo-wrapper::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 2px; height: 60px; background-color: #cccccc; transition: background-color 0.3s ease; }
.logo-wrapper img { display: block; width: 150px; height: auto; background-color: #ffffff; padding: 10px; border: 1px solid #e0e0e0; border-radius: 4px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.logo-wrapper:hover img { transform: scale(1.05) translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); }
.logo-wrapper:hover::before { background-color: #007bff; }
#contact { background-color: #ffffff; padding: 60px 20px; text-align: center; border-top: 1px solid #e0e0e0; }
#contact h2 { font-size: 2.2em; margin-bottom: 15px; color: #333; }
.contact-intro { font-size: 1.1em; color: #666; max-width: 600px; margin: 0 auto 30px auto; }
.contact-details { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.contact-item { display: flex; align-items: center; font-size: 1.1em; }
.contact-item i { font-size: 1.3em; color: #007bff; width: 40px; text-align: center; margin-right: 10px; }
.contact-item a, .contact-item span { color: #333; text-decoration: none; transition: color 0.3s ease; }
.contact-item a:hover { color: #0056b3; }
footer { text-align: center; padding: 30px 20px; margin-top: 40px; border-top: 1px solid #e9e9e9; background-color: transparent; color: #888; font-size: 0.9em; width: 100%; box-sizing: border-box; }

/********************************************************/
/* RESPONSIVE TASARIM (CİHAZ UYUMLULUĞU)                */
/********************************************************/
@media (max-width: 768px) {
    .main-logo-container { margin-bottom: 60px; }
    .main-logo-container::after, .sub-logos-container::before, .logo-wrapper::before { display: none; }
    .sub-logos-container { flex-direction: column; gap: 40px; padding: 0; }
    #contact h2 { font-size: 1.8em; }
    .contact-intro { font-size: 1em; }
    .contact-item { font-size: 1em; }
}

@media (max-width: 480px) {
    #contact { padding: 40px 20px; }
    #contact h2 { font-size: 1.6em; }
}