/* ============================================================
   PANEL RENK BİRLEŞTİRME (11.09.2026) — TEK RENK SİSTEMİ
   business.theme_color kaldırıldı, marka rengi artık tamamen
   Görünüm Ayarları'ndaki "Buton Arka Planı"ndan (--accent, moda
   göre otomatik değişir) geliyor. qr-menu.css içinde marka rengini
   temsil eden ama HARDCODED hex ile yazılmış (var() kullanmayan)
   yerleri burada --accent'e bağlıyoruz. Bu dosya qr-menu.css ve
   dark-mode.css'ten SONRA yüklendiği için (kaynak sırası + gerekli
   yerlerde !important) kesin olarak uygulanır.

   BİLİNÇLİ OLARAK DOKUNULMAYANLAR (marka rengi değil, durum/anlam
   rengi taşıyorlar — değişmemeli): .stock-badge.in/.out (stokta
   var/yok yeşil/kırmızı), diyet ikonları/etiketleri, kalori rozeti,
   hour-open/hour-close (açık=yeşil, kapalı=kırmızı sabit anlam).
   ============================================================ */

/* Üst navbar (kategori/ürün detay sayfalarındaki latte/turuncu şerit) */
.qr-topbar {
    background: var(--accent) !important;
}

/* Aktif kategori sekmesi (görselsiz pill — "Kahvaltılıklar" vb.) */
html body .qr-menu-tab.active:not(.has-thumb) {
    background: var(--accent) !important;
    color: var(--accent-contrast, #fff) !important;
}

/* Görselli aktif sekmenin çerçevesi + alt çizgi rozeti */
.qr-menu-tab.has-thumb.active .qr-menu-tab-thumb {
    border-color: var(--accent) !important;
}
.qr-menu-tab.has-thumb.active .qr-menu-tab-label::after {
    background: var(--accent) !important;
}
.qr-menu-tab.has-thumb:hover .qr-menu-tab-thumb,
.qr-menu-tab.has-thumb:active .qr-menu-tab-thumb {
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), .25) !important;
}
.qr-menu-tab.has-thumb.active .qr-menu-tab-thumb {
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), .35) !important;
}
.qr-menu-tab.active:not(.has-thumb) {
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), .35) !important;
}

/* Arama kutusu odaklanma rengi */
.qr-menu-search-inp:focus {
    border-color: var(--accent) !important;
}

/* Filtre butonu hover */
.qr-menu-filter-btn:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* Bölüm başlığı pill'i ("Kahvaltılıklar" gibi aktif kategori başlığı) */
.qr-menu-section-title {
    background: var(--accent) !important;
    color: var(--accent-contrast, #fff) !important;
}

/* Geri Bildirim kartı — demo ile birebir: sağa yaslı dar buton, beyaz kart.
   qr-menu.css'te aynı seçici birden çok yerde tanımlı olduğu için (dosyanın
   önceki bölümlerinden kalma çakışan kurallar), burada dosyanın EN SONUNDA
   olarak kesin olarak sabitliyoruz. */
.feedback-card {
    background: #fff !important;
}
.feedback-submit {
    display: block !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    float: none !important;
}

/* Footer'ın sabit #f8f9fa arka planı var(--bg)'den bağımsızdı — "Sayfa Arka
   Planı" değiştirilince footer eski renkte kalıp ayrı bir kutu gibi
   görünüyordu. Artık her zaman body ile aynı tonda. */
.footer {
    background: var(--bg) !important;
}

/* Filtre uygula, geri bildirim gönder, yukarı çık, wifi kopyala —
   zaten dark-mode.css'in en altında --qr-button-bg'ye bağlıydı;
   --accent artık aynı değere eşit olduğu için ekstra bir şey
   yapmaya gerek yok, sadece dokümantasyon amaçlı burada anıldı. */

/* Beyaz/kart zemin üzerindeki DÜZ İÇERİK metinleri (ürün adı, bölüm
   başlığı gibi) — fotoğraf/gradient üzerine bindirilmiş beyaz yazılar
   (Haftanın Menüsü, restoran kartı, kategori kartı overlay'leri)
   BİLEREK DIŞARIDA bırakıldı, onlar her zaman beyaz kalmalı. */
.yemek-name,
.product-card-name,
.category-list-item h3,
.hours-title,
.feedback-title,
.qr-pd-name,
.category-header-title,
.subcategory-header-title,
.subcategory-name {
    color: var(--text) !important;
}

/* ============================================================
   EK (14.09.2026) — qr-menu.css içinde, tema sistemi (--accent,
   header partial'da her işletmenin kendi renginden hesaplanıyor)
   kurulduktan SONRA eklenmiş bazı bloklar (07.09.2026 tarihli
   "Yukarı Çık butonu turuncu", "qr-topbar turuncu" gibi) hardcoded
   #e6540b/#a9764f değerlerini !important ile zorluyordu — bu da
   --accent sistemini tamamen eziyordu. Sonuç: işletme panelden
   farklı bir marka rengi seçse bile üst navbar, yukarı çık butonu,
   aktif kategori sekmesi, menü arama butonu, vitrin rozetleri hep
   sabit turuncu kalıyordu. Bu dosya qr-menu.css'ten SONRA yüklendiği
   için buradaki kurallar (eşit özgüllükte, kaynak sırası kazanır)
   kesin olarak üstün gelir. "Tükendi"/"Stokta" gibi DURUM renkleri
   bilerek dışarıda bırakıldı — onlar marka rengi değil, anlamsal
   durum rengi.
   ============================================================ */

html body .qr-topbar {
    background: var(--accent) !important;
}
html body .qr-back-to-top {
    background: var(--accent) !important;
}
html body .qr-menu-tab.active:not(.has-thumb) {
    background: var(--accent) !important;
    color: var(--accent-contrast, #fff) !important;
}
html body .qr-menu-tab.has-thumb.active .qr-menu-tab-thumb {
    border-color: var(--accent) !important;
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), .35) !important;
}
html body .qr-menu-tab.has-thumb:hover .qr-menu-tab-thumb,
html body .qr-menu-tab.has-thumb:active .qr-menu-tab-thumb {
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), .25) !important;
}
html body .qr-menu-tab.has-thumb.active .qr-menu-tab-label::after {
    background: var(--accent) !important;
}
html body .qr-menu-tab.active:not(.has-thumb) {
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), .35) !important;
}
html body .qr-menu-boyut-title {
    color: var(--accent) !important;
}
html body .qr-filter-clear {
    color: var(--accent) !important;
}
html body .qr-filter-apply-btn {
    background: var(--accent) !important;
}
html body .qr-menu-search-inp:focus {
    border-color: var(--accent) !important;
}
html body .qr-menu-filter-btn:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
html body .qr-menu-search-btn {
    background: var(--accent) !important;
}
html body .qr-menu-search-btn:active {
    background: var(--accent-dark, var(--accent)) !important;
}
html body .qr-menu-tab-icon {
    color: var(--accent) !important;
}
html body .qr-boyut-chip {
    color: var(--accent) !important;
}
/* Bu başlık qr-menu-listing.blade.php'de inline style="background:#e6540b"
   ile geliyor — inline stil normal şartlarda dışarıdan ezilemez, ama
   !important'lı bir stylesheet kuralı (bu) her zaman kazanır. */
