/* ========================================================================== SmartFiles - tema Kaynak: bu dosya artik iki temali (acik + koyu). Palet, SmartMail panelinin tema sistemiyle (panel/src/theme/tokens.ts, ThemeProvider.tsx) hizalanacak sekilde yeniden noktalandi ki iki urun AYNI aile gibi okunsun - SmartMail baska bir ekibin kod tabani, buraya KOPYALANMADI, yalnizca degerleri referans alindi. SmartFiles'in kendi marka isareti (favicon.svg, header logosu, --sf-gradient-logo) BILEREK degistirilmedi. DESEN - yeni bir --sf-* token eklerken bunu izle: 1. TAM degeri (acik/varsayilan) ciplak `:root` icinde tanimla. 2. Sadece koyudA DEGISEN tokenleri `@media (prefers-color-scheme: dark)` icinde, `:root:not([data-theme="light"])` ile korumali yeniden tanimla (sistem karanliksa ve kullanici acik'i ELLE secmediyse uygulanir). 3. Ayni tokenleri `:root[data-theme="dark"]` icinde TEKRAR tanimla ki kullanicinin ELLE sectigi tema, sistem tercihine her iki yonde de ustun gelsin. Bir rengi SADECE bir media/data-theme blogu icinde tanimlama - ciplak :root her zaman TAM kume icermeli, boylece "javascript once calismadan once" ve "toggle hic dokunulmadan" durumlarinda bile tutarli (acik) bir sonuc olur. Panel bu degerleri `data-theme` ozniteligini document uzerine yazarak degistirir (bkz. panel/src/theme/ThemeProvider.tsx) - JS ile tek tek degisken YAZMAZ, CSS burada isi yapar. ========================================================================== */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02FF, U+1E00-1EFF; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02FF, U+1E00-1EFF; } :root { color-scheme: light; /* ---------------------------------------------------------- tipografi */ --sf-font-sans: "Plus Jakarta Sans", system-ui, "Helvetica Neue", Helvetica, sans-serif; --sf-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --sf-weight-regular: 400; --sf-weight-medium: 500; --sf-weight-semibold:600; /* Tasarimdaki olcek yogun bir dosya yoneticisi icin; govde 12.5px. */ --sf-text-2xs: 9px; --sf-text-xs: 10px; --sf-text-sm: 10.5px; --sf-text-md: 11.5px; --sf-text-base:12.5px; --sf-text-lg: 13px; --sf-text-xl: 14.5px; --sf-text-2xl: 15px; /* -------------------------------------------------------------- zemin SmartMail'in acik paleti (panel/src/theme/tokens.ts -> palette.light). round 31: `--sf-bg` SmartMail'in GERCEK degerinden (f4f1f8) SAPMISTI (f0ecf6 yazilmisti) - Smart360'in canli karsilastirmasiyla duzeltildi. */ --sf-bg: #f4f1f8; --sf-bg2: #faf7fd; /* ------------------------------------------------------------ yuzeyler SmartMail cam-yuzey modeli: yari saydam beyaz katmanlar, arkasindaki --sf-canvas/--sf-bg'nin uzerinde. --sf-surface-raised tek istisna - modal/dropdown gibi ARKASI TAMAMEN ORTULMESI gereken yerler icin tam opak. */ --sf-surface: rgba(255, 255, 255, 0.72); --sf-surface-raised: #ffffff; --sf-surface-sunken: rgba(122, 74, 184, 0.07); --sf-surface-muted: rgba(255, 255, 255, 0.92); --sf-surface-chip: rgba(122, 74, 184, 0.12); /* --------------------------------------------------------------- metin round 31 DUZELTMESI: onceki kademe MAVI-GRI bir aileydi (hue ~205-210) - Smart360'in canli karsilastirmasi bunun SmartMail'in gercek mor-siyah ailesinden (palette.light.text/dim/faint) SAPTIGINI gosterdi. Uc temel kademe (--sf-text/--sf-text-secondary/--sf-text-muted) SmartMail'in text/dim/faint uclerinden simdi GERCEKTEN BIREBIR; aradaki kademeler AYNI mor-siyah ailede (hue ~280) turetildi. */ --sf-text-strong: #120d19; --sf-text: #1b1426; --sf-text-body: #372e47; --sf-text-secondary: #5d5372; --sf-text-muted: #6b6283; --sf-text-subtle: #8981a0; /* Ikon, placeholder, ikincil meta - govde metni icin DEGIL. >=3:1 SAGLANIYOR (olculdu 2026-09-18, WCAG 2.x sRGB): #8e87a2 / --sf-bg (#f4f1f8) = 3.06 #8e87a2 / --sf-bg2 (#faf7fd) = 3.22 #8e87a2 / beyaz = 3.42 Onceki deger #9a93b0 idi ve ayni yorumu tasiyordu ama esigi TUTMUYORDU (2.62 / 2.76 / 2.93) - yani yorum olmayan bir garantiyi vaat ediyordu. SmartFiles-Mobil oturumu olctu ve bildirdi; bagimsiz olarak dogrulandi. Ton korunarak koyulastirildi (%92 olcek), boylece `--sf-text-subtle`ten (3.29/3.46/3.68) hala ACIK - iki jeton ayirt edilebilir kaliyor. DIKKAT: bu jeton bugun `.sf-user-menu__role`, `.sf-file-tile__meta`, `.sf-section-label` gibi ANLAMLI ve kucuk metinlerde de kullaniliyor; onlar icin 3:1 ZEMIN degil TAVAN sayilmali (WCAG govde metni icin 4.5:1 ister). Dogru cozum o kullanimlari `--sf-text-subtle`e ya da daha koyusuna tasimak - bir tasarim karari, bkz. docs/yapilacaklar.md. */ --sf-text-faint: #8e87a2; /* ------------------------------------------------------------ kenarlik SmartMail line/line2 (marka-tonlu, mor-agirlikli) - "cool" ayrimi kalkti, tek noturel cizgi ailesi. */ --sf-border: rgba(122, 74, 184, 0.18); --sf-border-soft: rgba(122, 74, 184, 0.10); --sf-border-strong: rgba(122, 74, 184, 0.30); --sf-border-cool: rgba(122, 74, 184, 0.18); /* = --sf-border; ayri "sicak/soguk" zemin kalkinca ayrimin anlami kalmadi */ /* --------------------------------------------------------------- marka SmartMail brand/deep (#B45FD0 / #7A4AB8) - iki urun AYNI vurgu rengini paylasiyor. --sf-accent SmartMail'de YOK (round 31, Smart360 bulgusu) - kendi basina bir renk olarak KALDIRILMADI (cok sayida tuketicisi var) ama artik bagimsiz bir deger DEGIL, tamamen --sf-primary/-deep'ten TURETILIYOR - iki urun "ayni aile" hissi versin. */ /* VURGU RENGI: SmartMail'in `panel/src/theme/tokens.ts` dosyasindaki referans paletten BIREBIR (2026-09-16, kullanici karari: "asil panel temasi seninki, digerleri sana benzemeye calisacak. yani renklerini digerlerine ver"). ONCEDEN NE VARDI: `#b45fd0`. O deger YANLIS DEGILDI - bu urunun gercek marka rengiydi ve bir onceki turda bunu savunmustuk. Degisen sey, ailenin TEK bir panel temasinda toplanmasi karari. Bir de olculebilir kazanc var: `#8259D2` beyaz uzerinde 5.6:1 kontrast veriyor, `#b45fd0` yalnizca 3.84:1 - yani eski deger normal metin icin WCAG AA esiginin (4.5:1) ALTINDAYDI. hover/active BURADA UYDURULMADI: ikisi de referansin kendi degerlerinden alindi (hover = koyu temanin brand'i, active = deep). */ --sf-primary: #8259D2; --sf-primary-hover: #C07FE0; --sf-primary-active: #6C3FA8; --sf-primary-deep: #6C3FA8; --sf-primary-tint: rgba(130, 89, 210, 0.10); --sf-primary-tint-2: rgba(130, 89, 210, 0.16); --sf-accent: var(--sf-primary-hover); --sf-accent-deep: var(--sf-primary-deep); --sf-accent-tint: var(--sf-primary-tint-2); /* GOVDE PUNTOSUNDA MARKA RENGIYLE YAZILAN METIN icin AYRI token. (2026-09-16, SmartMail ekibinin olcumu uzerine kendi zeminlerimizde dogrulandi.) SORUN: `--sf-primary` yalnizca BEYAZ yuzeyde gecer. Kendi olcumumuz (4.5 esigi, normal punto): beyaz sayfa zemini ust bar koyu zemin #8259D2 brand 4.87 4.36 ✗ 4.68 4.04 ✗ #6C3FA8 deep 7.21 6.45 6.93 2.73 ✗ #C07FE0 koyu 2.86 ✗ 2.55 ✗ 2.74 ✗ 6.89 Yani TEK bir deger her zeminde calismiyor ve dogru deger TEMAYA BAGLI: acik temada `deep`, koyu temada `brand`. Bunu her cagirma yerinde elle secmek kacinilmaz olarak yanlis yapilir - o yuzden kural burada, tek bir token'da. KULLANIM: renkli METIN (kelime isareti, bag, vurgulu etiket) bunu kullanir. Dolgulu dugme zemini, ikon, kenarlik ve gradyan `--sf-primary`i kullanmaya devam eder - onlarda metin beyaz ve kontrast zaten zeminden gelir. */ --sf-primary-text: var(--sf-primary-deep); /* SmartFiles'in KENDI marka isareti (favicon.svg, header logosu) - bilerek SmartMail'den ALINMADI. Bu iki deger hicbir zaman asagida tema-basina yeniden tanimlanmiyor; marka isareti her iki temada da AYNI kalir. */ --sf-gradient-brand: linear-gradient(135deg, var(--sf-primary), var(--sf-primary-deep)); --sf-gradient-logo: linear-gradient(150deg, #7c5ad6, #b85fa8); /* ---------------------------------------------------------- cam / zemin SmartMail'in glassTop + golge dili. `--sf-header-bg` (isim korunuyor - token zaten vardi) artik header, sidebar, toolbar, detay paneli, footer, modal/tablo baslik seritleri gibi tum "chrome" yuzeyleri icin TEK ortak formul - ayri ayri alti-yedi benzer degrade tanimlamak yerine (eskiden her biri kendi sicak-bej degradesini hardcode ediyordu). */ --sf-glass-top: rgba(255, 255, 255, 0.85); --sf-header-bg: linear-gradient(180deg, var(--sf-glass-top), rgba(255, 255, 255, 0)), var(--sf-surface-muted); /* Aurora: SmartMail'in AuroraBackground'iyla ayni fikir ve ayni siddet (smartmail panel/src/features/mailbox/AuroraBackground.tsx - sol ustte .22 mor, sag altta .36 derin mor). SmartFiles'inki .10/.08 ile cok daha soluktu ve iki urun yan yana konunca ayni aileden gorunmuyordu. Olculer vw yerine px kaliyor: SmartFiles'ta zemin bir tam-sayfa div degil, dogrudan sayfa kurallarinin arkasi. */ --sf-glow-1: rgba(180, 95, 208, 0.20); --sf-glow-2: rgba(122, 74, 184, 0.26); --sf-canvas: radial-gradient(1100px 520px at 12% -10%, var(--sf-glow-1), transparent 68%), radial-gradient(780px 430px at 97% 110%, var(--sf-glow-2), transparent 70%), var(--sf-bg); /* Izgara: SmartMail'in imzasi. YALNIZCA tam-sayfa zeminlerde kullanilir (.sf-app, .sf-login-page, .sf-boot-screen) - --sf-canvas'a katilamaz, cunku o token hover zeminlerinde de kullaniliyor ve her satirin arkasinda izgara cikardi. Cizgi rengi acik ve koyu temada AYRI: tek bir acik gri (SmartMail'in sabit degeri) acik zeminde tamamen kayboluyor. */ --sf-grid-line: rgba(122, 74, 184, 0.055); --sf-grid: linear-gradient(var(--sf-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--sf-grid-line) 1px, transparent 1px); /* Toast/bildirim cubugu: temadan bagimsiz, hep koyu bir "chip" - Slack/ GitHub'daki gibi. Bu yuzden alt/dark bloklarinda TEKRAR TANIMLANMAZ. */ --sf-toast-bg: #201a33; --sf-toast-text: #f5f2fb; /* Doygun marka dolgusu (buton, avatar, rozet, secili sekme satiri) UZERINE oturan icerik icin - dolgunun kendisi zaten canli/koyu oldugundan bu UCU de temadan bagimsiz sabit kalir (--sf-gradient-logo gibi). */ --sf-on-brand: #ffffff; --sf-on-brand-dim: rgba(255, 255, 255, 0.85); --sf-on-brand-hover: rgba(255, 255, 255, 0.16); /* Gercek kucuk resim gelmeden once .sf-media-shape'in cizgili yer tutucusu - notr, zemine gore hafif. */ --sf-media-stripe: rgba(16, 32, 47, 0.10); /* ------------------------------------------------------------- anlamsal SmartMail'de esdegeri yok (risk.safe/suspicious/risky farkli bir kavram - mail guven skoru). Bu degerler HER IKI zeminde de okunakli olacak sekilde ayri ayri secildi (asagida koyu temada yeniden tanimlanir) - acik zemin icin secilmis koyu tonlar, SmartMail'in canli koyu-tema value'lariyla (#2fd4a0 / #f5b83d / #ff5c6e) DOGRUDAN kullanilamazdi (bkz. rapor - kontrast basarisiz olurdu). */ --sf-success: #177050; --sf-success-tint: rgba(23, 112, 80, 0.10); --sf-online: #177050; --sf-warning: #8f6008; --sf-warning-tint: rgba(143, 96, 8, 0.10); --sf-danger: #c22e46; --sf-danger-tint: rgba(194, 46, 70, 0.10); /* ------------------------------------------------------------- golgeler SmartMail'in "cam" golge dili (yumusak, genis, negatif spread). Renkli golgeler (primary/accent) marka rengiyle - iki zeminde de calisir. */ --sf-shadow-xs: 0 2px 6px rgba(24, 20, 40, 0.12); --sf-shadow-sm: 0 4px 14px rgba(24, 20, 40, 0.14); --sf-shadow-md: 0 10px 26px -12px rgba(24, 20, 40, 0.22); --sf-shadow-lg: 0 18px 40px -22px rgba(24, 52, 80, 0.35); --sf-shadow-primary: 0 10px 26px -12px rgba(180, 95, 208, 0.55); --sf-shadow-accent: 0 8px 20px -10px rgba(200, 107, 214, 0.45); /* Panel golgeleri (Header/Sidebar/DetailPanel) - iki onceki round kendi basina "gorunur golge" arayisiyla SmartMail'den SAPMISTI (2026-09-15, kullanici: "birebir SmartMail'in aynisi istemistim, sen yine kendin bir sey urettin"). Bu sefer TAHMIN YOK - SmartMail'in GERCEK kaynagi dogrudan okundu: apps/smartmail/panel/src/features/mailbox/TopBar.tsx (header) -> hic box-shadow YOK, yalnizca `borderBottom: 1px solid var(--line)`. apps/smartmail/panel/src/features/mailbox/SidebarNav.tsx (sidebar) -> ayni sekilde box-shadow YOK, yalnizca `borderRight`. apps/smartmail/panel/src/features/mailbox/RightPanel.tsx (detay paneli, SmartFiles'in sag panelinin karsiligi) -> TEK panel gercek bir golgeye sahip: `-18px 0 40px -34px rgba(20,8,50,.5)` - buyuk bulanikligi (40px) ama COK negatif yayilimi (-34px) sayesinde gorunen iz aslinda birkaç pikselik dar/yumusak bir "cam" kenari, genis bir oyuk degil. Bu deger tema BASINA DEGISMIYOR (SmartMail kodunda sabit) - o yuzden burada da tek, temadan bagimsiz tanimli. Sonuc: header/sidebar artik golgesiz (yalnizca kenarlik), uc panel "esit" duruyor; sag panelin golgesi dar oldugu icin orta alan derin bir cukur degil, hafif bir basamak gibi okunuyor. */ --sf-shadow-header: none; --sf-shadow-right: none; --sf-shadow-left: -18px 0 40px -34px rgba(20, 8, 50, 0.5); /* macOS tarzi kaydirma cubugu: notr gri, marka rengiyle TONLANMAMIS (macOS'un kendisi de boyle - hover'da mora donmez, yalnizca koyulasir). */ --sf-scrollbar-thumb: rgba(0, 0, 0, 0.32); --sf-scrollbar-thumb-hover: rgba(0, 0, 0, 0.48); --sf-focus-ring: 0 0 0 3px rgba(180, 95, 208, 0.35); --sf-overlay: rgba(20, 14, 30, 0.46); /* Perde: --sf-overlay tema YUZEYININ ustune biner, bu ise keyfi bir GORSELIN (kucuk resim) ustune. Acik temadaki 0.46 sayfa zemininde yeterli ama acik bir fotografin uzerinde beyaz metni ~3:1'e dusuruyordu - o punto icin az. Gorsel temaya gore degismedigi icin deger iki temada da ayni. */ --sf-scrim-strong: rgba(12, 8, 20, 0.72); /* ------------------------------------------------------------ kose yaric. round 31 DUZELTMESI: onceki olcek (3/5/7/9/11/14/99) "yogun dosya yoneticisi" gerekcesiyle bilerek dardi - kullanici karari bu gerekceyi artik ONCELIKLI saymiyor ("Smart mail gibi olsun"). SmartMail/smart360 ile BIREBIR (tokens.ts -> radius: 9/11/13/15/18/999) - SmartFiles'in 7 basamakli olcegine sigdirmak icin yalnizca EN KUCUK basamak (xs) smartmail'in kendi taban degerinin (9) altina, sirali kalacak sekilde enterpole edildi; sm..pill DEGERLERI SmartMail'inkiyle AYNI. */ --sf-radius-xs: 7px; --sf-radius-sm: 9px; --sf-radius-md: 11px; --sf-radius-lg: 13px; --sf-radius-xl: 15px; --sf-radius-2xl: 18px; --sf-radius-pill: 999px; /* ------------------------------------------------------------- gecisler */ --sf-transition: .22s ease; } /* ============================================================ dosya tipleri SmartMail'de esdegeri yok. Tek, tema-bagimsiz kume: bunlar KUCUK, DOYGUN vurgu renkleri (rozet/klasor dolgusu) - hem acik hem koyu zeminde okunur kalacak orta-parlaklikta secildi, tıpkı --sf-gradient-logo gibi asagida TEKRAR TANIMLANMAZ. "-tint" degerleri artik SABIT PASTEL DEGIL, alfa kanalli rgba() - o yuzden hangi zeminin uzerine oturursa otursun doğru gorunur (eski hal, bej zemine gore secilmis duz pastel tonlardi; #0b0a14 uzerinde hicbiri calismazdi). */ :root { --sf-type-pdf: #e0568c; --sf-type-pdf-tint: rgba(224, 86, 140, 0.14); --sf-type-docx: #4a6fd4; --sf-type-docx-tint: rgba(74, 111, 212, 0.14); --sf-type-doc: #4a6fd4; --sf-type-doc-tint: rgba(74, 111, 212, 0.14); --sf-type-xlsx: #1fa972; --sf-type-xlsx-tint: rgba(31, 169, 114, 0.14); --sf-type-csv: #1fa972; --sf-type-csv-tint: rgba(31, 169, 114, 0.14); --sf-type-pptx: #c97328; --sf-type-pptx-tint: rgba(201, 115, 40, 0.14); --sf-type-png: #34a0ad; --sf-type-png-tint: rgba(52, 160, 173, 0.14); --sf-type-jpg: #34a0ad; --sf-type-jpg-tint: rgba(52, 160, 173, 0.14); --sf-type-mp4: #8c4fc2; --sf-type-mp4-tint: rgba(140, 79, 194, 0.14); --sf-type-zip: #b45fd0; --sf-type-zip-tint: rgba(180, 95, 208, 0.14); --sf-type-js: #b8901f; --sf-type-js-tint: rgba(184, 144, 31, 0.14); --sf-type-txt: #7b6fe0; --sf-type-txt-tint: rgba(123, 111, 224, 0.14); --sf-type-dwg: #c97328; --sf-type-dwg-tint: rgba(201, 115, 40, 0.14); --sf-type-folder: #837c99; --sf-type-folder-tint: rgba(131, 124, 153, 0.14); } /* =========================================================== klasor renkleri Tasarimdaki FOLDER_HUES dizisinin yerini alan, deterministik-secilen 6 ton; ayni mantikla tema-bagimsiz (bkz. yukaridaki not). */ :root { --sf-folder-1: #b45fd0; --sf-folder-1-tint: rgba(180, 95, 208, 0.14); --sf-folder-1-deep: #7a4ab8; --sf-folder-2: #1fa972; --sf-folder-2-tint: rgba(31, 169, 114, 0.14); --sf-folder-2-deep: #147a52; --sf-folder-3: #c97328; --sf-folder-3-tint: rgba(201, 115, 40, 0.14); --sf-folder-3-deep: #9c5a1e; --sf-folder-4: #e0568c; --sf-folder-4-tint: rgba(224, 86, 140, 0.14); --sf-folder-4-deep: #b03e6c; --sf-folder-5: #34a0ad; --sf-folder-5-tint: rgba(52, 160, 173, 0.14); --sf-folder-5-deep: #257880; --sf-folder-6: #7b6fe0; --sf-folder-6-tint: rgba(123, 111, 224, 0.14); --sf-folder-6-deep: #5b4fc2; } /* ============================================================ detay sekmesi Tasarimdaki TABC haritasi (sag panel sekme renkleri) */ :root { --sf-tab-detail: #b45fd0; --sf-tab-ai: #c86bd6; --sf-tab-versions: #1fa972; --sf-tab-note: #c97328; } /* "Pembe" - cop kutusu + video, tasarimdaki gibi ayni kategori (bkz. --sf-type-mp4, ayni renk): tema-bagimsiz kalir, tipki dosya tipi renkleri gibi. "Notr" ise (surum rozeti, "birakma reddedildi" halkasi) HER iki zeminde de yeterince gorunur olmasi icin asagida koyu temada yeniden tanimlanir. */ :root { --sf-pink: #e0568c; --sf-pink-tint: rgba(224, 86, 140, 0.14); --sf-neutral: #6f7685; --sf-neutral-tint: rgba(111, 118, 133, 0.12); } /* ============================================================= koyu tema Sistem karanlik VE kullanici acik'i ELLE secmedi (data-theme="light" yok). SmartMail'in koyu paleti (palette.dark) - --sf-gradient-logo ve dosya tipi/klasor/tab renkleri BILEREK burada yok (yukarida aciklandigi gibi tema-bagimsiz kalirlar). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --sf-bg: #0b0a14; --sf-bg2: #16112a; --sf-surface: rgba(255, 255, 255, 0.045); --sf-surface-raised: #1d1832; --sf-surface-sunken: rgba(255, 255, 255, 0.03); --sf-surface-muted: rgba(255, 255, 255, 0.08); --sf-surface-chip: rgba(255, 255, 255, 0.11); --sf-text-strong: #f5f2fa; --sf-text: #eee9f6; --sf-text-body: #d6cee3; --sf-text-secondary: #a99cc0; --sf-text-muted: #9f92b7; --sf-text-subtle: #8d80a6; /* Koyu temada esik SAGLANIYOR, degisiklik gerekmedi (olculdu 2026-09-18): #7d7294 / --sf-bg = 4.41, / --sf-bg2 = 4.10, / --sf-surface-raised = 3.83. Acik temadaki ayni jetonun gerekcesi icin yukariya bakin. */ --sf-text-faint: #7d7294; --sf-border: rgba(255, 255, 255, 0.10); --sf-border-soft: rgba(255, 255, 255, 0.06); --sf-border-strong: rgba(255, 255, 255, 0.22); --sf-border-cool: rgba(255, 255, 255, 0.10); /* KOYU TEMA VURGUSU - referans paletten birebir (bkz. acik temadaki uzun not). Koyu zeminde acik temanin `#8259D2`si yeterince okunakli degil; referans bunun icin ayri bir deger veriyor. */ --sf-primary: #C07FE0; --sf-primary-hover: #e0aef2; --sf-primary-active: #7A4AB8; --sf-primary-deep: #7A4AB8; --sf-primary-tint: rgba(192, 127, 224, 0.12); --sf-primary-tint-2: rgba(192, 127, 224, 0.20); /* Koyu zeminde `deep` (#7A4AB8) yalnizca 2.73 veriyor - okunmuyor. Renkli METIN burada `brand` olmali (6.89). Bkz. acik temadaki olcum tablosu. */ --sf-primary-text: var(--sf-primary); /* Koyu zeminde `deep` (#7A4AB8) yalnizca 2.73 veriyor - okunmuyor. Renkli METIN burada `brand` olmali (6.89). Bkz. acik temadaki olcum tablosu. */ --sf-primary-text: var(--sf-primary); --sf-glass-top: rgba(255, 255, 255, 0.06); --sf-glow-1: rgba(180, 95, 208, 0.22); --sf-glow-2: rgba(122, 74, 184, 0.36); --sf-grid-line: rgba(168, 150, 196, 0.05); --sf-success: #2fd4a0; --sf-success-tint: rgba(47, 212, 160, 0.16); --sf-online: #2fd4a0; --sf-warning: #f5b83d; --sf-warning-tint: rgba(245, 184, 61, 0.16); --sf-danger: #ff5c6e; --sf-danger-tint: rgba(255, 92, 110, 0.16); --sf-neutral: #9aa0b0; --sf-neutral-tint: rgba(154, 160, 176, 0.16); --sf-shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.45); --sf-shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.5); --sf-shadow-md: 0 14px 30px -14px rgba(0, 0, 0, 0.6); --sf-shadow-lg: 0 22px 50px -28px rgba(0, 0, 0, 0.8); /* --sf-shadow-header/-right/-left BURADA TEKRAR TANIMLANMIYOR - SmartMail'in kaynagindaki karsiligi (RightPanel.tsx) tema basina DEGISMIYOR, bare :root'taki tek deger her iki temada da gecerli (bkz. o tanimin yanindaki yorum). */ --sf-scrollbar-thumb: rgba(255, 255, 255, 0.26); --sf-scrollbar-thumb-hover: rgba(255, 255, 255, 0.42); --sf-focus-ring: 0 0 0 3px rgba(180, 95, 208, 0.45); --sf-overlay: rgba(4, 3, 8, 0.6); } } /* Kullanicinin ELLE sectigi koyu tema - sistem tercihi ne olursa olsun kazanir. Yukaridaki media-blok ile BIREBIR AYNI degerler. */ :root[data-theme="dark"] { color-scheme: dark; --sf-bg: #0b0a14; --sf-bg2: #16112a; --sf-surface: rgba(255, 255, 255, 0.045); --sf-surface-raised: #1d1832; --sf-surface-sunken: rgba(255, 255, 255, 0.03); --sf-surface-muted: rgba(255, 255, 255, 0.08); --sf-surface-chip: rgba(255, 255, 255, 0.11); --sf-text-strong: #f5f2fa; --sf-text: #eee9f6; --sf-text-body: #d6cee3; --sf-text-secondary: #a99cc0; --sf-text-muted: #9f92b7; --sf-text-subtle: #8d80a6; --sf-text-faint: #7d7294; --sf-border: rgba(255, 255, 255, 0.10); --sf-border-soft: rgba(255, 255, 255, 0.06); --sf-border-strong: rgba(255, 255, 255, 0.22); --sf-border-cool: rgba(255, 255, 255, 0.10); /* KOYU TEMA VURGUSU - referans paletten birebir (bkz. acik temadaki uzun not). Koyu zeminde acik temanin `#8259D2`si yeterince okunakli degil; referans bunun icin ayri bir deger veriyor. */ --sf-primary: #C07FE0; --sf-primary-hover: #e0aef2; --sf-primary-active: #7A4AB8; --sf-primary-deep: #7A4AB8; --sf-primary-tint: rgba(192, 127, 224, 0.12); --sf-primary-tint-2: rgba(192, 127, 224, 0.20); /* Koyu zeminde `deep` (#7A4AB8) yalnizca 2.73 veriyor - okunmuyor. Renkli METIN burada `brand` olmali (6.89). Bkz. acik temadaki olcum tablosu. */ --sf-primary-text: var(--sf-primary); --sf-glass-top: rgba(255, 255, 255, 0.06); --sf-glow-1: rgba(180, 95, 208, 0.22); --sf-glow-2: rgba(122, 74, 184, 0.36); --sf-grid-line: rgba(168, 150, 196, 0.05); --sf-success: #2fd4a0; --sf-success-tint: rgba(47, 212, 160, 0.16); --sf-online: #2fd4a0; --sf-warning: #f5b83d; --sf-warning-tint: rgba(245, 184, 61, 0.16); --sf-danger: #ff5c6e; --sf-danger-tint: rgba(255, 92, 110, 0.16); --sf-neutral: #9aa0b0; --sf-neutral-tint: rgba(154, 160, 176, 0.16); --sf-shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.45); --sf-shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.5); --sf-shadow-md: 0 14px 30px -14px rgba(0, 0, 0, 0.6); --sf-shadow-lg: 0 22px 50px -28px rgba(0, 0, 0, 0.8); /* --sf-shadow-header/-right/-left BURADA da TEKRAR TANIMLANMIYOR - bkz. bare :root'taki ayni tanimin yanindaki yorum. */ --sf-scrollbar-thumb: rgba(255, 255, 255, 0.26); --sf-scrollbar-thumb-hover: rgba(255, 255, 255, 0.42); --sf-focus-ring: 0 0 0 3px rgba(180, 95, 208, 0.45); --sf-overlay: rgba(4, 3, 8, 0.6); } /* Kullanicinin ELLE sectigi acik tema - sistem karanlik olsa bile kazanir. Ciplak :root zaten acik degerleri tasidigi icin burada sadece `color-scheme` teyidi yeterli; deger tekrari gerekmez. */ :root[data-theme="light"] { color-scheme: light; } /* =============================================================== temel stil */ html, body { margin: 0; padding: 0; background: var(--sf-bg); color: var(--sf-text); font-family: var(--sf-font-sans); font-size: var(--sf-text-base); -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } /* Baglantilar govde puntosunda renkli METINDIR - dolayisiyla `--sf-primary-text` (bkz. yukaridaki olcum tablosu), `--sf-primary` DEGIL. Hover ACIK renge CIKMAZ: `--sf-primary` sayfa zemininde 4.36, yani AA esiginin altinda; vurguyu alti cizgi tasiyor. */ a { color: var(--sf-primary-text); text-decoration: none; } a:hover { color: var(--sf-primary-text); text-decoration: underline; } input, button, textarea, select { font-family: inherit; } :focus-visible { outline: none; border-color: var(--sf-primary); box-shadow: var(--sf-focus-ring); } /* kaydirma cubugu - macOS bicimi: ince, notr gri, gorunmez iz (track), tam yuvarlak uclu bir "hap" (pill) - macOS'un kendisi gibi marka rengine ASLA tonlanmaz, yalnizca hover'da koyulasir. Firefox kendi `scrollbar-width`/`scrollbar-color`'iyla (px genislik veremiyor, yalnizca "thin" secenegi var - macOS'a en yakin secenek budur). */ * { scrollbar-width: thin; scrollbar-color: var(--sf-scrollbar-thumb) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--sf-scrollbar-thumb); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--sf-scrollbar-thumb-hover); } ::-webkit-scrollbar-corner { background: transparent; } /* ================================================================ animasyon */ @keyframes sf-fade-up { from { opacity:0; transform:translateY(12px);} to { opacity:1; transform:none;} } @keyframes sf-fade-in { from { opacity:0;} to { opacity:1;} } @keyframes sf-pop-in { 0% { opacity:0; transform:scale(.95) translateY(14px);} 100% { opacity:1; transform:none;} } @keyframes sf-slide-l { from { opacity:0; transform:translateX(18px);} to { opacity:1; transform:none;} } @keyframes sf-slide-r { from { opacity:0; transform:translateX(-18px);} to { opacity:1; transform:none;} } @keyframes sf-breathe { 0%,100% { opacity:.55; transform:scale(.85);} 50% { opacity:1; transform:scale(1);} } @keyframes sf-shimmer { 0% { background-position:-220px 0;} 100% { background-position:320px 0;} } @keyframes sf-spin { to { transform:rotate(360deg);} } @keyframes sf-dashmove { to { background-position:36px 0, 0 -36px, -36px 0, 0 36px;} } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }