/*
Theme Name: Lions Theme
Theme URI: https://www.example.com/lions-theme/
Author: Utku Çevik
Author URI: https://www.linkedin.com/in/utku-cevik/
Description: Lions işletmesi için özel olarak hazırlanmış QR Menü teması.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom, responsive, mobile-first, qr-menu
Text Domain: lions_theme
*/

/* --- Elementor Uyumluluğu ve Sıfırlama --- */
/* Elementor'un varsayılan div'lerini etkileyebilecek genişlik/yükseklik/padding gibi tema stillerini sıfırla */
.elementor-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Sayfa içeriği kapsayıcısını Elementor'a uygun hale getir */
.site-content { /* Bu, temanızın ana içerik alanını kapsayan div olabilir */
    max-width: none; /* Elementor'un tam genişlik çalışabilmesi için genişlik sınırlamasını kaldır */
    padding: 0; /* İç boşlukları kaldır */
    margin: 0 auto;
}

/* Herhangi bir genel image kuralını kaldır veya üzerine yaz */
img {
    height: auto;
    max-width: 100%;
}

/* Yazı tiplerini ve satır yüksekliklerini Elementor'un kontrol etmesine izin ver */
body, p, h1, h2, h3, h4, h5, h6 {
    line-height: normal; /* Elementor kendi satır yüksekliklerini tanımlayabilir */
}


/* --- Genel Ayarlar ve Responsive Temel --- */
body {
    background-color: #f0f0f0;
    font-family: sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1 {
    color: #B22222;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Menü Kategorileri Kapsayıcısı */
.menu-categories-container {
    display: flex;
    flex-wrap: wrap; /* Butonların yan yana sığmazsa alt satıra geçmesini sağlar */
    justify-content: center; /* Butonları yatayda ortala */
    gap: 20px; /* Butonlar arasında boşluk bırak */
    padding: 20px;
    max-width: 1200px; /* Maksimum genişlik */
    margin: 0 auto; /* Ortala */
}

/* Kategori Butonu (Link) */
.category-button {
    display: block; /* Bağlantıyı bir blok elemanı yap */
    position: relative; /* Overlay için gerekli */
    width: 150px; /* Buton genişliği - mobil için ayarlanmalı */
    height: 150px; /* Buton yüksekliği - mobil için ayarlanmalı */
    overflow: hidden; /* Taşmaları gizle */
    border-radius: 8px; /* Hafif yuvarlatılmış köşeler */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    text-decoration: none; /* Alt çizgiyi kaldır */
    color: inherit; /* Yazı rengini miras al */
    transition: transform 0.2s ease-in-out; /* Hover efekti için geçiş */
}

.category-button:hover {
    transform: translateY(-5px); /* Hover'da hafif yukarı kaydır */
}

/* Kategori Görseli */
.category-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Görseli kutuyu dolduracak şekilde sığdır, oranını koru */
    display: block;
}

/* Kategori Adı Overlay'i */
.category-overlay {
    position: absolute;
    bottom: 0; /* Altta başla */
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Yarı şeffaf siyah arka plan */
    color: #fff; /* Yazı rengi beyaz */
    padding: 10px 5px; /* İç boşluk */
    text-align: center;
    box-sizing: border-box; /* Padding'i genişliğe dahil et */
}

.category-overlay-title {
    font-size: 1.1em;
    font-weight: bold;
    white-space: nowrap; /* Metni tek satırda tut */
    overflow: hidden; /* Taşmayı gizle */
    text-overflow: ellipsis; /* Taşma durumunda üç nokta göster */
}

/* Mobil Uyumlu Ayarlar (Örnek: 768px altı için) */
@media (max-width: 768px) {
    .menu-categories-container {
        padding: 10px;
        gap: 15px;
    }

    .category-button {
        width: calc(50% - 15px); /* İki sütunlu düzen için %50 genişlik ve gap */
        height: 120px; /* Mobil için daha küçük yükseklik */
    }

    .category-overlay-title {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .category-button {
        width: 100%; /* Tek sütunlu düzen */
        height: 150px;
    }
}

/* Kategoriye Özel Menü Öğelerini Gösteren Sayfa Stil (taxonomy-lions_menu_category.php) */
.category-items-container {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.category-items-container h1 {
    color: #B22222;
    margin-top: 20px;
}

.category-items-container .category-description {
    font-style: italic;
    color: #666;
    margin-bottom: 30px;
}

.menu-item-single {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: left; /* Ürün detaylarını sola hizala */
}

.menu-item-title {
    color: #333;
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: 5px;
}

.menu-item-description {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 10px;
}

.menu-item-price {
    font-weight: bold;
    color: #B22222;
    font-size: 1.2em;
    display: block; /* Fiyatı yeni satıra al */
    text-align: right; /* Fiyatı sağa hizala */
}

/* Geri Dön Linki */
.category-items-container p a {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #B22222;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.category-items-container p a:hover {
    background-color: #8B0000;
}

#preloader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: opacity 0.5s ease, transform 0.8s ease;
}

#preloader.hide {
  opacity: 1;
  transform: translateY(-100%);
}

#preloader img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}