@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* { margin:0; padding:0; box-sizing:border-box;font-family: var(--font-family, "Poppins", sans-serif); }
body {
  font-family: var(--font-family, 'Poppins', sans-serif);
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
  line-height:1.5;
  text-align: center; /* Genel ortalama */
}
.gt_float_switcher {
    border-radius: 15px !important;
}
.gt_float_switcher .gt_options a {
    font-size: small !important;
    font-family: system-ui !important;
}
.gt_float_switcher img {
    width: 25px !important;
}
.gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code {
    font-family: system-ui !important;
    font-weight: 400 !important;
    background: #ebebeb !important;
    padding: 0px 10px 0 10px !important;
    display: none !important;
    border-radius: 10px !important;
}
/* ÜST ÇİZGİ + LOGO */
.line-logo {
  display:flex; align-items:center; justify-content:center;
  margin:2rem 1rem;
}
.line-logo::before,
.line-logo::after {
  content: '';
  flex:1;
  height:1px;
  background: var(--header-muted);
}
html[data-font="caveat"] .yemek-name,
html[data-font="caveat"] .product-card-name,
html[data-font="caveat"] .category-name,
html[data-font="caveat"] .weekly-name,
html[data-font="caveat"] .restaurant-name,
html[data-font="caveat"] .product-modal-title,
html[data-font="caveat"] .qr-menu-section-title,
html[data-font="caveat"] .subcategory-name,
html[data-font="caveat"] .qr-hero-cat-name,
html[data-font="caveat"] h1,
html[data-font="caveat"] h2,
html[data-font="caveat"] h3 {
    font-size: 1.4em !important;
    letter-spacing: .3px;
}

/* Kategori sekmesi etiketleri (Kahvaltılıklar, Yumurta & Omlet vb.) —
   qr-menu.css'teki asıl tanımla (.qr-menu-tab.has-thumb .qr-menu-tab-label)
   birebir aynı seçici zinciri kullanılıyor ki kesin kazansın. */
html[data-font="caveat"] .qr-menu-tab.has-thumb .qr-menu-tab-label {
    font-size: 15px !important;
    line-height: 1.3 !important;
}
html[data-font="caveat"] .qr-menu-tab:not(.has-thumb) {
    font-size: 15px !important;
}
/* ── Caveat seçiliyken: açıklama/gövde metinleri de Caveat kalır, sadece
     el yazısının düşük x-height'ı telafi edilmek üzere orantılı büyütülür.
     Başlıklar zaten önceki kuralla büyütülmüştü, buna dokunmuyoruz. ── */
html[data-font="caveat"] .yemek-desc,
html[data-font="caveat"] .product-card-desc,
html[data-font="caveat"] .product-modal-desc-area p,
html[data-font="caveat"] .qr-wifi-row-value,
html[data-font="caveat"] .feedback textarea,
html[data-font="caveat"] .feedback-textarea,
html[data-font="caveat"] #side-menu p,
html[data-font="caveat"] .footer,
html[data-font="caveat"] .hour-label,
html[data-font="caveat"] .hour-note {
    font-size: 1.2em !important;
    line-height: 1.4 !important;
}
.line-logo img {
  margin:0 1rem;
  height:160px;
  object-fit:contain;
}
/* Genel animasyon */
.animate-in {
  opacity:0; transform: translateY(30px);
  animation:fadeInUp .6s forwards;
}
.delay-1 { animation-delay:.1s; }
.delay-2 { animation-delay:.2s; }
.delay-3 { animation-delay:.3s; }
.delay-4 { animation-delay:.4s; }
.delay-5 { animation-delay:.5s; }
.delay-6 { animation-delay:.6s; }
@keyframes fadeInUp {
  to { opacity:1; transform: translateY(0); }
}
/* Bölümler */
section { padding:2rem 1rem; }
h2, h3, .rec-item span, .ge-item span, .kategori-item span {
  margin:0 auto 1rem;
}
h2 { font-weight:600; color:var(--accent); }
h3 { font-weight:600; color:#fff; }
/* 1) Recommendations */
.rec-list {
  display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem;
}
.kategori-item {
    position: relative;
    flex: 0 0 160px;
    height: 170px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 8px 0px var(--shadow-light);
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
    text-align: center;
}
.kategori-item::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0 L0 4' stroke='%23eee' stroke-width='1'/%3E%3C/svg%3E");
  opacity:.1;
}
.kategori-item:hover {
  box-shadow:0 8px 10px var(--shadow-dark);
}
.rec-item {
    position: relative;
    flex: 0 0 160px;
    height: 140px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 8px 0px var(--accent-solid);
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
    text-align: center;
}
.rec-item::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0 L0 4' stroke='%23eee' stroke-width='1'/%3E%3C/svg%3E");
  opacity:.1;
}
.rec-item:hover {
  box-shadow:0 8px 10px var(--shadow-dark);
}
.rec-thumb {
   height: 88px;
    width: 100%;
    background-size: cover;
    background-position: center;
}
.kategori-thumb {
   height: 120px;
    width: 100%;
    background-size: cover;
    background-position: center;
}
.quick-cats a{
  text-decoration: none;
  color: inherit;
}
.kategori-item p{
  position: relative;
    top: -4px;
    font-size: 13px;
    font-weight: 400;
}
.kategori-thumb img {
      width: 90%;
    margin-top: 5px;
    height: 92%;
    object-fit: cover;
    border-radius: 16px;
}
.feedback h2{
    font-weight: 400;
    background: linear-gradient(to right, var(--accent-solid), rgba(173, 41, 41, 0));
    text-align: left;
    padding: 10px;
    font-size: 14px;
    color: var(--accent);
    border-radius: 10px;
}
.rec-item p{
  position: relative;
    top: -4px;
    font-size: 12px;
    font-weight: 400;
}
.rec-thumb img {
      width: 90%;
    margin-top: 5px;
    height: 92%;
    object-fit: cover;
    border-radius: 16px;
}
.rec-item span {
  display:block; padding:.5rem 0 0 0;font-weight:600;margin:0px;font-size: 12px; color:var(--text);
}
.kategori-item span {
  display:block; padding:.3rem 0 0 0;font-weight:600;margin:0px;font-size: 13px; color:var(--text);
}
/* 2) Quick cats — mobilde yan yana sabit */
.quick-cats {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
@media (max-width: 500px) {
  .quick-cats { grid-template-columns:1fr 1fr; }
}
.qc-item {
  position: relative;
  height: 140px;
  background: var(--accent-light);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px var(--shadow-light), 0 16px 48px var(--shadow-dark);
  transition: var(--transition);
  text-align: center;
  /* Arka plan görseli */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  .app {
    padding-left: 30%;
    padding-right: 30%;
  }
}
/* Karartma katmanı */
.qc-item::before {
  content: "";
  position: absolute;
  inset: 0; /* top: 0; left: 0; right: 0; bottom: 0; yerine */
  background: rgba(0, 0, 0, 0.4); /* Karartma derecesi */
  border-radius: 16px;
  z-index: 1;
}
.qc-item h2,
.qc-item h3,
.qc-item h4,
.qc-item h1,
.qc-item h6,
.qc-item h5 {
  font-weight: 300;
  color: #fff;
  margin: 0;
  position: relative;
  z-index: 2;
}
.qc-item p{
  z-index: 2;
    color: white;
    text-align: left;
    font-size: 10px;
}
.qc-item:hover {
  background-color: var(--accent); /* Renk değişsin ama görsel sabit kalsın */
  box-shadow: 0 12px 32px var(--shadow-light), 0 24px 64px var(--shadow-dark);
  /* Görsel sabit kalsın */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: none;
}
.recommendations h2{
font-weight: 400;
    background: linear-gradient(to right, var(--accent-solid), rgba(173, 41, 41, 0));
    text-align: left;
    padding: 10px;
    font-size: 14px;
    color: var(--accent);
    border-radius: 10px;
}
/* 3) Grid eight */
.grid-eight {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.ge-item {
position: relative;
    flex: 0 0 160px;
    height: 140px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 8px 0px var(--shadow-light);
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
    text-align: center;
}
.ge-item::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L4 4' stroke='%23eee' stroke-width='1'/%3E%3C/svg%3E");
  opacity:.07;
}
.ge-item:hover {
  transform:translateY(-8px);
  box-shadow:0 12px 32px var(--shadow-light),0 24px 64px var(--shadow-dark);
}
.ge-thumb {
  width:60px; height:60px;
  background-size:cover; background-position:center;
  border-radius:8px; margin-bottom:.75rem;
}
.grid-eight .ge-item:nth-child(1) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.grid-eight .ge-item:nth-child(2) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.grid-eight .ge-item:nth-child(3) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.grid-eight .ge-item:nth-child(4) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.grid-eight .ge-item:nth-child(5) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.grid-eight .ge-item:nth-child(6) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.grid-eight .ge-item:nth-child(7) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.grid-eight .ge-item:nth-child(8) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.ge-item span { font-weight:600; color:var(--text); }
/* 4) Big card */
.big-card-section .qc-item{
  border: 2px solid var(--accent-light);
  display: flex;flex-direction: column;
}
.big-card-section .big-card:hover {
  background: var(--accent);
  transform:translateY(-6px);
  box-shadow:0 12px 32px var(--shadow-light),0 24px 64px var(--shadow-dark);
}
hr{
      border-radius: 40px;
    width: 60%;
    border: 1px solid var(--accent);
    justify-self: center;
}
/* 5) Top choices */
.top-choices .top-list {
  display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem;
}
.top-item {
  position:relative; flex:0 0 120px; height:120px;
  background: var(--card-bg); border-radius:16px;
  box-shadow:0 8px 24px var(--shadow-light),0 16px 48px var(--shadow-dark);
  cursor:pointer; overflow:hidden; transition:var(--transition);
  text-align:center;
}
.top-item:hover {
  transform:translateY(-8px);
  box-shadow:0 12px 32px var(--shadow-light),0 24px 64px var(--shadow-dark);
}
/* 6) Restaurant photo */
.restaurant-card {
  width: 100%;
  max-width: 800px;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 16px 48px rgba(0,0,0,0.1);
}
.restaurant-image {
  position: relative;
  width: 100%;
  height: 250px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end; /* Alt kısma hizala */
}
.restaurant-info-gradient {
width: 100%;
    padding: 10px;
    margin: 0px;
    color: #fff;
    background: linear-gradient(178deg, rgb(0 174 243 / 0%) 10%, var(--accent-light) 30%);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.restaurant-info-gradient h3 {
  margin: 0;
  font-size: 24px;
      text-shadow: 0px 2px #000000;
  font-weight: 600;
}
.restaurant-info-gradient p {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}
/* Mobil uyum */
@media (max-width: 767px) {
  .restaurant-image {
    height: 180px;
  }
  .restaurant-info-gradient h3 {
    font-size: 20px;
  }
  .restaurant-info-gradient p {
    font-size: 14px;
  }
}
footer{
  user-select: none;
      margin-bottom: 30px;
}
/* 7) Feedback */
.feedback textarea {
  width:100%; min-height:100px; padding:1rem;
  border-radius:12px; border:2px solid var(--shadow-light);
  resize:none; font-family:inherit; box-shadow:inset 0 4px 12px var(--shadow-light);
}
.feedback button {
    background: linear-gradient(90deg, rgba(42, 123, 155, 0) -15%, var(--accent) 25%);
    color: #fff;
    border: none;
    padding: 3px 5%;
    border-radius: 12px;
    cursor: pointer;
    float: right;
    font-weight: 500;
    box-shadow: 0 8px 24px var(--shadow-light), 0 16px 48px var(--shadow-dark);
    transition: var(--transition), transform .2s;
}
.feedback button:hover {
  background: var(--accent-light);
  transform:translateY(-4px);
}
/* 8) Contact Info */
.contact-info {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--shadow-light), 0 16px 48px var(--shadow-dark);
  padding: 1.5rem;
  margin: 2rem 1rem;
  text-align: center;
}
.contact-info div {
  margin: 0.75rem 0;
  font-size: 1rem;
}
.contact-info strong {
  color: var(--accent);
}
/* Modal */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.modal.show {
  opacity:1; pointer-events:auto;
}
.modal-content {
  position:relative; background:#fff; border-radius:16px;
  padding:2rem; width:90%; max-width:420px; text-align:center;
  box-shadow:0 16px 48px var(--shadow-light),0 24px 64px var(--shadow-dark);
  transform:translateY(-20px); transition:transform .3s;
}
.modal.show .modal-content { transform:translateY(0); }
.modal-content .close {
  position:absolute; top:16px; right:16px;
  background:none; border:none; font-size:1.6rem;
  cursor:pointer; color:var(--muted); transition:color .3s;
}
.modal-content .close:hover { color:var(--accent); }
.modal-content img {
  width:80%; border-radius:12px; margin-bottom:1rem;
}
.modal-content h2 { font-weight: 400;
    background: radial-gradient(circle, rgba(42, 123, 155, 0) 56%, var(--accent) 376%);
    padding: 10px;
    font-size: 15px;
    color: var(--accent);
    margin-bottom: 15px;
    border-radius: 10px; }
.modal-content p {border-radius: 8px;
    margin-bottom: 1.5rem;
    background: #00000008;
    font-size: 13px;
    color: var(--transition);
    font-weight: 400;
    padding: 11px;}
#modalButton {
background: linear-gradient(295deg, rgba(42, 123, 155, 0) -48%, var(--accent) 68%);
    color: #fff;
    border: none;
    font-size: 11px;
    padding: .8rem 1.6rem;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 500;
    box-shadow: 0 8px 24px var(--shadow-light), 0 16px 48px var(--shadow-dark);
    transition: var(--transition), transform .2s;
}
.menu-content{
background: var(--accent-solid);
    padding: 20px;
    border-radius: 10px;
}
#likeBtn:hover {
  background: var(--accent-light);
  transform:translateY(-4px);
}
#menu-toggle {
    position: absolute;
    background: linear-gradient(295deg, rgba(42, 123, 155, 0) -48%, var(--accent) 68%); color: white;
    padding: 10px 12px;
    font-size: 10px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}
/* YAN MENÜ */
#side-menu {
  position: fixed;
  top: 0;
  right: -260px;
  left: auto;
  width: 250px;
  height: 100%;
  backdrop-filter: blur(10px);
  color: white;
  padding: 20px;
  transition: right 0.3s ease;
  z-index: 1002;
  box-shadow: -2px 0 12px rgba(0,0,0,0.4);
}

/* Metinler transparan zeminde daha net okunsun diye gölge eklendi */
#side-menu p {
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
#side-menu strong {
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* İletişim numarası — belirgin, vurgulu renk + kalın yazı */
#side-menu a[href^="tel:"] {
  color: #ffd580;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
#side-menu a[href^="tel:"]:hover {
  text-decoration: underline;
}
#side-menu.active {
  right: 0;
}
#side-menu h3 {
  margin-top: 10px;
}
#side-menu p {
  font-size: 14px;
  margin: 8px 0;
}
/* KAPATMA BUTONU */
#close-menu {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 24px;
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
}
/* ARKA PLAN GÖLGESİ */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  z-index: 1001;
}
#overlay.active {
  display: block;
}
.rec-list {
    /* Mevcut stiller... */
    animation: scroll 30s linear infinite;
    display: flex;
    width: max-content; /* önemli */
}
.rec-list:hover {
    animation-play-state: paused; /* üzerine gelince dursun */
}
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* Çift kopya ile sonsuz döngü */
.rec-list::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 20px; /* boşluk */
}
/* Mevcut area-btn sınıfı için genel stil (opsiyonel) */
.area-btn {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-weight: 500;
    cursor: pointer;
}
/* Her butona ID üzerinden özel renkler */
#giris-acik {
    background-color: #e3f2fd;
    color: #1976d2;
    border-color: #bbdefb;
}
#giris-kapali {
    background-color: #f1f8e9;
    color: #388e3c;
    border-color: #dcedc8;
}
#ust-kapali {
    background-color: #fff3e0;
    color: #f57c00;
    border-color: #ffe0b2;
}
#ust-orta {
    background-color: #f3e5f5;
    color: #7b1fa2;
    border-color: #e1bee7;
}
#ust-kose {
    background-color: #ffebee;
    color: #d32f2f;
    border-color: #ffcdd2;
}

/* ===== RESET VE TEMEL STİLLER ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family, 'Segoe UI', 'Poppins', sans-serif);
}
body {
    background-color: #f8f9fa;
    color: #333;
    line-height: 1.5;
    overflow-x: hidden;
}
   
    .app {
        padding: 0 0 80px;
        max-width: 100%;
        width: 100%;
        min-height: 100vh;
    }
   
    /* ===== SLİDER YAPISI - ===== */
    .slider-section {
        padding: 20px 0 30px;
        position: relative;
        width: 100%;
        overflow: hidden;
         touch-action: pan-y;
    }
   
    .section-header {
        padding: 0 20px;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
   
    .section-title {
        font-size: 22px;
        font-weight: 700;
        color: #222222;
        display: flex;
        align-items: center;
        gap: 10px;
    }
   
    .section-title i {
        color: #222222;
        font-size: 20px;
    }
   
    /* Slider Container */
    .slider-container {
        position: relative;
        width: 100%;
        padding: 0 15px;
    }
   
    /* Slider Wrapper */
    .slider-wrapper {
        width: 100%;
        overflow: hidden;
        position: relative;
    }
   
   
.slider-track {
    display: flex;
    gap: 20px;
    padding: 0;
}
/* SONSUZ MARQUEE ANIMASYONU - HIZLI VE SÜREKLİ */
@keyframes infiniteMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% - 20px)); /* gap dahil */
    }
}
/* Desktop için normal hız */
.slider-track.auto-scroll {
    animation: infiniteMarquee 20s linear infinite;
}
/* Tablet için daha hızlı */
@media (max-width: 1024px) {
    .slider-track.auto-scroll {
        animation: infiniteMarquee 20s linear infinite;
    }
}
@media (max-width: 768px) {
    .slider-track.auto-scroll {
        animation: infiniteMarquee 20s linear infinite !important;
    }
}
@keyframes infiniteMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-300% - 20px)); }
}
/* Küçük mobil için süper hızlı */
@media (max-width: 480px) {
    .slider-track.auto-scroll {
        animation: infiniteMarquee 10s linear infinite !important;
    }
}
/* Çok küçük ekranlar için ekstra hızlı */
@media (max-width: 360px) {
    .slider-track.auto-scroll {
        animation: infiniteMarquee 10s linear infinite !important;
    }
}
/* Hover'da dur (desktop için) */
@media (min-width: 769px) {
    .slider-wrapper:hover .slider-track.auto-scroll {
        animation-play-state: paused;
    }
}

