/* ========================================================================== kabuk.css — ÜRÜNE ÖZGÜ EKLER 🔴 NEDEN AYRI DOSYA, NEDEN app.css'e EKLENMİYOR: app.css prototipten SADIK BİR KOPYADIR ve öyle kalmalı — TasarimSistemiTestleri iki dosyayı karşılaştırıp marka sapmasını ölçüyor. Ürünün ihtiyaç duyduğu ama prototipte karşılığı olmayan sınıflar buraya yazılır; böylece "kopya mı yoksa yeni mi" sorusu dosya adından cevaplanır. ⚠️ BURAYA YAZILAN HER SINIF, PROTOTİPTE OLMAYAN BİR DURUMU ANLATIR. Prototip 33 sayfanın hepsi yazılmış hâlini gösteriyordu; ürün ise modül modül ilerliyor ve "bu ekran henüz yok" diye bir hâli var. ========================================================================== */ /* -------------------------------------------------------------------------- K15 (kullanıcı talebi 2026-10-20, ekran görüntüsüyle) — TARAYICININ ÇİZDİĞİ DENETİMLER TEMAYA UYSUN color-scheme yoktu: koyu temada tarayıcı kaydırma çubuğunu (ve form denetimlerinin yerleşik parçalarını, açılır listeleri) AÇIK renkte, kalın çiziyordu. Şimdi tema tarayıcıya söyleniyor ve çubuk ince; tutamaç --metin-3, iz saydam. Tutamaç zeminle ve yüzeyle iki temada da ≥ 3:1 (WCAG 1.4.11 — açık 3,01–3,21 · koyu 3,8–4,5; --cizgi-guclu koyu temada 1,5'te kalıyordu). Ölçüt kaydirma-cubugu tarayıcı paketinde. scrollbar-color MİRAS alınır (kökte bir kez); scrollbar-width alınmaz, bu yüzden her öğeye (*) — kendi değerini veren sınıf kuralı (ör. .ig-kaydirici__serit { scrollbar-width: none }) özgüllüğüyle onu ezer. data-tema html'in kendisinde: [data-tema="koyu"] kökü de seçiyor, yani var(--metin-3) kökte koyu temanın değeriyle çözülüyor. -------------------------------------------------------------------------- */ :root { color-scheme: light; scrollbar-color: var(--metin-3) transparent; } [data-tema="koyu"] { color-scheme: dark; } * { scrollbar-width: thin; } /* -------------------------------------------------------------------------- HENÜZ YAZILMAMIŞ MENÜ MADDESİ Bağlantı DEĞİL olarak çiziliyor (bkz. _Kenar.cshtml): tıklanamaz, sekmeyle odaklanılamaz, ekran okuyucuya bağlantı diye duyurulmaz. Görsel olarak da farklı olmalı — aynı görünüp tıklanmayan bir madde, kullanıcının bozuk sandığı bir arayüz üretir. -------------------------------------------------------------------------- */ .kenar__link--yakinda { /* K22 (2026-10-23): opacity .55 kalktı — soluk metin AA'nın altındaydı (2,16) ve bu bir kontrol değil, WCAG'nin "etkin olmayan kontrol" istisnası uymuyor. Durumu "Yakında" rozeti söylüyor; renk üçüncül metin (iki temada AA). */ color: var(--metin-3); cursor: default; } .kenar__link--yakinda:hover { /* Vurgu YOK: hover tepkisi "tıklanabilir" sinyalidir ve burada yalan olur. */ background: transparent; color: inherit; } .kenar__link--yakinda .kenar__rozet { /* Modül numarası rozeti: "yakında" demek yetmez, NE ZAMAN sorusunun cevabı da ekranda olmalı (Faz 4'ün "neden kapalı ve nerede açılıyor" kuralının menüdeki hâli). */ margin-inline-start: auto; font-size: 10px; letter-spacing: .03em; font-family: var(--font-mono); } /* Kenar çubuğu kredi kutusu (.kenar__kredi) 2026-10-20'de KALDIRILDI — kullanıcı kararı (K16): yerine menüde "Kullanım" sayfası (Plan/paket-kullanim-tanitim.md). */ /* -------------------------------------------------------------------------- AÇILIR MENÜNÜN BOŞ DURUMU Bildirim menüsü bugün boş (kayıtlar Modül 18). Boş bir kutu açmak "bozuk mu?" sorusunu doğurur; boş durum NE OLDUĞUNU ve NE ZAMAN dolacağını söylemeli — prototipin Faz 7'de kapattığı "sessiz boş durum" bulgusunun aynısı. -------------------------------------------------------------------------- */ .menu__bos { padding: var(--b-3) var(--b-4) var(--b-4); font-size: var(--ts-sm); color: var(--metin-2); line-height: 1.5; max-width: 260px; } .menu__bos .minik { display: block; margin-top: 4px; } /* PLAN 6.15 DİLİM 4 — zil menüsündeki işlem mesajı ("tümünü okundu say" sayfa yenilenmeden). Menü dar; kutu menünün başlığıyla aynı iç boşlukta ve boş durum metninin genişliğinde kalıyor. */ .menu__mesaj { padding: var(--b-1) var(--b-2) 0; max-width: 280px; } /* -------------------------------------------------------------------------- ÜST BARDAKİ TEMA FORMU Tema düğmesi bir
içinde (JavaScript kapalıyken de çalışsın diye). Form varsayılan olarak blok öğedir ve üst bar hizasını bozar. -------------------------------------------------------------------------- */ .ust__sag form { display: inline-flex; margin: 0; } /* -------------------------------------------------------------------------- TEMA İKONU İki ikon da çiziliyor, görüneni CSS seçiyor (bkz. _UstBar.cshtml). Böylece ikon temayla AYNI ANDA değişiyor; JavaScript'in SVG kurması gerekmiyor ve anti-flash bloğuyla çelişki doğmuyor. Koyu temadayken "güneş" (açığa geç), açık temadayken "ay" (koyuya geç). -------------------------------------------------------------------------- */ .tema-ikon { display: none; } [data-tema="koyu"] .tema-ikon--gunes { display: inline-flex; } [data-tema="acik"] .tema-ikon--ay { display: inline-flex; } /* data-tema hiç yoksa (JS ve çerez ikisi de devre dışı) bir ikon görünmeli; aksi hâlde düğme bomboş bir kare olur. */ html:not([data-tema]) .tema-ikon--gunes { display: inline-flex; } /* Giriş ekranının dil seçicisi. Kartın ÜSTÜNDE ve sağa yaslı: formun akışını kesmiyor ama arayanın ilk baktığı yerde (sağ üst) duruyor — kabuktaki dil düğmesiyle aynı konum alışkanlığı. */ .auth__dil { display: flex; gap: var(--b-1); justify-content: flex-end; margin-bottom: var(--b-3); } .auth__dil [aria-current="true"] { color: var(--marka-metin); font-weight: 600; } /* ---------- MODUL 9: sunucu tarafinda cizilen sekmeler ---------- app.css `.sekme[aria-selected="true"]` bekliyor cunku prototipte sekmeler JS ile yonetilen