/* -------------------------------------------------------------------------- 6 · FORM -------------------------------------------------------------------------- */ input, select, textarea { height: var(--row-h); padding: 0 10px; font: inherit; font-size: var(--yazi-md); color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); } textarea { height: auto; padding: 8px 10px; line-height: 1.5; } input::placeholder, textarea::placeholder { color: var(--faint); } input:disabled, select:disabled { color: var(--faint); background: var(--panel-2); } input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); } input[type="search"], .metod-ara { min-width: 220px; } .mini-num { width: 78px; text-align: right; } .salt-okunur { display: flex; align-items: center; justify-content: flex-end; height: var(--row-h); padding: 0 10px; font-weight: 700; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); } /* Etiket + alan grubu */ .stok-form label, .alan { display: flex; flex-direction: column; gap: 5px; font-size: var(--yazi-xs); font-weight: 700; letter-spacing: var(--harf-etiket); text-transform: uppercase; color: var(--muted); } .stok-form label > input, .stok-form label > select, .alan > input, .alan > select { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); } /* flex-wrap: dar ekranda (1280) "Ekle" düğmesi ve durum yazısı satırın dışına taşıyordu (Duruş ve Tatil: 15-23px). Geniş ekranda tek satır, değişmez. */ .add-row { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); padding: var(--bosluk-3) var(--bosluk-4); background: var(--panel-2); } .add-row input { flex: 1; } /* Dinamik arama + öneri listesi */ .metod-sec { position: relative; } .mc-oneri { position: absolute; z-index: 30; left: 0; right: 0; top: calc(var(--row-h) + 2px); max-height: 264px; overflow-y: auto; margin: 0; padding: 0; list-style: none; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); } .mc-oneri li { display: flex; align-items: center; gap: var(--bosluk-2); height: var(--row-h); padding: 0 10px; cursor: pointer; } .mc-oneri li:hover, .mc-oneri li[aria-selected="true"] { background: var(--brand-soft); } .mc-oneri .kod { font-size: var(--yazi-sm); color: var(--muted); min-width: 42px; } /* -------------------------------------------------------------------------- 7 · UYARI HİYERARŞİSİ — dört seviye, ağırlık sırası yukarıdan aşağı -------------------------------------------------------------------------- */ /* (1) Engelleyici: sayfa üstü, kapatılamaz */ .engel-uyari, /* (2) Eksik tanım: katlanır şerit */ .kap-uyari, /* (3) Satır içi bilgi */ .bom-uyari { display: flex; gap: var(--bosluk-3); align-items: flex-start; padding: var(--bosluk-3) var(--bosluk-4); margin-bottom: var(--bosluk-4); border: 1px solid; border-radius: var(--radius); font-size: var(--yazi-md); } .engel-uyari { color: var(--ink); background: var(--red-bg); border-color: var(--red-line); } .kap-uyari { color: var(--ink); background: var(--amber-bg); border-color: var(--amber-line); } .bom-uyari { color: var(--brand-dark); background: var(--brand-soft); border-color: var(--brand-line); } /* KOD UYUŞMAZLIĞI KIRMIZI: aynı kutunun marka rengindeki hâli "bilgi" gibi okunuyordu ve göz üstünden kayıyordu. Bu uyarı bilgi değil, durdurucu — yanlış BOM'u yanlış ürüne basmak geri alınamıyor. */ .bom-uyari-agir { color: var(--ink); background: var(--red-bg); border-color: var(--red-line); } .bom-uyari-agir b { color: var(--red); } .engel-uyari::before, .kap-uyari::before, .bom-uyari::before { content: ""; flex: 0 0 auto; width: 4px; align-self: stretch; border-radius: 2px; background: currentColor; } .engel-uyari b { color: var(--red); } .kap-uyari b { color: var(--amber); } .engel-uyari ul, .kap-uyari ul { margin: 6px 0 0; padding-left: 20px; } /* (4) Durum metni — form altı */ .ayar-durum { font-size: var(--yazi-sm); color: var(--muted); } .ayar-durum.ok { color: var(--green); } .ayar-durum.err { color: var(--red); } /* Geçici bildirim */ .stok-flash, .ok-flash { position: fixed; right: var(--bosluk-5); bottom: var(--bosluk-5); z-index: 90; padding: var(--bosluk-3) var(--bosluk-4); font-weight: 700; color: var(--green); background: var(--green-bg); border: 1px solid var(--green-line); border-radius: var(--radius); animation: flash-gir .18s ease-out; } .stok-flash.err { color: var(--red); background: var(--red-bg); border-color: var(--red-line); } @keyframes flash-gir { from { opacity: 0; transform: translateY(6px); } } /* -------------------------------------------------------------------------- 8 · PENCERE (modal / popup) -------------------------------------------------------------------------- */ /* KATMAN SIRASI — ölçülen hata 2026-10-10 (KDE-0032). Bu blok KİMLİK seçicisiyle yazılmış; `.popup { z-index: 200 }` ve `.modal { z-index: 100 }` sınıf kuralları buna yenik düşüyor ve İKİSİ DE 80 oluyor. Eşit z-index'te sırayı DOM belirliyor: `#popup` markupta `#modal`dan ÖNCE duruyor, yani modal sonra boyanıyor ve üstte kalıyor. Görünen sonuç: kart penceresi (Bakiye listesi) açıkken bir görsele tıklayınca büyütme penceresi açılıyor ama LİSTENİN ARKASINDA kalıyor — kullanıcı "tıkladım, bir şey olmadı" diye okuyor. Ölçüldü: ikisi de z-index 80, `elementFromPoint(merkez)` modal döndürüyor. `#popup` BİR ÜSTTE: büyütme penceresi her zaman en üstteki katman olmalı (kullanıcı kuralı). Sınıf kurallarını düzeltmek yetmezdi — kimlik seçicisi onları yine ezerdi; ölçü kimlik seviyesinde veriliyor. */ #popup, #modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: 56px var(--bosluk-4) var(--bosluk-4); background: rgba(31, 50, 57, .45); } #popup { z-index: 90; } /* kart penceresinin ÜSTÜNDE (KDE-0032) */ #popup[hidden], #modal[hidden] { display: none; } /* ÇERÇEVE — P1 v2 paketi (KDE-0073). `.modal-kutu` AYRILDI: eskiden aynı kuralı paylaşıyorlardı, pop-up'ın ölçüsü değişince modal de değişirdi. */ .modal-kutu { display: flex; flex-direction: column; width: 700px; max-width: 100%; max-height: calc(100vh - 96px); background: var(--panel); border: 1px solid var(--chrome); border-radius: var(--radius); overflow: hidden; } .popup-kutu { box-sizing: border-box; width: 700px; /* varsayılan: form, detay */ max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .popup-kutu.genis { width: 1080px; } /* liste, tablo */ .popup-kutu.oto { width: auto; min-width: 520px; max-width: min(1080px, calc(100vw - 32px)); } .popup-kutu.dar { width: 400px; } .popup-kutu.orta { width: 700px; } /* `.popup-kutu.genis { width: 1040px }` SİLİNDİ — hiç eşleşmiyordu (sınıf perdedeydi), yani "geniş = 1040" diye okunacak satır gerçeği anlatmıyordu. */ /* başlık ve gövde — paketten */ .popup-bas { flex: none; display: flex; align-items: center; gap: var(--bosluk-2); min-height: 52px; padding: 0 var(--bosluk-3) 0 var(--bosluk-4); border-bottom: 1px solid var(--line); } .popup-baslik { margin: 0; font-size: var(--yazi-lg); font-weight: 900; color: var(--ink); } .popup-kapat { margin-left: auto; width: var(--tik-h); height: var(--tik-h); padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); background: var(--panel); border-radius: var(--radius); cursor: pointer; font-size: var(--yazi-md); color: var(--ink); } .popup-kapat:hover { background: var(--hover); } .popup-govde { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--bosluk-4); } /* çerçevenin çizdiği ayak (opt.ayak) */ .popup-ayak.cerceve { flex: none; display: flex; align-items: center; gap: var(--bosluk-2); padding: 10px var(--bosluk-4); background: var(--panel-2); border-top: 1px solid var(--line); } .popup-ayak.cerceve .sol, .popup-ayak.cerceve .sag { display: flex; gap: var(--bosluk-2); } .popup-ayak.cerceve .sag { margin-left: auto; } /* RAF PENCERESİ İÇERİĞE GÖRE (kullanıcı kararı 2026-09-09): "pencere küçülecek, raf büyüdükçe sağa sola eşit açılsın". Sabit genişlikte üç gözlük bir raf pencerenin sol yarısında kalıyordu. `fit-content` + ortalı kutu: raf büyüdükçe pencere iki yana simetrik açılıyor, ekranı aşınca `max-width` tutuyor. */ /* `.popup-kutu.raf` KALDIRILDI: sınıf hiç konmuyordu (popupAc perdeye `olcu-raf` yazıyordu), yani kural ölüydü. Yerine `.popup-kutu.oto`. */ /* UYGULAMA UYARLAMASI — `.modal-box` sahipsiz kalmıştı. Tasarımın kart sınıfı `.modal-kutu` ama markup `.modal-box` kullanıyor. `#modal` bu dosyada karartılmış ÖRTÜYE dönüştü; `.modal-box` ise eski kuraldaki `background: transparent` ile kaldı. Sonuç: başlık şeridi, özet şeridi ve tablo örtünün üstünde ayrı ayrı yüzüyor, aralarından koyu zemin görünüyordu ("pencerenin arası boş"). Kutu artık gerçek bir kart. */ .modal-box { display: flex; flex-direction: column; width: 100%; max-width: 1320px; min-height: 0; max-height: calc(100vh - 72px); background: var(--panel); border: 1px solid var(--chrome); border-radius: var(--radius); overflow: hidden; } /* Kaydırma artık gövdede; başlık kartın tepesinde zaten sabit duruyor */ .modal-box .modal-head { flex: 0 0 auto; position: static; } .modal-box .modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; } .rb-bas { display: flex; align-items: center; gap: var(--bosluk-3); height: 48px; padding: 0 var(--bosluk-4); flex: 0 0 auto; color: #fff; background: var(--chrome); font-size: var(--yazi-lg); font-weight: 700; } .rb-bas .kapat { margin-left: auto; width: 32px; height: 32px; font-size: var(--yazi-baslik); color: var(--chrome-ink); background: transparent; border: 1px solid var(--chrome-2); border-radius: var(--radius); cursor: pointer; } .rb-gövde, .rb-govde { flex: 1; overflow-y: auto; } .rb-alt { display: flex; align-items: center; gap: var(--bosluk-2); flex: 0 0 auto; padding: var(--bosluk-3) var(--bosluk-4); background: var(--panel-2); border-top: 1px solid var(--line); } .rb-alt .not { font-size: var(--yazi-sm); color: var(--muted); } .rb-alt .btn:first-of-type { margin-left: auto; } /* Telefon: pencere tam ekran, kapatma "‹ Geri" */ @media (max-width: 720px) { #popup, #modal { padding: 0; } .popup-kutu, .modal-kutu { width: 100%; height: 100vh; max-height: none; border: 0; border-radius: 0; } } /* -------------------------------------------------------------------------- 9 · GEZİNME -------------------------------------------------------------------------- */ /* KABUK SABİT, İÇERİK KAYAR (kullanıcı isteği 2026-09-09: "sidebar'ı sabit tutabilir misin, yakınlaştırma ve uzaklaştırmada bozulmasın"). Eskiden sayfanın kendisi kayıyordu, kenar çubuğu `position: sticky` ile tutunuyordu. Tarayıcı yakınlaştırmasında bu ikili bozuluyordu: içerik 100vh'yi aşınca çubuk önce sayfayla birlikte kayıyor sonra yapışıyordu — logo ekranın dışına çıkıyor, menü yarım görünüyordu. Artık kabuk EKRAN YÜKSEKLİĞİNDE ve hiç kaymıyor; kayan tek şey `.main-area`. Yakınlaştırma yalnız içerik alanının kaydırma çubuğunu uzatıyor. İçerideki `position: sticky` öğeler (üst çubuk, panel başlıkları) artık `.main-area`ya göre yapışıyor — davranış aynı. `100dvh` mobil için: adres çubuğu gizlenip açılırken `100vh` sabit kalıyor ve alt şerit ekran dışında kalıyordu. */ html, body { height: 100%; overflow: hidden; } .app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; } .sidebar { height: 100%; width: 250px; flex-shrink: 0; display: flex; flex-direction: column; color: var(--chrome-ink); background: var(--chrome); } .sidebar .brand { padding: 18px 16px; border-bottom: 1px solid var(--chrome-2); } /* ÜRÜN KELİME MARKASI — kenar çubuğunun tepesinde (kullanıcı kararı 2026-09-08). Firma logosu buradan alındı, en alta taşındı. ZEMİN NEDEN BEYAZ: üç renk de paletin METİN renkleri (Monochrome Beach) ve açık zemin için tasarlanmışlar. Koyu kabuk üstünde ölçüldü — "ERP"/#284b63 ile #353535 arasında kontrast 1,33:1 çıkıyor, yani yazı görünmüyordu. Beyaz zeminde üçü de net: 12,6:1 · 5,7:1 · 9,2:1. AYRI ZEMİN YOK — logo doğrudan koyu kabuğun üstünde duruyor. Bir ara arkasına #353535 blok konmuştu; ölçüldü, kabukla ayrımı 1,09:1 çıktı: blok görünmüyor ama dikeyde yer yiyordu. Kabuk üstünde kontrast daha iyi (13,35:1) ve kenar çubuğunda 14 menü öğesinin sığması için her piksel önemli. RENKLER: resmi SVG'nin koyu zemin varyantı olduğu gibi kullanılıyor — harfler #f3f1fa, nokta #a78bfa. Kullanıcı "harfler saf beyaz olsun" dedi; ölçüldü, aradaki fark 255 üzerinden 12/14/5 (kontrast 1,119:1) — koyu zeminde gözle ayırt edilemiyor. Markanın SVG'sini bunun için çatallamak bakım borcu olurdu: marka güncellenince bizim kopyamız geride kalır. "ERP" ürün eki --line (#d9d9d9) ile, 9,45:1. ÖLÇÜ KILAVUZA BAĞLI (marka-kilavuzu.md §2): en-boy oranı 4.098:1 sabit, asgari genişlik 90px, her yanında "o" harfi yüksekliği kadar boşluk. */ .sidebar .brand { padding: 0; border-bottom: 1px solid var(--chrome-2); } /* Dikey boşluk eşit: logo bloğun ortasında dursun, tepeye yapışmasın. Kılavuzun güvenlik alanı kuralı da bunu istiyor — logonun her yanında en az "o" harfi yüksekliği kadar boşluk (140px genişlikte "o" ≈ 14px). */ .marka-kilit { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px; } .mk-logo { display: block; width: 140px; height: auto; /* 140 / 4.098 ≈ 34px */ flex: 0 0 auto; /* oran asla bozulmasın */ } .mk-urun { color: var(--line); font-size: var(--yazi-baslik); font-weight: 700; letter-spacing: .06em; line-height: 1; white-space: nowrap; } /* FİRMA LOGOSU — kenar çubuğunun en altında, kullanıcı kutusunun altında. ZEMİN BEYAZ (--panel, kullanıcı kararı 2026-09-08). Zorunlu da: yüklenen firma logoları çoğunlukla koyu renkli ve şeffaf zeminli; koyu kabuğun üstünde kaybolurlar. Üstteki ürün markasının aksine — o beyaz varyantı kullandığı için kabuğun üstünde doğrudan durabiliyor, kutuya ihtiyacı yok. Logo tanımlı değilse JS bu kutuyu da gizliyor (ekranlar/ortak.js, `.firma-logo-alt` kabını arıyor) — yoksa boş beyaz bir dikdörtgen kalırdı. */ .firma-logo-alt { padding: 12px 14px; background: var(--panel); display: flex; align-items: center; justify-content: center; } .firma-logo-alt img { display: block; width: 100%; max-width: 150px; height: auto; } /* Logo yüklenmemişse firma adı düz metin olarak. Beyaz kutunun üstünde olduğu için --ink kullanılıyor (12,27:1). Uzun unvanlar iki satıra sarar. */ .fla-ad { color: var(--ink); font-size: var(--yazi-sm); font-weight: 700; letter-spacing: .04em; text-align: center; line-height: 1.25; text-transform: uppercase; } .sidebar nav { flex: 1; padding: 10px 8px; overflow-y: auto; } /* Bölüm başlıkları (GENEL, SİPARİŞ YÖNETİMİ…) — kullanıcı kararı 2026-09-08: daha kalın ve daha açık. --chrome-muted (#7d959b, 3,97:1) yerine --line (#d9d9d9, 9,45:1); ağırlık 700 → 800. Menü öğeleriyle karışmasınlar diye ayrım hâlâ BOYUTTA ve HARF ARALIĞINDA duruyor: başlıklar küçük, seyrek ve büyük harf; öğeler daha büyük ve normal yazım. ÜST BOŞLUK 15 → 10: başlıklar artık kalın ve açık renk olduğu için gruplar boşlukla değil KONTRASTLA ayrışıyor; 5 bölümde 25px kazanılıyor ve logo büyütüldükten sonra 14 menü öğesi yine kaydırmasız sığıyor. */ .nav-section { padding: 10px 10px 7px; font-size: var(--yazi-sm); font-weight: 900; letter-spacing: .11em; color: var(--line); } /* ===== AÇILIR ÇEKMECE (kullanıcı kararı 2026-09-09) ===== Kenar çubuğu listesi uzundu ve kaydırma çubuğu çıkıyordu. Başlıklar artık DÜĞME; tıklanınca o grubun öğeleri hemen ALTINDA açılıyor. Önce yan panel denendi (`position: fixed`, çubuğun sağında beyaz kutu) ama KPI kartlarının arkasında kalıyordu ve yığın düzeni kırılgandı. Çekmece hem kullanıcının istediği hâl hem de o sorunu kökten kaldırıyor: panel normal akışta, üstünde kimse yok. AYNI ANDA TEK ÇEKMECE açık — beşi birden açılırsa liste yine uzar ve kaydırma çubuğu geri gelir. */ button.nav-section { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: var(--yazi-sm); font-weight: 900; letter-spacing: .11em; color: var(--line); text-transform: uppercase; } button.nav-section:hover { color: #fff; } .nav-grup-ok { margin-left: auto; opacity: .7; transition: transform .15s; } button.nav-section.acik { color: #fff; } button.nav-section.acik .nav-grup-ok { transform: rotate(90deg); } /* Çekmece: çubuğun kendi zemininde, bir tık içeride. Sol çizgi grubun nerede başlayıp bittiğini gösteriyor — başlık ile öğeler arasındaki bağı boşlukla anlatmak dar sütunda yetmiyordu. */ .nav-grup-alt { margin: 2px 0 6px; padding-left: 8px; border-left: 2px solid var(--chrome-2); } .nav-item { display: flex; align-items: center; gap: var(--bosluk-3); width: 100%; height: var(--row-h); padding: 0 10px; margin-bottom: 1px; /* --yazi-lg (15px) → --yazi-md (13.5px), kullanıcı kararı 2026-09-08. Ölçekte bir basamak; ara değer uydurulmuyor. Bölüm başlığı --yazi-sm (12,5px) olduğu için hiyerarşi korunuyor: öğe > başlık. */ font: inherit; font-size: var(--yazi-md); font-weight: 400; text-align: left; color: var(--chrome-ink); background: transparent; border: 0; border-left: 3px solid transparent; cursor: pointer; } .nav-item:hover { color: #fff; background: var(--chrome-2); } .nav-item.active { color: #fff; font-weight: 700; background: var(--chrome-2); border-left-color: var(--brand); } .nav-item .ic { width: 19px; height: 19px; flex: 0 0 auto; } /* inline SVG, stroke: currentColor */ .nav-item .nokta { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); } .nav-item .nokta.kritik { background: var(--red); } .upload-nav { color: #fff; background: var(--brand); border-left-color: var(--brand); } .upload-nav:hover { background: var(--brand-dark); border-left-color: var(--brand-dark); } .side-foot { padding: 14px 16px; font-size: var(--yazi-sm); color: var(--chrome-muted); border-top: 1px solid var(--chrome-2); } /* KAYAN TEK ALAN BURASI. `min-height: 0` şart: esnek kapta varsayılan `min-height: auto` çocuğun küçülmesini engelliyor ve kaydırma yine sayfaya taşıyordu. */ .main-area { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; } .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--bosluk-4); min-height: 58px; padding: var(--bosluk-2) var(--bosluk-5); background: var(--panel); border-bottom: 1px solid var(--line); } .topbar > .btn, .topbar > .btn-grup { flex: 0 0 auto; } .page-title { flex: 0 0 auto; } /* Dar ekranda ikincil bilgi çekilir, kontrol tam genişliğini korur */ @media (max-width: 1180px) { .topbar .page-alt { display: none; } } @media (max-width: 1040px) { .topbar .bugun { display: none; } .topbar { flex-wrap: wrap; } } .page-title { font-size: var(--yazi-baslik); font-weight: 700; } .page-alt { font-size: var(--yazi-md); color: var(--faint); } .bugun { margin-left: auto; font-size: var(--yazi-md); color: var(--muted); } .view { display: none; padding: 20px var(--bosluk-5) var(--bosluk-6); } .view.active { display: block; } /* Kırıntı yolu — YENİ (Ürün ↔ Yarı Mamül zincirinde kaybolmayı önler) */ .kirinti { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--yazi-sm); color: var(--muted); margin-bottom: var(--bosluk-3); } .kirinti a { font-weight: 400; } .kirinti span::after { content: "›"; margin-left: 6px; color: var(--line-strong); } .kirinti .simdi { color: var(--ink); font-weight: 700; } .kirinti .simdi::after { content: none; } /* Mobil: off-canvas menü */ .menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--brand); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; } @media (max-width: 860px) { .menu-toggle { display: inline-flex; } .sidebar { position: fixed; z-index: 90; transform: translateX(-100%); transition: transform .25s ease; } .app.sidebar-open .sidebar { transform: translateX(0); } .app.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(31,50,57,.5); } .view { padding: var(--bosluk-3); } .topbar { padding: 0 var(--bosluk-3); gap: var(--bosluk-3); } } /* Telefon: alt sekme çubuğu — YENİ */ .alt-nav { display: none; } @media (max-width: 560px) { .alt-nav { position: sticky; bottom: 0; z-index: 20; display: flex; background: var(--panel); border-top: 1px solid var(--line); } .alt-nav button { flex: 1; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: inherit; font-size: var(--yazi-xs); font-weight: 400; color: var(--muted); background: transparent; border: 0; border-top: 3px solid transparent; cursor: pointer; } .alt-nav button.active { color: var(--brand); font-weight: 700; border-top-color: var(--brand); } } /* -------------------------------------------------------------------------- 10 · VERİ GÖRSELLEŞTİRME -------------------------------------------------------------------------- */ .donut-wrap, .pie-wrap { display: flex; align-items: center; gap: var(--bosluk-5); flex-wrap: wrap; } .pie { width: 126px; height: 126px; flex-shrink: 0; } /* SVG kullanıcı birimi: viewBox 120, kutu 126px → ×1.05. 10.5 birim ekranda 11px (--yazi-xs) eder; 9 birim 9.45px ile ölçeğin altındaydı. */ .pie-bos { font-size: 10.5px; fill: var(--muted); } .donut-center { font-size: 18px; font-weight: 700; fill: var(--ink); } .donut-sub { font-size: 7px; fill: var(--faint); } .legend { list-style: none; margin: 0; padding: 0; min-width: 150px; flex: 1; } .legend li { display: flex; align-items: center; gap: var(--bosluk-2); padding: 5px 0; font-size: var(--yazi-md); } .legend .dot { width: 12px; height: 12px; border-radius: 2px; } .legend .lg-num { margin-left: auto; font-weight: 700; } /* Doluluk / ilerleme barı */ .bar, .kap-bar, .doluluk-bar { height: 8px; background: #e6e6e6; border-radius: 4px; overflow: hidden; } .bar-dolu, .kap-bar-dolu, .doluluk-dolu { height: 100%; background: var(--brand); border-radius: 4px; transition: width .3s; } .bar-dolu.tamam, .doluluk-dolu.tamam { background: var(--green); } .kap-bar-dolu.asim, .doluluk-dolu.asim { background: var(--red); } .doluluk-dolu.riskli { background: var(--amber); } /* ÇUBUK HER SATIRDA AYNI YERDE BAŞLIYOR (kullanıcı bildirimi 2026-09-09). Etiket kutusu esnekti ve "Tamamlandı %100" ile "Kaynak %38" farklı genişlikte çıkıyordu; çubuk satırdan satıra kayıyor, sütun tarak gibi görünüyordu. Etiket kutusu artık SABİT, uzun metod adı kırpılıyor — tam adı ipucunda duruyor. */ .ilerleme { display: flex; align-items: center; gap: var(--bosluk-2); min-width: 150px; } .ilerleme .ilerleme-ust { flex: 0 0 128px; } .ilerleme .metod-etiket { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ilerleme .bar { flex: 1 1 auto; min-width: 60px; } .yuzde { min-width: 42px; text-align: right; font-weight: 700; font-size: var(--yazi-sm); } /* Takvim ızgarası — tanımlar style.css'te. Tasarımın bu bloğu KALDIRILDI: prototip takvimi flex satırlarla kuruyordu (`.tk-hafta` bir satır, `.tk-gun` flex ögesi), bizimki CSS grid. İkisi çakışıyordu ve bu dosya sonra yüklendiği için tasarımınki kazanıyordu: `.tk-hafta`ya verilen `margin-bottom` ızgarada satır arasında GRİ BANT açıyordu, `.tk-gun`a verilen `flex: 1` ise ızgara ögesinde anlamsızdı. `.gun-no` / `.gun-alt` / `.yuk-*` bizim markup'ta hiç yok. */ /* ===== ÜRÜN TANIMI — GÖRÜNTÜLEME KİPİ (KDE-0050) ===== Kullanıcı 2026-10-10: "Doğrudan düzenleme sayfası açılmasın, verilerin görüntülendiği bir sayfa olsun. BOM Yükleme, Step Ekleme ve Değişiklikleri Kaydet butonlar bu sayfada yok, açtığında gözükecek." YAZMA DENETİMLERİ KALDIRILIYOR, alanlar duruyor: sayfanın işi tanımlanmış değerleri GÖSTERMEK. Alanların kendisi JS tarafında salt okunur yapılıyor (`UK_KIP`); yalnız CSS ile gizlemek, klavyeyle hâlâ değiştirilebilir bir form bırakırdı. */ .uk-goruntule .ua-butonlar, .uk-goruntule .bilesen-form, .uk-goruntule .rota-duzenle, .uk-goruntule .bilesen-del, .uk-goruntule .gorsel-ekle { display: none; } /* GÖRÜNTÜLEMEDE EKLEME VE SİLME YOK (KDE-0052, kullanıcı: "Mamül ekranında herhangi bir silme ve ekleme olmayacak"), AMA 3B GÖRÜNÜM KALIYOR: modeli açmak bir okuma eylemi, kaydı değiştirmiyor. Kullanıcı onu da görselin altına istemişti — görüntüleme kipinde de orada duruyor. `