/* ═══════════════════════════════════════════════════════════════════════════
PANEL TASARIM SİSTEMİ — Katman 1: Temel (token, tipografi, odak, kabuk)
═══════════════════════════════════════════════════════════════════════════
KAPSAM. Her kural `body.is-authenticated` altındadır. Bu sınıf _Layout'ta
`useAdminShell = isAuthenticated && !isPublicExperience` ile veriliyor, yani
tam olarak iki paneli (admin + süper admin) kapsar; kamuya açık kart sayfası,
pazarlama sitesi, giriş ve kayıt ekranları `is-public` olduğu için bu
dosyadan **hiç etkilenmez**. Kapsamı dar tutmanın sebebi site.css'in 8.000+
satırıyla aynı anda beş farklı yüzeye hizmet etmesi: panelin ihtiyacı olan
yoğunluk, kart sayfasının ihtiyacı olan ferahlıkla aynı değil.
YÜKLEME SIRASI. site.css → panel.css → utilities.css. Bu dosya site.css'ten
sonra geldiği için eşit özgüllükte onu yener; utilities.css en sonda kalır,
çünkü oradaki kurallar satır içi `style=` yerine geçiyor ve son sözü onların
söylemesi gerekiyor (bkz. utilities.css başlığı, O13).
TASARIM YÖNÜ. Panel bugün pazarlama sitesinin dilini konuşuyor: 32px köşe
yarıçapları, 90px yayılan gölgeler, krem zemin, kartların üstünde dekoratif
kırmızı degradeler ve 4,35rem'e kadar çıkan başlık ölçeği. Bunlar bir hero
bölümünde doğru; günde saatlerce tablo okunan bir ekranda dikkat çalıyor.
Buradaki yön tersine: **sessiz yüzey, yüksek okunabilirlik, tek ve nadir
vurgu**. Marka kırmızısı korunuyor ama dekorasyondan çıkarılıp yalnızca
birincil eyleme ayrılıyor — nadir olduğu için dikkat çekiyor.
TOKENLER BU DOSYADA DEĞİL. Renk, ölçek, aralık ve yükseklik tokenleri
`design-tokens.css`e taşındı; kimlik ekranları (giriş/kayıt/şifre) da aynı
değerleri kullanıyor ve iki kopya iki doğruluk kaynağı demekti. Buradaki
kurallar o dosyadaki `--pnl-*` değişkenlerini tüketir.
═══════════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────────────────
2. TEMEL — zemin, tipografik ritim, odak
─────────────────────────────────────────────────────────────────────────── */
/* Zemin. site.css panelde de üç katmanlı radyal degrade + `body::before/::after`
doku bindiriyordu. Tablo ve grafiklerin arkasında hareketli bir zemin,
okunabilirliği düşüren saf gürültü; panelde düz yüzeye indiriliyor. */
body.is-authenticated {
background: var(--pnl-canvas);
color: var(--pnl-text);
font-size: var(--fs-md);
line-height: var(--lh-snug);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Inter'in sekmeli rakamları: tablodaki sayılar sütun hâlinde hizalanır.
Orantılı rakamlarda "11" ile "88" farklı genişlikte olur ve sayı sütunu
titrer — bir muhasebe ekranında bu doğrudan okuma hatasıdır. */
font-variant-numeric: tabular-nums;
font-feature-settings: "cv05" 1, "cv11" 1;
}
body.is-authenticated::before,
body.is-authenticated::after {
content: none;
}
/* `overflow-x: hidden` DEĞİL, `clip`.
site.css gövdeye `overflow-x: hidden` veriyor. İkisi de yatay taşmayı kırpar
ama `hidden` aynı zamanda bir KAYDIRMA BAĞLAMI yaratır ve içindeki hiçbir
`position: sticky` öge artık viewport'a yapışamaz — Ayarlar'daki kaydet
çubuğu bu yüzden tutmuyordu (ölçüldü: sekmeye göre 1096–2035px aşağıda
kalıyordu). `clip` aynı kırpmayı yapar, kaydırma bağlamı yaratmaz.
Kırpmanın kendisi korunuyor çünkü hâlâ bir emniyet ağı: taşma olduğunda
sayfayı yatay kaydırılabilir yapmaktansa kırpmak daha az kötü. Ama artık
taşmayı denetim aracı ayrıca ölçüyor (bkz. `clipped` kontrolü), yani
kırpma bir şeyi sessizce gizlemiyor. */
body.is-authenticated {
overflow-x: clip;
}
/* Aynı sorun `main.page-frame`de de vardı ve asıl engel oydu: `overflow-x:
hidden` + `overflow-y: auto` ile ana içerik alanı KENDİ BAŞINA bir kaydırma
kabı oluyordu. İçindeki `position: sticky` ögeler viewport'a değil bu kaba
göre çözülüyor; kabın yüksekliği içeriğine eşit olduğu için de sticky hiç
devreye girmiyordu. `clip` + `visible` ikilisi geçerli bir birleşimdir
(`hidden` + `visible` değildir — tarayıcı ikincisini auto'ya çevirir). */
body.is-authenticated .page-frame {
overflow-x: clip;
overflow-y: visible;
/* v1.37.2: tek sütun `1fr` = minmax(auto, 1fr) — içerideki geniş bir öge (Faturalar'daki 9 seçenekli
durum filtresi, 1205px) sütunu 375px ekranda 1249px'e büyütüyor, kırpma da bunu sessizce gizliyordu
(ölçüldü: topbar 1249px, "Ayarları Kaydet" düğmesi ekran dışı). `minmax(0, 1fr)` sütunu görünür
alana bağlar; kaydırılması gereken şey (segment kontrolü, tablo kabı) kendi içinde kaydırır. */
grid-template-columns: minmax(0, 1fr);
}
/* Başlık ritmi. Ölçek artık tek yerden geliyor; ekranlar kendi punto değerini
uydurmuyor. Dashboard'da H1 ve H2'nin ikisi de 34px'ti — yani hiyerarşi
yoktu, iki başlık birbiriyle yarışıyordu. */
body.is-authenticated h1 {
font-size: var(--fs-2xl);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
font-weight: var(--fw-bold);
margin: 0;
}
body.is-authenticated h2 {
font-size: var(--fs-xl);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
font-weight: var(--fw-semibold);
margin: 0;
}
body.is-authenticated h3 {
font-size: var(--fs-lg);
line-height: var(--lh-tight);
font-weight: var(--fw-semibold);
margin: 0;
}
body.is-authenticated h4,
body.is-authenticated h5 {
font-size: var(--fs-md);
line-height: var(--lh-tight);
font-weight: var(--fw-semibold);
margin: 0;
}
/* Odak halkası: tek tanım, her yerde aynı. Fare kullanıcısına gösterilmez
(`:focus-visible`), klavye kullanıcısına her zaman gösterilir. */
body.is-authenticated :focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--r-sm);
}
/* Hareket tercihini kapatan kullanıcı için: süreleri sıfırla, düzeni bozma. */
@media (prefers-reduced-motion: reduce) {
body.is-authenticated,
body.is-authenticated * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Kaydırma çubuğu: varsayılan çubuk koyu temada açık gri bir şerit olarak
duruyor ve yüzeyden daha parlak kalıyordu. */
body.is-authenticated * {
scrollbar-width: thin;
scrollbar-color: var(--pnl-border-strong) transparent;
}
body.is-authenticated ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
body.is-authenticated ::-webkit-scrollbar-track {
background: transparent;
}
body.is-authenticated ::-webkit-scrollbar-thumb {
background: var(--pnl-border-strong);
border: 3px solid transparent;
background-clip: content-box;
border-radius: var(--r-full);
}
body.is-authenticated ::-webkit-scrollbar-thumb:hover {
background: var(--pnl-text-3);
background-clip: content-box;
}
/* Seçim rengi markadan türer. */
body.is-authenticated ::selection {
background: color-mix(in srgb, var(--accent) 26%, transparent);
color: var(--pnl-text);
}
/* ───────────────────────────────────────────────────────────────────────────
3. KABUK VE ÜST BAR
───────────────────────────────────────────────────────────────────────────
Bu bölüm `.toolbar-*` sınıflarının tamamını devralır. Güvenli, çünkü bu
sınıflar yalnızca _Layout.cshtml'in `useAdminShell` dalında geçiyor —
yani panelin dışında hiçbir yerde kullanılmıyorlar (arandı, doğrulandı).
KAPATILAN HATA. Üst bardaki logo, 1134px gibi çok yaygın bir dizüstü
genişliğinde "Admin Console" rozetinin üstüne biniyordu; ölçüldüğünde
85×39px'lik gerçek bir çakışmaydı ve **panelin her sayfasında** vardı.
Sebep: `.toolbar-context-brand` bir flex öğesi olarak `min-width: 0` alıyor
ama içindeki logo `flex-shrink: 0` taşıyor. Yer daralınca bağlantı kutusu
0 genişliğe iniyor, logo ise küçülmeyi reddedip kutunun dışına taşıyor ve
komşusunun üstüne çiziliyor. Yeni düzende daralmayı **arama alanı** emiyor
(tek `min-width: 0` orada), marka bloğu ise hiç küçülmüyor.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .global-toolbar,
body.is-authenticated.is-authenticated .global-toolbar {
/* Üç bölge: marka+bağlam | arama | eylemler. Ortadaki bölge `1fr` ve
`min-width: 0` olduğu için bütün daralmayı o emer; yanlardakiler
içeriklerinin gerektirdiği genişlikte kalır ve asla ezilmez. */
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--sp-4);
position: sticky;
top: var(--sp-3);
z-index: 30;
min-height: 56px;
padding: var(--sp-2) var(--sp-3);
/* Hap biçimi (999px) bir pazarlama öğesi; panelde üst bar bir *yüzey
kenarı* olarak okunmalı. Bulanıklık korunuyor — kaydırılan içeriğin
üstünde duran bir çubukta işlevsel: altındaki metni okunmaz yapmadan
ayrım kuruyor. */
border-radius: var(--r-xl);
border: 1px solid var(--pnl-border);
background: color-mix(in srgb, var(--pnl-surface) 82%, transparent);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
box-shadow: var(--elev-1);
contain: layout style;
}
/* Kiracı rozeti. site.css metin rengi olarak HAM marka kırmızısını veriyor ve
rozetin kendi %8'lik açık zemininde bu 4.08:1 ediyor — eşiğin altında. Vurgu
rengi dolu yüzeyde beyaz metinle kullanılır; METİN olarak kullanılacaksa
koyulaştırılması gerekir. `--pnl-accent-fg` tam bunun için var (açık temada
6.06:1, koyuda 6.03:1). */
body.is-authenticated .tenant-badge,
body.is-authenticated .tenant-badge-btn {
color: var(--pnl-accent-fg);
border-color: var(--pnl-accent-border);
background: var(--pnl-accent-bg);
}
body.is-authenticated .tenant-badge svg,
body.is-authenticated .tenant-badge-btn svg {
color: currentColor;
}
/* Marka + kiracı bağlamı */
body.is-authenticated .toolbar-context {
display: flex;
align-items: center;
gap: var(--sp-3);
min-width: 0;
margin-right: 0;
}
body.is-authenticated .toolbar-context-brand {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
flex: 0 0 auto; /* ← hatanın kapatıldığı yer: marka bloğu küçülmez */
/* Logo 26px yüksekliğinde ama bağlantı bir dokunma hedefi; kutu 36px'e
tamamlanıyor (görsel boyut değişmiyor, tıklama alanı büyüyor). */
min-height: 36px;
color: inherit;
text-decoration: none;
border-radius: var(--r-sm);
}
body.is-authenticated .toolbar-context-logo {
/* 46px logo 56px'lik bir çubukta nefes bırakmıyordu. */
height: 26px;
width: auto;
max-width: 132px;
object-fit: contain;
object-position: left center;
display: block;
}
body.is-authenticated .toolbar-context-mark {
width: 30px;
height: 30px;
border-radius: var(--r-sm);
display: grid;
place-items: center;
flex: 0 0 auto;
/* Degrade yerine düz marka rengi: küçük bir kare içinde degrade yalnızca
kirli bir geçiş üretiyor, hiçbir bilgi taşımıyor. */
background: var(--accent);
color: var(--pnl-on-accent);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
letter-spacing: 0;
}
/* "Admin Console" rozeti. Panelin içindeyken bu etiket yeni bilgi vermiyor;
kenarlıklı bir hap olarak durduğunda ise hemen yanındaki **kiracı
rozetiyle** görsel olarak yarışıyordu — ikisi aynı ağırlıkta iki hap.
Sessiz bir üst-etikete indiriliyor ve dar ekranda tamamen kalkıyor. */
body.is-authenticated .toolbar-console-badge {
padding: 0;
border: 0;
background: none;
color: var(--pnl-text-3);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 1200px) {
body.is-authenticated .toolbar-console-badge {
display: none;
}
}
/* Arama: daralmayı emen tek bölge. */
body.is-authenticated .toolbar-search {
display: flex;
align-items: center;
gap: var(--sp-2);
min-width: 0; /* ← bütün esneklik burada */
max-width: 460px;
height: 36px;
padding: 0 var(--sp-2) 0 var(--sp-3);
border-radius: var(--r-sm);
border: 1px solid var(--pnl-border);
background: var(--pnl-surface-2);
transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
body.is-authenticated .toolbar-search:focus-within {
border-color: var(--pnl-accent-border);
background: var(--pnl-surface);
}
body.is-authenticated .toolbar-search > svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
color: var(--pnl-text-3);
}
body.is-authenticated .toolbar-search input {
flex: 1 1 auto;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
outline: none;
background: none;
color: var(--pnl-text);
font-size: var(--fs-md);
font-family: inherit;
}
body.is-authenticated .toolbar-search input::placeholder {
color: var(--pnl-text-3);
}
body.is-authenticated .toolbar-search input:focus {
/* Odak halkası kutunun kendisinde (`:focus-within`); alan içinde ikinci
bir halka çizilmemeli. */
box-shadow: none;
}
/* Ölçülen sorun: 31×36px'lik gönder düğmesi. 24×24'lük bir dokunma hedefi
parmak için küçük; en az 32px kare yapılıyor. */
body.is-authenticated .toolbar-search-submit {
flex: 0 0 auto;
width: 32px;
height: 32px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: var(--r-xs);
background: none;
color: var(--pnl-text-2);
cursor: pointer;
transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
body.is-authenticated .toolbar-search-submit:hover {
background: var(--pnl-surface);
color: var(--pnl-text);
}
body.is-authenticated .toolbar-search-submit svg {
width: 15px;
height: 15px;
}
/* Eylem bölgesi */
body.is-authenticated .global-toolbar-actions {
display: flex;
align-items: center;
gap: var(--sp-2);
flex: 0 0 auto;
}
/* ── Dar ekran: üç bölge iki satıra iner ────────────────────────────────────
960px altında arama kendi satırına geçiyor. Sebep: üç bölgeyi tek satırda
tutmaya çalışmak aramayı okunamayacak kadar daraltıyor — 200px'lik bir
arama kutusu, içine yazılanı göstermediği için yok hükmünde. */
@media (max-width: 960px) {
body.is-authenticated .global-toolbar {
grid-template-columns: minmax(0, 1fr) auto;
row-gap: var(--sp-2);
}
/* Arama kendi satırına indiğinde üst satırda marka + kiracı adı + dört
eylem düğmesi yan yana kalıyor ve 375px'te 448px'e taşıyordu (ölçüldü).
Daralabilecek tek parça kiracı ADI: logo sabit boyutlu, eylemler ise
dokunma hedefi olduğu için küçültülemez. Ad artık üç nokta ile kısalıyor. */
body.is-authenticated .toolbar-context {
min-width: 0;
}
body.is-authenticated .tenant-badge {
min-width: 0;
max-width: 100%;
overflow: hidden;
}
body.is-authenticated .tenant-badge > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
body.is-authenticated .toolbar-search {
grid-column: 1 / -1;
grid-row: 2;
max-width: none;
}
body.is-authenticated .global-toolbar-actions {
grid-column: 2;
grid-row: 1;
}
}
@media (max-width: 640px) {
body.is-authenticated .global-toolbar {
top: 0;
border-radius: var(--r-lg);
padding: var(--sp-2);
gap: var(--sp-2);
}
/* Telefonda tanılama kısayolu kalkıyor. Nadiren kullanılan, süper adminin
masaüstünde açtığı bir ekran; burada yerini dokunma hedefi olarak daha
değerli olan düğmelere bırakıyor. Menüden hâlâ erişilebilir. */
body.is-authenticated .global-toolbar-actions .icon-btn-link {
display: none;
}
/* Tema düğmesinin metni ("Koyu"/"Tema") kalkıyor: ikon zaten anlaşılır ve
burada her piksel dokunma hedefine gidiyor. */
body.is-authenticated .theme-toggle-copy {
display: none;
}
}
@media (max-width: 480px) {
/* Son 25px. Üst satır (marka + dört eylem) 375px'te 380px istiyordu.
Kısılacak doğru yer kiracı ROZETİ:
• Kiracı adı DEĞİŞTİRİLEMEZ bir etiketse (firma admini) sayfa zaten
"… için kart, kullanıcı ve saha trafiği" diye aynı adı yazıyor —
üst barda ikinci kez durmasına gerek yok, tamamen kalkıyor.
• Süper adminin kiracı DEĞİŞTİRİCİSİ ise işlevsel; kaldırılamaz.
Yalnızca adı gizleniyor, ikon ve ok kalıyor, düğme çalışmaya devam
ediyor ve açılan listede hangi kiracıda olunduğu zaten yazıyor. */
body.is-authenticated span.tenant-badge {
display: none;
}
body.is-authenticated .tenant-badge-btn > span:not(.tenant-caret) {
display: none;
}
/* Adı gizlenen kiracı değiştirici 55x24px'e düşüyordu — parmak için çok küçük
(ölçüldü). İşlevsel bir düğme olduğu için dokunma hedefine tamamlanıyor. */
body.is-authenticated .tenant-badge-btn {
min-height: 36px;
min-width: 44px;
justify-content: center;
}
/* Dokunma hedefleri parmak boyutuna çıkıyor. */
body.is-authenticated .global-toolbar-actions .icon-btn,
body.is-authenticated .toolbar-search-submit {
min-width: 40px;
min-height: 40px;
}
body.is-authenticated .toolbar-search {
height: 40px;
}
}
/* ───────────────────────────────────────────────────────────────────────────
4. DÜĞMELER
───────────────────────────────────────────────────────────────────────────
Envanter (panel görünümlerinde sayıldı): btn-secondary 111, btn-icon 86,
btn-small 56, btn-sm 29, btn-primary 20, btn-ghost 13, btn-danger 7.
İki tespit:
• `btn-small` ve `btn-sm` **aynı işi yapan iki isim** ve 85 kullanım ikiye
bölünmüş durumda. İkisi de burada aynı kurala bağlanıyor; markup'ta
tekilleştirme ayrı bir adım, ama görsel tutarsızlık bugün bitiyor.
• Birincil/ikincil oranı 20/111 — bu SAĞLIKLI. Birincil eylem nadir olmalı;
her ekranda tek bir "asıl iş" vardır. Bu yüzden marka kırmızısı yalnızca
`.btn-primary`ye ayrıldı: dekoratif degradelerden çekilince gerçekten
dikkat çeken bir sinyal hâline geliyor.
Ölçüler dokunma hedefinden türetildi: varsayılan 36px, küçük 30px (yalnızca
tablo satırı içi eylemler), mobilde hepsi en az 40px'e çıkıyor.
─────────────────────────────────────────────────────────────────────────── */
/* TABAN = BİRİNCİL. Bu kod tabanında çıplak `.btn` "birincil düğme" demek ve
124 yerde öyle kullanılıyor; site.css `.btn`e doğrudan vurgu degradesi veriyor.
Ben tabanı "stilsiz iskelet" sayıp rengi yalnızca `.btn-primary`ye vermiştim —
sonuç: panelde İKİ FARKLI birincil düğme (biri degradeli, biri düz) ve
varyantsız kullanımların rengi eski dosyadan gelmeye devam ediyordu. Ölçüm
sırasında "Yeni Tenant" düğmesinde yakalandı.
Doğrusu tabanın kod tabanındaki anlamı taşıması: `.btn` birincildir, diğer
varyantlar onu ezer (hepsi arka plan + kenarlık + renk üçlüsünü birlikte
tanımlıyor, aynı özgüllükte ve dosyada sonra geldikleri için kazanıyorlar).
Degrade de böylece kalkıyor — düz renk sistemin dili. */
body.is-authenticated .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
height: 36px;
padding: 0 var(--sp-4);
background: var(--accent);
background-image: none;
border: 1px solid var(--accent);
color: var(--pnl-on-accent);
border-radius: var(--r-sm);
font-family: inherit;
font-size: var(--fs-md);
font-weight: var(--fw-medium);
line-height: 1;
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
/* Yalnızca ucuz özellikler animasyonlanıyor. `box-shadow`/`transform`
yerine renk geçişi: uzun listelerde onlarca düğme aynı anda hover
durumuna girdiğinde düzen yeniden hesaplanmasın. */
transition: background-color var(--dur-1) var(--ease),
border-color var(--dur-1) var(--ease),
color var(--dur-1) var(--ease);
/* Metin seçilmesin: düğmeye çift tıklayınca etiketin maviye boyanması
tıklanabilirlik hissini bozuyor. */
user-select: none;
}
/* Taban hover. Varyantlardan ÖNCE tanımlanmalı: aynı özgüllükte olduğu için
sonraya konursa `.btn-secondary:hover` gibi kuralları ezer ve bütün ikincil
düğmeler hover'da kırmızıya döner. */
body.is-authenticated .btn:hover {
background: color-mix(in srgb, var(--accent) 86%, #000);
border-color: color-mix(in srgb, var(--accent) 86%, #000);
}
body.is-authenticated .btn:disabled,
body.is-authenticated .btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
body.is-authenticated .btn svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
/* Birincil — ekranın asıl işi. Tek dolu yüzey. */
body.is-authenticated .btn-primary {
background: var(--accent);
border-color: var(--accent);
color: var(--pnl-on-accent);
font-weight: var(--fw-semibold);
}
body.is-authenticated .btn-primary:hover {
background: color-mix(in srgb, var(--accent) 86%, #000);
border-color: color-mix(in srgb, var(--accent) 86%, #000);
}
/* İkincil — en sık kullanılan. Kenarlıklı, yüzeyle aynı zeminde: sayfada
onlarcası olduğu için "sessiz" olmak zorunda. */
body.is-authenticated .btn-secondary {
background: var(--pnl-surface);
border-color: var(--pnl-border);
color: var(--pnl-text);
}
body.is-authenticated .btn-secondary:hover {
background: var(--pnl-surface-2);
border-color: var(--pnl-border-strong);
}
/* Hayalet — geri/vazgeç gibi geri çekilen eylemler. */
body.is-authenticated .btn-ghost {
background: transparent;
border-color: transparent;
color: var(--pnl-text-2);
}
body.is-authenticated .btn-ghost:hover {
background: var(--pnl-surface-2);
color: var(--pnl-text);
}
/* Yıkıcı. Dolu kırmızı DEĞİL: dolu yüzey birincil eyleme ayrıldı ve bir
"Sil" düğmesi ekranın asıl işi değildir. Kenarlık + metin rengiyle
uyarıyor, onay adımı asıl freni sağlıyor. */
body.is-authenticated .btn-danger {
background: var(--pnl-danger-bg);
border-color: color-mix(in srgb, var(--pnl-danger) 32%, transparent);
color: var(--pnl-danger);
font-weight: var(--fw-semibold);
}
body.is-authenticated .btn-danger:hover {
background: color-mix(in srgb, var(--pnl-danger) 18%, transparent);
border-color: var(--pnl-danger);
}
body.is-authenticated .btn-danger-ghost,
body.is-authenticated .btn-text-danger {
background: transparent;
border-color: transparent;
color: var(--pnl-danger);
}
body.is-authenticated .btn-danger-ghost:hover,
body.is-authenticated .btn-text-danger:hover {
background: var(--pnl-danger-bg);
}
body.is-authenticated .btn-warning {
background: var(--pnl-warning-bg);
border-color: color-mix(in srgb, var(--pnl-warning) 32%, transparent);
color: var(--pnl-warning);
font-weight: var(--fw-semibold);
}
/* Boyutlar. `btn-small` ve `btn-sm` aynı kurala bağlı — ikisi de markup'ta
yaşıyor ve görsel olarak ayrışmaları anlamsızdı. */
body.is-authenticated .btn-small,
body.is-authenticated .btn-sm {
height: 30px;
padding: 0 var(--sp-3);
font-size: var(--fs-sm);
gap: var(--sp-1);
}
body.is-authenticated .btn-small svg,
body.is-authenticated .btn-sm svg {
width: 14px;
height: 14px;
}
body.is-authenticated .btn-lg {
height: 44px;
padding: 0 var(--sp-5);
font-size: var(--fs-lg);
}
/* İkon düğmesi.
DİKKAT: bu kod tabanında `.btn-icon` "yalnızca ikon" DEĞİL, "ikonu olan
düğme" anlamına geliyor — "Yeni Kart", "Kullanıcılar", "Analitiği Aç" gibi
etiketli kullanımları var (ölçülerek görüldü; ilk yazdığım sabit 36px'lik
kare, etiketi ikonun altına itip düğmeleri bozdu). Doğru davranış: etiket
yoksa kare, etiket varsa içeriğe göre büyüyen bir kutu. `min-width` +
esnek genişlik bunu markup'a hiç dokunmadan sağlıyor. */
/* `.btn-icon` yalnızca GEOMETRİ verir — rengi vermez. Çünkü `.btn btn-icon`
kombinasyonu (10 kullanım) bu kod tabanında "ikonlu BİRİNCİL düğme" demek;
burada nötr bir yüzey dayatmak onları ikincile çeviriyordu. Renk artık
tabandan ya da varyanttan (`btn-secondary`, `btn-ghost` …) geliyor. */
body.is-authenticated .btn-icon {
width: auto;
min-width: 36px;
padding: 0 var(--sp-2);
}
/* `.icon-btn` ise araç çubuğunda TEK BAŞINA kullanılıyor (tema, teşhis, menü);
`.btn` ile birlikte hiç geçmiyor. Kendi nötr yüzeyini taşımaya devam eder. */
body.is-authenticated .icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
width: auto;
height: 36px;
min-width: 36px;
padding: 0 var(--sp-2);
border-radius: var(--r-sm);
border: 1px solid var(--pnl-border);
background: var(--pnl-surface);
color: var(--pnl-text-2);
font-family: inherit;
font-size: var(--fs-md);
font-weight: var(--fw-medium);
white-space: nowrap;
cursor: pointer;
transition: background-color var(--dur-1) var(--ease),
border-color var(--dur-1) var(--ease),
color var(--dur-1) var(--ease);
}
/* Etiketi olan ikon düğmesine yatay nefes: kare hâlde 8px yeterli, metin
varsa kenarlar sıkışık görünüyor. */
body.is-authenticated .btn-icon:not(:empty),
body.is-authenticated .icon-btn:not(:empty) {
padding-inline: var(--sp-3);
}
body.is-authenticated .icon-btn:hover {
background: var(--pnl-surface-2);
border-color: var(--pnl-border-strong);
color: var(--pnl-text);
}
body.is-authenticated .icon-btn svg {
width: 16px;
height: 16px;
}
body.is-authenticated .btn-small.btn-icon,
body.is-authenticated .btn-sm.btn-icon {
height: 30px;
min-width: 30px;
padding-inline: var(--sp-2);
}
/* Düğme grubu: bitişik eylemler tek bir kontrol gibi okunur. */
body.is-authenticated .btn-group {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
}
/* Dokunma hedefi ekran GENİŞLİĞİNE değil, GİRDİ TÜRÜNE bağlanıyor.
`max-width: 640px` yanlış sinyaldi: 768px'lik bir tablet de parmakla
kullanılıyor ama o kuralın dışında kalıyordu (ölçüldü — 768px'te tablo
düğmeleri 30px'te kalmıştı), buna karşılık dar bir masaüstü penceresi
gereksiz yere büyük hedefler alıyordu. `pointer: coarse` tam olarak
"bu cihaz parmakla kullanılıyor" demek.
30px'lik tablo içi düğmeler 36'ya çıkıyor; 44 ideal ama tablo satırını
iki katına çıkarır — 36 kabul edilebilir taban, birincil eylemler 44'e
ulaşıyor. */
@media (pointer: coarse) {
body.is-authenticated .btn {
height: 40px;
}
body.is-authenticated .btn-small,
body.is-authenticated .btn-sm {
height: 36px;
}
body.is-authenticated .btn-icon,
body.is-authenticated .icon-btn {
height: 40px;
min-width: 40px;
}
body.is-authenticated .btn-small.btn-icon,
body.is-authenticated .btn-sm.btn-icon {
height: 36px;
min-width: 36px;
}
}
/* ───────────────────────────────────────────────────────────────────────────
5. YÜZEYLER — panel, kart, bölüm başlığı
───────────────────────────────────────────────────────────────────────────
`.panel` hem panelde hem kamuya açık sayfalarda kullanılıyor (29 / 17
görünüm); burada YALNIZCA panel bağlamındaki hâli yeniden tanımlanıyor,
kart sayfası site.css'teki hâlini korur.
Eski hâlde her kutu 24px yarıçap, 90px yayılan gölge ve çoğu zaman üstüne
kırmızı bir degrade taşıyordu. Üç sonucu vardı: (1) hiçbir kutu diğerinden
ayrışmıyordu, çünkü hepsi aynı yükseklikteydi; (2) degrade, içindeki durum
renkleriyle (yeşil/kırmızı rozetler) karışıyordu; (3) yumuşak köşeler
yoğun listede kutu sınırını belirsizleştiriyordu.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .panel {
background: var(--pnl-surface);
border: 1px solid var(--pnl-border);
border-radius: var(--r-lg);
box-shadow: var(--elev-1);
padding: var(--sp-5);
/* Dekoratif degradeler kaldırılıyor: site.css bazı panellere
`background-image` ile kırmızı bir yıkama koyuyordu. */
background-image: none;
}
body.is-authenticated .panel-flush {
padding: 0;
overflow: hidden;
}
/* Bölüm başlığı: başlık + açıklama + sağda eylem. Tek bir hizalama kuralı,
çünkü ekranlar bugün bunu her seferinde elle kuruyor ve her biri farklı. */
body.is-authenticated .section-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
margin-bottom: var(--sp-4);
}
body.is-authenticated .section-heading h2,
body.is-authenticated .section-heading h3 {
font-size: var(--fs-xl);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
font-weight: var(--fw-semibold);
margin: 0;
}
body.is-authenticated .section-heading p {
margin: var(--sp-1) 0 0;
color: var(--pnl-text-2);
font-size: var(--fs-sm);
line-height: var(--lh-normal);
max-width: 68ch;
}
/* ───────────────────────────────────────────────────────────────────────────
6. METRİK KARTLARI
───────────────────────────────────────────────────────────────────────────
Panelin en çok tekrarlanan bileşeni ve en çok bozulan yeri.
ÖLÇÜLEN HATA: kart ızgarası 375px'te bile **dört sütun** kalıyordu. Sonuç,
her kartın ~70px'e sıkışması, etiketlerin "Toplam / Kart" diye hecelenmesi
ve "Toplam Scan"in kesilmesiydi. Mobil uyumluluk burada tamamen yoktu.
Yeni ızgara `auto-fit` + `minmax` ile çalışıyor: sütun sayısı sabit değil,
kartın okunabilir kalabildiği en küçük genişlikten (170px) türetiliyor.
Böylece 375px'te 2, 768px'te 3–4, geniş ekranda 4–6 sütun oluşuyor ve
hiçbir kırılma noktası elle tanımlanmıyor.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .metric-grid,
body.is-authenticated .metric-grid-command,
body.is-authenticated .stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: var(--sp-3);
}
body.is-authenticated .metric-card,
body.is-authenticated .stat-tile {
display: flex;
flex-direction: column;
gap: var(--sp-1);
min-height: 0;
padding: var(--sp-4);
border: 1px solid var(--pnl-border);
border-radius: var(--r-lg);
background: var(--pnl-surface);
background-image: none; /* kırmızı degrade yıkaması kalkıyor */
box-shadow: var(--elev-1);
}
/* Etiket. Eskiden 0.80rem + 0.07em harf aralığıyla büyük harfti; büyük harf
+ geniş aralık bir "başlık" ağırlığı veriyordu, oysa burası kartın en az
önemli parçası. Küçültülüp sessizleştiriliyor, rakam öne çıkıyor. */
body.is-authenticated .metric-card span,
body.is-authenticated .metric-card > .metric-label,
body.is-authenticated .stat-tile span {
order: 1;
color: var(--pnl-text-2);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
line-height: var(--lh-tight);
/* Dar sütunda kelime ortadan bölünmesin. */
overflow-wrap: break-word;
hyphens: none;
}
/* Rakam: kartın asıl içeriği. Sekmeli rakamlar gövdeden miras alınıyor. */
body.is-authenticated .metric-card strong,
body.is-authenticated .stat-tile strong {
order: 2;
font-size: var(--fs-metric);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--pnl-text);
}
/* Kartın altındaki açıklama satırı ("Tüm public ziyaretler" gibi). */
body.is-authenticated .metric-card small,
body.is-authenticated .metric-card .metric-note,
body.is-authenticated .stat-tile small {
order: 3;
color: var(--pnl-text-3);
font-size: var(--fs-xs);
line-height: var(--lh-snug);
}
@media (max-width: 480px) {
body.is-authenticated .metric-grid,
body.is-authenticated .metric-grid-command,
body.is-authenticated .stat-grid {
/* Telefonda iki sütun: tek sütun ekranı gereksiz uzatır, üç sütun
rakamı okunmaz yapar. */
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--sp-2);
}
body.is-authenticated .metric-card,
body.is-authenticated .stat-tile {
padding: var(--sp-3);
}
body.is-authenticated .metric-card strong,
body.is-authenticated .stat-tile strong {
font-size: var(--fs-metric-sm);
}
}
/* ───────────────────────────────────────────────────────────────────────────
7. DURUM ROZETLERİ
───────────────────────────────────────────────────────────────────────────
Rozet bir *durum* taşır; süs değildir. Bu yüzden hepsi aynı biçimde, tek
farkı renk ailesi. Renk tek başına bilgi taşımasın diye metin her zaman
yazılı kalıyor (renk körlüğü ve tek renkli çıktı için).
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .tag,
body.is-authenticated .status-badge {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
height: 22px;
padding: 0 var(--sp-2);
border-radius: var(--r-xs);
border: 1px solid transparent;
background: var(--pnl-surface-2);
color: var(--pnl-text-2);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
line-height: 1;
white-space: nowrap;
}
body.is-authenticated .tag-success,
body.is-authenticated .status-active,
body.is-authenticated .status-success {
background: var(--pnl-success-bg);
border-color: color-mix(in srgb, var(--pnl-success) 26%, transparent);
color: var(--pnl-success);
}
body.is-authenticated .tag-warning,
body.is-authenticated .status-pending,
body.is-authenticated .status-warning {
background: var(--pnl-warning-bg);
border-color: color-mix(in srgb, var(--pnl-warning) 26%, transparent);
color: var(--pnl-warning);
}
body.is-authenticated .tag-danger,
body.is-authenticated .status-danger,
body.is-authenticated .status-failed {
background: var(--pnl-danger-bg);
border-color: color-mix(in srgb, var(--pnl-danger) 26%, transparent);
color: var(--pnl-danger);
}
body.is-authenticated .tag-info,
body.is-authenticated .status-info {
background: var(--pnl-info-bg);
border-color: color-mix(in srgb, var(--pnl-info) 26%, transparent);
color: var(--pnl-info);
}
body.is-authenticated .tag-muted,
body.is-authenticated .status-muted,
body.is-authenticated .status-passive {
background: var(--pnl-surface-2);
border-color: var(--pnl-border);
/* Üçüncül ton DEĞİL: rozetin kendi zemini (surface-2) sayfa zemininden koyu
olduğu için üçüncül renk orada 4.48:1'e düşüyordu — eşiğin 0,02 altında.
İkincil ton aynı zeminde 6.92:1 veriyor. */
color: var(--pnl-text-2);
}
/* ───────────────────────────────────────────────────────────────────────────
8. TABLOLAR
───────────────────────────────────────────────────────────────────────────
Panelin 16 ekranında `.data-table` kullanılıyor ve bu sınıf kamuya açık
hiçbir görünümde geçmiyor — yani tamamen panele ait.
ÖLÇÜLEN SORUNLAR
• /admin/cards tablosu 1128px'lik bir kapta 1497px genişliğinde. Yatay
kaydırma vardı ama kullanıcıya **sağda daha fazla sütun olduğunu
söyleyen hiçbir işaret yoktu**; kaydırılabileceğini bilmeyen kullanıcı
için o sütunlar yok demektir.
• Yapışkan başlık yoktu: uzun listede aşağı inildiğinde hangi sütunun ne
olduğu kayboluyordu.
• Başlık satırı 0.80rem + 700 ağırlık + 0.05em aralıkla büyük harfti —
verinin kendisinden daha ağır duruyordu.
• Satır vurgusu yoktu; göz uzun bir satırı yatay olarak takip edemiyordu.
YAPIŞKAN BAŞLIK VE KAYDIRMA KABI — bir CSS gerçeği:
`overflow-x: auto` verildiğinde `overflow-y: visible` de **auto'ya
dönüşür** (şartname gereği). Yani "yalnızca yatay kaydırılan ama dikey
taşan" bir kap kurulamaz. Bu yüzden tablo alanı sınırlı yükseklikte bir
kaydırma bölgesine dönüştürülüyor; başlık o bölgeye yapışıyor. `max-height`
olduğu için kısa tablolar hiç etkilenmiyor, uzun listeler ise sayfayı
sonsuza uzatmak yerine kendi içinde kayıyor ve başlığını koruyor.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .table-wrap {
position: relative;
overflow: auto;
max-height: clamp(320px, 68vh, 760px);
border: 1px solid var(--pnl-border);
border-radius: var(--r-lg);
background: var(--pnl-surface);
/* Sağda daha fazla sütun olduğunun İŞARETİ. Kaydırma konumuna göre
kendiliğinden beliren/kaybolan bir gölge: kap sola kaydırıldığında
sağdaki gölge görünür, sona gelindiğinde kaybolur. JS gerekmiyor —
`background-attachment: local` bunu yalnızca CSS ile yapıyor. */
background-image:
linear-gradient(to right, var(--pnl-surface) 30%, transparent),
linear-gradient(to left, var(--pnl-surface) 30%, transparent),
linear-gradient(to right, rgba(0, 0, 0, 0.16), transparent 14px),
linear-gradient(to left, rgba(0, 0, 0, 0.16), transparent 14px);
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
body.is-authenticated .data-table {
width: 100%;
border-collapse: separate; /* `collapse` yapışkan başlıkta kenarlığı düşürür */
border-spacing: 0;
font-size: var(--fs-md);
}
body.is-authenticated .data-table th,
body.is-authenticated .data-table td {
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--pnl-border-soft);
text-align: left;
/* `top` yerine `middle`: hücrelerin çoğu tek satır ve üstten hizalama
onları satırın içinde yukarı yapıştırıyordu. Çok satırlı yığın taşıyan
hücreler kendi kuralıyla `top`a dönebilir (aşağıda). */
vertical-align: middle;
}
body.is-authenticated .data-table thead th {
position: sticky;
top: 0;
z-index: 2;
padding-block: var(--sp-2);
/* Yarı saydam olamaz: altından kayan satırlar görünür. */
background: var(--pnl-surface-2);
border-bottom: 1px solid var(--pnl-border);
color: var(--pnl-text-2);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
white-space: nowrap;
}
body.is-authenticated .data-table tbody td {
color: var(--pnl-text);
}
body.is-authenticated .data-table tbody tr:last-child td {
border-bottom: 0;
}
/* Satır vurgusu: gözün uzun bir satırı yatay takip edebilmesi için. */
body.is-authenticated .data-table tbody tr {
transition: background-color var(--dur-1) var(--ease);
}
body.is-authenticated .data-table tbody tr:hover td {
background: var(--pnl-surface-2);
}
/* Hücre içi ikincil metin (ikinci satır: e-posta, slug, zaman damgası). */
body.is-authenticated .data-table .table-secondary,
body.is-authenticated .data-table .table-muted-note {
display: block;
color: var(--pnl-text-3);
font-size: var(--fs-xs);
line-height: var(--lh-snug);
}
body.is-authenticated .data-table .table-primary,
body.is-authenticated .data-table strong {
font-weight: var(--fw-semibold);
color: var(--pnl-text);
}
/* Kimlik hücresi gibi çok satırlı yığınlar üstten hizalanır. */
body.is-authenticated .data-table td:has(.table-secondary),
body.is-authenticated .data-table td:has(.table-date-stack) {
vertical-align: top;
}
/* Satır içi eylemler: sağa yaslı, sarmayan, tıklanınca satırı seçmeyen. */
body.is-authenticated .table-actions,
body.is-authenticated .table-action-group {
display: flex;
align-items: center;
gap: var(--sp-1);
justify-content: flex-end;
flex-wrap: nowrap;
}
body.is-authenticated .data-table td:last-child {
white-space: nowrap;
}
/* Seçim onay kutusu sütunu daralsın. */
body.is-authenticated .data-table th:has(input[type="checkbox"]),
body.is-authenticated .data-table td:has(input[type="checkbox"]) {
width: 1%;
padding-right: var(--sp-2);
}
/* Dokunmalı cihaz: satır yüksekliği parmak için artıyor. */
@media (pointer: coarse) {
body.is-authenticated .data-table th,
body.is-authenticated .data-table td {
padding-block: var(--sp-4);
}
body.is-authenticated .table-wrap {
/* Telefonda iç içe kaydırma bölgesi can sıkıcı: sayfa kaydırırken
tabloya takılıyor. Yükseklik sınırı kalkıyor, tablo sayfayla
birlikte uzuyor; başlık yapışkanlığını kaybediyor ama yatay
kaydırma ve işareti duruyor. */
max-height: none;
}
}
/* ───────────────────────────────────────────────────────────────────────────
9. FORMLAR
───────────────────────────────────────────────────────────────────────────
Envanter: .field 135, .form-control 59, .form-label 51, .form-hint 42,
.field-error / .field-validation 56+42. Yapı tutarlı — sorun görünümde.
Panelde form alanları veriyle aynı yoğunlukta olmalı: bir ayar ekranında
yirmi alan varsa her biri 52px yüksekliğinde olduğunda ekran üç katına
çıkıyor ve hiçbir alan diğerinden ayrışmıyor. Alan yüksekliği düğmeyle
aynı (36px) tutuluyor; yan yana durduklarında taban çizgileri hizalanıyor.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .field,
body.is-authenticated .form-group {
display: flex;
flex-direction: column;
gap: var(--sp-1);
min-width: 0;
}
body.is-authenticated .form-label,
body.is-authenticated .field > label {
color: var(--pnl-text-2);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
}
/* Metin alanları. Liste bilinçli olarak dar tutuldu: renk, dosya, onay kutusu ve
radyo kendi kurallarına sahip. Bunları `:not()` ile dışlamak yerine ADIYLA
dışlamak gerekiyordu — `:not()` argümanının özgüllüğünü kurala EKLİYOR ve
aşağıdaki daha özel görünen renk kuralını sessizce yeniyordu (renk seçici
341px genişliğinde çiziliyordu; ölçüldü). */
/* `:not([type="color"]):not([type="file"])` YAZILMIYOR: `:not()` argümanının
özgüllüğünü kurala EKLER ve bu seçiciyi (0,4,1) yapardı. Böyle bir taban,
sonradan gelen daha basit ama daha DOĞRU kuralları — örneğin geçersiz alanın
kırmızı kenarlığını (0,2,1) — sessizce yener. Bu tuzağa bu projede üç kez
düşüldü (renk seçici 341px, dosya alanı, doğrulama kenarlığı). Renk ve dosya
alanları aşağıda kendi kurallarıyla ezildikleri için dışlamaya gerek yok. */
body.is-authenticated .form-control,
body.is-authenticated .field input[type="text"],
body.is-authenticated .field input[type="email"],
body.is-authenticated .field input[type="password"],
body.is-authenticated .field input[type="search"],
body.is-authenticated .field input[type="url"],
body.is-authenticated .field input[type="tel"],
body.is-authenticated .field input[type="number"],
body.is-authenticated .field input[type="date"],
body.is-authenticated .field input:not([type]),
body.is-authenticated .field select,
body.is-authenticated .field textarea {
width: 100%;
min-width: 0;
height: 36px;
padding: 0 var(--sp-3);
border: 1px solid var(--pnl-border);
border-radius: var(--r-sm);
background: var(--pnl-surface);
color: var(--pnl-text);
font-family: inherit;
font-size: var(--fs-md);
line-height: normal;
/* site.css her alana `inset 0 1px 0 rgba(255,255,255,.5)` veriyor — açık
temada kağıdımsı bir üst kenar, KOYU temada #12151a alanın tepesinde
parlak beyaz bir çizgi (ölçüldü). Odak halkası aşağıda ayrıca
tanımlandığı için burada güvenle sıfırlanıyor; bu kural odak kuralından
ÖNCE geliyor, sonuna eklenseydi odak halkasını da söndürürdü. */
box-shadow: none;
transition: border-color var(--dur-1) var(--ease),
background-color var(--dur-1) var(--ease);
}
body.is-authenticated textarea.form-control,
body.is-authenticated .field textarea {
height: auto;
min-height: 88px;
padding: var(--sp-2) var(--sp-3);
line-height: var(--lh-snug);
resize: vertical;
}
body.is-authenticated .form-control::placeholder,
body.is-authenticated .field input::placeholder,
body.is-authenticated .field textarea::placeholder {
color: var(--pnl-text-3);
}
body.is-authenticated .form-control:hover,
body.is-authenticated .field input:hover,
body.is-authenticated .field select:hover {
border-color: var(--pnl-border-strong);
}
body.is-authenticated .form-control:focus,
body.is-authenticated .field input:focus,
body.is-authenticated .field select:focus,
body.is-authenticated .field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--pnl-accent-bg);
}
body.is-authenticated .form-control:disabled,
body.is-authenticated .field input:disabled,
body.is-authenticated .field select:disabled {
background: var(--pnl-surface-2);
color: var(--pnl-text-3);
cursor: not-allowed;
}
/* Seçim kutusu: tarayıcı okunu kendi okumuzla değiştiriyoruz, çünkü
varsayılan ok koyu temada sistem renginde kalıp yüzeyle çatışıyor. */
body.is-authenticated .field select,
body.is-authenticated select.form-control {
appearance: none;
-webkit-appearance: none;
padding-right: var(--sp-8);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--sp-3) center;
background-size: 16px;
cursor: pointer;
}
/* Yardım metni ve hata. Hata rengi TEK BAŞINA bilgi taşımıyor: metin her
zaman yazılı, böylece renk körlüğünde de okunuyor. */
body.is-authenticated .form-hint,
body.is-authenticated .field-hint {
color: var(--pnl-text-3);
font-size: var(--fs-xs);
line-height: var(--lh-snug);
margin: 0;
}
body.is-authenticated .field-error,
body.is-authenticated .field-validation-error,
body.is-authenticated .text-danger {
color: var(--pnl-danger);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
line-height: var(--lh-snug);
}
/* Geçersiz alan: kenarlık TEK BAŞINA yeterince ayrışmıyordu — koyu temada
1px kırmızı çizgi, komşu alanların 1px nötr çizgisinden bir bakışta
ayırt edilemiyor. Hafif bir tint ekleniyor; odakta halka da tehlike
tonuna geçiyor ki kullanıcı düzeltirken hangi alanda olduğunu bilsin. */
body.is-authenticated .field:has(.field-error:not(:empty)) input,
body.is-authenticated .field:has(.field-validation-error:not(:empty)) input,
body.is-authenticated .input-validation-error,
body.is-authenticated textarea.input-validation-error,
body.is-authenticated select.input-validation-error {
border-color: var(--pnl-danger);
background: var(--pnl-danger-bg);
}
body.is-authenticated .input-validation-error:focus {
border-color: var(--pnl-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pnl-danger) 18%, transparent);
}
/* Renk seçici: `width: 100%` kuralının dışında. Bir renk örneği metin alanı
değil; 400px genişliğinde bir renk bloğu hem yanlış hem de yanına konan
sıfırlama düğmesiyle hizasını kaybediyordu. */
body.is-authenticated .field input[type="color"],
body.is-authenticated input[type="color"].form-control {
width: 56px;
min-width: 56px;
height: 36px;
padding: 3px;
cursor: pointer;
}
/* Dosya seçici: yükseklik metin alanıyla aynı kalmalı ama iç dolgusu
tarayıcının kendi düğmesini eziyordu. */
body.is-authenticated .field input[type="file"],
body.is-authenticated input[type="file"].form-control {
height: auto;
padding: var(--sp-2) var(--sp-3);
}
/* Onay kutusu ve radyo: global `input` kuralından muaf kalmalı, yoksa tam
genişlikte boş bir kapsül olarak çiziliyorlar. */
body.is-authenticated .field input[type="checkbox"],
body.is-authenticated .field input[type="radio"],
body.is-authenticated input[type="checkbox"],
body.is-authenticated input[type="radio"] {
width: 16px;
height: 16px;
min-width: 16px;
padding: 0;
accent-color: var(--accent);
cursor: pointer;
}
/* Form satırı: YAN YANA alanlar. Tek kural, `auto-fit` ile — ekranlar bugün
her birinde farklı bir grid tanımlıyor.
DİKKAT — `.form-stack` BURAYA AİT DEĞİL. Adına bakıp çok sütunlu bir satır
sandım ve Ayarlar formunu üç sütuna böldüm: alanlar 60px'lik kutulara
sıkıştı, sekme çubuğu kesildi (ölçüldü). Adı zaten söylüyordu — "stack",
yani DİKEY yığın. Bir sınıfı biçimlendirmeden önce markup'ına bakmak
gerekiyor; bu, aynı oturumda ikinci kez yaşandı (ilki `.filter-shell`). */
body.is-authenticated .form-row,
body.is-authenticated .input-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--sp-4);
align-items: start;
}
/* Dikey form yığını: tek sütun, tutarlı dikey ritim. */
body.is-authenticated .form-stack {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--sp-5);
align-content: start;
}
/* Filtre bloğu: liste ekranlarının üstündeki arama + durum + eylem.
Gerçek yapı (markup okundu): `.filter-shell` DİKEY bir kap — üstte başlık
satırı (`.filter-shell-header`), altında alanların formu. Bunu önce bir
yatay çubuk sanıp `flex` yaptım ve başlığı alanların soluna kaydırdım;
markup'a bakmadan biçimlendirmenin bedeli. Doğrusu aşağıda.
Blok eskiden ~185px yükseklik kaplıyordu (iki alan + kendi satırında iki
düğme) ve asıl işi — tabloyu — ekranın altına itiyordu. Alanlar ve
düğmeler artık tek satırda hizalanıyor, dar ekranda sarıyor. */
body.is-authenticated .filter-shell {
display: grid;
gap: var(--sp-3);
}
body.is-authenticated .filter-shell-header {
display: flex;
/* Yön AÇIKÇA yatay. site.css dar ekranda bu bloğu `column` yapıyor ve o yönde
`align-items: center` YATAY ortalamaya dönüşüyor: başlık ve etiket ekranın
ortasına kayıyordu (ölçüldü: x=131 / x=123). Aynı tuzağa bu oturumda üçüncü
kez düşüldü (önce `.topbar`, sonra `.topbar-title`) — site.css'in mobil
kuralları flex yönünü değiştirdiği için, yön varsayılmadan yazılmalı. */
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
flex-wrap: wrap;
}
body.is-authenticated .filter-shell-title h3 {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
margin: 0;
}
body.is-authenticated .filter-meta {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
}
/* Alanlar ve eylemler aynı satırda, taban çizgisinde hizalı. */
body.is-authenticated .toolbar-filter {
display: flex;
align-items: flex-end;
gap: var(--sp-3);
flex-wrap: wrap;
}
body.is-authenticated .toolbar-filter > .grid,
body.is-authenticated .toolbar-filter > .grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--sp-3);
flex: 1 1 320px;
min-width: 0;
}
body.is-authenticated .toolbar-filter .btn-group,
body.is-authenticated .toolbar-filter .filter-actions {
flex: 0 0 auto;
}
/* Dokunmalı cihaz: alan yüksekliği parmak hedefine çıkıyor ve iOS'un
otomatik yakınlaştırmasını engellemek için punto 16px'e ulaşıyor
(Safari 16px'in altındaki alanlara odaklanınca sayfayı zoomluyor). */
@media (pointer: coarse) {
body.is-authenticated .form-control,
body.is-authenticated .field input[type="text"],
body.is-authenticated .field input[type="email"],
body.is-authenticated .field input[type="password"],
body.is-authenticated .field input[type="search"],
body.is-authenticated .field input[type="url"],
body.is-authenticated .field input[type="tel"],
body.is-authenticated .field input[type="number"],
body.is-authenticated .field input[type="date"],
body.is-authenticated .field input:not([type]),
body.is-authenticated .field select,
body.is-authenticated .field textarea {
height: 44px;
font-size: 1rem;
}
body.is-authenticated .field textarea {
height: auto;
}
body.is-authenticated .field input[type="checkbox"],
body.is-authenticated .field input[type="radio"],
body.is-authenticated input[type="checkbox"],
body.is-authenticated input[type="radio"] {
width: 20px;
height: 20px;
min-width: 20px;
}
}
/* ───────────────────────────────────────────────────────────────────────────
10. GEZİNME — kalıcı kenar menüsü
───────────────────────────────────────────────────────────────────────────
YAPISAL BULGU. Kenar menüsü `@media (max-width: 1180px)` ile çekmeceye
dönüşüyordu. 1180px çok yüksek bir eşik: 1134px gibi son derece yaygın bir
dizüstü genişliğinde bile ana gezinme hamburgerin arkasına giriyor. Bunun
bedeli her gezinmede iki tıklama ve — daha önemlisi — kullanıcının nerede
olduğunu gösteren bağlamın kaybolması. Panelde gezinme birincil arayüzdür;
sığdığı her yerde görünür kalmalı.
Eşik 1024px'e iniyor. Hesap: 1024 − 240 (menü) − 20 (boşluk) − 24 (kenar
payı) ≈ 740px içerik. Tablolar zaten kendi içinde yatay kayıyor, kartlar
auto-fit ızgarada; bu genişlik yeterli. 1024'ün altında çekmece davranışı
aynen korunuyor.
Öğe yüksekliği 59px'ti — 16 gezinme öğesi 944px ediyor, yani menü tek
ekrana SIĞMIYORDU ve kendi içinde kaydırılması gerekiyordu. 38px'e
indirilince 16 öğe ~610px'e sığıyor.
─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
body.is-authenticated .app-shell {
grid-template-columns: 240px minmax(0, 1fr);
gap: var(--sp-5);
align-items: start;
}
body.is-authenticated .sidebar {
position: sticky;
/* SIRA ÖNEMLİ: `inset: auto` çekmece konumlandırmasını sıfırlamak için
gerekiyor ama `top`tan SONRA yazıldığında onu da siliyor — menü
`top: auto` ile kalıyor ve sticky hiç devreye girmiyordu (ölçüldü:
600px kaydırmada menü -532px'e gitmişti). Önce sıfırla, sonra ata. */
inset: auto;
/* Üst bar 56px + üst boşluk 12px + nefes 8px */
top: 76px;
transform: none;
visibility: visible;
/* GENİŞLİK AÇIKÇA SIFIRLANIYOR. site.css'in çekmece kuralı
`@media (max-width: 1180px)` içinde `width: 340px` veriyor ve bu
aralık benim 1024px eşiğimle ÇAKIŞIYOR (1024–1180 bandı ikisine de
uyuyor). Konumu sticky'ye çevirmek yetmedi: kutu 240px'lik grid
sütununda 340px kalıp içeriğin 100px üstüne taşıdı ve sayfa
başlığının üzerine bindi (ölçüldü: /admin/team, /admin/domains,
/admin/webhooks). Genişlik artık sütunun kendisinden geliyor. */
width: auto;
min-width: 0;
max-width: none;
max-height: calc(100vh - 96px);
overflow-y: auto;
overscroll-behavior: contain;
}
/* Kalıcı menü varken hamburger ve arka perde anlamsız. */
body.is-authenticated .menu-btn,
body.is-authenticated .sidebar-backdrop,
body.is-authenticated .sidebar-close {
display: none;
}
}
body.is-authenticated .sidebar {
display: grid;
gap: var(--sp-4);
align-content: start;
padding: var(--sp-4) var(--sp-3);
border: 1px solid var(--pnl-border);
border-radius: var(--r-xl);
background: var(--pnl-surface);
box-shadow: var(--elev-1);
}
/* Dekoratif radyal degrade kalkıyor: menü sabit duran bir yüzey, üstünde
hareketli bir doku olması aktif öğeyi bulmayı zorlaştırıyordu. */
body.is-authenticated .sidebar::before {
content: none;
}
body.is-authenticated .sidebar-brand {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 0 var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--pnl-border-soft);
}
body.is-authenticated .sidebar-logo {
height: 24px;
width: auto;
max-width: 132px;
object-fit: contain;
}
body.is-authenticated .nav-list {
display: grid;
gap: 2px;
align-content: start;
}
/* Grup başlığı: gezinmenin bilgi mimarisini taşıyan tek işaret. Sessiz ama
okunabilir; öğelerden açıkça ayrışması için üstünde boşluk var. */
body.is-authenticated .nav-group-title {
padding: var(--sp-4) var(--sp-2) var(--sp-1);
color: var(--pnl-text-3);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
body.is-authenticated .nav-list > .nav-group-title:first-child {
padding-top: 0;
}
body.is-authenticated .nav-link {
display: flex;
align-items: center;
gap: var(--sp-3);
min-height: 38px;
padding: 0 var(--sp-3);
border: 0;
border-radius: var(--r-sm);
color: var(--pnl-text-2);
/* Ağırlık 700'den 500'e: HER öğe kalınken aktif öğe ayrışamıyordu.
Kalınlık artık bir durum işareti. */
font-size: var(--fs-md);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
text-decoration: none;
background: transparent;
/* `transform` ile hover kaldırma kalktı: 16 öğelik bir listede fareyle
gezinirken satırların zıplaması gürültü üretiyor. Renk yeterli. */
transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
body.is-authenticated .nav-link:hover {
transform: none;
background: var(--pnl-surface-2);
color: var(--pnl-text);
}
body.is-authenticated .nav-link svg {
width: 17px;
height: 17px;
flex: 0 0 auto;
opacity: 0.85;
}
body.is-authenticated .nav-link span:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* Aktif öğe: dolu yüzey + marka rengi. Sol çubuk yerine dolu bir kutu,
çünkü çubuk 2px'lik bir işaret olarak taranırken gözden kaçıyordu. */
body.is-authenticated .nav-link.active {
background: var(--pnl-accent-bg);
color: var(--pnl-accent-fg);
font-weight: var(--fw-semibold);
}
body.is-authenticated .nav-link.active svg {
opacity: 1;
color: var(--accent);
}
body.is-authenticated .sidebar-foot {
padding-top: var(--sp-3);
border-top: 1px solid var(--pnl-border-soft);
}
/* Çekmece hâli (1024px altı): üstteki kurallar geçerli kalıyor, yalnızca
konumlandırma değişiyor. */
@media (max-width: 1023.98px) {
body.is-authenticated .sidebar {
/* Çekmece ekranın TAMAMINI kaplamamalı. Görünür kalan arka perde
şeridi, bunun kapatılabilir bir katman olduğunu söyleyen tek
ipucu; tam genişlikte açıldığında kullanıcı "sayfa değişti"
sanıyor ve geri düğmesini arıyor. Ayrıca 375px ekranda 16px
taşıyordu (ölçüldü). */
left: 0;
width: min(86vw, 320px);
max-width: 86vw;
border-radius: 0 var(--r-xl) var(--r-xl) 0;
box-shadow: var(--elev-3);
}
body.is-authenticated .nav-link {
min-height: 44px; /* çekmece dokunmayla açılıyor */
}
body.is-authenticated .sidebar-backdrop {
position: fixed;
inset: 0;
border: 0;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
}
/* Menü markası: logo ve "Operasyon paneli" yan yana sıkışıp iki satıra
bölünüyordu. Alt alta, logo üstte. */
body.is-authenticated .sidebar-brand {
flex-direction: column;
align-items: flex-start;
gap: var(--sp-1);
}
body.is-authenticated .sidebar-brand-lockup {
display: flex;
align-items: center;
gap: var(--sp-2);
min-width: 0;
}
body.is-authenticated .sidebar-brand > span:last-child,
body.is-authenticated .sidebar-brand-sub {
color: var(--pnl-text-3);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
white-space: nowrap;
}
/* ───────────────────────────────────────────────────────────────────────────
11. SAYFA BAŞLIĞI (.topbar)
───────────────────────────────────────────────────────────────────────────
Panelin 48 görünümünde birebir aynı desen kullanılıyor ve kamuya açık
hiçbir sayfada geçmiyor:
Yani tek bir bileşen kırk sekiz ekranı birden düzeltiyor. Bugünkü sorunları:
• `h1.brand` `.page-admin .topbar .brand` kuralıyla 3,1rem'e (≈50px) kadar
çıkıyordu — bir kontrol panelinde sayfa başlığı hero ölçeğinde olmaz.
• Başlık ile içerik arasında görsel bir sınır yoktu; sayfa "nerede başlıyor"
belli olmuyordu.
• Eylemler bazen başlığın altına düşüyor, bazen yanında kalıyordu.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .topbar {
display: flex;
/* Yön AÇIKÇA yatay. site.css dar ekranda `.topbar`ı `column` yapıyor ve o durumda
`.topbar-title`ın `flex: 1 1 320px` tanımı ana ekseni değiştirdiği için
**genişlik değil YÜKSEKLİK** oluyordu: başlık kutusu 320px'e şişip altında
boş bir alan bırakıyordu (ölçüldü). Sarma zaten satır yönünde çalışıyor. */
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
margin: 0 0 var(--sp-5);
padding-bottom: var(--sp-4);
/* İnce bir çizgi: başlık bölgesi ile içeriği ayıran tek işaret. Kutu ya da
gölge yerine çizgi, çünkü başlık bir yüzey değil bir sınır. */
border-bottom: 1px solid var(--pnl-border-soft);
}
body.is-authenticated .topbar-title {
display: flex;
flex-direction: column;
gap: var(--sp-1);
min-width: 0;
flex: 1 1 320px;
}
body.is-authenticated .topbar-title .brand,
body.is-authenticated .topbar h1 {
font-size: var(--fs-2xl);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
font-weight: var(--fw-bold);
color: var(--pnl-text);
margin: 0;
}
body.is-authenticated .topbar .subtitle {
margin: 0;
color: var(--pnl-text-2);
font-size: var(--fs-sm);
line-height: var(--lh-normal);
/* Okunabilirlik sınırı: bir satır 75 karakteri geçince göz satır başını
kaybediyor. */
max-width: 72ch;
}
body.is-authenticated .topbar .actions,
body.is-authenticated .topbar .heading-actions {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
flex: 0 0 auto;
}
/* Başlık altındaki durum çipleri (Rol / Kapsam / Risk / Bugün).
Bunlar veri değil BAĞLAM: kullanıcı bunlara tıklamıyor, yalnızca "neredeyim"
sorusunu yanıtlıyorlar. Bu yüzden metrik kartlarıyla aynı ağırlıkta
olmamalılar — kart değil, tek satırlık sessiz bir meta şeridi. */
body.is-authenticated .topbar-meta {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
/* `0 0 auto` DEĞİL: o değerle kutu içeriğine göre boyutlanıyor ve sarmıyordu —
375px'lik ekranda şerit 584px'e çıkıp taşıyordu. Üstelik `body`de
`overflow-x: hidden` olduğu için taşma sayfayı kaydırmıyor, **sessizce
kırpıyordu**: dördüncü çip hiç görünmüyordu ve hiçbir kaydırma çubuğu
bunu haber vermiyordu. `min-width: 0` ile birlikte artık gerçekten sarıyor. */
flex: 1 1 100%;
min-width: 0;
}
body.is-authenticated .summary-chip {
display: inline-flex;
align-items: baseline;
gap: var(--sp-2);
padding: var(--sp-1) var(--sp-3);
border: 1px solid var(--pnl-border);
border-radius: var(--r-full);
background: var(--pnl-surface);
}
body.is-authenticated .summary-chip span {
color: var(--pnl-text-3);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
body.is-authenticated .summary-chip strong {
color: var(--pnl-text);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
@media (max-width: 640px) {
body.is-authenticated .topbar {
/* `stretch` DEĞİL. Germe zinciri şöyle işliyordu: .topbar öğelerini gerer →
.actions kendi satırının yüksekliğine gerilir → çok satırlı bir flex kabında
varsayılan `align-content: stretch` satırları da gerer → birincil düğme
40px yerine 114px'e çıkıyordu (ölçüldü). Germe kaynağında kesiliyor. */
align-items: flex-start;
gap: var(--sp-3);
}
/* Dar ekranda başlık bloğu tam satır: temel değer (320px) burada esneme payı
bırakıyor ve düğmeleri yanına çekmeye çalışıyordu. */
body.is-authenticated .topbar-title {
flex: 1 1 100%;
}
/* Telefonda eylemler ızgaraya geçiyor: birincil eylem tam satır (başparmakla
ulaşılan en kolay hedef ve ekranın asıl işi), yardımcı ikisi altında yan yana.
Izgara, flex'in satır germe davranışını hiç üretmiyor. */
body.is-authenticated .topbar .actions {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
width: 100%;
}
body.is-authenticated .topbar .actions > .btn-primary,
body.is-authenticated .topbar .actions > .btn:only-child {
grid-column: 1 / -1;
}
}
/* ───────────────────────────────────────────────────────────────────────────
12. SEKMELER VE SEGMENT KONTROLÜ
───────────────────────────────────────────────────────────────────────────
İki ayrı desen aynı işi yapıyordu ve ikisi de farklı görünüyordu:
• Ön Muhasebe'de dönem seçimi düz `.btn` ile kuruluyordu — SEÇİLİ dönem dolu
marka kırmızısı alıyordu. Bu sistemde yanlış: kırmızı **birincil eyleme**
ayrıldı ve nadir olduğu için dikkat çekiyor. Bir filtre seçimi eylem
değildir; ekranın en dikkat çeken ögesi olmamalı.
• Ayarlar'da `.settings-tab-btn` kendi görünümünü kuruyordu.
Her ikisi de tek bir dile bağlanıyor: girintili bir kap içinde, seçili olan
**yükselen** bir yüzey. Seçim, renk değil YÜKSEKLİK ile anlatılıyor — bu hem
renk körlüğünde okunur hem de vurgu rengini serbest bırakır.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .segmented,
body.is-authenticated .settings-tabs {
display: inline-flex;
/* Izgara ya da flex bir kabın içinde `inline-flex` **bloklaşır** ve öge
gerilir: Ön Muhasebe'de kontrol 846px'e yayılmıştı (ölçüldü) ve dört
filtrelik bir kontrol ekranı boydan boya kesiyordu. `fit-content` +
`justify-self/align-self: start` her iki bağlamda da daraltıyor. */
width: fit-content;
justify-self: start;
align-self: start;
align-items: center;
gap: 2px;
padding: 3px;
border: 1px solid var(--pnl-border);
border-radius: var(--r-md);
background: var(--pnl-surface-2);
/* Dar ekranda sarmak yerine yatay kaydırılıyor: sarınca kontrol iki satıra
bölünüp "tek bir kontrol" hissini kaybediyor. */
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
body.is-authenticated .segmented::-webkit-scrollbar,
body.is-authenticated .settings-tabs::-webkit-scrollbar {
display: none;
}
/* `.filter-btn` — aynı işi yapan DÖRDÜNCÜ isim (İade Talepleri ve Enterprise
Talepler ekranlarında durum filtresi). 20px yüksekliğindeydi; dokunma hedefi
olarak da, tıklama hedefi olarak da küçük. Aynı segment diline bağlanıyor.
Kabı olmadığı için kendi kenarlığını taşıyor. */
body.is-authenticated .filter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px;
padding: 0 var(--sp-3);
border: 1px solid var(--pnl-border);
border-radius: var(--r-sm);
background: var(--pnl-surface);
color: var(--pnl-text-2);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
line-height: 1;
white-space: nowrap;
text-decoration: none;
transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
/* Filtre düğmelerinin kabı. `.filter-group` bir ızgara olarak tanımlıydı ve
düğmeleri ALT ALTA diziyordu (ölçüldü: beş filtre beş satır). Yatay bir
filtre şeridi olmalı; dar ekranda sarıyor. */
body.is-authenticated .filter-group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
grid-template-columns: none;
}
body.is-authenticated .filter-btn:hover {
background: var(--pnl-surface-2);
color: var(--pnl-text);
}
body.is-authenticated .filter-btn.active {
background: var(--pnl-surface-2);
border-color: var(--pnl-border-strong);
color: var(--pnl-text);
font-weight: var(--fw-semibold);
box-shadow: var(--elev-1);
}
@media (pointer: coarse) {
body.is-authenticated .filter-btn {
height: 38px;
padding-inline: var(--sp-4);
}
}
body.is-authenticated .segmented > *,
body.is-authenticated .settings-tab-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
height: 30px;
padding: 0 var(--sp-3);
border: 1px solid transparent;
border-radius: var(--r-sm);
background: transparent;
color: var(--pnl-text-2);
font-family: inherit;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
flex: 0 0 auto;
transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
body.is-authenticated .segmented > *:hover,
body.is-authenticated .settings-tab-btn:hover {
color: var(--pnl-text);
}
/* Seçili: yükselen yüzey. `aria-selected` ve `.active` birlikte destekleniyor,
çünkü iki ekran iki farklı işaret kullanıyor. */
body.is-authenticated .segmented > .is-selected,
body.is-authenticated .segmented > [aria-current],
body.is-authenticated .settings-tab-btn.active,
body.is-authenticated .settings-tab-btn[aria-selected="true"] {
background: var(--pnl-surface);
border-color: var(--pnl-border);
color: var(--pnl-text);
font-weight: var(--fw-semibold);
box-shadow: var(--elev-1);
}
body.is-authenticated .settings-tab-btn svg,
body.is-authenticated .segmented svg {
width: 15px;
height: 15px;
}
@media (pointer: coarse) {
body.is-authenticated .segmented > *,
body.is-authenticated .settings-tab-btn {
height: 38px;
padding-inline: var(--sp-4);
}
}
/* ───────────────────────────────────────────────────────────────────────────
13. BOŞ DURUMLAR
───────────────────────────────────────────────────────────────────────────
"Bu dönemde hareket yok." tek başına bir panelde duruyordu. Boş durum, veri
yokluğunun bildirimi değil, kullanıcının o an ne yapacağını söyleyen ekrandır;
en azından okunabilir ve merkezî olmalı ki "sayfa yüklenmedi mi?" sorusunu
akla getirmesin.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .empty-state {
display: grid;
justify-items: center;
align-content: center;
gap: var(--sp-2);
padding: var(--sp-8) var(--sp-5);
text-align: center;
color: var(--pnl-text-2);
}
body.is-authenticated .empty-state.compact {
padding: var(--sp-6) var(--sp-4);
}
body.is-authenticated .empty-state-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-bottom: var(--sp-1);
border-radius: var(--r-full);
background: var(--pnl-surface-2);
color: var(--pnl-text-3);
}
body.is-authenticated .empty-state h3,
body.is-authenticated .empty-state strong {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--pnl-text);
}
body.is-authenticated .empty-state p {
margin: 0;
max-width: 48ch;
font-size: var(--fs-sm);
line-height: var(--lh-normal);
color: var(--pnl-text-2);
}
/* ───────────────────────────────────────────────────────────────────────────
14. İSTATİSTİK ŞERİDİ (.stats-strip)
───────────────────────────────────────────────────────────────────────────
Liste ekranlarının (Kartlar, Analitik) üstündeki sayı grubu. Dashboard'daki
`.metric-grid`den AYRI bir bileşen olmalı, çünkü işi farklı:
• Dashboard'da sayılar ekranın KONUSU — kart olarak durmaları doğru.
• Liste ekranında sayılar BAĞLAM; konu aşağıdaki tablo. Kart olarak
durduklarında 180px dikey yer kaplayıp asıl işi ekranın altına itiyorlardı
(/admin/cards'ta tablo 795. pikselde başlıyordu — ölçüldü).
Bu yüzden burada kart değil, tek satırlık kompakt bir bant kullanılıyor:
aynı bilgi ~56px'te. Ayrıca `.page-cards .stats-strip` kuralı sütun sayısını
sabit 4'e çiviliyordu ve 375px'te bile dört sütun kalıyordu; sütunlar artık
içerikten türüyor.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .stats-strip,
body.is-authenticated.page-cards .stats-strip {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0;
margin: 0 0 var(--sp-4);
padding: var(--sp-3) 0;
border: 1px solid var(--pnl-border);
border-radius: var(--r-lg);
background: var(--pnl-surface);
grid-template-columns: none;
}
body.is-authenticated .stats-strip .stat-tile {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
flex: 1 1 140px;
min-width: 0;
padding: 0 var(--sp-4);
/* Kart değil: kendi kenarlığı, zemini ve gölgesi yok. Ayrım yalnızca ince
bir dikey çizgi — bant tek bir nesne olarak okunuyor. */
border: 0;
border-left: 1px solid var(--pnl-border-soft);
border-radius: 0;
background: none;
box-shadow: none;
}
body.is-authenticated .stats-strip .stat-tile:first-child {
border-left: 0;
}
body.is-authenticated .stats-strip .stat-tile span {
order: 1;
color: var(--pnl-text-3);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.is-authenticated .stats-strip .stat-tile strong {
order: 2;
font-size: var(--fs-metric-sm);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
color: var(--pnl-text);
}
/* Dar ekranda bant sarıyor; sarılan satırın ilk ögesinde sol çizgi kalmasın
diye çizgi üste taşınıyor. */
@media (max-width: 720px) {
body.is-authenticated .stats-strip,
body.is-authenticated.page-cards .stats-strip {
padding: 0;
}
body.is-authenticated .stats-strip .stat-tile {
flex: 1 1 45%;
padding: var(--sp-3) var(--sp-4);
border-left: 0;
border-top: 1px solid var(--pnl-border-soft);
}
body.is-authenticated .stats-strip .stat-tile:nth-child(-n + 2) {
border-top: 0;
}
}
/* ───────────────────────────────────────────────────────────────────────────
15. GRAFİK — günlük trend sütunları
───────────────────────────────────────────────────────────────────────────
VERİ RENGİ, MARKA RENGİ DEĞİL. Çubuklar dolu marka kırmızısıyla çiziliyordu.
İki sorunu vardı: (1) tasarım sisteminde kırmızı birincil eyleme ayrıldı,
grafikte kullanılınca "buraya tıkla" sinyali veriyor; (2) tek renkli bir
seride kırmızı **uyarı** çağrışımı taşıyor — oysa trafik nötr bir ölçüm,
yüksek olması iyi. Seri nötr bir veri rengine alındı; vurgu yalnızca serinin
en yüksek noktasında kullanılıyor, orada bir bilgi taşıyor.
TABAN ÇİZGİSİ. Eksen yoktu; çubuklar boşlukta duruyordu ve sıfır ile küçük
değer ayırt edilemiyordu. İnce bir taban çizgisi ikisini de çözüyor.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .cards-scan-trend {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
align-items: end;
gap: var(--sp-2);
padding-bottom: var(--sp-2);
/* Taban çizgisi: sütunların üzerinde durduğu sıfır hattı. */
border-bottom: 1px solid var(--pnl-border);
}
body.is-authenticated .cards-scan-column {
display: grid;
grid-template-rows: auto 1fr auto;
gap: var(--sp-1);
justify-items: center;
min-width: 0;
}
body.is-authenticated .cards-scan-bar {
display: flex;
align-items: flex-end;
width: 100%;
min-height: 120px;
padding: 0;
}
body.is-authenticated .cards-scan-bar span {
display: block;
width: 100%;
/* Üst köşeler yuvarlak, taban keskin: çubuk zeminden çıkıyor gibi okunur. */
border-radius: var(--r-xs) var(--r-xs) 0 0;
background: color-mix(in srgb, var(--pnl-info) 72%, transparent);
transition: background-color var(--dur-1) var(--ease);
}
body.is-authenticated .cards-scan-column:hover .cards-scan-bar span {
background: var(--pnl-info);
}
/* Sıfır sütunu: çubuk yok, yalnızca taban çizgisinde ince bir iz. Böylece
"veri yok" ile "veri var ama küçük" birbirine karışmıyor. */
body.is-authenticated .cards-scan-bar span[data-bar-height="0%"],
body.is-authenticated .cards-scan-bar span[style*="height: 0%"] {
/* `min-height` DE sıfırlanmalı. site.css `.cards-scan-bar span`e 12px'lik bir
taban veriyor ve bu, C# tarafındaki `Math.Max(16, …)` ile AYNI SINIF hata:
"küçük değerler görünsün" niyetiyle konmuş bir zemin, sıfırı da diriltiyor.
Yalnızca `height` ezmek yetmez; alt sınır kalkmadan çubuk 12px kalıyordu. */
height: 2px !important;
min-height: 0;
background: var(--pnl-border-strong);
border-radius: 0;
}
body.is-authenticated .cards-scan-value {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--pnl-text-2);
line-height: var(--lh-tight);
}
/* Sıfır değerin rakamı da sessizleşiyor: göz önce gerçek hareketi bulsun. */
body.is-authenticated .cards-scan-column:has(span[data-bar-height="0%"]) .cards-scan-value {
color: var(--pnl-text-3);
font-weight: var(--fw-normal);
}
body.is-authenticated .cards-scan-label {
font-size: var(--fs-xs);
color: var(--pnl-text-3);
white-space: nowrap;
}
/* ───────────────────────────────────────────────────────────────────────────
16. TABLOLARIN MOBİL KART GÖRÜNÜMÜ
───────────────────────────────────────────────────────────────────────────
İyi haber: dönüşüm altyapısı ZATEN VAR. 20 görünümde hücreler
`data-label="…"` taşıyor (128 kullanım) ve site.css 900px altında başlığı
gizleyip her satırı bir karta çeviriyor. Yani mobil tablo sorunu sıfırdan
çözülmüyor, mevcut çözüm tasarım sistemine bağlanıyor.
Düzeltilenler:
• Kart 24px yarıçap, kalın gölge ve eski yüzey renkleriyle çiziliyordu.
• Her alan TAM SATIR kaplıyordu: sekiz sütunlu bir tablo 600px'lik bir karta
dönüşüyordu ve tek satırı görmek için ekranı kaydırmak gerekiyordu. Kısa
değerler artık iki sütuna giriyor; kart yarı yüksekliğe iniyor.
• Etiketler 0.82rem + 700 ağırlıkla değerin kendisinden ağır duruyordu.
─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
body.is-authenticated .table-wrap {
border: 0;
border-radius: 0;
background: none;
background-image: none; /* kaydırma gölgesi kart görünümünde anlamsız */
overflow: visible;
max-height: none;
}
body.is-authenticated .data-table tbody {
display: grid;
gap: var(--sp-3);
}
body.is-authenticated .data-table tr {
display: grid;
/* Kısa değerler yan yana. `auto-fit` + minmax, uzun bir değer geldiğinde
kendiliğinden tek sütuna düşüyor. */
/* 130px'lik taban tablet genişliğinde dört dar sütun üretiyor ve
e-posta gibi uzun değerler kesiliyordu. 160px, 375px'te iki, 768px'te
üç sütun veriyor — her ikisinde de değer okunabiliyor. */
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0;
border: 1px solid var(--pnl-border);
border-radius: var(--r-lg);
background: var(--pnl-surface);
box-shadow: var(--elev-1);
overflow: hidden;
}
body.is-authenticated .data-table td {
display: block;
padding: var(--sp-3);
border-bottom: 1px solid var(--pnl-border-soft);
border-right: 1px solid var(--pnl-border-soft);
white-space: normal;
/* Uzun değerler (e-posta, slug, URL) kesilmek yerine sarsın: kart
görünümünde yatay kaydırma yok, kesilen değer kaybolmuş demektir. */
overflow-wrap: anywhere;
min-width: 0;
}
/* ASIL SORUN min-width'ti ve kaynağı markup'taki yardımcı sınıflardı.
Hücrelerde `u-minw-360px`, `u-minw-240px`, `u-minw-170px` gibi sınıflar
var; bunlar MASAÜSTÜ sütun genişliği ipucu olarak konmuş ve orada doğru.
Kart görünümünde ise hücreyi 174px'lik ızgara sütunundan geniş yapıp
komşusunun üstüne yazdırıyorlardı (audit-logs'ta ölçüldü: 360px'lik
"Açıklama" hücresi 174px'lik sütunda).
utilities.css en sonda yükleniyor ve üç sınıflı özgüllük kullanıyor
(0,3,0). `!important` yerine seçici bir basamak uzatıldı:
`.table-wrap .data-table td` = (0,3,2) ve eleman sayısıyla kazanıyor.
Kart modunda sütun genişliği ızgaranın işi, hücrenin değil. */
body.is-authenticated .table-wrap .data-table td {
min-width: 0;
max-width: none;
width: auto;
}
/* Rozetler kart modunda SARABİLMELİ. Masaüstünde `white-space: nowrap`
doğru — rozet tek satırlık bir etikettir. Ama audit kayıtlarındaki uzun
event adları (`auth.password_reset_sent_before_cooldown`) 231px'lik bir
rozet üretiyor ve 174px'lik hücreden taşıp komşu "Açıklama" hücresinin
üstüne yazıyordu (ölçüldü). Sarmış bir rozet, taşmış bir rozetten iyidir. */
body.is-authenticated .data-table .tag,
body.is-authenticated .data-table .status-badge {
max-width: 100%;
height: auto;
min-height: 22px;
padding-block: 2px;
white-space: normal;
overflow-wrap: anywhere;
text-align: left;
}
body.is-authenticated .data-table td::before {
content: attr(data-label);
display: block;
margin-bottom: 2px;
color: var(--pnl-text-3);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
/* Kartın BAŞLIK hücresi: tam satır, etiketsiz.
DİKKAT — "ilk hücre" yetmiyor. Kartlar ve Kullanıcılar tablolarında ilk
hücre bir ONAY KUTUSU ve aşağıda gizleniyor; `:first-child` yine ona
denk geldiği için asıl kimlik hücresi tam genişlik alamıyordu ve kişi
adı komşu "Şirket" hücresinin üstüne taşıyordu (768px'te ölçüldü:
79×20px çakışma). Kural bu yüzden iki durumu da kapsıyor: gerçek ilk
hücre VE onay kutusundan sonraki hücre. */
body.is-authenticated .data-table td:first-child,
body.is-authenticated .data-table td:has(> input[type="checkbox"]:only-child) + td {
grid-column: 1 / -1;
border-right: 0;
background: var(--pnl-surface-2);
}
body.is-authenticated .data-table td:first-child::before,
body.is-authenticated .data-table td:has(> input[type="checkbox"]:only-child) + td::before {
display: none;
}
/* Eylem hücresi de tam satır ve kartın altında. */
body.is-authenticated .data-table td:last-child {
grid-column: 1 / -1;
border-bottom: 0;
border-right: 0;
}
/* Onay kutusu hücresi mobil kartta yer kaplamasın. */
body.is-authenticated .data-table td:has(> input[type="checkbox"]:only-child) {
display: none;
}
}
/* ───────────────────────────────────────────────────────────────────────────
17. SATIR İÇİ EYLEMLER (.row-actions)
───────────────────────────────────────────────────────────────────────────
Tenantlar tablosunda satır başına dört eylem ALT ALTA diziliyordu ve satır
yüksekliği üç katına çıkıyordu (~90px). Bu sınıf `.table-actions` kuralına
dâhil değildi; aynı işi yapan üçüncü bir isim.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .row-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sp-1);
flex-wrap: nowrap;
}
body.is-authenticated .row-actions form {
display: contents; /* form, düğmeyi kendi satırına itmesin */
}
@media (max-width: 900px) {
body.is-authenticated .row-actions,
body.is-authenticated .table-actions {
justify-content: flex-start;
flex-wrap: wrap;
gap: var(--sp-2);
}
}
/* Katlanabilir filtre. `` olarak kurulduğunda tarayıcının varsayılan
üçgen işareti ve `display: list-item` davranışı, başlık satırının hizasını
bozuyor; kendi işaretimiz konuyor. */
body.is-authenticated details.filter-shell > summary {
cursor: pointer;
list-style: none;
}
body.is-authenticated details.filter-shell > summary::-webkit-details-marker {
display: none;
}
body.is-authenticated details.filter-shell > summary::after {
content: "";
width: 8px;
height: 8px;
margin-left: auto;
border-right: 1.5px solid var(--pnl-text-3);
border-bottom: 1.5px solid var(--pnl-text-3);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--dur-2) var(--ease);
flex: 0 0 auto;
}
body.is-authenticated details.filter-shell[open] > summary::after {
transform: rotate(-135deg) translate(-2px, -2px);
}
body.is-authenticated details.filter-shell > summary:hover .filter-shell-title h3 {
color: var(--pnl-accent-fg);
}
/* ───────────────────────────────────────────────────────────────────────────
18. OKUNABİLİRLİK TABANI — 12px
───────────────────────────────────────────────────────────────────────────
Token katmanının başında konan kural: panelde 12px'in altı, gerçek veriyle
dolu bir ekranda okunmuyor. İki sızıntı ölçümle bulundu:
• `.public-section-label` kamuya açık kart sayfası için yazılmış (0.72rem =
11,5px) ama /admin/analytics ekranında da kullanılıyor. Public yüzeyin
stilinin panele sızması; panel bağlamında kendi ölçeğine bağlanıyor.
• `u-fs-72rem` yardımcı sınıfı iki panel görünümünde rozetlerin puntosunu
11,5px'e düşürüyordu. Orada katman eklemek yerine KULLANIM kaldırıldı —
rozet bileşeni zaten 12px veriyor. (utilities.css en sonda yüklendiği ve
üç sınıflı özgüllük kullandığı için CSS'ten ezmek zaten arms race olurdu.)
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .public-section-label {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
color: var(--pnl-text-3);
}
/* ───────────────────────────────────────────────────────────────────────────
19. VURGU RENGİNİN DEKORATİF KULLANIMINI KESME
───────────────────────────────────────────────────────────────────────────
Ölçüm: Ayarlar ekranında marka kırmızısı **22 ayrı ögede 39 kez** dekoratif
olarak kullanılıyordu — degrade yıkamalar, kırmızı parıltı gölgeleri, tint'li
ikon kutuları. Hiçbiri bilgi taşımıyor; hepsi birlikte ekranı "kırmızı
dağılmış" hâle getiriyor ve asıl işi (formu) okunmaz kılıyor.
Bu bölüm tek bir kural uyguluyor: **vurgu rengi yalnızca eylem ve durum
taşır.** Birincil düğme, aktif gezinme öğesi, odak halkası ve durum rozetleri
kırmızı olabilir. Gölge, degrade ve zemin yıkaması olamaz.
Kaldırılan renkli gölge ayrıca işlevsel bir zarar veriyordu: yükseklik
sistemi (--elev-1/2/3) nötr gölgeye dayanıyor; her düğmenin altında renkli
bir parıltı olunca "hangi katman üstte" bilgisi kayboluyor.
─────────────────────────────────────────────────────────────────────────── */
/* Renkli parıltı gölgeleri. `box-shadow: none` yerine yükseklik sistemine
bağlanıyor ki düğme yine de yüzeyden ayrışsın. */
body.is-authenticated .btn,
body.is-authenticated .btn:hover,
body.is-authenticated .icon-btn,
body.is-authenticated .tenant-badge,
body.is-authenticated .tenant-badge-btn,
body.is-authenticated .toolbar-profile-button,
body.is-authenticated .settings-tab-btn,
body.is-authenticated .segmented > *,
body.is-authenticated .filter-btn {
box-shadow: none;
}
body.is-authenticated .settings-tab-btn.active,
body.is-authenticated .settings-tab-btn[aria-selected="true"],
body.is-authenticated .segmented > .is-selected,
body.is-authenticated .segmented > [aria-current],
body.is-authenticated .filter-btn.active {
box-shadow: var(--elev-1);
}
/* Dekoratif degradeler. */
body.is-authenticated .eyebrow-dot,
body.is-authenticated .upload-field,
body.is-authenticated .payment-provider-panel__head,
body.is-authenticated .fs-header,
body.is-authenticated .preview-card,
body.is-authenticated .settings-preview-card {
background-image: none;
}
/* Bölüm başlıklarındaki kırmızı ikon kutuları. İkon bir *kategori* işareti;
marka rengiyle boyanınca her bölüm "önemli" iddiasında bulunuyor ve hiçbiri
ayrışmıyor. Nötr yüzeye alınıyor. */
body.is-authenticated .fs-header-icon {
background: var(--pnl-surface-2);
color: var(--pnl-text-2);
box-shadow: none;
}
body.is-authenticated .eyebrow-dot {
background: var(--accent);
box-shadow: none;
}
/* Profil avatarı: marka renginin tek meşru dekoratif kullanımı kullanıcının
kendi baş harfi olabilir; yine de parıltı kalkıyor. */
body.is-authenticated .toolbar-profile-avatar {
box-shadow: none;
}
/* ───────────────────────────────────────────────────────────────────────────
20. KİRACI DEĞİŞTİRİCİ (süper admin "şu firma gibi bak" menüsü)
───────────────────────────────────────────────────────────────────────────
NE İŞE YARIYOR: süper admin bir firmayı seçtiğinde `?__tenant=` isteği
8 saatlik bir çerez (`_ts`) bırakıyor ve panelin bütün ekranları o firmanın
verisine göre kapsanıyor. "Platform (genel ayarlar)" çerezi siliyor ve
platform görünümüne dönüyor. Denetim kayıtları da seçimi ayrıca işaretliyor.
Yani işlev gerçek ve gerekli — sorun sunumundaydı.
KAPATILAN HATA: liste sayfanın en altında, gövdenin doğrudan çocuğu olarak
duruyordu ve her açılışta JavaScript `getBoundingClientRect` ile ölçüp
`position: fixed` koordinatlarını yazıyordu. Ölçüm bir kare kaçırdığında liste
`left: 0` konumunda kalıp ekranı boydan boya kaplıyordu — kullanıcının
"bazen full açılıyor" dediği davranış tam olarak bu. Liste artık
tetikleyicisinin içinde ve konumu saf CSS; JS'in ölçecek bir şeyi yok.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .tenant-switcher {
position: relative;
display: inline-flex;
min-width: 0;
}
body.is-authenticated .tenant-dropdown {
/* `fixed !important` ezilir: konum artık kabın kendisinden geliyor. */
position: absolute !important;
top: calc(100% + var(--sp-2));
left: 0;
right: auto;
z-index: 60;
width: max-content;
min-width: 224px;
max-width: min(320px, calc(100vw - 32px));
padding: var(--sp-1);
border: 1px solid var(--pnl-border);
border-radius: var(--r-lg);
background: var(--pnl-surface-3);
box-shadow: var(--elev-3);
}
/* Dar ekranda düğme sağa yakınsa liste ekrandan taşmasın: sağa hizalanır. */
@media (max-width: 640px) {
body.is-authenticated .tenant-dropdown {
left: auto;
right: 0;
}
}
body.is-authenticated .tenant-dropdown-header {
padding: var(--sp-2) var(--sp-3) var(--sp-1);
color: var(--pnl-text-3);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
body.is-authenticated .tenant-dropdown-item {
display: flex;
align-items: center;
gap: var(--sp-2);
min-height: 34px;
padding: 0 var(--sp-3);
border-radius: var(--r-sm);
color: var(--pnl-text);
font-size: var(--fs-md);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background-color var(--dur-1) var(--ease);
}
body.is-authenticated .tenant-dropdown-item:hover {
background: var(--pnl-surface-2);
}
/* Seçili görünüm: dolu kırmızı bir şerit değil, sessiz bir işaret. */
body.is-authenticated .tenant-dropdown-item.active {
background: var(--pnl-accent-bg);
color: var(--pnl-accent-fg);
font-weight: var(--fw-semibold);
}
body.is-authenticated .tenant-dropdown-divider {
height: 1px;
margin: var(--sp-1) var(--sp-2);
background: var(--pnl-border-soft);
}
body.is-authenticated .tenant-dropdown-manage {
color: var(--pnl-text-2);
font-size: var(--fs-sm);
}
@media (pointer: coarse) {
body.is-authenticated .tenant-dropdown-item {
min-height: 44px;
}
}
/* ───────────────────────────────────────────────────────────────────────────
21. AYARLAR EKRANI
───────────────────────────────────────────────────────────────────────────
Panelin en yoğun ekranı: tek sayfada 6 sekme ve 57 form alanı. Ölçülen üç
sorun vardı ve üçü birlikte ekranı boğucu yapıyordu.
1) ORAN. Izgara 609px form + 406px önizleme veriyordu — yani genişliğin
%40'ı, kullanıcının sadece BAKTIĞI (dokunmadığı) marka önizlemesine
gidiyordu. Asıl iş olan form 57 alanı 609px'e sığdırmaya çalışıyor,
sekme çubuğu bile kesiliyordu (639px içerik, 609px kap).
2) KATMAN. Bir form alanının etrafında ALTI kat kutu vardı:
panel > form > sekme paneli > fs-card > fs-header > field.
Her katman kendi kenarlığını, zeminini ve dolgusunu getiriyordu.
3) BÖLÜM BAŞLIKLARI. `.fs-header` tint'li bir şerit + kırmızı ikon kutusu +
başlık + açıklama taşıyordu. Altı bölümün altısı da aynı ağırlıkta
"önemli" görünüyor, hiçbiri ayrışmıyordu. Başlık bir *sınır* olmalı,
kendi başına bir nesne değil.
─────────────────────────────────────────────────────────────────────────── */
/* Seçici `.dashboard-grid.settings-grid` üzerinden yazılıyor: site.css'te
`.page-settings .dashboard-grid.settings-grid` (0,3,0) kuralı var ve tek
sınıflı bir seçici onu yenemiyor (ilk yazdığımda oran değişmedi, ölçümle
görüldü). */
body.is-authenticated .dashboard-grid.settings-grid {
/* Form önde. Önizleme sabit ve dar: referans malzemesi, asıl iş değil. */
grid-template-columns: minmax(0, 1fr) 300px;
gap: var(--sp-5);
align-items: start;
}
@media (max-width: 1180px) {
body.is-authenticated .dashboard-grid.settings-grid {
/* Dar ekranda önizleme formun ALTINA iner; yan yana sıkışmak ikisini de
okunmaz yapıyor. */
grid-template-columns: minmax(0, 1fr);
}
}
/* Marka önizleme kartları. `::before` sözde ögesi kartın TAMAMINA %24'lük bir
radyal vurgu yıkaması basıyordu — Ayarlar ekranındaki pembeliğin en büyük
kaynağı buydu ve sözde öge olduğu için ögelerin arka planını tarayan denetim
onu bulamamıştı.
Kart zaten "marka önizlemesi"; markayı gösteren şey İÇİNDEKİ LOGO. Kartı
baştan sona boyamak logoyu görmeyi zorlaştırıyor. Yıkama yerine üstte ince
bir vurgu şeridi: aynı bilgi (bu kartın markası şu renk), okumayı bozmadan. */
body.is-authenticated .brand-preview-card {
position: relative;
padding: var(--sp-4);
border: 1px solid var(--pnl-border);
border-radius: var(--r-lg);
background: var(--pnl-surface);
box-shadow: none;
overflow: hidden;
}
body.is-authenticated .brand-preview-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
border-radius: 0;
background: var(--accent-color, var(--accent));
}
body.is-authenticated .preview-label {
display: inline-block;
margin-bottom: var(--sp-2);
color: var(--pnl-text-3);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
body.is-authenticated .brand-preview-stack {
display: grid;
gap: var(--sp-3);
}
/* Önizleme sütunu kaydırırken yerinde kalsın: form uzun, referans hep görünsün. */
@media (min-width: 1181px) {
body.is-authenticated .settings-preview,
body.is-authenticated .settings-grid > aside {
position: sticky;
top: 76px;
}
}
body.is-authenticated .form-panel {
min-width: 0;
}
/* Bölüm kartı: kendi kenarlığı ve gölgesi YOK. Zaten bir panelin içinde;
ikinci bir kutu görsel gürültüden başka bir şey üretmiyor. Bölümler
birbirinden ince bir çizgiyle ayrılıyor. */
body.is-authenticated .fs-card {
padding: 0 0 var(--sp-6);
margin: 0 0 var(--sp-6);
border: 0;
border-bottom: 1px solid var(--pnl-border-soft);
border-radius: 0;
background: none;
box-shadow: none;
}
body.is-authenticated .fs-card:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
/* Bölüm başlığı: tint'li şerit değil, düz bir başlık satırı. */
body.is-authenticated .fs-header {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 0;
margin-bottom: var(--sp-4);
border: 0;
border-radius: 0;
background: none;
}
body.is-authenticated .fs-header-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: var(--r-sm);
background: var(--pnl-surface-2);
color: var(--pnl-text-2);
}
body.is-authenticated .fs-header-icon svg {
width: 16px;
height: 16px;
}
body.is-authenticated .fs-title {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--pnl-text);
}
body.is-authenticated .fs-desc {
margin-top: 2px;
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: var(--pnl-text-2);
max-width: 68ch;
}
/* Yükleme alanları: radyal kırmızı yıkama kalktı (19. bölüm), kutu da
sadeleşiyor. Başlık iki satıra bölünmesin. */
body.is-authenticated .upload-field {
padding: var(--sp-4);
border: 1px solid var(--pnl-border);
border-radius: var(--r-lg);
background: var(--pnl-surface-2);
}
body.is-authenticated .upload-field-head,
body.is-authenticated .upload-field > .field-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
flex-wrap: wrap;
margin-bottom: var(--sp-1);
}
body.is-authenticated .upload-field .field-header > *:first-child,
body.is-authenticated .upload-field strong {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
white-space: nowrap;
}
/* Sekme paneli kendi kutusunu getirmesin. */
body.is-authenticated .settings-tab-panel {
padding: 0;
border: 0;
background: none;
}
/* Ödeme sağlayıcı blokları: degrade başlıklar kalktı (19. bölüm), kutu
sadeleşiyor. */
body.is-authenticated .payment-provider-panel {
border: 1px solid var(--pnl-border);
border-radius: var(--r-lg);
background: var(--pnl-surface);
overflow: hidden;
}
body.is-authenticated .payment-provider-panel__head {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--pnl-border-soft);
background: var(--pnl-surface-2);
}
/* Dosya seçici düğmesi. Tarayıcının kendi `::file-selector-button` ögesi ve
site.css'in `.btn, button, input[type=submit]` kuralından vurgu rengini
miras alıyordu — sonuç: "Dosya Seç" ekrandaki en dikkat çekici düğme
oluyordu. Oysa dosya seçmek birincil eylem değil; birincil eylem
"Ayarları Kaydet". İkincil düğme görünümüne alınıyor. */
body.is-authenticated input[type="file"]::file-selector-button,
body.is-authenticated input[type="file"]::-webkit-file-upload-button {
height: 30px;
margin-right: var(--sp-3);
padding: 0 var(--sp-3);
border: 1px solid var(--pnl-border);
border-radius: var(--r-sm);
background: var(--pnl-surface);
background-image: none;
color: var(--pnl-text);
font-family: inherit;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
cursor: pointer;
box-shadow: none;
transition: background-color var(--dur-1) var(--ease);
}
body.is-authenticated input[type="file"]::file-selector-button:hover,
body.is-authenticated input[type="file"]::-webkit-file-upload-button:hover {
background: var(--pnl-surface-2);
}
/* Sayfa üstündeki bilgi bloğu ("Platform ayarları: …"). Kalın kırmızı bir sol
şeritle ve gövde puntosuyla duruyordu; bir uyarı değil, bir NOT. Sessiz bir
bilgi kutusuna alınıyor. */
body.is-authenticated .settings-note,
body.is-authenticated .form-panel > .info-note,
body.is-authenticated .page-note {
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--pnl-border);
border-left: 3px solid var(--pnl-border-strong);
border-radius: var(--r-md);
background: var(--pnl-surface-2);
color: var(--pnl-text-2);
font-size: var(--fs-sm);
line-height: var(--lh-normal);
}
/* Yapışkan kaydet çubuğu.
Ölçüm: Ayarlar tek bir form ve 59 alan taşıyor; kaydet düğmesi formun en
altında duruyordu ve sekmeye göre 1216–2052 piksel aşağıdaydı. Ödeme
sekmesinde bir alanı değiştirip kaydetmek için iki ekran boyu aşağı inmek
gerekiyordu. Düğme artık her zaman görünür alanın altında duruyor.
Not: site.css'te `.form-sticky-save` tanımı zaten vardı ama hiçbir görünüm
onu kullanmıyordu — desen mevcut, uygulanmamıştı. */
body.is-authenticated .fs-actions {
position: sticky;
bottom: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sp-3);
margin: var(--sp-6) 0 0;
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--pnl-border);
border-radius: var(--r-lg);
/* Yarı saydam + bulanık: altından kayan formun görünmesi "sayfa devam
ediyor" bilgisini koruyor. */
background: color-mix(in srgb, var(--pnl-surface) 88%, transparent);
backdrop-filter: blur(12px) saturate(1.3);
-webkit-backdrop-filter: blur(12px) saturate(1.3);
box-shadow: var(--elev-2);
}
/* Bu hatırlatma yalnızca AYARLAR ekranına ait: orada altı sekme tek form
olduğu için "sadece açık sekmeyi mi kaydediyorum?" sorusu gerçek. `.fs-actions`
ise dokuz görünümde kullanılıyor ve kural sayfa sınıfına bağlanmamıştı —
Webhook ekranında hiç sekme yokken "Tüm sekmeler tek seferde kaydedilir"
yazıyordu (ekran görüntüsünde görüldü). Kapsam `.page-settings`e daraltıldı. */
body.is-authenticated.page-settings .fs-actions::before {
content: "Tüm sekmeler tek seferde kaydedilir";
margin-right: auto;
color: var(--pnl-text-3);
font-size: var(--fs-xs);
}
@media (max-width: 640px) {
body.is-authenticated.page-settings .fs-actions::before {
display: none; /* dar ekranda düğmeye yer aç */
}
body.is-authenticated .fs-actions {
padding: var(--sp-2) var(--sp-3);
}
}
/* ───────────────────────────────────────────────────────────────────────────
22. SÜRÜM GÜNLÜĞÜ (/admin/changelog)
───────────────────────────────────────────────────────────────────────────
Ölçüm (1323px, açık tema): 10 kontrast hatası ve 10 adet 12px altı metin —
sayfanın TAMAMI iki kusurdan ibaretti ve ikisi de aynı kaynaktan geliyordu.
• Kategori etiketleri site.css'te ham marka dışı renklerle yazılmış ve
kendi renginin %12 tint'i üstüne konmuştu. Ölçülen değerler: "Eklendi"
2,71:1 · "Değişti" 2,63:1 · "Kaldırıldı" 3,75:1 · "Düzeltildi" 4,10:1 ·
"Güvenlik" 4,47:1. Hepsi 4,5 eşiğinin altında — üstelik punto 11,2px
olduğu için büyük-metin istisnası da yok. Bu altı renk paneldeki
ölçülmüş anlam paletinden bağımsız ikinci bir palet kuruyordu.
• `code` ögesi `.8em` ile yazılmış; em olduğu için üst üste binerek
10,2–11,2px'e düşüyor. Panelde okunabilirlik tabanı 12px.
Çözüm: altı kategori paneldeki anlam ailelerine bağlanıyor (eklendi=başarı,
değişti=uyarı, düzeltildi=bilgi, kaldırıldı=tehlike, diğer=nötr). Güvenlik
için altıncı bir aile gerekiyordu; mor `--pnl-attn` olarak eklendi ve iki
temada da ölçüldü (açık: kendi tint'i üstünde 5,69:1 — koyu: 10,1:1).
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated {
--pnl-attn: #6941c6;
--pnl-attn-bg: rgba(105, 65, 198, 0.10);
}
html[data-theme="dark"] body.is-authenticated {
--pnl-attn: #c3b5fd;
--pnl-attn-bg: rgba(195, 181, 253, 0.12);
}
body.is-authenticated .changelog-section-label {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 var(--sp-2);
border-radius: var(--r-xs);
border: 1px solid var(--pnl-border);
background: var(--pnl-surface-2);
color: var(--pnl-text-2);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
line-height: 1;
margin-bottom: var(--sp-2);
}
body.is-authenticated .changelog-section-label--added {
background: var(--pnl-success-bg);
border-color: color-mix(in srgb, var(--pnl-success) 26%, transparent);
color: var(--pnl-success);
}
body.is-authenticated .changelog-section-label--changed {
background: var(--pnl-warning-bg);
border-color: color-mix(in srgb, var(--pnl-warning) 26%, transparent);
color: var(--pnl-warning);
}
body.is-authenticated .changelog-section-label--fixed {
background: var(--pnl-info-bg);
border-color: color-mix(in srgb, var(--pnl-info) 26%, transparent);
color: var(--pnl-info);
}
body.is-authenticated .changelog-section-label--removed {
background: var(--pnl-danger-bg);
border-color: color-mix(in srgb, var(--pnl-danger) 26%, transparent);
color: var(--pnl-danger);
}
body.is-authenticated .changelog-section-label--security {
background: var(--pnl-attn-bg);
border-color: color-mix(in srgb, var(--pnl-attn) 26%, transparent);
color: var(--pnl-attn);
}
/* Kod parçaları: `em` yerine sabit taban. `.8em` iç içe geçtiğinde 10,2px'e
kadar düşüyordu; sürüm notlarında kod adı okunması gereken bilgidir. */
body.is-authenticated .changelog-items code,
body.is-authenticated .changelog-note code,
body.is-authenticated .changelog-items--technical li {
font-size: var(--fs-xs);
}
body.is-authenticated .changelog-items code,
body.is-authenticated .changelog-note code {
background: var(--pnl-inset);
border: 1px solid var(--pnl-border-soft);
color: var(--pnl-text);
padding: 1px 5px;
border-radius: var(--r-xs);
}
/* Yükseltme notu: turuncu sol şerit + turuncu yıkama yerine nötr girinti.
Not bir *uyarı* değil, bağlam; sürüm başına 2-3 tane olduğu için renkli
hâli sayfayı şerit şeridine bölüyordu. */
body.is-authenticated .changelog-note {
border-left: 3px solid var(--pnl-border-strong);
background: var(--pnl-surface-2);
color: var(--pnl-text-2);
font-size: var(--fs-sm);
}
body.is-authenticated .changelog-technical summary {
color: var(--pnl-text-3);
font-size: var(--fs-xs);
padding: var(--sp-1) 0;
}
body.is-authenticated .changelog-technical summary:hover {
color: var(--pnl-text-2);
}
/* ───────────────────────────────────────────────────────────────────────────
23. KART DÜZENLEYİCİ (/admin/cards/create · /admin/cards/{id}/edit)
───────────────────────────────────────────────────────────────────────────
Dil rozetleri site.css'te iki sabit renkle yazılmıştı (#C01018 ve #1D4ED8)
ve zeminleri `--surface-elevated` ile karıştırılıyordu. Açık temada geçiyor,
KOYU temada 2,73:1 ve 2,56:1 veriyor — sabit renk + değişken zemin her
zaman bu sonucu verir.
Renk zaten bilgi taşımıyor: "TR" ve "EN" yazısı bilgiyi kendisi söylüyor.
Rozet paneldeki nötr rozetle aynı hâle getirildi; iki temada da ölçülü.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .lang-badge {
height: 22px;
padding: 0 var(--sp-2);
border-radius: var(--r-xs);
border: 1px solid var(--pnl-border);
background: var(--pnl-surface-2);
color: var(--pnl-text-2);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
line-height: 1;
}
/* ───────────────────────────────────────────────────────────────────────────
24. YIKICI EYLEM VE LİMİT UYARISI
───────────────────────────────────────────────────────────────────────────
Dört yerde tehlike rengi `u-c-dc2626` yardımcı sınıfıyla, yani SABİT #dc2626
ile veriliyordu. Koyu temada profil menüsündeki "Hesabı Sil" satırı 3,79:1'e
düşüyor — sabit renk + değişken zemin, bu dosyada üçüncü kez aynı arıza.
utilities.css en sonda yükleniyor ve `.u-x.u-x.u-x` üçlemesiyle (0,3,0)
özgüllük kuruyor; CSS'ten ezmeye çalışmak özgüllük yarışıdır. Doğru hamle
KULLANIMI kaldırmak: dördü de anlam sınıfına geçti, renk artık token.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .toolbar-profile-menu-item.is-danger {
color: var(--pnl-danger);
}
body.is-authenticated .toolbar-profile-menu-item.is-danger:hover {
background: var(--pnl-danger-bg);
color: var(--pnl-danger);
}
/* Paket limiti dolmak üzere: eylem değil durum bildirimi. */
body.is-authenticated .limit-alert {
margin: var(--sp-1) 0 0;
color: var(--pnl-danger);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
}
/* ───────────────────────────────────────────────────────────────────────────
25. ABONELİK VE PLAN YÜKSELTME (/admin/subscription · .../upgrade)
───────────────────────────────────────────────────────────────────────────
Bu iki ekran süper admin bağlamında AÇILMIYOR (kiracı seçilmeden Kartlar'a
yönleniyorlar), bu yüzden ilk taramada hiç ölçülmemişlerdi. Kiracı seçilip
ölçüldüğünde koyu temada üç kırık çıktı:
.upgrade-billing-btn "Yıllık" 1,23:1
.upgrade-billing-save "%20 tasarruf" 1,83:1
.subscription-plan-price "₺799 / ay" 3,96:1
Üçü de aynı kökten: sayfa kendi renklerini `--muted-strong`, `--success`,
`--accent` üzerinden kuruyor ve bunlar koyu temada zeminle birlikte
dönmüyor. Ölçek de ayrı bir dil konuşuyordu (2,6rem fiyat, 900 ağırlık,
18px yarıçap, 1,5px kenarlık).
İKİ KARAR:
1) Fiyat bir EYLEM değil, VERİdir. Marka kırmızısıyla yazılması hem yanlış
vurgu veriyordu hem de kontrastı düşürüyordu; birincil metne alındı.
Fiyatın büyüklüğü zaten dikkati taşıyor.
2) Vurgu rengi bu ailede TEK yerde kalıyor: önerilen plan ve onun eylemi.
Fiyatlandırma sayfası, vurgunun gerçekten "önerilen eylem" anlamına
geldiği tek ekran — orada bırakmak sistemi bozmuyor, güçlendiriyor.
Fatura dönemi seçici, aynı işi yapan BEŞİNCİ isimdi (segmented ·
settings-tabs · filter-btn · settings-tab-btn'den sonra). Aynı dile bağlandı:
seçim renkle değil YÜKSELEN YÜZEY ile anlatılıyor.
─────────────────────────────────────────────────────────────────────────── */
/* ── Fatura dönemi seçici ─────────────────────────────────────────────────── */
body.is-authenticated .upgrade-billing-toggle {
display: inline-flex;
align-items: center;
gap: 2px;
width: fit-content;
padding: 3px;
border: 1px solid var(--pnl-border);
border-radius: var(--r-md);
background: var(--pnl-surface-2);
box-shadow: none;
margin-bottom: var(--sp-6);
}
body.is-authenticated .upgrade-billing-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
height: 32px;
padding: 0 var(--sp-4);
border: 1px solid transparent;
border-radius: var(--r-sm);
background: transparent;
color: var(--pnl-text-2);
font-family: inherit;
font-size: var(--fs-md);
font-weight: var(--fw-medium);
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
body.is-authenticated .upgrade-billing-btn:hover {
color: var(--pnl-text);
}
body.is-authenticated .upgrade-billing-btn.active {
background: var(--pnl-surface);
border-color: var(--pnl-border);
color: var(--pnl-text);
font-weight: var(--fw-semibold);
box-shadow: var(--elev-1);
}
/* "%20 tasarruf": dolu yeşil üstünde beyaz metin koyu temada 1,83:1 veriyordu
(koyu temanın yeşili açık bir yeşil). Rozet dilinde tint + koyu metin. */
body.is-authenticated .upgrade-billing-save {
background: var(--pnl-success-bg);
border: 1px solid color-mix(in srgb, var(--pnl-success) 26%, transparent);
color: var(--pnl-success);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
padding: 1px var(--sp-2);
border-radius: var(--r-full);
}
/* ── Mevcut abonelik kartı ────────────────────────────────────────────────── */
body.is-authenticated .subscription-plan-label {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
color: var(--pnl-text-3);
}
body.is-authenticated .subscription-plan-name {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
letter-spacing: var(--tracking-tight);
color: var(--pnl-text);
}
body.is-authenticated .subscription-plan-price {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
color: var(--pnl-text);
font-variant-numeric: tabular-nums;
}
body.is-authenticated .subscription-limit-item {
font-size: var(--fs-md);
color: var(--pnl-text-2);
border-bottom-color: var(--pnl-border-soft);
}
/* ── Plan kartları ────────────────────────────────────────────────────────── */
body.is-authenticated .upgrade-plan-card {
border: 1px solid var(--pnl-border);
border-radius: var(--r-lg);
background: var(--pnl-surface);
padding: var(--sp-6);
box-shadow: var(--elev-1);
}
body.is-authenticated .upgrade-plan-card:hover {
border-color: var(--pnl-border-strong);
box-shadow: var(--elev-2);
}
/* Önerilen plan: vurgunun bu ailedeki tek yeri. */
body.is-authenticated .upgrade-plan-card.featured {
border-color: var(--pnl-accent-border);
box-shadow: var(--elev-2);
background: var(--pnl-surface);
}
body.is-authenticated .upgrade-plan-card.featured:hover {
border-color: var(--accent);
}
body.is-authenticated .upgrade-plan-badge {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 var(--sp-2);
border-radius: var(--r-xs);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
}
body.is-authenticated .current-badge {
background: var(--pnl-surface-2);
border: 1px solid var(--pnl-border);
color: var(--pnl-text-2);
}
body.is-authenticated .popular-badge {
background: var(--accent);
border: 1px solid var(--accent);
color: var(--pnl-on-accent);
}
body.is-authenticated .upgrade-plan-name {
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: var(--tracking-wide);
color: var(--pnl-text-3);
}
/* Fiyat sayfanın birincil verisi: metrik ölçeğinden okunuyor, başlık
hiyerarşisine karışmıyor. */
body.is-authenticated .upgrade-price-num {
font-size: var(--fs-metric-lg);
font-weight: var(--fw-bold);
color: var(--pnl-text);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums;
}
body.is-authenticated .upgrade-price-currency {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--pnl-text-2);
margin-top: var(--sp-1);
}
body.is-authenticated .upgrade-plan-price-enterprise {
font-size: var(--fs-metric-sm);
font-weight: var(--fw-bold);
color: var(--pnl-text);
}
body.is-authenticated .upgrade-price-period,
body.is-authenticated .upgrade-price-yearly-note {
font-size: var(--fs-xs);
color: var(--pnl-text-3);
}
body.is-authenticated .upgrade-plan-features {
border-top-color: var(--pnl-border-soft);
}
body.is-authenticated .upgrade-plan-features li {
font-size: var(--fs-md);
color: var(--pnl-text-2);
}
body.is-authenticated .upgrade-plan-features li svg {
color: var(--pnl-success);
}
/* Sağlayıcı adı ödeme DÜĞMESİNİN içinde duruyor (dolu vurgu yüzeyi). İlk
düzeltmede üçüncül metin tonuna bağlanmıştı — ölçüldü, 1,50:1: kırmızı
üstünde gri. `opacity: .65` de aynı sorunu başka yoldan yapıyordu.
Doğrusu düğmenin kendi metin rengini devralmak; ayrım ağırlıkla veriliyor. */
body.is-authenticated .upgrade-pay-provider {
font-size: var(--fs-xs);
font-weight: var(--fw-normal);
color: inherit;
opacity: 1;
}
body.is-authenticated .upgrade-trial-note {
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
color: var(--pnl-success);
}
/* ───────────────────────────────────────────────────────────────────────────
26. VURGU RENGİNİN SON ÜÇ SIZINTISI
───────────────────────────────────────────────────────────────────────────
`u-c-var-accent` yardımcı sınıfı üç görünümde marka kırmızısını METİN rengi
olarak veriyordu. Kırmızı dolu yüzeyde beyaz metinle çalışır; küçük metin
rengi olarak açık zeminde 4,31:1 (ölçüldü, /admin/cards/{id}/edit).
Üçünün de taşıdığı bilgi farklı, üçü de "eylem" değil:
• NFC adresi bir BAĞLANTI → bağlantı gibi görünmeli (altı çizili), kırmızı
olması onu düğme sanmaya davet ediyordu.
• Havale tutarı VERİ → birincil metin, rakam ölçeğinde.
• "QR kod oluşturulamadı" bir HATA → tehlike tonu.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .nfc-url-link {
/* Kap `display: flex` olduğu için bağlantı bir FLEX ÖGESİ: `display: inline`
yazmak işe yaramaz, flex ögeleri bloklaştırılır (ölçüldü: kural yazıldı,
hesaplanan değer yine `block`). Yükseklik içeriğe oturuyordu — 17px'lik
bir tıklama hedefi. Satırdaki "Kopyala" düğmesiyle aynı yüksekliğe
hizalanıyor; şerit de böylece tek bir kontrol gibi okunuyor. */
display: inline-flex;
align-items: center;
min-height: 30px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
color: var(--pnl-text);
text-decoration: underline;
text-decoration-color: var(--pnl-border-strong);
text-underline-offset: 2px;
word-break: break-all;
}
body.is-authenticated .nfc-url-link:hover {
text-decoration-color: var(--pnl-text-2);
}
body.is-authenticated .bank-amount {
font-size: var(--fs-metric-sm);
font-weight: var(--fw-bold);
color: var(--pnl-text);
font-variant-numeric: tabular-nums;
}
body.is-authenticated .form-hint.is-danger {
color: var(--pnl-danger);
}
/* ───────────────────────────────────────────────────────────────────────────
27. BLOG DÜZENLEYİCİ (/admin/blog/{id}/edit)
───────────────────────────────────────────────────────────────────────────
Dil sekmeleri paneldeki ALTINCI sekme lehçesiydi ve seçimi marka
kırmızısıyla anlatıyordu (ölçüldü: 4,48:1 — eşiğin altı). Sistem kararı
sabit: seçim renkle değil yükselen yüzeyle anlatılır, kırmızı eyleme ayrılır.
Sekme, Ayarlar ve Ön Muhasebe ile aynı segment diline bağlandı.
Durum rozetleri (`live` / `draft`) 10,9px'ti ve sabit renk taşıyordu; panel
rozet diline ve 12px tabanına alındı.
Quill araç çubuğu düğmeleri 28×24px. Metin düzenleyicide YOĞUN bir araç
çubuğu doğrudur — masaüstünde 24px kabul ediliyor. Ama dokunmatikte 24px
isabet edilemez; panelin başka yerlerinde kullanılan `pointer: coarse`
kuralıyla orada büyütülüyor. Viewport genişliğine değil GİRDİ TÜRÜNE
bakılıyor: tablet yatayda geniş ama yine parmakla kullanılıyor.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .blog-lang-tabs {
display: inline-flex;
align-items: center;
gap: 2px;
width: fit-content;
padding: 3px;
border: 1px solid var(--pnl-border);
border-radius: var(--r-md);
background: var(--pnl-surface-2);
}
body.is-authenticated .blog-lang-tab {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
height: 32px;
padding: 0 var(--sp-3);
margin-bottom: 0;
border: 1px solid transparent;
border-radius: var(--r-sm);
background: transparent;
color: var(--pnl-text-2);
font-size: var(--fs-md);
font-weight: var(--fw-medium);
line-height: 1;
}
body.is-authenticated .blog-lang-tab:hover {
background: transparent;
color: var(--pnl-text);
}
body.is-authenticated .blog-lang-tab.active {
background: var(--pnl-surface);
border-color: var(--pnl-border);
color: var(--pnl-text);
font-weight: var(--fw-semibold);
box-shadow: var(--elev-1);
}
body.is-authenticated .blog-lang-tab-flag {
font-size: var(--fs-lg);
}
body.is-authenticated .blog-lang-tab-badge {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 var(--sp-2);
border: 1px solid var(--pnl-border);
border-radius: var(--r-full);
background: var(--pnl-surface-2);
color: var(--pnl-text-2);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
line-height: 1;
}
body.is-authenticated .blog-lang-tab-badge.live {
background: var(--pnl-success-bg);
border-color: color-mix(in srgb, var(--pnl-success) 26%, transparent);
color: var(--pnl-success);
}
@media (pointer: coarse) {
body.is-authenticated .ql-toolbar button,
body.is-authenticated .ql-toolbar .ql-picker-label {
min-width: 36px;
min-height: 36px;
}
body.is-authenticated .blog-lang-tab {
height: 40px;
}
}
/* ───────────────────────────────────────────────────────────────────────────
28. KENAR MENÜSÜ BAŞLIĞI — TEK MARKA İŞARETİ
───────────────────────────────────────────────────────────────────────────
Ölçüm: aynı logo dosyası (`PanelLogoPath`) iki kez basılıyordu — üst barda
(27,34) ve kenar menüsünde (35,117). İkisi de aynı `brandLogoPath`ten
geliyor, yani ikisi arasında hiçbir bilgi farkı yok. Marka bir kez, sol
üstte, ana sayfaya bağlı olarak duruyor.
Kenar menüsünün başlığı artık bölgeyi adlandıran yazı. Dar ekranda menü bir
çekmeceye dönüştüğünde bu yazı çekmecenin başlığı oluyor — gezinme kabında
"burası ne" sorusunu logo değil bu yanıtlıyor.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .sidebar-brand-caption {
color: var(--pnl-text-3);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
white-space: nowrap;
}
/* ───────────────────────────────────────────────────────────────────────────
29. GÖSTERGE PANELİ — ROL ŞERİDİ VE SİSTEM DURUMU
───────────────────────────────────────────────────────────────────────────
Gösterge panelinin SAĞ SÜTUNUNUN tamamını iki blok kaplıyordu ve ikisi de
değişmeyen metindi:
• "Rol ve Yetki Modeli" her rol için bir paragraf açıklama taşıyordu. Rolün
kaç kişide olduğu (canlı sayı) ve kapsamı bilgi; paragraf ise el kitabı.
Ekranın en büyük bloğu bir el kitabıysa ekran operasyon ekranı değildir.
• "Multi-tenant Hazırlığı" listesinin dört maddesi de denetleyicide SABİT
METİNDİ ("Rol hiyerarşisi net — Hazır"). Sistemin durumunu değil projenin
geliştirme notlarını gösteriyordu; sahibin günlük ekranında yeri yok.
Ölçülebilir tek veri (kurulum tamamlandı mı, ne zaman) tek satır kaldı.
Kalan rol kartları artık paragrafsız: ad + kapsam + kaç aktif. Kart yerine
satır olarak okunuyorlar; sağ sütun bir sayfayı doldurmuyor.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .role-model-list {
display: grid;
gap: var(--sp-1);
}
body.is-authenticated .role-model-card {
display: block;
padding: var(--sp-3);
border: 1px solid var(--pnl-border-soft);
border-radius: var(--r-md);
background: var(--pnl-surface);
box-shadow: none;
}
/* Kullanıcının kendi rolü bir DURUM; vurgu buna izin veriyor. Ama yalnızca
KENARLIK olarak: tint'li bir zemin denendi ve içindeki yeşil "1 aktif"
rozetini 4,09:1'e düşürdü (ölçüldü). Zemini boyamak, o kutunun içindeki
HER ŞEYİN ölçüm zeminini değiştirmek demek — bu dosyada dört kez aynı
arızayı üreten hata. Durum kenarlıkla anlatılıyor, zemin nötr kalıyor. */
body.is-authenticated .role-model-card.is-current {
border-color: var(--pnl-accent-border);
border-left-width: 3px;
background: var(--pnl-surface);
box-shadow: none;
}
body.is-authenticated .role-model-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
}
body.is-authenticated .role-model-header strong {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--pnl-text);
}
body.is-authenticated .role-model-header > div > span {
font-size: var(--fs-xs);
color: var(--pnl-text-3);
}
body.is-authenticated .system-status-line {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-4);
font-size: var(--fs-xs);
color: var(--pnl-text-3);
}
/* ───────────────────────────────────────────────────────────────────────────
30. KART TRAFİK LİDERLERİ — SIRALAMA ÇUBUKLARI
───────────────────────────────────────────────────────────────────────────
Aynı satırdaki iki grafik iki farklı dil konuşuyordu: soldaki 7 günlük trend
nötr veri rengiyle çizilirken (bölüm 15'te alınan karar), sağdaki sıralama
çubukları marka kırmızısı degrade + kırmızı parıltı gölgesiyle çiziliyordu.
Aynı ekranda yan yana duran iki seri, aynı türden veriyi farklı renkle
gösterince okuyucu renge anlam yükler — oysa fark yalnızca hangi bileşenin
ne zaman yazıldığı.
Seri nötr veri rengine alındı; gölge kaldırıldı (bir çubuğun yükselmesi
gerekmiyor, uzunluğu zaten bilgiyi taşıyor).
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .cards-ranked-bar {
height: 6px;
background: var(--pnl-surface-2);
}
body.is-authenticated .cards-ranked-bar span {
background: color-mix(in srgb, var(--pnl-info) 72%, transparent);
background-image: none;
box-shadow: none;
}
/* Sütun altlıkları artık bir ya da iki değer taşıyor (dokuzdan altısı üstteki
şeritle birebir aynıydı, kaldırıldı). Kalan bir-iki değer için KUTU çizmek,
kartın içinde kart üretiyordu: üç sütunun her birinde iç içe üç kutu, dokuz
kenarlık. Bunlar grafiğin altyazısı — kutu değil, satır.
274px'lik bir sütunda iki kutu zaten yan yana sığmıyordu; alt alta koymak da
dokuyu çoğaltıyordu. Etiket–değer satırı hem sığıyor hem daha az çizgi. */
body.is-authenticated .cards-chart-insights {
display: flex;
flex-direction: column;
gap: var(--sp-1);
grid-template-columns: none;
margin-top: var(--sp-3);
padding-top: var(--sp-3);
border-top: 1px solid var(--pnl-border-soft);
}
body.is-authenticated .cards-chart-insight {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-3);
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
body.is-authenticated .cards-chart-insight > span {
font-size: var(--fs-sm);
color: var(--pnl-text-3);
}
body.is-authenticated .cards-chart-insight > strong {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--pnl-text);
font-variant-numeric: tabular-nums;
}
/* ───────────────────────────────────────────────────────────────────────────
31. SIRALI LİSTELER — PANEL İÇİNDE KART DEĞİL, SATIR
───────────────────────────────────────────────────────────────────────────
"Kart Trafik Liderleri" ve "Firma Portföyü" listelerinin her ögesi kendi
kenarlığı, 20px yarıçapı ve iç gölgesi olan bir KUTUYDU. Panel zaten bir
kart; içine kart koymak iki katman kenarlık üretiyor ve ekranda üç sütun ×
üç öge = dokuz gereksiz çerçeve demek.
`.cards-company-item` ayrıca sağ üst köşesinden %10 vurgu rengiyle bir
RADYAL YIKAMA taşıyordu — Ayarlar ekranında 39 dekoratif kullanımı ayıklarken
bulunan aynı desen. Hiçbir bilgi taşımıyor; kaldırıldı.
Ögeler ince ayırıcılı satırlara döndü. Aynı dil paneldeki tablo ve dikkat
listesinde de kullanılıyor.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .cards-ranked-list,
body.is-authenticated .cards-company-list {
display: grid;
gap: 0;
}
body.is-authenticated .cards-ranked-item,
body.is-authenticated .cards-company-item {
padding: var(--sp-3) 0;
border: 0;
border-bottom: 1px solid var(--pnl-border-soft);
border-radius: 0;
background: none;
background-image: none;
box-shadow: none;
}
body.is-authenticated .cards-ranked-item:last-child,
body.is-authenticated .cards-company-item:last-child {
border-bottom: 0;
}
body.is-authenticated .cards-ranked-copy > strong,
body.is-authenticated .cards-company-copy > strong {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--pnl-text);
}
body.is-authenticated .cards-ranked-copy > span,
body.is-authenticated .cards-company-copy > span,
body.is-authenticated .cards-company-meta {
font-size: var(--fs-xs);
color: var(--pnl-text-3);
}
body.is-authenticated .cards-ranked-data > strong,
body.is-authenticated .cards-company-data > strong {
font-size: var(--fs-metric-sm);
font-weight: var(--fw-bold);
color: var(--pnl-text);
font-variant-numeric: tabular-nums;
}
body.is-authenticated .cards-ranked-data > span,
body.is-authenticated .cards-company-data > span {
font-size: var(--fs-xs);
color: var(--pnl-text-3);
}
/* ───────────────────────────────────────────────────────────────────────────
32. VURGU SÜSÜNÜN GERİ KALANI — ÇALIŞMA ANI TARAMASIYLA
───────────────────────────────────────────────────────────────────────────
Bölüm 19 Ayarlar ekranından yola çıkmıştı ve elle bulunan kullanımları
kesiyordu. Bu tur bunun yerine ÖLÇTÜ: her panel ekranında hesaplanmış
`background-image` ve `box-shadow` değerleri marka kırmızısı için tarandı
(sözde ögeler dâhil — `::before` bir eleman tarayıcısına görünmez, bu yüzden
ilk turda kaçmışlardı). Kabukta üç, sayfalarda dört kullanım kaldığı çıktı:
• `.sidebar::before` — kenar menüsünün üstünde kırmızı radyal yıkama.
• `.nav-link.active` — seçili menü ögesinin altında kırmızı parıltı gölgesi.
• `.nav-link.active::before` — göstergenin çevresinde 4px kırmızı halka.
• `.dashboard-summary-metric.is-accent` — metrik kartında radyal yıkama.
• `.filter-shell` — filtre kutusunda radyal yıkama (Kartlar + Analitik'te
kutuyu pembe gösteren şey buydu).
• `.identity-avatar` — avatar altında kırmızı parıltı.
• `.cards-scan-bar span` — grafik çubukları. Bölüm 15'te seri nötr veri
rengine alınmıştı ama GÖLGE kırmızı kalmıştı: nötr çubuklar kırmızı ışık
saçıyordu. Yarım kalmış bir düzeltme, düzeltilmemiş kadar görünür.
Seçili menü ögesi vurgusunu kaybetmiyor — sol kenardaki çubuk ve zemin
duruyor. Kalkan yalnızca çubuğun ÇEVRESİNDEKİ ışık.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .sidebar::before,
body.is-authenticated .dashboard-summary-metric.is-accent,
body.is-authenticated .filter-shell,
body.is-authenticated .stat-tile,
body.is-authenticated .metric-card-featured,
body.is-authenticated .summary-mini-card,
body.is-authenticated .hero-panel::before {
background-image: none;
}
body.is-authenticated .nav-link.active,
body.is-authenticated .nav-link.active::before,
body.is-authenticated .identity-avatar,
body.is-authenticated .identity-badge,
body.is-authenticated .cards-scan-bar span,
body.is-authenticated .toolbar-profile-button:hover,
body.is-authenticated .toolbar-profile-button:focus-visible {
box-shadow: none;
}
/* ── Kart düzenleyicideki dil sekmesi: YEDİNCİ sekme lehçesi ───────────────
`.lang-tab-btn` seçiliyken dolu marka kırmızısı alıyordu — yani formun
içindeki en dikkat çekici öge, kaydetme düğmesinden bile önce, "hangi dili
yazıyorum" seçimiydi. Ayarlar, Ön Muhasebe, blog ve abonelik ekranlarıyla
aynı segment diline bağlanıyor. */
body.is-authenticated .lang-tab-switcher {
display: inline-flex;
align-items: center;
gap: 2px;
width: fit-content;
padding: 3px;
border: 1px solid var(--pnl-border);
border-radius: var(--r-md);
background: var(--pnl-surface-2);
}
body.is-authenticated .lang-tab-btn {
height: 32px;
padding: 0 var(--sp-3);
border: 1px solid transparent;
border-radius: var(--r-sm);
background: none;
color: var(--pnl-text-2);
font-size: var(--fs-md);
font-weight: var(--fw-medium);
box-shadow: none;
}
body.is-authenticated .lang-tab-btn:hover {
color: var(--pnl-text);
}
body.is-authenticated .lang-tab-btn.active {
background: var(--pnl-surface);
border-color: var(--pnl-border);
color: var(--pnl-text);
font-weight: var(--fw-semibold);
box-shadow: var(--elev-1);
}
/* ───────────────────────────────────────────────────────────────────────────
33. KENAR MENÜSÜNÜN DİBİ — PANELİN ALT BİLGİSİ
───────────────────────────────────────────────────────────────────────────
Panelde alt bilgi ŞERİDİ yok. Yoğun bir operasyon ekranında her sayfanın
altına bant koymak, hiç okunmayan bir satır için her ekrandan dikey yer
almaktır. Ama alt bilginin taşıması gereken üç şey gerçekten gerekiyordu:
sürüm (destek konuşmasının ilk sorusu), KVKK ve kullanım şartları — ticari
bir SaaS'ta panelden ulaşılamaz olmaları eksiklikti.
Üçü kenar menüsünün dibine kondu: gezinme sütunu zaten oradaydı, içerik
sütunundan tek piksel almıyor ve dar ekranda çekmecenin sonunda kalıyor.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .sidebar-foot {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-1);
margin-top: var(--sp-4);
padding: var(--sp-3) var(--sp-2) 0;
border-top: 1px solid var(--pnl-border-soft);
font-size: var(--fs-xs);
color: var(--pnl-text-3);
}
body.is-authenticated .sidebar-foot-link {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 var(--sp-1);
border-radius: var(--r-xs);
color: var(--pnl-text-3);
text-decoration: none;
}
body.is-authenticated .sidebar-foot-link:hover {
background: var(--pnl-surface-2);
color: var(--pnl-text-2);
}
@media (pointer: coarse) {
body.is-authenticated .sidebar-foot-link {
min-height: 32px;
padding-inline: var(--sp-2);
}
}
/* ───────────────────────────────────────────────────────────────────────────
34. TAKIM ÜYESİ AVATARI
───────────────────────────────────────────────────────────────────────────
Üye baş harfleri dolu marka kırmızısı dairelerdeydi ve listede üst üste
üç tane duruyordu — ekranın en doygun ögesi, birincil eylemden bile önce.
Renk burada hiçbir şey ayırt etmiyordu: üç kişinin üçü de aynı kırmızı.
Avatarın işi kişiyi ayırmak; hepsi aynı renkse renk boşa harcanıyor demektir.
Nötr yüzeye alındı. (Kişi başına farklı renk üretmek ikinci bir palet açar
ve ölçülmesi gereken yeni zeminler doğurur; baş harf zaten ayırt ediyor.)
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .member-avatar {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: var(--r-full);
border: 1px solid var(--pnl-border);
background: var(--pnl-surface-2);
color: var(--pnl-text-2);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
}
/* ───────────────────────────────────────────────────────────────────────────
35. ONAY PENCERESİ
───────────────────────────────────────────────────────────────────────────
Ölçüm (1323px): pencere 1269×136px — yani ekranı boydan boya kesen bir
BANTTI, kutu değil. site.css'te `width: min(440px, 100%)` yazılı ama ögenin
hesaplanan genişliği 1269px: kural uygulanmıyor, öge ızgara alanına
geriliyor. `width` yerine `max-width` + `justify-self` kullanılıyor; ikisi
birlikte gerilmeyi de kesiyor.
İkinci ve daha kötü kusur okuma sırasındaydı: içerideki `.section-heading`
paneldeki bölüm başlığı kuralını miras alıyor (`display: flex;
justify-content: space-between`) ve AÇIKLAMA METNİNİ başlıktan 600px sağa
atıyordu. Kullanıcı "Kart kopyalanacak" başlığını okuyup ne olacağını
öğrenmek için ekranın diğer ucuna, sonra düğmeler için geri sola bakıyordu.
Bir onay penceresinde okuma sırası: ne oluyor → ne sonuç → karar.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .confirm-dialog {
width: auto;
max-width: min(460px, 100%);
justify-self: center;
align-self: center;
gap: var(--sp-4);
padding: var(--sp-6);
border-radius: var(--r-xl);
box-shadow: var(--elev-3, 0 24px 48px rgba(0, 0, 0, 0.28));
}
/* Başlık ve açıklama dikey akar; iki uca yaslanmaz. */
body.is-authenticated .confirm-dialog .section-heading {
display: block;
}
body.is-authenticated .confirm-dialog h3 {
margin: 0 0 var(--sp-2);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--pnl-text);
}
body.is-authenticated .confirm-dialog p {
margin: 0;
font-size: var(--fs-md);
line-height: var(--lh-normal);
color: var(--pnl-text-2);
}
body.is-authenticated .confirm-dialog-icon {
width: 40px;
height: 40px;
border-radius: var(--r-md);
border: 1px solid color-mix(in srgb, var(--pnl-danger) 26%, transparent);
background: var(--pnl-danger-bg);
color: var(--pnl-danger);
}
body.is-authenticated .confirm-dialog-icon svg {
width: 20px;
height: 20px;
}
/* Karar düğmeleri metnin altında ve sağa yaslı: onay son adım. */
body.is-authenticated .confirm-dialog-actions {
display: flex;
flex-direction: row;
justify-content: flex-end;
gap: var(--sp-2);
margin-top: var(--sp-5);
}
@media (max-width: 480px) {
body.is-authenticated .confirm-dialog {
grid-template-columns: 1fr;
}
/* Dar ekranda düğmeler tam genişlik: parmakla en kolay hedef. */
body.is-authenticated .confirm-dialog-actions > .btn {
flex: 1 1 auto;
justify-content: center;
}
}
/* ───────────────────────────────────────────────────────────────────────────
36. BOŞ HATA KUTUSU
───────────────────────────────────────────────────────────────────────────
Yeni blog yazısı penceresi açıldığında formun en üstünde 30px'lik BOŞ ve
kırmızı çerçeveli bir kutu duruyordu (ölçüldü). `asp-validation-summary`
kabı sunucu tarafında her zaman basılıyor, hata yoksa içi boş kalıyor —
ama kutunun kenarlığı ve zemini duruyor. Kullanıcı daha tek harf yazmadan
ekranda kırmızı bir uyarı görüyor.
`:empty` ile çözülüyor: hem sunucunun boş bastığı hâli hem de JavaScript'in
`innerHTML = ""` ile temizlediği hâli kapsıyor. Alternatif olan "JS ile
sınıf ekle/çıkar" iki yerde iki ayrı doğruluk kaynağı yaratırdı.
Doğrulama özeti ASP.NET tarafından boşken `validation-summary-valid`
sınıfını da alıyor; ikisi birlikte yazılıyor ki markup boşluk taşısa bile
(yani `:empty` tutmasa bile) kutu görünmesin.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .flash-error:empty,
body.is-authenticated .flash-warning:empty,
body.is-authenticated .flash-info:empty,
body.is-authenticated .flash-success:empty,
body.is-authenticated .flash-error.validation-summary-valid,
body.is-authenticated div.validation-summary-valid {
display: none;
}
/* ───────────────────────────────────────────────────────────────────────────
37. PLAN KİLİDİ
───────────────────────────────────────────────────────────────────────────
Plan kapsamı dışındaki özelliğin yerine çizilen tek satırlık not
(_PlanLock.cshtml). Uyarı değil, bilgi: zemin surface-2, metin ikincil,
bağlantı vurgu rengi. Renkler ölçülmüş tablodan (tokens §anlam renkleri);
surface-2 üstünde text-2 ve accent-fg zaten 4,5:1 üstü.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .plan-lock {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 10px;
margin-top: 16px;
padding: 10px 12px;
border: 1px solid var(--pnl-border);
border-radius: 8px;
background: var(--pnl-surface-2);
color: var(--pnl-text-2);
font-size: 0.85rem;
line-height: 1.4;
}
body.is-authenticated .plan-lock svg {
flex-shrink: 0;
}
body.is-authenticated .plan-lock-text {
flex: 1 1 200px;
}
body.is-authenticated .plan-lock-link {
color: var(--pnl-accent-fg);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
min-height: 24px;
display: inline-flex;
align-items: center;
}
/* ───────────────────────────────────────────────────────────────────────────
38. SEO & İÇERİK PANELİ
───────────────────────────────────────────────────────────────────────────
/admin/seo. Bağlantı durumu rozetleri, sıra farkı (▲/▼), rapor önizleme
kutusu ve dar sayısal alanlar. Renkler tokens §anlam renkleri; metinler
surface-2 üstünde ölçülü token'lardan.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .seo-status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
body.is-authenticated .seo-status {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 14px;
border: 1px solid var(--pnl-border);
border-radius: 10px;
background: var(--pnl-surface-2);
font-size: 0.85rem;
color: var(--pnl-text-2);
line-height: 1.4;
}
body.is-authenticated .seo-status strong {
color: var(--pnl-text);
font-size: 0.92rem;
}
body.is-authenticated .seo-status-err {
color: var(--pnl-danger);
word-break: break-word;
}
body.is-authenticated .seo-delta-up { color: var(--pnl-success); font-weight: 600; }
body.is-authenticated .seo-delta-down { color: var(--pnl-danger); font-weight: 600; }
body.is-authenticated .seo-delta-flat { color: var(--pnl-text-3); }
body.is-authenticated .seo-report-pre {
margin: 0;
padding: 14px 16px;
border: 1px solid var(--pnl-border);
border-radius: 10px;
background: var(--pnl-surface-2);
color: var(--pnl-text);
font: 0.85rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
white-space: pre-wrap;
word-break: break-word;
}
body.is-authenticated .seo-time-row {
display: flex;
align-items: center;
gap: 8px;
}
body.is-authenticated .seo-time-row input[type="number"] {
width: 84px;
flex: 0 0 auto;
}
body.is-authenticated .seo-inline-form {
display: inline;
}
body.is-authenticated .seo-chat-list {
margin: 6px 0 0;
padding-left: 18px;
font-size: 0.85rem;
color: var(--pnl-text-2);
}
body.is-authenticated .seo-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
body.is-authenticated .seo-kw-form {
display: grid;
grid-template-columns: minmax(160px, 2fr) 90px minmax(160px, 2fr) auto;
gap: 10px;
align-items: end;
}
@media (max-width: 720px) {
body.is-authenticated .seo-kw-form { grid-template-columns: 1fr 1fr; }
}
/* ───────────────────────────────────────────────────────────────────────────
39. ÖN MUHASEBE — BEKLEYEN İŞLER LİSTESİ
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .acc-signals {
margin: 0;
padding-left: 18px;
display: grid;
gap: 8px;
font-size: 0.88rem;
color: var(--pnl-text-2);
line-height: 1.45;
}
body.is-authenticated .acc-signals strong {
color: var(--pnl-text);
}
/* Dönem sekmeleri + serbest aralık / firma formu tek satırda; darda alt alta */
body.is-authenticated .acc-filters {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px 20px;
}
body.is-authenticated .acc-range-form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 10px;
}
body.is-authenticated .acc-range-field {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.78rem;
color: var(--pnl-text-2);
}
body.is-authenticated .acc-range-field input,
body.is-authenticated .acc-range-field select {
min-height: 36px;
padding: 6px 10px;
border: 1px solid var(--pnl-border);
border-radius: 8px;
background: var(--pnl-surface);
color: var(--pnl-text);
font-size: 0.88rem;
}
/* ───────────────────────────────────────────────────────────────────────────
40. AYRILMA NEDENLERİ (/admin/exit-surveys)
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .exit-reasons {
display: grid;
gap: 8px;
}
body.is-authenticated .exit-reason-row {
display: grid;
grid-template-columns: minmax(160px, 1.2fr) 3fr auto;
align-items: center;
gap: 12px;
font-size: 0.9rem;
}
body.is-authenticated .exit-reason-name {
font-weight: 600;
color: var(--pnl-text);
}
body.is-authenticated .exit-reason-bar {
display: block;
height: 10px;
border-radius: 999px;
background: var(--pnl-surface-2);
overflow: hidden;
}
body.is-authenticated .exit-reason-fill {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: var(--c-primary, #E51E25);
transition: width .3s ease;
}
body.is-authenticated .exit-reason-count {
min-width: 64px;
text-align: right;
font-variant-numeric: tabular-nums;
}
body.is-authenticated .exit-text {
max-width: 320px;
white-space: pre-wrap;
font-size: 0.85rem;
}
body.is-authenticated .exit-note-form {
display: flex;
gap: 6px;
align-items: center;
}
body.is-authenticated .exit-note-form input {
min-width: 140px;
padding: 5px 8px;
border: 1px solid var(--pnl-border);
border-radius: 6px;
background: var(--pnl-surface);
color: var(--pnl-text);
font-size: 0.82rem;
}
@media (max-width: 640px) {
body.is-authenticated .exit-reason-row {
grid-template-columns: 1fr auto;
}
body.is-authenticated .exit-reason-bar {
grid-column: 1 / -1;
}
}
/* ───────────────────────────────────────────────────────────────────────────
41. İLK KART SİHİRBAZI — PAYLAŞIM ADIMI (/admin/onboarding/share)
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .share-grid {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 24px;
align-items: start;
}
body.is-authenticated .share-qr {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px;
border: 1px solid var(--pnl-border);
border-radius: 12px;
background: #fff;
}
body.is-authenticated .share-qr img {
width: 180px;
height: 180px;
display: block;
}
body.is-authenticated .share-qr-locked {
display: grid;
gap: 8px;
justify-items: center;
text-align: center;
color: var(--pnl-text-3);
padding: 8px 4px;
}
body.is-authenticated .share-body {
display: grid;
gap: 12px;
}
body.is-authenticated .share-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
@media (max-width: 640px) {
body.is-authenticated .share-grid {
grid-template-columns: 1fr;
}
body.is-authenticated .share-qr {
justify-self: center;
}
}
/* ───────────────────────────────────────────────────────────────────────────
42. FATURA AYARLARI — ENTEGRATÖR BLOKLARI (/admin/invoicing/settings)
Seçili entegratörün kimlik alanları görünür; diğerleri [hidden]. Fieldset
kenarlığı, "hangi entegratöre ait" sorusunu tek bakışta yanıtlar.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .einvoice-provider-block {
border: 1px solid var(--pnl-border);
border-radius: 12px;
padding: 12px 16px 16px;
margin: 0;
min-width: 0;
}
body.is-authenticated .einvoice-provider-block[hidden] {
display: none;
}
body.is-authenticated .einvoice-provider-block > legend {
padding: 0 6px;
}
/* ───────────────────────────────────────────────────────────────────────────
43. ÖZEL ALAN ADI — KURULUM ADIM ÇİZGİSİ (/admin/domains, v1.39)
Dört adım tek satırda; tamamlanan dolu, sıradaki vurgulu, bekleyen soluk.
Dar ekranda adımlar iki satıra kırılır, çizgi kaybolur (etiket yeter).
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .domain-steps {
list-style: none;
margin: 0 0 12px;
padding: 0;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
body.is-authenticated .domain-step {
flex: 1 1 140px;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
font-size: var(--fs-sm);
color: var(--pnl-text-3);
}
body.is-authenticated .domain-step-mark {
flex: 0 0 auto;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid var(--pnl-border-strong);
background: var(--pnl-surface);
}
body.is-authenticated .domain-step::after {
content: "";
flex: 1 1 auto;
height: 2px;
background: var(--pnl-border);
min-width: 12px;
}
body.is-authenticated .domain-step:last-child::after { display: none; }
body.is-authenticated .domain-step.is-done { color: var(--pnl-success); }
body.is-authenticated .domain-step.is-done .domain-step-mark { background: var(--pnl-success); border-color: var(--pnl-success); }
body.is-authenticated .domain-step.is-done::after { background: var(--pnl-success); }
body.is-authenticated .domain-step.is-current { color: var(--pnl-text); font-weight: var(--fw-semibold); }
body.is-authenticated .domain-step.is-current .domain-step-mark {
border-color: var(--pnl-accent-fg);
box-shadow: 0 0 0 3px var(--pnl-accent-bg);
}
body.is-authenticated .domain-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.is-authenticated .domain-next-step {
margin: 0 0 10px;
font-size: var(--fs-sm);
color: var(--pnl-text-2);
line-height: var(--lh-normal, 1.5);
}
body.is-authenticated .domain-probe-note {
margin: 0 0 12px;
font-size: var(--fs-xs, .8rem);
color: var(--pnl-warning);
}
/* Durum rozeti tonları (site.css'teki .verified/.pending çiftinin yerini alır) */
body.is-authenticated .domain-status-badge.tone-success { background: var(--pnl-success-bg); color: var(--pnl-success); }
body.is-authenticated .domain-status-badge.tone-warning { background: var(--pnl-warning-bg); color: var(--pnl-warning); }
body.is-authenticated .domain-status-badge.tone-info { background: var(--pnl-info-bg); color: var(--pnl-info); }
body.is-authenticated .domain-status-badge.tone-muted { background: var(--pnl-surface-2); color: var(--pnl-text-2); }
@media (max-width: 640px) {
body.is-authenticated .domain-step::after { display: none; }
body.is-authenticated .domain-step { flex: 1 1 45%; }
}
/* ───────────────────────────────────────────────────────────────────────────
44. HESAP GÜVENLİĞİ (/account/security, v1.40)
Üç kart (2FA, passkey, oturumlar) tek sütun; geniş ekranda iki sütun.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .security-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
@media (min-width: 1024px) {
body.is-authenticated .security-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.is-authenticated .security-card:nth-child(2) { grid-row: span 2; }
}
body.is-authenticated .security-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
body.is-authenticated .security-card-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 14px;
}
/* Giriş sayfası: parola formunun altında passkey düğmesi ve ayraç */
.login-passkey {
margin-top: 14px;
display: grid;
gap: 10px;
}
.login-passkey-divider {
display: flex;
align-items: center;
gap: 10px;
font-size: .8rem;
color: var(--text-muted, #6b7280);
}
.login-passkey-divider::before,
.login-passkey-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--border, #e5e7eb);
}
/* Pano güvenlik önerisi (v1.40): tek satır kart, dar ekranda dikey */
body.is-authenticated .security-nudge { margin-bottom: 16px; border-left: 3px solid var(--pnl-warning); }
body.is-authenticated .security-nudge-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
body.is-authenticated .security-nudge-icon { width: 26px; height: 26px; flex: 0 0 auto; color: var(--pnl-warning); }
body.is-authenticated .security-nudge-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--pnl-text-2); }
body.is-authenticated .security-nudge-text strong { color: var(--pnl-text); }
body.is-authenticated .security-nudge-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Kopyala düğmesi (DNS kayıt satırları): panel.css'in genel button dolgusu (14px 20px) 28px'lik kareyi
içerik genişliği 0'a düşürüyor, ikon görünmüyordu (v1.40 ölçümü). Dolgu sıfır, ikon sabit. */
body.is-authenticated .btn-copy { padding: 0; width: 28px; height: 28px; min-width: 28px; }
body.is-authenticated .btn-copy svg { width: 14px; height: 14px; max-width: none; flex: 0 0 auto; }
/* hidden özniteliği display:flex/grid sınıflarına yenilmesin (passkey desteklenmeyen tarayıcı, giriş düğmesi) */
body.is-authenticated .security-card-actions[hidden],
.login-passkey[hidden] { display: none; }
/* ───────────────────────────────────────────────────────────────────────────
45. CRM BAĞLANTILARI (/admin/integrations, v1.42)
Sağlayıcı kartları iki sütun (geniş), tek sütun (dar); form alanları kart içinde.
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .integrations-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1100px) { body.is-authenticated .integrations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.is-authenticated .integration-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.is-authenticated .integration-badges { display: flex; gap: 6px; }
body.is-authenticated .integration-hint { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--pnl-text-2); overflow-wrap: anywhere; }
body.is-authenticated .integration-form { display: grid; gap: 12px; margin-top: 14px; }
body.is-authenticated .integration-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.is-authenticated .integration-test-ok { color: var(--pnl-success); }
body.is-authenticated .integration-test-fail { color: var(--pnl-danger); }
body.is-authenticated .integration-card { scroll-margin-top: 80px; }
/* ───────────────────────────────────────────────────────────────────────────
46. LANSMAN KAMPANYASI YÖNETİMİ (/admin/campaign, v1.43)
─────────────────────────────────────────────────────────────────────────── */
body.is-authenticated .campaign-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1100px) { body.is-authenticated .campaign-admin-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); } }
body.is-authenticated .campaign-admin-status { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: var(--fs-sm); color: var(--pnl-text-2); margin-bottom: 14px; }
body.is-authenticated .campaign-admin-form { display: grid; gap: 12px; }
body.is-authenticated .campaign-admin-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
/* §47 — Kart düzenleme: mevcut görseli kaldırma onay kutusu (v1.43.2) */
body.is-authenticated .media-remove { margin-top: 8px; font-size: var(--fs-sm); color: var(--pnl-text-2); }
body.is-authenticated .media-remove input[type="checkbox"] { width: 16px; height: 16px; }