/* PharmHive — tasarim sistemi (Faz 1) ==================================================================== Bu dosya sitenin TEK renk/olcu kaynagi. Hicbir yerde sabit hex veya sabit piksel yazilmaz; her sey buradaki token'lardan gelir. Bugunku sorun buydu: 21 ayri hex 22 sayfaya dagilmisti ve 2.516 satir ici `style` niteligi stil sayfasini eziyordu. Bir rengi degistirmek 22 dosyaya dokunmak demekti. Yazi tipi karari (2026-09-06, Yigit): Secenek C baslik -> Bricolage Grotesque metin -> Instrument Sans BU DOSYA SADECE DEGISKEN TANIMLAR - tek bir gorunum kurali icermez. Bu yuzden yuklendigi yerde hicbir seyi degistirmez. Gorunum kurallari yeni.css'te ve hepsi `body[data-yeni]` ile kapsamlanmis durumda; boylece yeni tasarim yalnizca isaretli sayfalara uygulanir ve gecis sirasinda henuz tasinmamis sayfalara dokunulmaz. -------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap'); :root { /* ── YAZI TIPI ───────────────────────────────────────────────── */ --yt-baslik: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; --yt-metin: 'Instrument Sans', system-ui, -apple-system, sans-serif; --yt-sayi: 'Instrument Sans', system-ui, sans-serif; /* ── OLCEK ─────────────────────────────────────────────────────── Basliklar akiskan (clamp): kucuk ekranda kuculur, buyukte durur. Govde metni sabit — okunurluk ekran genisligine gore degismemeli. */ --p-3xl: clamp(2.25rem, 1.60rem + 2.8vw, 3.50rem); /* 36 → 56 hero */ --p-2xl: clamp(1.75rem, 1.35rem + 1.7vw, 2.50rem); /* 28 → 40 h1 */ --p-xl: clamp(1.375rem, 1.15rem + 0.95vw, 1.75rem); /* 22 → 28 h2 */ --p-lg: 1.25rem; /* 20 h3 */ --p-md: 1.0625rem; /* 17 lead */ --p-base: 1rem; /* 16 govde */ --p-sm: 0.875rem; /* 14 yardim*/ --p-xs: 0.75rem; /* 12 etiket*/ --satir-sik: 1.12; /* buyuk basliklar */ --satir-orta: 1.35; /* kucuk basliklar */ --satir-genis:1.65; /* govde metni */ --arali-sik: -0.025em; /* buyuk basliklar sikilastirilir */ --arali-orta: -0.012em; --arali-etiket: 0.10em; /* BUYUK HARF etiketler acilir */ --kalin-metin: 400; --kalin-orta: 500; --kalin-yari: 600; --kalin-tam: 800; /* ── NOTR RENKLER ──────────────────────────────────────────────── Duz gri degil: hepsinde hafif mavi egim var (marka mavisine dogru). Duz gri "secilmemis" gorunur; egimli gri "secilmis" gorunur. */ --zemin: #ffffff; /* Donusumlu bolum zemini. Orijinal #f9f9f9 (notr gri) idi; sari bir markada soguk gri yabanci duruyordu. Ayni aciklikta ama sariya dogru egimli bir ton: fark ancak yan yana konunca goruluyor, ama sayfa butun olarak isiniyor. */ --zemin-alt: #faf8f3; --zemin-kart: #ffffff; --murekkep: #15171c; /* ana metin — beyazda 16.9 */ --murekkep-alt: #5a616e; /* ikincil metin — beyazda 5.7 */ --murekkep-sol: #838b99; /* ipucu, alt not — beyazda 3.3 (sadece buyuk) */ --cizgi: #e4e7ec; /* dekoratif ince cizgi */ --cizgi-koyu: #cbd1da; /* kart kenarligi */ --cizgi-girdi: #8896ab; /* form alani siniri — beyazda 3.00, algilanabilir sinir esigi (WCAG 1.4.11). Girdi kenarligi dekoratif degildir: gorulemezse alan gorulemez. */ /* ── MARKA RENKLERI — DOLGU ────────────────────────────────────── Zemin, ikon, rozet, kenarlik, grafik icin. Kontrast aranmaz, cunku bunlarin uzerine yazi yazilmaz (yazilirsa beyaz yazilir). */ --mavi: #4285f4; --yesil: #34a853; --sari: #fbbc05; /* Hero degradesinin ikinci durağı. Orijinal site zaten bu ikisini kullaniyordu: linear-gradient(135deg, #fbbc05, #fbd403). */ --sari-acik: #fbd403; --kirmizi: #ea4335; --mor: #9c27b0; --turkuaz: #3dcfb8; --pembe: #e91e8c; /* ── MARKA RENKLERI — METIN ────────────────────────────────────── Beyaz zemine YAZI olarak yazilan varyantlar. Hepsi WCAG AA (4.5). Ton (hue) korundu, sadece aydinlik dusuruldu — marka aynı marka. DOGRULAMA ZEMINI: bu renkler beyaza gore DEGIL, uzerinde durduklari EN KOYU zemine gore olculur. Donusumlu bolum zemini (--zemin-alt) beyazdan bir tik koyu; renkler beyazda tam 4.50 verdigi icin orada 4.24'e dusuyorlardi. Ayni hatayi anlam renklerinde ve komite rozetlerinde de yapmistim - kural artik burada yazili. SARI VE TURKUAZ BILEREK YOK. Onlari AA'ya cikarmak %40 koyulastirma istiyordu: sari #977102 (zeytin), turkuaz #218575 (koyu petrol). O artik marka rengi degil, baska bir renk. Karar: bu ikisi ASLA beyaz zeminde yazi olmaz — dolgu, kenarlik, ikon olarak kalir. Koyu zeminde yazi olabilirler (orada kontrastlari 9-12). */ --mavi-yazi: #186af1; --yesil-yazi: #298241; --kirmizi-yazi: #c93122; /* 4.50 */ --mor-yazi: #9c27b0; /* 6.30 — koyulastirma gerekmedi */ --pembe-yazi: #d91580; /* ── AKSIYON ZEMINI ────────────────────────────────────────────── Uzerine BEYAZ yazi yazilan zeminler. Marka mavisi (#4285f4) bunun icin yetmiyor: beyaz yazi orada 3.56 kaliyor, AA 4.5 istiyor. Sitenin bugunku birincil butonu tam bu yuzden esikte kaliyor. Cozum: butonun zemini bir tik koyu maviye alinir. Ayni ton, fark gozle secilmiyor, ama yazi okunur hale geliyor. */ --aksiyon: #2170f2; /* beyaz yazi 4.50 */ --aksiyon-koyu: #1a5fd0; /* uzerine gelince / basiliyken */ /* ── ANLAM RENKLERI ────────────────────────────────────────────── Marka renklerinden AYRI tutulur. "Basarili" yesili marka yesiliyle ayni hex olsa bile ayri token: biri kimlik, digeri durum bildirir. Marka degisirse durum renkleri degismemeli. DIKKAT — bu renkler KENDI renkli zeminlerine (--*-alan) gore dogrulanir, beyaza gore degil. Ilk yazdigimda beyaza gore olcmustum ve ucu de gecmis gorunuyordu; ama pratikte hep kendi acik tonlu zeminlerinde kullaniliyorlar ve orada esigin altina dusuyorlardi (olumlu 4.07, uyari 4.12). Renkli zemin daha koyu oldugu icin baglayici kisit odur; orada gecen beyazda da geciyor. */ --olumlu: #287f3f; --uyari: #9e6300; --olumsuz: #c93122; --olumlu-alan: #eaf6ee; --uyari-alan: #fdf4e3; --olumsuz-alan:#fdecea; /* ── RENKLI ZEMIN + UZERINDEKI YAZI — CIFT OLARAK DOGRULANIR ───── KURAL: beyazda gecen bir renk, KENDI acik tonlu zemininde gecmez. Renkli zemin beyazdan koyudur, yani kontrasti dusurur. Bu yuzden asagidaki her cift birlikte olculur ve birlikte degistirilir; ayri ayri secilirse sessizce esigin altina duser. Bu hatayi iki kez yaptim: once anlam renklerinde (--olumlu 4.07, --uyari 4.12), sonra komite rozetlerinde (yesil 4.07, mavi 3.93). Ikisinde de renkleri beyaza gore dogrulamis, kullanildiklari zemine bakmamistim. Ton (hue) korunuyor: yazi varyantlari marka tonundan 0.2 dereceden az sapiyor - goz farki secmiyor, kontrast esigi geciyor. */ --yesil-alan: #eaf6ee; --yesil-alan-yazi: #287f3f; /* zemininde 4.51 */ --mavi-alan: #e8f0fe; --mavi-alan-yazi: #0e63f0; /* zemininde 4.51 */ --kirmizi-alan: #fdecea; --kirmizi-alan-yazi: #c93122; /* zemininde 4.65 — koyulastirma gerekmedi */ /* ── BOSLUK ────────────────────────────────────────────────────── 4px tabanli. Ara deger uydurulmaz; olcek disina cikilmaz. */ --b-1: 0.25rem; /* 4 */ --b-2: 0.5rem; /* 8 */ --b-3: 0.75rem; /* 12 */ --b-4: 1rem; /* 16 */ --b-5: 1.5rem; /* 24 */ --b-6: 2rem; /* 32 */ --b-7: 3rem; /* 48 */ --b-8: 4rem; /* 64 */ --b-9: 6rem; /* 96 */ --bolum-dikey: clamp(3rem, 6vw, 5.5rem); /* bolumler arasi nefes */ /* ── YARICAP ─────────────────────────────────────────────────── */ --y-sm: 8px; --y-md: 12px; --y-lg: 20px; --y-tam: 999px; /* ── GOLGE ─────────────────────────────────────────────────────── Notr siyah degil, notr murekkep tonunda — zemine oturur. */ /* Tek golge yerine iki katman: yakin ve sert olan kenari tanimliyor, uzak ve yumusak olan derinligi veriyor. Duz 1px cerceveli kutulara gore gozle fark edilir sekilde daha yeni duruyor. */ --g-sm: 0 1px 2px rgba(21,23,28,.05); --g-md: 0 1px 2px rgba(21,23,28,.05), 0 6px 16px rgba(21,23,28,.06); --g-lg: 0 2px 4px rgba(21,23,28,.05), 0 14px 34px rgba(21,23,28,.09); --g-sari: 0 2px 4px rgba(251,188,5,.10), 0 14px 34px rgba(251,188,5,.18); /* ── DUZEN ───────────────────────────────────────────────────── */ --en-genis: 1200px; /* ana kapsayici */ --en-dar: 720px; /* makale metin sutunu */ --olcu-metin: 68ch; /* satir uzunlugu tavani */ --nav-yuksek: 66px; /* ── DOKUNMA HEDEFI ────────────────────────────────────────────── Denetimde 36px altinda 24 hedef bulunmustu. Taban burada. */ --dokunma: 44px; /* ── PETEK DOKUSU ──────────────────────────────────────────────── PharmHive = kovan. Markanin adindaki tek somut gorsel fikir bu ve sitede hicbir yerde kullanilmiyordu. Cok dusuk opaklikta bir doku olarak sari alanlara giriyor: uzaktan bakinca fark edilmiyor, yakindan bakinca "bu bir kovan" diyor. Data URI - dis dosya yok, ek istek yok, 540 karakter. */ --petek: url("data:image/svg+xml,"); --petek-olcu: 34.64px 60px; /* ── HAREKET ─────────────────────────────────────────────────── */ --gecis-hizli: 120ms cubic-bezier(.2, 0, .2, 1); --gecis-orta: 220ms cubic-bezier(.2, 0, .2, 1); } /* ── KARANLIK TEMA ─────────────────────────────────────────────────── HENUZ KARAR VERILMEDI. Iskelet burada duruyor ki karar "evet" olursa is tek blok; token'lar zaten hazir. Su an etkin degil — asagidaki blogun basindaki kosul saglanmadikca hicbir sey degismez. Etkinlestirmek icin: asagidaki iki blogun yorumu kaldirilir, degerler doldurulur. Sayfa kodunda TEK satir degismez. @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) { ... } } :root[data-tema="koyu"] { ... } */