/* Tema değişkenleri */
:root {
  /* Koyu tema (varsayılan) */
  --bg-color: #181818;
  --text-color: #e0e0e0;
  --menu-bg: #212121;
  --button-bg: #d32f2f;
  --button-hover-bg: #e64a19;
  --separator-color: #333;
  --nav-bg: #fff;
  --nav-icon-color: #000;
  --nav-disabled-color: #999;
  --nav-active-icon: #d32f2f;
  --theme-text-color: #e0e0e0;
  --icon-color: white; /* Varsayılan ikon rengi (koyu tema) */
  --feedback-text-color: var(--theme-text-color); /* Geri Bildirim yazısı rengi (koyu tema) */
  --footer-border-color: var(--separator-color); /* Footer çerçeve rengi */

    /* WordPress varsayılan boşluklarını sıfırlamak için eklenen değişkenler */
    --wp--style--root--padding-top: 0 !important;
}

/* Açık tema üzerine yaz */
body.light-theme {
  --bg-color: #ffffff;
  --text-color: #222222;
  --menu-bg: #f5f5f5;
  --separator-color: #ccc;
  --nav-bg: #ffffff;
  --nav-icon-color: #000000;
  --nav-disabled-color: #bbb;
  --nav-active-icon: #d32f2f;
  --theme-text-color: #222222;
  --icon-color: black; /* Açık tema ikon rengi */
  --feedback-text-color: #000000; /* Geri Bildirim yazısı rengi (açık tema) */
  --footer-border-color: var(--separator-color); /* Footer çerçeve rengi */
}

/* Genel stiller */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px; /* Genel yazı boyutu mobil için ayarlandı */
  margin: 0;
  padding: 0; /* Body padding'leri kaldırıldı, boşluklar içerik elementleri ile yönetilecek */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;

    /* Temanın varsayılan body/html üst boşluğunu sıfırla */
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ana sayfa body için üst boşluğu azalt */
body.main-page {
  padding-top: 0; /* Ana sayfada body'nin üst padding'i sıfırlandı */
  justify-content: flex-start; /* İçeriği yukarı hizala */
  min-height: auto; /* Ana sayfada min-height: 100vh kaldırılabilir veya ayarlanabilir */
  padding-bottom: 0; /* Footer'ı alta iteceğimiz için body padding-bottom kaldırılabilir */
}

/* WordPress Admin Bar boşluğunu sıfırla (sadece giriş yapmış kullanıcılar için) */
/* Bu kural, admin barın body'ye eklediği margin-top'ı kaldırır */
body.admin-bar {
    margin-top: 0 !important;
}

/* Konteyner (Ana içerik konteyneri) */
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px; /* Maksimum genişlik mobil öncelikli tasarım için uygun */
  flex-grow: 1; /* Container'ın esneyerek footer'ı alta itmesini sağla */
  margin: 0 auto; /* İçeriği ortala */
  padding: 0 15px; /* Konteynerin yanlarına boşluk eklendi */
  box-sizing: border-box;
}

/* Üst bölüm */
.top-section {
  background-color: transparent;
  padding: 20px 0; /* Üst ve alt padding artırıldı */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%; /* Tam genişlik kullan */
  box-sizing: border-box; /* Padding'i genişliğe dahil et */
}

.main-logo-container {
  max-width: 150px; /* Logo boyutu artırıldı */
  margin-bottom: 10px; /* Logo altına boşluk */
}

.main-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.separator {
  width: 80%;
  height: 1px;
  background-color: var(--separator-color);
  margin: 15px 0; /* Ayırıcı etrafındaki boşluk artırıldı */
}

.info-section {
  color: var(--theme-text-color);
  text-align: center;
  font-size: 18px; /* Yazı boyutu artırıldı */
  padding: 5px 15px;
  border-radius: 5px;
  width: 90%;
  max-width: 300px;
  margin-top: 5px;
}

/* Menü bölümü */
.combined-section {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 0; /* Yan padding kaldırıldı, container padding'i kullanılacak */
  gap: 20px; /* Elemanlar arası boşluk artırıldı */
  width: 100%;
  box-sizing: border-box; /* Padding'i genişliğe dahil et */
}

.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* Elemanlar arası boşluk artırıldı */
  width: 100%;
}

.menu-info-box {
  background-color: var(--menu-bg);
  color: var(--theme-text-color);
  padding: 10px 15px; /* Padding artırıldı */
  border-radius: 8px;
  font-size: 14px; /* Yazı boyutu ayarlandı */
  text-align: center;
  width: 100%;
  max-width: 450px;
  box-sizing: border-box;
}

.menu-button {
  background-color: var(--button-bg);
  color: #fff;
  border: none;
  padding: 15px 30px; /* Padding artırıldı */
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px; /* Yazı boyutu artırıldı */
  width: 100%;
  max-width: 450px;
  margin-bottom: 0; /* Alt boşluk kaldırıldı */
  transition: background-color 0.2s ease-in-out;
  font-weight: bold; /* Yazı kalınlığı */
  text-transform: uppercase; /* Büyük harf */
}

.menu-button:hover {
  background-color: var(--button-hover-bg);
}

/* Alt navigasyon */
.bottom-navigation {
  background-color: transparent;
  padding: 20px 0; /* Üst ve alt padding artırıldı */
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  box-sizing: border-box; /* Padding'i genişliğe dahil et */
  margin-top: 20px; /* Üst boşluk eklendi */
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--nav-icon-color); /* İkon rengi için değişken kullanılıyor */
  cursor: pointer;
  font-size: 14px; /* Yazı boyutu ayarlandı */
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

/* Geri Bildirim yazısı stili */
#feedbackText {
    color: var(--feedback-text-color); /* Temaya göre değişen renk */
}


.nav-item svg {
  width: 35px; /* İkon boyutu ayarlandı */
  height: 35px; /* İkon boyutu ayarlandı */
  fill: currentColor; /* SVG rengi parent elementin rengini alacak */
}

.nav-item.active {
  color: var(--nav-active-icon);
}

.nav-item:nth-child(3) {
  pointer-events: none;
  opacity: 0.6;
  color: var(--nav-disabled-color);
}

.nav-icon-container {
  background-color: var(--nav-bg);
  width: 65px; /* Konteyner boyutu ayarlandı */
  height: 65px; /* Konteyner boyutu ayarlandı */
  border-radius: 12px; /* Yuvarlaklık ayarlandı */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px; /* İkon ile yazı arasına boşluk */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Hafif gölge eklendi */
}

/* Footer */
.footer-container {
  background-color: var(--menu-bg);
  padding: 20px 15px; /* Padding artırıldı */
  font-size: 12px;
  color: var(--theme-text-color);
  border-top: 1px solid var(--separator-color);
  width: 100%; /* Tam genişlik */
  box-sizing: border-box; /* Padding'i genişliğe dahil et */
  display: flex; /* Flexbox düzeni */
  flex-direction: column; /* Mobil öncelikli olarak alt alta sırala */
  align-items: center; /* Dikeyde ortala */
  margin-top: auto; /* Container'dan sonra gelmesini sağla */
  gap: 20px; /* Elemanlar arası boşluk */
}

/* Harita konteyneri */
.map-container {
    width: 100%; /* Mobil için tam genişlik */
    max-width: 300px; /* Maksimum genişlik belirlendi */
    height: 180px; /* Harita yüksekliği ayarlandı */
    margin: 0;
    flex-shrink: 0;
}

/* Harita çerçevesi */
.map-frame {
    border: 1px solid var(--footer-border-color); /* Çerçeve eklendi */
    padding: 5px; /* Çerçeve ile harita arasında boşluk */
    background-color: var(--bg-color); /* Çerçeve içi arka plan rengi */
    box-sizing: border-box;
    width: 100%; /* Çerçeveyi konteyner genişliğine ayarla */
    height: 100%; /* Çerçeveyi konteyner yüksekliğine ayarla */
}


.map-container iframe {
    width: 100%; /* Iframe'in konteynerini doldurmasını sağla */
    height: 100%; /* Iframe'in konteynerini doldurmasını sağla */
    display: block; /* Alttaki boşluğu kaldırmak için */
}

/* Sosyal medya ikonları konteyneri */
.footer-social {
    display: flex;
    flex-direction: column; /* Başlık ve ikonları alt alta sırala */
    align-items: center; /* Dikeyde ortala */
    flex-shrink: 0;
    gap: 10px; /* Başlık ve ikonlar arasında boşluk */
}

.social-media-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--theme-text-color);
    margin-bottom: 5px; /* Başlık ile ikonlar arasında ek boşluk */
}


.social-icons {
    display: flex;
    align-items: center;
    gap: 20px; /* İkonlar ve yazıları arasında boşluk artırıldı */
}

.social-link {
    display: flex;
    flex-direction: column; /* İkon ve yazıyı alt alta sırala */
    align-items: center; /* Dikeyde ortala */
    text-decoration: none; /* Alt çizgiyi kaldır */
    color: var(--theme-text-color); /* Yazı rengini temaya göre ayarla */
    font-size: 11px; /* Yazı boyutu ayarlandı */
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.social-link:hover {
    color: var(--button-hover-bg); /* Hover rengi */
}


.footer-icon {
  width: 30px; /* İkon boyutu artırıldı */
  height: 30px; /* İkon boyutu artırıldı */
  fill: currentColor;
  margin-bottom: 5px; /* İkon ile yazı arasına boşluk */
}

/* Daha geniş ekranlar için footer düzenlemesi */
@media (min-width: 600px) {
    .footer-container {
        flex-direction: row; /* Yan yana sırala */
        justify-content: space-around; /* Öğeler arasına boşluk */
        align-items: flex-start; /* Öğeleri yukarı hizala */
        padding: 20px 30px; /* Yan padding artırıldı */
    }

    .map-container {
        width: 300px; /* Harita genişliği artırıldı */
        max-width: none; /* Maksimum genişlik kaldırıldı */
    }

    .footer-social {
        align-items: flex-start; /* Sosyal medya içeriğini sola hizala */
    }

    .social-icons {
         gap: 30px; /* İkonlar arası boşluk artırıldı */
    }

    .social-link {
        flex-direction: row; /* İkon ve yazıyı yan yana sırala */
        gap: 5px; /* İkon ve yazı arasına boşluk */
    }

     .footer-icon {
        margin-bottom: 0; /* İkon altındaki boşluk kaldırıldı */
     }
}


/* Küçük ekranlar (320px ve altı) */
@media (max-width: 320px) {
    body {
        font-size: 14px; /* Daha küçük ekranlar için yazı boyutu */
    }

    .container {
        padding: 0 10px; /* Yan boşluk azaltıldı */
    }

    .top-section {
        padding: 15px 0;
    }

    .main-logo-container {
        max-width: 120px;
    }

    .separator {
        margin: 10px 0;
    }

    .info-section {
        font-size: 16px;
    }

    .combined-section {
        padding: 10px 0;
        gap: 15px;
    }

    .main-content {
        gap: 10px;
    }

    .menu-info-box {
        font-size: 12px;
    }

    .menu-button {
        padding: 12px 25px;
        font-size: 16px;
    }

    .bottom-navigation {
        padding: 15px 0;
        margin-top: 15px;
    }

    .nav-item {
        font-size: 12px;
    }

    .nav-item svg {
        width: 30px;
        height: 30px;
    }

    .nav-icon-container {
        width: 55px;
        height: 55px;
        border-radius: 10px;
        margin-bottom: 3px;
    }

    .footer-container {
        padding: 15px 10px;
        gap: 15px;
    }

    .map-container {
        height: 150px;
    }

    .social-media-title {
        font-size: 12px;
    }

    .social-link span {
        font-size: 10px;
    }

    .footer-icon {
        width: 25px;
        height: 25px;
        margin-bottom: 3px;
    }
}


/* Modal */
.feedback-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.feedback-box {
  background-color: var(--menu-bg);
  color: var(--theme-text-color);
  width: 90%; /* Modal genişliği mobil için ayarlandı */
  max-width: 450px;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-sizing: border-box;
}

.feedback-box h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.feedback-box textarea {
  width: 100%;
  height: 120px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--separator-color);
  background-color: var(--bg-color);
  color: var(--theme-text-color);
  font-size: 14px;
  resize: none;
}

.feedback-box button {
  background-color: var(--button-bg);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease-in-out;
}

.feedback-box button:hover {
  background-color: var(--button-hover-bg);
}

.feedback-modal.hidden {
  display: none;
}

/* Menü detayları (Bu stiller menü sayfası için geçerlidir) */
/* Bu stiller sadece menü detay sayfasında kullanılmalı, ana sayfada değil */
/* Eğer bu CSS dosyası hem ana sayfa hem de menü detay sayfası için kullanılıyorsa,
   bu stillerin menü detay sayfasına özgü olduğundan emin olunmalıdır.
   Örneğin, menü detay sayfasının body'sine özel bir sınıf ekleyip bu stilleri o sınıfla hedefleyebilirsiniz.
   body.menu-detail-page .header { ... } gibi.
   Şu anki yapıda bu stiller ana sayfayı da etkileyebilir.
*/
.header {
  background-color: var(--menu-bg);
  padding: 15px;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  border-bottom: 1px solid var(--separator-color);
}

.back-arrow {
  margin-right: 15px;
  cursor: pointer;
}

/* Back arrow SVG color */
.back-arrow svg path {
  fill: var(--icon-color); /* Use the theme variable for color */
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: var(--theme-text-color);
}

/* Tabs */
.tabs-container {
  overflow-x: auto;
  background-color: var(--menu-bg);
  white-space: nowrap;
  cursor: grab;
  position: fixed;
  top: 55px; /* Header yüksekliğine göre ayarlandı */
  left: 0;
  right: 0;
  z-index: 10;
  padding: 8px 0;
  display: flex;
  align-items: center;
  scrollbar-width: none;
}

.tabs-container::-webkit-scrollbar {
  display: none;
}

.tabs {
  display: inline-flex;
}

.tab {
  padding: 10px 12px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  color: var(--theme-text-color);
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.tab.active {
  background-color: var(--button-bg);
  color: white;
  border-radius: 5px;
}

/* Arama */
.search-bar {
  background-color: var(--menu-bg);
  padding: 10px;
  display: flex;
  align-items: center;
  position: fixed;
  top: 103px; /* Header ve tabs yüksekliğine göre ayarlandı */
  left: 0;
  right: 0;
  z-index: 15;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.search-icon {
  margin: 0 10px;
  opacity: 0.7;
}

/* Search icon SVG color */
.search-icon svg path {
  fill: var(--icon-color); /* Use the theme variable for color */
}


.search-input {
  background: transparent;
  border: none;
  color: var(--theme-text-color);
  width: 100%;
  outline: none;
  font-size: 15px;
}

.search-input::placeholder {
  color: #777;
}

/* Menü listesi */
#menuListContainer {
  overflow-y: auto;
  flex-grow: 1;
  padding-top: 0px; /* JS tarafından ayarlanacak */
  /* margin-top: 40px; /* JS tarafından ayarlanacak */
}

/* Başlık (section title) */
.section-title {
  padding: 10px 15px;
  font-weight: bold;
  border-bottom: 1px solid var(--separator-color);
  margin-bottom: 5px;
  font-size: 16px;
  color: var(--theme-text-color);
}

/* Alt başlık */
.section-subtitle {
  padding: 0 15px 10px 15px; /* Sadece alttan boşluk */
  font-size: 12px;
  color: #999; /* Alt başlık rengi */
}

/* Arama yapınca başlıkları gizle */
/* Bu stil artık JS tarafından yönetiliyor */
/* .search-active .section-title {
  display: none;
} */

/* Menü item */
.menu-item {
  display: flex;
  padding: 10px 15px;
  border-bottom: 1px solid var(--separator-color);
  align-items: center;
  width: 100%; /* Menü öğelerinin tam genişliği kullanmasını sağla */
  box-sizing: border-box; /* Padding'in genişliğe dahil edilmesini sağla */
}

.menu-image {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin-right: 12px;
  object-fit: cover;
  cursor: pointer;
  flex-shrink: 0; /* Resmin daralmasını engelle */
}

.menu-details {
  flex: 1; /* Detayların kalan alanı doldurmasını sağla */
  display: flex;
  flex-direction: column;
  min-width: 0; /* İçeriğin taşmasını engellemek için minimum genişlik */
}

.menu-title {
  font-weight: bold;
  margin-bottom: 2px;
  font-size: 15px;
  color: var(--theme-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-description {
  color: #999;
  font-size: 13px;
  line-height: 1.3;
  white-space: normal; /* Açıklamanın alt satıra geçmesine izin ver */
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-price {
  font-weight: bold;
  margin-left: auto;
  font-size: 15px;
  color: var(--theme-text-color);
  flex-shrink: 0; /* Fiyatın daralmasını engelle */
  padding-left: 10px; /* Fiyat ve açıklama arasına boşluk ekle */
}

/* Resim büyütme */
.image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 30;
  cursor: pointer;
}

.image-overlay img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* Menü listesi konteynerindeki ilk başlığın üst dolgusunu kaldır */
/* Bu kural sadece menü detay sayfasında geçerli olmalı */
#menuListContainer .section-title:first-child {
    padding-top: 0;
}

/* Temanın varsayılan body/html üst boşluğunu sıfırla */
/* Bu kurallar temanın body veya html etiketine eklediği varsayılan margin/padding'i kaldırır */
html, body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* WordPress Admin Bar boşluğunu sıfırla (sadece giriş yapmış kullanıcılar için) */
/* Bu kural, admin barın body'ye eklediği margin-top'ı kaldırır */
body.admin-bar {
    margin-top: 0 !important;
}

/* Header'ın admin barın veya diğer elementlerin üzerinde olduğundan emin olmak için */
/* Z-index değeri, header'ın diğer sabitlenmiş veya normal akıştaki elementlerin üzerinde görünmesini sağlar */
.header {
    z-index: 99999 !important; /* Yüksek bir değer, diğer elementlerin üzerinde olmasını garantiler */
}

/* Temanın :root'a eklediği padding değişkenini sıfırla */
/* Bu kural, temanın --wp--style--root--padding-top değişkenini sıfırlayarak
   body'ye uygulanan padding'i etkisiz hale getirir. */
:root {
    --wp--style--root--padding-top: 0 !important;
}