/* ========================================================================== Rota — Uygulama iskeleti Masaüstü: **sol menü** (gezinme) + ince üst çubuk (bağlam ve eylem) Telefon: kompakt üst başlık + içerik + sabit alt sekme çubuğu -------------------------------------------------------------------------- Neden yatay çubuktan sol menüye dönüldü? Yatay çubuk dörtten fazla üst düzey başlık kaldırmıyordu ve bu, bölüm eklemeyi pahalı bir karar hâline getirmişti: Görevler, Bildirimler, Ekip ve Ayarlar çubuğa sığmadıkları için ya profil menüsünün ya da komut menüsünün içine saklanmıştı. Yani uygulamanın bölümlerinin yarısı gezinmede **hiç görünmüyordu** ve kullanıcının onları bulması için uygulamayı zaten biliyor olması gerekiyordu. Dikey menüde başlık sayısı bir yer sorunu değil. Bedeli 236 piksellik bir sütun; ama o bedel iki şeyle karşılanıyor: * **Daralmış hâl.** Tercih eden kullanıcı menüyü 68 piksele indirir ve 168 pikseli geri alır. Tercih `localStorage`da (`rota-yan-menu`) ve `` ile boyamadan önce uygulanır. * **Üst çubuğun boşalması.** Gezinme aşağı indi; çubukta yalnız çalışma alanı, arama, bildirim ve yeni kayıt kaldı. Eski gerekçenin (tablo kolonları 1024 px'te sıkışıyordu) hâlâ geçerli olduğu yer dar dizüstü ekranlar: 1280 pikselin altında menü **kendiliğinden daralmaz**, çünkü kullanıcının tercihini ezmek onu her açılışta yeniden tıklamaya zorlar. Bunun yerine daralmış hâl bir tık uzakta ve kalıcı. ========================================================================== */ /* Menünün iki genişliği tek yerde. `.sidenav` genişliğini değil bu değişkeni okuyoruz: daralma, tek bir özel değerin değişmesiyle hem menüyü hem de ona bağlı her ölçüyü aynı anda taşır. */ :root { /* 236 → **216 px**. Menü etiketlerinin en uzunu ("Potansiyel müşteriler") 216'da henüz kırpılmıyor; aradaki 20 piksel içeriğe geçti. Daralmış hâl 68 → **64 px**: 40 piksellik hedefin iki yanında 12'şer piksel kalıyor, ikon hiç kaymadan ortada duruyor. */ --sidenav-w-open: 216px; --sidenav-w-min: 64px; --sidenav-w: var(--sidenav-w-open); } html[data-yan-menu="collapsed"] { --sidenav-w: var(--sidenav-w-min); } .app { position: relative; min-height: 100dvh; display: flex; background: var(--page-bg); /* Yatay taşmaya karşı ikinci emniyet. Gövdedeki `overflow-x: clip` ile aynı gerekçe: `hidden` yazılsaydı içerideki yapışkan sol menü ve üst çubuk yapışmayı bırakırdı. */ max-width: 100%; overflow-x: clip; } /* Tuvaldeki soyut geometri. Bir görsel dosya değil, üç gradyan: iki eğik çizgi ailesi (farklı açı ve farklı aralık, böylece desen kendini tekrar etmiyor gibi okunur) ve sağ üstte çok geniş tek bir ışık lekesi. Dosya olsaydı iki tema için iki varlık, retina için iki katı ve bir istek daha gerekirdi; gradyan temayla birlikte kendiliğinden dönüşüyor. `absolute`, `fixed` değil: `.app` üzerinde `overflow-x: clip` var ve sabit bir katman bazı tarayıcılarda o kırpılmaya takılıyor. Mutlak katman sayfa boyunca uzar, desen içerikle birlikte kayar. `z-index: -1`: doku her şeyin **altında** kalır, `pointer-events: none` ile de tıklamaya karışmaz. Eskiden bu değer `0`dı ve doku ancak kardeşleri `z-index: 1`e çıkararak altta kalıyordu. O bir piksel bile göstermeyen kural pahalıya patladı: `.shell` z-index alınca **yığın bağlamı** (stacking context) kuruyor ve içindeki `position: fixed` katmanların z-index'i artık dışarıdaki alt sekme çubuğuyla (`.tabbar`, 50) yarışamıyordu. Süzgeç paneli 70 yazıp çubuğun altında kalıyordu — ölçek doğruydu, bağlam yanlıştı. Negatif değer kardeşlere hiçbir şey dayatmıyor: boyama sırasında negatif katman, kabın zemininin **üstünde** ama akıştaki içeriğin altındadır (CSS 2.1 §E.2, 3. adım). `.app`in kendi `--page-bg` zemini görünmeye devam ediyor, doku onun üstünde duruyor, geri kalan her şey ikisinin de üstünde — ve artık tek bir yığın bağlamında. */ .app::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(38deg, var(--pattern-line) 0 1px, transparent 1px 132px), repeating-linear-gradient(-41deg, var(--pattern-line) 0 1px, transparent 1px 196px), radial-gradient(1200px 680px at 85% -12%, var(--pattern-glow), transparent 72%); } /* Baskıda hiç çizilmez: kağıtta eşik altı gri çizgiler ya kaybolur ya da leke olur; ikisi de kazanç değil. */ @media print { .app::before { display: none; } } /* Sağ kolon: üst çubuk + içerik. Sol menüyle kardeş olduğu için ayrı bir kap gerekiyor — üst çubuk menünün **yanında** başlamalı, üstünde değil. `min-width: 0` şart: içindeki tablolar yoksa kolonu kendi doğal genişliklerine kadar şişirir ve menüyü ekrandan iter. */ /* `z-index` **yok** ve bu bilinçli: değer verilirse `.shell` bir yığın bağlamı kurar ve içinde açılan her `position: fixed` katman (süzgeç paneli, kayıt çekmecesi, tarih popover'ı) dışarıdaki alt sekme çubuğunun altına düşer — z-index'leri ne olursa olsun. Doku artık negatif katmanda durduğu için buraya bir sayı yazmaya gerek de yok. */ .shell { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } /* ========================================================================== Sol menü (masaüstü) ========================================================================== */ /* Telefonda hiç çizilmez: orada gezinme alt sekme çubuğudur (`.tabbar`). Menüyü telefonda da göstermek, ekranın yarısını kaplayan bir çekmece ya da başparmağın ulaşamadığı bir hamburger demekti; ikisi de mevcut alt çubuktan kötü. */ .sidenav { display: none; } @media (min-width: 900px) { .sidenav { display: flex; flex-direction: column; flex: 0 0 var(--sidenav-w); width: var(--sidenav-w); /* Sayfayla birlikte kaymaz: gezinme her an göz hizasında olmalı. `height: 100dvh` + `sticky`, uzun listelerde menünün yukarı kaçmasını engeller. */ position: sticky; top: 0; height: 100dvh; /* Üst çubuktan yüksek: `position: sticky` kendi yığın bağlamını kurar ve z-index verilmeseydi menüden sağa açılan paneller, 40'ta duran üst çubuğun altında kalırdı. */ z-index: 45; background: var(--sidebar-bg); border-right: 1px solid var(--border); /* Daralma göze görünür olmalı, yoksa menü "yenilendi" gibi algılanıyor. 170 ms: fark edilecek kadar uzun, bekletecek kadar değil. */ transition: flex-basis var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out); } } /* --- Marka --------------------------------------------------------------- Menü başlığı üst çubukla **aynı** yükseklikte: logo ile çalışma alanı seçici aynı yatay çizgide durmalı, yoksa iki kutu birbirine göre kaymış görünür. */ .sidenav-head { display: flex; align-items: center; flex: none; height: var(--topbar-h); padding: 0 var(--sp-3); border-bottom: 1px solid var(--border-soft); } .brand { display: inline-flex; align-items: center; min-width: 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); } .brand:hover { text-decoration: none; } .brand img { width: auto; } .brand .brand-full { display: block; height: 22px; } /* İki logo, tek marka: kelime işareti 68 piksele sığmaz. Hangisinin çizileceğini menünün genişliği söyler; şablon ikisini de basar. Seçici iki sınıflı (`.brand .brand-mark`) çünkü üstteki `.brand img` de (0,1,1) özgüllükte: tek sınıfla yazılsaydı `display` orada kazanır ve iki logo yan yana çizilirdi. */ .brand .brand-mark { display: none; height: 26px; } html[data-yan-menu="collapsed"] .sidenav-head { justify-content: center; padding: 0; } html[data-yan-menu="collapsed"] .brand .brand-full { display: none; } html[data-yan-menu="collapsed"] .brand .brand-mark { display: block; } /* --- Gezinme girişleri --------------------------------------------------- */ .sidenav-nav { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-height: 0; padding: var(--sp-2) 10px var(--sp-2); } /* Bağlantı da düğme de aynı satır: Firmalar bir bağlantı değil (iki ekranı var) ama menüde diğerlerinden farklı görünmemeli. */ .sidenav-item { display: flex; align-items: center; gap: 10px; width: 100%; /* 40 → **34 px** ve punto bir basamak aşağı. Gezinme bir *okuma* yüzeyi değil; satırlar sıkılaşınca bölüm listesi tek bakışta taranıyor ve alt bölüm (profil, daraltma) 900 px yükseklikte bile kıvrımın üstünde kalıyor. */ min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } /* Hover zemini `--surface` (kart yüzeyi), `--surface-soft` değil: menü artık kendi zeminine (`--sidebar-bg`) oturuyor ve yumuşak yüzey ondan ayırt edilemiyordu — imleç satırın üzerindeyken hiçbir şey olmamış gibi görünüyordu. Kart yüzeyi iki temada da menüden bir ton ayrılır. */ .sidenav-item:hover { background: var(--surface); color: var(--text-primary); text-decoration: none; } .sidenav-icon { width: 17px; height: 17px; flex: none; color: var(--text-muted); transition: color var(--dur-1) var(--ease-out); } .sidenav-item:hover .sidenav-icon { color: var(--text-secondary); } .sidenav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Etkin bölüm: dolu değil **seçili** bir satır. Yatay çubukta bunu alttaki 2 piksellik çizgi söylüyordu; dikey listede karşılığı zeminin kendisi. Sol kenara renkli bir şerit çekilmedi — tasarım sistemi §3 onu yasaklıyor ve zaten zemin + renk + kalınlık üç kanaldan aynı şeyi söylüyor. */ .sidenav-item.is-active { background: var(--selected); color: var(--brand); font-weight: var(--fw-semibold); } .sidenav-item.is-active .sidenav-icon { color: var(--brand); } /* Firmalar grubunun oku: panelin sağdan açıldığını söyler. Açıkken 90° döner — panel hâlâ sağda ama "şu an açık" bilgisi okun kendisinde. */ .sidenav-group { position: relative; } .sidenav-chevron { width: 14px; height: 14px; flex: none; color: var(--text-muted); transition: transform var(--dur-1) var(--ease-out); } .sidenav-item[aria-expanded="true"] { background: var(--surface); color: var(--text-primary); } .sidenav-item[aria-expanded="true"] .sidenav-chevron { transform: rotate(90deg); } /* Okunmamış bildirim sayısı. Satırın sonunda bir hap; daralmış menüde ikonun sağ üst köşesine çekilir çünkü orada sayıya yer yok ve "bir şey var" zaten yeterli cevap. */ .sidenav-badge { flex: none; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--brand); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; } /* --- Alt bölüm: bildirim/ekip/ayarlar, profil ve daraltma ---------------- */ /* Menünün dibindeki üçlü (Bildirimler · Ekip · Ayarlar). Gezinme girişleriyle aynı satır kalıbını kullanır; buradaki tek iş onları profilden **ince bir boşlukla** ayırmak. Araya ikinci bir çizgi çekilmedi: `.sidenav-foot` zaten üstten çizgili ve iki paralel çizgi, üç satırlık bir kümeyi kendi başına bir bölüm gibi gösterirdi. */ .sidenav-foot-nav { display: flex; flex-direction: column; gap: 1px; margin-bottom: var(--sp-2); } .sidenav-foot { flex: none; display: flex; flex-direction: column; gap: 1px; padding: var(--sp-2) 10px var(--sp-2); border-top: 1px solid var(--border-soft); } /* Profil satırı iki satırlık: ad ve e-posta. Menüde yer var ve "hangi hesapla girdim" sorusu, çok çalışma alanlı bir üründe e-postasız cevaplanamıyor. */ /* Profil satırı **çerçeveli bir kutu**: menünün dibi artık düz bir liste satırıyla değil, kapanan bir yüzeyle bitiyor. Sebep hizasızlıktı. Üstündeki üçlü (Bildirimler · Ekip · Ayarlar) ile profil aynı `.sidenav-item` kalıbını paylaşıyordu, yani menü dipte hiç bitmiyor — beş eşit satır alt alta iniyor ve sonuncusu tesadüfen iki satırlık oluyordu. Kutu, "gezinme burada bitti, bu senin hesabın" cümlesini tek bir çizgiyle kuruyor. Zemin `--surface-soft`: menünün kendi zemininden bir basamak açık, kart değil. Sol menüde ikinci bir beyaz kart, ana alandaki kartlarla aynı malzemeye benzerdi. */ .sidenav-user { position: relative; margin-top: var(--sp-1); } .sidenav-user .user-trigger { width: 100%; padding: var(--sp-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--surface-soft); } .sidenav-user .user-trigger:hover { border-color: var(--border); background: var(--surface-sunken); } /* Daraltılmış menüde çerçeve düşer: 56 piksellik kolonda kutu, avatarın etrafına çizilmiş ikinci bir halka oluyordu. */ html[data-yan-menu="collapsed"] .sidenav-user .user-trigger { border-color: transparent; background: transparent; padding: 0 var(--sp-2); } .sidenav-user-text { display: flex; flex-direction: column; gap: 0; min-width: 0; line-height: 1.25; } .sidenav-user .user-name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); } .sidenav-user .user-mail { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 400; } .sidenav-toggle { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .sidenav-toggle:hover { background: var(--surface); color: var(--text-secondary); } .sidenav-toggle .icon { width: 17px; height: 17px; flex: none; } /* --- Daralmış hâl ------------------------------------------------------- Tek kural kümesi: satırlar ortalanır, adlar düşer. Adlar `display: none` ile gidiyor, `width: 0` ile değil — sıfır genişlikli bir metin ekran okuyucuda hâlâ okunur ve menü iki kez seslendirilirdi. Erişilebilir ad `aria-label`da duruyor (şablon), yani bilgi kaybı yok. */ html[data-yan-menu="collapsed"] .sidenav-nav, html[data-yan-menu="collapsed"] .sidenav-foot { padding-left: var(--sp-2); padding-right: var(--sp-2); } html[data-yan-menu="collapsed"] .sidenav-item, html[data-yan-menu="collapsed"] .sidenav-toggle { justify-content: center; padding: 0; gap: 0; } html[data-yan-menu="collapsed"] .sidenav-label, html[data-yan-menu="collapsed"] .sidenav-chevron { display: none; } html[data-yan-menu="collapsed"] .sidenav-item { position: relative; } html[data-yan-menu="collapsed"] .sidenav-badge { position: absolute; top: 3px; right: 8px; min-width: 8px; height: 8px; padding: 0; /* Sayı gitti, nokta kaldı: 8 pikselde rakam okunmaz ve okunmayan bir rakam, olmayan bir rakamdan kötüdür. */ font-size: 0; line-height: 0; } /* İpucu yalnız daralmışken. Açık menüde ad zaten satırın içinde yazıyor; ipucu onu tekrar ederdi ve tasarım sistemi "kapalıyken anlaşılmayan bir şey ipucuna konur" diyor — açık menüde her şey anlaşılıyor. */ .sidenav .tip::after { display: none; } html[data-yan-menu="collapsed"] .sidenav .tip::after { display: block; } /* Panel açıkken ipucu susar: açılan panelin kendi başlığı zaten aynı kelimeyi yazıyor ve ipucu tam onun üstüne biniyordu. */ html[data-yan-menu="collapsed"] .sidenav [aria-expanded="true"].tip::after { display: none; } /* Menünün sağından açılan paneller (Firmalar, profil). `.dropdown`un varsayılanı "tetikleyicinin altına, sağa hizalı"; burada ikisi de yanlış: panel menünün **yanına** çıkmalı, yoksa daralmış menüde 68 piksellik bir kutuya sıkışırdı. */ /* Seçici iki sınıflı (`.dropdown.sidenav-flyout`) çünkü `.dropdown` bu dosyada **aşağıda** tanımlı: tek sınıfla yazılsaydı özgüllük eşit olur ve dosya sırası gereği `.dropdown`un `right: 0` hizası geri kazanırdı. */ .dropdown.sidenav-flyout { top: -4px; bottom: auto; left: calc(100% + 6px); right: auto; min-width: 230px; } /* Alt bölümdeki profil menüsü yukarı açılır: tetikleyici ekranın dibinde ve aşağı açılan panel görüntü alanının dışında kalıyordu. */ .dropdown.sidenav-flyout.is-up { top: auto; bottom: -4px; } /* ========================================================================== Üst çubuk (masaüstü) ========================================================================== */ /* Çubuk sayfayla birlikte kaymaz: arama, bildirim ve "yeni kayıt" her an bir tık uzakta olmalı. Zemin **beyaz**, tuval (`--page-bg`) değil: çubuk içeriğin bir parçası değil, üstünde duran sabit bir katman. Kayma çizgisi yapışkanlığın kanıtıdır: sayfa başındayken ince, kayınca koyulaşır ve altına saç teli kalınlığında bir gölge düşer. */ .topbar { display: none; position: sticky; top: 0; z-index: 40; background: var(--app-bg); border-bottom: 1px solid var(--border); transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .topbar.is-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } /* İçerik sütunuyla **aynı** genişlik sınırı ve aynı yatay dolgu: çubuk kenardan kenara, içerik ortada dursaydı çalışma alanı adı ile sayfa başlığı geniş ekranda hizasız kalırdı. **Üç sütunlu ızgara**, esnek sıra değil. Arama çubuğun *merkezinde* duracaksa, merkez solundaki ve sağındaki yükten bağımsız olmalı: `flex` ile yazıldığında kutu, sağdaki kontrol sayısı değiştikçe (bildirim rozeti var/yok, "Yeni kayıt" gizli/görünür) birkaç piksel sağa sola kayıyor ve sayfadan sayfaya oynuyordu. İki yan sütun da `1fr` olduğu için orta sütun her zaman ekranın ortasında. */ .topbar-inner { display: grid; /* Orta sütun `auto` değil **560 px'lik bir üst sınır**. `auto` içeriğe göre daralıyordu: `.search-trigger` üzerindeki `width: min(560px, 100%)` dairesel bir hesap kuruyor — `100%`, kendi içeriğine göre boyutlanmış sütunun genişliği demek — ve kutu 1600 px'lik bir çubuğun ortasında 213 pikselde kalıyordu. Sütun ölçüyü verince kutu `100%` alıp gerçekten geniş oluyor; yan sütunlar hâlâ `1fr` olduğu için merkez de bozulmuyor. */ grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr); align-items: center; gap: var(--sp-3); height: var(--topbar-h); max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--sp-5); } /* Sol sütun bugün boş: ızgaranın dengesi için duruyor ve kırıntı yolu / sayfa bağlamı gibi bir şey çubuğa geri dönerse yeri hazır. */ .topbar-lead { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } /* Sağ küme: çalışma alanı · bildirim · tema (+ "Yeni kayıt"). Hepsi *bağlam ve araç*; gezinme değil — gezinme sol menüde. */ .topbar-tools { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-1); min-width: 0; } /* Araçların arasındaki ince ayırıcı: çalışma alanı seçici bir *bağlam* anahtarı, yanındaki ikonlar ise eylem. İkisi boşlukla ayrılınca "dört aynı tür düğme" gibi okunuyordu. */ .topbar-sep { width: 1px; height: 20px; margin: 0 var(--sp-2); background: var(--border); flex: none; } /* ========================================================================== Çalışma alanı seçici ========================================================================== */ .ws-switcher { position: relative; flex: none; min-width: 0; } /* Üst çubuktaki hâli: tek satırlık kompakt bir hap. Sol menüdeki iki satırlı (ad + "Ortak alan") kutu 60 px'lik çubuğa sığmıyor; ikinci satır menünün başlığına taşındı. */ .ws-trigger { display: flex; align-items: center; gap: var(--sp-2); max-width: 190px; min-width: 0; height: 34px; padding: 0 var(--sp-2) 0 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-primary); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-align: left; cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); } .ws-trigger:hover { border-color: var(--border-strong); background: var(--surface-soft); } .ws-trigger > .icon:first-child { width: 16px; height: 16px; color: var(--text-muted); flex: none; } .ws-trigger .chevron { margin-left: auto; width: 14px; height: 14px; flex: none; color: var(--text-muted); transition: transform var(--dur-2) var(--ease-out); } .ws-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); } /* İkinci satır ("Ortak alan" / "Çalışma alanı") yalnız menü başlığında anlamlı; çubukta yer kaplıyordu. */ .ws-trigger .ws-meta { display: none; } @media (pointer: coarse) { .ws-trigger { height: var(--tap); } } .ws-menu { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; min-width: 260px; padding: var(--sp-2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); max-height: 60vh; overflow-y: auto; animation: pop-in var(--dur-2) var(--ease-out) both; } .ws-menu[hidden] { display: none; } /* Seçici üst çubuğun **solunda** duruyor (gezinme sol menüye indi); sağa hizalanmış bir panel tetikleyicisinin soluna, ekranın kenarına taşıyordu. `.is-start` hizayı başlangıca çevirir — `.dropdown.is-start` ile aynı gerekçe ve aynı ad. */ .ws-menu.is-start { right: auto; left: 0; } .ws-menu-label { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--text-muted); } .ws-option { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--tap); padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); } .ws-option:hover { background: var(--surface-soft); text-decoration: none; } .ws-option.is-active { background: var(--selected); color: var(--brand); font-weight: var(--fw-semibold); } .ws-option .check { margin-left: auto; color: var(--brand); } .ws-menu form { margin: 0; } /* Alan seçicide "yeni alan" girişini ayıran ince çizgi. */ .ws-menu-sep { height: 1px; margin: var(--sp-2) 0; background: var(--border-soft); } /* ========================================================================== Arama tetikleyicisi ========================================================================== */ /* Bir *düğme*, girdi değil: tıklayınca komut menüsü açılır ve imleç zaten oradaki alana düşer. İki ayrı arama kutusu (biri çubukta, biri menüde) yazmaya başlayan kullanıcının yazdığını kaybettiriyordu. Betik yoksa hiç çizilmez: yalnız komut menüsünü açtığı için, betiksiz bir tarayıcıda tıklanabilir görünen ama hiçbir şey yapmayan bir kutu kalırdı. Çalışmayan bir kontrol, olmayan kontrolden kötüdür. */ .search-trigger { display: none; } .js .search-trigger { display: flex; align-items: center; gap: var(--sp-2); /* Kutu artık ızgaranın **orta sütunu**: genişliği komşularının yüküne değil kendi üst sınırına bakıyor. 460 px — daha genişi, tıklanınca zaten ekranın ortasında açılan bir menü için boş bir vaat olurdu. `100%` ikinci değer olarak duruyor ki dar masaüstünde sütun küçülürken kutu taşmasın. 460 → 560 px ve 34 → 38 px: sağ kümeden "Yeni kayıt" düğmesi kalkınca orta sütunun komşuları hafifledi ve kutu kendi genişliğini alabildi. Arama artık çubuğun tek ağırlıklı öğesi; ölçüsü de bunu söylemeli, yoksa 64 piksellik bir çubuğun ortasında 34 piksellik bir kutu, çevresindeki boşlukta kayboluyor. */ width: 100%; min-width: 0; height: 38px; padding: 0 var(--sp-2) 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-muted); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); } .search-trigger:hover { border-color: var(--border-strong); background: var(--surface); color: var(--text-secondary); } .search-trigger .icon { width: 16px; height: 16px; flex: none; } .search-trigger .label { flex: 1 1 auto; min-width: 0; } .search-trigger .kbd { flex: none; } /* Dar masaüstünde kutu ikona iner. Gezinme başlıkları ile araçlar aynı satırda yarışıyor; ilk feda edilecek şey, yerine bir ikon bırakılabilen şeydir. Erişilebilir ad `aria-label`da olduğu için ikon hâli sessiz değil. */ @media (max-width: 1023px) { .js .search-trigger { flex: none; width: var(--tap); height: var(--tap); padding: 0; justify-content: center; border-color: transparent; background: transparent; } .js .search-trigger .label, .js .search-trigger .kbd { display: none; } .js .search-trigger:hover { background: var(--surface-soft); border-color: transparent; } } @media (pointer: coarse) { .js .search-trigger { height: var(--tap); } } /* ========================================================================== İkon düğmeleri ve bildirim zili ========================================================================== */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); flex: none; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-secondary); cursor: pointer; position: relative; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .icon-btn:hover { background: var(--surface-soft); color: var(--text-primary); } /* Üst çubuktaki ikonlar 44 değil **36 px**: çubuk 54 piksele indi ve 44'lük hedefler iki yanında beşer piksel bırakıp çubuğu doldurulmuş gösteriyordu. Dokunmatik aygıtta kural geçersiz: orada hedef yine `--tap` (48 px). */ @media (pointer: fine) { .topbar-tools .icon-btn { width: 36px; height: 36px; } /* Rozet de küçülür ve köşeye **taşar**. 44 piksellik düğme için yazılmış 16 px'lik hap, 36 piksellik düğmede zilin neredeyse tamamını örtüyordu: ekranda yalnız kırmızı bir daire görünüyor, "bu bir bildirim düğmesi" bilgisi kayboluyordu. */ .topbar-tools .bell-dot { top: 0; right: 0; min-width: 12px; height: 12px; padding: 0 2px; border-radius: 7px; font-size: 9px; line-height: 12px; } } /* Tema düğmesi iki ikon taşır, birini gösterir: **gidilecek** hâli, içinde bulunulanı değil. Aydınlıkta ay ("koyuya geç") çizilir. İki ayrı ikon yerine tek ikonu döndürmek, geçişte ok gösteren bir animasyon ve iki ayrı `aria-label` demekti. */ .tema-gunes { display: none; } [data-theme="dark"] .tema-ay { display: none; } [data-theme="dark"] .tema-gunes { display: inline-block; } .icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-solid); border: 2px solid var(--surface); } /* Bildirim zili — okunmamış sayısı rozet olarak görünür. Sayı 9'u geçince "9+" yazılır; rozet büyüyüp düğmeyi kaydırmasın. */ .icon-btn.bell { text-decoration: none; } .icon-btn.bell.is-active { color: var(--brand); background: var(--brand-softer); } /* Rozet zilin sağ üst köşesine *taşar*; ikonun üstüne binerse zil okunmaz hale gelir. Çerçevesi çubuğun zemini (beyaz) ile aynı — tuvalle aynı olsaydı beyaz çubukta gri bir halka olarak görünürdü. */ .bell-dot { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--accent-solid); /* Çerçeve çubuğun zemini (`--app-bg`), `--surface` değil: üst çubuk artık karttan bir ton ayrı duruyor ve beyaz halka o zeminde görünüyordu. Mobil başlık da aynı jetonu okuyor. */ /* Sabit beyaz **bilerek**: `--accent-solid` iki temada da aynı mercan kalır, yani zemin dönmediği için metnin de dönmemesi gerekir. `--text-on-brand` burada yanlış olurdu — koyu temada koyuya çevrilip mercan zeminde okunmaz hale gelirdi. */ color: #fff; font-size: 10px; font-weight: var(--fw-bold); line-height: 16px; text-align: center; border: 2px solid var(--app-bg); box-sizing: content-box; } /* ========================================================================== Yeni kayıt -------------------------------------------------------------------------- İki yerde çizilir: üst çubuğun sağ ucunda (her ekranda, "Yeni") ve panonun başlığında ("Yeni kayıt"). Aynı `new_items` listesi, aynı açılır menü. Çerçeveli ve **etiketli**. Etiket, gezinme sol menüye indikten sonra geldi: çubukta yer açıldı ve etiketsiz bir artı, yanındaki zil ikonuyla aynı ağırlıkta okunuyordu — oysa biri bildirim açar, diğeri kayıt üretir. Renk hiyerarşisi korundu: dolu marka rengi **sayfanın kendi** kaydını üreten düğmeye ait ("Yeni iş", "Yeni firma"); her yerde duran bu genel menü çerçeveli kalır. Aynı ekranda iki dolu mavi düğme yan yana durunca hangisinin o sayfanın asıl eylemi olduğu okunmuyordu. Dar masaüstünde etiket düşer, ikon kalır — telefondaki alt çubuk dairesiyle aynı anlam, aynı ikon. ========================================================================== */ .new-menu { position: relative; flex: none; } /* `.needs-js` ortak kuralı `inline-flex` verir; burada menüyü konumlayan kapsayıcı olduğu için `block` gerekiyor. Seçici `html.js` ile yazıldı: `.js .needs-js` ile aynı özgüllükte olsaydı hangisinin kazandığını dosya sırası belirlerdi ve o sıra (components.css en sonda) bizim aleyhimize. */ html.js .new-menu { display: block; } .new-btn { min-height: 36px; padding: 0 var(--sp-4); border-radius: var(--r-md); white-space: nowrap; } .new-btn .icon { width: 18px; height: 18px; stroke-width: 2.2; } /* 1100 pikselin altında etiket düşer: çalışma alanı adı ile arama alanı aynı satırda yarışıyor ve ilk feda edilecek şey, yerine bir ikon bırakılabilen şeydir. Erişilebilir ad `aria-label`da değil düğmenin içindeki metinde — bu yüzden etiket gizlenirken `aria-label` ekleniyor (bkz. `app.js`, yan menü modülü değil; burada gerek yok çünkü açılan menü kendi başlığını taşıyor). */ @media (max-width: 1100px) { .topbar .new-btn { width: 36px; min-width: 36px; padding: 0; justify-content: center; } .topbar .new-btn-label { display: none; } } /* Menü açıkken düğme "basılı" görünür. Marka rengiyle doldurmuyoruz: düğme artık ikincil ve dolu mavi, sayfanın asıl eylem düğmesine ayrıldı (gerekçe `layouts/app.html`da). */ .new-btn[aria-expanded="true"] { background: var(--surface-soft); /* Anlam jetonu, ham palet değil. `--p-cool-400` dört CSS dosyasındaki tek ham palet kullanımıydı; iki temada da çevrildiği için görsel olarak patlamıyordu ama anlam katmanını atlıyor ve "palet doğrudan okunmaz" kuralını tek başına deliyordu. */ border-color: var(--border-strong); } /* Dolu (`btn-primary`) değişkenin "basılı" kuralı kaldırıldı (Faz 48): panonun kendi "Yeni kayıt" düğmesi gitti, menü artık yalnız üst çubukta ve çerçeveli. */ @media (pointer: coarse) { .new-btn { min-height: var(--tap); } } /* ========================================================================== Kullanıcı menüsü ve açılır menü gövdesi ========================================================================== */ .user-menu { position: relative; flex: none; } /* `.user-trigger` yalnız sol menünün alt bölümünde kullanılıyor; oradaki ölçüleri `.sidenav-item` veriyor ve aşağıdaki kurallar yalnız ortak davranışı (imleç, geçiş, chevron rengi) taşıyor. Genişlik sınırı kaldırıldı: menü kolonu zaten dar ve `truncate` işi görüyor. */ .user-trigger { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-2); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-primary); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); } .user-trigger:hover { background: var(--surface-soft); } .user-trigger .chevron { color: var(--text-muted); width: 14px; height: 14px; flex: none; } @media (pointer: coarse) { .user-trigger { min-height: var(--tap); } } .dropdown { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; min-width: 230px; /* Genişlik ve boy emniyeti. `.select-menu` (`base.css`) ve `.cal-pop-panel` doğru kalıbı zaten kullanıyordu, taban sınıf atlanmıştı: uzun bir madde etiketi paneli doğal genişliğinde büyütüyor ve dar ekranda `app.js`'in 8 pikselik kenar payı yetmiyordu. Dikey sınırı `app.js` yazıyor (tetikleyicinin üstünde/altında kalan yere göre); burada yalnız kaydırmanın **mümkün** olması sağlanıyor. `hidden auto`: yatayda kaydırma çubuğu istemiyoruz — tek eksen `visible` bırakılırsa tarayıcı onu da `auto`ya çeviriyor ve uzun bir menüde ekranın altında ikinci bir çubuk beliriyordu. */ max-width: min(360px, calc(100vw - 2 * var(--sp-2))); overflow: hidden auto; overscroll-behavior: contain; padding: var(--sp-2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); animation: pop-in var(--dur-2) var(--ease-out) both; } .dropdown[hidden] { display: none; } /* Menü tetikleyicinin *başına* hizalanır. Varsayılan sağ hizalama satır sonundaki üç nokta menüsü içindir; gezinme çubuğunun ortasındaki bir başlıkta panel sola, hatta ekranın dışına kayıyordu. */ .dropdown.is-start { right: auto; left: 0; } .dropdown-header { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--sp-1); } /* Menü başlığı `--text-secondary`, `--text-muted` değil. Ölçüm: muted, beyaz zeminde 5.21:1 — AA'yı **geçiyor**, yani hata bir eşik ihlali değil. Sorun eşiğin ölçtüğü şeyin bu tipografi olmaması: 12 px, büyük harf ve 0.05em aralıklı bir satırda harf gövdeleri ince ve birbirinden uzak kalıyor, gözün tuttuğu leke aynı orandaki normal metinden belirgin biçimde zayıf okunuyor. Secondary 6.20'ye (koyuda 9.39) çıkarıyor ve başlık, altındaki öğelerden hâlâ bir kademe geride duruyor — hiyerarşi korunuyor, kaybolma gidiyor. */ .dropdown-label { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--text-secondary); } .dropdown-item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--tap); padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); } .dropdown-item:hover { background: var(--surface-soft); text-decoration: none; } .dropdown-item .icon { color: var(--text-secondary); } .dropdown-item.is-active { color: var(--brand); font-weight: var(--fw-semibold); } .dropdown-item.is-active .icon { color: var(--brand); } .dropdown-sep { height: 1px; margin: var(--sp-2) 0; background: var(--border-soft); } .dropdown form { margin: 0; } /* ========================================================================== İçerik yüzeyi ========================================================================== */ .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .content { flex: 1 1 auto; padding: 0 var(--sp-4) var(--sp-6); } /* Üst gezinme ile **aynı** sınır ve aynı dolgu; ikisi tek bir kolon gibi hizalanır. Sınır `--shell-max` ile tek yerden gelir ve bugün tam genişliktir (bkz. base.css). Değişken yine de duruyor: kabuğu yeniden daraltmak gerekirse dokunulacak tek yer orası, iki ayrı `max-width` değil. Okunabilirlik sınırı gereken yerde kendi bileşeninde duruyor (`.form-narrow`, `.empty-state p`). */ .content-inner { width: 100%; max-width: var(--shell-max); margin: 0 auto; min-width: 0; } /* Ayrıntı sayfasının kendi genişlik sınırı (`--record-max`). Bugün kabukla aynı — yani tam genişlik; kanca burada duruyor ki ayrıntı sayfasını listelerden bağımsız daraltmak tek satırlık bir değişiklik kalsın. İşaret `rec-head`: üç ayrıntı sayfası da (`_detail.html` içindeki `rec_head` makrosu) onu `{% block content %}`un ilk öğesi olarak basıyor, başka hiçbir ekran basmıyor. Şablonlara ayrıca bir sınıf eklemek yerine `:has()` kullanıldı — sayfanın ne olduğunu zaten içeriği söylüyor ve dördüncü bir ayrıntı sayfası eklendiğinde sınıfı koymayı unutmak diye bir hata kalmıyor. `:has()` bu dosyada yeni değil, kırıntı yolu da onunla gizleniyor. */ .content-inner:has(> .rec-head) { max-width: var(--record-max); } /* Kırıntı yolu artık üst çubukta değil, **içeriğin başında**. Çubukta dururken üst düzey bölümlerde boş kalıyor ya da hemen altındaki `h1` ile birebir aynı kelimeyi yazıyordu. Derin ekranlarda ise asıl işi başlığın üstünde, okuma sırasının içinde görmek. Boşken kendini gizler: şablonların çoğu bloğu doldurmuyor ve boş bir kapsayıcı sayfa başlığını aşağı itiyordu. `:empty` yetmez — Jinja bloğu geride boşluk bırakır; ölçü, *öğe* çocuğu olup olmadığıdır. */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); min-width: 0; margin-bottom: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); } .breadcrumb:not(:has(> *)) { display: none; } .breadcrumb a { color: var(--text-secondary); position: relative; } /* Dokunmatikte iz bağlantısı geri gitmenin ana yolu ama 20 px yüksekti. `::after` ile hedefi büyüt: çizim aynı kalır, satır aralığı bozulmaz. */ /* Dar ekranda iz tek bir geri bağlantısına iner. Nedeni ölçüm: basamaklar yan yana durduğu için kısa olanlar ("İşler") 25x20 piksellik hedefler bırakıyordu ve aralarında yer olmadığı için yatayda büyütülemiyorlardı. Son bağlantı zaten "bir üst sayfa"dır; `.current` ise hemen altındaki `h1` ile aynı kelimeyi yazar, yani gizlenince bilgi kaybı olmaz. Tablet ve masaüstünde (900 px ve üzeri) iz olduğu gibi kalır: orada hem yer var hem de işaretçi ince. */ @media (max-width: 899px) { .breadcrumb > * { display: none; } .breadcrumb > a:last-of-type { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap); padding-right: var(--sp-2); } /* Ok bir **ikon**dur, harf değil. Burada `content: "\2190"` (←) yazıyordu ve telefonda bozuk çıkıyordu: Manrope'ta U+2190 yok, tarayıcı glifi yedek yazı tipinden alıyor. Gelen çizim setin geri kalanıyla aynı dili konuşmuyor — farklı kalınlık, farklı optik boy, bazı Android yedeklerinde hiç yok (tofu kutusu). Bir kelimeye bakıp "bu hangi fontta" diye sormak gerekmiyor; bir oka bakıp sormak gerekiyorsa ok yanlış yerden geliyor demektir. Satır içi SVG de yazılamaz (7 şablondaki `breadcrumb` bloğuna elle eklemek, hem tekrar hem de masaüstünde görünen fazladan bir ikon demekti), o yüzden aynı çizim `mask` olarak geliyor: renk `currentColor`dan, kalınlık `.icon` ailesiyle aynı (1.8), boy 16 px. */ .breadcrumb > a:last-of-type::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--geri-oku) center / 16px 16px no-repeat; mask: var(--geri-oku) center / 16px 16px no-repeat; } } /* Telefondaki başlık şeridi: marka · alan seçici · boşluk · araçlar. Bu kural uzun süre **eksikti**. `.mobile-header` hiçbir yerde `display: flex` almıyordu; işini gören şey, eski `.app`in kendisinin `flex-direction: column` olmasıydı — başlık onun bir öğesi olduğu için satır gibi davranıyor görünüyordu. Sol menüye geçince `.app` yatay kolona döndü ve başlık kendi çocuklarını alt alta dizmeye başladı: logo bir satır, alan adı bir satır, ikonlar bir satır. Eksik kuralı bir yerleşim değişikliği ortaya çıkardı; yazılan şey yeni bir tasarım değil, o şeridin baştan beri varsayılan davranışı. */ .mobile-header { display: flex; align-items: center; gap: var(--sp-2); position: sticky; top: 0; z-index: 40; min-height: var(--topbar-h); padding: 0 var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--border-soft); transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .mobile-header .grow { flex: 1 1 auto; min-width: 0; } .mobile-header.is-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .mobile-brand { display: inline-flex; align-items: center; justify-content: center; flex: none; /* 22 px'lik logo + `--sp-1` dolgu 29x30 bir hedef bırakıyordu: denetimde her mobil sayfada çıkan tek ve en yaygın bulgu buydu. Logo büyümesin, dokunulabilir kutu büyüsün; negatif kenar boşluğu başlıktaki hizayı olduğu gibi tutar. */ min-width: var(--tap); min-height: var(--tap); margin: 0 calc(var(--sp-1) * -1); padding: var(--sp-1); } .mobile-brand img { height: 22px; width: auto; display: block; } .mobile-ws { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; min-height: var(--tap); padding: 0 var(--sp-2); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-primary); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; } .mobile-ws .icon { width: 15px; height: 15px; color: var(--text-muted); flex: none; } .mobile-ws .truncate { max-width: 14ch; } /* ========================================================================== Alt sekme çubuğu (mobil) -------------------------------------------------------------------------- Dört bölüm + ortada küçük bir "yeni kayıt" düğmesi. Düğme çubuğun *içinde* durur ve üst kenarını birkaç piksel aşar: ekranın üstünde gezinen ayrı bir FAB, altındaki listenin son satırını örtüyor ve kaydırınca nereye ait olduğu belirsizleşiyordu. ========================================================================== */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: stretch; background: var(--surface); border-top: 1px solid var(--border); /* Faz 29: çubuk bir **katman**, sayfanın son satırı değil. Tek bir üst çizgi bunu söylemiyordu; içerik çizginin dibinde kesiliyor ve "altından geçiyor" hissi oluşmuyordu. Gölge yukarı düşer (bkz. `--shadow-nav`). */ box-shadow: var(--shadow-nav); padding-bottom: env(safe-area-inset-bottom); } .tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: var(--tabbar-h); padding: var(--sp-2) var(--sp-1); /* Etkin olmayan sekme **okunur** bir gride yazılır. `--text-muted` sessiz metaya ayrılmış en alt basamak; gezinme etiketi meta değil, ekranın adı. Dört sekmeden üçünün soluk olması, çubuğu "pasif bir şerit" gibi gösteriyordu. */ color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); border: 0; background: transparent; cursor: pointer; position: relative; } .tab:hover { text-decoration: none; } .tab .icon { width: 22px; height: 22px; } .tab .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Etkin sekme: renk + ağırlık + üstteki çizgi. Üç işaret, çünkü telefonda bu çubuk "neredeyim" sorusunun tek cevabı. Mor bütçesi burada harcanır — gezinme, marka renginin meşru kullanımıdır (bkz. TASARIM-SISTEMI.md). */ .tab.is-active { color: var(--brand); font-weight: var(--fw-bold); } /* Üstteki kısa çizgi, masaüstündeki etkin bölüm işaretinin aynısı: iki iskelet aynı dili konuşuyor. Renkli kapsül yok. */ .tab.is-active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 2px; border-radius: var(--r-pill); background: var(--brand); } /* Ortadaki yeni kayıt düğmesi. Sekme genişliğinde bir yuva kaplar ki komşu sekmeler eşit kalsın; görünen daire 46 px. Dokunma hedefi yuvanın tamamıdır (64 × 64), yani daireden büyük. */ .tab-new { flex: 0 0 auto; width: 64px; display: flex; align-items: flex-start; justify-content: center; padding: 7px 0 0; border: 0; background: transparent; cursor: pointer; } .tab-new-circle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: var(--text-on-brand); box-shadow: var(--shadow-brand); transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); } .tab-new:active .tab-new-circle { transform: translateY(1px); background: var(--brand-active); } .tab-new-circle .icon { width: 24px; height: 24px; stroke-width: 2.2; } /* Betik yoksa düğme hiçbir şey yapamaz (alt panel JS ile açılıyor), o yüzden hiç çizilmez ve çubuk dört eşit sekmeye döner. Kayıt yolları liste ekranlarından erişilebilir kalır. */ html:not(.js) .tab-new { display: none; } /* Alt çubuğun içeriği örtmemesi için. Boşluk çubuğun kendi yüksekliğinden **fazla** olmalı: ortadaki artı (`.tab-new-circle`) çubuğun üst kenarına dayanıyor ve altında 12 piksellik bir gölge taşıyor. Çubuk kadar boşlukta son kartın alt kenarı o dairenin dibine değiyordu — teknik olarak örtüşme yok, gözle bakınca sayfanın bittiği belli değil. `--sp-8` (40 px) ile son kart ile çubuk arasında telefonda ölçülebilir bir nefes kalıyor. */ .has-tabbar .content { padding-bottom: calc(var(--tabbar-h) + var(--sp-8) + env(safe-area-inset-bottom)); } /* ========================================================================== Alttan açılan panel (mobil menüler) ========================================================================== */ .sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: var(--overlay); display: flex; align-items: flex-end; animation: fade-in var(--dur-2) var(--ease-out) both; } .sheet-backdrop[hidden] { display: none; } .sheet { width: 100%; /* `dvh`, `vh` değil. iOS Safari'de `vh` **büyük** görüntü alanına göre ölçülür: adres çubuğu açıkken panelin alt beşte biri ekranın altında kalıyor ve son seçenek tıklanamıyordu. Kod tabanının geri kalanı (`.drawer` 88dvh, `.record-panel` 100dvh, `.filter-pop-panel` 85dvh) zaten `dvh` kullanıyor; burası atlanmış. */ max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-radius: var(--r-2xl) var(--r-2xl) 0 0; padding: var(--sp-3) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg); animation: sheet-in var(--dur-3) var(--ease-out) both; } /* Tutamak dekorasyon değil: panelin sürüklenebilir *görünen* üst kenarı, "bu yüzey aşağı itilerek kapanır" demenin en kısa yolu. */ .sheet-handle { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--border-strong); margin: 0 auto var(--sp-4); } .sheet-title { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: -0.01em; margin-bottom: var(--sp-2); } /* ========================================================================== Duyarlı davranış ========================================================================== */ @media (min-width: 900px) { .topbar { display: block; } .mobile-header { display: none; } .tabbar { display: none; } .content { padding: var(--sp-5) var(--sp-6) var(--sp-8); } .has-tabbar .content { padding-bottom: var(--sp-8); } .only-mobile { display: none !important; } } @media (max-width: 899px) { .only-desktop { display: none !important; } .page-title { font-size: var(--fs-xl); } /* Dar ekranda kayıt adı üç noktayla kesilmesin — kullanıcının içinde bulunduğu kaydın adı okunabilir olmalı; sarsın. */ .page-title.truncate { white-space: normal; overflow: visible; } /* iOS'ta odaklanınca sayfanın yakınlaşmaması için. Zenginleştirilmiş seçicinin düğmesi de aynı ölçüde: 15 px'lik düğme ile 16 px'lik komşu alan yan yana durunca satır hizası gözle görülür şekilde bozuluyordu. */ .input, .select, .textarea, .select-btn { font-size: 16px; } } /* 900–1100 px arası: sol menü zaten 236 pikseli aldı; kalan yer içeriğin. Kısılan şey **dolgu**, gezinme değil — menü girişlerini kısaltmak ya da gizlemek, sol menüye geçmenin gerekçesini geri alırdı. */ @media (min-width: 900px) and (max-width: 1100px) { .topbar-inner { padding: 0 var(--sp-4); gap: var(--sp-1); } .content { padding-left: var(--sp-4); padding-right: var(--sp-4); } } /* ========================================================================== Komut menüsü (Ctrl/Cmd + K) -------------------------------------------------------------------------- Hem arama hem gezinme. Klavyeden kullanılır, fareyle de kullanılabilir. Ekranın ortasında değil **üst üçte birinde** durur: açıldığında göz zaten oradadır, ayrıca telefonda klavye açılınca aşağı itilecek yer kalır. ========================================================================== */ .cmdk-overlay { align-items: flex-start; justify-content: center; padding: var(--sp-5) var(--sp-4); display: flex; } @media (min-width: 900px) { .cmdk-overlay { padding-top: 12vh; } } .cmdk { width: min(620px, 100%); max-height: min(560px, calc(100dvh - 2 * var(--sp-5))); display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); animation: modal-in var(--dur-2) var(--ease-out) both; } .cmdk-search { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); border-bottom: 1px solid var(--border-soft); flex: none; } .cmdk-search > .icon { flex: none; color: var(--text-muted); } .cmdk-input { flex: 1 1 auto; min-width: 0; min-height: 54px; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: var(--fs-md); } .cmdk-input:focus { outline: none; } .cmdk-input::placeholder { color: var(--text-muted); } /* Arama sürerken giriş alanının sağında küçük bir çark döner; sonuç listesini boşaltıp "bulunamadı" demek yanlış cevap veriyordu. */ .cmdk-spinner { flex: none; width: 16px; height: 16px; border-width: 2px; } .cmdk-results { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2); } .cmdk-group + .cmdk-group { margin-top: var(--sp-2); } .cmdk-group-label { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--text-muted); } .cmdk-item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--tap); padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; text-decoration: none; } .cmdk-item:hover { text-decoration: none; } /* Seçili satır klavyeyle yönetilir (`.is-cursor`). Fare imleci ayrı bir vurgu üretirse iki "seçili" satır görünüyor ve Enter'ın hangisini açacağı belirsizleşiyordu. */ .cmdk-item.is-cursor { background: var(--selected); } .cmdk-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--text-secondary); } .cmdk-item-icon .icon { width: 16px; height: 16px; } .cmdk-item.is-cursor .cmdk-item-icon { background: var(--brand-border); color: var(--brand); } .cmdk-item-body { flex: 1 1 auto; min-width: 0; } .cmdk-item-title { font-weight: var(--fw-semibold); font-size: var(--fs-base); } .cmdk-item-meta { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-secondary); } .cmdk-item-meta .dot-sep { color: var(--text-muted); } /* Eşleşen kesit (Faz: içerik araması). Meta satırından bir ton daha silik: ikisi aynı ağırlıkta olduğunda göz hangisinin kaydın kimliği, hangisinin arama kanıtı olduğunu ayıramıyordu. Tek satır — kesit bir ipucudur, içeriğin kendisi değil; taşarsa `truncate` kırpar. */ .cmdk-item-snippet { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); } .cmdk-snippet-label { flex: none; font-weight: var(--fw-semibold); color: var(--text-secondary); } .cmdk-item-snippet .truncate { min-width: 0; } /* Durum nokta + metin olduğu için zemini yok: imleçli satırda kaybolma sorunu (ve onu ayakta tutmak için eklenen ham rgba çerçeve) ortadan kalktı. Kalan tek iş, satır daralırken durumun ezilmemesi. */ .cmdk-item > .status { flex: none; } /* Eşleşen harfleri koyulaştırmak, listeyi "neden bu çıktı?" sorusundan kurtarıyor. Zemin boyamak yerine kalınlaştırma: 20 sonuçta 20 sarı leke, aramanın kendisinden çok gürültü üretiyordu. */ .cmdk-item mark { background: transparent; color: var(--brand); font-weight: var(--fw-bold); } .cmdk-empty { padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--text-secondary); font-size: var(--fs-sm); } /* Arıza, boş sonuçtan ayrı okunur: "aradım, bulamadım" sessiz bir gri satırdır; "arayamadım" ise kullanıcının bir şey yapmasını gerektirir. */ .cmdk-empty.cmdk-error { color: var(--danger); padding: var(--sp-5); } .cmdk-foot { display: flex; align-items: center; gap: var(--sp-4); flex: none; padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border-soft); background: var(--surface-soft); color: var(--text-muted); font-size: var(--fs-xs); } .cmdk-foot span { display: inline-flex; align-items: center; gap: 5px; } /* Dokunmatikte klavye ipucu yalan söyler. */ @media (pointer: coarse) { .cmdk-foot { display: none; } }