/* ========================================================================== ALBIM — Tasarım tokenları Kaynak: "albim.fr — e-ticaret tasarım sistemi" (Claude Design) Bu dosyadaki değerler tahmin DEĞİL: tasarım dokümanı tarayıcıda render edilip hesaplanmış stiller ölçülerek çıkarıldı. Bir değeri değiştirmek sitenin tamamını değiştirir — bileşen dosyalarında sabit renk/ölçü yazmayın, hep buradaki değişkenleri kullanın. ========================================================================== */ :root { /* ---------------------------------------------------------------- RENK Oran kuralı: %60 açık zemin · %30 nötr + fotoğraf · %10 marka rengi. Marka kırmızısı yayılırsa yüzey olur, sinyal olmaktan çıkar. */ /* Marka */ --albim-kirmizi: #DA361F; /* logo, ana eylem */ --albim-kirmizi-koyu: #B32915; /* hover, basılı */ --albim-kirmizi-soluk: #FBEAE6; /* çok hafif zemin, uyarı kutusu */ /* Okunurluk: #C2731C açık zeminlerde 3,24–3,64:1 veriyordu, küçük yazıda WCAG eşiği 4,5:1. Metin rengi olarak kullanıldığı için koyulaştırıldı; aynı bakır tonu, sadece daha okunur. Ölçüm: en kötü zeminde 4,50:1. */ --albim-bakir: #A95A03; /* fiyat vurgusu, indirim, ödeme butonu */ /* Mürekkep ve metin */ --renk-murekkep: #241D1B; /* ana metin, koyu yüzey */ --renk-govde: #5A504C; /* ikincil gövde metni · 6,6:1 */ /* Aynı sebep: 3,50–3,93:1 idi, artık en kötü zeminde 4,51:1. */ --renk-soluk: #786C67; /* üçüncül, etiket, pasif */ /* Zeminler */ --zemin-sayfa: #FAF6F1; /* sayfanın ana zemini */ --zemin-yuzey: #FFFFFF; /* kart, açılır menü, form */ --zemin-serit: #F6F1EA; /* bölüm şeridi, pasif buton */ --zemin-koyu: #241D1B; /* koyu şerit, üst duyuru barı */ /* Çizgiler — üç kademe */ --cizgi-ince: #EDE5DC; /* liste ayracı, hafif bölme */ --cizgi: #E0D6CB; /* kart kenarı, kutu */ --cizgi-belirgin: #C9BEB3; /* form alanı kenarı */ /* Durum */ --renk-basari: #2F6B4F; --renk-hata: var(--albim-kirmizi); /* Metin renginin zemine göre karşılığı */ --uzeri-kirmizi: #FFFFFF; --uzeri-koyu: #FAF6F1; /* ------------------------------------------------------------ TİPOGRAFİ Başlık: Newsreader (serif) · Gövde ve arayüz: Instrument Sans */ --yazi-baslik: 'Newsreader', Georgia, 'Times New Roman', serif; --yazi-govde: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Ölçek — dokümanda ölçülen gerçek kullanım */ --fs-2xs: 12px; /* rozet, mikro etiket */ --fs-xs: 14px; /* yardımcı metin, birim fiyat */ --fs-sm: 16px; /* buton, form, küçük gövde — MİNİMUM gövde boyutu */ --fs-base: 17px; /* ana gövde metni */ --fs-md: 19px; /* ürün adı, alt başlık */ --fs-lg: 22px; /* fiyat, bölüm alt başlığı */ --fs-xl: 26px; /* bölüm başlığı */ --fs-2xl: 30px; --fs-3xl: 38px; /* sayfa başlığı */ --fs-4xl: 48px; /* hero */ /* Satır yüksekliği */ --lh-sik: 1.1; /* büyük başlık */ --lh-orta: 1.25; /* ürün adı, kart başlığı */ --lh-govde: 1.6; /* okunan metin — asla daha sıkı değil */ /* Harf aralığı */ --ls-baslik: -0.01em; --ls-etiket: 0.12em; /* BÜYÜK HARF mikro etiketler */ /* Ağırlık */ --fw-normal: 400; --fw-orta: 500; --fw-kalin: 600; --fw-agir: 700; /* --------------------------------------------------------------- ARALIK 8 pt sistem. Ara değer kullanmayın. */ --a-1: 4px; --a-2: 8px; --a-3: 16px; --a-4: 24px; --a-5: 32px; --a-6: 48px; --a-7: 64px; --a-8: 96px; /* --------------------------------------------------------------- DÜZEN */ --icerik-genislik: 1320px; /* içerik kolonu */ --kolon-aralik: 24px; /* 12 kolonluk ızgaranın aralığı */ --sayfa-marj: 24px; /* mobil kenar payı */ --sayfa-marj-genis: 40px; /* masaüstü kenar payı */ /* --------------------------------------------------------- KÖŞE / GÖLGE */ --kose-kucuk: 4px; /* rozet */ --kose: 6px; /* buton, form alanı */ --kose-buyuk: 10px; /* kart, kutu, çekmece */ --golge-kart: 0 1px 2px rgba(36, 29, 27, .04); --golge-yuzen: 0 8px 24px rgba(36, 29, 27, .10); --golge-cekmece: 0 0 48px rgba(36, 29, 27, .18); /* --------------------------------------------------------------- ÖLÇÜ Dokunma hedefi asla 44 px'in altına inmez. */ --yukseklik-buton: 48px; --yukseklik-form: 50px; --yukseklik-rozet: 28px; --dokunma-min: 44px; /* --------------------------------------------------------------- ODAK */ --odak-renk: var(--albim-kirmizi); --odak-kalinlik: 2px; --odak-bosluk: 2px; /* ------------------------------------------------------------ HAREKET */ --gecis-hizli: 120ms ease; --gecis: 180ms ease; --gecis-yavas: 280ms cubic-bezier(.2, .7, .3, 1); /* --------------------------------------------------------------- KATMAN */ --z-yapiskan: 100; --z-acilir: 200; --z-ortu: 300; --z-cekmece: 310; --z-bildirim: 400; } /* ========================================================================== İMZA MOTİFİ — mantı kıvrımı Mantının bükülmüş hamur kenarı tek çizgiye indirgenmiş hâli. Bölüm ayracı, başlık altı süsü ve yükleme animasyonu olarak kullanılır. Sistemdeki TEK dekoratif motif budur; başkası eklenmez. ========================================================================== */ :root { --motif-kivrim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12' viewBox='0 0 32 12'%3E%3Cpath d='M0 11 C 5 1, 11 1, 16 11 C 21 1, 27 1, 32 11' fill='none' stroke='%23DA361F' stroke-width='1.6' stroke-opacity='.5'/%3E%3C/svg%3E"); --motif-kivrim-soluk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12' viewBox='0 0 32 12'%3E%3Cpath d='M0 11 C 5 1, 11 1, 16 11 C 21 1, 27 1, 32 11' fill='none' stroke='%23C9BEB3' stroke-width='1.6' stroke-opacity='.7'/%3E%3C/svg%3E"); } /* ========================================================================== KAMYON MODU — KALDIRILDI (#268, 5 Eylül 2026) Burada dört değişken vardı (--mod-vurgu, --mod-vurgu-zemin, --mod-etiket, --motif-rota) ve bunlar `` ile açılıyordu. İki ölçüm sonucu kaldırıldı: 1. Dördünü de HİÇBİR kural kullanmıyordu (grep: 0 kullanım). 2. `data-mod` niteliğini besleyen `albim_mod()` bir çerez okuyordu; o çerezi yazan hiçbir kod yoktu, yani nitelik her zaman "kargo" basılıyordu. Kamyon modunun görünür karşılığı zaten ayrı: /kamyon/ şablonları ve kamyon.css. Mod göstergesinin tek kaynağı `albim_aktif_mod()`. ========================================================================== */