/* ============================================================================================ TEMAYA KÖPRÜ (docs/YAPILACAKLAR.md §23) ============================================================================================ Bu dosyanın kendi renkleri VARDI ve hepsi değişkendi (--arka, --kart, --vurgu...). Artık o değişkenler AppDashboard'un belirteçlerine bağlanıyor. NEDEN BÖYLE, neden 18 ekran yeniden yazılmadı: 1. Ekranların İŞARETLEMESİNE HİÇ DOKUNULMUYOR. Bu depoda ekran düzeni birer karardır — form sağda durur (0.65.0), plan ekranı üç sütunludur, sınırsız limitler adıyla sayılır (0.66.0). Üçü de DÜZELTİLMİŞ KUSUR; yeniden yazılan bir işaretlemede sessizce düzleşirlerdi. 2. KARANLIK KİP KENDİLİĞİNDEN GELİYOR. Tema kendi belirteçlerini [data-theme=dark] altında çeviriyor; buradaki değişkenler onlara baktığı için bütün ekranlar birlikte dönüyor. Elle yazılmış renklerle bu, ekran ekran ikinci bir palet yazmak olurdu. ⚠ AMA YALNIZ DEĞİŞKENLER DÖNER. Sabit yazılmış bir renk bu köprüyü hiç görmez ve koyu kipte olduğu gibi kalır; alt bilgi zemini (`.alt`) tam olarak böyle kaçmıştı. Buraya yeni bir renk yazarken kural: değişken yoksa önce değişkeni ekle. (Seçici burada bir süre [data-bs-theme=dark] diye yazılıydı — yanlıştı; temanın kullandığı ad [data-theme=dark]. 09.09.2026'da tarayıcıda ölçülüp düzeltildi.) 3. Geri dönüşü ucuz: bu blok eski sabit renklere çevrilirse portal eski görünümüne döner. Aşağıdaki eşleşme SIRALAMASI önemli: tema main.css'ten SONRA yükleniyor (App.razor), yani burada tanımlanan değerler kazanır. */ :root { /* Yüzeyler */ --arka: var(--background-color); --kart: var(--surface-color, var(--card-bg)); --cizgi: var(--border-color); --golge: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, .08)); /* Yazı */ --yazi: var(--default-color); --soluk: var(--muted-color, #6b7280); /* Vurgu — marka rengi TEK yerden döner (§23: dört depoda aynı olması beklenen üç seçimden biri). Buradaki iki satır değişince düğmeler, bağlantılar ve etkin menü birlikte döner. */ --vurgu: var(--accent-color); --vurgu-koyu: var(--accent-color); /* Durum renkleri. Tema bunları "light" varyantlarıyla birlikte veriyor; uyarı kutularının zemini o açık tonlardan, çizgisi ana tondan geliyor. */ --basari-arka: var(--success-color-light); --basari-cizgi: var(--success-color); --hata-arka: var(--danger-color-light, #fef2f2); --hata-cizgi: var(--danger-color, #ef4444); /* 08.09.2026'da eklendi. Bu üçü köprüde YOKTU ve app.css'te sabit açık renkler (#fff, #fffbeb, #eef2ff) duruyordu; henüz temaya geçmemiş ekranlarda karanlık kip kırıktı — form alanları bembeyaz, etiketler okunmaz. */ --girdi-arka: var(--input-bg, var(--surface-color)); --uyari-arka: var(--warning-color-light); --uyari-cizgi: var(--warning-color); --vurgu-arka: var(--accent-color-light, var(--info-color-light)); /* Kenar menü artık temanın kabuğunda; bu ikisi yalnız eski kurallar için duruyor. */ --kenar-arka: var(--sidebar-bg); --kenar-yazi: var(--sidebar-text); } /* Gövde arka planını ve yazı tipini TEMA belirliyor. Buradaki eski kural onu eziyordu: html/body'ye sabit bir arka plan verilince karanlık kipte sayfa aydınlık kalıyordu. */ * { box-sizing: border-box; } html, body { margin: 0; /* font-family, background ve color TEMADAN gelir — burada tekrar tanımlanırsa karanlık kip çalışmaz ve tema yazı tipi (Geist) devre dışı kalır. */ } /* Kenar menü */ /* Menü grubu başlığı (Şablonlar) — tıklanmaz, yalnız ayırır. */ /* Alt menü öğesi (Şablonlar grubunun altındakiler). SINIF ADI "alt" DEĞİL "alt-menu" — bilerek. Bir zamanlar "alt"tı ve sayfa ALT BİLGİSİNİN sınıfıyla (`.alt { background: #fff }`) çakışıyordu: aynı ad iki ayrı anlamda kullanılmıştı (sayfanın altı / menünün altı). Alt bilgi kuralı CSS'te sonra geldiği için koyu kenar çubuğundaki alt menü öğelerine BEYAZ zemin basıyordu; yazı da neredeyse beyaz olduğu için seçili olmayan öğeler görünmez oluyordu (v0.54.0'dan beri, 04.08.2026'da düzeltildi). Ölçülen değerler: zemin rgb(255,255,255), yazı rgb(229,231,235). */ /* İçerik */ /* Gövde dikey kolon: içerik esner, alt bilgi altta kalır — sayfa kısa olduğunda da ekranın altına yapışır, uzun olduğunda içeriğin peşinden gelir (sabit değil, yapışkan). */ .govde { flex: 1; display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; display: flex; justify-content: center; } /* GENİŞLİK SINIRI 1180 → 1600 (04.08.2026). 1180 dar bir ekrana göre seçilmişti; geniş monitörde iki yanda ~450px boş dururken Ürünler tablosu yatay kaydırmaya zorlanıyordu — yani boş yer varken içerik sıkışıyordu. Sınır TAMAMEN kaldırılmadı: sınırsız genişlikte bir metin satırı okunmaz olur, göz satır sonundan bir sonrakinin başına dönemez. Geniş olması gereken şey TABLO, paragraf değil; bu yüzden kap genişledi ama düz metin aşağıda ayrıca sınırlandı. */ .icerik { width: 100%; max-width: 1600px; padding: 32px 36px; } /* Sayfanın DOĞRUDAN altındaki paragraflar (başlık altı açıklamalar) okunur uzunlukta kalır. Kutu içindeki metinler zaten kutunun genişliğiyle sınırlı. */ .icerik > p { max-width: 100ch; } /* Alt bilgi */ /* ZEMİN DEĞİŞKEN OLMALI, sabit değil. Burada `#fff` yazılıydı ve §23 köprüsü onu atladı: köprü değişkenleri temaya bağlıyor, SABİT renkleri göremiyor. Sonuç koyu kipte `rgb(14,21,36)` sayfanın altında `rgb(255,255,255)` bir şerit — üstelik `.alt-firma` `var(--yazi)` olduğu için beyaz zemine `rgb(216,224,231)` yazıyordu, yani firma adı neredeyse görünmezdi (09.09.2026'da ölçüldü, kullanıcı bildirdi). Kusur v0.70.0'da doğdu: tema geçişinde `.sade-govde .alt { background: #111827 }` ve kardeşleri silindi — silinmeleri DOĞRUYDU, o sarmalayıcı kalkmıştı — ama temel kuraldaki sabit beyaz değişkene çevrilmedi. Koyu kip yalnız giriş ekranında ele alınmıştı; tema koyu kipi HER ekrana getirince aynı satır her ekranın altında kusur oldu. `--kart` seçildi, `transparent` değil: açık kipte `#ffffff` verir, yani bugünkü görünüm BİREBİR korunur (alt bilgi sayfadan ayrı bir yüzeydir, bu bilinçliydi); koyu kipte `#182235` ile aynı ayrımı sürdürür. */ .alt { border-top: 1px solid var(--cizgi); background: var(--kart); padding: 14px 36px; } .alt-icerik { max-width: 1600px; /* içerikle AYNI: farklı olsaydı alt bilgi sayfayla hizalanmazdı */ margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 13px; color: var(--soluk); } .alt-firma { font-weight: 600; color: var(--yazi); } .alt-firma a { margin-left: 8px; font-weight: 400; } .alt-eposta { display: flex; flex-wrap: wrap; gap: 6px 16px; } .alt a { color: var(--soluk); text-decoration: none; } /* Vurgu da değişken: aynı ailedendi, aynı sebeple sabit kalmıştı. */ .alt a:hover { color: var(--vurgu); text-decoration: underline; } /* Sürüm sağa itilir; ekran darsa alta düşer. */ .alt-surum { margin-left: auto; font-variant-numeric: tabular-nums; } h1 { font-size: 26px; margin: 0 0 22px; } h2 { font-size: 18px; margin: 28px 0 14px; } /* Uzun metin alanı satırın TAMAMINI kaplar. Sınıf üç ekranda (Limit/Özellik/Mesaj şablonları) yazılıydı ama CSS'te KARŞILIĞI YOKTU: iki sütunlu ızgarada konu ve gövde yarım genişlikte sıkışıyor, sağ yarı boş duruyordu. 04.08.2026'da portal yerelde ilk kez açıldığında görüldü. */ /* textarea da hiç biçimlenmemişti; input'un ikizi olsun (tarayıcı öndeğeri daracık ve yazı tipi UI'dan kopuktu). Alanların kendisi artık temanın `.form-control`ü; burada yalnız şablon gövdesinin EŞ ARALIKLI yazı tipi kaldı. */ /* Şablon gövdesi EŞ ARALIKLI: metindeki girinti (ör. kodun etrafındaki boşluk) müşteriye nasıl gidiyorsa ekranda da öyle görünsün. */ textarea.sablon-govde { font-family: "Consolas", monospace; font-size: .9em; } /* Butonlar VE buton görünümlü bağlantılar () aynı temeli paylaşır. */ button:disabled { opacity: .6; cursor: default; } /* Uyarılar */ /* Numara vurgusu */ .numara { font-family: "Consolas", "SF Mono", monospace; font-weight: 700; letter-spacing: .5px; background: #eef2ff; padding: 2px 8px; border-radius: 5px; color: var(--vurgu-koyu); user-select: all; /* NUMARA BÖLÜNMEZ. "M 1000-0020" dar sütunda "M 1000-" / "0020" diye iki satıra kayıyordu (04.08.2026). Numara bir KİMLİKtir; ortadan bölünmüş hâli okunurken de kopyalanırken de yanlış anlaşılır, üstelik tirenin satır sonu mu yoksa numaranın parçası mı olduğu belirsizleşir. Aynı kural lisans no ve aktivasyon kodu için de geçerli — hepsi bu sınıfı kullanıyor. */ white-space: nowrap; } /* Numara sütunu daralmaz; yer sıkışırsa METİN sütunları verir. Numaranın genişliği sabittir ve bilinir, unvan ise zaten değişken uzunlukta — kırpılacaksa o kırpılmalı. */ .numara-buyuk { font-family: "Consolas", "SF Mono", monospace; font-size: 26px; font-weight: 700; color: var(--vurgu-koyu); background: #eef2ff; display: inline-block; padding: 6px 16px; border-radius: 8px; user-select: all; margin-bottom: 20px; } /* Liste */ tr.tiklanir { cursor: pointer; } tr.tiklanir:hover { background: #f9fafb; } /* Numara bağlantısı: numara rozetini tıklanabilir link yapar */ .numara-link { text-decoration: none; } .numara-link:hover .numara { background: var(--vurgu-arka); text-decoration: underline; } /* Detay */ dl.ozet { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; margin: 0 0 10px; } dl.ozet dt { color: var(--soluk); font-weight: 600; } dl.ozet dd { margin: 0; } /* Lisans üret ekranı */ h3 { font-size: 15px; margin: 20px 0 10px; } /* Limitler: [onay] [ad] [değer] üç sütun. IZGARA SATIRDA DEĞİL LİSTEDE (11.08.2026): her satır kendi ızgarası olsaydı sütunlar satırlar arasında hizalanmaz, hizalamak için ad sütununa 1fr vermek gerekirdi — o da kalan bütün genişliği yutup değer kutusunu sağa fırlatıyordu (kullanıcı bildirdi). Satırlar `display: contents` ile üst ızgaraya katılıyor: ad sütunu `max-content` ile EN UZUN ada göre ölçülüyor, hizalama korunuyor ve artık boşluk kalmıyor. Öncesinde ad bir içindeydi ve ona genişlik veriliyordu; satır içi olduğu için genişlik yok sayılıyor, onay kutusu ile ad alt alta düşüyordu. */ .limit-liste { /* İlk sütun 2,25rem: anahtar (2em) + nefes payı. Onay kutusundayken `auto` yetiyordu; anahtar daha geniş ve `auto` ile satırlar arasında bir piksel kayıyordu. */ display: grid; grid-template-columns: 2.25rem max-content 130px; justify-content: start; align-items: center; gap: 10px 12px; margin-bottom: 16px; } .limit-satir { display: contents; font-weight: 400; } .limit-ad { color: var(--yazi); } .limit-satir input[type="checkbox"] { margin: 0; } .limit-satir input[type="number"] { width: 130px; } /* İşaretsiz limit SINIRSIZ demektir; kutusu da öyle görünsün — soluk ve dokunulmaz. */ .limit-satir input[type="number"]:disabled { background: var(--arka); color: var(--soluk); } .baslik-satir { display: flex; justify-content: space-between; align-items: center; } .kod-kutu { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 10px; padding: 22px 24px; box-shadow: var(--golge); margin-top: 8px; } .numara-buyuk.kod { font-size: 32px; letter-spacing: 2px; margin: 10px 0; } /* Durum rozeti */ .makine { font-family: "Consolas", monospace; font-size: .85em; color: var(--soluk); } .soluk-kod { color: var(--soluk); font-family: "Consolas", monospace; font-size: .85em; } /* Lisans detayı: limit listesi ve özellik çipleri */ ul.etiket-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; } ul.etiket-liste li { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 8px; padding: 8px 14px; display: flex; gap: 10px; align-items: baseline; } ul.etiket-liste li span { color: var(--soluk); } ul.etiket-liste li strong { font-size: 1.1em; color: var(--vurgu-koyu); } /* Hak dolu: yeni aktivasyon reddedilecek — bir bakışta görünsün. */ ul.etiket-liste li.dolu { background: var(--hata-arka); border-color: #fecaca; } ul.etiket-liste li.dolu strong { color: var(--hata-cizgi); } /* Sunucu teması durumu (§14.8): düzenli sessizdir, yalnız sorun renklenir. */ .temas { font-size: .9em; color: var(--soluk); } .temas.sari { color: #b45309; font-weight: 600; } .temas.kirmizi { color: var(--hata-cizgi); font-weight: 600; } /* Liste üstü filtre (Lisanslar'da ürün seçimi) */ /* Çoklu seçim: açılır listeden seçilen özellikler etiket olarak birikir (§14.11) */ /* .cip-secili ve .cip-sil 08.09.2026'da silindi: çıkarılabilir etiketler artık temanın kendi bileşeninde (OzellikSecici.razor → .choices__item / .choices__button). .cip DURUYOR ve bilerek FARKLI görünüyor: lisans detayında özellikler yalnız GÖSTERİLİYOR, çıkarılamıyor. Dolu mavi pil "bunu kaldırabilirsin" der; oradaki soluk pil ise okunacak bir bilgidir. İkisini aynı yapmak, tıklanamayan bir şeyi tıklanabilir gibi göstermek olurdu. */ .cip-satiri { margin: 8px 0 4px; min-height: 28px; align-items: center; } .cip-satiri { display: flex; flex-wrap: wrap; gap: 8px; } .cip { background: var(--vurgu-arka); color: var(--vurgu); border-radius: 14px; padding: 4px 12px; font-size: .9em; font-weight: 600; } /* ---- Lisans detayı ve Lisans üret (12.09.2026 yeniden düzen) ------------------------------ Solda içerik, sağda YAPIŞKAN özet + işlemler. Aynı sınıflar iki ekranda: detayda kayıt, üretimde form — kullanıcı ikisinin aynı görünmesini istedi. Eşik `.uc-sutun.form-sagda` ile aynı mantık: içerik alanına bakar (container query), pencereye değil. Dar ekranda tek sütun ve yan sütun ÜSTE geçer — kimlik önce, içerik sonra; yapışkanlık kalkar (tek sütunda yapışsaydı özet ekranın yarısını kaplar, içeriği gizlerdi). */ /* Temanın `body { overflow-x: hidden }` kuralı body'yi KAYDIRMA KUTUSU yapar (overflow visible olmayan her kutu öyledir); yapışkan öğe en yakın kaydırma kutusuna göre yapışır, body'nin kendi içi hiç kaymadığı için hiçbir zaman yapışmaz — 12.09.2026'da bir saat aradık. `clip` aynı işi (yatay taşmayı kesmek) kaydırma kutusu yaratmadan yapar. Yalnız body; html'deki aynı kural pencereyi etkilemiyor, pencere zaten kaydırıcı. */ body { overflow-x: clip; overflow-y: visible; } .lisans-detay { display: grid; gap: 18px; align-items: start; grid-template-columns: minmax(0, 1fr); } .lisans-detay > * { min-width: 0; } .lisans-detay-ana { display: flex; flex-direction: column; gap: 18px; } .lisans-detay-yan { order: -1; display: flex; flex-direction: column; gap: 18px; } @container (min-width: 960px) { .lisans-detay { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); } .lisans-detay-yan { order: 0; position: sticky; top: 16px; } } /* Liste varyantı (Kurulumlar): tablo sekiz sütun, iki sütun ancak geniş içerikte; yan sütun daha dar. Dar ekranda yan sütun (sayaçlar) yine üste geçer. */ @container (min-width: 1100px) { .lisans-detay.liste { grid-template-columns: minmax(0, 1fr) 280px; } } @container (max-width: 1099.98px) { .lisans-detay.liste { grid-template-columns: minmax(0, 1fr); } /* Yan sütun ÇÖZÜLÜR (display: contents): iki kartı ızgaranın doğrudan çocuğu olur ve ayrı sıralanır — sayaçlar üstte yatay dörtlü (eski görünüm), kademe kararı listenin ALTINDA. Yan sütun bütünüyle üste alınsaydı liste 800px aşağı kalırdı (1366px'te ölçüldü). */ .lisans-detay.liste > .lisans-detay-yan { display: contents; } .lisans-detay.liste .sayac-karti { order: -1; } .lisans-detay.liste .kademe-karti { order: 1; } .lisans-detay.liste .sayac-listesi { flex-direction: row; flex-wrap: wrap; } .lisans-detay.liste .sayac-listesi .invoice-stat-card { flex: 1 1 200px; border-bottom: 0; } } /* Sayaçlar yan sütunda dikey; temanın stat kartı yatay kutu, burada sadece üst üste diziliyor. */ .sayac-listesi { display: flex; flex-direction: column; } .sayac-listesi .invoice-stat-card { border: 0; border-bottom: 1px solid var(--cizgi); border-radius: 0; box-shadow: none; padding: 12px 16px; } .sayac-listesi .invoice-stat-card:last-child { border-bottom: 0; } /* Yan sütundaki özet: dar sütunda etiket sütunu 130px fazla, 118px yeter; satır arası sık. */ .lisans-detay-yan dl.ozet { grid-template-columns: 118px 1fr; gap: 6px 12px; margin: 0; font-size: .95em; } .lisans-detay-yan dl.ozet dd { overflow-wrap: anywhere; } /* Kapsam: limitler / özellikler / seçimler yan yana; dar kartta alt alta iner. */ .kapsam { display: grid; gap: 22px 28px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .kapsam > * { min-width: 0; } /* Üretim formundaki kapsam: limit satırı (anahtar + ad + 130px sayı) 230px'e sığmaz; sütun tabanı 300px, geniş ekranda üç, dizüstünde iki sütun. */ .kapsam.kapsam-genis { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .kapsam .limit-liste { margin-bottom: 10px; } .kapsam-baslik { font-size: .95rem; font-weight: 600; margin: 0 0 10px; } .kapsam-baslik small { color: var(--soluk); font-weight: 400; font-size: .85em; margin-left: 6px; } .kapsam .cip-satiri { margin: 0; } .secim-grubu + .secim-grubu { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cizgi); } .secim-grubu .cip-satiri { margin-top: 6px; } /* Katlanır blok kartlar arasında kendi boşluğunu getirmesin; ızgara aralığı yeter. */ .lisans-detay-ana > details.katlanir { margin-top: 0; } /* Lisans işlemleri (uzat/iptal). Lisans detayı 12.09.2026'da bundan çıktı (düğmeler yan sütuna, diyaloglar modala); Abonelik detayı hâlâ kullanıyor. */ .islemler { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 6px; } .islemler > button { align-self: flex-start; } button.kucuk { padding: 5px 12px; font-size: .85em; margin-right: 6px; } .ikincil.kucuk.tehlike { color: var(--hata-cizgi); border-color: #fecaca; } /* İptal edilmiş abonelik: belirgin şerit ve soluk satır */ .iptal-serit { background: var(--hata-arka); border: 1px solid var(--hata-cizgi); color: #b91c1c; font-weight: 700; padding: 12px 16px; border-radius: 8px; margin: 14px 0 4px; } /* Hatırlatma kuralları */ /* Çevrimdışı takas: uzun tek satırlık metinler (istek ve lisans dosyası) buraya yapıştırılır. */ a.buton-link { text-decoration: none; display: inline-block; } /* Serbest bırakılmış kurulum satırı: listede kalır ama geri planda durur. */ /* Numara kopyalama düğmesi: numaranın yanında durur, dikkat çalmaz. */ button.kopyala { padding: 3px 10px; font-size: .78em; margin-left: 10px; vertical-align: middle; background: #fff; border: 1px solid var(--cizgi); color: var(--soluk); border-radius: 6px; cursor: pointer; } button.kopyala:hover { border-color: var(--vurgu); color: var(--vurgu); } button.kopyala.hata { border-color: var(--hata-cizgi); color: #b91c1c; } /* Giriş ve ilk kurulum ekranı: menüsüz, ortalanmış tek kutu — düzeni artık TEMA veriyor, burada kuralı yok. Burada iki YETİM YORUM duruyordu: anlattıkları kurallar (`.sade-govde …`) v0.70.0'da silinmiş, yorumlar kalmıştı. İkincisi *"beyaz bir şerit sayfayı ikiye bölerdi"* diyordu ve tam olarak o oldu — kural gidince uyarı, tarif ettiği kusurun üstünde asılı kaldı. Alt bilginin koyu kip zemini artık `.alt`'ta değişkenden geliyor (yukarı bak). */ /* Menü altındaki oturum satırı. */ .oturum form { margin-top: 8px; } .oturum button:hover { border-color: #60a5fa; color: #fff; } /* ---- İki sütun düzeni ------------------------------------------------------------------ Dar ekranda kendiliğinden tek sütuna iner: sütunları piksel yerine oranla veriyoruz ve minmax ile taşmayı engelliyoruz. Sabit genişlik verilseydi dizüstü ekranlarda yatay kaydırma çıkardı. */ .iki-sutun { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; align-items: start; } /* TAŞMA KORUMASI — bunsuz geniş bir tablo komşu sütunun ALTINA giriyordu (04.08.2026, Ürünler ekranında görüldü). Sebep: grid hücresinin öntanımlı `min-width` değeri `auto`dur, yani hücre içeriğinden daha dar olamaz; 1fr yerine içeriğin genişliği kazanır ve fazlası dışarı taşar. `min-width: 0` hücreye "daralabilirsin" der. */ .iki-sutun > *, .sutun > * { min-width: 0; } /* Geniş tablolar kutunun içinde YATAY KAYAR — sayfayı kaydırmaz, komşusunu ezmez. */ .liste-kaydir { overflow-x: auto; } /* KAPSAYICI SORGULARIN DAYANAGI (§23, 05.09.2026). Asagidaki uc/iki sutun kurallari PENCERE genisligine bakiyordu (1450/1100). O esikler eski kabuga gore ayarlanmisti: kenar cubugu 230px'ti. Tema geldi, kenar cubugu 292px oldu ve ayni pencerede ICERIK 62px daraldi -- yani esikler kaymis oldu, kimse dokunmadan. Kurallar artik ICERIK ALANINA bakiyor; kabuk bir daha degisirse kendiliginden dogru kalir. */ .main { container-type: inline-size; } /* Solu geniş varyant: bir yanda geniş tablo, öbür yanda dar form olan ekranlar için (Ürünler). Eşit bölünseydi altı sütunlu tablo dizüstü ekranda sığmazdı. Dar ekranda tek sütuna iner. */ .iki-sutun.genis-sol { grid-template-columns: minmax(0, 1fr); } @container (min-width: 870px) { .iki-sutun.genis-sol { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } } /* Solu DAR varyant: solda seçim (ürün, şablon), sağda seçilenin sayfası. Şablon ekranlarının üçü de bu düzende (11.08.2026). Dar ekranda tek sütuna iner ve seçim üstte kalır — okuma sırası bozulmaz. */ .iki-sutun.dar-sol { grid-template-columns: minmax(0, 1fr); } @container (min-width: 870px) { .iki-sutun.dar-sol { grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); } } /* ÜÇ SÜTUN: ürün → o ürünün şablonları → seçilen şablonun değerleri (Plan Şablonları). Seçim zinciri soldan sağa akar; her tık bir sonraki sütunu doldurur. Dar ekranda kademeli iner: İÇERİK 1220px'in altına düşünce form ALT SATIRA geçip tam genişlik alır (uzun bir formu 300px'e sıkıştırmak, üç sütunu korumaktan kötüdür), 870'in altında üçü de alt alta gelir ve okuma sırası seçim sırasıyla aynı kalır. Ölçü PENCERE değil İÇERİK: eski 1450/1100 eşikleri kenar çubuğu 230px'ken doğruydu; tema onu 292px yapınca aynı pencerede içerik daraldı ve eşikler sessizce kaydı. */ .uc-sutun { display: grid; gap: 18px; align-items: start; grid-template-columns: minmax(0, 1fr); } @container (min-width: 870px) { .uc-sutun { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); } .uc-sutun > .form-sutunu { grid-column: 1 / -1; } } @container (min-width: 1220px) { .uc-sutun { grid-template-columns: minmax(200px, 250px) minmax(230px, 320px) minmax(0, 1fr); } .uc-sutun > .form-sutunu { grid-column: auto; } } /* ÜÇ SÜTUN, FORMU SAĞDA: solda ürün, ORTADA geniş liste, sağda ekleme formu (Limit ve Özellik Şablonları). `.uc-sutun`un tersi: orada geniş sütun sonda, burada ortada. NEDEN AYRI SÜTUN: form listenin ALTINDAYDI ve her eklemeden sonra liste bir satır uzayıp formu aşağı itiyordu — kullanıcı her özellikte sayfayı yeniden kaydırmak zorunda kalıyordu (23.08.2026, sahada görüldü). Sabit bir sütunda form yerinden kıpırdamaz. Dar ekranda `.uc-sutun` ile aynı kademeler: içerik 1220px'in altında form alt satıra geçip tam genişlik alır, 870'in altında üçü de alt alta gelir ve okuma sırası seçim sırasıyla aynı kalır. */ .uc-sutun.form-sagda { grid-template-columns: minmax(0, 1fr); } @container (min-width: 870px) { .uc-sutun.form-sagda { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); } .uc-sutun.form-sagda > .form-sutunu { grid-column: 1 / -1; } } @container (min-width: 1220px) { .uc-sutun.form-sagda { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(280px, 340px); } .uc-sutun.form-sagda > .form-sutunu { grid-column: auto; } /* Sütun daraldığı AN kod ve ad alt alta insin; yan yana 340px'e sığmazlar. Alt satıra geçtiği genişliklerde (içerik 1220 altı) form tam genişlik olduğu için ikili düzen kalır. */ } /* Uzun seçim listesi (müşteriler) kendi içinde kayar; sayfa uzayıp sağdaki sütunu erişilmez yapmasın. Ürün/şablon listeleri kısa olduğu için onlarda gerekmiyor. */ /* Sağ sütunda "henüz seçilmedi" hâli: boş bir kutu yerine ne yapılacağını söyleyen bir cümle. */ .secim-bekleniyor { padding: 40px 24px; text-align: center; color: var(--soluk); } /* Sütun içinde üst üste duran kutular arasındaki boşluk, sütunlar arasıyla aynı olsun. */ .sutun { display: flex; flex-direction: column; gap: 18px; } /* Grid hücresi içindeki kutu, üstten fazladan boşluk almasın. */ .iki-sutun > .ekle-kutu, .sutun > .ekle-kutu { margin-top: 0; } .iki-sutun h2:first-child, .sutun h2:first-child { margin-top: 0; } /* ---- Katlanır bölüm --------------------------------------------------------------------
/ ile: JavaScript yok, tarayıcı kendi yapıyor ve `open` yazılmadığı sürece KAPALI açılıyor. */ details.katlanir { margin-top: 22px; } details.katlanir > summary { cursor: pointer; font-size: 18px; font-weight: 600; padding: 12px 16px; background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; list-style: none; user-select: none; } details.katlanir > summary::-webkit-details-marker { display: none; } details.katlanir > summary::before { content: "▸ "; color: var(--soluk); } details.katlanir[open] > summary::before { content: "▾ "; } details.katlanir[open] > summary { border-radius: 10px 10px 0 0; border-bottom: none; } details.katlanir > .katlanir-icerik { background: #fff; border: 1px solid var(--cizgi); border-top: none; border-radius: 0 0 10px 10px; padding: 16px; } /* ============================================================================================ KENAR ÇUBUĞU — JS'SİZ AÇ/KAPA (§23) ============================================================================================ Temanın main.js'i bu işi yapıyordu; kullanıcı kararıyla temanın JS'leri kullanılmıyor. Yerine gizli bir onay kutusu geçti (MainLayout'taki #kenar-ac). NEDEN BLAZOR DURUMU DEĞİL: bu düzeni STATİK işlenen sayfalar da kullanıyor (giriş, genel bakış). Orada etkileşimli devre yok, yani @onclick hiç çalışmazdı. CSS her ikisinde de çalışır ve devre kurulmadan önce de hazırdır. */ .kenar-anahtar { position: absolute; opacity: 0; pointer-events: none; } /* Perde yalnız dar ekranda ve yalnız menü açıkken var. */ .kenar-perde { display: none; } @media (max-width: 991.98px) { .kenar-anahtar:checked ~ .sidebar { transform: translateX(0); } .kenar-anahtar:checked ~ .kenar-perde { display: block; position: fixed; inset: 0; z-index: 1039; /* kenar çubuğunun ALTINDA, ötekilerin üstünde */ background: rgba(0, 0, 0, .45); } } /* Geniş ekranda menü hep açık; onay kutusunun bir hükmü yok. Etiketler de görünmez — basılacak bir şey olmaması, basıldığında hiçbir şey olmamasından iyidir. */ @media (min-width: 992px) { .sidebar-toggle, .sidebar-close { display: none; } } /* Etiket düğme gibi davransın: tema `.sidebar-toggle`ı