/* ============================================================ SÜTÇÜOĞULLARI — TASARIM SİSTEMİ (Faz 2) app.css'ten SONRA yüklenir; mevcut sınıfları ezer, yapısını bozmaz. Amaç: jenerik SaaS paletini (siyah buton + kırmızı/yeşil + gri-mavi) odun ateşinde pide/lahmacun kimliğine taşımak. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap'); :root{ /* Marka rengi — kor turuncusu (odun ateşi). home.php'nin kendi --pm-accent'iyle ve footer'ın mevcut hover rengiyle birebir aynı ton: site zaten bu turuncuya doğru gidiyordu, tek tona sabitliyoruz. */ --brand: #e85d1a; --brand-dark: #c94e15; --brand-ink: #ffffff; /* marka rengi üzerindeki yazı */ --brand-tint: #fbe7da; /* açık zemin üstünde marka rengi kullanan yüzeyler */ /* Başlık yazı tipi */ --font-display: 'Fraunces', 'Nunito', system-ui, serif; } /* ---- Tipografi: başlıklara karakter kat ---- */ h1, h2, h3, .brand-text, .pfoot-brand, .drawer-hd b { font-family: var(--font-display); letter-spacing: -0.01em; } /* ---- Erişilebilirlik: görsel olarak gizli ama Google/AI tarafından okunur ---- Ana sayfanın hero slider'ı dönen ürün başlıkları kullandığı için tek/gerçek H1'i buraya, ekranda kaplamadan ekliyoruz (standart, arama motorlarının kabul ettiği bir teknik — içerik gizlenmiyor, sadece görsel yerleşimi yok). */ .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---- Marka rengi: birincil eylemler ---- */ .btn-primary{ background: var(--brand) !important; } .btn-primary:hover{ background: var(--brand-dark) !important; } /* Sepet drawer + sayfa CTA'ları da .btn-primary'yi miras alır (cart_drawer.php) */ /* ---- Üst menü: aktif/hover durumu marka renginde ---- */ .top-nav a:hover, .top-nav a.active{ color: var(--brand); } .top-nav a::after, .top-nav a:after{ background: var(--brand) !important; } /* ---- Üst menü tipografisi: referans sitedeki gibi büyük harf + geniş harf aralığı ---- */ .top-nav a{ text-transform: uppercase; font-weight: 700 !important; font-size: 13px !important; letter-spacing: .7px !important; } /* ============================================================ BİLGİ ÇUBUĞU (dark info-bar) — telefon / saat / adres + sosyal ikonlar. shared-topbar'ın üstünde, sadece masaüstünde görünür; aşağı kaydırınca kapanır (bkz. ui_shared.js → hdr-condensed). ============================================================ */ .info-topbar{ position: fixed; top: 0; left: 0; right: 0; z-index: 1101; height: var(--info-bar-h, 38px); overflow: hidden; background: #1b1b1b; color: rgba(255,255,255,.86); transition: height .25s ease, opacity .2s ease; } html.hdr-condensed .info-topbar{ height: 0; opacity: 0; } .info-topbar-inner{ max-width: 1240px; margin: 0 auto; height: var(--info-bar-h, 38px); padding: 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 12.5px; } .info-topbar-left{ display: flex; align-items: center; gap: 22px; min-width: 0; } .info-item{ display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.86); text-decoration: none; white-space: nowrap; font-weight: 500; } .info-item svg{ width: 14px; height: 14px; flex-shrink: 0; opacity: .85; } a.info-item:hover{ color: var(--brand); } a.info-item:hover svg{ opacity: 1; color: var(--brand); } .info-item-addr{ overflow: hidden; text-overflow: ellipsis; max-width: 320px; } @media (max-width: 1180px){ .info-item-addr{ display: none; } } @media (max-width: 940px){ .info-item-hours{ display: none; } } .info-topbar-right{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .info-social{ width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: rgba(255,255,255,.86); transition: background .15s, color .15s; } .info-social svg{ width: 13px; height: 13px; } .info-social:hover{ background: var(--brand); color: #fff; } @media (max-width: 768px){ .info-topbar{ display: none !important; } } /* ---- Üst CTA: "Sipariş Ver" pill butonu (referans sitedeki "Book Table" karşılığı) ---- */ .only-desktop{ display: inline-flex; } .top-cta{ display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; margin-right: 4px; border-radius: 999px; background: var(--brand); color: #fff !important; font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; text-decoration: none !important; white-space: nowrap; box-shadow: 0 8px 18px rgba(232,93,26,.28); transition: background .15s ease, transform .15s ease, box-shadow .15s ease; } .top-cta:hover{ background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(232,93,26,.35); } @media (max-width: 900px){ .only-desktop{ display: none !important; } } .icon-btn:hover{ background: var(--brand-tint) !important; color: var(--brand-dark); } /* ---- Alt mobil nav: seçili sekme marka renginde (jenerik kırmızı yerine) ---- */ .bn-item.active{ color: var(--brand) !important; } .bn-item.active .bn-ic{ background: var(--brand-tint) !important; } /* ---- Alt mobil nav: KONTRAST düzeltmesi — assets/app.css'te eski/koyu (lacivert, rgba(17,24,39,.85)) bir .bottomnav-inner arkaplanı hâlâ tanımlı; ui_shared.php'nin kendi (açık/beyaz) arkaplan tanımı .bottomnav-inner için yok, o yüzden eski koyu tanım kazanıyordu — gri ikon/yazı koyu lacivert üstünde belirsiz görünüyordu. Açık/net kontrastlı hale sabitliyoruz. */ .bottomnav-inner{ background: rgba(255,255,255,.97) !important; box-shadow: none !important; } .bn-item{ color: #4b5563 !important; } .bn-item:not(.active) svg{ opacity: .92; } /* ---- Drawer linkleri: hover'da marka rengi ---- */ .drawer-link:hover{ border-color: var(--brand); } .drawer-link:hover:after{ color: var(--brand); opacity:.7; } /* ============================================================ MOBİL ÜST BAR — referans sitenin (demo.acmethemes.com) mobil scroll davranışı birebir incelenip uygulandı: restaurant-recipe-custom.js'teki stickyMenu() fonksiyonu scrollTop > 250'de navbara ".at-sticky" class'ı ekliyor (position:fixed + beyaz zemin + gölge + "navigationFlipIn" adlı 0.5s'lik yukarıdan-aşağı-süzülme animasyonu), 250'nin altına inince class anında (animasyonsuz) kaldırılıyor. Bizim header'ımız (sayfa genelindeki --page-pt/padding mimarisi yüzünden) her zaman position:fixed kalmak zorunda, o yüzden "fixed olma" kısmını değil GÖRSEL sonucu birebir kopyaladık: eşiğin altında sade/gölgesiz bir bar, eşiği (250px) geçince ui_shared.js'in eklediği html.mhdr-solid class'ıyla ağır gölge + aynı süzülme (flip-in) animasyonu, eşiğin altına dönünce ise animasyonsuz anında eski sade haline dönüyor — referanstaki hissin aynısı. Bilgi çubuğu/CTA mobilde yer kısıtından gizli kalmaya devam ediyor (ayrı karar, bu değişiklik sadece scroll tepkisiyle ilgili). Drawer linklerine de üst menüyle aynı büyük harf/harf aralığı tipografisi veriliyor. */ @media (max-width: 768px){ .shared-topbar{ --hdr-a: .97 !important; box-shadow: 0 2px 8px rgba(15,23,42,.04); border-bottom-color: rgba(0,0,0,.06) !important; } html.mhdr-solid .shared-topbar{ box-shadow: 0 14px 30px rgba(15,23,42,.15) !important; border-bottom-color: rgba(0,0,0,.09) !important; animation: mhdrFlipIn .4s cubic-bezier(.16,.8,.24,1); } @keyframes mhdrFlipIn{ from { transform: translateY(-18px); } to { transform: translateY(0); } } .drawer-link{ text-transform: uppercase; font-weight: 800 !important; /* ui_shared.php'nin kendi