html body .qr-menu-section-title {
    background: var(--accent) !important;
    color: var(--accent-contrast, #fff) !important;
}

/* Öne Çıkanlar (vitrin) — qr-vitrin-slider.blade.php'nin @once bloğunda
   hardcoded kalmış olabilecek marka rengi kullanımları */
html body .qr-vitrin-title i {
    color: var(--accent) !important;
}
html body .qr-vitrin-badge {
    background: var(--accent) !important;
}
html body .qr-vitrin-card-price {
    color: var(--accent) !important;
}

/* ============================================================
   EK (14.09.2026) — ARAMA/FİLTRE BUG'I: qr-menu.css'in sonundaki
   "ÜRÜN KARTI HER GENİŞLİKTE SABİT" bloğu, .product-card'a
   KOŞULSUZ display:flex !important dayatıyordu. Bu da arama/filtre
   JS'inin (qr-menu-listing.blade.php) uyguladığı
   card.style.display = 'none'i tamamen etkisiz bırakıyordu — kart
   DOM'da "gizli" işaretleniyor ama CSS ısrarla flex ile gösteriyordu.
   Gizli kartları DOĞRUDAN hedefleyip display:none'ı zorluyoruz —
   bu dosya qr-menu.css'ten sonra yüklendiği için (eşit özgüllükte
   kaynak sırası kazanır) kesin olarak uygulanır. */
html body #qrMenuSections .product-card[style*="display: none"] {
    display: none !important;
}

/* ============================================================
   EK (16.09.2026) — TEMA VURGUSUNU GÜÇLENDİRME

   qr-menu.css içinde hâlâ hardcoded kalmış "marka rengi"
   kullanımları var(--accent)'e bağlanıyor:
     - Kırmızı aile: #e74c3c / #c0392b / rgba(231,76,60,...)
     - Mor aile: #667eea / #764ba2 / #3b82f6 / #2563eb

   Amaç: panelden bir tema seçildiğinde site GERÇEKTEN o rengin
   izlenimini versin — fiyat etiketleri, rozetler, filtre/görünüm
   kontrolleri, hazırlık süresi rozeti dahil olmak üzere.

   BİLİNÇLİ OLARAK DOKUNULMAYANLAR (marka rengi değil, durum/anlam
   rengi taşıyorlar): .stock-badge.in/.out, diyet ikon/etiketleri,
   .hour-open/.hour-close (açık=yeşil, kapalı=kırmızı sabit anlam),
   .calorie-info (besin bilgisi, sarı/turuncu — marka değil).
   ============================================================ */

/* ── Fiyat etiketleri (ürün kartı, liste görünümü, slider) ── */
html body .yemek-price,
html body .product-card-price,
html body .slider-item .yemek-price {
    color: var(--accent) !important;
}

