/* ========================================================================== DorukCRM — 01-base.css Belirteçler, sıfırlama ve ikon ölçüsü. Her şeyden önce yüklenir. SIRA ÖNEMLİ. Bu dosyalar tek bir app.css'ten bölündü ve kaskad hâlâ o sıraya bağlı: addaki sayı yüklenme sırasıdır. Sırayı belirleyen tek yer pages/_partials/styles.php. Parçalar 16 KB'ın ALTINDA tutuluyor ve bu ölçü keyfî değil: barındırmanın FTP yazması büyük dosyalarda 16384'ün katlarında kesiliyor, 91 KB'lık tek parça hâlindeki app.css bu yüzden günlerce sunucuya tam gidemedi. Buraya bölüm eklerken dosyayı büyütmek yerine yeni bir parça açın. ========================================================================== */ /* ========================================================================== DorukCRM — stylesheet Hand-authored rather than generated: there is no Node toolchain in this project, so a build-step CSS framework would be a dependency the runtime cannot satisfy. ========================================================================== */ :root { --bg: #f0f2f5; --surface: #ffffff; --surface-2: #f7f8fa; --surface-3: #eef0f3; --border: #e3e6ea; /* Arayüz bileşeni kenarlığı WCAG 1.4.11'e göre 3:1 istiyor; eskisi 1.51:1 idi ve giriş alanının nerede başladığı belirsizdi. */ --border-strong: #868f99; /* / --surface 3.28:1 (UI-544) */ --text: #111b21; --text-muted: #667781; --text-faint: #5c6b76; /* balon zemininde 4.79:1 (UI-544) */ /* * Birincil düğme beyaz yazı taşıyor ve #128c7e ile oran 4.14:1 idi (13px * kalın yazı "büyük metin" sayılmıyor, eşik 4.5). Tonu bir kademe * koyulaştırmak markayı değiştirmiyor, okunur kılıyor. */ --brand: #0f7a6e; /* beyaz yazıyla 5.21:1 */ /* Birincil düğmenin YAZI rengi belirteç: koyu temada marka tonu açık (#00a884) ve beyaz yazı 3.03:1 veriyordu (UI-544). */ --brand-contrast: #ffffff; --brand-dark: #075e54; --brand-light: #dcf8c6; --accent: #25d366; /* * WCAG AA (denetim 2026-09-23, UI-544). Değerler hesaplandı, göz kararı * değil; her satırın yanında zemini ve oranı yazılı. * * --danger #d92d20 açık temada 4.44:1 ile SINIRDA kalıyordu (eşik 4.5). */ --danger: #b42318; /* / --danger-bg 6.05:1 */ --danger-bg: #fef3f2; --warning: #b54708; --warning-bg: #fffaeb; --success: #067647; --success-bg: #ecfdf3; --info: #175cd3; --info-bg: #eff8ff; /* Tipografi de bir token: ayarlar > tema ekranı bunları kiracı başına değiştirebiliyor ve gövdeye sabit yazılmış bir yazı tipini değiştiremezdi. */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-heading-weight: 600; /* Küçük ve büyük yarıçap tek bir ölçekten türüyor: yuvarlaklık bir tercih, üç ayrı tercih değil. 10px için değerler 6px ve 14px — yani elle yazılmış hâlleriyle birebir aynı. */ --radius: 10px; --radius-sm: calc(var(--radius) * .6); --radius-lg: calc(var(--radius) * 1.4); --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --shadow: 0 4px 12px rgba(16, 24, 40, .08); --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12); --sidebar-w: 236px; /* Daraltılmış kenar çubuğu. 58px, simgeleri iki durumda da AYNI yatay noktada tutan değer: gezinme kutusunun 10px iç boşluğu + öğenin 10px'i + 18px simgenin yarısı = 29px, yani rayın tam ortası. Simge açılıp kapanırken yerinden oynamıyor. */ --sidebar-rail-w: 58px; --list-w: 360px; /* Gelen kutusunun üçüncü sütunu: lead künyesi. Liste kadar geniş değil — içinde okunacak metin değil, kısa alanlar var. */ --info-w: 320px; --header-h: 60px; /* İçeriğin başlık şeridine ve kenar çubuğuna olan uzaklığı — TEK DEĞER. Kişiler ekranında ölçülüp beğenilen boşluk buydu ve o boşluk üç ayrı yerde birden geçiyor: başlık şeridinin sol dolgusu, içerik kutusunun dolgusu ve ayar gövdesinin dolgusu. Üçü elle yazıldığında biri değiştiğinde başlıktaki yazı, altındaki kartın kenarından kayıyordu. Artık üçü de buradan besleniyor, yani hizalı kalmaları bir dikkat işi değil. */ --gutter: 1.25rem; /* Ayarların bölüm rayı ve başlık şeridindeki hesap menüsü AYNI genişlikte. İkisi alt alta duruyor: menü şeridin sağ ucunda, ray onun tam altında. Genişlikler ayrışsaydı, başlıktaki düğmeler ya rayın üstüne taşar ya da içerikten kopardı — istenen tam olarak ikisinin de olmaması. */ --settings-rail-w: 248px; --header-account-w: var(--settings-rail-w); /* Ayar gövdesinin genişliği. Başlık şeridinin içi de aynı kutuya sarılıyor, o yüzden tek değer. Sınır yok: gövde, uygulamanın geri kalanındaki .content gibi kalan alanı doldurur. Daha önce 1020px'e kapatılıyordu ve geniş ekranda ayarlar, yanındaki her ekrandan dar görünüyordu — kenar çubuğu ile kartlar arasında, kartlar ile ray arasında ikişer yüz piksellik boşluk kalıyordu. Okunur genişlik gereken yerde kartın kendisi sınırlanır. */ --settings-body-w: none; } /* Dar ekranda aynı boşluk içeriğin okunur genişliğinden çalıyor. Belirteç tek yerden daraltılıyor: ona bağlı üç dolgu da birlikte iniyor ve hizaları bozulmuyor. Eşik 900px, ayarların rayının yatay şeride döndüğü nokta. */ @media (max-width: 900px) { :root { --gutter: 1rem; } } /* Koyu palet iki kez yazılıyor ve bu kaçınılmaz. İlk blok işletim sisteminin tercihini izler, ikincisi kiracının ayarlar > tema ekranından koyu modu *zorlamasını* karşılar. İLK BLOĞUN SEÇİCİSİ `[data-theme="system"]`, "nitelik yoksa" DEĞİL. Eskiden niteliğin YOKLUĞU cihaza uymak demekti; niteliği hiç basmayan sayfalar — giriş ekranı, yasal metinler, hata sayfası kendi 'ini yazıyor — koyu cihazlarda kendiliğinden koyuya düşüyordu. Ürünün ilk gösterdiği yüz, kimsenin seçmediği bir görünümdü. Artık cihaza uymak da açıkça istenen bir şey: niteliksiz sayfa AÇIK temadır. CSS bir bildirim bloğunu iki seçici arasında paylaştırmanın yolunu vermiyor; seçicilerden biri medya sorgusunun içinde olmak zorunda olduğu için tek kurala birleştirilemiyorlar. Birini değiştiriyorsanız diğerini de değiştirin — ve src/Support/Theme.php içindeki kopyasını da. */ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --bg: #0b141a; --surface: #111b21; --surface-2: #182229; --surface-3: #202c33; --border: #222d34; --border-strong: #63737f; /* / --surface 3.57:1 (UI-544) */ --text: #e9edef; --text-muted: #8696a0; --text-faint: #c2d1da; /* balon zemininde 5.10:1 (UI-544) */ /* * DURUM YAZILARI KOYU TEMADA DA TANIMLI (denetim 2026-09-23, UI-544). * * Bu bloklar yalnız ZEMİNLERİ koyulaştırıyor, yazı renklerini olduğu gibi * bırakıyordu: koyu zemin üzerinde koyu yazı. Ölçülen oranlar 2.77-3.55:1 * idi (eşik 4.5) ve bu renklerle çizilenler operatörün en kritik * okumaları: "24 saatlik pencere kapalı" rozeti, bir mesajın NEDEN * gönderilemediği, "Arama gecikti" çipi. */ --danger: #fda29b; /* / --danger-bg 8.84:1 */ --warning: #fec84b; /* / --warning-bg 10.24:1 */ --success: #75e0a7; /* / --success-bg 10.05:1 */ --info: #84caff; /* / --info-bg 9.36:1 */ --brand: #00a884; --brand-contrast: #0b141a; /* / --brand 6.14:1 (UI-544) */ --brand-dark: #005c4b; --brand-light: #005c4b; --danger-bg: #2a1614; --warning-bg: #2a2114; --success-bg: #10241c; --info-bg: #10202e; } } :root[data-theme="dark"] { --bg: #0b141a; --surface: #111b21; --surface-2: #182229; --surface-3: #202c33; --border: #222d34; --border-strong: #63737f; /* / --surface 3.57:1 (UI-544) */ --text: #e9edef; --text-muted: #8696a0; --text-faint: #c2d1da; /* balon zemininde 5.10:1 (UI-544) */ /* * DURUM YAZILARI KOYU TEMADA DA TANIMLI (denetim 2026-09-23, UI-544). * * Bu bloklar yalnız ZEMİNLERİ koyulaştırıyor, yazı renklerini olduğu gibi * bırakıyordu: koyu zemin üzerinde koyu yazı. Ölçülen oranlar 2.77-3.55:1 * idi (eşik 4.5) ve bu renklerle çizilenler operatörün en kritik * okumaları: "24 saatlik pencere kapalı" rozeti, bir mesajın NEDEN * gönderilemediği, "Arama gecikti" çipi. */ --danger: #fda29b; /* / --danger-bg 8.84:1 */ --warning: #fec84b; /* / --warning-bg 10.24:1 */ --success: #75e0a7; /* / --success-bg 10.05:1 */ --info: #84caff; /* / --info-bg 9.36:1 */ --brand: #00a884; --brand-contrast: #0b141a; /* / --brand 6.14:1 (UI-544) */ --brand-dark: #005c4b; --brand-light: #005c4b; --danger-bg: #2a1614; --warning-bg: #2a2114; --success-bg: #10241c; --info-bg: #10202e; } /* Renk şeması tarayıcıya da bildiriliyor: kaydırma çubukları, form denetimleri ve otomatik doldurma zemini yoksa açık kalır. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* Sistem seçildiğinde karar yine tarayıcının; ikisini birden bildirmek "hangisini istersen" demenin yolu. */ :root[data-theme="system"] { color-scheme: light dark; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } /* Arayüzün ölçek kaldıracı burası: stil dosyasındaki boyutların neredeyse tamamı `rem`, yani köke bağlı. Gövdeye yazılan bir boyut onları ölçekleyemezdi. Varsayılan `100%` ve `--font-size` bilerek `:root`'ta tanımsız: tanımlı olsaydı, yazıları büyütmüş bir kullanıcının tarayıcı tercihi sessizce ezilirdi. Tema ekranından bir değer seçilene kadar tercih kullanıcının kalır. */ html { font-size: var(--font-size, 100%); } body { background: var(--bg); color: var(--text); font-family: var(--font-family); font-size: .875rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- Icon sizing safety net. icon() emits inline SVG with a viewBox and deliberately no width/height, so size is a CSS decision. But an SVG with neither is not "as big as its box" — it falls back to the replaced-element default of 300x150 and wrecks whatever contains it. Every container therefore needs a rule, and forgetting one is invisible until someone opens the page. This is that rule for everything not covered below: an icon is sized to the text it sits with, and never grows past its box. -------------------------------------------------------------------------- */ svg { width: 1.15em; height: 1.15em; max-width: 100%; flex-shrink: 0; vertical-align: middle; } h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: var(--font-heading-weight); line-height: 1.3; } h1 { font-size: 1.375rem; } h2 { font-size: 1.125rem; } h3 { font-size: 1rem; } p { margin: 0 0 .75rem; } /* --- application shell ---------------------------------------------------- */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100vh; overflow: hidden; /* Daraltılmış kenar çubuğu üzerine gelince içeriğin ÜSTÜNE açılıyor, onu itmiyor. Konumlandırma çapası burada. */ position: relative; } .sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; } .sidebar__brand { height: var(--header-h); display: flex; align-items: center; gap: .625rem; padding: 0 1rem; border-bottom: 1px solid var(--border); font-weight: 700; font-size: .9375rem; letter-spacing: -.01em; flex-shrink: 0; } /* İşaretin arkasında kutu yok: doğrudan kenar çubuğunun zemini üzerinde durur. Bu yüzden burada ne arka plan ne de köşe yuvarlaması verilir. */ .sidebar__logo img { width: 30px; height: 30px; display: block; } .sidebar__logo { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; } .sidebar__nav { padding: .75rem .625rem; flex: 1; overflow-y: auto; } /* Görünmez ama OKUNUR. * * `display:none` bir öğeyi ekrandan kaldırmakla kalmaz, erişilebilirlik * ağacından da tamamen çıkarır: ekran okuyucu onu hiç görmez. Görsel olarak * gizlemek istediğimizde -- yani metin ekranda yer kaplamasın ama düğmenin * ADI olarak okunmaya devam etsin dediğimizde -- gereken budur. * * Bu yardımcı 2026-08-31 denetiminden sonra eklendi (A11Y-501). O güne kadar * depoda yoktu ve eksikliği sessiz bir hataya dönüşmüştü: mobil biçem * dosyasının yorumu "yazı kaldırılmıyor, GİZLENİYOR, düğmenin adı ekran * okuyucuda kalsın diye" diyordu ama uygulanan kural `display:none` idi. * Yani telefonda Gönder düğmesi -- ürünün birincil eylemi -- ekran okuyucuya * yalnızca "düğme" diye okunuyordu. * * clip-path kullanılıyor, `width/height:0` değil: sıfır boyutlu bir öğeyi * bazı tarayıcılar yine ağaçtan düşürüyor. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }