/* ===================================================================== 1) TOKENS · Tasarım değişkenleri --------------------------------------------------------------------- Şablonun tüm görsel kimliği bu dosyadadır. Marka değiştirmek için yalnızca buradaki değerleri düzenlemek yeterlidir. ===================================================================== */ :root { /* --- Marka renkleri ------------------------------------------------ */ --marka: #d3122a; /* haber kırmızısı */ --marka-koyu: #a20d20; --marka-acik: #fdecee; --lacivert: #0b2545; /* menü / footer */ --lacivert-2: #143059; --sondakika: #b00016; /* --- Kategori renkleri (data.js ile aynı) --------------------------- */ --kat-gundem: #d3122a; --kat-dunya: #1f5fa9; --kat-ekonomi: #0d7ea8; --kat-spor: #16a34a; --kat-magazin: #c2185b; --kat-yasam: #7b1fa2; --kat-saglik: #0891b2; --kat-teknoloji: #4f46e5; --kat-kultur: #b45309; --kat-ilan: #64748b; /* --- Yüzey & metin -------------------------------------------------- */ --zemin: #f1f3f6; /* sayfa arkaplanı */ --kart: #ffffff; --kart-2: #f7f8fa; --yazi: #10151c; /* --yazi-1, --yazi'nin takma adıdır. Metin renkleri --yazi-2/--yazi-3 diye numaralandığı için birincil renk de seride aranıyor; ikisi de çalışsın diye tanımlı. */ --yazi-1: #10151c; --yazi-2: #4a5568; --yazi-3: #8a94a6; --cizgi: #e2e6ec; --cizgi-koyu: #cbd2dc; --vurgu-zemin: #fff8e6; /* --- Durum renkleri -------------------------------------------------- */ --yukari: #12a150; --asagi: #e03131; --canli: #e8590c; /* --- Tipografi ------------------------------------------------------- Yazı tipi takımı ile değişir; aşağıdaki üç değişken (başlık / metin / serif) tüm şablonu besler. */ --f-baslik: "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif; --f-metin: "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif; --f-serif: Georgia, "Times New Roman", serif; /* haber gövdesi */ --f-mono: "Cascadia Mono", Consolas, monospace; --f-vurgu: var(--f-baslik); /* köşe/alıntı vurgusu */ --fs-mikro: 11px; --fs-mini: 12px; --fs-kucuk: 13px; --fs-normal: 15px; --fs-orta: 17px; --fs-buyuk: 20px; --fs-h3: 24px; --fs-h2: 30px; --fs-h1: 40px; --fs-manset: clamp(26px, 3.1vw, 44px); --fw-normal: 400; --fw-orta: 600; --fw-kalin: 700; --fw-siyah: 800; --lh-sik: 1.18; --lh-normal: 1.45; --lh-genis: 1.75; /* --- Boşluk ölçeği ---------------------------------------------------- */ --b1: 4px; --b2: 8px; --b3: 12px; --b4: 16px; --b5: 20px; --b6: 24px; --b7: 32px; --b8: 40px; --b9: 56px; --b10: 72px; /* --- Izgara ----------------------------------------------------------- */ --kapsayici: 1280px; --kapsayici-dar: 860px; --sutun-bosluk: 24px; --sidebar-en: 320px; /* --- Kenar / gölge ---------------------------------------------------- */ --r1: 2px; --r2: 4px; --r3: 8px; --r4: 12px; --r5: 18px; --rtam: 999px; --golge-1: 0 1px 2px rgba(16,21,28,.06), 0 1px 3px rgba(16,21,28,.05); --golge-2: 0 2px 6px rgba(16,21,28,.08), 0 6px 18px rgba(16,21,28,.06); --golge-3: 0 12px 34px rgba(16,21,28,.14); --golge-menu: 0 18px 40px rgba(11,37,69,.22); /* --- Hareket ------------------------------------------------------------ */ --gecis-hizli: .15s ease; --gecis: .25s cubic-bezier(.4,0,.2,1); /* --- Katmanlar ---------------------------------------------------------- */ --z-govde: 1; --z-sticky: 400; --z-menu: 500; --z-panel: 700; --z-modal: 900; --z-ustune: 1000; } /* ===================================================================== KOYU TEMA · ===================================================================== */ [data-tema="koyu"] { --zemin: #0d1117; --kart: #161b22; --kart-2: #1c2230; --yazi: #e8edf4; --yazi-1: #e8edf4; --yazi-2: #a9b4c4; --yazi-3: #6d7889; --cizgi: #262d3a; --cizgi-koyu: #333c4b; --lacivert: #10161f; --lacivert-2: #1a2331; --marka-acik: #2a1216; --vurgu-zemin:#241f10; --golge-1: 0 1px 2px rgba(0,0,0,.4); --golge-2: 0 2px 8px rgba(0,0,0,.45); --golge-3: 0 14px 36px rgba(0,0,0,.55); --golge-menu: 0 18px 40px rgba(0,0,0,.6); } /* ===================================================================== YAZI TİPİ TAKIMLARI · --------------------------------------------------------------------- Tamamı sistemde hazır bulunan yazı tipleriyle kurulur; dışarıdan font indirilmez, çevrimdışı çalışır. Menüdeki "Aa" düğmesi değiştirir. Yeni takım eklemek için buraya bir blok yazıp app.js'teki YAZITIPLERI dizisine bir satır eklemek yeterlidir. ===================================================================== */ /* Ortak yedekler: web fontu yüklenmezse bunlara düşer */ :root { --yedek-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --yedek-serif: Georgia, "Times New Roman", serif; } /* 1 · Haber (varsayılan) — Barlow Condensed manşet + Inter gövde Türk ve dünya haber sitelerinin en yaygın kombinasyonu: sıkışık ve iri manşet, ferah ve okunaklı gövde. */ [data-yazitipi="haber"] { --f-baslik: "Barlow Condensed", "Arial Narrow", var(--yedek-sans); --f-metin: "Inter", var(--yedek-sans); --f-serif: "Inter", var(--yedek-sans); --f-vurgu: "Barlow Condensed", var(--yedek-sans); --fs-manset: clamp(30px, 3.6vw, 52px); --lh-sik: 1.05; } [data-yazitipi="haber"] .manset-ana__baslik, [data-yazitipi="haber"] .surmanset__baslik, [data-yazitipi="haber"] .sayfa-basi__baslik, [data-yazitipi="haber"] .modul-baslik__ad { letter-spacing: -.01em; } /* 2 · Inter — tek aile, her yerde (arayüz odaklı, çok temiz) */ [data-yazitipi="inter"] { --f-baslik: "Inter", var(--yedek-sans); --f-metin: "Inter", var(--yedek-sans); --f-serif: "Inter", var(--yedek-sans); --f-vurgu: "Inter", var(--yedek-sans); --lh-sik: 1.16; } /* 3 · Metropolis — geometrik başlık + Inter gövde */ [data-yazitipi="metropolis"] { --f-baslik: "Metropolis", var(--yedek-sans); --f-metin: "Inter", var(--yedek-sans); --f-serif: "Metropolis", var(--yedek-sans); --f-vurgu: "Metropolis", var(--yedek-sans); } /* 4 · Kondens — her şey sıkışık; tabloid/spor sayfaları için */ [data-yazitipi="kondens"] { --f-baslik: "Barlow Condensed", "Arial Narrow", var(--yedek-sans); --f-metin: "Barlow Condensed", "Arial Narrow", var(--yedek-sans); --f-serif: "Inter", var(--yedek-sans); --f-vurgu: "Barlow Condensed", var(--yedek-sans); --fs-normal: 16px; --fs-kucuk: 14.5px; --fs-mini: 13px; --fs-manset: clamp(32px, 4vw, 56px); --lh-sik: 1.02; } /* 5 · Metropolis Ağır — dergi kapağı hissi */ [data-yazitipi="metropolis-agir"] { --f-baslik: "Metropolis", var(--yedek-sans); --f-metin: "Metropolis", var(--yedek-sans); --f-serif: "Inter", var(--yedek-sans); --f-vurgu: "Metropolis", var(--yedek-sans); --fw-siyah: 900; --fw-kalin: 700; --lh-sik: 1.08; } /* 6 · Gazete — serif başlık, serif gövde (sistem yazı tipleri) */ [data-yazitipi="gazete"] { --f-baslik: "Times New Roman", Times, Georgia, serif; --f-metin: Georgia, "Times New Roman", serif; --f-serif: Georgia, "Times New Roman", serif; --f-vurgu: Georgia, serif; --lh-sik: 1.1; } /* 7 · Klasik — Palatino / Garamond (sistem) */ [data-yazitipi="klasik"] { --f-baslik: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --f-metin: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --f-serif: Garamond, "Palatino Linotype", Georgia, serif; --f-vurgu: Garamond, Georgia, serif; } /* 8 · Elza — TİCARİ (Blaze Type). Lisanslı dosyalar assets/fonts/ içine konup fontlar.css'teki blokların yorumu kaldırılınca devreye girer; yoksa Inter'e düşer, sayfa bozulmaz. */ [data-yazitipi="elza"] { --f-baslik: "Elza", "Inter", var(--yedek-sans); --f-metin: "Elza", "Inter", var(--yedek-sans); --f-serif: "Inter", var(--yedek-sans); --f-vurgu: "Elza", "Inter", var(--yedek-sans); } /* 9 · Guardian — TİCARİ (Commercial Type). Aynı şekilde yedeğe düşer. */ [data-yazitipi="guardian"] { --f-baslik: "Guardian Sans Cond", "Barlow Condensed", var(--yedek-sans); --f-metin: "Inter", var(--yedek-sans); --f-serif: Georgia, serif; --f-vurgu: "Guardian Sans Cond", "Barlow Condensed", var(--yedek-sans); --fs-manset: clamp(32px, 3.8vw, 54px); --lh-sik: 1.04; } /* 10 · Nötr — hiç web fontu yüklemez, en hızlı açılan seçenek */ [data-yazitipi="notr"] { --f-baslik: Arial, Helvetica, sans-serif; --f-metin: Arial, Helvetica, sans-serif; --f-serif: "Times New Roman", Times, serif; --f-vurgu: Arial, sans-serif; } /* 11 · Kompakt — dar ekranda daha çok içerik (sistem) */ [data-yazitipi="kompakt"] { --f-baslik: Tahoma, "Segoe UI", Verdana, sans-serif; --f-metin: Tahoma, Verdana, sans-serif; --f-serif: Verdana, Tahoma, sans-serif; --f-vurgu: Tahoma, sans-serif; --fs-normal: 14px; --fs-kucuk: 12.5px; } /* 12 · Teknik — daktilo başlık, Inter gövde */ [data-yazitipi="teknik"] { --f-baslik: "Cascadia Mono", Consolas, "Courier New", monospace; --f-metin: "Inter", var(--yedek-sans); --f-serif: Consolas, "Courier New", monospace; --f-vurgu: Consolas, monospace; --fs-manset: clamp(22px, 2.5vw, 34px); } /* ===================================================================== YOĞUNLUK MODU · Klasik portal sıkışıklığını gevşetmek için alternatif ölçek. ===================================================================== */ [data-yogunluk="ferah"] { --sutun-bosluk: 32px; --lh-normal: 1.6; --r1: 6px; --r2: 8px; --r3: 14px; --r4: 18px; }