/* Genel stil */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 80px; /* Menü yüksekliğine göre sayfa içeriğini aşağı kaydır */

}


.navbar {
    background-color: #0e538f;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed; /* Menü sabit kalsın */
    top: 0; /* Sayfanın en üstünde olsun */
    width: 100%; /* Tüm genişliği kapsasın */
    z-index: 999; /* Menüden üstte olmak için */

}
.hamburger{
    display: none;
}




.logo img {
    height: 40px;
    width: auto;
}

.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: flex-start;
        margin-left: 0px; /* İstediğiniz değeri ayarlayın */

}

.phone-contact {
    display: flex;
    align-items: center;
    color: #ffffff; /* Renk beyaz */
    margin-right: 61px; /* Menü alanından boşluk bırak */
}

.phone-icon {
    margin-right: 5px; /* İkon ile numara arasında boşluk */
    font-size: 24px; /* İkon boyutu */
    animation: ring 1s infinite; /* Titreme animasyonu */
}

.phone-number {
    font-size: 20px; /* Numara boyutu */
    font-weight: bold; /* Kalın yazı */
    color: #ffffff; /* Renk beyaz */
}

/* Animasyon tanımı */
@keyframes ring {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(-10deg); }
    75% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

.menu-item {
    position: relative;
    margin-right: 15px;
}

.menu-item a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

.menu-item a:hover,
.submenu-item a:hover {
    background-color: #90EE90; /* Açık yeşil renk */
    color: #333; /* Yazı rengi (isteğe bağlı) */
}

.down-arrow {
    font-size: 12px;
    margin-left: 5px;
}

/* Masaüstü görünümde alt menü stil ayarları */
.submenu {
    display: none; /* Başlangıçta gizli */
    position: absolute;
    background-color: white;
    list-style-type: none;
    padding: 10px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 100; /* Menüden üstte olmak için */
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: row; /* Yan yana düzenleme */
    gap: 10px; /* Öğeler arasındaki boşluk */
}

/* Alt menü öğe stil ayarları */
.submenu-item {
    width: 150px; /* Her bir alt menü öğesinin genişliği */
    display: flex;
    flex-direction: column; /* Görsel ve metni dikey olarak hizalama */
    align-items: center;
    text-align: center;
}

/* Alt menü öğesi bağlantı stil ayarları */
.submenu-item a {
    display: flex;
    flex-direction: column; /* Görsel ve metni dikey olarak hizalama */
    align-items: center;
    text-align: center;
    padding: 10px;
    font-size: 14px; /* Metin punto boyutu */
    font-weight: bold; /* Yazı kalınlığı */
    color: black; /* Yazı rengi */
    width: 150px; /* Alt menü öğesinin genişliği */
    height: 200px; /* Alt menü öğesinin yüksekliği */
}

/* Görsel stil ayarları */
.submenu-icon {
    width: 100%; /* Görselin genişliği, buton genişliğine uyacak şekilde */
    height: 150px; /* Görselin yüksekliği */
    object-fit: cover; /* Görselin alanı kaplamasını sağlar */
}

/* Menülerin açık kalmasını sağlama */
.menu-item:hover .submenu {
    display: flex;
}

/* Mobil stil */
@media (max-width: 768px) {
    .hamburger {
        display: block;
        cursor: pointer;
        color: white;
        font-size: 24px;
        padding: 10px;
        z-index: 1000; /* Menüden üstte olmak için */
        margin-right: 28px;
    }

.phone-contact{
    display: none;
}


    .menu {
        flex-direction: column;
        width: 250px;
        height: 100vh;
        background-color: #333;
        position: fixed;
        top: 90px;
        left: -300px;
        transition: left 0.3s ease;
        z-index: 1000; /* Menü açıldığında diğer her şeyin üstünde */
        margin-left: 0px;
    }

    .menu-item {
        margin-right: 0;
    }

    .menu-item a {
        padding: 10px;
        border-bottom: 1px solid #444;
        color: white;
    }

    /* Mobil görünümde alt menü düzenlemeleri */
    .submenu {
        display: none; /* Alt menüler mobilde gizli */
        position: static; /* Sabit konumda */
        background-color: #333; /* Arka plan rengi */
        box-shadow: none; /* Gölgeyi kaldır */
        width: 100%; /* Alt menü genişliği */
        padding: 0; /* İç boşluğu sıfırla */
        flex-direction: column; /* Alt menü öğelerini dikey hizala */
    }

    .menu-item:hover .submenu {
        display: block; /* Alt menüler mobilde göster */
    }

    /* Alt menü öğeleri mobil görünümde alt alta düzenlenir */
    .submenu-item {
        height: auto; /* Buton yüksekliği */
        display: block; /* Görselleri gizle */
        text-align: left; /* Metin sol hizalı */
        padding: 1px;
    }

    .submenu-item a {
        display: block;
        width: 100%; /* Buton genişliği */
        height: auto; /* Buton yüksekliği */
        padding: 10px;
        font-size: 16px; /* Metin punto boyutu */
        font-weight: bold; /* Yazı kalınlığı */
        color: white; /* Yazı rengi */
        background-color: #444; /* Arka plan rengi */
    }

    .submenu-item .submenu-icon {
        display: none; /* Görselleri mobilde gizle */
    }

    .menu.open {
        left: 0;
    }

      .logo img {
        height: 30px; /* İstediğiniz boyutu ayarlayın */
        width: auto; /* Genişliği otomatik olarak ayarlamak için */
    }
}