/* 1. GENEL AYARLAR */
body {
    background-image: url("resim1.jpg");
    background-attachment: fixed;
    max-width: 100%;
    margin: 0; padding: 0;
    user-select: none;
    overflow-x: hidden;
}

/* 2. ÜST BAŞLIK (LOGOLAR VE BAŞLIK) */
.ust_baslik_alani {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    background: #1a1a1a; /* Arka planı belirginleştirdik */
    border-bottom: 3px solid #D4AF37 !important;
    box-sizing: border-box !important;
    height: 80px;
}

.sirket_baslik {
    flex: 2 !important;
    text-align: center !important;
    color: #D4AF37 !important;
    font-family: 'Arial Black', sans-serif !important;
    font-size: clamp(20px, 4vw, 32px) !important;
    font-weight: bold !important;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    margin: 0 15px !important;
}

.logo_sol, .logo_sag { flex: 1; }
.logo_sol { text-align: left; padding-left: 20px; }
.logo_sag { text-align: right; padding-right: 20px; }

.logo_sol img, .logo_sag img {
    /* Sabit Altın Sarısı Filtresi */
    filter: invert(72%) sepia(55%) saturate(450%) hue-rotate(5deg) brightness(95%) contrast(95%) !important;
    transition: all 0.4s ease-in-out !important;
}

/* Üzerine gelince (Hover) Siyaha dönmesini engelle, Işıltı ver */
.logo_sol img:hover, .logo_sag img:hover {
    /* Biraz daha parlak bir altın tonu */
    filter: invert(72%) sepia(55%) saturate(700%) hue-rotate(5deg) brightness(115%) contrast(100%) !important;
    transform: scale(1.05); /* Çok hafif büyüme efekti */
    cursor: pointer;
}

/* 3. ANA İSKELET (EN KRİTİK KISIM) */
.ana_kapsayici {
    display: flex !important;
    align-items: flex-start !important; /* Menü içeriği kadar olsun, aşağı uzamasın */
    padding: 20px;
    gap: 10px; /* Menü ile içerik arasındaki o dev boşluğu kapattık */
}

.yan_menu_alani {
    width: 220px !important;
    flex: 0 0 220px !important;
    height: auto !important; /* Boyu sadece içindeki menü sayısı kadardır */
    border-right: 2px solid #D4AF37;
    background: rgba(0, 0, 0, 0.3);
}
.icerik_alani {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: stretch !important; /* İki kutunun (Giriş ve Proje) boyunu EŞİTLER */
    gap: 20px !important; /* Kutuların birbirine yapışmasını engeller */
    justify-content: flex-start !important; /* Sağa dayalı olmayı engeller */
}

.orta_sag_sol {
    flex: 1 1 400px !important;
    max-width: 550px !important; /* Çok genişleyip sağa yaslanmasın diye */
    display: flex;
}

.giris_tablo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Elemanları yukarıdan başlat */
    gap: 15px; /* Elemanlar arasına standart boşluk bırak */
    box-sizing: border-box;
}

.giris_tablo input, .giris_tablo select, .giris_tablo button {
    width: 100% !important; /* Kutunun dışına çıkmasını engeller */
    max-width: 100%;
    margin: 0 !important; /* Yanlardaki gereksiz payları sıfırla */
    padding: 10px;
    border-radius: 4px;
    box-sizing: border-box; /* Padding'i genişliğe dahil et (Taşmayı önleyen sır buyur) */
}

.giris_tablo, .orta_sol {
    width: 100% !important;
    min-height: 400px !important; /* Çok kısa kalmasınlar ama 80vh gibi devleşmesinler */
    max-height: 80vh; /* Ekrandan dışarı çıkmasını engeller */
    overflow-y: auto; /* İçerik çoksa kutu içinde kaydırılabilir olur */
    margin: 0 !important;
}

/* 5. MENÜ VE DİĞER DETAYLAR */
.menu_ogesi {
    padding: 15px 20px;
    font: bold 15px 'Calibri', sans-serif;
    color: #D4AF37 !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    cursor: pointer;
    transition: 0.3s;
}

.menu_ogesi:hover {
    background: #D4AF37 !important;
    color: #1a1a1a !important;
    padding-left: 30px;
}

