/* ========================================================================== Synaptix AI — Design System (tokens + base + utilities) -------------------------------------------------------------------------- Tek kaynak tasarım sistemi. Build adımı yok: saf CSS custom properties. YÜKLEME SIRASI 1) design-system.css (bu dosya — token + base + utility) 2) components.css (bileşen katmanı, ds- öneki ile) 3) sayfaya özel CSS (legacy: styles.css, auth-styles.css, ...) KAPSAM / ÇAKIŞMA POLİTİKASI - Token'lar global (:root) tanımlıdır, hiçbir legacy kuralı ezmez. - Element seviyesi base stilleri SADECE `` altında çalışır. Böylece bu dosya mevcut sayfalara eklendiğinde hiçbir şeyi bozmaz. - Tüm bileşen/utility sınıfları `ds-` önekiyle isimlendirilmiştir. MARKA RENGİ TÜREVİ assets/light_logo.png + assets/dark_logo.png piksel analizi (canvas, doygunluğu >35% olan ~125k piksel, 10° hue kovaları) baskın tonu her iki logoda da 230° olarak verdi (ikincil menekşe kuyruğu 250–260°). manifest.json theme_color (#2563eb = hue 221) ve styles.css --primary-color (#6366f1 = hue 239) bu 230° ekseninin iki yanında; 230° ikisinin de ortak paydası olarak seçildi. ========================================================================== */ /* ========================================================================== 1. PRIMITIVE TOKENS ========================================================================== */ :root { /* ---- Marka skalası — hue 230° (logodan türetildi) ------------------- */ --brand-50: #f0f2ff; /* hsl(230 100% 97%) */ --brand-100: #dce2fe; /* hsl(230 96% 93%) */ --brand-200: #bac5fd; /* hsl(230 93% 86%) */ --brand-300: #8699f9; /* hsl(230 90% 75%) */ --brand-400: #4a66f2; /* hsl(230 87% 62%) — beyaz metinle 4.69:1 */ --brand-500: #2c4ced; /* hsl(230 84% 55%) — beyaz metinle 6.24:1 */ --brand-600: #1a38d1; /* hsl(230 78% 46%) */ --brand-700: #1a31a2; /* hsl(230 72% 37%) */ --brand-800: #19297b; /* hsl(230 66% 29%) */ --brand-900: #152056; /* hsl(230 60% 21%) */ /* ---- İkincil marka tonu — logo halkasının menekşe kuyruğu (258°) ---- */ --violet-100: #e6dffe; --violet-300: #b399f9; --violet-500: #7c3ff0; --violet-700: #4d1fa8; /* ---- Ikincil aksan skalasi — turkuaz / camgobegi (hue 186°) --------- Referans arayuz mavi birincil + turkuaz ikincil kullanir: turkuaz ikon dolgularinda, istatistik vurgularinda ve "ikinci eylem" butonunda gorunur. 186°, marka mavisinin (230°) 44° otesinde analog-soguk bir tondur; yan yana durduklarinda catismaz, ayrisir. Basamaklar WCAG icin olculdu: teal-400 3.37:1 beyazda -> yalniz DEKORATIF dolgu (1.4.11) teal-500 5.07:1 beyazda -> beyaz etiketli dolu buton (1.4.3) teal-600 7.26:1 beyazda -> baglanti / metin rengi teal-300 9.72:1 koyu yuzeyde -> dark mod dolgusu */ --teal-50: #f2fcfd; /* hsl(186 70% 97%) */ --teal-100: #d9f4f7; /* hsl(186 66% 91%) */ --teal-200: #a9e3ea; /* hsl(186 60% 79%) */ --teal-300: #66cbd6; /* hsl(186 58% 62%) */ --teal-400: #199aa9; /* hsl(186 74% 38%) */ --teal-500: #097a86; /* hsl(186 88% 28%) */ --teal-600: #06606b; /* hsl(186 90% 22%) */ --teal-700: #054c54; /* hsl(186 88% 17.5%) */ --teal-800: #063a3f; /* hsl(186 84% 13.5%) */ --teal-900: #06292d; /* hsl(186 78% 10%) */ /* ---- Nötr skala — saf gri DEĞİL, 230° marka tonundan doygunluk alır -- */ --neutral-50: #f8f9fc; /* hsl(230 40% 98%) */ --neutral-100: #f0f1f7; /* hsl(230 34% 95.5%) */ --neutral-200: #e2e4ee; /* hsl(230 28% 91%) */ --neutral-300: #c7cadb; /* hsl(230 22% 82%) */ --neutral-400: #878da8; /* hsl(230 16% 59.5%) — beyazda 3.24:1 (UI sınırı) */ --neutral-500: #656a86; /* hsl(230 14% 46%) — beyazda 5.24:1 */ --neutral-600: #4f546d; /* hsl(230 16% 37%) — beyazda 7.44:1 */ --neutral-700: #343950; /* hsl(230 21% 26%) */ --neutral-800: #1e2236; /* hsl(230 28% 16.5%) */ --neutral-900: #101323; /* hsl(230 36% 10%) */ --neutral-950: #090c18; /* hsl(230 44% 6.5%) — dark mod zemini */ /* ---- Durum skalaları ------------------------------------------------ */ --success-50: #e9fbf5; --success-100: #ccf5e6; --success-200: #9de7cc; --success-300: #61d1a8; --success-400: #29ae7d; --success-500: #189164; --success-600: #0f7650; --success-700: #0b6041; --success-800: #094931; --success-900: #083525; --warning-50: #fef4e1; --warning-100: #fde4ba; --warning-200: #facd80; --warning-300: #f5b13d; --warning-400: #e6970f; --warning-500: #ba7908; --warning-600: #996305; --warning-700: #794f06; --warning-800: #5f3f07; --warning-900: #462f07; --danger-50: #feecec; --danger-100: #fdd8d9; --danger-200: #fab2b5; --danger-300: #f57f83; --danger-400: #ef4d52; --danger-500: #e31c23; --danger-600: #ba1c21; --danger-700: #95181c; --danger-800: #741619; --danger-900: #581316; --info-50: #e7f7fe; --info-100: #c4ebfd; --info-200: #94d9f9; --info-300: #52c1f4; --info-400: #0fa2e6; --info-500: #087eb5; --info-600: #056794; --info-700: #065174; --info-800: #07405a; --info-900: #073246; /* ---- Sabitler ------------------------------------------------------- */ --white: #ffffff; --black: #000000; /* ====================================================================== TİPOGRAFİ Sistem font yığını. Google Fonts YOK (render-blocking; ayrıca projedeki "Cairo for Arabic" yüklemesi artık desteklenmeyen bir dil içindi). Yığındaki her aile Latin Extended-A kapsar → ğ ı ş İ ö ü ç Ğ Ş Ç doğru render edilir (Segoe UI, Roboto, Noto Sans, Liberation Sans, Arial). ====================================================================== */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Modüler ölçek — taban 1rem (16px), oran 1.25 (majör üçlü). xs/sm okunabilirlik için ölçekten sapar (1.25 iki basamak aşağıda 10.24px verirdi); ölçek base'den YUKARI doğru birebir 1.25'tir. */ --text-xs: 0.75rem; /* 12px — yardımcı metin, etiket */ --text-sm: 0.875rem; /* 14px — ikincil gövde */ --text-base: 1rem; /* 16px — gövde */ --text-lg: 1.25rem; /* 20px — 1.25^1 */ --text-xl: 1.5625rem; /* 25px — 1.25^2 */ --text-2xl: 1.9531rem; /* 31.25px — 1.25^3 */ --text-3xl: 2.4414rem; /* 39.06px — 1.25^4 */ --text-4xl: 3.0518rem; /* 48.83px — 1.25^5 */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Boşluk — 4px tabanlı ------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ---- Yarıçap --------------------------------------------------------- */ /* Referans olcu: buton 6–8px, kart 8–12px, panel 16px. Onceki degerler (10/14/20/28) daha yuvarlak, daha "tuketici uygulamasi" hissi veriyordu; acik-oncelikli kurumsal gorunum daha dar yaricapla okunuyor. */ --radius-sm: 6px; /* rozet, kucuk giris */ --radius-md: 8px; /* buton, form alani */ --radius-lg: 12px; /* kart, tablo kabi */ --radius-xl: 16px; /* modal, buyuk panel */ --radius-2xl: 24px; /* hero gorsel cercevesi */ --radius-full: 9999px; /* ---- Dokunma hedefi (WCAG 2.1 AA — 2.5.5 / 2.5.8) ------------------- */ --tap-target: 44px; /* ---- Hareket --------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; /* ---- Katmanlar ------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 1000; --z-sticky: 1100; --z-overlay: 1200; --z-modal: 1300; --z-toast: 1400; --z-tooltip: 1500; /* ---- Ölçüler ---------------------------------------------------------- */ --container-sm: 640px; --container-md: 820px; --container-lg: 1080px; --container-xl: 1280px; --container-content: 1200px; /* pazarlama sayfasi ana konteyneri */ --measure: 68ch; /* okunabilir satır uzunluğu */ /* ---- Bolum ritmi (dikey) --------------------------------------------- Referansin nefes araligi: bolum arasi 60–80px, hero 80–120px. Mobilde .ds-section / .ds-hero-pad bunlari otomatik daraltir. */ --section-y: 5rem; /* 80px — standart bolum dolgusu */ --section-y-sm: 3.75rem; /* 60px — siki bolum (logo seridi, CTA bandi) */ --hero-y: 6.5rem; /* 104px — hero ust/alt dolgusu */ --card-pad: var(--space-6); /* 24px — kart ici standart */ --card-pad-lg: var(--space-10); /* 40px — genis kart / ozellik blogu */ /* ====================================================================== AKISKAN OLCEK — 360px → 1920px arasi kesintisiz ---------------------------------------------------------------------- NEDEN clamp(): sabit --text-* basamaklari kirilim noktasinda ZIPLAR; 360px ile 390px arasinda ayni 39px baslik birinde tasar, digerinde tasmaz. clamp() araya SUREKLI bir egri koyar: her genislikte tek bir dogru deger vardir, kirilim noktasi gerektirmez. TABAN VE TAVAN NASIL SECILDI Taban = 360px'te olculen deger (en dar desteklenen cihaz). Tavan = 1280px'te olculen deger; 1280 uzerinde BUYUMEZ. Neden: 1280'den sonra buyumeye devam etseydi 1920px'te govde metni 21px'e cikardi — satir uzunlugu --measure (68ch) ile sinirli oldugu icin bu yalnizca daha az kelime/satir verir, okunabilirligi ARTIRMAZ. Basliklar da 1280'de zaten hiyerarsiyi kurmus olur. Egim = (tavan - taban) / (1280px - 360px), vw cinsinden. ERISILEBILIRLIK (WCAG 1.4.4 — Resize text %200) Her clamp'in vw terimi bir rem terimiyle TOPLANIR (`0.75rem + 1.2vw` gibi), yalniz vw DEGILDIR. Saf vw kullanilsaydi kullanici tarayici yazi boyutunu buyuttugunde metin HIC buyumezdi ve 1.4.4 ihlal olurdu. rem terimi kullanici tercihini her zaman gecirir. KULLANIM Akiskan olcek BASLIK ve BOLUM BOSLUGU icindir. Govde metni, etiket, rozet gibi kucuk basamaklar SABIT kalir (--text-sm/base): onlarin 360px'te de 1920px'te de ayni olmasi gerekir, yoksa arayuz "nefes alip veren" bir his verir. Bu yuzden --step--1 / --step-0 dar bir araliktadir. ====================================================================== */ /* Tip olcegi — 1.25 orani korunur, basamaklar arasi akiskan gecis. */ --step--1: clamp(0.8125rem, 0.7880rem + 0.1087vw, 0.875rem); /* 13 → 14 */ --step-0: clamp(0.9375rem, 0.9130rem + 0.1087vw, 1rem); /* 15 → 16 */ --step-1: clamp(1.0625rem, 0.9891rem + 0.3261vw, 1.25rem); /* 17 → 20 */ --step-2: clamp(1.25rem, 1.1277rem + 0.5435vw, 1.5625rem); /* 20 → 25 */ --step-3: clamp(1.5rem, 1.1317rem + 1.6370vw, 2.4414rem); /* 24 → 39.06 */ --step-4: clamp(1.75rem, 1.2406rem + 2.2641vw, 3.0518rem); /* 28 → 48.83 */ --step-5: clamp(2rem, 1.3152rem + 3.0435vw, 3.75rem); /* 32 → 60 */ /* Bosluk — bolum ritmi ve kart dolgusu da akiskan olmali, yoksa 1920px'te bolumler sikisik, 360px'te asiri genis durur. */ --fluid-2: clamp(0.5rem, 0.4511rem + 0.2174vw, 0.625rem); /* 8 → 10 */ --fluid-3: clamp(0.75rem, 0.6766rem + 0.3261vw, 0.9375rem); /* 12 → 15 */ --fluid-4: clamp(1rem, 0.8777rem + 0.5435vw, 1.3125rem); /* 16 → 21 */ --fluid-6: clamp(1.25rem, 1.0054rem + 1.0870vw, 1.875rem); /* 20 → 30 */ --fluid-8: clamp(1.5rem, 0.9864rem + 2.2826vw, 2.8125rem); /* 24 → 45 */ --fluid-12: clamp(2.5rem, 1.8152rem + 3.0435vw, 4.25rem); /* 40 → 68 */ --fluid-16: clamp(3rem, 2.0217rem + 4.3478vw, 5.5rem); /* 48 → 88 */ /* Kenar bosluğu (gutter) — konteynerin sayfa kenarina mesafesi. 360px'te 16px, 1280+'da 32px. Daha dari 360px'te metni kenara yapistirir, daha genisi dar ekranda okunur alani yer. */ --gutter: clamp(1rem, 0.6087rem + 1.7391vw, 2rem); } /* ========================================================================== 1b. KIRILIM NOKTALARI — TEK KAYNAK -------------------------------------------------------------------------- CSS'te @media sorgusu custom property OKUYAMAZ (media query'ler cascade'den once degerlendirilir). Bu yuzden asagidaki degerler token DEGIL, SOZLESME: bu projede yazilan her @media bu listeden bir deger kullanir, arada yeni sayi UYDURULMAZ. Token olarak da yayinlanirlar ki JS (ds-motion-fx.js, site-nav.js) ayni sayilari matchMedia'ya verebilsin ve CSS ile JS ayrisamasin. --bp-xs 360px kucuk telefon (Galaxy S8/A-serisi) — TABAN, alt sinir --bp-sm 390px modern telefon (iPhone 12–15) --bp-md 768px tablet dikey — tek kolon biter, 2 kolon baslar --bp-lg 1024px tablet yatay / kucuk dizustu — yan menu gorunur --bp-xl 1280px masaustu — akiskan olcek TAVANA ulasir --bp-2xl 1440px genis masaustu — konteyner sabitlenir --bp-3xl 1920px full HD — yalnizca bosluk artar, icerik genislemez YON: mobil-once. Bilesen varsayilani DAR ekrandir; `min-width` sorgusu genisletir. Istisna: legacy sayfalarla uyum icin bu dosyadaki birkac eski kural hala `max-width: 640px` kullanir (asagida isaretli). ========================================================================== */ :root { --bp-xs: 360px; --bp-sm: 390px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1440px; --bp-3xl: 1920px; } /* ========================================================================== 2. SEMANTİK KATMAN — LIGHT (varsayılan) ========================================================================== */ :root { color-scheme: light; /* Acik-oncelikli yon: sayfa zemini BEYAZ, bolum ayrimi cok acik griyle (--bg-band) yapilir. Onceki --bg (neutral-50) tum sayfayi hafif gri yapiyordu; o zaman beyaz kart ile zemin arasindaki fark tek gorsel ayracti. Artik ayrim kenarlik + olculu golge, zemin beyaz kaliyor. */ --bg: var(--white); --bg-elevated: var(--white); --bg-sunken: var(--neutral-50); --bg-band: var(--neutral-50); /* donusumlu bolum bandi */ --surface: var(--white); --surface-hover: var(--neutral-50); --surface-active:var(--neutral-100); --surface-muted: var(--neutral-100); --border: var(--neutral-200); --border-strong: var(--neutral-400); /* etkileşimli kenarlık — 3.16:1 */ --text: var(--neutral-900); /* 17.5:1 */ --text-muted: var(--neutral-600); /* 7.1:1 */ --text-subtle: var(--neutral-500); /* 4.7:1 */ --text-inverse: var(--neutral-50); --accent: var(--brand-500); --accent-hover: var(--brand-600); --accent-active: var(--brand-700); --accent-fg: var(--white); /* accent üstünde 6.24:1 */ --accent-text: var(--brand-600); /* bg üstünde link rengi 7.9:1 */ --accent-soft: var(--brand-50); --accent-soft-border: var(--brand-200); /* Marka gradyani — AKAN yuzeyde (kart, form, gezinti) duran DOLU birincil ogeler icin. --accent ile AYNI sozlesmeyi izler: acik temada koyu doygun gecis + acik etiket, koyu temada PARLAK gecis + koyu etiket. Kalici koyu marka seritlerinin (hero / CTA / footer) ustundeki dolgular bunu KULLANMAZ; onlar her iki temada sabit kalir. */ --accent-gradient: linear-gradient(135deg, var(--brand-500) 0%, var(--violet-500) 100%); --accent-gradient-fg: var(--white); /* Ikincil aksan — turkuaz. --accent ile AYNI sozlesme: dolgu / hover / basili / etiket / metin / yumusak zemin. -vivid yalniz dekoratiftir (ikon dolgusu, grafik konturu): metin tasimaz; 3:1'i gecer, 4.5:1'i gecmez, bu yuzden uzerine yazi KOYULMAZ. */ --accent-2: var(--teal-500); --accent-2-hover: var(--teal-600); --accent-2-active: var(--teal-700); --accent-2-fg: var(--white); /* dolgu ustunde 5.07:1 */ --accent-2-text: var(--teal-600); /* zemin ustunde 7.26:1 */ --accent-2-soft: var(--teal-50); --accent-2-soft-border: var(--teal-200); --accent-2-vivid: var(--teal-400); /* DEKORATIF — metin koymayin */ --focus-ring: var(--brand-500); --focus-ring-offset: var(--bg); --focus-ring-width: 3px; --selection-bg: var(--brand-200); --selection-fg: var(--brand-900); /* Durum üçlüleri: bg / border / fg */ --success-bg: var(--success-50); --success-border: var(--success-300); --success-fg: var(--success-700); --success-solid: var(--success-600); --success-solid-fg: var(--white); --warning-bg: var(--warning-50); --warning-border: var(--warning-300); --warning-fg: var(--warning-800); --warning-solid: var(--warning-600); --warning-solid-fg: var(--white); --danger-bg: var(--danger-50); --danger-border: var(--danger-300); --danger-fg: var(--danger-700); --danger-solid: var(--danger-600); --danger-solid-fg:var(--white); --info-bg: var(--info-50); --info-border: var(--info-300); --info-fg: var(--info-700); --info-solid: var(--info-600); --info-solid-fg: var(--white); /* Gölge tabanı — SİYAH DEĞİL: marka tonunun koyu ucu (#1a2247) */ /* Golge tabani SIYAH DEGIL: marka tonunun koyu ucu (#1a2247). Alfalar referansin %10–15 bandina cekildi; blur da kuculdugu icin (bkz. bolum 4) kucuk basamaklarda alfa hafif ARTTI, buyuklerde AZALDI. */ --shadow-rgb: 26, 34, 71; --shadow-a1: 0.06; --shadow-a2: 0.10; --shadow-a3: 0.13; --shadow-a4: 0.16; --shadow-a5: 0.20; --overlay-bg: rgba(16, 19, 35, 0.55); --skeleton-base: var(--neutral-200); --skeleton-sheen: rgba(255, 255, 255, 0.75); } /* ========================================================================== 3. SEMANTİK KATMAN — DARK -------------------------------------------------------------------------- İki mekanizma birlikte desteklenir: a) OS tercihi (kullanıcı açıkça seçim yapmadıysa) b) theme-sync.js'in yazdığı `html[data-theme="dark"]` + `body.dark-mode` theme-sync.js her ikisini de set eder (applyTheme(): setAttribute 'data-theme' + body.classList 'dark-mode'/'light-mode'), storage anahtarı `siteTheme`. Bu dosya ikisini de tanır, yeni mekanizma UYDURMAZ. ========================================================================== */ /* (a) OS tercihi — kullanıcı açıkça "light" seçmediyse */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: var(--neutral-950); --bg-elevated: var(--neutral-900); --bg-sunken: #05070f; --bg-band: #0d1020; --surface: var(--neutral-900); --surface-hover: var(--neutral-800); --surface-active:var(--neutral-700); --surface-muted: var(--neutral-800); --border: var(--neutral-700); --border-strong: var(--neutral-500); --text: var(--neutral-50); --text-muted: var(--neutral-300); --text-subtle: var(--neutral-400); --text-inverse: var(--neutral-900); /* Dark modda parlak dolgu + koyu etiket: brand-500 (#2c4ced) koyu yüzeyler üzerinde 2.94:1'de kalıyordu (WCAG 1.4.11 sınırı 3:1). brand-300 dolgu hem sınırı (6.9:1) hem etiketi (7.4:1) geçirir. */ --accent: var(--brand-300); --accent-hover: var(--brand-200); --accent-active: var(--brand-400); --accent-fg: var(--neutral-950); --accent-text: var(--brand-300); --accent-soft: #131a3d; --accent-soft-border: var(--brand-800); /* Dark: --accent ile ayni mantik — parlak gecis + koyu etiket. */ --accent-gradient: linear-gradient(135deg, var(--brand-300) 0%, var(--violet-300) 100%); --accent-gradient-fg: var(--neutral-950); /* Dark: accent ile ayni mantik — parlak dolgu + koyu etiket. teal-500 koyu yuzeyde 3.63:1'de kaliyordu (metin icin yetersiz); teal-300 hem dolgu sinirini (9.72:1) hem etiketi (10.28:1) gecer. */ --accent-2: var(--teal-300); --accent-2-hover: var(--teal-200); --accent-2-active: var(--teal-400); --accent-2-fg: var(--neutral-950); --accent-2-text: var(--teal-300); --accent-2-soft: #07272b; --accent-2-soft-border: var(--teal-800); --accent-2-vivid: var(--teal-300); --focus-ring: var(--brand-300); --focus-ring-offset: var(--bg); --selection-bg: var(--brand-700); --selection-fg: var(--brand-50); --success-bg: #0b1f19; --success-border: var(--success-800); --success-fg: var(--success-200); /* Dark modda dolu durum rozetleri de parlak dolgu + koyu etiket alır (accent ile tutarlı). success-500 + beyaz yalnızca 3.98:1 veriyordu. */ --success-solid: var(--success-400); --success-solid-fg: var(--neutral-950); --warning-bg: #201808; --warning-border: var(--warning-800); --warning-fg: var(--warning-200); --warning-solid: var(--warning-400); --warning-solid-fg: var(--neutral-950); --danger-bg: #210f12; --danger-border: var(--danger-800); --danger-fg: var(--danger-200); --danger-solid: var(--danger-400); --danger-solid-fg: var(--neutral-950); --info-bg: #071a24; --info-border: var(--info-800); --info-fg: var(--info-200); --info-solid: var(--info-400); --info-solid-fg: var(--neutral-950); --shadow-rgb: 2, 4, 12; --shadow-a1: 0.28; --shadow-a2: 0.36; --shadow-a3: 0.44; --shadow-a4: 0.52; --shadow-a5: 0.60; --overlay-bg: rgba(3, 5, 14, 0.68); --skeleton-base: var(--neutral-800); --skeleton-sheen: rgba(138, 144, 170, 0.20); } } /* (b) Açık kullanıcı seçimi — theme-sync.js ile uyumlu selector'ler */ :root[data-theme="dark"], [data-theme="dark"], body.dark-mode, .ds-theme-dark { color-scheme: dark; --bg: var(--neutral-950); --bg-elevated: var(--neutral-900); --bg-sunken: #05070f; --bg-band: #0d1020; --surface: var(--neutral-900); --surface-hover: var(--neutral-800); --surface-active:var(--neutral-700); --surface-muted: var(--neutral-800); --border: var(--neutral-700); --border-strong: var(--neutral-500); --text: var(--neutral-50); --text-muted: var(--neutral-300); --text-subtle: var(--neutral-400); --text-inverse: var(--neutral-900); /* Dark modda parlak dolgu + koyu etiket — gerekçe yukarıda. */ --accent: var(--brand-300); --accent-hover: var(--brand-200); --accent-active: var(--brand-400); --accent-fg: var(--neutral-950); --accent-text: var(--brand-300); --accent-soft: #131a3d; --accent-soft-border: var(--brand-800); /* Dark: --accent ile ayni mantik — parlak gecis + koyu etiket. */ --accent-gradient: linear-gradient(135deg, var(--brand-300) 0%, var(--violet-300) 100%); --accent-gradient-fg: var(--neutral-950); /* Dark: accent ile ayni mantik — parlak dolgu + koyu etiket (gerekce yukaridaki @media blogunda). */ --accent-2: var(--teal-300); --accent-2-hover: var(--teal-200); --accent-2-active: var(--teal-400); --accent-2-fg: var(--neutral-950); --accent-2-text: var(--teal-300); --accent-2-soft: #07272b; --accent-2-soft-border: var(--teal-800); --accent-2-vivid: var(--teal-300); --focus-ring: var(--brand-300); --focus-ring-offset: var(--bg); --selection-bg: var(--brand-700); --selection-fg: var(--brand-50); --success-bg: #0b1f19; --success-border: var(--success-800); --success-fg: var(--success-200); /* Dark modda dolu durum rozetleri de parlak dolgu + koyu etiket alır (accent ile tutarlı). success-500 + beyaz yalnızca 3.98:1 veriyordu. */ --success-solid: var(--success-400); --success-solid-fg: var(--neutral-950); --warning-bg: #201808; --warning-border: var(--warning-800); --warning-fg: var(--warning-200); --warning-solid: var(--warning-400); --warning-solid-fg: var(--neutral-950); --danger-bg: #210f12; --danger-border: var(--danger-800); --danger-fg: var(--danger-200); --danger-solid: var(--danger-400); --danger-solid-fg: var(--neutral-950); --info-bg: #071a24; --info-border: var(--info-800); --info-fg: var(--info-200); --info-solid: var(--info-400); --info-solid-fg: var(--neutral-950); --shadow-rgb: 2, 4, 12; --shadow-a1: 0.28; --shadow-a2: 0.36; --shadow-a3: 0.44; --shadow-a4: 0.52; --shadow-a5: 0.60; --overlay-bg: rgba(3, 5, 14, 0.68); --skeleton-base: var(--neutral-800); --skeleton-sheen: rgba(138, 144, 170, 0.20); } /* (c) Açık "light" seçimi OS tercihini ezer. `:root[data-theme="light"]` (0,2,0) medya sorgusundaki `:root:not([data-theme="light"])` (0,2,0) ile eşit spesifiklikte olduğu için kaynak sırası belirleyicidir — bu blok sonra geldiği için kazanır. */ :root[data-theme="light"], body.light-mode, .ds-theme-light { color-scheme: light; /* Acik-oncelikli yon: sayfa zemini BEYAZ, bolum ayrimi cok acik griyle (--bg-band) yapilir. Onceki --bg (neutral-50) tum sayfayi hafif gri yapiyordu; o zaman beyaz kart ile zemin arasindaki fark tek gorsel ayracti. Artik ayrim kenarlik + olculu golge, zemin beyaz kaliyor. */ --bg: var(--white); --bg-elevated: var(--white); --bg-sunken: var(--neutral-50); --bg-band: var(--neutral-50); /* donusumlu bolum bandi */ --surface: var(--white); --surface-hover: var(--neutral-50); --surface-active:var(--neutral-100); --surface-muted: var(--neutral-100); --border: var(--neutral-200); --border-strong: var(--neutral-400); --text: var(--neutral-900); --text-muted: var(--neutral-600); --text-subtle: var(--neutral-500); --text-inverse: var(--neutral-50); --accent: var(--brand-500); --accent-hover: var(--brand-600); --accent-active: var(--brand-700); --accent-fg: var(--white); --accent-text: var(--brand-600); --accent-soft: var(--brand-50); --accent-soft-border: var(--brand-200); /* Marka gradyani — AKAN yuzeyde (kart, form, gezinti) duran DOLU birincil ogeler icin. --accent ile AYNI sozlesmeyi izler: acik temada koyu doygun gecis + acik etiket, koyu temada PARLAK gecis + koyu etiket. Kalici koyu marka seritlerinin (hero / CTA / footer) ustundeki dolgular bunu KULLANMAZ; onlar her iki temada sabit kalir. */ --accent-gradient: linear-gradient(135deg, var(--brand-500) 0%, var(--violet-500) 100%); --accent-gradient-fg: var(--white); /* Ikincil aksan — turkuaz. --accent ile AYNI sozlesme: dolgu / hover / basili / etiket / metin / yumusak zemin. -vivid yalniz dekoratiftir (ikon dolgusu, grafik konturu): metin tasimaz; 3:1'i gecer, 4.5:1'i gecmez, bu yuzden uzerine yazi KOYULMAZ. */ --accent-2: var(--teal-500); --accent-2-hover: var(--teal-600); --accent-2-active: var(--teal-700); --accent-2-fg: var(--white); /* dolgu ustunde 5.07:1 */ --accent-2-text: var(--teal-600); /* zemin ustunde 7.26:1 */ --accent-2-soft: var(--teal-50); --accent-2-soft-border: var(--teal-200); --accent-2-vivid: var(--teal-400); /* DEKORATIF — metin koymayin */ --focus-ring: var(--brand-500); --focus-ring-offset: var(--bg); --selection-bg: var(--brand-200); --selection-fg: var(--brand-900); --success-bg: var(--success-50); --success-border: var(--success-300); --success-fg: var(--success-700); --success-solid: var(--success-600); --success-solid-fg: var(--white); --warning-bg: var(--warning-50); --warning-border: var(--warning-300); --warning-fg: var(--warning-800); --warning-solid: var(--warning-600); --warning-solid-fg: var(--white); --danger-bg: var(--danger-50); --danger-border: var(--danger-300); --danger-fg: var(--danger-700); --danger-solid: var(--danger-600); --danger-solid-fg:var(--white); --info-bg: var(--info-50); --info-border: var(--info-300); --info-fg: var(--info-700); --info-solid: var(--info-600); --info-solid-fg: var(--white); /* Golge tabani SIYAH DEGIL: marka tonunun koyu ucu (#1a2247). Alfalar referansin %10–15 bandina cekildi; blur da kuculdugu icin (bkz. bolum 4) kucuk basamaklarda alfa hafif ARTTI, buyuklerde AZALDI. */ --shadow-rgb: 26, 34, 71; --shadow-a1: 0.06; --shadow-a2: 0.10; --shadow-a3: 0.13; --shadow-a4: 0.16; --shadow-a5: 0.20; --overlay-bg: rgba(16, 19, 35, 0.55); --skeleton-base: var(--neutral-200); --skeleton-sheen: rgba(255, 255, 255, 0.75); } /* ========================================================================== 4. GÖLGELER (semantik tokenlara bağlı → tema ile birlikte değişir) ========================================================================== */ :root { /* Referans olcu: yuzey ayrimi golgeyle DEGIL kenarlikla yapilir; golge yalnizca "bu katman ustte" ipucudur. xs–md 1–3px blur ile neredeyse gorunmez; lg/xl acilir menu ve modal icin ayrilmistir. */ --shadow-xs: 0 1px 1px rgba(var(--shadow-rgb), var(--shadow-a1)); --shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), var(--shadow-a2)); --shadow-md: 0 1px 3px rgba(var(--shadow-rgb), var(--shadow-a2)), 0 1px 2px -1px rgba(var(--shadow-rgb), var(--shadow-a1)); --shadow-lg: 0 4px 10px -3px rgba(var(--shadow-rgb), var(--shadow-a3)), 0 2px 4px -2px rgba(var(--shadow-rgb), var(--shadow-a1)); --shadow-xl: 0 16px 32px -10px rgba(var(--shadow-rgb), var(--shadow-a4)), 0 6px 12px -6px rgba(var(--shadow-rgb), var(--shadow-a2)); --shadow-accent: 0 4px 12px -4px rgba(44, 76, 237, 0.28); --shadow-accent-2: 0 4px 12px -4px rgba(9, 122, 134, 0.28); --shadow-inset: inset 0 1px 2px rgba(var(--shadow-rgb), var(--shadow-a1)); } /* ========================================================================== 5. BASE — SADECE `body.ds` altında (legacy sayfaları bozmaz) ========================================================================== */ body.ds, body.ds *, body.ds *::before, body.ds *::after { box-sizing: border-box; } body.ds { margin: 0; background-color: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; accent-color: var(--accent); tab-size: 4; } html:has(body.ds) { background-color: var(--bg); } body.ds ::selection { background: var(--selection-bg); color: var(--selection-fg); } /* Element seviyesi base stilleri :where() ile sarmalanır: seçici spesifikliğe KATKI YAPMAZ (0,0,1). Böylece `.ds-card-title` gibi bileşen sınıfları bir

üzerinde base başlık boyutunu ezebilir — aksi halde `body.ds h3` (0,1,2) her zaman kazanırdı. / :where(body.ds) h1, :where(body.ds) h2, :where(body.ds) h3, :where(body.ds) h4, :where(body.ds) h5, :where(body.ds) h6 { margin: 0; color: var(--text); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; } :where(body.ds) h1 { font-size: var(--text-4xl); } :where(body.ds) h2 { font-size: var(--text-3xl); } :where(body.ds) h3 { font-size: var(--text-2xl); } :where(body.ds) h4 { font-size: var(--text-xl); } :where(body.ds) h5 { font-size: var(--text-lg); font-weight: var(--weight-semibold); } :where(body.ds) h6 { font-size: var(--text-base); font-weight: var(--weight-semibold); } :where(body.ds) p, :where(body.ds) ul, :where(body.ds) ol, :where(body.ds) dl, :where(body.ds) figure, :where(body.ds) blockquote { margin: 0; } :where(body.ds) p { text-wrap: pretty; } :where(body.ds) a { color: var(--accent-text); text-decoration-color: color-mix(in srgb, var(--accent-text) 40%, transparent); text-underline-offset: 0.18em; transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); } :where(body.ds) a:hover { color: var(--accent-hover); text-decoration-color: currentColor; } :where(body.ds) img, :where(body.ds) svg, :where(body.ds) video, :where(body.ds) canvas { display: block; max-width: 100%; height: auto; } :where(body.ds) code, :where(body.ds) kbd, :where(body.ds) samp, :where(body.ds) pre { font-family: var(--font-mono); font-size: 0.92em; } :where(body.ds) code { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.1em 0.38em; color: var(--text); } :where(body.ds) pre { margin: 0; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; color: var(--text); } :where(body.ds) pre code { background: none; border: 0; padding: 0; } :where(body.ds) hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; } :where(body.ds) button, :where(body.ds) input, :where(body.ds) select, :where(body.ds) textarea { font: inherit; color: inherit; } / ========================================================================== 6. ODAK GÖRÜNÜRLÜĞÜ — WCAG 2.4.7 / 2.4.11 Global uygulanır (erişilebilirlik regresyonu riski taşımaz). ========================================================================== / .ds-focus-ring, body.ds :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible, [class^="ds-"]:focus-visible, [class=" ds-"]:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* Fare ile tıklamada ring gösterme (klavye kullanıcısı için korunur) / body.ds :is(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; } / ========================================================================== 7. ERİŞİLEBİLİRLİK YARDIMCILARI ========================================================================== / / Ekran okuyucuya özel — görsel olarak gizli ama okunabilir / .ds-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } / Odaklanınca görünür hale gelir (skip link kalıbı) / .ds-sr-only-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } / İçeriğe atla bağlantısı / .ds-skip-link { position: fixed; top: var(--space-2); left: var(--space-2); z-index: var(--z-tooltip); display: inline-flex; align-items: center; min-height: var(--tap-target); padding: var(--space-3) var(--space-5); background: var(--accent); color: var(--accent-fg); font-weight: var(--weight-semibold); text-decoration: none; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); transform: translateY(calc(-100% - var(--space-4))); transition: transform var(--dur-base) var(--ease-out); } .ds-skip-link:focus, .ds-skip-link:focus-visible { transform: translateY(0); } / Semantik landmark'lar için yumuşak ayrım / body.ds :is(header[role="banner"], nav[aria-label], main, aside, footer[role="contentinfo"]):focus { outline: none; } body.ds main:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -3px; } / aria-live bölgesi — görsel olarak nötr, akışı bozmaz / .ds-live-region { display: block; min-height: 0; } .ds-live-region:empty { display: none; } / Modal odak tuzağı açıkken arka plan kaydırmayı kilitle / body.ds-scroll-locked { overflow: hidden; / iOS'ta kaydırma sıçramasını engeller / touch-action: none; } / Minimum dokunma hedefi yardımcı sınıfı (WCAG 2.5.8) / .ds-tap-target { min-width: var(--tap-target); min-height: var(--tap-target); } / Küçük ikon butonlar için görünmez ama tıklanabilir alan genişletme / .ds-tap-expand { position: relative; } .ds-tap-expand::after { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, var(--tap-target)); height: max(100%, var(--tap-target)); transform: translate(-50%, -50%); } / Yüksek kontrast / zorlanmış renk modu / @media (forced-colors: active) { .ds-skip-link, [class^="ds-"], [class=" ds-"] { forced-color-adjust: auto; } } /* ========================================================================== 8. LAYOUT UTILITY ========================================================================== / .ds-container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-5); } .ds-container-lg { max-width: var(--container-lg); } .ds-container-md { max-width: var(--container-md); } .ds-container-sm { max-width: var(--container-sm); } .ds-container-content { max-width: var(--container-content); } / --- Bölüm ritmi -------------------------------------------------------- .ds-section standart dikey nefes (80px) .ds-section-sm sıkı bölüm (60px) — logo şeridi, CTA bandı .ds-section-band bir önceki/sonraki bölümden ayrılan çok açık gri zemin .ds-hero-pad hero üst/alt dolgusu (104px) Bant ayrımı KENARLIKLA değil ZEMİNLE yapılır: art arda iki .ds-section-band gelirse ikisi tek bir blok gibi okunur, bu kasıtlıdır. / .ds-section { padding-block: var(--section-y); } .ds-section-sm { padding-block: var(--section-y-sm); } .ds-hero-pad { padding-block: var(--hero-y); } .ds-section-band { background-color: var(--bg-band); border-block: 1px solid var(--border); } @media (max-width: 640px) { .ds-section { padding-block: var(--space-12); } / 48px / .ds-section-sm { padding-block: var(--space-10); } / 40px / .ds-hero-pad { padding-block: var(--space-14); } / 56px / } .ds-stack { display: flex; flex-direction: column; } .ds-row { display: flex; flex-direction: row; align-items: center; } .ds-row-wrap { flex-wrap: wrap; } .ds-center { display: flex; align-items: center; justify-content: center; } .ds-between { display: flex; align-items: center; justify-content: space-between; } .ds-grow { flex: 1 1 auto; min-width: 0; } .ds-shrink-0 { flex-shrink: 0; } .ds-gap-1 { gap: var(--space-1); } .ds-gap-2 { gap: var(--space-2); } .ds-gap-3 { gap: var(--space-3); } .ds-gap-4 { gap: var(--space-4); } .ds-gap-6 { gap: var(--space-6); } .ds-gap-8 { gap: var(--space-8); } .ds-grid { display: grid; gap: var(--space-4); } .ds-grid-auto { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .ds-measure { max-width: var(--measure); } / ========================================================================== 9. TİPOGRAFİ UTILITY ========================================================================== / .ds-text-xs { font-size: var(--text-xs); } .ds-text-sm { font-size: var(--text-sm); } .ds-text-base { font-size: var(--text-base); } .ds-text-lg { font-size: var(--text-lg); } .ds-text-xl { font-size: var(--text-xl); } .ds-text-2xl { font-size: var(--text-2xl); } .ds-text-3xl { font-size: var(--text-3xl); } .ds-text-4xl { font-size: var(--text-4xl); } .ds-leading-tight { line-height: var(--leading-tight); } .ds-leading-normal { line-height: var(--leading-normal); } .ds-leading-relaxed { line-height: var(--leading-relaxed); } .ds-font-medium { font-weight: var(--weight-medium); } .ds-font-semibold { font-weight: var(--weight-semibold); } .ds-font-bold { font-weight: var(--weight-bold); } .ds-font-mono { font-family: var(--font-mono); } .ds-muted { color: var(--text-muted); } .ds-subtle { color: var(--text-subtle); } .ds-accent { color: var(--accent-text); } .ds-eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-text); } .ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } / Marka gradyanı — logodaki mavi→menekşe geçişi / .ds-gradient-text { background: linear-gradient(112deg, var(--brand-500) 0%, var(--violet-500) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } / Gradyan metin fallback: background-clip desteklenmiyorsa okunur kalsın / @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .ds-gradient-text { background: none; color: var(--accent-text); } } / ========================================================================== 10. HAREKET — giriş animasyonları, stagger, shimmer IntersectionObserver ile `.ds-in-view` eklenecek (JS sonraki faz). ========================================================================== / @keyframes ds-fade-up { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes ds-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ds-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes ds-slide-in-right { from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes ds-spin { to { transform: rotate(360deg); } } @keyframes ds-shimmer { from { background-position: -140% 0; } to { background-position: 240% 0; } } @keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes ds-progress-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(320%); } } / --- Görünüme girince animasyon (IntersectionObserver hedefi) --- / .ds-reveal { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--ds-reveal-delay, 0ms); will-change: opacity, transform; } .ds-reveal.ds-in-view { opacity: 1; transform: translate3d(0, 0, 0); } / Stagger: kap üzerine .ds-stagger, çocuklara otomatik gecikme / .ds-stagger > { --ds-reveal-delay: 0ms; } .ds-stagger > :nth-child(1) { --ds-reveal-delay: 0ms; } .ds-stagger > :nth-child(2) { --ds-reveal-delay: 60ms; } .ds-stagger > :nth-child(3) { --ds-reveal-delay: 120ms; } .ds-stagger > :nth-child(4) { --ds-reveal-delay: 180ms; } .ds-stagger > :nth-child(5) { --ds-reveal-delay: 240ms; } .ds-stagger > :nth-child(6) { --ds-reveal-delay: 300ms; } .ds-stagger > :nth-child(7) { --ds-reveal-delay: 360ms; } .ds-stagger > :nth-child(8) { --ds-reveal-delay: 420ms; } .ds-stagger > :nth-child(n + 9) { --ds-reveal-delay: 480ms; } /* Doğrudan çalışan (observer gerekmeyen) giriş animasyonları / .ds-animate-fade-up { animation: ds-fade-up var(--dur-slow) var(--ease-out) both; } .ds-animate-fade-in { animation: ds-fade-in var(--dur-base) var(--ease-out) both; } .ds-animate-scale-in { animation: ds-scale-in var(--dur-base) var(--ease-out) both; } .ds-animate-pulse { animation: ds-pulse 2s var(--ease-in-out) infinite; } / Sayı animasyonu için hedef (count-up JS sonraki faz). Rakamlar sayarken genişlik zıplamasın diye tabular figürler. / .ds-count-up { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: var(--tracking-tight); } / ========================================================================== 11. prefers-reduced-motion — ZORUNLU: tüm hareketi kapat ========================================================================== / @media (prefers-reduced-motion: reduce) { , ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* Gizli kalmasınlar: reveal öğeleri anında görünür olsun / .ds-reveal { opacity: 1 !important; transform: none !important; } / Dönüştürme temelli "his" efektlerini nötrle / .ds-btn:hover, .ds-card:hover, .ds-card-interactive:hover { transform: none !important; } / Shimmer yerine sabit yüzey / .ds-skeleton { animation: none !important; background-image: none !important; } } / ========================================================================== 12. YAZDIRMA ========================================================================== */ @media print { .ds-skip-link, .ds-toast-viewport, .ds-tooltip, .ds-dropdown-menu { display: none !important; } body.ds { background: #ffffff; color: #000000; } }