/* Slider Item */
.slider-item {
    flex: 0 0 calc(50% - 10px);
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    border: 1px solid rgba(231, 76, 60, 0.1);
    display: flex;
    flex-direction: column;
    min-height: 280px;
    flex-shrink: 0; /* Öğelerin küçülmesini engelle */
}
/* Tablet */
@media (min-width: 768px) {
    .slider-item {
        flex: 0 0 calc(33.333% - 14px);
    }
   
      .product-image {
            height: 140px;
            width: 50px;
        }
}
/* Desktop */
@media (min-width: 1024px) {
    .slider-item {
        flex: 0 0 calc(25% - 15px);
    }
}
    /* Slider Item */
    .slider-item {
        flex: 0 0 calc(50% - 10px);
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        cursor: pointer;
        border: 1px solid rgba(231, 76, 60, 0.1);
        display: flex;
        flex-direction: column;
        min-height: 280px;
    }
   
    .slider-item:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: #e74c3c;
    }

    .product-image {
        width: 100%;
        height: 180px;
        overflow: hidden;
        position: relative;
    }
   
    .product-image::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
        z-index: 1;
    }
   
    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }
   
    .product-info {
        padding: 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
   
    .product-name {
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 12px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 45px;
    }
   
    .product-price {
        font-size: 22px;
        font-weight: 800;
        color: #e74c3c;
        margin-top: auto;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    /* ===== SAATLER BÖLÜMÜ ===== */
    .hours-section {
        padding: 30px 20px;
        background: white;
        margin: 20px 0;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(231, 76, 60, 0.1);
        cursor: pointer;
    }
   
    .hours-title {
        font-size: 20px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
   
    .hours-title i {
        color: #e74c3c;
    }
   
    .hours-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
   
    .hour-card {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 15px;
        border-left: 4px solid #e74c3c;
        transition: transform 0.3s ease;
    }

    .hour-label {
        font-size: 14px;
        color: #666;
        font-weight: 500;
        margin-bottom: 8px;
    }
   
    .hour-time {
        font-size: 24px;
        font-weight: 700;
        margin: 5px 0;
    }
   
    .hour-open {
        color: #27ae60;
    }
   
    .hour-close {
        color: #e74c3c;
    }
   
    .hour-note {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        font-style: italic;
    }
   
    /* ===== KATEGORİLER ===== */
    .categories-section {
        padding: 30px 20px;
    }
   
    .categories-title {
        font-size: 20px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
   
    .categories-title i {
        color: #e74c3c;
    }
   
 .categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
   
    .category-card {
        position: relative;
        height: 180px;
        border-radius: 20px;
        overflow: hidden;
        cursor: pointer;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }
   
    .category-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.2));
        transition: background 0.3s ease;
    }
   
    .category-card:hover::before {
        background: linear-gradient(135deg, rgba(231, 76, 60, 0.7), rgba(192, 57, 43, 0.7));
    }
   
    .category-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    }
   
    .category-name {
        position: relative;
        z-index: 2;
        color: white;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        padding: 0 20px;
		text-decoration: none;
    }
   
    /* ===== HAFTANIN MENÜSÜ ===== */
    .weekly-menu-section {
        padding: 30px 20px;
    }
   
    .weekly-title {
        font-size: 20px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
   
    .weekly-title i {
        color: #e74c3c;
    }
   
    .weekly-card {
        position: relative;
        height: 300px;
        border-radius: 25px;
        overflow: hidden;
        cursor: pointer;
        background-size: cover;
        background-position: center;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
        transition: transform 0.4s ease;
    }
   
    .weekly-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 35px;
        background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
        color: white;
    }
   
    .weekly-tag {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 10px;
        opacity: 0.9;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
   
    .weekly-name {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 20px;
        text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    }
   
    .weekly-price {
        display: inline-block;
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        color: white;
        font-size: 24px;
        font-weight: 800;
        padding: 12px 30px;
        border-radius: 30px;
        box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
        animation: pulse 2s infinite;
    }
   
    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
        }
        50% {
            transform: scale(1.05);
            box-shadow: 0 12px 35px rgba(231, 76, 60, 0.6);
        }
    }
   
    /* ===== RESTORAN BÖLÜMÜ ===== */
    .restaurant-section {
        padding: 30px 20px;
    }
   
    .restaurant-card {
        border-radius: 25px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        height: 320px;
        background-size: cover;
        background-position: center;
        position: relative;
    }
   
    .restaurant-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 40px;
        background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
        color: white;
    }
   
    .restaurant-name {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 10px;
        text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    }
   
    .restaurant-description {
        font-size: 18px;
        opacity: 0.95;
        line-height: 1.6;
    }
   
    /* ===== GERİ BİLDİRİM ===== */
    .feedback-section {
        padding: 30px 20px;
    }
   
    .feedback-card {
        background: white;
        padding: 30px;
        border-radius: 25px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(231, 76, 60, 0.1);
    }
   
    .feedback-title {
        font-size: 20px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
   
    .feedback-title i {
        color: #e74c3c;
    }
   
    .feedback-textarea {
        width: 100%;
        min-height: 150px;
        padding: 20px;
        border: 2px solid #e8e8e8;
        border-radius: 15px;
        font-size: 16px;
        resize: vertical;
        transition: all 0.3s ease;
        background: #f8f9fa;
        font-family: inherit;
    }
   
    .feedback-textarea:focus {
        outline: none;
        border-color: #e74c3c;
        background: white;
        box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1);
    }
   
    .feedback-submit {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        color: white;
        border: none;
        padding: 16px 45px;
        border-radius: 15px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 20px;
        transition: all 0.3s ease;
        display: block;
        margin-left: auto;
    }
   
    .feedback-submit:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(231, 76, 60, 0.3);
    }
   
    /* ===== ALT MENÜ - TAMAMEN DÜZELTİLDİ ===== */
    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 70px;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(231, 76, 60, 0.1);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
        padding: 0 10px;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.1);
        width: 100%;
    }
   
    .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px 5px;
        border-radius: 12px;
        text-decoration: none;
        color: #666;
        transition: all 0.3s ease;
        position: relative;
        border: 1px solid transparent;
        margin: 0 2px;
    }
   
    .nav-item:hover {
        color: #e74c3c;
        background: rgba(231, 76, 60, 0.05);
        transform: translateY(-2px);
    }
   
    .nav-item.active {
        color: #e74c3c;
        background: rgba(231, 76, 60, 0.1);
        border-color: rgba(231, 76, 60, 0.2);
    }
   
    .nav-icon {
        width: 24px;
        height: 24px;
        margin-bottom: 6px;
        stroke: currentColor;
        stroke-width: 2;
        transition: transform 0.3s ease;
    }
   
    .nav-item:hover .nav-icon {
        transform: scale(1.1);
    }
   
    .nav-label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }
   
    /* Active dot indicator */
    .nav-item.active::after {
        content: '';
        position: absolute;
        top: 5px;
        width: 5px;
        height: 5px;
        background: #e74c3c;
        border-radius: 50%;
    }
   
    /* ===== FOOTER ===== */
    .footer {
        padding: 40px 20px;
        text-align: center;
        color: #666;
        font-size: 14px;
        border-top: 1px solid #eee;
        margin-top: 30px;
        background: #f8f9fa;
        border-radius: 25px 25px 0 0;
    }
   
    /* ===== MODAL STİLLERİ ===== */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        padding: 20px;
        backdrop-filter: blur(10px);
    }
   
    .modal-overlay.active {
        display: flex;
        animation: fadeIn 0.3s ease;
    }
   
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
   
    .modal-content {
        background: white;
        border-radius: 25px;
        width: 100%;
        max-width: 400px;
        overflow: hidden;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
        animation: slideUp 0.4s ease;
    }
   
    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
   
    /* ===== RESPONSIVE TASARIM - TAMAMEN DÜZELTİLDİ ===== */
   
    /* Tablet (768px ve üzeri) */
    @media (min-width: 768px) {
        .app {
            max-width: 750px;
            margin: 0 auto;
        }
       
        .section-header {
            padding: 0;
        }
       
        .slider-container {
            padding: 0;
        }
       
        .slider-item {
            flex: 0 0 calc(33.333% - 14px);
        }
       
        .slider-nav-btn.prev {
            left: -20px;
        }
       
        .slider-nav-btn.next {
            right: -20px;
        }
       
        .categories-grid {
            grid-template-columns: repeat(3, 1fr);
        }
       
        .weekly-card {
            height: 350px;
        }
       
        .weekly-name {
            font-size: 36px;
        }
       
        .restaurant-card {
            height: 350px;
        }
       
        .restaurant-name {
            font-size: 36px;
        }
       
        .bottom-nav {
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        border-radius: 20px 20px 0 0;
        bottom: 10px;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.15);
    }
    }
   
    /* Desktop (1024px ve üzeri) */
    @media (min-width: 1024px) {
        .app {
            max-width: 1000px;
        }
       
        .slider-item {
            flex: 0 0 calc(25% - 15px);
        }
       
        .categories-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
        }
       
        .weekly-card {
            height: 400px;
        }
       
        .weekly-overlay {
            padding: 50px;
        }
       
        .restaurant-card {
            height: 400px;
        }
       
        .restaurant-overlay {
            padding: 50px;
        }
       
        .bottom-nav {
            max-width: 1000px;
        }
    }
   
    /* Mobile (480px ve altı) */
    @media (max-width: 480px) {
        .section-title {
            font-size: 20px;
        }
       
        .slider-container {
            padding: 0 10px;
        }
       
        .slider-nav-btn {
            width: 40px;
            height: 40px;
            display: none; /* Mobilde gizle, swipe kullan */
        }
       
        .slider-item {
            flex: 0 0 calc(100% - 10px);
        }
       
        .product-image {
            height: 140px;
        }
       
        .product-name {
            font-size: 15px;
        }
       
        .product-price {
            font-size: 20px;
        }
       
        .hours-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }
       
        .hour-card {
            padding: 18px;
        }
       
        .hour-time {
            font-size: 22px;
        }
       
        .categories-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }
       
        .category-card {
            height: 160px;
        }
       
        .weekly-card {
            height: 280px;
        }
       
        .weekly-overlay {
            padding: 25px;
        }
       
        .weekly-name {
            font-size: 28px;
        }
       
        .weekly-price {
            font-size: 20px;
            padding: 10px 25px;
        }
       
        .restaurant-card {
            height: 280px;
        }
       
        .restaurant-overlay {
            padding: 25px;
        }
       
        .restaurant-name {
            font-size: 28px;
        }
       
        .restaurant-description {
            font-size: 16px;
        }
       
        .feedback-card {
            padding: 25px;
        }
       
        .feedback-submit {
            width: 100%;
            margin-left: 0;
        }
       
        .bottom-nav {
            height: 65px;
        }
       
        .nav-item {
            padding: 8px 3px;
        }
       
        .nav-icon {
            width: 22px;
            height: 22px;
        }
       
        .nav-label {
            font-size: 10px;
        }
    }
   
    /* Küçük Mobil (360px ve altı) */
    @media (max-width: 360px) {
        .slider-item {
            flex: 0 0 95%;
        }
       
        .product-image {
            height: 120px;
        }
       
        .product-info {
            padding: 15px;
        }
       
        .product-name {
            font-size: 14px;
            min-height: 40px;
        }
       
        .product-price {
            font-size: 18px;
        }
       
        .weekly-card {
            height: 250px;
        }
       
        .weekly-name {
            font-size: 24px;
        }
       
        .restaurant-card {
            height: 250px;
        }
       
        .restaurant-name {
            font-size: 24px;
        }
       
        .restaurant-description {
            font-size: 14px;
        }
       
        .bottom-nav {
            height: 60px;
        }
       
        .nav-icon {
            width: 20px;
            height: 20px;
        }
       
        .nav-label {
            font-size: 9px;
        }
    }
   
    /* Landscape Mod için */
    @media (max-height: 500px) and (orientation: landscape) {
        .slider-section {
            padding: 10px 0 20px;
        }
       
        .slider-item {
            min-height: 200px;
        }
       
        .product-image {
            height: 120px;
        }
       
        .weekly-card {
            height: 200px;
        }
       
        .restaurant-card {
            height: 200px;
        }
       
        .bottom-nav {
            height: 55px;
        }
    }
   
    /* Yüksek çözünürlük ekranlar */
    @media (min-width: 1400px) {
        .app {
            max-width: 1200px;
        }
       
        .bottom-nav {
            max-width: 1200px;
        }
    }
   
        /* Yüksek çözünürlük ekranlar */
    @media (min-width: 1400px) {
        .app {
            max-width: 1200px;
        }
       
        .bottom-nav {
            max-width: 1200px;
        }
    }
   
    /* Varsayılan: mobil kart gizli */
.hours-mobile-card {
    display: none;
}
/* MOBİL - 2 KART */
@media (max-width: 767px) {
    /* Eski kartları gizle */
    .hours-grid {
        display: none;
    }
   
    /* Mobilde grid yapısı ile 2 kart yanyana */
    .hours-mobile-card {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 16px;
        margin-top: 10px;
    }
   
      .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
   
    .category-card {
        height: 150px; /* Mobilde biraz daha kısa */
    }
   
    .category-name {
        font-size: 18px;
    }
   
    .mobile-card-item {
        background: #f8faf9;
        border-radius: 14px;
        padding: 18px 16px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.06);
        border-left: 4px solid #e74c3c;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
   
    .mobile-card-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
   
    .mobile-row {
        margin-bottom: 10px;
    }
   
    .mobile-row:last-child {
        margin-bottom: 0;
    }
   
    .mobile-label {
        font-size: 12px;
        color: #666;
        font-weight: 500;
        margin-bottom: 5px;
        display: block;
    }
   
    .mobile-time {
        font-size: 22px;
        font-weight: 700;
        color: #2c3e50;
    }
   
    .mobile-open {
        color: #27ae60;
    }
   
    .mobile-close {
        color: #e74c3c;
    }
   
    .mobile-note {
        font-size: 11px;
        color: #888;
        margin-top: 8px;
        font-style: italic;
        display: block;
    }
}
/* GTranslate konumlandırma - STYLES bölümüne ekle */
.gtranslate_wrapper {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    opacity: 0;
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    background: white;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.gtranslate_wrapper.show-translate {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    pointer-events: all;
}
/* GTranslate içeriğini ortala */
.gtranslate_wrapper > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 300px;
}
/* Mobil responsive */
@media (max-width: 480px) {
    .gtranslate_wrapper {
        bottom: 75px;
        max-width: calc(100vw - 40px);
    }
   
    .gtranslate_wrapper > div {
        max-width: 280px;
    }
}

/* ===== TEMEL STİLLER ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family, 'Segoe UI', 'Poppins', sans-serif);
}
body {
    background-color: #f8f9fa;
    color: #333;
    line-height: 1.5;
    overflow-x: hidden;
}
.app {
    padding: 0 0 80px;
    max-width: 100%;
    width: 100%;
    min-height: 100vh;
}
/* ===== KATEGORİ BAŞLIĞI ===== */
.section-header {
    padding: 0 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.section-title {
    font-size: 22px;
    font-weight: 700;
    color: #222222;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-title i {
    color: #222222;
    font-size: 20px;
}
/* ===== YEMEK BÖLÜMÜ ===== */
.yemekler-section {
    padding: 30px 20px;
}
/* ===== YEMEK GRİD - MOBİLDE 2'Lİ ===== */
.yemekler-grid {
    display: grid;
    /* Mobilde varsayılan: 2 kart yanyana */
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
/* Tablet (768px ve üzeri) */
@media (min-width: 768px) {
    .app {
        max-width: 750px;
        margin: 0 auto;
    }
   
    .section-header {
        padding: 0;
    }
   
    .yemekler-section {
        padding: 30px 0;
    }
   
    .yemekler-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
   
    /* Alt Menü Genişlik Ayarları */
    .bottom-nav {
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        border-radius: 20px 20px 0 0;
        bottom: 10px;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.15);
    }
}
/* Desktop (1024px ve üzeri) */
@media (min-width: 1024px) {
    .app {
        max-width: 1000px;
    }
   
    .yemekler-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }
   
    .bottom-nav {
        max-width: 1000px;
    }
}
/* Yüksek çözünürlük ekranlar */
@media (min-width: 1400px) {
    .app {
        max-width: 1200px;
    }
   
    .bottom-nav {
        max-width: 1200px;
    }
}
/* ===== YEMEK KARTLARI ===== */
.yemek-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    border: 1px solid rgba(231, 76, 60, 0.1);
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.yemek-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
}
.yemek-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
    z-index: 1;
}
.yemek-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.yemek-info {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.yemek-name {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 12px;
    line-height: 1.4;
    overflow: hidden;
    min-height: 45px;
}
.yemek-price {
    font-size: 22px;
    font-weight: 800;
    color: #e74c3c;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ===== ALT MENÜ ===== */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(231, 76, 60, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    padding: 0 10px;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
}
.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 5px;
    border-radius: 12px;
    text-decoration: none;
    color: #666;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid transparent;
    margin: 0 2px;
}
.nav-item:hover {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.05);
    transform: translateY(-2px);
}
.nav-item.active {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.2);
}
.nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 6px;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.3s ease;
}
.nav-item:hover .nav-icon {
    transform: scale(1.1);
}
.nav-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
/* ===== MODAL STİLLERİ ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    backdrop-filter: blur(10px);
}
.modal-overlay.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}
/* ===== ÖZEL STİLLER ===== */
.empty-state {
    text-align: center;
    padding: 50px 20px;
}
.empty-state i {
    font-size: 48px;
    color: #e74c3c;
    margin-bottom: 20px;
}
.empty-state h3 {
    color: #2c3e50;
    margin-bottom: 10px;
}
.empty-state p {
    color: #666;
}
/* ===== SLİDER YAPISI ===== */
.slider-section {
    padding: 0 0 30px;
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px;
}
.slider-container {
    position: relative;
    width: 100%;
    padding: 0 15px;
}
.slider-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.slider-track {
    display: flex;
    gap: 20px;
    padding: 0;
    animation: none;
}
/* SONSUZ MARQUEE ANIMASYONU - HIZLI VE SÜREKLİ */
@keyframes infiniteMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% - 20px)); /* gap dahil */
    }
}
/* Desktop için normal hız */
.slider-track.auto-scroll {
    animation: infiniteMarquee 20s linear infinite;
}
/* Tablet için daha hızlı */
@media (max-width: 1024px) {
    .slider-track.auto-scroll {
        animation: infiniteMarquee 20s linear infinite;
    }
}
@media (max-width: 768px) {
    .slider-track.auto-scroll {
        animation: infiniteMarquee 20s linear infinite !important;
    }
}
@keyframes infiniteMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-300% - 20px)); }
}
/* Küçük mobil için süper hızlı */
@media (max-width: 480px) {
    .slider-track.auto-scroll {
        animation: infiniteMarquee 10s linear infinite !important;
    }
}
/* Çok küçük ekranlar için ekstra hızlı */
@media (max-width: 360px) {
    .slider-track.auto-scroll {
        animation: infiniteMarquee 10s linear infinite !important;
    }
}
/* Hover'da dur (desktop için) */
@media (min-width: 769px) {
    .slider-wrapper:hover .slider-track.auto-scroll {
        animation-play-state: paused;
    }
}
/* Slider Item */
.slider-item {
    flex: 0 0 calc(50% - 10px);
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    border: 1px solid rgba(231, 76, 60, 0.1);
    display: flex;
    flex-direction: column;
    min-height: 280px;
}
.slider-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: #e74c3c;
}
.slider-item .yemek-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
}
.slider-item .yemek-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
    z-index: 1;
}
.slider-item .yemek-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.slider-item .yemek-info {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.slider-item .yemek-name {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 12px;
    line-height: 1.4;
    overflow: hidden;
    min-height: 45px;
}
.slider-item .yemek-price {
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* Responsive Slider */
@media (max-width: 480px) {
    .slider-container {
        padding: 0 10px;
    }
   
    .slider-item {
        flex: 0 0 calc(100% - 10px);
        min-height: 250px;
    }
   
    .slider-item .yemek-image {
        height: 140px;
    }
}
@media (min-width: 768px) {
    .slider-container {
        padding: 0;
    }
   
    .slider-item {
        flex: 0 0 calc(33.333% - 14px);
    }
}
@media (min-width: 1024px) {
    .slider-item {
        flex: 0 0 calc(25% - 15px);
    }
}
/* GTranslate konumlandırma - STYLES bölümüne ekle */
.gtranslate_wrapper {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    opacity: 0;
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    background: white;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.gtranslate_wrapper.show-translate {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    pointer-events: all;
}
/* GTranslate içeriğini ortala */
.gtranslate_wrapper > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 300px;
}
/* Mobil responsive */
@media (max-width: 480px) {
    .gtranslate_wrapper {
        bottom: 75px;
        max-width: calc(100vw - 40px);
    }
   
    .gtranslate_wrapper > div {
        max-width: 280px;
    }
}

/* ============================================
   TOPLAM ÜRÜN SAYACI
   ============================================ */
.product-count-badge {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeInDown 0.5s ease;
}

.product-count-badge i {
    font-size: 16px;
}

/* ============================================
   ÜRÜN ETİKETLERİ (BADGE)
   ============================================ */
.product-badge {
    position: relative;
    top: 10px;
    left: 10px;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: bounceIn 0.6s ease;
}



.preparation-time i {
    font-size: 10px;
}

/* Yemek kartı içinde */
.yemek-card .product-image,
.slider-item .product-image {
    position: relative;
}

/* Liste görünümü için hazırlık süresi */
.list-view .preparation-time {
    position: static;
    background: #f8f9fa;
    color: #666;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    display: inline-flex;
    margin-top: 5px;
}

/* Modal'da gösterim */
.product-detail-preparation {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 10px;
    margin: 10px 0;
    font-size: 14px;
}

.product-detail-preparation i {
    color: #667eea;
}

@keyframes bounceIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================
   STOK DURUMU GÖSTERGESİ
   ============================================ */
.product-stock,
.weekly-stock {
    font-size: 12px;
    color: #10b981;
    font-weight: 600;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.product-stock::before {
    content: "📦";
    font-size: 14px;
}

/* ============================================
   GÖRÜNÜM VE FİLTRE KONTROL
============================================ */
.view-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.view-toggle {
    display: flex;
    background: #f3f4f6;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

.view-btn {
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #6b7280;
    font-size: 16px;
    transition: all 0.3s ease;
}

.view-btn:hover {
    color: #111827;
}

.view-btn.active {
    background: white;
    color: #667eea;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sort-select,
.stock-filter {
    padding: 8px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sort-select:hover,
.stock-filter:hover {
    border-color: #667eea;
}

.sort-select:focus,
.stock-filter:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* ============================================
   LİSTE GÖRÜNÜMÜ
   ============================================ */
.yemekler-grid[data-view="list"] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.yemekler-grid[data-view="list"] .yemek-card {
    display: flex;
    flex-direction: row;
    height: auto;
    max-width: 100%;
}

.yemekler-grid[data-view="list"] .yemek-image {
    width: 120px;
    min-width: 120px;
    height: 120px;
    border-radius: 15px;
    margin-bottom: 0;
}

.yemekler-grid[data-view="list"] .yemek-info {
    flex: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.yemekler-grid[data-view="list"] .yemek-name {
    font-size: 18px;
    margin-bottom: 8px;
}

.yemekler-grid[data-view="list"] .yemek-description {
    display: block;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 10px;
    line-height: 1.5;
}

.yemekler-grid[data-view="list"] .yemek-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.yemekler-grid[data-view="list"] .yemek-price {
    font-size: 20px;
}

.yemekler-grid[data-view="list"] .product-badge {
    top: 15px;
    left: 15px;
}

/* Grid görünümünde açıklama gizli */
.yemekler-grid[data-view="grid"] .yemek-description {
    display: none;
}

/* ============================================
   KATEGORİ KART SAYACI
   ============================================ */
.category-count {
    position: absolute;
    bottom: 60px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    color: #667eea;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================
   MOBİL UYUM
   ============================================ */
@media (max-width: 768px) {
    .product-count-badge {
        top: 10px;
        right: 10px;
        padding: 8px 16px;
        font-size: 12px;
    }

    .view-controls {
        width: 100%;
        justify-content: space-between;
    }

    .sort-select,
    .stock-filter {
        flex: 1;
        font-size: 12px;
        padding: 6px 12px;
    }

    .view-toggle {
        order: -1;
    }

    .yemekler-grid[data-view="list"] .yemek-image {
        width: 140px;
        min-width: 140px;
        height: 100px;
    }

    .yemekler-grid[data-view="list"] .yemek-info {
        padding: 10px;
    }

    .yemekler-grid[data-view="list"] .yemek-name {
        font-size: 16px;
    }

    .yemekler-grid[data-view="list"] .yemek-price {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .view-controls {
        width: 100%;
        flex-direction: column;
    }

    .view-toggle,
    .sort-select,
    .stock-filter {
        width: 100%;
    }
}

/* ============================================
   ANIMASYONLAR
   ============================================ */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ürün kartları fade-in */
.yemek-card {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

.yemek-card:nth-child(1) { animation-delay: 0.1s; }
.yemek-card:nth-child(2) { animation-delay: 0.2s; }
.yemek-card:nth-child(3) { animation-delay: 0.3s; }
.yemek-card:nth-child(4) { animation-delay: 0.4s; }
.yemek-card:nth-child(5) { animation-delay: 0.5s; }
.yemek-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   FİLTRE DURUM GÖSTERİCİLERİ
   ============================================ */
.filter-active {
    position: relative;
}

.filter-active::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    transform: translateY(-50%);
}

/* Filtre sonucu bulunamadı */
.no-results {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.no-results i {
    font-size: 48px;
    color: #d1d5db;
    margin-bottom: 20px;
}

.no-results h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #374151;
}

.no-results p {
    font-size: 14px;
    color: #9ca3af;
}

/* ==============================================
   STOK BADGE STİLLERİ
   ============================================== */

/* Temel Stok Badge Stilleri */
.stock-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    z-index: 10;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

/* Stokta Var - Yeşil Badge */
.stock-badge.in {
    background: linear-gradient(135deg, rgba(46, 213, 115, 0.95), rgba(34, 166, 90, 0.95));
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

/* Stokta Yok - Kırmızı Badge */
.stock-badge.out {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.95), rgba(234, 32, 39, 0.95));
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

/* Haftanın Menüsü için Özel Badge (Daha Büyük) */
.stock-badge-weekly {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 10;
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.stock-badge-weekly.out {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.95), rgba(234, 32, 39, 0.95));
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}



/* Hover Efektleri */
.stock-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.out-of-stock:hover::after {
    background: rgba(0, 0, 0, 0.25);
}

/* ==============================================
   MOBİL GÖRÜNÜM AYARLARI
   ============================================== */

@media (max-width: 768px) {
    /* Mobilde Badge'leri Biraz Küçült */
    .stock-badge {
        padding: 5px 10px;
        font-size: 8px;
        top: 8px;
        right: 8px;
    }
    
    .stock-badge-weekly {
        padding: 7px 14px;
        font-size: 11px;
        top: 12px;
        right: 12px;
    }
}

@media (max-width: 480px) {
    /* Çok Küçük Ekranlarda Daha Kompakt */
    .stock-badge {
        padding: 4px 9px;
        font-size: 9px;
        top: 6px;
        right: 6px;
        border-radius: 15px;
    }
    
    .stock-badge-weekly {
        padding: 6px 12px;
        font-size: 10px;
        top: 10px;
        right: 10px;
        border-radius: 20px;
    }
    
    /* Mobilde Overlay Efektini Hafiflet */
    .out-of-stock::after {
        background: rgba(0, 0, 0, 0.1);
    }
}

/* ==============================================
   SLIDER İÇİNDEKİ KARTLAR İÇİN ÖZEL AYAR
   ============================================== */

.slider-item .stock-badge,
.slider-item .yemek-image .stock-badge {
    top: 8px;
    right: 8px;
    font-size: 10px;
    padding: 5px 10px;
}

/* ==============================================
   GRİD İÇİNDEKİ KARTLAR İÇİN ÖZEL AYAR
   ============================================== */

.yemekler-grid .yemek-card .stock-badge {
    top: 10px;
    right: 10px;
}

.categories-grid .category-card .stock-badge {
    top: 12px;
    right: 12px;
}

/* ==============================================
   ANIMATE EDİLEN BADGE (Opsiyonel)
   ============================================== */

@keyframes pulse-stock {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Stokta Olmayan Ürünlerde Pulse Animasyonu */
.stock-badge.out {
    animation: pulse-stock 2s ease-in-out infinite;
}

/* Dark Mode Desteği (Opsiyonel) */
@media (prefers-color-scheme: dark) {
    .stock-badge.in {
        background: linear-gradient(135deg, rgba(46, 213, 115, 0.9), rgba(34, 166, 90, 0.9));
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .stock-badge.out {
        background: linear-gradient(135deg, rgba(255, 71, 87, 0.9), rgba(234, 32, 39, 0.9));
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .out-of-stock::after {
        background: rgba(0, 0, 0, 0.3);
    }
}

/* ==============================================
   ACCESSIBILITY
   ============================================== */

.stock-badge {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Screen Reader için Gizli Metin */
.stock-badge::before {
    content: attr(aria-label);
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==============================================
   PRİNT MODU
   ============================================== */

@media print {
    .stock-badge,
    .stock-badge-weekly {
        background: #fff !important;
        color: #000 !important;
        border: 2px solid #000 !important;
    }
}

.view-filter-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            background: #f8f9fa;
            border-radius: 15px;
            margin: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .view-controls {
            display: flex;
            gap: 8px;
        }
        
        .view-btn {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            border: 2px solid #ddd;
            background: white;
            color: #666;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .view-btn.active {
            background: #667eea;
            border-color: #667eea;
            color: white;
        }
        
        .view-btn:hover {
            border-color: #667eea;
            color: #667eea;
        }
        
        .filter-controls {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .product-count {
            display: flex;
            align-items: center;
            gap: 8px;
            background: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            color: #2c3e50;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .product-count i {
            color: #667eea;
        }
        
        .filter-btn {
            padding: 8px 15px;
            border-radius: 10px;
            border: none;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
        }
        
        .filter-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }
        
        /* Filtre modal */
        .filter-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .filter-modal.active {
            display: flex;
        }
        
        .filter-modal-content {
            background: white;
            border-radius: 20px;
            width: 100%;
            max-width: 400px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        .filter-modal-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .filter-modal-header h3 {
            margin: 0;
            font-size: 18px;
            color: #2c3e50;
        }
        
        .close-filter {
            background: none;
            border: none;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .filter-modal-body {
            padding: 20px;
        }
        
        .filter-group {
            margin-bottom: 20px;
        }
        
        .filter-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #2c3e50;
        }
        
        .filter-input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 14px;
        }
        
        .filter-input:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .price-inputs {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .price-inputs input {
            flex: 1;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            text-align: center;
        }
        
        .filter-buttons {
            display: flex;
            gap: 10px;
            margin-top: 25px;
        }
        
        .filter-buttons button {
            flex: 1;
            padding: 12px;
            border-radius: 10px;
            border: none;
            font-weight: 500;
            cursor: pointer;
        }
        
        .apply-filter {
            background: #667eea;
            color: white;
        }
        
        .reset-filter {
            background: #f8f9fa;
            color: #666;
            border: 2px solid #e0e0e0;
        }
        
        /* Liste görünümü için ek CSS */
        .categories-list {
            display: none;
            padding: 0 20px;
        }
        
        .category-list-item {
            display: flex;
            align-items: center;
            background: white;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .category-list-item img {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            object-fit: cover;
            margin-right: 15px;
        }
        
        .category-list-item h3 {
            margin: 0;
            font-size: 16px;
            color: #2c3e50;
        }
        
        /* Mobil uyumluluk */
        @media (max-width: 768px) {
            .view-filter-bar {
                flex-direction: column;
                gap: 15px;
                margin: 15px;
            }
            
            .filter-controls {
                width: 100%;
                justify-content: space-between;
            }
        }
        
/* ============================================
   FİLTRE TOOLBAR - MOBİL OPTİMİZE
   ============================================ */

.filter-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border-radius: 12px;
    margin: 12px 12px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    gap: 12px;
}

.view-controls {
    display: flex;
    gap: 8px;
}

.view-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.view-btn.active {
    background: #3b82f6;
    color: white;
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: flex-end;
}

.product-count {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #eff6ff;
    color: #2563eb;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.sort-select {
    font-size: 13px;
    padding: 8px 28px 8px 12px;
    min-width: 130px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23647' d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat right 10px center;
    appearance: none;
}

/* ============================================
   MOBİL UYUMLULUK - TEK SATIR
   ============================================ */

@media (max-width: 767px) {
    /* Ana barı tek satıra zorla */
    .filter-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Alt satıra geçişi imkansız yapar */
        align-items: center !important;
        justify-content: space-between !important;
        padding: 5px 10px !important;
        gap: 5px !important;
        width: 100% !important;
    }

    /* Sol Grup (Görünüm Butonları) */
    .view-controls {
        display: flex !important;
        flex-direction: row !important;
        flex-shrink: 0 !important; /* Küçülmesini engeller */
        gap: 4px !important;
        width: auto !important;
    }

    /* Sağ Grup (Ürün Sayısı ve Select) */
    .filter-controls {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-shrink: 0 !important; /* Küçülmesini engeller */
        gap: 6px !important;
        width: auto !important;
        margin-left: auto !important; /* En sağa iter */
    }

    /* Elemanların içindeki metinlerin kırılmasını engelle */
    .product-count, .sort-select, .view-btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Boyutları sabitle ki birbirlerini itmesinler */
    .view-btn {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .product-count {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    .sort-select {
        font-size: 11px !important;
        height: 34px !important;
        width: 110px !important; /* Sabit genişlik kaymayı önler */
        padding: 0 5px !important;
    }
}
/* Çok küçük ekranlar (360px ve altı) */
@media (max-width: 360px) {
    .filter-toolbar {
        padding: 6px 8px;
        gap: 6px;
        margin: 8px;
    }
    
    .view-btn {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    
    .product-count {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .product-count strong {
        display: none; /* Sayıyı gizle, sadece ikon kalsın */
    }
    
    .sort-select {
        font-size: 11px;
        padding: 5px 20px 5px 8px;
        min-width: 90px;
        max-width: 120px;
    }
}

/* Landscape mod için */
@media (max-height: 500px) and (orientation: landscape) {
    .filter-toolbar {
        padding: 6px 10px;
        margin: 8px 10px;
    }
    
    .view-btn {
        width: 30px;
        height: 30px;
    }
}

/* ============================================
   GÖRÜNÜM MODLARı
   ============================================ */

/* Grid Görünüm (Varsayılan) */
.yemekler-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 0 20px 30px;
}

/* List Görünüm */
.yemekler-grid.list-view {
    grid-template-columns: 1fr;
    gap: 15px;
}

.yemekler-grid.list-view .yemek-card {
    display: flex;
    flex-direction: row;
    height: auto;
}

.yemekler-grid.list-view .yemek-image {
    width: 180px;
    height: 180px;
    min-width: 180px;
    border-radius: 12px 0 0 12px;
}

.yemekler-grid.list-view .yemek-info {
    flex: 1;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.yemekler-grid.list-view .yemek-name {
    font-size: 18px;
    margin-bottom: 8px;
}

.yemekler-grid.list-view .yemek-price {
    font-size: 20px;
}

/* ============================================
   MOBİL UYUMLULUK
   ============================================ */

/* Telefon + küçük tablet */
@media (max-width: 991px) {
    .yemekler-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        padding: 0 12px 20px;
    }
}

/* Liste görünümü sadece list-view class'ı varsa */
@media (max-width: 991px) {
    .yemekler-grid.list-view {
        grid-template-columns: 1fr !important;
    }
}



/* ============================================
   MEVCUT YEMEK KART STİLLERİ (Uyumluluk için)
   ============================================ */

.yemek-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.yemek-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.yemek-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.yemek-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.yemek-card:hover .yemek-image img {
    transform: scale(1.05);
}

.yemek-info {
    padding: 20px;
}

/* ============================================
   MOBİLDE VARSAYILAN 2'Lİ GRID (ZORUNLU)
   ============================================ */

@media (max-width: 991px) {
    .yemekler-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 0 10px 18px;
    }

    /* List görünümü SADECE kullanıcı seçerse */
    .yemekler-grid.list-view {
        grid-template-columns: 1fr;
    }

    #sortSelect {
        width: 50%;
    }
    
}


/* List modu - zincoffee gibi yatay kartlar */
.yemekler-grid[data-view="list"] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 24px;
}

.yemekler-grid[data-view="list"] .yemek-card {
    flex-direction: row;
    align-items: center;
    min-height: 100px;
    border-radius: 12px;
    padding: 0;
}

.yemekler-grid[data-view="list"] .yemek-image {
    width: 100px;
    min-width: 100px;
    height: 100px;
    border-radius: 10px 0 0 10px;
}

.yemekler-grid[data-view="list"] .yemek-info {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.yemekler-grid[data-view="list"] .yemek-name {
    font-size: 15.5px;
    margin: 0 0 4px 0;
}

.yemekler-grid[data-view="list"] .yemek-desc {
    display: block;
    font-size: 13px;
    color: #64748b;
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.yemekler-grid[data-view="list"] .yemek-price {
    font-size: 17px;
    font-weight: 700;
    color: #e11d48;
}

/* Açıklama sadece list modunda görünsün */
.yemekler-grid[data-view="grid"] .yemek-desc {
    display: none;
}

/* Stok badge pozisyonu her iki modda da iyi dursun */
.yemekler-grid[data-view="grid"] .stock-badge,
.yemekler-grid[data-view="list"] .stock-badge {
    top: 8px;
    right: 8px;
    padding: 4px 9px;
    font-size: 10px;
}

@media (max-width: 991px) {
    .yemekler-grid[data-view="grid"] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 12px 20px;
    }

    .yemekler-grid[data-view="grid"] .yemek-card {
        min-height: 220px; /* daha kompakt */
        border-radius: 12px;
    }

    .yemekler-grid[data-view="grid"] .yemek-image {
        height: 120px;           /* ← boydan aldık, isim ferahladı */
        border-radius: 12px 12px 0 0;
    }

    .yemekler-grid[data-view="grid"] .yemek-info {
        padding: 10px 12px;
        text-align: center;
    }

    .yemekler-grid[data-view="grid"] .yemek-name {
        font-size: 13.5px;
        line-height: 1.3;
        margin-bottom: 6px;
        min-height: 36px;        /* 2 satır garanti */
    }

    .yemekler-grid[data-view="grid"] .yemek-price {
        font-size: 17px;
        font-weight: 700;
        color: #e11d48;
    }

    .yemekler-grid[data-view="grid"] .stock-badge {
        top: 6px;
        right: 6px;
        padding: 4px 8px;
        font-size: 9.5px;
    }
}

@media (max-width: 991px) {
    .yemekler-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 10px 20px;
    }

    .yemek-card {
        border-radius: 12px;
        overflow: hidden;
        background: white;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        position: relative;
    }

    .yemek-image {
        width: 100%;
        aspect-ratio: 1 / 1;     /* ← kare yapar, zingcoffee gibi */
        height: auto;
        overflow: hidden;
    }

    .yemek-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .yemek-info {
        padding: 10px 12px;
        text-align: center;
    }

    .yemek-name {
        font-size: 13.5px;
        line-height: 1.3;
        margin-bottom: 10px;
        overflow: hidden;
        min-height: 36px;
    }

    .yemek-price {
        font-size: 18px;
        font-weight: 700;
        color: #ef4444;
        margin-top: 10px;
    }
    
}

/* ============================================
   ÜRÜN BADGE'LERİ İÇİN OPTİMİZE STİLLER
   ============================================ */

/* BADGE - Sol üst köşe (tüm görünümlerde) */
.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: white;
    white-space: nowrap;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* STOK BADGE - Sağ üst köşe (grid görünümü) */
.stock-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    z-index: 20;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stock-badge.in {
    background: linear-gradient(135deg, rgba(46, 213, 115, 0.95), rgba(34, 166, 90, 0.95));
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.stock-badge.out {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.95), rgba(234, 32, 39, 0.95));
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

/* HAZIRLIK SÜRESİ BADGE - Desktop grid görünümünde fiyatın altında */
.preparation-badge {
    display: none; /* Grid görünümünde gizli */
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8f9fa;
    border-radius: 12px;
    font-size: 13px;
    color: #666;
    margin: 8px 0;
    font-weight: 500;
}

.preparation-badge i {
    color: #667eea;
    font-size: 12px;
}

/* MOBİL HAZIRLIK SÜRESİ (Grid görünümünde) */
.mobile-preparation {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #666;
    font-weight: 500;
    margin-top: 5px;
}

.mobile-preparation i {
    color: #667eea;
    font-size: 11px;
}

/* ============================================
   LİSTE GÖRÜNÜMÜ İÇİN ÖZEL STİLLER
   ============================================ */
.yemekler-grid[data-view="list"] .yemek-card {
    display: flex;
    flex-direction: row;
    min-height: auto;
    align-items: center;
    padding: 12px;
    gap: 15px;
}

.yemekler-grid[data-view="list"] .yemek-image {
    width: 120px;
    min-width: 120px;
    height: 120px;
    border-radius: 15px;
    position: relative;
}

.yemekler-grid[data-view="list"] .yemek-info {
    flex: 1;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.yemekler-grid[data-view="list"] .yemek-name {
    font-size: 16px;
    margin-bottom: 6px;
    min-height: auto;
}

.yemekler-grid[data-view="list"] .yemek-desc {
    display: block;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 10px;
}

.yemekler-grid[data-view="list"] .yemek-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.yemekler-grid[data-view="list"] .yemek-price {
    font-size: 18px;
    margin-top: 0;
}

/* Liste görünümünde hazırlık süresi fiyatın yanında */
.yemekler-grid[data-view="list"] .preparation-badge {
    display: flex;
    background: #f8f9fa;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    margin: 0;
}

/* Liste görünümünde mobil hazırlık süresini gizle */
.yemekler-grid[data-view="list"] .mobile-preparation {
    display: none;
}

/* ============================================
   GRİD GÖRÜNÜMÜ İÇİN ÖZEL STİLLER (DESKTOP)
   ============================================ */
@media (min-width: 768px) {
    /* Grid görünümünde fiyatın altında hazırlık süresi */
    .yemekler-grid[data-view="grid"] .preparation-badge {
        display: flex;
    }
    
    /* Grid görünümünde mobil hazırlık süresini gizle */
    .yemekler-grid[data-view="grid"] .mobile-preparation {
        display: none;
    }
}

/* ============================================
   GRİD GÖRÜNÜMÜ İÇİN ÖZEL STİLLER (MOBİL)
   ============================================ */
@media (max-width: 767px) {
    .yemekler-grid[data-view="grid"] .preparation-badge {
        display: none; /* Mobil grid'de gizli */
    }
    
    .yemekler-grid[data-view="grid"] .mobile-preparation {
        display: flex; /* Mobil grid'de göster */
    }
    
    /* Mobilde badge'ler daha küçük */
    .product-badge,
    .stock-badge {
        top: 8px;
        padding: 5px 10px;
        font-size: 10px;
    }
    
    .product-badge {
        left: 8px;
        max-width: 70%;
    }
    
    .stock-badge {
        right: 8px;
    }
}

/* ============================================
   MODAL İÇİN ÖZEL STİLLER
   ============================================ */
.product-modal {
    padding: 20px;
}

.product-modal-image {
    position: relative;
    width: 100%;
    height: 250px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
}

.product-modal-image img {
    width: 100%;
    height: 100%;
}

.product-modal-content {
    text-align: left;
}

.product-modal-content h3 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 15px;
}

.product-modal-desc {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 12px;
}

.product-detail-preparation {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea15, #764ba215);
    border-radius: 12px;
    margin: 15px 0;
    font-size: 15px;
    color: #2c3e50;
    font-weight: 500;
    border-left: 4px solid #667eea;
}

.product-detail-preparation i {
    color: #667eea;
    font-size: 16px;
}

.product-modal-price {
    font-size: 28px;
    font-weight: 800;
    color: #e74c3c;
    margin-top: 20px;
    text-align: center;
    padding: 15px;
    background: #fef2f2;
    border-radius: 15px;
}

/* Modal badge konumları */
.product-modal .product-badge {
    top: 20px;
    left: 20px;
    font-size: 13px;
    padding: 8px 16px;
}

.product-modal .stock-badge {
    top: 20px;
    right: 20px;
    font-size: 13px;
    padding: 8px 16px;
}

/* ============================================
   SLIDER İÇİN ÖZEL STİLLER
   ============================================ */
.slider-item .product-badge {
    top: 10px;
    left: 10px;
    padding: 5px 12px;
    font-size: 11px;
}

.slider-item .stock-badge {
    top: 10px;
    right: 10px;
    padding: 5px 12px;
    font-size: 11px;
}

/* Slider'da hazırlık süresi - resmin altında */
.slider-item .preparation-badge {
    display: flex;
    margin: 10px 15px 0;
    padding: 6px 10px;
    font-size: 12px;
}

/* ============================================
   STOKTA OLMAYAN ÜRÜNLER İÇİN
   ============================================ */
.out-of-stock {
    opacity: 0.85;
}

.out-of-stock::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 10;
    border-radius: 20px;
    pointer-events: none;
}

.out-of-stock .yemek-info {
    position: relative;
    z-index: 11;
}

/* Liste görünümünde out-of-stock düzeni */
.yemekler-grid[data-view="list"] .out-of-stock::after {
    border-radius: 15px;
}

/* ============================================
   TEMA UYUMLULUK (DARK MODE)
   ============================================ */
@media (prefers-color-scheme: dark) {
    .product-badge {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
    
    .preparation-badge,
    .product-detail-preparation {
        background: #2d3748;
        color: #e2e8f0;
    }
    
    .out-of-stock::after {
        background: rgba(0, 0, 0, 0.4);
    }
}

/* ============================================
   ANIMASYONLAR
   ============================================ */
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.product-badge {
    animation: badgePulse 3s ease-in-out infinite;
}

/* ============================================
   RESPONSIVE AYARLAMALAR
   ============================================ */
@media (max-width: 480px) {
    .yemekler-grid[data-view="grid"] .yemek-image {
        height: 140px;
    }
    
    .yemekler-grid[data-view="list"] .yemek-image {
        width: 100px;
        min-width: 100px;
        height: 100px;
    }
    
    .product-modal-image {
        height: 220px;
    }
    
    .product-modal-content h3 {
        font-size: 20px;
    }
    
    .product-modal-price {
        font-size: 24px;
    }
}

/* Çok küçük ekranlar */
@media (max-width: 360px) {
    .product-badge,
    .stock-badge {
        font-size: 9px;
        padding: 4px 8px;
    }
    
    .yemekler-grid[data-view="list"] .yemek-image {
        width: 90px;
        min-width: 90px;
        height: 90px;
    }
    
    .yemekler-grid[data-view="list"] .yemek-name {
        font-size: 15px;
    }
}

/* ============================================
   ÜRÜN DETAY MODALI STİLLERİ
   ============================================ */

.product-detail-modal .modal-content {
    max-width: 500px !important;
    width: 90% !important;
    border-radius: 25px !important;
    overflow: hidden !important;
    animation: modalSlideUp 0.4s ease !important;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-modal {
    padding: 0;
}

.product-modal-image {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}

.product-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-modal-content {
    text-align: left;
    padding: 0 5px;
}

.product-modal-content h3 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.product-modal-desc {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 4px solid #667eea;
}

.product-detail-preparation {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea15, #764ba215);
    border-radius: 12px;
    margin: 15px 0;
    font-size: 15px;
    color: #2c3e50;
    font-weight: 500;
    border-left: 4px solid #667eea;
}

.product-detail-preparation i {
    color: #667eea;
    font-size: 16px;
}



/* Modal badge konumları */
.product-modal .product-badge {
    top: 20px;
    left: 20px;
    font-size: 13px;
    padding: 8px 16px;
    position: absolute;
    z-index: 10;
}

.product-modal .stock-badge {
    top: 20px;
    right: 20px;
    font-size: 13px;
    padding: 8px 16px;
    position: absolute;
    z-index: 10;
}

/* Responsive modal */
@media (max-width: 480px) {
    .product-modal-image {
        height: 200px;
    }
    
    .product-modal-content h3 {
        font-size: 20px;
    }
    
    .product-modal-desc {
        font-size: 14px;
        padding: 12px;
    }
    
    .product-modal-price {
        font-size: 24px;
        padding: 12px;
    }
}

/* Eski modal'ı gizle */
.modal:not(.product-detail-modal) {
    display: none !important;
}

/* Clickable item cursor */
.clickable-item {
    cursor: pointer !important;
}

/* Özel butonlar için istisna */
.clickable-item.area-btn,
.clickable-item.view-btn,
.clickable-item[data-toggle] {
    cursor: default !important;
}

/* ============================================
   ÜRÜN KARTLARI İÇİN STİLLER
   ============================================ */

/* Badge stilleri */
.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: white;
    white-space: nowrap;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Stok badge */
.stock-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    z-index: 20;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stock-badge.in {
    background: linear-gradient(135deg, rgba(46, 213, 115, 0.95), rgba(34, 166, 90, 0.95));
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.stock-badge.out {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.95), rgba(234, 32, 39, 0.95));
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

/* Hazırlık süresi badge */
.preparation-badge {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8f9fa;
    border-radius: 12px;
    font-size: 13px;
    color: #666;
    margin: 8px 0;
    font-weight: 500;
}

.preparation-badge i {
    color: #667eea;
    font-size: 12px;
}

.mobile-preparation {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #666;
    font-weight: 500;
    margin-top: 5px;
}

.mobile-preparation i {
    color: #667eea;
    font-size: 11px;
}

/* Liste görünümü için */
.yemekler-grid[data-view="list"] .yemek-card {
    display: flex;
    flex-direction: row;
    min-height: auto;
    align-items: center;
    padding: 12px;
    gap: 15px;
}

.yemekler-grid[data-view="list"] .yemek-image {
    width: 120px;
    min-width: 120px;
    height: 120px;
    border-radius: 15px;
    position: relative;
}

.yemekler-grid[data-view="list"] .yemek-info {
    flex: 1;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.yemekler-grid[data-view="list"] .yemek-name {
    font-size: 16px;
    margin-bottom: 6px;
    min-height: auto;
}

.yemekler-grid[data-view="list"] .yemek-desc {
    display: block;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 10px;
}

.yemekler-grid[data-view="list"] .yemek-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.yemekler-grid[data-view="list"] .yemek-price {
    font-size: 18px;
    margin-top: 0;
}

.yemekler-grid[data-view="list"] .preparation-badge {
    display: flex;
    background: #f8f9fa;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    margin: 0;
}

.yemekler-grid[data-view="list"] .mobile-preparation {
    display: none;
}

/* Grid görünümü için */
@media (min-width: 768px) {
    .yemekler-grid[data-view="grid"] .preparation-badge {
        display: flex;
    }
    
    .yemekler-grid[data-view="grid"] .mobile-preparation {
        display: none;
    }
}

/* Mobil için */
@media (max-width: 767px) {
    .yemekler-grid[data-view="grid"] .preparation-badge {
        display: none;
    }
    
    .yemekler-grid[data-view="grid"] .mobile-preparation {
        display: flex;
    }
    
    .product-badge,
    .stock-badge {
        top: 8px;
        padding: 5px 10px;
        font-size: 10px;
    }
    
    .product-badge {
        left: 8px;
        max-width: 70%;
    }
    
    .stock-badge {
        right: 8px;
    }
}

/* Out of stock */
.out-of-stock {
    opacity: 0.85;
}

.out-of-stock::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 10;
    border-radius: 20px;
    pointer-events: none;
}

.out-of-stock .yemek-info {
    position: relative;
    z-index: 11;
}

.yemekler-grid[data-view="list"] .out-of-stock::after {
    border-radius: 15px;
}

/* ============================================
   LİSTE GÖRÜNÜMÜNDE BADGE DÜZENİ - YENİ TASARIM
   ============================================ */

/* Liste görünümünde resmin üzerindeki badge'leri gizle */
.yemekler-grid[data-view="list"] .yemek-image .product-badge,
.yemekler-grid[data-view="list"] .yemek-image .stock-badge {
    display: none !important;
}

/* Liste görünümünde yemek-info container'ı relative yap */
.yemekler-grid[data-view="list"] .yemek-info {
    position: relative;
    flex: 1;
    padding: 10px 15px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
}

/* ===== STOK BADGE - SAğ ÜST KÖŞE ===== */
.yemekler-grid[data-view="list"] .list-stock-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 10;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Stokta var - Yeşil */
.yemekler-grid[data-view="list"] .list-stock-badge.in {
    background: linear-gradient(135deg, rgba(46, 213, 115, 0.95), rgba(34, 166, 90, 0.95));
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

/* Stokta yok - Kırmızı */
.yemekler-grid[data-view="list"] .list-stock-badge.out {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.95), rgba(234, 32, 39, 0.95));
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

/* ===== DURUM BADGE (YENİ, vb.) - SAğ ALT KÖŞE ===== */
.yemekler-grid[data-view="list"] .list-product-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: white;
}

/* İçeriğe padding ekle (badge'lere yer açmak için) */
.yemekler-grid[data-view="list"] .yemek-name {
    font-size: 16px;
    margin-bottom: 6px;
    padding-right: 90px; /* Sağ üst badge için yer */
    line-height: 1.4;
}

.yemekler-grid[data-view="list"] .yemek-desc {
    display: block;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 10px;
    padding-right: 10px;
}

.yemekler-grid[data-view="list"] .yemek-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-right: 90px; /* Sağ alt badge için yer */
}

.yemekler-grid[data-view="list"] .yemek-price {
    font-size: 18px;
    font-weight: 800;
    color: #e74c3c;
    margin-top: 0;
}

/* ===== MOBİL UYUMLULUK ===== */
@media (max-width: 767px) {
    .yemekler-grid[data-view="list"] .list-stock-badge,
    .yemekler-grid[data-view="list"] .list-product-badge {
        padding: 5px 10px;
        font-size: 10px;
    }
    
    .yemekler-grid[data-view="list"] .yemek-name {
        padding-right: 75px;
        font-size: 15px;
    }
    
    .yemekler-grid[data-view="list"] .yemek-bottom {
        padding-right: 75px;
    }
    
    .yemekler-grid[data-view="list"] .yemek-price {
        font-size: 17px;
    }
}

/* ===== ÇOK KÜÇÜK EKRANLAR ===== */
@media (max-width: 480px) {
    .yemekler-grid[data-view="list"] .yemek-image {
        width: 100px;
        min-width: 100px;
        height: 100px;
    }
    
    .yemekler-grid[data-view="list"] .yemek-info {
        padding: 8px 12px;
        min-height: 100px;
    }
    
    .yemekler-grid[data-view="list"] .list-stock-badge,
    .yemekler-grid[data-view="list"] .list-product-badge {
        padding: 4px 9px;
        font-size: 9px;
    }
    
    .yemekler-grid[data-view="list"] .yemek-name {
        padding-right: 70px;
        font-size: 14px;
    }
    
    .yemekler-grid[data-view="list"] .yemek-desc {
        font-size: 12px;
    }
}

/* MODAL KONTEYNER */
.product-detail-modal .modal-content {
    max-width: 450px !important;
    width: 95% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: white !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15) !important;
    margin: 20px auto !important;
    padding: 0 !important;
    border: 1px solid #eee !important;
}

/* TEK SATIR BAŞLIK ALANI - HEP BİRLİKTE */
.product-detail-modal .product-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 15px 10px !important;
    gap: 10px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: #fff !important;
    flex-wrap: nowrap !important;
    min-height: 50px !important;
}

/* SOL TARAF: ÜRÜN ADI + SÜRE BİRLİKTE */
.product-detail-modal .product-title-area {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
}

/* ÜRÜN ADI */
.product-detail-modal .product-modal-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-shrink: 1 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    max-width: 200px !important;
}

/* SÜRE BİLGİSİ - ÜRÜN ADININ YANINDA */
.product-detail-modal .product-modal-time {
    font-size: 13px !important;
    color: #667eea !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    flex-shrink: 0 !important;
    background: #f8f9fa !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    border: 1px solid #e8edff !important;
}

.product-detail-modal .product-modal-time i {
    font-size: 12px !important;
    color: #667eea !important;
}

/* KAPATMA BUTONU - SAĞDA */
.product-detail-modal .modal-close-btn {
    background: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    color: #666 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-detail-modal .modal-close-btn:hover {
    background: #e74c3c !important;
    color: white !important;
    border-color: #e74c3c !important;
    transform: scale(1.1) !important;
}

/* GÖRSEL ALANI */
.product-detail-modal .product-modal-image {
    position: relative !important;
    width: 100% !important;
    height: 250px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-detail-modal .product-modal-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* BADGE'LER - GÖRSEL ÜZERİNDE (BÜYÜK) */
.product-detail-modal .product-modal-image .product-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    z-index: 10 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
    white-space: nowrap !important;
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.product-detail-modal .product-modal-image .stock-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    z-index: 10 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
    white-space: nowrap !important;
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* STOK DURUMU RENKLERİ */
.product-detail-modal .product-modal-image .stock-badge.in {
    background: linear-gradient(135deg, #27ae60, #219653) !important;
    color: white !important;
}

.product-detail-modal .product-modal-image .stock-badge.out {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    color: white !important;
}

/* "Fiyatı:" metni */
.product-detail-modal .product-modal-price::before {
    content: "Fiyatı: " !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #666 !important;
}

/* AÇIKLAMA ALANI - BOŞLUĞU AZALTILMIŞ */
.product-detail-modal .product-modal-desc-area {
    padding: 12px 15px 15px !important;
    margin: 0 !important;
}

.product-detail-modal .product-modal-desc-area p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #666 !important;
    padding: 10px 12px !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    border-left: 4px solid #667eea !important;
    margin: 0 !important;
}

/* ============================================
   MOBİL UYUMLULUK - TEK SATIR KORUNACAK
   ============================================ */

@media (max-width: 768px) {
    .product-detail-modal .modal-content {
        max-width: 400px !important;
        margin: 15px auto !important;
    }
    
    /* TEK SATIR BAŞLIK MOBİLDE DE KORUNUYOR */
    .product-detail-modal .product-modal-header {
        padding: 10px 12px 8px !important;
        gap: 8px !important;
        min-height: 45px !important;
    }
    
    .product-detail-modal .product-modal-title {
        font-size: 16px !important;
        max-width: 150px !important;
    }
    
    .product-detail-modal .product-modal-time {
        font-size: 12px !important;
        padding: 3px 8px !important;
    }
    
    .product-detail-modal .modal-close-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 18px !important;
    }
    
    /* GÖRSEL */
    .product-detail-modal .product-modal-image {
        height: 220px !important;
    }
    
    /* BADGE'LER MOBİLDE BİRAZ KÜÇÜK */
    .product-detail-modal .product-modal-image .product-badge,
    .product-detail-modal .product-modal-image .stock-badge {
        font-size: 11px !important;
        padding: 4px 8px !important;
        top: 8px !important;
        max-width: 70px !important;
    }
    
    .product-detail-modal .product-modal-image .product-badge {
        left: 8px !important;
    }
    
    .product-detail-modal .product-modal-image .stock-badge {
        right: 8px !important;
    }
    
    /* FİYAT */
    .product-detail-modal .product-modal-price {
        font-size: 20px !important;
        padding: 7px 12px !important;
        min-height: 45px !important;
    }
    
    .product-detail-modal .product-modal-price::before {
        font-size: 13px !important;
    }
    
    /* AÇIKLAMA */
    .product-detail-modal .product-modal-desc-area {
        padding: 10px 12px 12px !important;
    }
    
    .product-detail-modal .product-modal-desc-area p {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }
}

/* ÇOK KÜÇÜK EKRANLAR (iPhone SE vb.) */
@media (max-width: 480px) {
    .product-detail-modal .modal-content {
        max-width: 350px !important;
        margin: 10px auto !important;
    }
    
    /* TEK SATIR BAŞLIK - ÇOK KÜÇÜK EKRANLAR İÇİN OPTİMİZASYON */
    .product-detail-modal .product-modal-header {
        padding: 8px 10px 6px !important;
        gap: 6px !important;
        min-height: 40px !important;
    }
    
    .product-detail-modal .product-modal-title {
        font-size: 15px !important;
        max-width: 120px !important;
    }
    
    .product-detail-modal .product-modal-time {
        font-size: 11px !important;
        padding: 2px 6px !important;
        gap: 3px !important;
    }
    
    .product-detail-modal .product-modal-time i {
        font-size: 10px !important;
    }
    
    .product-detail-modal .modal-close-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 16px !important;
        border-radius: 6px !important;
    }
    
    /* GÖRSEL */
    .product-detail-modal .product-modal-image {
        height: 180px !important;
    }
    
    /* BADGE'LER */
    .product-detail-modal .product-modal-image .product-badge,
    .product-detail-modal .product-modal-image .stock-badge {
        font-size: 10px !important;
        padding: 3px 6px !important;
        top: 6px !important;
        max-width: 60px !important;
    }
    
    .product-detail-modal .product-modal-image .product-badge {
        left: 6px !important;
    }
    
    .product-detail-modal .product-modal-image .stock-badge {
        right: 6px !important;
    }
    
    /* FİYAT */
    .product-detail-modal .product-modal-price {
        font-size: 18px !important;
        padding: 6px 10px !important;
        min-height: 40px !important;
    }
    
    .product-detail-modal .product-modal-price::before {
        font-size: 12px !important;
    }
    
    /* AÇIKLAMA */
    .product-detail-modal .product-modal-desc-area {
        padding: 8px 10px 10px !important;
    }
    
    .product-detail-modal .product-modal-desc-area p {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
}

/* EKSTRA KÜÇÜK EKRANLAR */
@media (max-width: 360px) {
    .product-detail-modal .modal-content {
        max-width: 320px !important;
    }
    
    .product-detail-modal .product-modal-title {
        font-size: 14px !important;
        max-width: 100px !important;
    }
    
    .product-detail-modal .product-modal-time {
        font-size: 10px !important;
        padding: 2px 5px !important;
    }
    
    .product-detail-modal .product-modal-image {
        height: 160px !important;
    }
    
    .product-detail-modal .product-modal-price {
        font-size: 17px !important;
    }
}

/* ============================================
   YATAY MOD (LANDSCAPE) İÇİN OPTİMİZASYON
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .product-detail-modal .modal-content {
        max-width: 500px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    .product-detail-modal .product-modal-image {
        height: 150px !important;
    }
    
    .product-detail-modal .product-modal-header {
        padding: 8px 12px 6px !important;
        min-height: 35px !important;
    }
    
    .product-detail-modal .product-modal-price {
        min-height: 35px !important;
        padding: 5px 12px !important;
    }
}

@keyframes badgeFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-detail-modal .product-modal-image .product-badge,
.product-detail-modal .product-modal-image .stock-badge {
    animation: badgeFadeIn 0.4s ease 0.2s both !important;
}

/* ============================================
   MASAÜSTÜ İÇİN EK AYARLAR
   ============================================ */
@media (min-width: 1024px) {
    .product-detail-modal .modal-content {
        max-width: 480px !important;
    }
    
    .product-detail-modal .product-modal-title {
        font-size: 19px !important;
        max-width: 250px !important;
    }
    
    .product-detail-modal .product-modal-time {
        font-size: 14px !important;
        padding: 5px 12px !important;
    }
    
    .product-detail-modal .product-modal-image {
        height: 240px !important;
    }
    
    .product-detail-modal .product-modal-price {
        font-size: 24px !important;
        padding: 10px 15px !important;
    }
}

/* ============================================
   GRID GÖRÜNÜMÜ - KÜÇÜK VE EŞİT BÜYÜKLÜKTE BADGE'LER
   ============================================ */

/* TÜM EKRANLAR İÇİN GRID GÖRÜNÜMÜNDE BADGE'LER */
.yemekler-grid[data-view="grid"] .product-badge,
.yemekler-grid[data-view="grid"] .stock-badge {
    position: absolute !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    z-index: 10 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    white-space: nowrap !important;
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    animation: badgeFadeIn 0.3s ease !important;
}

/* SOL ÜST - DURUM BADGE'İ */
.yemekler-grid[data-view="grid"] .product-badge {
    top: 10px !important;
    left: 10px !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
}

/* SAĞ ÜST - STOK BADGE'İ */
.yemekler-grid[data-view="grid"] .stock-badge {
    top: 10px !important;
    right: 10px !important;
}

/* STOK DURUMU RENKLERİ */
.yemekler-grid[data-view="grid"] .stock-badge.in {
    background: linear-gradient(135deg, #27ae60, #219653) !important;
    color: white !important;
}

.yemekler-grid[data-view="grid"] .stock-badge.out {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    color: white !important;
}

/* ============================================
   MASAÜSTÜ İÇİN BADGE OPTİMİZASYONU
   ============================================ */

@media (min-width: 768px) {
    .yemekler-grid[data-view="grid"] .product-badge,
    .yemekler-grid[data-view="grid"] .stock-badge {
        font-size: 12px !important;
        padding: 5px 12px !important;
        border-radius: 8px !important;
        max-width: 90px !important;
    }
    
    .yemekler-grid[data-view="grid"] .product-badge {
        top: 12px !important;
        left: 12px !important;
    }
    
    .yemekler-grid[data-view="grid"] .stock-badge {
        top: 12px !important;
        right: 12px !important;
    }
}

/* BÜYÜK EKRANLAR */
@media (min-width: 1200px) {
    .yemekler-grid[data-view="grid"] .product-badge,
    .yemekler-grid[data-view="grid"] .stock-badge {
        font-size: 13px !important;
        padding: 6px 14px !important;
        max-width: 100px !important;
    }
}

/* ============================================
   MOBİL İÇİN KÜÇÜK BADGE'LER
   ============================================ */

@media (max-width: 767px) {
    .yemekler-grid[data-view="grid"] .product-badge,
    .yemekler-grid[data-view="grid"] .stock-badge {
        font-size: 10px !important;
        padding: 3px 8px !important;
        max-width: 70px !important;
        top: 8px !important;
    }
    
    .yemekler-grid[data-view="grid"] .product-badge {
        left: 8px !important;
    }
    
    .yemekler-grid[data-view="grid"] .stock-badge {
        right: 8px !important;
    }
}

/* ÇOK KÜÇÜK EKRANLAR */
@media (max-width: 480px) {
    .yemekler-grid[data-view="grid"] .product-badge,
    .yemekler-grid[data-view="grid"] .stock-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
        max-width: 60px !important;
        top: 6px !important;
    }
    
    .yemekler-grid[data-view="grid"] .product-badge {
        left: 6px !important;
    }
    
    .yemekler-grid[data-view="grid"] .stock-badge {
        right: 6px !important;
    }
}

/* ============================================
   LİSTE GÖRÜNÜMÜNDE AÇIKLAMAYI GİZLE
   ============================================ */

/* LİSTE GÖRÜNÜMÜNDE AÇIKLAMA GİZLE - TÜM CİHAZLAR */
.yemekler-grid[data-view="list"] .yemek-desc {
    display: none !important;
}

/* LİSTE GÖRÜNÜMÜNDE BADGE'LER - GÖRSEL ÜZERİNDE GİZLİ */
.yemekler-grid[data-view="list"] .yemek-image .product-badge,
.yemekler-grid[data-view="list"] .yemek-image .stock-badge {
    display: none !important;
}

/* LİSTE GÖRÜNÜMÜNDE SAĞ ÜST STOK BADGE'İ */
.yemekler-grid[data-view="list"] .list-stock-badge {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    z-index: 10 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    white-space: nowrap !important;
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.yemekler-grid[data-view="list"] .list-stock-badge.in {
    background: linear-gradient(135deg, #27ae60, #219653) !important;
    color: white !important;
}

.yemekler-grid[data-view="list"] .list-stock-badge.out {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    color: white !important;
}

/* LİSTE GÖRÜNÜMÜNDE SAĞ ALT DURUM BADGE'İ */
.yemekler-grid[data-view="list"] .list-product-badge {
    position: absolute !important;
    bottom: 5px !important;
    right: 5px !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    z-index: 10 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    white-space: nowrap !important;
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* LİSTE GÖRÜNÜMÜ MOBİL OPTİMİZASYONU */
@media (max-width: 767px) {
    .yemekler-grid[data-view="list"] .list-stock-badge,
    .yemekler-grid[data-view="list"] .list-product-badge {
        font-size: 10px !important;
        padding: 3px 8px !important;
        max-width: 70px !important;
    }
    
    @media (max-width: 480px) {
        .yemekler-grid[data-view="list"] .list-stock-badge,
        .yemekler-grid[data-view="list"] .list-product-badge {
            font-size: 9px !important;
            padding: 2px 6px !important;
            max-width: 60px !important;
        }
    }
}

/* ============================================
   ÜRÜN DETAY MODALI - ULTRA SIKI & DÜZGÜN
   ============================================ */

/* Modal Container */
.product-detail-modal .modal-content {
    max-width: 440px;
    width: 92%;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.12);
    margin: 8px auto;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    animation: modalSlideIn 0.12s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== ÜST KISIM - TEK SATIR SIKI ===== */
.product-detail-modal .product-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: white;
    border-bottom: 1px solid #e5e5e5;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
    height: 40px;
    gap: 6px;
}

/* Sol taraf: İsim + Süre yan yana */
.product-detail-modal .header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Ürün İsmi - SOL ÜSTTE */
.product-detail-modal .product-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    padding: 0;
    order: 1; /* SOLDA */
}

/* Hazırlama Süresi - İSMİN YANINDA */
.product-detail-modal .product-modal-time {
    font-size: 11px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 3px;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    order: 2; /* İSMİN YANINDA */
    height: 20px;
    line-height: 16px;
}

.product-detail-modal .product-modal-time i {
    font-size: 9px;
    color: #e74c3c;
    margin-right: 2px;
}

/* Kapatma Butonu - EN SAĞ */
.product-detail-modal .modal-close-btn {
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #666;
    cursor: pointer;
    transition: all 0.12s;
    padding: 0;
    flex-shrink: 0;
    margin: 0;
    order: 3; /* EN SAĞDA */
}

.product-detail-modal .modal-close-btn:hover {
    background: #e74c3c;
    color: white;
    border-color: #e74c3c;
}

/* ===== İÇERİK ALANI - SIKI ===== */
.product-detail-modal .modal-scroll-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px 12px;
}

/* Görsel */
.product-detail-modal .product-modal-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #f0f0f0;
    position: relative;
}

.product-detail-modal .product-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== FİYAT + KALORİ - TEK SATIR ===== */
.product-detail-modal .price-calorie-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}



.product-detail-modal .product-modal-price .price-amount {
    font-size: 14px;
    font-weight: 700;
}

/* KALORİ - SAĞDA */
.product-detail-modal .calorie-info {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #666;
    font-weight: 500;
    background: #fff8e1;
    padding: 3px 7px;
    border-radius: 10px;
    border: 1px solid #ffeaa7;
    white-space: nowrap;
}

.product-detail-modal .calorie-info i {
    color: #f39c12;
    font-size: 10px;
}

/* Açıklama */
.product-detail-modal .product-modal-desc-area {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.product-detail-modal .product-modal-desc-area p {
    font-size: 12.5px;
    line-height: 1.5;
    color: #555;
    margin: 0;
    padding: 6px 8px;
    background: #f9f9f9;
    border-radius: 6px;
    border-left: 2px solid #3498db;
}

/* Kategori */
.product-detail-modal .product-category {
    font-size: 11.5px;
    color: #777;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

/* Başlıklar */
.product-detail-modal .section-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #222222
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.product-detail-modal .section-title i {
    font-size: 11px;
    color: #222222;
}

/* İçindekiler & Alerjenler Grid */
.product-detail-modal .ingredients-grid,
.product-detail-modal .allergens-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

/* İçindekiler Item */
.product-detail-modal .ingredient-item {
    background: #f0f7ff;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11.5px;
    color: #2c3e50;
    border: 1px solid #d1e3ff;
    white-space: nowrap;
    line-height: 1.3;
}

/* Alerjenler Item */
.product-detail-modal .allergen-item {
    background: #fff0f0;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11.5px;
    color: #c0392b;
    border: 1px solid #ffcccc;
    white-space: nowrap;
    line-height: 1.3;
}

/* Porsiyon */
.product-detail-modal .portion-info {
    padding: 0;
    font-size: 11.5px;
    color: #777;
    font-style: italic;
    margin-top: 8px;
}

/* ============================================
   MOBİL OPTİMİZASYON - REVİZE EDİLMİŞ
   ============================================ */

@media (max-width: 768px) {
    .product-detail-modal .modal-content {
        width: 90%;
        max-height: 92vh;
        margin: 6px auto;
        border-radius: 8px;
    }

    .product-detail-modal .product-modal-header {
        padding: 6px 10px;
        height: 36px;
        gap: 5px;
    }

    .product-detail-modal .header-left {
        gap: 6px;
    }

    .product-detail-modal .product-modal-title {
        font-size: 14px;
        flex-shrink: 1;
        min-width: 40%; /* Minimum genişlik */
    }

    .product-detail-modal .product-modal-time {
        font-size: 10px;
        padding: 2px 5px;
        border-radius: 8px;
        height: 18px;
        line-height: 14px;
    }

    .product-detail-modal .modal-close-btn {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    .product-detail-modal .modal-scroll-content {
        padding: 8px 10px 10px;
    }

    .product-detail-modal .product-modal-image {
        height: 140px;
        margin-bottom: 8px;
    }

    .product-detail-modal .price-calorie-row {
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    .product-detail-modal .product-modal-price {
        font-size: 12.5px;
        gap: 2px;
    }

    .product-detail-modal .product-modal-price .price-amount {
        font-size: 13px;
    }

    .product-detail-modal .calorie-info {
        font-size: 10.5px;
        padding: 2px 6px;
        border-radius: 8px;
    }

    .product-detail-modal .product-modal-desc-area p {
        font-size: 12px;
        padding: 5px 6px;
    }

    .product-detail-modal .ingredient-item,
    .product-detail-modal .allergen-item {
        font-size: 11px;
        padding: 2px 6px;
    }
}

@media (max-width: 480px) {
    .product-detail-modal .modal-content {
        width: 88%;
        margin: 4px auto;
        border-radius: 6px;
    }

    .product-detail-modal .product-modal-header {
        padding: 5px 8px;
        height: 34px;
        gap: 4px;
    }

    .product-detail-modal .header-left {
        gap: 4px;
    }

    .product-detail-modal .product-modal-title {
        font-size: 13px;
        min-width: 35%;
    }

    .product-detail-modal .product-modal-time {
        font-size: 9px;
        padding: 1px 4px;
        border-radius: 6px;
        height: 16px;
        line-height: 12px;
    }

    .product-detail-modal .product-modal-time i {
        font-size: 8px;
        margin-right: 1px;
    }

    .product-detail-modal .modal-close-btn {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }

    .product-detail-modal .modal-scroll-content {
        padding: 6px 8px 8px;
    }

    .product-detail-modal .product-modal-image {
        height: 120px;
        margin-bottom: 6px;
    }

    /* Mobilde fiyat ve kalori alt alta */
    .product-detail-modal .price-calorie-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        margin-bottom: 6px;
        padding-bottom: 5px;
    }

    .product-detail-modal .product-modal-price {
        font-size: 12px;
    }

    .product-detail-modal .product-modal-price .price-amount {
        font-size: 12px;
    }

    .product-detail-modal .calorie-info {
        font-size: 10px;
        padding: 2px 5px;
    }

    .product-detail-modal .product-modal-desc-area p {
        font-size: 11.5px;
        padding: 4px 5px;
    }

    .product-detail-modal .ingredients-grid,
    .product-detail-modal .allergens-grid {
        gap: 3px;
    }

    .product-detail-modal .ingredient-item,
    .product-detail-modal .allergen-item {
        font-size: 10px;
        padding: 1px 5px;
        border-radius: 10px;
    }
}

/* Çok küçük ekranlar (iPhone SE vb.) */
@media (max-width: 360px) {
    .product-detail-modal .modal-content {
        width: 86%;
        margin: 3px auto;
    }

    .product-detail-modal .product-modal-title {
        font-size: 12px;
        min-width: 30%;
    }

    .product-detail-modal .product-modal-time {
        font-size: 8px;
        padding: 1px 3px;
    }

    .product-detail-modal .modal-close-btn {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .product-detail-modal .product-modal-image {
        height: 100px;
    }

    .product-detail-modal .product-modal-price {
        font-size: 11px;
    }

    .product-detail-modal .product-modal-price .price-amount {
        font-size: 11px;
    }
}

/* Yatay mod (landscape) */
@media (max-height: 500px) and (orientation: landscape) {
    .product-detail-modal .modal-content {
        max-height: 95vh;
        margin: 3px auto;
    }

    .product-detail-modal .product-modal-header {
        height: 32px;
        padding: 4px 8px;
    }

    .product-detail-modal .product-modal-image {
        height: 90px;
        margin-bottom: 5px;
    }

    .product-detail-modal .modal-scroll-content {
        padding: 5px 8px 6px;
    }
}

/* Koyu Mod */
@media (prefers-color-scheme: dark) {
    .product-detail-modal .modal-content {
        background: #1e272e;
        color: #ecf0f1;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
    }

    .product-detail-modal .product-modal-header {
        background: #1e272e;
        border-bottom-color: #2d3436;
    }

    .product-detail-modal .product-modal-title {
        color: #ecf0f1;
    }

    .product-detail-modal .product-modal-time {
        background: #2d3436;
        color: #bdc3c7;
    }

    .product-detail-modal .modal-close-btn {
        background: #2d3436;
        border-color: #3d4446;
        color: #bdc3c7;
    }

    .product-detail-modal .product-modal-image {
        background: #2d3436;
    }

    .product-detail-modal .calorie-info {
        background: #5a4a2a;
        border-color: #6a5a3a;
        color: #ffd166;
    }

    .product-detail-modal .product-modal-desc-area p {
        background: #2d3436;
        color: #bdc3c7;
        border-left-color: #3498db;
    }

    .product-detail-modal .ingredient-item {
        background: #34495e;
        color: #ecf0f1;
        border-color: #2c3e50;
    }

    .product-detail-modal .allergen-item {
        background: #6b2c2c;
        color: #ffb8b8;
        border-color: #7a3a3a;
    }

    .product-detail-modal .section-title {
        color: #222222;
    }
}

/* =====================================
   FİYAT – ARKAPLANI KALDIR & YUKARI AL
===================================== */

.product-modal-price {
    background: none !important;
    padding: 0 !important;
    margin-top: -6px;          /* biraz yukarı alır */
}

.product-modal-price .price-amount {
    font-size: 22px;
    font-weight: 700;
    color: #e74c3c;
	text-decoration: none;
}


/* =====================================
   FİYAT + KALORİ SATIRI (GENEL)
===================================== */

.price-calorie-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}


/* =====================================
   KALORİ STİLİ
===================================== */

.calorie-info {
    background: none;
    padding: 0;
    font-size: 13px;
    color: #777;
    white-space: nowrap;
}


/* =====================================
   MOBİLDE DE YAN YANA KALSIN
===================================== */

@media (max-width: 480px) {
    .price-calorie-row {
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
    }

    .product-modal-price .price-amount {
        font-size: 20px;
    }

    .calorie-info {
        font-size: 12px;
    }
}

/* =====================================
   FİYAT + KALORİ SATIRI (GENEL)
===================================== */

.price-calorie-row {
    display: flex;
    align-items: center; /* Dikeyde ortalar */
    justify-content: flex-start; /* Sola yaslar */
    flex-wrap: nowrap; /* Elemanların asla alt satıra geçmemesini sağlar */
    gap: 12px;
    margin-top: 8px;
    width: 100%; /* Satırı tam genişlik yapar */
}

/* =====================================
   KALORİ STİLİ
===================================== */

.calorie-info {
    background: #fff9e6; 
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 13px;
    color: #f39c12; /* Turuncu tonları */
    white-space: nowrap; /* Metnin kendi içinde bölünmesini engeller */
    display: flex;
    align-items: center;
}

/* =====================================
   MOBİL AYARLARI
===================================== */

@media (max-width: 480px) {
    .price-calorie-row {
        flex-direction: row !important; 
        gap: 10px;
    }

    .product-modal-price .price-amount {
        font-size: 18px; 
        font-weight: bold;
    }

    .calorie-info {
        font-size: 11px;
    }
}

.product-detail-modal .product-modal-image {
  aspect-ratio: 4 / 3;     /* veya 3 / 2, 16 / 9 gibi yemek fotoğrafına uygun oranı seç */
  width: 100%;
  min-height: 240px;       /* asla çok küçülmesin */
  max-height: 380px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .product-detail-modal .product-modal-image {
    min-height: 270px;
    max-height: 380px;
  }
}

/* STOKTA OLMAYAN ÜRÜNLERİ NORMAL GÖSTER */
.out-of-stock {
    opacity: 1 !important;
}

.out-of-stock::after {
    display: none !important;
}

.out-of-stock .yemek-price {
    text-decoration: none !important;
}

/* STOK BADGE'İ DAHA BELİRGİN YAP */
.out-of-stock .stock-badge.out {
    animation: pulseRed 1.5s infinite;
}

@keyframes pulseRed {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* DİYET İKONLARI */
.diet-icons {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 5;
}

.diet-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.diet-icon.vegetarian {
    background: rgba(76, 175, 80, 0.9);
    color: white;
}

.diet-icon.vegan {
    background: rgba(139, 195, 74, 0.9);
    color: white;
}

.diet-icon.glutenfree {
    background: rgba(255, 152, 0, 0.9);
    color: white;
}

/* DİYET ETİKETLERİ */
.diet-badges {
    display: flex;
    gap: 5px;
    margin: 5px 0;
    flex-wrap: wrap;
}

.diet-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.diet-badge.vegetarian {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #4CAF50;
}

.diet-badge.vegan {
    background: #F1F8E9;
    color: #558B2F;
    border: 1px solid #8BC34A;
}

.diet-badge.glutenfree {
    background: #FFF3E0;
    color: #EF6C00;
    border: 1px solid #FF9800;
}

/* HAFTA MENÜSÜ İÇİN ÖZEL STİLLER */
.weekly-diet-icons {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 8px;
    z-index: 5;
}

.weekly-diet-badges {
    display: flex;
    gap: 8px;
    margin: 10px 0;
}

.weekly-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    z-index: 5;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* MOBİL UYUMLULUK */
@media (max-width: 768px) {
    .diet-icons {
        top: 8px;
        right: 8px;
    }
    
    .diet-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    
    .diet-badges {
        gap: 3px;
    }
    
    .diet-badge {
        font-size: 9px;
        padding: 2px 6px;
    }
}

/* 4 Ana Kategori Kartları */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 16px;
}

.category-card {
    position: relative;
    border-radius: 20px;
    padding: 30px 16px;
    text-align: center;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.category-card:hover {
    transform: translateY(-5px);
}

.category-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 24px;
    color: white;
}

/* Geri Butonu */
.back-button-container {
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid #eee;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #667eea;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

/* Kategori Header */
.category-header {
    text-align: center;
    padding: 30px 20px;
    border-bottom: 3px solid;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
}

.category-header-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 35px;
    font-size: 32px;
}

.category-header-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #333;
}

.category-header-desc {
    font-size: 14px;
    color: #888;
}

/* Ürün Grid */
.products-section {
    padding: 20px 16px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.product-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.3s ease;
}


.product-card-image {
    position: relative;
    height: 140px;
    overflow: hidden;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #e74c3c;
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    z-index: 2;
}

.product-diet-icons {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 2;
}

.diet-icon {
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.stock-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    z-index: 2;
}

.stock-badge.out {
    background: #e74c3c;
    color: white;
}

.stock-badge.in {
    background: #27ae60;
    color: white;
}

.product-card-info {
    padding: 12px;
}

.product-card-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}

.product-card-desc {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
    line-height: 1.4;
}

.product-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-card-price {
    font-size: 15px;
    font-weight: 700;
    color: #e67e22;
}

.product-card-time {
    font-size: 10px;
    color: #888;
}

.area-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.area-btn {
    padding: 12px;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.area-btn.selected {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: transparent;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state i {
    font-size: 48px;
    color: #ccc;
    margin-bottom: 16px;
}

.btn-primary {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 20px;
    background: #667eea;
    color: white;
    border-radius: 25px;
    text-decoration: none;
}

/* Alt Kategoriler Sayfası */
.subcategories-section {
    padding: 20px 16px;
}

.subcategories-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.subcategory-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    border-radius: 16px;
    padding: 12px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.subcategory-card:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.subcategory-image {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.subcategory-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subcategory-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.subcategory-info {
    flex: 1;
}

.subcategory-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.subcategory-count {
    font-size: 12px;
    color: #888;
}

.subcategory-desc {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    line-height: 1.3;
}

.subcategory-arrow {
    color: #ccc;
    font-size: 14px;
    flex-shrink: 0;
}

/* Alt Kategori Ürün Başlığı */
.subcategory-header {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-bottom: 1px solid #eee;
}

.subcategory-header-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 35px;
    font-size: 32px;
}

.subcategory-header-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #333;
}

.subcategory-header-desc {
    font-size: 14px;
    color: #888;
}

/* Back Button */
.back-button-container {
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid #eee;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #667eea;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

/* ===== Yeni üst navbar (LIDO referansı, latte renginde) — 28.08.2026 ===== */
.qr-topbar {
    position: sticky;
    top: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #a9764f; /* latte rengi */
    color: #fff;
    padding: 14px 16px;
}

.qr-topbar-back,
.qr-topbar-menu {
    background: none;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
}

.qr-topbar-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
}

/* ===== LIDO tarzı tek sayfa menü: arama + sekmeler + bölüm başlıkları — 28.08.2026 ===== */
.qr-menu-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 4px;
}
.qr-menu-search-inp {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid #eee;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
}
.qr-menu-search-inp:focus { border-color: #a9764f; }

.qr-menu-filter-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid #eee;
    background: #fff;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.qr-menu-filter-btn:hover { border-color: #a9764f; color: #a9764f; }

.qr-menu-tabs {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 16px 14px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 100;
    border-bottom: 1px solid #f0f0f0;
}
.qr-menu-tabs::-webkit-scrollbar { display: none; }
.qr-menu-tab {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 20px;
    background: #f5f5f5;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.qr-menu-tab.active { background: #a9764f; color: #fff; }

/* Görselli sekmeler (LIDO'nun içecek menüsündeki gibi) */
.qr-menu-tab.has-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    padding: 0;
    border-radius: 0;
    width: 74px;
}
.qr-menu-tab-thumb {
    width: 74px;
    height: 60px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    border: 2px solid transparent;
    transition: border-color .2s;
}
.qr-menu-tab.has-thumb.active .qr-menu-tab-thumb { border-color: #a9764f; }
.qr-menu-tab.has-thumb .qr-menu-tab-label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
}
.qr-menu-tab.has-thumb.active { background: none; color: inherit; }
.qr-menu-tab.has-thumb.active .qr-menu-tab-label { color: #a9764f; }

.qr-menu-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 24px 16px 10px;
    scroll-margin-top: 90px;
}
.qr-menu-section-empty {
    padding: 20px 16px;
    color: #999;
    font-size: 13px;
}


.qr-menu-type-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    cursor: pointer;
    padding: 0;
}
.qr-menu-type-dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 16px;
    margin-top: 6px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    min-width: 220px;
    z-index: 200;
    overflow: hidden;
}
.qr-menu-type-dropdown-list.active { display: block; }
.qr-menu-type-dropdown-list a {
    display: block;
    padding: 12px 16px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #f5f5f5;
}
.qr-menu-type-dropdown-list a:last-child { border-bottom: none; }
.qr-menu-type-dropdown-list a:hover { background: #faf6f2; }


.category-header {
    text-align: center;
    padding: 30px 20px;
    border-bottom: 3px solid;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
}

.category-header-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 35px;
    font-size: 32px;
}

.category-header-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #333;
}

.category-header-desc {
    font-size: 14px;
    color: #888;
}

/* Products Grid — LIDO tarzı yatay liste kartı (28.08.2026 tasarım dönüşümü) */
.products-section {
    padding: 20px 16px;
}

.products-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 14px;
    overflow: visible;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 12px;
    gap: 12px;
}

.product-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.product-card-image {
    position: relative;
    order: 2;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    border-radius: 10px;
    overflow: hidden;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: #e74c3c;
    color: white;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 2;
}

.product-diet-icons {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 2px;
    z-index: 2;
}

.diet-icon {
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.stock-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 2;
}

.stock-badge.out {
    background: #e74c3c;
    color: white;
}

.stock-badge.in {
    background: #27ae60;
    color: white;
}

.product-card-info {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

.product-card-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #1a1a1a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-desc {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-bottom {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.product-card-price {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.product-card-time {
    font-size: 10px;
    color: #888;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state i {
    font-size: 48px;
    color: #ccc;
    margin-bottom: 16px;
}

.btn-primary {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 20px;
    background: #667eea;
    color: white;
    border-radius: 25px;
    text-decoration: none;
}

/* ===== KESİN ÇÖZÜM (28.08.2026) — dosyada .product-card-image ve .stock-badge
   selector'ları defalarca tekrarlanmış, hangisinin kazandığı tutarsız oluyor.
   Bu blok dosyanın EN SONUNDA olduğu için, tanım sırası ne olursa olsun
   kesin olarak uygulanır. Rozetlerin dev yeşil kutuya dönüşmesinin (görsel
   konteynerinin küçük kalmaması) kalıcı çözümü. ===== */
.product-card-image {
    height: 84px !important;
    width: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    overflow: hidden !important;
}
.product-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.product-card-image .stock-badge,
.product-card-image .product-badge {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100% - 8px) !important;
    padding: 2px 6px !important;
    font-size: 8px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
}

/* Aynı rozetler ürün detay modalına (script.js .outerHTML ile klonluyor) da
   kopyalanıyor — orada konteyner farklı (muhtemelen flex) olduğu için rozet
   tüm yüksekliğe geriliyordu (align-items:stretch). Nerede olursa olsun
   rozetleri normal akıştan tamamen çıkarıp mutlak konumlandırma zorunlu
   kılınıyor, flex/grid stretch etkisini böylece devre dışı bırakıyoruz. */
.stock-badge,
.product-badge {
    position: absolute !important;
    bottom: auto !important;
    left: auto !important;
    align-self: auto !important;
    flex: none !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100% - 8px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
}
.product-modal-image {
    position: relative !important;
}

/* ===== KESİN ÇÖZÜM #2 (28.08.2026) — ürün detay modalındaki rozet, tam olarak
   aynı spesiflikteki (.product-detail-modal .product-modal-image .stock-badge)
   bir kuralla eziliyor, o kural width/height belirtmediği için rozet flex
   konteynerde tüm yüksekliğe geriliyor. Buradaki kural dosyanın en sonunda
   olduğu için (eşit spesiflikte kaynak sırası kazanır) kesin olarak uygulanır. */
.product-detail-modal .product-modal-image .stock-badge,
.product-detail-modal .product-modal-image .product-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 100px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    flex: none !important;
    align-self: auto !important;
}
.product-detail-modal .product-modal-image .product-badge {
    right: auto !important;
    left: 10px !important;
}
.product-detail-modal .product-modal-image {
    position: relative !important;
    display: block !important;
}

/* ===== Yukarı Çık Butonu (paylaşılan — index + kategori sayfaları) — 28.08.2026 ===== */
.qr-back-to-top {
    position: fixed;
    right: 16px;
    bottom: 76px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #a9764f;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.qr-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ===== Filtreleme sheet'i (alttan gelen, "Menü Seç" ile aynı stil) ===== */
.qr-filter-sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 10010;
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease;
}
.qr-filter-sheet-overlay.active { opacity: 1; visibility: visible; }

.qr-filter-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    z-index: 10011;
    transform: translateY(100%);
    transition: transform .3s ease;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -8px 30px rgba(0,0,0,.15);
}
.qr-filter-sheet.active { transform: translateY(0); }

.qr-filter-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.qr-filter-sheet-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: #1a1a1a; }
.qr-filter-clear {
    background: none; border: none; color: #a9764f; font-size: 14px; font-weight: 600;
    text-decoration: underline; cursor: pointer; padding: 0;
}
.qr-filter-sheet-close {
    background: none; border: none; font-size: 22px; color: #888; cursor: pointer; line-height: 1;
}
.qr-filter-sheet-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}
.qr-filter-section-title {
    font-size: 13px; font-weight: 700; color: #888; text-transform: uppercase;
    letter-spacing: .04em; margin: 0 0 12px;
}
.qr-filter-option {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 0; border-bottom: 1px solid #f5f5f5;
    font-size: 15px; color: #1a1a1a; cursor: pointer;
}
.qr-filter-option:last-child { border-bottom: none; }
.qr-filter-option input[type="checkbox"] {
    width: 20px; height: 20px; accent-color: #a9764f; cursor: pointer;
}
.qr-filter-sheet-footer {
    padding: 14px 20px 20px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.qr-filter-apply-btn {
    width: 100%;
    background: #a9764f;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* ===== Boyutlu kategori alt başlıkları (Pizza vb. — Küçük/Orta/Büyük Boy) — 28.08.2026 ===== */
.qr-menu-boyut-title {
    font-size: 14px;
    font-weight: 700;
    color: #a9764f;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 16px 16px 8px;
}

/* ===== ÜRÜN DETAY — LIDO tarzı tam ekran sayfa ===== */
.qr-pd-fullpage {
    position: fixed;
    inset: 0;
    z-index: 10600; /* dil butonu (10010) ve tüm sheet'lerin üzerinde */
    background: #fff;
    display: block !important;
    padding: 0 !important;
    align-items: unset !important;
    justify-content: unset !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.qr-pd-content {
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.qr-pd-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.qr-pd-back-btn, .qr-pd-share-btn {
    position: absolute;
    top: 16px;
    z-index: 10;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.qr-pd-back-btn { left: 16px; }
.qr-pd-share-btn { right: 16px; }

.qr-pd-fullpage .product-modal-image {
    position: relative;
    width: 100%;
    height: 45vh;
    min-height: 260px;
    border-radius: 0;
}
.qr-pd-fullpage .product-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qr-pd-body { padding: 20px 20px 40px; }
.qr-pd-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.qr-pd-name {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.25;
}

/* ===== Ürün kartları artık <a> — varsayılan link stillerini sıfırla (site geneli) ===== */
a.product-card,
a.product-card:visited,
a.product-card:hover,
a.product-card:active {
    text-decoration: none;
    color: inherit;
}
a.product-card * {
    text-decoration: none;
    color: inherit;
}

/* ===== Menü toolbar: arama solda geniş, dropdown ortada, filtre sağda ===== */
.qr-menu-toolbar {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 14px;
}

.qr-menu-search-wrap {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
}
.qr-menu-search-inp {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-sizing: border-box;
}
.qr-menu-search-inp:focus {
    outline: none;
    border-color: #a9764f;
}

.qr-menu-type-dropdown-btn {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 12px;
    background: #faf6f2;
    border: 1px solid #f0e6dc;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}
.qr-menu-type-dropdown-btn:hover {
    border-color: #a9764f;
}

.qr-menu-filter-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #faf6f2;
    border: 1px solid #f0e6dc;
    color: #1a1a1a;
    cursor: pointer;
    box-sizing: border-box;
}
.qr-menu-filter-btn:hover {
    border-color: #a9764f;
    color: #a9764f;
}  

/* ===== WhatsApp talepleri (29.08.2026) — sıra: 2,3,4,6 ===== */

/* 2) Fiyat, hazırlanma süresinin ÜSTÜNDE (dikey sıralama) */
.product-card-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
}

/* 3) Ürün açıklamaları SOLA dayalı (body'deki genel text-align:center'ı eziyoruz) */
.product-card-info,
.product-card-name,
.product-card-desc,
.product-card-price,
.product-card-time {
    text-align: left !important;
}

/* 4) Kategori başlıkları (Breakfast foods vb.) sola dayalı + renkli pill/buton görünümü */
.qr-menu-section-title {
    display: inline-block;
    text-align: left;
    background: #a9764f;
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 15px;
}

/* 6) Görseller büyüsün, ürünler arası boşluk azalsın */
.products-grid {
    gap: 6px !important;
}
.product-card {
    padding: 8px !important;
    gap: 10px !important;
}
.product-card-image {
    width: 110px !important;
    height: 110px !important;
    flex: 0 0 100px !important;
}

/* Ürün kartı görselleri — tam görünsün, kırpılmasın, biraz büyütüldü */
.product-card-image {
    width: 110px !important;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
    flex: 0 0 110px !important;
    background: #f8f8f8 !important;
}
.product-card-image img {
    object-fit: contain !important;
}


@media (max-width: 768px) {
    .products-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 8px !important;
    }
    .products-grid {
        gap: 2px !important;
    }
    
}

.qr-menu-tabs {
    top: 60px !important;
}

@media (max-width: 768px) {
    .products-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .products-grid {
        gap: 2px !important;
    }
}

@media (max-width: 768px) {
    .products-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .products-grid {
        gap: 2px !important;
    }
}

.qr-menu-tabs {
    top: 60px !important;
}

div.qr-menu-toolbar {
    margin-top: 20px !important;
    padding-top: 4px !important;
}

/* ===== WhatsApp talebi ek (29.08.2026) — mobilde ürün listesi:
   enden (yanlardan) boşluk 0, boydan (kartlar arası dikey) boşluk
   neredeyse 0. Dosyanın en sonuna eklendiği için (kaynak sırası
   kazanır) yukarıdaki .products-section / .products-grid
   tanımlarını kesin olarak ezer. ===== */
@media (max-width: 768px) {
    .products-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .products-grid {
        gap: 2px !important;
    }
}

/* ===== WhatsApp talebi ek (29.08.2026) — kaydırırken kategori
   sekmeleri (.qr-menu-tabs) üstteki latte renkli navbar'ın
   (.qr-topbar) ARKASINDA kalıp üst kısmı kesiliyordu — ikisi de
   "top: 0" ile sabitlenmeye çalışıyordu, navbar'ın z-index'i daha
   yüksek olduğu için sekmeleri örtüyordu. Sekmelerin sabitlenme
   noktasını navbar'ın yüksekliği kadar (padding 14px+14px + 32px
   ikon yüksekliği ≈ 60px) aşağı alıyoruz — artık navbar'ın hemen
   altına, tam görünür şekilde yapışıyor. ===== */
.qr-menu-tabs {
    top: 60px !important;
}

/* ===== WhatsApp talebi ek (29.08.2026) — mobilde kategori başlığı
   (.qr-topbar) ile hemen altındaki arama kutusu (.qr-menu-toolbar)
   bitişik duruyordu (toolbar'ın margin-top'u hiç tanımlı değildi).
   Ayrıca sekmelerin (.qr-menu-tabs) altındaki ilk bölüm başlığı
   pill'i (partial içinde satır-içi "margin:24px..." ile geliyor,
   bu yüzden ezmek için !important şart) diğer boşluklara kıyasla
   fazla büyüktü — ikisini de aynı (14px) değere çekip dengeledik. ===== */
.qr-menu-toolbar {
    margin-top: 14px;
}
.qr-menu-section-title {
    margin-top: 14px !important;
}

/* Mobilde toolbar (arama+dropdown+filtre) her zaman TEK satırda kalsın,
   filtre ikonu alt satıra düşmesin */
@media (max-width: 480px) {
    .qr-menu-toolbar {
        flex-wrap: nowrap !important;
    }
    .qr-menu-search-inp {
        min-width: 0;
    }
    .qr-menu-type-dropdown-btn {
        font-size: 12px !important;
        padding: 0 8px !important;
    }
    .qr-menu-filter-btn {
        flex-shrink: 0 !important;
    }
}



/* Kategori bölümüyle (arama/dropdown/filtre toolbar) arasındaki fazla
   boşluğu azalt */
.categories-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hero görselini büyüt — mekan daha net/tanınabilir görünsün */
.qr-hero-bg {
    min-height: 400px !important;
}
@media (max-width: 480px) {
    .qr-hero-bg {
        min-height: 300px !important;
    }
}

.qr-hero-categories {
    grid-template-columns: repeat(6, 1fr) !important;
}
.qr-hero-cat-card--featured {
    grid-column: span 3;
}
.qr-hero-cat-card:not(.qr-hero-cat-card--featured) {
    grid-column: span 2;
}

@media (max-width: 480px) {
    .qr-hero-categories .qr-hero-cat-card:nth-child(1),
    .qr-hero-categories .qr-hero-cat-card:nth-child(2) {
        grid-column: span 3;
    }
    .qr-hero-categories .qr-hero-cat-card:nth-child(n+3) {
        grid-column: span 2;
    }
}

/* Kategori kartı: görsel/ikon artık küçük yuvarlak kutu değil, kartın
   ÜST kısmını TAM genişlikte kaplıyor — isim altında ayrı bir şeritte */
.qr-hero-cat-card {
    padding: 0 0 10px !important;
    overflow: hidden;
}
.qr-hero-cat-icon {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 0 !important;
    font-size: 28px !important;
}
.qr-hero-cat-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.qr-hero-cat-name {
    display: block;
    padding: 8px 6px 0;
}

.product-card-image img {
    object-fit: cover !important;
}

/* ===== WhatsApp talebi ek (29.08.2026) — mobilde ürün listesi:
   enden (yanlardan) boşluk 0, boydan (kartlar arası dikey) boşluk
   neredeyse 0. Dosyanın en sonuna eklendiği için (kaynak sırası
   kazanır) yukarıdaki .products-section / .products-grid
   tanımlarını kesin olarak ezer. ===== */
@media (max-width: 768px) {
    .products-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .products-grid {
        gap: 2px !important;
    }
}

/* ===== WhatsApp talebi ek (29.08.2026) — kaydırırken kategori
   sekmeleri (.qr-menu-tabs) üstteki latte renkli navbar'ın
   (.qr-topbar) ARKASINDA kalıp üst kısmı kesiliyordu — ikisi de
   "top: 0" ile sabitlenmeye çalışıyordu, navbar'ın z-index'i daha
   yüksek olduğu için sekmeleri örtüyordu. Sekmelerin sabitlenme
   noktasını navbar'ın yüksekliği kadar (padding 14px+14px + 32px
   ikon yüksekliği ≈ 60px) aşağı alıyoruz — artık navbar'ın hemen
   altına, tam görünür şekilde yapışıyor. ===== */
.qr-menu-tabs {
    top: 60px !important;
}

/* ===== WhatsApp talebi ek (29.08.2026) — mobilde kategori başlığı
   (.qr-topbar) ile hemen altındaki arama kutusu (.qr-menu-toolbar)
   bitişik duruyordu (toolbar'ın margin-top'u hiç tanımlı değildi).
   Ayrıca sekmelerin (.qr-menu-tabs) altındaki ilk bölüm başlığı
   pill'i (partial içinde satır-içi "margin:24px..." ile geliyor,
   bu yüzden ezmek için !important şart) diğer boşluklara kıyasla
   fazla büyüktü — ikisini de aynı (14px) değere çekip dengeledik. ===== */
.qr-menu-toolbar {
    margin-top: 14px;
}
.qr-menu-section-title {
    margin-top: 14px !important;
}

/* ===== WhatsApp talebi ek (29.08.2026) — yana sıralanan kategori
   sekmelerini (.qr-menu-tabs) daha dikkat çekici/şık hale getirme.
   Aktif sekmede yumuşak vurgu gölgesi + hafif büyüme, görselli
   sekmelerde aktifken küçük bir alt çizgi rozeti, dokunma/hover'da
   hafif kalkma hissi. Mevcut renk paletine (latte #a9764f) sadık
   kalındı, yapı bozulmadı — sadece görsel zenginleştirme. ===== */
.qr-menu-tabs {
    gap: 14px !important;
    padding: 12px 16px 16px !important;
}

/* Görselli sekmeler (kategori resmi olanlar) */
.qr-menu-tab.has-thumb {
    width: 80px !important;
    gap: 8px !important;
}
.qr-menu-tab-thumb {
    width: 80px !important;
    height: 68px !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.10);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.qr-menu-tab.has-thumb:hover .qr-menu-tab-thumb,
.qr-menu-tab.has-thumb:active .qr-menu-tab-thumb {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(169,118,79,.25);
}
.qr-menu-tab.has-thumb.active .qr-menu-tab-thumb {
    box-shadow: 0 6px 18px rgba(169,118,79,.35);
    transform: scale(1.04);
}
.qr-menu-tab.has-thumb .qr-menu-tab-label {
    letter-spacing: .1px;
    transition: color .2s;
}
.qr-menu-tab.has-thumb.active .qr-menu-tab-label {
    font-weight: 700;
    position: relative;
}
.qr-menu-tab.has-thumb.active .qr-menu-tab-label::after {
    content: '';
    display: block;
    width: 18px;
    height: 3px;
    background: #a9764f;
    border-radius: 3px;
    margin: 4px auto 0;
}

/* Görselsiz (düz pill) sekmeler */
.qr-menu-tab:not(.has-thumb) {
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.qr-menu-tab.active:not(.has-thumb) {
    box-shadow: 0 4px 12px rgba(169,118,79,.35);
    transform: translateY(-1px);
}

.product-card-image .product-badge {
    left: 8px !important;
    right: auto !important;
    top: 5px !important;
}

/* ===== WhatsApp talebi ek (29.08.2026) — mobilde ürün listesi:
   enden (yanlardan) boşluk 0, boydan (kartlar arası dikey) boşluk
   neredeyse 0. Dosyanın en sonuna eklendiği için (kaynak sırası
   kazanır) yukarıdaki .products-section / .products-grid
   tanımlarını kesin olarak ezer. ===== */
@media (max-width: 768px) {
    .products-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .products-grid {
        gap: 2px !important;
    }
}

/* ===== WhatsApp talebi ek (29.08.2026) — kaydırırken kategori
   sekmeleri (.qr-menu-tabs) üstteki latte renkli navbar'ın
   (.qr-topbar) ARKASINDA kalıp üst kısmı kesiliyordu — ikisi de
   "top: 0" ile sabitlenmeye çalışıyordu, navbar'ın z-index'i daha
   yüksek olduğu için sekmeleri örtüyordu. Sekmelerin sabitlenme
   noktasını navbar'ın yüksekliği kadar (padding 14px+14px + 32px
   ikon yüksekliği ≈ 60px) aşağı alıyoruz — artık navbar'ın hemen
   altına, tam görünür şekilde yapışıyor. ===== */
.qr-menu-tabs {
    top: 60px !important;
}

/* ===== WhatsApp talebi ek (29.08.2026) — mobilde kategori başlığı
   (.qr-topbar) ile hemen altındaki arama kutusu (.qr-menu-toolbar)
   bitişik duruyordu (toolbar'ın margin-top'u hiç tanımlı değildi).
   Ayrıca sekmelerin (.qr-menu-tabs) altındaki ilk bölüm başlığı
   pill'i (partial içinde satır-içi "margin:24px..." ile geliyor,
   bu yüzden ezmek için !important şart) diğer boşluklara kıyasla
   fazla büyüktü — ikisini de aynı (14px) değere çekip dengeledik. ===== */
.qr-menu-toolbar {
    margin-top: 14px;
}
.qr-menu-section-title {
    margin-top: 14px !important;
}

/* ===== WhatsApp talebi ek (29.08.2026) — yana sıralanan kategori
   sekmelerini (.qr-menu-tabs) daha dikkat çekici/şık hale getirme.
   Aktif sekmede yumuşak vurgu gölgesi + hafif büyüme, görselli
   sekmelerde aktifken küçük bir alt çizgi rozeti, dokunma/hover'da
   hafif kalkma hissi. Mevcut renk paletine (latte #a9764f) sadık
   kalındı, yapı bozulmadı — sadece görsel zenginleştirme. ===== */
.qr-menu-tabs {
    gap: 14px !important;
    padding: 12px 16px 16px !important;
}

/* Görselli sekmeler (kategori resmi olanlar) */
.qr-menu-tab.has-thumb {
    width: 80px !important;
    gap: 8px !important;
}
.qr-menu-tab-thumb {
    width: 80px !important;
    height: 68px !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.10);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.qr-menu-tab.has-thumb:hover .qr-menu-tab-thumb,
.qr-menu-tab.has-thumb:active .qr-menu-tab-thumb {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(169,118,79,.25);
}
.qr-menu-tab.has-thumb.active .qr-menu-tab-thumb {
    box-shadow: 0 6px 18px rgba(169,118,79,.35);
    transform: scale(1.04);
}
.qr-menu-tab.has-thumb .qr-menu-tab-label {
    letter-spacing: .1px;
    transition: color .2s;
}
.qr-menu-tab.has-thumb.active .qr-menu-tab-label {
    font-weight: 700;
    position: relative;
}
.qr-menu-tab.has-thumb.active .qr-menu-tab-label::after {
    content: '';
    display: block;
    width: 18px;
    height: 3px;
    background: #a9764f;
    border-radius: 3px;
    margin: 4px auto 0;
}

/* Görselsiz (düz pill) sekmeler */
.qr-menu-tab:not(.has-thumb) {
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.qr-menu-tab.active:not(.has-thumb) {
    box-shadow: 0 4px 12px rgba(169,118,79,.35);
    transform: translateY(-1px);
}

.qr-pd-image .product-badge {
    position: absolute !important;
    left: 12px !important;
    right: auto !important;
    top: auto !important;
    bottom: 16px !important;
}
.qr-pd-image .stock-badge {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: auto !important;
    bottom: 12px !important;
}

@media (max-width: 768px) {
    .qr-pd-image .stock-badge {
        font-size: 11px !important;
        padding: 5px 10px !important;
        border-radius: 10px !important;
    }
}

/* Ürün DETAY sayfası ve modal görselleri: kırpılmadan tam görünsün (contain) */
.qr-pd-fullpage .product-modal-image img,
.product-detail-modal .product-modal-image img {
    object-fit: contain !important;
    background: #f8f8f8;
}

/* Ürün LİSTESİ kartlarındaki küçük görseller: kartı tamamen doldursun,
   gri boşluk/şerit kalmasın (cover) — küçük alanda letterboxing kötü
   görünüyordu, detay sayfasından kasıtlı olarak farklı davranıyor */
.product-card-image img {
    object-fit: cover !important;
    background: #f8f8f8;
}

        /* ── Alt Menü — orijinal tasarım (eski index.blade.php'den birebir) ──
             style.css'teki eski kırmızı temalı .bottom-nav'ı burada eziyoruz,
             bu blok <head> içinde style.css'ten SONRA geldiği için kazanır. */
        .bottom-nav {
            position: fixed;
            bottom: 0; left: 0; right: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #fff;
            padding: 8px 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
            border-top: 0.5px solid #f0f0f0;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            text-decoration: none;
            color: #999;
            transition: color 0.2s;
            background: none;
            border: none;
            cursor: pointer;
            flex: none;
            margin: 0;
        }
        .nav-item.active { color: #1a1a1a; }
        .nav-item:hover  { color: #1a1a1a; background: none; transform: none; }
        .nav-icon  { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; }
        .nav-label { font-size: 11px; font-weight: 500; letter-spacing: normal; }
        .nav-item.active::after { content: none; }
        
/* ── Ana kategori ikon grid'i (Çalışma Saatleri'nin altında) ── */
.qr-hero-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 16px;
    margin: 20px 0;
}
.qr-hero-cat-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 6px;
    text-decoration: none;
}
.qr-hero-cat-icon {
    width: 100% !important;
    height: 100px !important;
    border-radius: 0 !important;
    font-size: 28px !important;
}
.qr-hero-cat-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.qr-hero-cat-name {
    font-size: 11.5px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    line-height: 1.25;
}
@media (max-width: 480px) {
    .qr-hero-categories { grid-template-columns: repeat(3, 1fr); }
}

#side-menu p,
#side-menu p strong,
#side-menu h3 {
    color: #ffffff !important;
    text-shadow: 0 1px 5px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6) !important;
    font-weight: 700 !important;
}

#side-menu p strong {
    color: #ffd580 !important;
    letter-spacing: 0.02em;
}

#side-menu a[href*="maps.google.com"],
#side-menu a[href*="goo.gl/maps"],
#side-menu a[href*="maps.app.goo.gl"] {
    color: #ffd580;
    font-weight: 700;
    text-decoration: underline;
}
#side-menu a[href*="maps.google.com"]:hover {
    color: #ffe6b3;
}

#side-menu a[href*="maps.google.com"],
#side-menu a[href*="goo.gl/maps"],
#side-menu a[href*="maps.app.goo.gl"],
#side-menu a[href*="share.google"] {
    color: #ffd580;
    font-weight: 700;
    font-size: 15px;
    text-decoration: underline;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
#side-menu a[href*="maps.google.com"]:hover,
#side-menu a[href*="share.google"]:hover {
    color: #ffe6b3;
}

/* Çalışma saatleri — küçültme + yukarı çekme */
.hours-section {
    padding: 12px 16px !important;
    margin: 0 0 8px !important;
}
.hours-title {
    font-size: 15px !important;
    margin-bottom: 10px !important;
    gap: 6px !important;
}
.hours-grid {
    gap: 8px !important;
}
.hour-card {
    padding: 10px !important;
}
.hour-label {
    font-size: 11px !important;
}
.hour-time {
    font-size: 16px !important;
    margin: 2px 0 !important;
}
.hour-note {
    font-size: 10px !important;
}

@media (max-width: 767px) {
    .hours-section {
        padding: 8px 12px !important;
        margin: 8px 0 6px !important;
    }
    .hours-title {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    .mobile-card-item {
        padding: 10px 12px !important;
    }
    .mobile-label {
        font-size: 11px !important;
    }
    .mobile-time {
        font-size: 17px !important;
    }
    .mobile-note {
        font-size: 10px !important;
    }
}

@media (min-width: 768px) {
    .qr-pd-image {
        max-height: 500px;
        overflow: hidden;
    }
}

/* 1) Arama kutusunun üstü */
div.qr-menu-toolbar {
    margin-top: 2px !important;
    padding-top: 0 !important;
}
.app > .qr-hero-categories {
    margin-bottom: 2px !important;
}

/* 2) Kaydırılan kategori sekmelerinin altı */
#qrMenuTabs.qr-menu-tabs {
    margin-top: 5px;
    padding-bottom: 5px !important;
}
#qrMenuSections .qr-menu-section-title {
    margin-top: 8px !important;
}

/* ============================================================
   KESİN BOŞLUK DÜZELTMESİ (02.09.2026) — tüm cihazlarda aynı,
   sıkı aralık. Yüksek özgüllük (html body ...) ile dosyadaki
   önceki çakışan/tekrarlanan kurallar kaynak sırasına
   bakılmaksızın kesin olarak eziliyor.
   ============================================================ */

/* Hero kategori kartları ile hemen altındaki arama kutusu arası */
html body .app > .qr-hero-categories {
    margin: 0 0 6px !important;
}

/* Arama + filtre satırı (toolbar) — üstte/altta fazla boşluk yok */
html body .qr-menu-toolbar {
    margin: 0 !important;
    padding: 0 16px !important;
}
html body .qr-menu-search-wrap {
    padding: 0 !important;
    margin: 0 !important;
}

/* Kaydırılabilir kategori küçük resimleri (Kahvaltılıklar, Tostlar…) */
html body .qr-menu-tabs {
    margin: 8px 0 0 !important;
    padding: 8px 16px !important;
    gap: 10px !important;
}

/* Aktif kategori başlığı ("Kahvaltılıklar" pill'i) hemen altına yapışsın */
html body .qr-menu-section-title {
    margin: 20px 16px 8px !important;
}

/* Ürün listesi, başlığın hemen altında başlasın */
html body .products-section {
    padding-top: 0 !important;
}