/* 6. MOBİL UYUMLULUK (SENİN KODUNUN EN SAĞLAM HALİ) */
@media (max-width: 768px) {

    .modal_kapsayan {
        width: 95% !important;
        margin: 10px !important;
    }
    
   .ust_baslik_alani .logo_sag {
        display: none !important;
    }

    .ust_baslik_alani {
        display: flex !important;
        flex-direction: column !important; /* Logoları ve başlığı alt alta diz */
        height: auto !important; /* Yüksekliği serbest bırak ki sığsın */
        padding: 15px 5px !important;
        gap: 10px !important; /* Elemanlar arası boşluk */
        align-items: center !important;
    }


.ana_kapsayici {
        flex-direction: column !important; /* Mobilde tekrar alt alta gelsinler */
    }
    .icerik_alani {
        flex-direction: column !important; /* İki alan mobilde alt alta */
    }
    .orta_sag_sol {
        width: 100% !important; /* Mobilde tam genişlik */
    }

    .yan_menu_alani { width: 100% !important; border-right: none; border-bottom: 2px solid #D4AF37; }


    .logo_sol { order: 1; } /* Sol logo en üstte */
    .logo_sag { order: 3; } /* Sağ logo en altta (veya tam tersi yapabilirsin) */
    .logo_sol img, .logo_sag img {
        height: 35px !important; /* Mobilde logoları biraz daha küçülttük ki yer kalsın */
        width: auto !important;
    }

.orta_sol, .giris_tablo {
        padding: 40px !important; /* Büyük ekranda asil durması için bol boşluk */
    }

.sirket_baslik {
        font-size: 18px !important; /* Yazı uzun olduğu için bir tık küçülttük */
        margin: 5px 0 !important;
        order: 2; /* Yazı ortada dursun */
    }

.mobil_alt_alan {
    display: flex !important; /* Artık sadece mobilde değil, her yerde görünür */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(26, 26, 26, 0.9); /* Koyu şık arka plan */
    border-top: 3px solid #D4AF37; /* Altın sarısı çizgi */
    width: 100%;
    margin-top: auto; /* Sayfa kısa kalsa bile en dibe iter */
    box-sizing: border-box;
}

.mobil_alt_alan .logo_sag img {
    height: 50px !important;
    filter: invert(72%) sepia(55%) saturate(450%) hue-rotate(5deg) brightness(95%) contrast(95%) !important;
}

    /* Alt marka yazısının stili */
.alt_marka_yazi {
    color: #D4AF37;
    font-family: 'Arial Black', sans-serif;
    font-size: 16px;
    margin-top: 10px;
    text-transform: uppercase;
}

body {
        overflow-x: hidden !important;
    }
}

@media (min-width: 769px) {
    /* Logoların (Aynı bıraktık) */
    .logo_sol img, .logo_sag img {
        width: 120px !important;
        height: 55px !important;
        object-fit: contain !important;
    }

.ana_kapsayici {
        display: grid !important;
        /* Menü(220px) - Kalan alanın geri kalanı dengeli paylaşılsın */
        grid-template-columns: 220px 1fr 1fr !important;
        width: 98% !important; /* Kenarlara çok yapışmasın */
        margin: 0 auto !important;
        gap: 60px !important; /* Kutuların arasını asilce açtık */
        padding: 30px !important;
        align-items: start !important;
    }

    /* Menü yerinde kalsın */
    .yan_menu_alani {
        width: 220px !important;
        height: auto !important;
    }

.icerik_alani {
        display: contents !important; 
    }

.orta_sag_sol {
        width: 100% !important;
        min-width: 380px !important;
        display: flex !important;
    }

.orta_sol, .giris_tablo {
        width: 100% !important;
        min-height: 520px !important;
        border-radius: 3px !important;
        transition: all 0.5s ease; /* Renk geçişi yumuşak olsun */
        /* Varsayılan şeffaf siyah zemin */
        background: rgba(0, 0, 0, 0.4); 
        border: 1px solid rgba(212, 175, 55, 0.2);

        padding: 40px !important;8
    }
}


.mobil_alt_alan {
    display: none; /* Bilgisayarda görünmez */
}

.tumsoft_footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: rgba(26, 26, 26, 0.9);
    border-top: 2px solid #D4AF37;
    margin-top: 30px;
}

.ekranOrtucu {
    position: fixed !important; /* Sayfadan bağımsız, ekrana çakılı */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.8) !important; /* Arkayı karartır */
    display: flex !important;
    justify-content: center !important; /* Yatayda ortalar */
    align-items: center !important;    /* Dikeyde ortalar */
    z-index: 9999 !important;          /* Her şeyin en üstünde durur */
}

.modal_kapsayan {
    position: relative !important;
    background: #FFE082 !important; /* Senin o özel sarı tonun */
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    width: 90% !important;
    max-width: 500px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    color: black !important;
    border: 2px solid #D4AF37 !important; /* Dış çerçeve altın sarısı */
    animation: modalAcilis 0.3s ease-out; /* Hafif bir büyüme efekti */
}

@keyframes modalAcilis {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}