/* ============================================================ FONT TANIMLARI — Yerel (self-hosted) woff2 NOT: Cormorant Garamond self-hosted DEĞİL — Playfair Display fallback kullanılıyor. İleride woff2 dosyaları eklenebilir. ============================================================ */ /* Inter — latin-ext (Türkçe dahil) */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-v20-latin-ext-regular.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-v20-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-v20-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter — latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-v20-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Playfair Display — latin-ext (Türkçe dahil) */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/playfair-display-v40-latin-ext-regular.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/playfair-display-v40-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/playfair-display-v40-latin-ext-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Playfair Display — latin */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/playfair-display-v40-latin-regular.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/playfair-display-v40-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/playfair-display-v40-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/playfair-display-v40-latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* * ============================================================ * hukuk-tokens.css * Balgat Hukuk & Arabuluculuk Bürosu — CSS Token Sistemi * Proje prefix: blg- * Version: 1.0.0 * ============================================================ * * Bu dosya: * - Renk sistemi (marka + semantik + durum) * - Tipografi ölçeği * - Boşluk sistemi * - Layout sabitleri * - Gölge ve kenarlık sistemi * - Animasyon süreleri * - Breakpoint referansları * * KURAL: Bu dosya asla element stili içermez. * Sadece :root ve varyant selector'larında değişken tanımlar. * ============================================================ */ /* ============================================================ RENK SİSTEMİ ============================================================ */ :root { /* --- Marka renkleri --- */ --blg-lacivert: #D8D8D6; /* soft concrete grey — Ruler heritage */ --blg-lacivert-2: #E6E6E4; /* lighter surface */ --blg-antrasit: #14202C; /* koyu lacivert — sayfa hero zemini */ --blg-kart: #F1F1EF; /* card bg — lightest surface */ --blg-kart-hover: #E8E8E6; --blg-altin: #6B5338; /* brass koyu — metin/link: 5.04:1 WCAG AA ✓ */ --blg-altin-koyu: #4E3D28; /* daha koyu vurgu, hover */ --blg-altin-dekor: #9B7B5A; /* dekoratif kullanım: çizgi, ikon, bg (metin değil) */ --blg-altin-soluk: rgba(107, 83, 56, 0.12); --blg-altin-cizgi: rgba(107, 83, 56, 0.30); --blg-altin-parlak: #9B7B5A; /* hover üzeri (koyu bg'de) */ --blg-beyaz: #1F2023; /* DEPRECATED — var(--blg-metin) kullan. Koyu bg için var(--blg-kart) kullan */ --blg-birincil: #14202C; /* Marka ana rengi — lacivert — koyu bg için */ --blg-metin: #1F2023; --blg-metin-ikincil: #555759; /* 5.08:1 WCAG AA ✓ (eski: #777A7D 3.02:1 ✗) */ --blg-metin-ucuncul: #737679; /* 4.52:1 WCAG AA ✓ (eski rgba 65% ≈ 3.5:1 ✗) */ /* --- Koyu zemin (footer, hero overlay) --- */ --blg-koyu: #1F2023; /* Ruler --bb-dark */ /* --- Alias token'lar (blog + rehber sayfaları) --- */ --blg-yuzey: #E6E6E4; --blg-sinir: rgba(0, 0, 0, 0.08); --blg-metin-birincil: #1F2023; --blg-radius-sm: 4px; --blg-radius-md: 8px; --blg-radius-lg: 14px; --blg-text-xs: 12px; --blg-text-sm: 14px; --blg-text-base: 16px; --blg-text-lg: 18px; --blg-text-xl: 20px; /* --- Ayırıcı ve kenarlık --- */ --blg-cizgi: rgba(0, 0, 0, 0.08); --blg-cizgi-2: rgba(0, 0, 0, 0.12); --blg-cizgi-altin: rgba(155, 123, 90, 0.30); /* --- Durum renkleri --- */ --blg-basari: #22C55E; --blg-uyari: #F59E0B; --blg-hata: #EF4444; --blg-bilgi: #3B82F6; /* --- Overlay --- */ --blg-overlay: rgba(31, 32, 35, 0.90); --blg-overlay-hafif: rgba(31, 32, 35, 0.65); /* ============================================================ TİPOGRAFİ ============================================================ */ --blg-font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --blg-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --blg-font-mono: 'Fira Code', 'Courier New', monospace; /* Boyut skalası — clamp(min, tercih, max) */ --blg-h1: clamp(38px, 5.2vw, 72px); --blg-h2: clamp(28px, 3.2vw, 46px); --blg-h3: clamp(20px, 2vw, 26px); --blg-h4: 20px; --blg-govde: 16px; --blg-kucuk: 14px; --blg-mini: 12px; --blg-kayan-yukseklik-h1: 1.05; --blg-kayan-yukseklik-h2: 1.12; --blg-kayan-yukseklik-h3: 1.25; --blg-kayan-yukseklik: 1.8; --blg-harf-aralik-eyebrow: 0.2em; /* ============================================================ BOŞLUK SİSTEMİ (4px baz) ============================================================ */ --blg-bosluk-1: 4px; --blg-bosluk-2: 8px; --blg-bosluk-3: 12px; --blg-bosluk-4: 16px; --blg-bosluk-5: 20px; --blg-bosluk-6: 24px; --blg-bosluk-8: 32px; --blg-bosluk-10: 40px; --blg-bosluk-12: 48px; --blg-bosluk-16: 64px; --blg-bosluk-20: 80px; --blg-bosluk-24: 96px; --blg-bosluk-32: 128px; /* Bölüm dikey boşlukları */ --blg-bolum-y: 120px; --blg-kart-ic: 32px; --blg-grid-gap: 28px; /* ============================================================ LAYOUT ============================================================ */ --blg-max-genislik: 1280px; --blg-max-genislik-dar: 900px; --blg-max-genislik-cok-dar: 680px; --blg-header-yukseklik: 113px; --blg-header-yukseklik-mobil: 70px; /* ============================================================ SINIR YARIÇAPLARI ============================================================ */ /* Hukuk firması: sıkı, kurumsal köşeler */ --blg-yaricap: 4px; --blg-yaricap-sm: 2px; --blg-yaricap-lg: 8px; --blg-yaricap-tam: 9999px; /* ============================================================ GÖLGE SİSTEMİ ============================================================ */ --blg-golge-sm: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px -16px rgba(0, 0, 0, 0.10); --blg-golge: 0 4px 12px rgba(0, 0, 0, 0.07), 0 18px 40px -20px rgba(0, 0, 0, 0.13); --blg-golge-lg: 0 8px 24px rgba(0, 0, 0, 0.09), 0 32px 64px -24px rgba(0, 0, 0, 0.16); /* ============================================================ ANİMASYON SÜRELERİ ============================================================ */ --blg-gecis-hizli: 150ms; --blg-gecis: 250ms; --blg-gecis-yavas: 400ms; --blg-gecis-ease: cubic-bezier(0.4, 0, 0.2, 1); --blg-gecis-giren: cubic-bezier(0, 0, 0.2, 1); --blg-gecis-cikan: cubic-bezier(0.4, 0, 1, 1); /* ============================================================ Z-INDEX KATMANLARI ============================================================ */ --blg-z-dip: -1; --blg-z-normal: 0; --blg-z-yukselti: 10; --blg-z-yapismali: 100; --blg-z-modal: 200; --blg-z-bildirim: 300; --blg-z-tooltip: 400; /* --- Alias token'lar ek --- */ --blg-konteyner-max: var(--blg-max-genislik); --blg-konteyner-ici: clamp(16px, 5vw, 80px); --blg-arkaplan: var(--blg-lacivert); --blg-bosluk-7: 28px; --blg-yaricap-md: var(--blg-yaricap-lg); --blg-noise-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); /* --- Gradyan tokenlar --- */ --blg-gradient-lacivert: linear-gradient(135deg, #0A1628 0%, #1a3a5c 100%); --blg-gradient-mor: linear-gradient(135deg, #1a0a28 0%, #3d1a5c 100%); --blg-gradient-yesil: linear-gradient(135deg, #0a1a28 0%, #1a3828 100%); --blg-gradient-altin: linear-gradient(135deg, #1a1a0a 0%, #3a3010 100%); /* ============================================================ BREAKPOINT REFERANSLARI (JS için data attribute olarak) CSS media query'lerde doğrudan kullanılamaz — referans amaçlı ============================================================ */ /* mobil: 375px */ /* tablet: 768px */ /* masaustu: 1024px */ /* genis: 1280px */ } /* ============================================================ YOĞUNLUK VARYANTALARI ============================================================ */ [data-yogunluk="standart"] { --blg-bolum-y: 120px; --blg-grid-gap: 28px; --blg-kart-ic: 32px; } [data-yogunluk="genis"] { --blg-bolum-y: 160px; --blg-grid-gap: 40px; --blg-kart-ic: 40px; } [data-yogunluk="dar"] { --blg-bolum-y: 72px; --blg-grid-gap: 18px; --blg-kart-ic: 22px; }