@media (max-width: 1300px) {
    header {
        display: flex; /* Navbar görünür */
        justify-content: flex-end; /* TR/ENG butonu sağa hizalandı */
        padding: 30px 20px; /* İçerik boşluğu */
        position: relative; /* TR/ENG butonu için referans noktası */
    }

    header .logo  img{
        height: 50px;
        width:80px;
    }

    header nav ul {
        list-style: none; /* Liste noktaları kaldırıldı */
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-end; /* TR/ENG sağa hizalandı */
    }

    header nav ul li {
        display: none; /* Tüm menü elemanları gizlendi */
    }

    header nav ul li:last-child {
        display: block; /* Sadece TR/ENG butonu görünür */
        position: absolute;
        top: 10px;
        right: 10px;
    }

    header nav ul li:last-child a {
        color: #5b2580;
        text-decoration: none;
        padding: 10px 15px;
        border-radius: 5px;
        background-color: white; /* TR/ENG butonu arka plan rengi */
        font-size: 1rem; /* Yazı boyutu */
        transition: background-color 0.3s;
    }

    header nav ul li:last-child a:hover {
        background-color: #4a1f66; /* Hover efekti */
        color: white;
    }
}

/* Responsive Ayarlar */

/* 768px ve daha küçük ekranlar için */
@media (max-width: 768px) {
    #neden-biz .card-container {
        gap: 15px; /* Kartlar arasındaki boşluğu azalt */
        flex-direction: column; /* Kartları dikey (alt alta) sıralar */
        justify-content: center; /* Kartları ortala */
        align-items: stretch; /* Kartları tüm genişlik boyunca yay */
    }

    #neden-biz .card {
        flex: 1 1 100%; /* Kartlar %100 genişlikte olacak */
        height: 220px; /* Kartların yüksekliğini artır */
        padding: 20px; /* Padding'i artır */
        display: flex;
        flex-direction: column; /* Kart içeriğini dikey hizala */
        justify-content: space-between; /* Kart içindeki öğeleri dikeyde hizala */
        overflow: hidden; /* İçeriğin taşmasını engelle */
    }

    #neden-biz .card h3 {
        font-size: 1.2rem; /* Başlıkları büyüt */
        margin: 0; /* Başlık ile açıklama arasında boşluk yok */
        white-space: nowrap; /* Başlık metnini tek satırda tut */
        text-overflow: ellipsis; /* Taşan metni üç nokta ile göster */
        overflow: hidden; /* Taşan metni gizle */
    }

    #neden-biz .card .description {
        font-size: 1rem; /* Açıklamaları büyüt */
        display: flex;
        align-items: center; /* Dikeyde ortala */
        justify-content: center; /* Yatayda ortala */
        flex-grow: 1; /* Açıklama kısmının kartta daha fazla yer kaplamasını sağlar */
        white-space: nowrap; /* Açıklamayı tek satırda tut */
        text-overflow: ellipsis; /* Taşan metni üç nokta ile göster */
        overflow: hidden; /* Taşan metni gizle */
    }
}

/* 480px ve daha küçük ekranlar için */
@media (max-width: 480px) {
    #neden-biz .card-container {
        gap: 10px; /* Kartlar arasındaki boşluğu daha da azalt */
        flex-direction: column; /* Kartları alt alta sıralar */
    }

    #neden-biz .card {
        flex: 1 1 100%; /* Kartlar %100 genişlikte olacak */
        height: 250px; /* Kartların yüksekliğini artır */
        padding: 18px; /* Padding'i artır */
        display: flex;
        flex-direction: column; /* Kartları dikey hizala */
        justify-content: space-between; /* Kart içindeki öğeleri dikeyde hizala */
        overflow: hidden; /* İçeriğin taşmasını engelle */
    }

    #neden-biz .card h3 {
        font-size: 1rem; /* Başlıkları büyüt */
        margin: 0; /* Başlık ile açıklama arasında boşluk yok */
        white-space: nowrap; /* Başlık metnini tek satırda tut */
        text-overflow: ellipsis; /* Taşan metni üç nokta ile göster */
        overflow: hidden; /* Taşan metni gizle */
    }

    #neden-biz .card .description {
        font-size: 0.9rem; /* Açıklamaları büyüt */
        display: flex;
        align-items: center; /* Dikeyde ortala */
        justify-content: center; /* Yatayda ortala */
        flex-grow: 1; /* Açıklama kısmının kartta daha fazla yer kaplamasını sağlar */
        white-space: nowrap; /* Açıklamayı tek satırda tut */
        text-overflow: ellipsis; /* Taşan metni üç nokta ile göster */
        overflow: hidden; /* Taşan metni gizle */
    }
}


/* Telefon ekranında responsive tasarım */
@media (max-width: 768px) {
    #calisma .card-container {
        grid-template-columns: 1fr; /* Tüm kartlar alt alta */
        gap: 15px; /* Kartlar arasındaki boşluk */
    }

    #calisma .process-card {
        height: 100px; /* Kartları boylamasına biraz büyüt */
        padding: 20px; /* İçerik için daha geniş padding */
    }

    #calisma .process-card h3 {
        font-size: 1.3rem; /* Başlık boyutunu küçült */
        white-space: nowrap; /* Metin taşmasın ve aşağıya geçmesin */
        overflow: hidden; /* Taşan metni gizle */
        text-overflow: ellipsis; /* Taşan metni üç nokta ile göster */
    }

    #calisma .process-card p {
        font-size: 1rem; /* Paragraf yazı boyutunu küçült */
        line-height: 1.4; /* Satır aralığını ayarla */
        white-space: normal; /* Satırların düzgünce sarılmasını sağla */
        word-wrap: break-word; /* Taşan kelimeleri böl */
        text-align: center; /* Yazıyı ortala */
        position: absolute; /* Ortalamayı sağlamak için */
        top: 50%; /* Dikeyde ortala */
        left: 50%; /* Yatayda ortala */
        transform: translate(-50%, -50%); /* Gerçek ortalama */
        opacity: 0; /* Hover olmadan görünmesin */
        width: 90%; /* Yazıyı daha geniş yapalım */
        transition: opacity 0.1s ease; /* Geçiş efekti */
    }

    #calisma .process-card:hover p {
        opacity: 6; /* Hover ile görünür hale gelsin */
    }
}