/* Ürün detay modalı / tam sayfa — fiyat pill'i */
html body .product-modal-price .price-amount,
html body .product-detail-modal .product-modal-price .price-amount {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, black)) !important;
}

/* Haftanın Menüsü fiyat rozeti */
html body .weekly-price {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, black)) !important;
    box-shadow: 0 8px 25px rgba(var(--accent-rgb), .4) !important;
}

/* Bölüm başlığı ikonları (Saatler/Kategoriler/Haftanın Menüsü/Geri Bildirim) */
html body .hours-title i,
html body .categories-title i,
html body .weekly-title i,
html body .feedback-title i {
    color: var(--accent) !important;
}
html body .hour-card {
    border-left-color: var(--accent) !important;
}

/* Geri bildirim formu — odak rengi + gönder butonu */
html body .feedback-textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .1) !important;
}
html body .feedback-submit {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, black)) !important;
    box-shadow: 0 12px 30px rgba(var(--accent-rgb), .3) !important;
}

/* Eski kategori kartı hover overlay'i (hâlâ kullanılıyorsa zararsız) */
html body .category-card:hover::before {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .7), color-mix(in srgb, var(--accent) 70%, black)) !important;
}
html body .slider-item:hover {
    border-color: var(--accent) !important;
}

/* ── Mor aile — görünüm/filtre kontrolleri, hazırlık süresi
   rozeti, "YENİ" ürün etiketi, ürün sayacı ── */
html body .product-count-badge {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, black)) !important;
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), .4) !important;
}
html body .view-btn.active {
    background: var(--accent) !important;
    color: #fff !important;
}
html body .sort-select:hover,
html body .stock-filter:hover,
html body .sort-select:focus,
html body .stock-filter:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1) !important;
}
html body .filter-btn,
html body .apply-filter {
    background: var(--accent) !important;
}
html body .filter-btn:hover {
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), .3) !important;
}
html body .product-count {
    background: rgba(var(--accent-rgb), .1) !important;
    color: var(--accent) !important;
}
html body .product-count i {
    color: var(--accent) !important;
}
html body .preparation-badge i,
html body .mobile-preparation i,
html body .product-detail-preparation i {
    color: var(--accent) !important;
}
html body .product-detail-preparation {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .08), rgba(var(--accent-rgb), .04)) !important;
    border-left-color: var(--accent) !important;
}
html body .yemekler-grid[data-view="grid"] .product-badge,
html body .yemekler-grid[data-view="list"] .list-product-badge,
html body .product-detail-modal .product-modal-image .product-badge {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, black)) !important;
}

/* ============================================================
   EK (16.09.2026) — DUVAR KAĞIDI DESENİ AKTİVASYONU + GENEL
   ARKA PLAN/METİN RENGİ (tek, konsolide blok — daha önce dosyanın
   ortasında bununla neredeyse aynı ama background-image içermeyen
   ayrı bir "html body {...}" bloğu vardı, o kaldırıldı; hepsi
   burada tek yerde toplandı). public-menu.blade.php'nin ürettiği
   --wallpaper / --wallpaper-size değişkenlerini fiilen kullanan
   TEK yer burasıdır — bu kural olmadan desen hiç görünmez. */
html body {
    background-color: var(--bg) !important;
    background-image: var(--wallpaper) !important;
    background-repeat: repeat !important;
    background-size: var(--wallpaper-size, 150px) var(--wallpaper-size, 150px) !important;
    background-attachment: fixed !important;
    color: var(--text) !important;
}
html body .qr-menu-tab.has-thumb.active .qr-menu-tab-label {
    color: var(--accent-contrast, #fff) !important;
    background: var(--accent) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    max-width: none !important;
    overflow: visible !important;
    margin-top: 4px !important;
    transition: none !important;
}
html body .qr-menu-tab.has-thumb {
    overflow: visible !important;
}
html body .qr-menu-tabs {
    position: sticky !important;
    z-index: 50 !important;
    background: var(--bg) !important;
}
/* EK (28.09.2026) — html[data-tabs="cizgi"] attribute selector'lı kural,
   attribute + class specificity'si daha yüksek olduğu için accent-contrast'ı
   eziyordu. Aynı/üstün özgüllükte eşleyip kazanmasını sağlıyoruz. */
html[data-tabs] .qr-menu-tab.has-thumb.active .qr-menu-tab-label {
    color: var(--accent-contrast, #fff) !important;
}
/* EK (28.09.2026) — html[data-tabs="cizgi"] attribute selector'lı kural
   eşit özgüllükte olduğu için sıradan kazanıyordu. Attribute'u iki kez
   yazarak (geçerli CSS, zararsız tekrar) özgüllüğü kesin olarak üstüne
   çıkarıyoruz. */
html[data-tabs][data-tabs] .qr-menu-tab.has-thumb.active .qr-menu-tab-label {
    color: var(--accent-contrast, #fff) !important;
}
html body .qr-menu-tab-label {
    transition: none !important;
}