@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root { /* Renk paleti — modern, koyu tema */ --bg: #0b0d12; --bg-elevated: #12151c; --card: #171b23; --card-hover: #1d2230; --border: #262b36; --accent: #f5a524; --accent2: #d9662a; /* Butonların arka plan rengi — Genel Ayarlar > Görünüm'den özel bir buton rengi seçilmemişse varsayılan olarak ana renklerin (--accent/--accent2) AYNISINI takip eder (bkz. js/branding.js applyButtonColor()); özel bir renk seçilirse JS bu ikisini AYNI hex değerine ayarlayıp butonları düz renge çevirir. */ --btn-color: var(--accent); --btn-color2: var(--accent2); /* Sistem genelinde arka plan fotoğrafı — Genel Ayarlar > Görünüm'den yüklenir (bkz. js/branding.js applyBackgroundImage()). Varsayılan 'none' — hiçbir görsel yüklenmemişse düz koyu tema arka planı (--bg) aynen kalır, aşağıdaki body kuralı hiçbir şeyi değiştirmez. */ --bg-image: none; --teal: #2dd4bf; --text: #f5f6f8; --text-muted: #9099ac; --danger: #f2495c; --success: #22c55e; /* KULLANICI İSTEĞİ: kasa ekranındaki (#posScreen) kategori butonlarının renklendirmesi masa/garson ekranındaki (#orderScreen .category-tab) ile AYNI olsun — seçili yeşil, seçili olmayan turuncu/sarı gradyan. Garson tarafı bu yeşili SADECE #orderScreen kapsamında tanımlı --gl-green (garson.css) olarak kullanıyor; kasa ekranı #orderScreen içine girmediği için aynı tonu kök (:root) seviyesinde de tanımlıyoruz — TEK kaynak, iki yerden erişilebilir (bkz. aşağıdaki .category-tab.active). */ --accent-green: #1f7a34; /* Ölçek */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --shadow-sm: 0 2px 8px rgba(0,0,0,.25); --shadow-md: 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 16px 48px rgba(0,0,0,.45); } /* Genel Ayarlar > Köşe Stili: "Keskin" seçilirse js/branding.js öğesine bu class'ı ekler — tüm var(--radius-*)/var(--shadow-*) kullanan elemanlar otomatik olarak köşesiz/gölgesiz olur (yeni bir seçici eklemeye gerek yok). */ html.theme-sharp { --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } /* Genel Ayarlar > Görünüm: Koyu/Açık Mod anahtarı "Aydınlık" seçilirse js/branding.js öğesine bu class'ı ekler (bkz. applyThemeMode()). Aynı --bg/--card/--text vb. değişken mekanizması (theme-sharp yukarıdaki gibi) kullanılıyor — paralel bir tema sistemi DEĞİL. Not: garson.html'in sipariş ekranı kendi sabit --gl-* değişkenleriyle çalıştığı için bu moddan etkilenmez (bilerek); fiş/adisyon yazdırma yüzeyleri de yazıcı çıktısı için bilerek siyah-beyaz sabit kalır. */ html.theme-light { --bg: #f4f5f7; --bg-elevated: #ffffff; --card: #ffffff; --card-hover: #eef0f3; --border: #dde1e7; --text: #14161a; --text-muted: #5b6270; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { margin: 0; font-family: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; letter-spacing: -0.01em; } /* Genel Ayarlar > Görünüm'den bir arka plan fotoğrafı yüklenmişse (bkz. js/branding.js applyBackgroundImage()) öğesine 'has-bg-image' class'ı eklenir ve body'nin arkasına, okunabilirlik için koyu bir yarı-saydam katman (scrim) ile birlikte bu fotoğraf uygulanır. Görsel yoksa bu kural hiç devreye girmez, body yukarıdaki düz --bg rengini kullanmaya devam eder. */ html.has-bg-image body { background-image: linear-gradient(rgba(11,13,18,.78), rgba(11,13,18,.78)), var(--bg-image); background-size: cover; background-position: center; background-attachment: fixed; background-color: var(--bg); } .hidden { display: none !important; } .screen { height: 100vh; width: 100vw; } /* GENEL FORM ETİKETİ — VARSAYILAN DAVRANIŞ Tarayıcının varsayılanı