html, body {
margin: 0;
padding: 0;
font-family: "Open Sans", "Segoe UI", system-ui, Roboto, Arial, sans-serif;
}
/* Blazor Server yeniden bağlanma katmanı */
#components-reconnect-modal {
z-index: 2000;
}
/* Sabit üst bar altında ana içerik doğru boşlukla başlasın — içerik barın
arkasında gizlenmesin. İç boşluk (nefes payı) layout'taki MudContainer'dan gelir;
bu kural yalnızca bar yüksekliği güvencesidir. */
.mud-layout .mud-main-content {
padding-top: var(--mud-appbar-height, 64px) !important;
}
/* ---- Tam ekran editör yerleşimi (EditorLayout) ----
position:fixed + inset:0 → viewport'a birebir oturur; sağlayıcı div'leri veya
dvh yuvarlamaları sayfaya yatay/dikey kaydırma EKLEMEZ (tarayıcı scroll'u olmaz). */
.editor-yerlesim {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--mud-palette-background, #f5f6f8);
}
.editor-ustbar {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: #26292e;
color: #fff;
overflow: hidden; /* toolbar kaymaz; taşarsa dosya adı kısalır (ellipsis) */
}
.editor-ustbar > * {
flex: 0 0 auto; /* öğeler sıkışmaz, gerekirse kaydırılır */
}
.editor-ustbar .mud-spacer {
flex: 1 1 auto;
}
.editor-ustbar .dosya-adi {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 15px;
max-width: 28ch;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.editor-ustbar .ustbar-meta {
font-size: 12px;
color: #9ba3ad;
white-space: nowrap;
}
.editor-govde {
flex: 1 1 auto;
min-height: 0; /* flex çocuğunun taşmadan küçülebilmesi için şart */
}
.editor-govde > div,
.editor-govde iframe {
width: 100%;
height: 100%;
border: 0;
}
/* ---- Giriş sayfaları (statik SSR — MudBlazor'suz sade stil) ---- */
.auth-bg {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(1200px 600px at 15% -10%, #3a0a24 0%, transparent 55%),
linear-gradient(150deg, #1a1c20 0%, #26292e 45%, #5a0a30 100%);
font-family: "Open Sans", "Segoe UI", Roboto, sans-serif;
padding: 16px;
}
.auth-card {
width: 100%;
max-width: 388px;
background: #ffffff;
border-radius: 16px;
padding: 34px 30px 22px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
border-top: 4px solid #c1272d;
}
.auth-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin-bottom: 26px;
}
.auth-logo {
width: 58px;
height: 58px;
border-radius: 14px;
background: #c1272d;
color: #fff;
font-family: "Montserrat", sans-serif;
font-size: 30px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px rgba(193, 39, 45, .35);
}
.auth-name {
font-family: "Montserrat", sans-serif;
font-size: 20px;
font-weight: 600;
color: #212529;
margin-top: 6px;
}
.auth-sub {
font-size: 13px;
color: #6c757d;
}
.auth-field {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 14px;
}
.auth-field label {
font-size: 13px;
color: #4a4f55;
font-weight: 600;
}
.auth-field input {
border: 1px solid #ccd1d7;
border-radius: 8px;
padding: 11px 12px;
font-size: 15px;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.auth-field input:focus {
border-color: #79003d;
box-shadow: 0 0 0 3px rgba(121, 0, 61, .14);
}
.auth-field .validation-message {
color: #c62828;
font-size: 12px;
}
.auth-error {
background: #fdecea;
color: #b71c1c;
border-radius: 8px;
padding: 10px 12px;
font-size: 13px;
margin-bottom: 14px;
border-left: 3px solid #d32f2f;
}
.auth-submit {
width: 100%;
background: #79003d;
color: #fff;
border: none;
border-radius: 8px;
padding: 12px;
font-family: "Montserrat", sans-serif;
font-size: 15px;
font-weight: 600;
cursor: pointer;
margin-top: 8px;
transition: background .15s;
}
.auth-submit:hover {
background: #5f0030;
}
.auth-foot {
text-align: center;
font-size: 12px;
/* 🔴 #93999F beyaz üstünde 2,88 (WCAG AA 4,5:1) — giriş, doğrulama ve gizlilik
sayfalarının alt bilgisi okunmuyordu. #6F767D ile 4,60. */
color: #6f767d;
margin-top: 24px;
line-height: 1.6;
}
.auth-foot a {
color: #79003d;
text-decoration: none;
font-weight: 600;
}
/* ============================================================================
TELEFON GENİŞLİĞİ (≤ 599.98 px — MudBlazor'ın sm kırılma noktası)
⚠ Bu dosyada bu blok eklenene kadar HİÇ media query yoktu. Portal masaüstünde
tasarlandı; hibrit mobil kabuk portalı 360 px'lik telefonda açınca üst bar
ölçülebilir biçimde taşıyordu (Galaxy S10e, 360×760 CSS px):
· "NISSERT Portal" iki satıra kırılıyor ve başlık alanını iki kat büyütüyordu
· Kullanıcı adı ("Test Denetçi") sağ kenardan KESİLİYORDU
· 64 px'lik bar + yerli başlık çubuğu ekranın %16'sını yiyordu
Aynı kusur telefonun tarayıcısından girenlerde de vardı; düzeltme kabuğa özel
değil, herkese.
============================================================================ */
@media (max-width: 599.98px) {
/* Bar 64 → 52 px. Telefonda dikey piksel en kıt kaynak. */
.mud-appbar .mud-toolbar {
height: 52px;
min-height: 52px;
padding-left: 4px;
padding-right: 4px;
}
.mud-appbar .mud-toolbar > .mud-typography {
font-size: 1.05rem;
/* ⚠ Başlık SARMAMALI: sarınca bar iki kat yükselir ve altındaki içerik aşağı
kayar. Sığmayan kısım üç noktayla kesilir. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* "NISSERT" kalır, " Portal" düşer — marka kaybolmadan yer açılır. */
.appbar-marka-ek {
display: none;
}
/* Kullanıcı adı etiketi gizlenir, İKONLAR KALIR.
⚠ font-size: 0 ile yapılıyor çünkü MudBlazor etiketi çıplak bir metin
düğümü olarak basıyor — sarmalayıcı bir eleman olmadığı için seçiciyle
ayrı hedeflenemiyor. ActivatorContent ile özel aktivatör YAZILAMAZ:
MudBlazor 9.4'te tıklamayı bağlamıyor (bu depoda ölçüldü). */
.appbar-kullanici .mud-button-label {
font-size: 0;
gap: 0;
}
.appbar-kullanici .mud-icon-root {
font-size: 1.35rem;
}
/* İkon düğmeleri sıkışsın ama 44 px'lik dokunma hedefinin ALTINA İNMESİN. */
.mud-appbar .mud-icon-button {
padding: 8px;
min-width: 44px;
min-height: 44px;
}
/* İçerik kabı: 24 px'lik dikey boşluk telefonda ilk kartı katlamanın altına
itiyordu; yan boşluk 16 → 12 px ile tabloya nefes verilir. */
.mud-main-content .mud-container {
padding-top: 12px !important;
padding-bottom: 16px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Sayfa başlıkları masaüstü ölçeğinde telefonda iki-üç satıra yayılıyordu. */
.mud-typography-h4 { font-size: 1.4rem; }
.mud-typography-h5 { font-size: 1.2rem; }
/* Geniş tablolar sayfayı YATAY KAYDIRTMAMALI; kendi kabında kaysınlar. */
.mud-table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ---- yatay taşmanın asıl kaynağı ----
ÖLÇÜLDÜ: depoda 86 adet `MudStack Row="true"` var ve yalnız 14'ünde `Wrap`
tanımlı. Kalan 72 satır esnek kutu varsayılanı olan `nowrap` ile çiziliyor;
360 px'te içerik sığmayınca satır SAYFAYI genişletiyor. Somut sonuç
(denetim detayı, S10e): başlık çipleri, kart değerleri ve ÜST BARIN SAĞ
YARISI ekran dışında kaldı — kullanıcı bildirim ve hesap düğmelerine
erişemiyordu.
MudStack sınıf değil yardımcı sınıf basıyor (`d-flex flex-row`), o yüzden
72 dosyaya dokunmak yerine tek kural yetiyor.
⚠ `:not(.flex-nowrap)` ŞART: `Wrap="Wrap.NoWrap"` yazan bileşen bunu
bilerek istemiştir; onu ezmek başka bir kusur üretirdi. */
.d-flex.flex-row:not(.flex-nowrap) {
flex-wrap: wrap;
}
/* Durum şeridi 10 çiple ekranın yarısını yiyordu; çipler telefonda küçülür. */
.mud-chip.mud-chip-size-small {
height: 26px;
font-size: .78rem;
}
/* ---- sekmeler ----
ÖLÇÜLDÜ: denetim detayında 7 sekme var (Genel · Ekip · Plan · Uygunsuzluklar ·
Karar · Soru Listesi · Dosyalar). MudBlazor sekmeye `width: 100%` veriyor,
dolayısıyla 360 px'te ekrana BİR BUÇUK sekme sığıyor ve şerit kaydırılamıyor —
yalnız kenardaki küçük oklarla ilerliyor. Denetçinin asıl işi olan "Soru
Listesi" altıncı sırada: oraya ulaşmak beş kez minik oka basmak demekti.
⚠ `!important` KEYFİ DEĞİL, ZORUNLU: MudBlazor genişliği stil sayfasından
değil her sekmeye SATIR İÇİ yazıyor — `style="min-width:160px;"`
(`MudTabs.MinimumTabWidth` varsayılanı). Satır içi stil, stil sayfasındaki
her kuralı yener; `!important`sız ilk denemem canlıda hiçbir şeyi
değiştirmedi ve cihazda ölçülerek anlaşıldı. Bileşen parametresini
değiştirmek masaüstünü de bozardı, oysa kusur yalnız telefonda.
`width: auto` sekmeyi kendi metnine göre daraltır; 360 px'te üç-dört sekme
aynı anda görünür. Dokunma yüksekliği 44 px'in altına DÜŞÜRÜLMEZ. */
.mud-tabs-tabbar .mud-tab {
width: auto;
min-width: 0 !important;
padding: 6px 10px;
font-size: .75rem;
min-height: 44px;
}
/* Diyalog telefonda kenardan kenara: 24 px kenar boşluğu 360 px'te içeriğe
312 px bırakıyor ve form alanları sıkışıyor. */
.mud-dialog {
margin: 8px !important;
max-width: calc(100vw - 16px) !important;
}
}
/* ============================================================================
KABUK MODU — portal, NISSERT mobil uygulamasının içinde açıldığında
İşaret ``; köprü (`/mobil/web-giris`) `portal_kabuk`
çerezini bırakıyor, `App.razor`'daki satır içi betik ilk boyamadan önce sınıfı
koyuyor. İstemci tarafı gezinmede sınıf `` üzerinde kaldığı için üst bar
hiçbir tıklamada geri gelmiyor.
ÖLÇÜLDÜ (S10e, 360×760): uygulamanın kendi başlık çubuğu + portalın üst barı
üst üste 108 px yiyordu — ekranın %14'ü, üstelik iki menü aynı işi görüyordu.
Kabukta gezinme uygulamanın işi; portal yalnız gövdeyi çizer.
⚠ Bu blok GENİŞLİKTEN BAĞIMSIZ: tablette de kabuk aynı kabuk, aynı ikizlenme.
============================================================================ */
.kabuk-mobil .mud-appbar {
display: none !important;
}
/* Üst bar gitti; MudBlazor'ın onun için ayırdığı üst boşluk da gitmeli.
Bırakılırsa gövde 64 px aşağıdan başlar ve kazanılan yer geri harcanır.
⚠ Seçici bilerek ÜÇ sınıflı: bu dosyanın başında `.mud-layout .mud-main-content`
için `padding-top: … !important` zorlayan bir kural var. Eşit özgüllükte sonra
gelen kazanırdı ama bu sıraya bağlı olurdu; üç sınıf onu tartışmasız yener. */
.kabuk-mobil .mud-layout .mud-main-content {
padding-top: 0 !important;
}
/* Gezinme çekmecesi ve karartma perdesi: uygulamanın kendi menüsü var. */
.kabuk-mobil .mud-drawer,
.kabuk-mobil .mud-drawer + .mud-overlay,
.kabuk-mobil .mud-drawer-open .mud-overlay {
display: none !important;
}
/* Çekmece kapalıyken bile MudBlazor içeriğe kenar boşluğu ayırabiliyor. */
.kabuk-mobil .mud-layout {
--mud-drawer-width-left: 0px;
--mud-drawer-width-right: 0px;
}
/* Gövde kenardan kenara: kabukta dış çerçeve zaten uygulamanın penceresi. */
.kabuk-mobil .mud-main-content .mud-container {
padding-top: 10px !important;
padding-left: 10px !important;
padding-right: 10px !important;
max-width: 100% !important;
}
/* ---- kabukta mükerrer kalkanlar ----
Kabukta uygulamanın kendi barı sayfa adını ZATEN gösteriyor (document.title ile
eşitleniyor) ve geri okunu ZATEN taşıyor. Portalın aynı ikisini bir daha çizmesi,
360 px'lik ekranda hem yer yiyor hem "bu düğme diğerinden farklı mı?" sorusunu
doğuruyordu. Cihazda görüldü: bildirimler sayfasında "Bildirimler" alt alta iki kere.
⚠ Yalnız AD ve İKON düşer — alt başlık ve eylem düğmeleri KALIR. Onlar başka hiçbir
yerde yok; körlemesine `.sayfa-baslik { display: none }` yazmak "Yeni Ekle" gibi
düğmeleri de götürür ve sayfayı işlevsiz bırakırdı. */
.kabuk-mobil .sayfa-baslik-ikon,
.kabuk-mobil .sayfa-baslik-ad {
display: none;
}
/* Ad gizlenince geriye boş bir kutu kalıyorsa (alt başlık yok) o da düşer, yoksa
satırda 12 px'lik hayalet bir boşluk kalır. */
.kabuk-mobil .sayfa-baslik-yalniz-ad {
display: none;
}
/* Ne alt başlık ne eylem kaldıysa satırın kendisi de gereksiz. */
.kabuk-mobil .sayfa-baslik-eylemsiz {
display: none;
}
/* Alt başlık, çip veya eylem kaldıysa satır durur ama başlık boşluğu kadar yer tutmasın.
ÖLÇÜLDÜ (müşteri detayı, S10e): adı ve geri oku gizlendikten sonra geriye TEK BİR ÇİP
("NİS 1") kalıyordu ama satır hâlâ 16 px alt boşluk taşıyordu; üstündeki kap boşluğuyla
birlikte tek çip için 30 CSS px harcanıyordu ve çip boşlukta asılı duruyordu. */
.kabuk-mobil .sayfa-baslik {
margin-bottom: 8px !important;
}
/* Kabukta gövde barın hemen altından başlar: üstteki 10 px, uygulamanın kendi barı
zaten görsel ayrımı yaptığı için gereksizdi. */
.kabuk-mobil .mud-main-content .mud-container {
padding-top: 8px !important;
}
/* ---- telefonda kart iç boşluğu ----
MudBlazor'ın `pa-4`ü 16 px; 360 px'lik ekranda dört kenardan 32 px, kartın içindeki
metne kalan genişliğin onda birinden fazlası. 12 px hem nefes payını korur hem
satır başına bir-iki kelime daha sığdırır. Yalnız telefonda; masaüstü değişmez. */
@media (max-width: 599.98px) {
.mud-paper.pa-4,
.mud-card-content.pa-4 {
padding: 12px !important;
}
}
/* Sayfa içi geri oku: uygulamanın barındaki okun ikizi. */
.kabuk-mobil .sayfa-geri {
display: none;
}
/* ---- telefonda liste ve tablo verimliliği ---- */
@media (max-width: 599.98px) {
/* MudBlazor dar ekranda tabloyu KART kipine çeviriyor (`mud-xs-table`) ve her sütunu
ayrı bir satır yapıyor. Yan boşluk 16 → 12 px. */
.mud-xs-table .mud-table-cell {
padding: 6px 12px !important;
}
/* ⚠ ASIL İSRAF BOŞ SATIRLARDI, boşluk değil (ölçüldü: tablo zaten `Dense`, dikey
boşluk baştan 6 px'ti). Denetim listesinde tek kayıt 7 satır çiziyor ve canlı veride
bunların İKİSİ boş — "Planlanan Tarih" ve "Baş Denetçi" yalnız etiketiyle duruyor,
kayıt başına ~50 CSS px'i hiçbir şey söylemeden yiyordu.
Sunucudan gelen HTML doğrulandı: değeri olmayan hücre gerçekten ` | `, yani
`:empty` eşleşiyor (üretilen `::before` etiketi `:empty`'yi bozmaz). Değeri olan
hiçbir hücre etkilenmez. */
.mud-xs-table .mud-table-cell:empty {
display: none;
}
/* Etiket ile değer arasındaki 16 px, dar ekranda değeri gereksiz yere sıkıştırıyor. */
.mud-xs-table .mud-table-cell:before {
padding-right: 8px;
padding-inline-end: 8px;
}
/* Kart kipine GİRMEYEN gerçek tablolar (haftalık takvim gibi matrisler): hücre yan
boşluğu 16 → 8 px. Tablo yine kendi kabında kayar ama aynı kaydırmada bir sütun
daha görünür. */
.mud-table:not(.mud-xs-table) .mud-table-cell {
padding: 6px 8px;
}
/* Metin + durum çipi satırı: çip yanında dururken metne kalan genişlik yetmiyor ve
metin çok satıra kırılıyor. Dikey yığmak toplamda YER KAZANDIRIYOR.
⚠ Sarma kuralı burada işe yaramaz: metin bloğu `min-width: 0` taşıdığı için esnek
kutu satırı sarmak yerine önce metni ezer. */
.kart-ust {
flex-direction: column;
align-items: flex-start !important;
gap: 2px !important;
}
.kart-ust .mud-spacer {
display: none;
}
/* ---- ipucu balonları ----
Cihazda görüldü: "Bir üst klasör" ipucu dokunuşta açılıp "Şablondan Oluştur"
düğmesinin üstünü örttü. İpucu FARE için bir şey — üzerine gelip beklemek diye bir
hareket dokunmatikte yok; orada yalnız içeriği kapatıyor. Erişilebilirlik kaybı yok:
aynı metin `aria-label` olarak duruyor. */
.mud-tooltip {
display: none !important;
}
}
/* ---- arşiv gezgini ----
Masaüstünde klasör ağacı ile dosya listesi yan yana; sabit yükseklik ikisini hizalıyor. */
.arsiv-agac {
min-height: 480px;
}
/* Paneller ALT ALTA dizildiğinde hizalanacak bir şey yok: 480 px yalnız boş bir blok
olarak duruyor ve dosya listesini ekranın altına itiyor. Ağaç kendi boyunca uzasın.
⚠ SINIR 600 DEĞİL 960 — ölçülmüş kusur. Paneller `MudItem md="3"/md="9"` ile
diziliyor ve `md` MudBlazor'da **960 px**'tir (js/arsiv.js de tam bu sayıyı kullanıyor:
`if (window.innerWidth >= 960) return;`). 600'de yazılan kural 600–959 px arasını
AÇIKTA BIRAKIYORDU ve o aralık boş değil: **Tab S7 tam 753 px**.
TABLETTE ÖLÇÜLDÜ (Tab S7, 1600×2560 @340 → 753 dp, uiautomator bounds):
ağacın son satırı y = 386 dp
araç çubuğu y = 720 dp
------------------------------------
BOŞ BLOK 334 dp — 1204 dp'lik ekranın dörtte biri, hiçbir şey çizmiyor. */
@media (max-width: 959.98px) {
.arsiv-agac {
min-height: 0;
}
}
/* ---- dar ekranda klasör ağacı: KAPALI BAŞLAR ----
⚠ CİHAZDA ÖLÇÜLDÜ (S10e, 360 dp): arşiv ilk açıldığında ekranda GÖRÜNEN DOSYA SAYISI
SIFIR. Ağaç (4 kök × 50 dp = 200 dp) + araç çubuğu (3 satır, 160 dp) + başlık ve
parola uyarısı, 712 dp'lik kullanılabilir yüksekliğin tamamını yiyor.
Ve ağaç SINIRSIZ büyüyor: "Müşteriler" düğümü genişletilince altına canlıda **24**
müşteri klasörü geliyor (50 dp pitch cihazda ölçüldü) — 1.200 dp, yani iki ekrandan
fazla. Arşiv göçü ilerledikçe 143 müşteriye çıkacak: ~7.150 dp.
⚠ Ağaç dar ekranda GEREKSİZ: dosya listesinin kendi satırına dokunmak klasöre giriyor
(`RowClick="SatirTiklandi"`), "bir üst klasör" düğmesi ve kırıntı yolu geri götürüyor.
Yani ağaç, listenin gösterdiği şeyin ikinci bir kopyası — ve kopya, aslını ekrandan
atıyor. Plandaki "ağaç + tablo → çekmece + liste, tek seferde tek düzey" kararı bu.
Ağaç SİLİNMİYOR, katlanıyor: derin bir klasöre atlamak isteyen kullanıcı açabilir. */
.arsiv-agac-dugme {
display: none;
}
@media (max-width: 959.98px) {
.arsiv-agac-dugme {
display: inline-flex;
min-height: 48px;
}
.arsiv-agac-kabi {
display: none;
}
.arsiv-agac-kabi.arsiv-agac-acik {
display: block;
}
}
/* Klasör ağacındaki ad: uzun adlar üç nokta menüsünü dışarı itmesin. */
.agac-ad {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* Klasör satırının tıklanabilir alanı: parmakla ıskalanmasın diye 40 px. */
.agac-satir {
cursor: pointer;
min-height: 40px;
}
/* Görüntülenen klasör: renk TEK KANAL değil, kalınlık da değişiyor. */
.agac-ad-aktif {
color: var(--mud-palette-primary);
font-weight: 600;
}
/* ============================================================================
TABLET ARALIĞI (600–959 px)
⚠ Bu aralık HİÇ ele alınmamıştı ve ölçülebilir yer israfı üretiyordu. Galaxy
Tab S7 / S7 FE dikey konumda 753×1205 CSS px: telefon kırılma noktasının (600)
ÜSTÜNDE ama MudBlazor'ın `md`'sinin (960) ALTINDA. Sonuç: `xs="12" md="6"`
yazan her form ızgarası tablette TEK SÜTUNA düşüyor ve genişliğin yarısı boş
kalıyordu.
Asıl çözüm işaretlemede (`sm="6"` eklendi, 15 dosya / 30 öğe). Buradaki kurallar
yalnız işaretlemeyle çözülemeyen kalanı topluyor.
============================================================================ */
@media (min-width: 600px) and (max-width: 959.98px) {
/* İçerik kabı tablette kenarlara yapışmasın ama masaüstü genişliğini de taklit
etmesin — okunabilir satır uzunluğu için orta yol. */
.mud-main-content .mud-container {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Sekme çubuğu: tablette 8 sekme rahat sığar, telefondaki daraltmaya gerek yok.
(Telefon kuralı 599.98'de bittiği için burada varsayılana dönülüyor; bu blok
yalnız niyeti belgelemek için duruyor.) */
}
/* ============================================================================
FORM BÖLÜMLERİ — beyan, kontrol listesi ve kutu grupları
ÖLÇÜLEN KUSURLAR (kullanıcı ekran görüntüsüyle bildirdi, 21.08.2026):
1. ÇAKIŞMA. Bölüm başlığı ile onay kutusu satırı üst üste biniyordu:
`MudGrid` negatif dış boşlukla çalışıyor, kutulara verilen `py-0` sınıfı
dikey boşluğu tamamen kaldırınca ilk satır başlığın üstüne çıkıyordu.
Çözüm: kutular ızgaradan çıkarıldı, kendi `grid`ine alındı.
2. İKİ UCA SAVRULMA. Soru solda, Evet/Hayır düğmesi ekranın SAĞ UCUNDA
kalıyordu; geniş ekranda aralarında ~1500 px boşluk vardı ve hangi
cevabın hangi soruya ait olduğu okunmuyordu. `justify-space-between`
tek başına kullanıldığında kabın genişliği kadar açılıyor.
Çözüm: bölüme okunabilir bir üst genişlik verildi ve soru satırı
"esneyen etiket + sabit kontrol" olarak kuruldu.
3. Alanlar arasında görsel ayrım yoktu; art arda gelen sekiz soru tek blok
gibi görünüyordu. İnce ayraç ve satır vurgusu eklendi.
============================================================================ */
/* Okunabilir satır uzunluğu: etiket ile kontrolü birbirinden koparmayan üst sınır.
Panelin kendisi tam genişlikte kalır; yalnız İÇERİK sınırlanır. */
.form-bolum {
max-width: 1040px;
}
/* Onay kutusu grubu: ızgara yerine kendi akışı — MudGrid'in negatif dış boşluğu
başlıkla çakışmayı üretiyordu. */
.kutu-grubu {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2px 16px;
margin: 4px 0 8px;
}
/* Soru satırı: etiket esner, kontrol sabit genişlikte sağda durur ama kabın
ucuna savrulmaz. */
.soru-satiri {
display: flex;
align-items: center;
gap: 16px;
padding: 7px 0;
border-bottom: 1px solid var(--mud-palette-divider);
}
.soru-satiri:last-of-type {
border-bottom: 0;
}
/* Soruların üzerine gelince satır belirginleşsin — hangi satırda olduğun belli olur. */
.soru-satiri:hover {
background: var(--mud-palette-action-default-hover);
}
.soru-satiri .soru-metni {
flex: 1 1 auto;
min-width: 0;
}
/* Kontrol tarafı: küçülmez, gereğinden fazla da büyümez. */
.soru-satiri .soru-kontrol {
flex: 0 0 auto;
}
/* Bölüm başlığı ile ilk içerik arasında nefes payı — çakışmanın ikinci sebebi
başlığın alt boşluğunun sıfırlanmasıydı. */
.form-bolum .bolum-basligi {
margin-bottom: 6px;
}
/* Evrak kontrol listesi: durum ikonu · ad · eylem. Telefonda alt alta düşer. */
.evrak-satiri {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 8px 0;
border-bottom: 1px solid var(--mud-palette-divider);
}
.evrak-satiri:last-of-type {
border-bottom: 0;
}
.evrak-satiri .evrak-ad {
flex: 1 1 320px;
min-width: 0;
}
.evrak-satiri .evrak-eylem {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
}
/* Telefonda soru ve cevabı alt alta: yan yana sıkıştırmak metni kırpıyordu. */
@media (max-width: 599.98px) {
.soru-satiri {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.kutu-grubu {
grid-template-columns: 1fr;
}
}
/* Izgara hücresinde uzun anlatıyı İKİ SATIRA kelepçeler.
⚠ Ölçüldü (canlı, 21. tur): üretim yeri açıklamaları arşivden geldiği için 1000
karaktere kadar çıkıyor. Kırpılmazsa tek satır tüm tabloyu yükseltip ızgarayı
okunmaz hâle getiriyor; hiç gösterilmezse veri ekranda yok sayılıyor.
Metnin TAMAMI hücrenin `title` özniteliğinde durur — kelepçe görüntüyü sınırlar,
veriyi değil. */
.yer-kirp {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
/* ---- KABUKTA 48 dp DOKUNMA HEDEFİ ----
⚠ CİHAZDA ÖLÇÜLDÜ (S10e, 360×760, uiautomator bounds). Portalın ekranları kabuğun
WebView'inde açılıyor ve masaüstü için ayarlanmış MudBlazor yükseklikleriyle
geliyorlar. Başvuru listesi + detayında 48 dp'nin ALTINDA yedi ayrı dokunma hedefi
sayıldı:
MudButton "Başvuru Formu Üret" 40 dp
MudButton "Teklif Oluştur" 39 dp
MudTextField (müşteri arama) 35 dp
MudTextField (kapsam) 43 dp
MudTab "TÜMÜ (889)" 45 dp
MudTab "YÖNETİM SİSTEMİ (0)" 45 dp — üstelik 22 dp GENİŞLİĞE kırpılmış
Arama alanı (liste) 42 dp
Bu, planın kırmızı hattındaki "48 px hedef KORUNUR" kuralının ihlali ve sahada
parmakla ıskalanan satır demek. Düzeltme TEK YERDE: kabuğa giren HER portal ekranı
birden kazanıyor — 43 ekranın hepsinde tek tek uğraşmak yerine.
⚠ Yalnız `.kabuk-mobil` altında: masaüstü yoğunluğu DEĞİŞMEZ. Aynı kuralı genel
koymak, 24" ekranda gereksiz iri düğmeler üretirdi.
⚠ `min-height`, `height` DEĞİL: sabit yükseklik iki satıra taşan bir düğme etiketini
kırpardı (yukarıdaki 22 dp'lik sekme tam da kırpılma sınıfından bir kusur). */
.kabuk-mobil .mud-button-root,
.kabuk-mobil .mud-icon-button,
.kabuk-mobil .mud-tab,
.kabuk-mobil .mud-input-control .mud-input-slot,
.kabuk-mobil .mud-input-control .mud-select-input,
.kabuk-mobil .mud-input.mud-input-outlined,
.kabuk-mobil .mud-input.mud-input-filled,
.kabuk-mobil .mud-input.mud-input-text {
min-height: 48px;
}
/* ⚠ GENİŞLİK DE HEDEFİN PARÇASI — yukarıdaki kural yalnız `min-height` veriyordu ve
ikon düğmelerinde bu YETMİYOR: onlar KARE hedeflerdir, dar kalan kenar hangisi olursa
olsun parmak ıskalar.
İKİ CİHAZDA ÖLÇÜLDÜ (uiautomator bounds, arşiv gezgini):
S10e (360 dp) Tab S7 (753 dp)
klasör "Expand" oku 32×49 dp 34×50 dp
klasör işlem menüsü (⋮) 20×49 dp 22×50 dp
"Bir üst klasör" 36×49 dp 38×49 dp
"Silinmiş dosyaları göster" 36×49 dp 37×49 dp
Yükseklik geçiyor, genişlik geçmiyor: 20 dp, hedefin ÜÇTE BİRİ. Kendi kuralımın
ölçülmüş boşluğu — `min-height` yazarken ikon düğmesinin diğer kenarı hiç düşünülmedi.
⚠ Yalnız `.mud-icon-button`: metin düğmesi zaten 48 px'ten geniş; ona `min-width`
vermek dar ekranda gereksiz esneme demek olurdu. */
.kabuk-mobil .mud-icon-button {
min-width: 48px;
}
/* ⚠ KIRINTI YOLU: klasör ağacı dar ekranda katlandıktan SONRA ölçüldü ve önemi arttı.
Ağaç kapalıyken "bir üst klasör" düğmesi ile kırıntı yolu, arşivde yukarı çıkmanın
İKİ yolundan biri — yani birincil gezinme.
Cihazda ölçüldü (S10e 360 dp, arşiv kökü): "Arşiv" kırıntısı 41×27 dp; 751 dp'de
42×28 dp. Bağlantı kuralı (`a.mud-link`) kırıntıyı kapsamıyor: MudBreadcrumbs kendi
`.mud-breadcrumb-item` sınıfını kullanıyor (MudBlazor 9.7 kurulu CSS'inde doğrulandı).
`inline-flex` + `min-height`: dikey dolgu vermek satır aralığını büyütüp kırıntı
şeridini kalınlaştırırdı; hedef büyüsün, şerit büyümesin. */
.kabuk-mobil .mud-breadcrumb-item a,
.kabuk-mobil .mud-breadcrumb-item li,
.kabuk-mobil .mud-breadcrumbs li > a {
display: inline-flex;
align-items: center;
min-height: 48px;
}
/* ---- SEKME ŞERİDİ: iddiam ÇÜRÜTÜLDÜ, kural GERİ ALINDI ----
"YÖNETİM SİSTEMİ (0) sekmesi 22 dp genişliğe KIRPILMIŞ" diye ölçüp bir kaydırma
kuralı yazmıştım. Yanlıştı — ve düzeltmenin işe yaramadığını görünce daha derin
ölçtüm:
TÜMÜ (889) [174,885][462,1032]
HELAL SERTİFİKASYON (0) [459,885][1017,1032]
YÖNETİM SİSTEMİ (0) [1014,885][1080,1032] <- ekranın SAĞ KENARI 1080
ÜRÜN BELGELENDİRME (0) [0,0][0,0] <- tamamen ekran DIŞINDA
Yani şerit zaten yatay kaydırılabilir; uiautomator bir öğenin yalnız GÖRÜNEN
dilimini bildiriyor. MudBlazor'ın kendi mekanizması bunu doğruluyor:
`.mud-tabs-tabbar-wrapper { width: max-content }` + `.mud-tab { flex-shrink: 0 }`
yani sekmeler HİÇ daralmıyor, kap onları kaydırıyor.
Kural geri alındı: var olmayan bir kusuru "düzelten" CSS, MudBlazor'ın dönüşümle
yaptığı kaydırmanın üstüne ikinci bir kaydırma bindirirdi.
⚠ Ders: 22 dp'lik bir ölçüm "öğe dar" demek değil; "öğenin görünen kısmı dar"
demek. İkisini ayırmak için komşularının sınırlarına bakmak gerekiyordu. */
/* ---- kabukta BAĞLANTILAR da dokunma hedefidir ----
⚠ Ölçüldü: parola uyarısındaki "Şimdi değiştirin" bağlantısı 253×44 dp. Düğme
kuralı onu kapsamıyordu çünkü `MudLink` bir `` ve `.mud-button-root` taşımıyor;
oysa kullanıcı açısından tıklanabilir bir hedef ve satır içinde metne yapışık
duruyor. Yalnız BLOK bağlantılara değil, satır içi olanlara da uygulanıyor:
`inline-flex` ile yükseklik veriyoruz, metin akışı bozulmuyor. */
.kabuk-mobil .mud-typography a:not(.mud-table-cell a),
.kabuk-mobil .mud-alert a,
.kabuk-mobil a.mud-link:not(.mud-table-cell a) {
display: inline-flex;
align-items: center;
min-height: 48px;
}
/* ==========================================================================
HERKESE AÇIK SAYFALARDA 48 dp DOKUNMA HEDEFİ (AuthLayout)
⚠ Bu sayfalar kabuğun DIŞINDA: `/dogrula`, `/login` ve sertifika dizini
`AuthLayout` kullanıyor, yani `.kabuk-mobil` kuralları buraya HİÇ ULAŞMIYOR.
Sertifika QR'ı üçüncü kişiyi doğrudan `/dogrula/{kod}`a gönderiyor ve o kişi
kendi tarayıcısıyla, kabuk çerezi olmadan geliyor.
⚠ GERÇEK MOBİL TARAYICIDA ÖLÇÜLDÜ (S10e Chrome, 360 dp, uiautomator bounds):
/dogrula/{kod} "Başka bir kod doğrula" 133×18 dp
"Tüm sertifika dizini" 136×40 dp
/dogrula arama alanı 268×45 dp
"Doğrula" düğmesi 268×44 dp
Dördü de 48 dp'nin altında. Sayfanın kendisi sağlam — yatay taşan düğüm 0,
sertifika bilgisi eksiksiz okunuyor — kusur yalnız dokunma hedeflerinde.
⚠ Kural kabuk sınıfına DEĞİL doğrudan `.auth-*`e yazılıyor: kabuktan gelen de
dışarıdan gelen de aynı sayfayı görüyor ve ikisinin de parmağı aynı.
========================================================================== */
.auth-field input,
.auth-submit {
min-height: 48px;
}
/* Satır içi bağlantılar da dokunma hedefi. `inline-flex` metin akışını bozmadan
yükseklik verir; dikey dolgu yerine `min-height` kullanılıyor ki satır aralığı
büyüyüp kart uzamasın. */
.auth-card a,
.auth-foot a {
display: inline-flex;
align-items: center;
min-height: 48px;
}
/* ---- PAROLA UYARISI: kabukta kısa ----
⚠ CİHAZDA ÖLÇÜLDÜ (S10e 360 dp): şerit üç satıra sarıyor ve y=100'den y=214'e kadar,
yani ~114 dp yer kaplıyor — 712 dp'lik kullanılabilir yüksekliğin %16'sı. Ve bu HER
portal ekranında: bugüne kadar ölçtüğüm arşiv, müşteri, sertifika, referans, takvim
ekranlarının hepsinde aynı blok duruyordu.
⚠ Canlıda ölçüldü: `sifre_degistirmeli_mi` 27 aktif kullanıcının 27'sinde de TRUE.
Yani şerit birkaç kişinin değil FİLONUN TAMAMININ ekranında.
Bilgi silinmiyor, kısaltılıyor — masaüstünde tam metin aynen kalıyor. */
.parola-uyari-kisa {
display: none;
}
.kabuk-mobil .parola-uyari-kisa {
display: inline;
}
.kabuk-mobil .parola-uyari-uzun {
display: none;
}
/* ==========================================================================
DOKUNMATİK GİRDİ — kabuk çerezi OLMADAN girenler
==========================================================================
⚠ ÖLÇÜLDÜ (04.09.2026, `tools/UiTarayici`, 41 rota × 2 görünüm, canlı): oturum
açmış kullanıcı portala TARAYICIDAN girdiğinde 949 dokunma hedefi 26×26 px —
Android ölçütünün (48 dp) yarısından az. Örneklerin tamamı tek sınıftan:
`.mud-icon-button`. Telefon görünümünde 14, tablet görünümünde 26 rota etkileniyor.
⚠ Yukarıdaki `.kabuk-mobil` kuralları bu kullanıcıya HİÇ ULAŞMIYOR: o sınıf yalnız
MAUI kabuğunun koyduğu `portal_kabuk` çerezi varsa ekleniyor (`App.razor:32`).
Yani hedefler mobil UYGULAMADA 48 px, mobil TARAYICIDA 26 px'ti. Kim etkileniyor:
B2B müşteri kendi telefonundan `/musteri/*` ekranlarına tarayıcıyla giriyor
(uygulama zorunlu değil) ve personel de telefon tarayıcısından portala girebiliyor.
⚠ `pointer: coarse` = birincil girdi PARMAK. Fareli masaüstü `fine` kalır — kabuk
kuralının "24 inç ekranda iri düğme doğmasın" gerekçesi korunuyor. Dokunmatik
ekranlı ama fareli dizüstü de `fine` sayılır, etkilenmez.
⚠ Kabuk kuralları KALDIRILMADI, çoğaltıldı. Kabukta pointer zaten `coarse` ve iki
kural aynı değeri veriyor; ama `.kabuk-mobil` seçicisi kabuk davranışının yazılı
sözleşmesi (`TabletYerlesimTests` onu kilitliyor) ve onu bu turda değiştirmek
ölçülmüş bir kazanç olmadan regresyon riski almak olurdu. */
@media (pointer: coarse) {
.mud-button-root,
.mud-icon-button,
.mud-tab,
.mud-input-control .mud-input-slot,
.mud-input-control .mud-select-input,
.mud-input.mud-input-outlined,
.mud-input.mud-input-filled,
.mud-input.mud-input-text {
min-height: 48px;
}
/* İkon düğmesi KARE hedeftir: dar kalan kenar hangisi olursa olsun parmak ıskalar. */
.mud-icon-button {
min-width: 48px;
}
/* Kırıntı yolu: `MudBreadcrumbs` kendi sınıfını kullanıyor, düğme kuralı kapsamıyor. */
.mud-breadcrumb-item a,
.mud-breadcrumb-item li,
.mud-breadcrumbs li > a {
display: inline-flex;
align-items: center;
min-height: 48px;
}
/* Bağlantılar da dokunma hedefi; `inline-flex` metin akışını bozmadan yükseklik verir. */
/* ⚠ IZGARA HÜCRESİ HARİÇ — tablette ölçüldü (04.09.2026): 48 px kuralı satır içi bir
bağlantıya uygulanınca bağlantının HER SARILAN SATIRI 48 px oluyor. Müşteri ünvanı
üç satıra sarınca hücre 140 px, satır 175 px, sayfa 4.920 px. Üstelik `inline-flex`
çocuk, `-webkit-line-clamp` kırpmasını da engelliyordu.
Izgarada dokunma hedefi zaten SATIRIN KENDİSİ (RowClick) ve 48 px üstünde; hücredeki
bağlantıyı ayrıca büyütmek yüksekliği üçe katlamaktan başka bir şey yapmıyor. */
.mud-typography a:not(.mud-table-cell a),
.mud-alert a,
a.mud-link:not(.mud-table-cell a) {
display: inline-flex;
align-items: center;
min-height: 48px;
}
}
/* ---- sayı alanının artır/azalt okları ----
⚠ ÖLÇÜLDÜ (04.09.2026, araç + hedefli DOM teşhisi): dokunmatik bloğu eklendikten
SONRA kalan 12 kritik hedefin tamamı tek çeşit — `MudNumericField`'ın spin okları
(`aria-label="Increment"/"Decrement"`), 24×28 px, dört "yeni kayıt" formunda.
⚠ Yükseklik BÜYÜTÜLMÜYOR, yalnız genişlik. Ölçüm gerekçesi: iki ok ÜST ÜSTE duruyor
ve alanın kendi yüksekliğini paylaşıyor; her birine 48 px vermek alanı 96 px'e
çıkarır ve formu şişirirdi. Genişlik ise bedava: alanın sağında zaten boşluk var.
Parmak yatayda ıskalamaz hâle geliyor, dikeyde iki ok toplamı 56 px.
⚠ DENENDİ ve GERİ ALINDI — kural yazıldı, ÖLÇÜLDÜ, işe yaramadı:
.mud-input-numeric-spin .mud-button-root { min-width: 44px } (özgüllük 0,2,0)
MudBlazor'ın kendi kuralı daha spesifik ve tam tersini söylüyor:
.mud-input-control.mud-input-number-control .mud-input-numeric-spin button
{ padding: 2px 0; min-width: unset; min-height: unset } (özgüllük 0,3,1)
Deploy sonrası ölçümde hedef 24×28'de KALDI (`min-width: auto` hesaplandı), yani
kural sevk edilmiş ama hiçbir şey yapmıyordu. Ölü CSS bırakmak yerine kaldırıldı.
⚠ Aynı özgüllükle yazıp kazanmak MÜMKÜNDÜ, yapılmadı — bedeli ölçüldü: ok kabı da
24 px ve `flex-direction: column`; okları 44 px'e çıkarmak kabı genişletir, kap da
alanın SAĞINDA durduğu için sayı metnine kalan yeri kısaltır. Dört "yeni kayıt"
formundaki 12 hedef için bütün sayı alanlarının düzenini riske atmak, ölçülmüş bir
kazançtan daha pahalı: ok İKİNCİL bir kontrol, alan klavyeyle doldurulabiliyor ve
dokunmatikte sayı tuş takımı zaten açılıyor.
⚠ `::after` ile görünmez hedef genişletme de reddedildi: `getBoundingClientRect`
sözde-öğeyi görmez, yani ölçüm aracı düzelmeyi DOĞRULAYAMAZDI. Ölçülemeyen
düzeltme, "düzeltildi" diye raporlanamaz.
Kalan ölçüm: 12 kritik hedef / 4 rota — hepsi bu okları. Bilinçli borç. */
/* ── SÖZLÜK TERİMİ ────────────────────────────────────────────────────────────
Noktalı alt çizgi, "bu sözcüğün bir açıklaması var" demenin en sessiz yolu:
düzeni bozmaz, rengi kendi metninden alır (koyu modda da doğru), ve imleç
`help` olduğu için fareyle gelen kullanıcıya da haber verir.
⚠ Alt çizgi `currentColor`: ızgara başlığı, form etiketi ve gövde metni farklı
renklerde — sabit bir renk üçünden ikisinde yanlış görünürdü. */
.terim-ipucu {
border-bottom: 1px dotted currentColor;
cursor: help;
}
/* ── UZUN METNİ SATIRLA SINIRLA ───────────────────────────────────────────────
Tablette ölçüldü: /uygunsuzluklar 7.110 px (5,5 ekran). Satır sayısı değil satır
YÜKSEKLİĞİ sorun — 800 px genişliğe yedi sütun sığınca serbest metin sütunu 185 px
kalıyor ve tanım onlarca satıra sarıyor (en uzun satır 654 px).
⚠ Metin KESİLMİYOR: yalnız gösterim kırpılıyor. Tam metin DOM'da kalır, bu yüzden
kopyalama, tarayıcı içi arama ve ekran okuyucu etkilenmez. */
.kisa-metin {
display: -webkit-box;
-webkit-line-clamp: var(--kisa-satir, 2);
line-clamp: var(--kisa-satir, 2);
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
/* ── IZGARA HÜCRESİNDEKİ BAĞLANTININ DOKUNMA HEDEFİ ───────────────────────────
`min-height` + `inline-flex` bu bağlamda yanlıştı: bağlantı sarınca HER SATIRI
48 px oluyor ve hücre 140 px'e çıkıyordu (ölçüldü). Dikey `padding` ise satır
yüksekliğini BÜYÜTMEDEN tıklama kutusunu büyütür — satır içi bir öğede padding
satır kutusunu etkilemez ama isabet alanına ve `getBoundingClientRect`e girer.
Böylece hem 48 px hedef korunur hem sayfa kısalır.
⚠ Yatay padding YOK: bitişik hücrenin tıklamasını çalmasın. */
@media (pointer: coarse) {
.mud-table-cell a.mud-link,
.mud-table-cell .mud-typography a {
padding-block: 14px;
}
}
/* ── IZGARADAKİ EYLEM İKONLARI ALT ALTA DİZİLMESİN ───────────────────────────
Tablette ölçüldü (04.09.2026): dokunmatik yüzeyde her ikon düğmesi 48 px ve eylem
sütunu dar (80 px). Dört düğme alt alta dizilince SATIRIN TAMAMI 205 px oluyordu
(/sistem/belge-sablonlari: 67 satır = 14.078 px). İki düğmede bile satır 109 px.
`white-space: nowrap` düğmeleri yan yana tutuyor; sütun kendi genişliğini ona göre
alıyor. Hedef boyutu KÜÇÜLMÜYOR — yalnız dizilim değişiyor. */
@media (pointer: coarse) {
.mud-table-cell:has(> .mud-icon-button + .mud-icon-button) {
white-space: nowrap;
}
}
/* ── DOKUNMATİKTE SAYI OKLARI GİZLENİR ───────────────────────────────────────
Yukarıdaki blok okları BÜYÜTMEYİ ölçüp reddetmişti: ok kabı alanın sağında ve
genişletmek sayı metnine kalan yeri kısaltıyor. Ama aynı ölçümün içinde cevabı da
yazıyordu — "ok İKİNCİL bir kontrol, alan klavyeyle doldurulabiliyor ve dokunmatikte
sayı tuş takımı zaten açılıyor".
O hâlde dokunmatikte doğru hamle okları büyütmek değil KALDIRMAK: 24×28 pxlik
ıskalanacak hedef yok oluyor, sayı alanı da genişliyor. Fareli masaüstü
(`pointer: fine`) okları aynen görmeye devam ediyor.
⚠ Ölçüldü (04.09.2026): tablette kalan 12 kritik dokunma hedefinin TAMAMI bu oklar
— /basvurular/yeni 4, /faturalar/yeni 4, /aday-musteriler/yeni 2, /musteriler/yeni 2.
⚠ Özgüllük MudBlazor kuralını (0,3,1) geçmek zorunda; bu yüzden aynı zincir. */
@media (pointer: coarse) {
.mud-input-control.mud-input-number-control .mud-input-numeric-spin {
display: none;
}
}
/* ── GEZİNME MENÜSÜ BAĞLANTILARI DA DOKUNMA HEDEFİ ───────────────────────────
🔴 YATAY TABLETTE ÖLÇÜLDÜ (04.09.2026, 1280×800): menü çekmecesi geniş ekranda
KALICI AÇIK duruyor ve 26 `mud-nav-link`in hepsi 260×41 px — Android ölçütünün
7 px altında. 41 rotada 1.014 küçük hedef.
⚠ Bu kusur DİKEY ölçümde hiç görünmüyordu: 800 px genişlikte çekmece kapalı,
yani menü DOM'da ölçülmüyordu. Yalnız bir yönde ölçmek, kusurun yarısını
göremeden "temiz" demektir — yatay tarama tam bunun için eklendi.
⚠ Bedeli ölçüldü ve kabul edildi: 26 bağlantı × 7 px = çekmece ~182 px uzuyor.
Çekmece zaten kendi içinde kayıyor; dokunmatikte ıskalanan menü öğesi daha pahalı. */
@media (pointer: coarse) {
.mud-nav-link {
min-height: 48px;
}
}
/* ── ODAK HALKASI ────────────────────────────────────────────────────────────
🔴 CANLIDA ÖLÇÜLDÜ (05.09.2026): klavyeyle 22 duraktan **21'inde odak halkası YOK**
(`outline-style: none`). Klavye kullanan biri portalda nerede olduğunu göremiyordu —
WCAG 2.4.7 (Focus Visible) ihlali ve Section 508'in temel şartı.
⚠ `:focus` DEĞİL `:focus-visible`: fareyle tıklayan kullanıcıya halka gösterilmez,
yalnız klavye/yardımcı teknoloji ile gelindiğinde çizilir. `:focus` kullanmak her
tıklamada halka bırakır ve ekip bunu "görsel gürültü" diye kapatmaya çalışır.
⚠ Renk TEK KANAL DEĞİL: 3 px kalınlık + 2 px boşluk, halkayı arka plandan bağımsız
olarak ayırıyor. Koyu ve açık temada ayrı renk verilmiyor; `currentColor` metinle
aynı renge düşerdi, bu yüzden vurgu rengi kullanılıyor.
⚠ Özgüllük: MudBlazor kendi düğmelerinde `outline: none` yazıyor; kural onu geçmek
zorunda. Sınıf zinciriyle yazmak yerine öğe türleri sayılıyor — yeni bir MudBlazor
sürümü sınıf adını değiştirse bile kural ayakta kalır. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
outline: 3px solid var(--mud-palette-primary);
outline-offset: 2px;
border-radius: 2px;
}
/* ============================================================================
HAREKET DUYARLILIĞI — prefers-reduced-motion
🔴 Canlıda ölçüldü (05.09.2026, 5 rota, tablet): geçiş süresi sıfırdan büyük
olan öğe sayısı 835 ve `prefers-reduced-motion: reduce` ile AYNI kalıyordu —
yani işletim sistemindeki "hareketi azalt" tercihi portalda hiçbir karşılık
bulmuyordu. Vestibüler bozukluğu olan kullanıcı için bu WCAG 2.3.3 konusudur.
(Mobil kabukta karşılık zaten vardı: açılış şeridi kaymak yerine nabız atıyor.)
⚠ Süre 0 DEĞİL 1 ms: MudBlazor'ın açılır bölümü (`MudCollapse`) yüksekliği
`transitionend` olayında `auto`'ya çeviriyor. 0 ms'de tarayıcı o olayı hiç
üretmez ve bölüm yarı açık kilitlenir — hareketi kaldırmak isterken işlevi
kırardık. 1 ms hem gözle görünmez hem olayı üretir.
⚠ Yükleniyor göstergeleri BİLİNÇLİ olarak dışarıda (portalda 49 kullanım):
dönen halka, işin sürdüğünü söyleyen tek kanal. Donmuş bir göstergeyi kullanıcı
"takıldı" diye okur. WCAG 2.3.3 gereksiz hareketi hedefler, geri bildirimi değil.
Duran şeyler dekoratif olanlar: iskelet parıltısı, diyalog büyümesi, yıl seçici.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 1ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
.mud-skeleton-pulse,
.mud-skeleton-wave::after,
.mud-dialog,
.mud-picker-year-container .mud-picker-year,
[class*="mud-carousel-transition"] {
animation: none !important;
}
}