/* ── "Haftanın Menüsü" detay popup'ını (.product-detail-modal), ürün detay
   sayfasıyla (urun-detay.blade.php) görsel olarak eşitleme — 07.09.2026 ── */

/* "Fiyatı: " öneki kaldırıldı — ürün detay sayfasında da yok, sade fiyat */
.product-detail-modal .product-modal-price::before {
    content: none !important;
}

/* Fiyat artık kırmızı degrade pill (ürün detay sayfasıyla birebir aynı) */
.product-detail-modal .product-modal-price .price-amount {
    display: inline-block !important;
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
}

/* Görsel: ürün detay sayfasındaki gibi siyah zeminli, kırpılmadan tam görünen */
.product-detail-modal .product-modal-image {
    background: #000 !important;
}
.product-detail-modal .product-modal-image img {
    object-fit: contain !important;
    background: #000 !important;
}

/* İçindekiler / Alerjenler bölümlerine de ürün detay sayfasındaki gibi
   ayraç çizgisi eklendi (Açıklama bölümünde zaten vardı) */
.product-detail-modal .ingredients-section,
.product-detail-modal .allergens-section {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}
/* ── Haftanın Menüsü popup: görsel tam alanı kaplasın (siyah şerit kalkar),
   fiyat ve kalori yer değiştirsin — 07.09.2026 ── */

