/* Genel Sıfırlamalar ve Temel Ayarlar */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* Sayfa zemin rengi */
    line-height: 1.6; /* Okunabilirliği artırır */
    color: #333; /* Genel yazı rengi */
}

/* --- */

/* Header Alanı */
header {
    background-color: #fcfcfc;
    padding: 15px 0; /* Üstten ve alttan boşluk */
    display: flex; /* İçeriği Flexbox ile düzenle */
    flex-direction: column; /* İçeriği dikey sırala (logo üstte, nav-and-lang altta) */
    align-items: center; /* Yatayda ortala */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Hafif gölge */
}

/* Logo - Dinamik Boyutlandırma */
.logo {
    width: clamp(150px, 30vw, 450px);
    height: auto;
    display: block;
    margin-bottom: 15px;
}

/* Yeni Kapsayıcı Div: Navigasyon ve Dil Seçici İçin */
.nav-and-lang {
    display: flex; /* İçindeki öğeleri (nav ve dil seçici) yan yana dizer */
    flex-wrap: wrap; /* Sığmazsa alt satıra geçsin */
    justify-content: center; /* Yatayda ortala */
    align-items: center; /* Dikeyde ortala (butonlarla aynı hizada olsun) */
    gap: 20px; /* Navigasyon ve dil seçici arasındaki boşluk */
    margin-top: 15px; /* Logo ile arasına boşluk */
    width: 100%; /* Header içinde tam genişliği kaplasın */
    max-width: 800px; /* Çok geniş ekranlarda dağılmasını engellemek için */
}

/* Navigasyon Butonları */
nav {
    display: flex; /* Butonları yan yana diz */
    gap: 10px; /* Butonlar arası boşluk */
    flex-wrap: wrap;
    justify-content: center; /* Butonları kendi içinde ortalar */
    max-width: 600px; /* Buton grubunun çok yayılmasını engellemek için isteğe bağlı */
}

/* Button - Dinamik Boyutlandırma */
button {
    background-color: #184f9e; /* Mavi tonu */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;

    width: clamp(100px, 12vw, 140px);
    height: clamp(55px, 6vw, 70px);

    font-size: clamp(13px, 2.5vw, 18px);

    text-align: center;
    white-space: pre-line; /* Metnin alt satıra geçmesine izin verir */
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

button:hover {
    background-color: #45a049; /* Hover'da yeşil tonu */
    transform: translateY(-2px); /* Hafif yukarı kaydırma efekti */
}

/* --- */

/* Ana Menü Bölümü */
main {
    padding: 20px 0;
}

.menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px; /* Menü öğeleri arası boşluk */
    justify-content: center; /* Izgaradaki öğeleri yatayda ortala */
    align-items: stretch; /* Kutuların yüksekliklerini eşitler */
    margin: 20px auto; /* Üst/alt boşluk, yatayda ortala */
    max-width: 1700px; /* Maksimum genişlik */
    padding: 0 15px; /* Yanlardan iç boşluk */
    box-sizing: border-box; /* Padding ve border'ın genişliğe dahil olmasını sağlar */
}

/* Menü Kategori Başlıkları için Stil */
.menu-category-title {
    grid-column: 1 / -1; /* Başlığın tüm ızgara sütunlarını kaplamasını sağlar */
    width: 100%; /* Emin olmak için tam genişlik */
    text-align: center;

    background-color: white; /* Kutu arka planı */
    border-radius: 90px; /* Yuvarlak köşeler */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Hafif gölge */
    border: 1px solid #e0e0e0; /* Hafif kenarlık */

    padding: 20px 30px;
    margin-top: 10px;
    margin-bottom: 20px;

    font-size: 2.2em;
    color: #184f9e; /* Menü başlık rengi: Lacivert */
    font-weight: bold;
    text-transform: uppercase;

    transform: translateY(-20px); /* Kutu başlığını biraz yukarı kaydır */
    position: relative;
    z-index: 1;

    flex-grow: 0;
    text-shadow: none;
}

/* Menü Öğesi (Ürün Kutuları) - Genel Stiller */
.menu-item {
    background-color: white; /* Resim yüklenmezse varsayılan arka plan */
    background-size: cover; /* Görseli kutuyu kaplayacak şekilde boyutlandır */
    background-position: center; /* Görseli kutunun ortasına hizala */
    background-repeat: no-repeat; /* Görselin tekrarlamasını engelle */
    min-height: 200px; /* Kutuların en az bir yüksekliği olsun ki arka plan görünsün */

    padding: 20px;
    border-radius: 90px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center; /* İçeriği dikeyde ortala */
    align-items: center; /* İçeriği yatayda ortala */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}

/* Kutu üzerine geldiğinizde görsel efektler */
.menu-item:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Metinlerin genel stilleri - Arka plan görselleri üzerinde okunurluk için güncellendi */
.menu-item h2,
.menu-item p { /* Fiyat etiketi buradan çıkarıldı */
    z-index: 2; /* Karartmanın üzerine çıkması için */
    position: relative;
    color: #184f9e; /* Metin rengi Adrina mavisi yapıldı */
    text-shadow: none; /* Metin gölgesi kaldırıldı */
    width: 100%; /* Metnin kutu genişliğini almasını sağla */
    box-sizing: border-box; /* Padding'i genişliğe dahil et */
}

/* Ürün Başlığı (h2) Stili */
.menu-item h2 {
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 10px;
}

/* Ürün Açıklaması (p) Stili */
.menu-item p {
    font-size: 1em;
    margin-bottom: 15px;
    flex-grow: 1;
}

/* Ürün Fiyatı Stili - Rengi özel olarak ayarlandı */
.menu-item .price { /* '.menu-item' eklendi, daha spesifik olması için */
    z-index: 2; /* Karartmanın üzerine çıkması için */
    position: relative;
    font-weight: bold;
    font-size: 28px;
    color: #e74c3c; /* Fiyat rengi kırmızı tonu yapıldı */
    margin-top: 10px;
    display: block;
    text-shadow: none; /* Fiyat metninden de gölge kaldırıldı */
}

/* **Arka plan görselleri için özel sınıflar - Görsel yolları burada tanımlı** */
.food-menu-bg { background-image: url('images/yiyecek.jpg'); }
.drink-menu-bg { background-image: url('images/icecek.jpg'); }
.spa-bg { background-image: url('images/spa.jpg'); }
.tv-bg { background-image: url('images/tv.jpg'); }
.yikama-bg { background-image: url('images/yikama.jpg'); }
.anket-bg { background-image: url('images/anket.jpg'); }
.bilgi-bg { background-image: url('images/bilgi.png'); }

/* **EKLENDİ/DÜZELTİLDİ: Her arka plan görseline sahip menü öğesi için karartma efekti** */
.menu-item.food-menu-bg::before,
.menu-item.drink-menu-bg::before,
.menu-item.spa-bg::before,
.menu-item.tv-bg::before,
.menu-item.yikama-bg::before,
.menu-item.anket-bg::before,
.menu-item.bilgi-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Siyah karartma, %40 opaklık */
    border-radius: 90px; /* Kutunun kenar yuvarlaklığını takip etmeli */
    z-index: 0; /* İçeriğin (metinlerin) arkasında kalmasını sağlar */
}

/* --- */

/* Footer Alanı */
footer {
    background-color: #184f9e;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    font-size: 0.9em;
}

/* Sosyal İkonlar */
.social-icons {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-bottom: 20px;
    align-items: center;
}

.social-icons a {
    color: #fff;
    font-size: 28px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
}

.social-icons a:hover {
    color: #ffd700;
}

.tripadvisor-icon {
    width: 28px;
    height: auto;
    vertical-align: middle;
    transition: opacity 0.3s ease;
}

.social-icons a:hover .tripadvisor-icon {
    opacity: 0.7;
}

.social-icons a i {
    font-size: 28px;
}

/* --- */

/* Google Translate Widget'ı İçin Özel Stiller ve Metin Kontrolü */

/* Dil seçici ve metni kapsayan div */
.language-selector-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-left: 15px;
}

/* Kendi "Language" metnimiz için stil */
.lang-select-text {
    font-family: Arial, sans-serif;
    color: #184f9e;
    font-size: 16px;
    font-weight: bold;
}

/* Google Translate Widget'ının Kendisini Hedefleme (select kutusunu içeren div) */
#google_translate_element .goog-te-gadget {
    font-family: Arial, sans-serif;
    color: #184f9e;
    font-size: 16px;
    line-height: 1.2;
    border: 1px solid #184f9e;
    border-radius: 8px;
    background-color: #f9f9f9;
    padding: 8px 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
}

#google_translate_element .goog-te-gadget:hover {
    border-color: #45a049;
    background-color: #e0ffe0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Google Translate'in varsayılan "Dili Seçin" metnini gizle */
#google_translate_element .goog-te-gadget-simple .VIpgJd-ZVi9od-lgjt6c {
    display: none !important;
}

/* Google Translate'in eklediği bayrak ve "Google Translate" yazısı/linkini gizle */
.goog-te-gadget img,
.goog-te-gadget-simple .VIpgJd-ZVi9od-xl07Ob-OEVmcd,
.goog-te-gadget-simple a.VIpgJd-ZVi9od-xl07Ob-OEVmcd {
    display: none !important;
}

/* Seçenekler menüsü içindeki metin (select box'ın kendisi) */
.goog-te-combo {
    font-family: Arial, sans-serif;
    color: #184f9e;
    background-color: #f9f9f9;
    border: none;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* --- */

/* Medya Sorguları (Responsive Tasarım İçin) */

/* Tablet ve Büyük Mobil Cihazlar */
@media (max-width: 768px) {
    header {
        padding: 10px 0;
    }

    .nav-and-lang {
        flex-direction: column;
        gap: 10px;
    }

    nav {
        gap: 8px;
    }

    .menu {
        gap: 20px;
        padding: 0 10px;
    }
    .menu-category-title {
        font-size: 1.8em;
        margin-top: 15px;
        margin-bottom: 10px;
        padding: 15px 15px;
        transform: translateY(-15px);
    }
    .menu-item {
        padding: 18px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        min-height: 180px; /* Tablet boyutları için min yükseklik */
    }
    .menu-item h2 {
        font-size: 1.6em;
    }
    .menu-item p {
        font-size: 0.95em;
    }
    .price {
        font-size: 24px;
    }
    footer {
        padding: 15px;
        margin-top: 30px;
    }

    /* Dil Seçici ve Metin Kapsayıcısı */
    .language-selector-wrapper {
        margin-left: 0;
        margin-top: 15px;
        width: 100%;
        box-sizing: border-box;
    }

    #google_translate_element .goog-te-gadget {
        width: 100%;
    }
    .goog-te-combo {
        width: 100%;
    }
    .lang-select-text {
        width: auto;
    }
}

/* Küçük Mobil Cihazlar */
@media (max-width: 576px) {
    .menu {
        gap: 15px;
    }
    .menu-item {
        max-width: 400px;
        padding: 15px;
        min-height: 150px; /* Küçük mobil cihazlar için min yükseklik */
    }
    .menu-category-title {
        font-size: 1.5em;
        margin-top: 10px;
        margin-bottom: 8px;
        padding: 10px 10px;
        transform: translateY(-10px);
    }
    .menu-item h2 {
        font-size: 1.4em;
    }
    .price {
        font-size: 22px;
    }
}