/* ============================================================ ASME GOLD - Tasarim Token'lari Palet logo.png'den cikarildi: opak piksellerin %100'u altin, hue 33-44, medyan 40. Tum eslesmeler WCAG 2.2 AA'ya gore dogrulandi; oranlar yorumlarda. ============================================================ */ :root { /* --- Altin olcegi (hue 40) --- */ --gold-50: #fbf8f4; --gold-100: #f6f0e5; --gold-200: #eddfc5; --gold-300: #e2c998; --gold-400: #d8b164; --gold-500: #d09e39; --gold-600: #b08227; --gold-700: #8c6921; --gold-800: #6b521e; --gold-900: #4f3e1c; --gold-950: #302612; /* --- Sicak notrler (hue 35) --- */ --ink-0: #ffffff; --ink-50: #fbfaf8; --ink-100: #f7f5f2; --ink-200: #ede9e3; --ink-300: #dbd5cd; --ink-400: #aea598; --ink-500: #877c6e; --ink-600: #6b6357; --ink-700: #50493f; --ink-800: #37322a; --ink-900: #231f1a; --ink-950: #181511; /* --- Mavi (patron, 2026-10-10) --- Rima'nin menu cubugu ve fiyat tablosu basligindaki mavi #2E458F (ekran goruntusunden orneklendi). ACIK temada eskiden koyu fume (ink-900) olan ZEMINLER artik bu mavi: ust bant, ana menu ve mobil menu paneli, fiyat tablosu basligi, ana sayfa kategori kartlari, kart rozeti, bildirim balonu, panel yan menusu. Basliklar ve yazilar mavi DEGIL. Koyu temada (gece modu) zeminler eskisi gibi kalir. Uzerinde: ink-0 8.88:1, ink-100 8.16:1. 2026-10-11'den beri vurgu (baglanti, ust yazi, kucuk ikon) ve dugmeler de mavi; altin yalnizca logoda ve urun fotograflarinda. */ --mavi: #2e458f; --mavi-acik: #3a55a8; /* fbf8f4 7.06:1 */ --mavi-koyu: #1e2f66; /* fbf8f4 11.99:1 */ /* --- Anlamsal renkler: ACIK TEMA --- */ --yuzey: var(--ink-50); --yuzey-yukseltilmis: var(--ink-0); --yuzey-batik: var(--ink-100); --metin: var(--ink-800); /* 12.19:1 */ --metin-soluk: var(--ink-600); /* 5.67:1 */ --metin-ters: var(--ink-0); /* Vurgu MAVI (patron, 2026-10-11: baglantilar, ust yazilar, kucuk ikonlar da mavi). Altin yalnizca logoda ve urun fotograflarinda. */ --vurgu: var(--mavi); /* 8.52:1 - metin/link/ikon */ --vurgu-yuzey: var(--mavi-koyu); /* baglanti uzerine gelince, 12.17:1 */ --vurgu-soluk: #e8edf8; /* soluk zemin; uzerinde vurgu 7.57:1 */ --vurgu-kenar: #a9b8e3; /* uzerine gelince kart/kucuk resim kenari (dekoratif) */ --ayrac: var(--ink-200); /* dekoratif, kontrast araninmaz */ --kenarlik: var(--ink-300); /* dekoratif kutu kenari */ --kenarlik-girdi: #988c7c; /* 3.16:1 - WCAG 1.4.11 gerekli */ --odak-halka: var(--mavi); /* Koyu zeminli kucuk parcalar (kart rozeti, bildirim balonu, panelde gorsel rozeti): acik temada mavi, koyu temada ink-900. */ --koyu-zemin: var(--mavi); /* --- Dugmeler ve secim (patron, 2026-10-11: "dugmeler de maviye") --- Birincil dugme, arama dugmesi, sepet rozeti, onay kutulari ve secili secenek MAVI. Altin yalnizca vurgu olarak kalir: baglanti, ust yazi, kucuk ikon, logo. Beyaz yazi mavide 8.88:1, uzerine gelince 11.99:1 (eski altin dugme 3.46:1 ile AA'nin altindaydi). Mavi seritin (ust bant, menu, mobil panel) ICINDEKI dugme ters renkli: beyaz zemin, mavi yazi 8.88:1 - mavi uzerinde mavi dugme gorunmez. */ --dugme-zemin: var(--mavi); --dugme-zemin-hover: var(--mavi-koyu); --dugme-metin: var(--ink-0); --secim-renk: var(--mavi); /* secili kenar, onay kutusu; beyazda 8.88:1 */ --secim-soluk: #e8edf8; /* secili zemin; ink-800 yazi 10.83:1 */ --serit-dugme-zemin: var(--ink-0); --serit-dugme-hover: var(--ink-100); --serit-dugme-metin: var(--mavi); /* Ana sayfa kategori kartlarinin zemini (2026-09-27'de patronun ornegi lacivertti; 2026-10-10'dan beri acik temada mavi). */ --kategori-kart-zemin: linear-gradient(160deg, var(--mavi-acik) 0%, var(--mavi) 50%, var(--mavi-koyu) 100%); /* --- Serit --- En ustteki duyuru bandi, ana menu, mobil menu paneli ve fiyat tablosunun basligi ayni zemini paylasir: tek token, tek yerden doner. Acik temada MAVI (patron, 2026-10-10). Serit metni acik mavi-beyaz, etkin/uzerine gelinen beyaz (2026-10-11; once altin). Koyu temada zemin ink-950, vurgu acik mavi. */ --serit-zemin: var(--mavi); --serit-metin: #dde4f6; /* mavide 6.98:1 */ --serit-vurgu: #ffffff; /* etkin/uzerine gelince beyaz, 8.88:1 */ --basari: #217d47; /* 4.92:1 */ --hata: #b53b30; /* 5.54:1 */ --uyari: #9d672a; /* 4.57:1 */ --bilgi: #3073b5; /* 4.74:1 */ /* --- Olcek --- */ --uzay-1: 4px; --uzay-2: 8px; --uzay-3: 12px; --uzay-4: 16px; --uzay-5: 24px; --uzay-6: 32px; --uzay-7: 48px; --uzay-8: 64px; --uzay-9: 96px; --yuvarlak-sm: 6px; --yuvarlak: 10px; --yuvarlak-lg: 16px; --yuvarlak-tam: 999px; --golge-sm: 0 1px 2px rgba(35, 31, 26, .06); --golge: 0 2px 12px rgba(35, 31, 26, .07); --golge-lg: 0 8px 32px rgba(35, 31, 26, .10); /* --- Tipografi --- */ /* Govde: sistem yazi tipi yigini. Inter indirmiyoruz - iki alt kume 461 KB tutuyordu ve okuyucunun kendi isletim sisteminin yazi tipiyle arasindaki fark goze gorunmuyor. Sifir indirme, sifir yerlesim kaymasi. */ --yazi-govde: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Baslik: Urbanist - sitede ve panelde butun basliklar (patron, 2026-09-29: once h1, sonra "bu font kalmasin": Cormorant tamamen kalkti). Yedegi olculeri esitlenmis Arial, o da yoksa govde yigini (bkz. yazitipleri.css). */ --yazi-baslik: "Urbanist", "Urbanist Fallback", var(--yazi-govde); --yazi-tek: ui-monospace, SFMono-Regular, Menlo, monospace; --olcu-govde: 1rem; --satir-govde: 1.65; --gecis: 160ms cubic-bezier(.4, 0, .2, 1); } /* --- KOYU TEMA --- Kullanicinin sistem tercihi esas; [data-theme] ile elle gecilebilir. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --yuzey: var(--ink-950); --yuzey-yukseltilmis: var(--ink-900); --yuzey-batik: #12100d; --metin: var(--ink-100); /* 16.72:1 */ --metin-soluk: var(--ink-400); /* 7.48:1 */ --metin-ters: var(--ink-900); --vurgu: #8fa8ec; /* 7.78:1 (kartta 7.00:1) */ --vurgu-yuzey: #a3b8f0; /* 9.25:1 */ --vurgu-soluk: #1b2440; /* uzerinde vurgu 6.54:1 */ --vurgu-kenar: #4a68c2; --ayrac: #2e2820; --kenarlik: #332c23; --kenarlik-girdi: #6d6355; /* 3.09:1 */ --odak-halka: #8fa8ec; --koyu-zemin: var(--ink-900); --kategori-kart-zemin: linear-gradient(160deg, #2a241c 0%, #181511 55%, #0f0d0a 100%); /* Koyu temada dugmeler de mavi, bir ton acik: beyaz yazi 5.18:1, sayfa zemininden 3.51:1 ayrisir; uzerine gelince #5571c9 (4.57:1). */ --dugme-zemin: #4a68c2; --dugme-zemin-hover: #5571c9; --dugme-metin: var(--ink-0); --secim-renk: #7b97e0; /* koyu zeminde 6.36:1 */ --secim-soluk: #1b2440; /* ink-100 yazi 14.06:1 */ --serit-dugme-zemin: #4a68c2; --serit-dugme-hover: #5571c9; --serit-dugme-metin: var(--ink-0); /* Koyu temada baslik zaten ink-900; serit de ayni olsa ikisi birbirine karisirdi. Bir ton daha koyusu ayrimi korur. */ --serit-zemin: var(--ink-950); --serit-metin: var(--ink-100); --serit-vurgu: #8fa8ec; --basari: #4acf81; /* 9.13:1 */ --hata: #d15c52; /* 4.65:1 */ --uyari: #cf914a; /* 6.76:1 */ --bilgi: #4a8ccf; /* 5.15:1 */ --golge-sm: 0 1px 2px rgba(0, 0, 0, .4); --golge: 0 2px 12px rgba(0, 0, 0, .45); --golge-lg: 0 8px 32px rgba(0, 0, 0, .55); } } :root[data-theme="dark"] { --yuzey: var(--ink-950); --yuzey-yukseltilmis: var(--ink-900); --yuzey-batik: #12100d; --metin: var(--ink-100); --metin-soluk: var(--ink-400); --metin-ters: var(--ink-900); --vurgu: #8fa8ec; --vurgu-yuzey: #a3b8f0; --vurgu-soluk: #1b2440; --vurgu-kenar: #4a68c2; --ayrac: #2e2820; --kenarlik: #332c23; --kenarlik-girdi: #6d6355; --odak-halka: #8fa8ec; --koyu-zemin: var(--ink-900); --kategori-kart-zemin: linear-gradient(160deg, #2a241c 0%, #181511 55%, #0f0d0a 100%); --dugme-zemin: #4a68c2; --dugme-zemin-hover: #5571c9; --dugme-metin: var(--ink-0); --secim-renk: #7b97e0; --secim-soluk: #1b2440; --serit-dugme-zemin: #4a68c2; --serit-dugme-hover: #5571c9; --serit-dugme-metin: var(--ink-0); --serit-zemin: var(--ink-950); --serit-metin: var(--ink-100); --serit-vurgu: #8fa8ec; --basari: #4acf81; --hata: #d15c52; --uyari: #cf914a; --bilgi: #4a8ccf; }