/* Görsel: contain yerine cover — kenarlarda siyah şerit kalmadan tam dolsun */
.product-detail-modal .product-modal-image img {
    object-fit: cover !important;
}

/* Fiyat ve kalori yer değiştirdi (kalori solda, fiyat sağda) */
.product-detail-modal .price-calorie-row .product-modal-price {
    order: 2;
}
.product-detail-modal .price-calorie-row .calorie-info {
    order: 1;
}
/* ── "Yukarı çık" butonu turuncu — 07.09.2026 ── */
.qr-back-to-top {
    background: #e6540b !important;
}
/* ── Kategori sayfası üst başlık şeridi (qr-topbar) turuncu — 07.09.2026 ── */
.qr-topbar {
    background: #e6540b !important;
}

.product-detail-modal .product-modal-image {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    width: 100% !important;
    overflow: hidden !important;
}

@media (max-width: 767px) {
  .product-detail-modal .product-modal-image {
    aspect-ratio: 3 / 2 !important;
  }
}
.product-detail-modal.modal-overlay {
  align-items: flex-start;
  padding-top: 40px;
}

@media (max-width: 767px) {
  .product-detail-modal.modal-overlay {
    padding-top: 24px;
  }
}
.line-logo {
    position: relative;
}
#menu-toggle {
    position: absolute;
    top: 8px;
    right: 16px;
    left: auto;
}

