/* Genel Navbar Stilleri */
@font-face {
    font-family: 'PoiretOne-Regular';
    src: url('../fonts/PoiretOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.img-fluid {
  /* Yüksekliği %90’la sınırlayalım (kapsayıcının veya viewport'un) */
    max-height: 100vh !important; /* Ekran yüksekliğinin %90'ı */
    width: 100%;
    height: auto;
    object-fit: cover;   /* Görseli kırparak kapsayıcıya tam doldurur */
    object-position: center; /* Görseli ortada tut */
}

@media (max-width: 768px) {
  .img-fluid {
    max-height: 40vh !important; /* Mobilde max %50 ekran yüksekliği */
  }
}


.navbar {
    background: rgba(0, 0, 0, 0.8); /* Saydam arka plan */
    color: white;
    padding: 10px 40px;
    display: flex;
    justify-content: space-between; /* Menü öğelerini ve dil seçimini iki uca yaslar */
    align-items: center;
}

.navbar .menu-items a {
    color: white;
    text-decoration: none;
    padding: 8px 50px;
    display: inline-block;
    position: relative; /* Pozisyon ayarı */
    transition: color 0.3s; /* Renk değişim animasyonu */
}

.navbar .menu-items a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0; /* Sol tarafa yasla */
    width: 1px; /* Çizginin genişliği */
    height: 80%;
    margin-top: 5%;
    background-color: transparent;
    transition: background-color 0.3s, transform 0.3s ease; /* Animasyon için geçiş süresi ve tipi */
    transform: scaleY(0);
    transform-origin: bottom;
}

.navbar .menu-items a:hover::before,
.navbar .menu-items a.active::before {
    background-color: white; /* Çizginin rengi */
    transform: scaleY(1); /* Çizgiyi yavaşça göster */
}

.navbar .menu-items a.active::before {
    background-color: white; /* Seçili öğe için çizgi rengi */
    transform: scaleY(1); /* Seçili öğe çizgisini sürekli göster */
}


.navbar .menu-items {
    display: flex;
    align-items: center;
}

.navbar .logo {
    font-family: 'PoiretOne-Regular', sans-serif;
    font-size: 31px;
    font-weight: 100;
    margin-right: 5%; /* Logo ve menü öğelerini ayırır */
}

.language-select {
    margin-left: auto; /* Dil seçimi için */
    margin-right: 30px;
}

.navbar .menu-items a,
.mobile-navbar .mobile-menu-items a {
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    display: inline-block;
    margin-right: 100px;
}

.language-select form {
    margin: 0;
}

.language-select select {
    background-color: rgba(0, 0, 0, 0); /* Saydam arka plan */
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.language-select select:focus {
    outline: none;
}

.mobile-navbar {
    display: none;
    flex-direction: column; /* Dikey düzen */
    justify-content: center; /* İçeriği ortala */
    align-items: center; /* İçeriği yatayda ortala */
    background-color: #333;
    padding: 10px 20px;
    width: 100%;
}

.logo-toggle-container {
    width: 100%;
    display: flex;
    justify-content: space-between; /* Logo sol, toggle sağ */
    align-items: center;
}

.mobile-navbar .logo {
    font-family: 'PoiretOne-Regular', sans-serif;
    font-size: 31px;
    font-weight: bold;
    margin-right: 5%; /* Logo ve menü öğelerini ayırır */
    color: white;
}

.menu-button {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    width: 40px;
    height: 40px;
    margin-right: 2px;
}

.circle {
    transition: stroke-dashoffset 0.8s ease;
    stroke-dasharray: 94.25;
    stroke-dashoffset: 0;
}

.menu-button:hover .circle {
    stroke-dashoffset: 94.25;
    animation: drawCircle 0.8s ease forwards;
}

@keyframes drawCircle {
    from { stroke-dashoffset: 94.25; }
    to { stroke-dashoffset: 0; }
}

.mobile-menu-items {
    display: flex; /* Display flex olmalı */
    flex-direction: column;
    width: 100%;
    text-align: start;
    padding-top: 10px;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    max-height: 0;
}

.mobile-menu-items a {
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    display: block; /* Menü öğeleri blok düzeyinde olmalı */
    position: relative; /* Pozisyon ayarı için */
    transition: color 0.3s; /* Renk değişim animasyonu */
}

.mobile-menu-items a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0; /* Sol tarafa yasla */
    width: 2px; /* Çizginin genişliği */
    height: 100%; /* Tüm yükseklik boyunca */
    background-color: transparent;
    transition: background-color 0.3s, transform 0.3s ease; /* Animasyon için geçiş süresi ve tipi */
    transform: scaleY(0);
    transform-origin: bottom;
}

.mobile-menu-items a:hover::before,
.mobile-menu-items a.active::before {
    background-color: white; /* Çizginin rengi */
    transform: scaleY(1); /* Çizgiyi yavaşça göster */
}

.mobile-menu-items a.active::before {
    background-color: white; /* Seçili öğe için çizgi rengi */
    transform: scaleY(1); /* Seçili öğe çizgisini sürekli göster */
}



/* Mobil menü açıkken */
.mobile-menu-items.open {
    max-height: 500px; /* Yeterli bir maksimum yükseklik belirleyin, içerik boyutuna göre ayarlayabilirsiniz */
}


/* Medya Sorguları */
@media (max-width: 768px) {
    .navbar {
        display: none!important; /* Masaüstü navbar gizlenir */
    }
    .mobile-navbar {
        display: flex!important; /* Mobil navbar görünür yap */
        color: white;
    }

}

.whatsapp-float {
    position: fixed;
    bottom: 20px;   /* Dikeyden 20px yukarı */
    right: 20px;    /* Sağdan 20px içeride */
    z-index: 999;   /* Diğer ögelerin üstünde olsun */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;    /* Buton boyutu */
    height: 60px;
    border-radius: 50%;            /* Yuvarlak buton */
    background-color: black;     /* WhatsApp yeşili (opsiyonel) */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    text-decoration: none;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1); /* Hover etkisi */
}

.whatsapp-icon {
    width: 32px;
    height: 32px;
}


.instagram-float {
    position: fixed;
    bottom: 90px;   /* Dikeyden 20px yukarı */
    right: 20px;    /* Sağdan 20px içeride */
    z-index: 999;   /* Diğer ögelerin üstünde olsun */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;    /* Buton boyutu */
    height: 60px;
    border-radius: 50%;            /* Yuvarlak buton */
    background-color: black;     /* WhatsApp yeşili (opsiyonel) */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    text-decoration: none;
    transition: transform 0.3s ease;
}

.instagram-float:hover {
    transform: scale(1.1); /* Hover etkisi */
}

.instagram-icon {
    width: 32px;
    height: 32px;
}

html, body {
    overflow-x: hidden;
}