/* ===== KESİN ÇÖZÜM — ÜRÜN KARTI HER GENİŞLİKTE SABİT (07.09.2026) =====
   Dosyada .product-card-image için 84px/110px/140px gibi çok sayıda
   çakışan tanım var; hangi ekran genişliğinde hangisinin kazandığı
   tutarsız. Bu blok dosyanın kesin en sonunda ve en yüksek özgüllükle
   (html body #qrMenuSections) tüm önceki tanımları ezer. */
html body #qrMenuSections .product-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
}
html body #qrMenuSections .product-card-info {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}
html body #qrMenuSections .product-card-image {
    order: 2 !important;
    flex: 0 0 110px !important;
    width: 110px !important;
    height: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
}
html body #qrMenuSections .product-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Masaüstünde (≥768px) 2 sütunlu grid + biraz daha büyük görsel —
   yine en yüksek özgüllükle, çakışma ihtimali yok */
@media (min-width: 768px) {
    html body #qrMenuSections .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    html body #qrMenuSections .product-card-image {
        flex: 0 0 140px !important;
        width: 140px !important;
        height: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        min-height: 140px !important;
        max-height: 140px !important;
    }
}

.success-message {
    background: linear-gradient(135deg, #27ae60, #219653);
    color: #fff;
    padding: 14px 20px;
    border-radius: 12px;
    margin: 16px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
    animation: fadeInDown 0.4s ease;
}
.success-message i {
    font-size: 18px;
}
.line-logo {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12x 8x 6x !important;
}
.line-logo > a {
    display: flex;
    align-items: center;
}
.qr-header-toggles {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}
.qr-theme-toggle {
    border: none;
    background: #f0f0f0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .line-logo img {
        height: 70px;
    }
    .qr-header-toggles {
        top: 12px;
        right: 12px;
        transform: none;
    }
}

.line-logo {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 40px 4px !important;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    box-sizing: border-box;
}
.line-logo > a {
    display: flex;
    align-items: center;
}
.qr-header-toggles {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
}
.qr-theme-toggle {
    border: none;
    background: #f0f0f0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.line-logo {
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 40px 4px !important;
    box-sizing: border-box !important;
}
.line-logo > a {
    display: flex;
    align-items: center;
}
.qr-header-toggles {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: absolute !important;
    top: 50% !important;
    right: 24px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
}
.qr-header-toggles #menu-toggle {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    margin: 0 !important;
}
.qr-theme-toggle {
    border: none;
    background: #f0f0f0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .line-logo {
        padding: 14x 10px !important;
    }
    .line-logo img {
		position: relative;
		top: 7px;
        height: 70px;
		margin-left: -40px;
    }
    .qr-header-toggles {
        top: 12px !important;
        right: 12px !important;
        transform: none !important;
    }
}
    .feedback-inline-row {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }

    .feedback-input {
        flex: 1;
        min-width: 0;
        padding: 12px 14px;
        border: 2px solid #e8e8e8;
        border-radius: 12px;
        font-size: 14px;
        transition: all 0.3s ease;
        background: #f8f9fa;
        font-family: inherit;
    }

    .feedback-input:focus {
        outline: none;
        border-color: #e74c3c;
        background: white;
        box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1);
    }

html[data-grid="grid2"] body [id^="qrMenuSections"] .products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}
html[data-grid="grid2"] body [id^="qrMenuSections"] .product-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
}
html[data-grid="grid2"] body [id^="qrMenuSections"] .product-card-info {
    order: 2 !important;
    padding: 10px 12px !important;
    text-align: left !important;
}
html[data-grid="grid2"] body [id^="qrMenuSections"] .product-card-image {
    order: 1 !important;
    width: 100% !important;
    height: 120px !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 120px !important;
    max-height: 120px !important;
}
/* ── Kategori kartı genişlik sabitleme (25.09.2026) — dosyada birikmiş
     çakışan .qr-hero-cat-icon / .qr-hero-cat-card tanımlarını ezer.
     Kart, grid sütununu (featured=span3, diğerleri=span2) tam
     doldursun; görselin en/boy oranına göre daralmasın. ── */
.qr-hero-cat-card {
    width: 100% !important;
}
.qr-hero-cat-icon {
    width: 100% !important;
    height: 90px !important;
    aspect-ratio: unset !important;
}
.qr-hero-cat-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
/* İlk 2 kart her zaman büyük */
.qr-hero-categories > .qr-hero-cat-card:nth-child(-n+2) {
    grid-column: span 3 !important;
}
/* 3. karttan sonrası küçük */
.qr-hero-categories > .qr-hero-cat-card:nth-child(n+3) {
    grid-column: span 2 !important;
}

/* 1) Sekme barı scroll'da üstte sabit kalsın */
html body .qr-menu-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background: var(--bg) !important; /* altındaki içerik saydam görünmesin */
}

/* 2) Aktif (resimli) sekmenin yazısı daha belirgin olsun */
html body .qr-menu-tab.has-thumb.active .qr-menu-tab-label {
    color: #fff !important;
    background: var(--accent) !important;
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}
/* Ürün grid'i: eşit sütun (tüm ekranlar) */
html[data-grid="grid2"] body [id^="qrMenuSections"] .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html[data-grid="grid2"] body [id^="qrMenuSections"] .product-card {
    min-width: 0 !important;
}
html[data-grid="grid2"] body [id^="qrMenuSections"] .product-card-image img {
    width: 100% !important;
    max-width: 100% !important;
}

/* Tam genişlik zorlaması: yalnız mobil */
@media (max-width: 767px) {
    html body .app,
    html body #qrMenuSections,
    html body .products-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    html[data-grid="grid2"] body [id^="qrMenuSections"] .products-grid {
        width: 100% !important;
    }
}
/* Mobil logo: solda + biraz küçük (02.10.2026) */
@media (max-width: 768px) {
    html body .line-logo {
        justify-content: flex-start !important;
        padding-left: 16px !important;
    }
    html body .line-logo::before {
        display: none !important;
    }
    html body .line-logo:not(.line-logo--yigin) img,
    html body .line-logo img {
        position: static !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        height: calc(var(--qr-logo-size) * 0.6) !important;
    }
}
/* Ana kategori başlığı (Yiyecekler vb.) arama alanı üstünde gösterilmez — 05.10.2026 */
section[id^="ana-"] > h2,
section[id^="ana-"] > h2::before,
section[id^="ana-"] > h2::after {
    display: none !important;
}


/* Ana kategori satiri (arama kutusunun alti) - yama-76, 16.10.2026. Yalnizca Standart. */
.qr-ana-satir { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 10px; margin: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.qr-ana-satir::-webkit-scrollbar { display: none; }
.qr-ana-chip { flex: 0 0 auto; padding: 8px 16px; border-radius: 20px; border: 1px solid var(--accent); color: var(--accent); background: transparent; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.qr-ana-chip.is-active { background: var(--accent); color: #fff; }

/* yama-77: ana kategori satiri surukle-kaydir */
.qr-ana-satir { cursor: grab; scroll-snap-type: x proximity; }
.qr-ana-satir.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.qr-ana-chip { scroll-snap-align: start; -webkit-user-drag: none; user-select: none; }

/* yama-81 (16.10.2026): ana kategori kartlari hepsi ayni genislikte (2 sutun) */
html body .qr-hero-categories > .qr-hero-cat-card,
html body .qr-hero-categories > .qr-hero-cat-card:nth-child(n),
html body .qr-hero-categories > .qr-hero-cat-card:not(.qr-hero-cat-card--featured) {
    grid-column: span 3 !important;
}

/* yama-82: ana kategori sekmeleri - ayni anda tek ana bolum gorunur (yalnizca Standart, JS aciksa) */
html.qr-ana-sekme section[id^="ana-"] { display: none !important; }
html.qr-ana-sekme section[id^="ana-"].qr-ana-acik { display: block !important; }

/* FILTRE-ORTALA-1020 */
/* Filtreleme paneli: telefonda aynı, masaüstünde Favorilerim alanı gibi menü genişliğinde ortalı */
.qr-filter-sheet {
    left: 50%; right: auto;
    width: 100%; max-width: 760px;
    transform: translate(-50%, 100%);
}
.qr-filter-sheet.active { transform: translate(-50%, 0); }
/* yama-140: Isletme Bilgileri cekmecesi - opak zemin, text-shadow halo kaldirildi (26.10.2026) */
html body #side-menu {
    background: rgba(24, 24, 28, 0.97) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #fff !important;
}
html body #side-menu p,
html body #side-menu p strong,
html body #side-menu h3,
html body #side-menu a[href^="tel:"],
html body #side-menu a[href*="maps"],
html body #side-menu a[href*="share.google"] {
    text-shadow: none !important;
}
html body #side-menu .menu-content {
    background: rgba(255, 255, 255, 0.06) !important;
}
html body #side-menu #close-menu {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 34px;
    height: 34px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: none !important;
}