/* BU DOSYA ÜRETİLMİŞTİR -- elle düzenlemeyin. Kaynak: css/bolumler/*.css Üreten: node araclar/paketle.mjs */ /* ===== css/bolumler/00-degiskenler.css ===== */ /* ================================================= MOBİLYA MOTORU V2 - ARAYÜZ STİLLERİ Tasarım yönü: Bir web sayfası değil, bir MASAÜSTÜ CAD programı gibi görünmesi hedeflenmiştir. NEDEN KOYU KABUK Program açık gri kabukla yazılmıştı ama ekranda bir web sitesi gibi duruyordu: her yer beyaz, viewport da beyaz, aradaki sınır kaybolmuştu. Fusion, Rhino, Blender ve mobilya programlarının hepsi aynı şeyi yapıyor: kabuk koyu ve sessiz viewport tek aydınlık alan Göz doğrudan işin kendisine gidiyor, arayüz geri çekiliyor. Ayrıca ekran saatlerce açık kalıyor; koyu kabuk yormuyor. Kurallar: - Koyu, nötr gri kabuk - Düz yüzeyler, gölge yerine 1px çizgi - Küçük köşe yarıçapı (3-4px) - Sıkı yerleşim (24px alan yüksekliği) - Hover'da zıplama/büyüme YOK - Sayılar hizalı (tabular) rakamla ================================================= */ /* ================================================= 1. TASARIM DEĞİŞKENLERİ ================================================= */ :root { /* YÜZEYLER Zemin en koyu, alan (input) ondan da koyu: girilebilir yer çukur görünür. Şerit ve başlık kademe kademe açılır. */ --renk-zemin: #1b1e24; --renk-panel: #24282f; --renk-serit: #2b3038; --renk-bolum-baslik: #333942; --renk-alan: #171a1f; --renk-alan-vurgu: #1f232a; --renk-alan-pasif: #292e36; /* ÇİZGİLER */ --renk-kenarlik: #3c434d; --renk-kenarlik-acik: #333941; --renk-kenarlik-koyu: #4d5560; /* YAZI */ --renk-yazi: #e6e9ee; --renk-yazi-ikincil: #a7afbb; /* "Soluk" olsa da SÜS DEĞİL: sekme adı, tablo başlığı, "stok girilmemiş" gibi bilgi taşıyor. Eski #737c8a en açık zeminde (#333942) 2.76 kontrast veriyordu, okunmuyordu. Yeni değer en açıkta 4.57, en koyuda 6.56 -- her zeminde okunuyor. */ --renk-yazi-soluk: #9aa3b1; /* VURGU Koyu zeminde mavi biraz açılmalı; eski #1d64d8 zeminde kayboluyordu. */ /* Zemin rolu: uzerinde BEYAZ yazi duruyor. #3183f0 beyazla 3.73 veriyordu, birincil dugmelerin yazisi soluk kaliyordu; bu deger 4.65. Koyu yuzeyde cizgi olarak hala 3.18 ile secilir durumda. */ --renk-ana: #2973d6; --renk-ana-hover: #4e97f7; /* Mavi ZEMIN olarak da YAZI olarak da kullaniliyordu; ikisi ters yone cekiyor. Zemin icin #3183f0 dogru, ama ayni mavi koyu yuzeyde YAZI olunca 3.12'ye kadar dusuyordu. Yazi icin bir tik acigi: en acik zeminde 5.13, panelde 6.53. Cizgi ve zemin --renk-ana ile kaliyor, sadece yazi buna geciyor. */ --renk-ana-yazi: #6fb0fa; --renk-ana-acik: #1a2c45; --renk-ana-kenar: #37628f; /* DURUM RENKLERİ "acik" olanlar artık açık değil, KOYU tint: koyu zeminde rozet zemini olarak kullanılıyorlar. Adları geriye dönük uyum için korundu. */ --renk-basarili: #56d98a; --renk-basarili-acik: #14301f; --renk-basarili-kenar: #2c6444; --renk-uyari: #f0b44a; --renk-uyari-acik: #33280e; --renk-uyari-kenar: #6f5620; --renk-tehlike: #f4756f; --renk-tehlike-hover: #f8918c; --renk-tehlike-acik: #351b1b; --renk-tehlike-kenar: #71383a; /* VIEWPORT Kabuğun tersine: tek aydınlık alan. Üstte açık, altta koyu; ufuk çizgisi hissi verir ve derinlik kazandırır. */ --viewport-ust: #eef2f7; --viewport-alt: #c3ccd8; --viewport-izgara: rgba(38, 50, 66, 0.10); --viewport-izgara-ana: rgba(38, 50, 66, 0.18); /* GEOMETRİ (kullanıcı 22.09'da yeniledi) Eski ölçek 2/3/4 px idi ve gerekçesi "masaüstü programlarda köşeler neredeyse keskindir" diye yazılmıştı. Kullanıcı KesApp'i inceledikten sonra farklısını istedi: > "elden geçir, daha şık güzel bir uygulama olsun, > KesApp'tan daha iyi" Ölçülen sorun yalnız değerlerin küçüklüğü değildi: CSS'te DOKUZ ayrı yarıçap dolaşıyordu (6px 31 kez, 2px 14, 8px 13, 3px 12, 4px 9, 5px 8, 10px 7 …). Her bileşen kendi kararını vermişti; "şık değil" hissinin teknik karşılığı buydu. Yeni ölçek dört kademe ve hepsi buradan geliyor: kucuk rozet, küçük etiket, giriş kutusu orta düğme, kart, satır buyuk panel, pencere, yüzen katman hap sekme ve durum rozetleri Yoğun bir atölye programı olduğu için abartılmadı: 4/6/10 px yuvarlak ama hâlâ ciddi duruyor. */ --radius-kucuk: 4px; --radius-orta: 6px; --radius-buyuk: 10px; --radius-hap: 999px; /* YOĞUNLUK Bütün satır yükseklikleri tek yerden yönetilir. Şerit 40'tan 34'e indi: iki şerit açıkken çizim alanı 12 piksel geri kazanıyor. */ --serit-yukseklik: 34px; --durum-yukseklik: 22px; --bolum-baslik-yukseklik: 24px; --alan-yukseklik: 24px; --buton-yukseklik: 24px; --sol-panel-genislik: 244px; --sol-panel-dar-genislik: 32px; --sag-panel-genislik: 300px; /* YAZI ÖLÇÜLERİ */ --yazi-normal: 12px; --yazi-kucuk: 11px; --yazi-mini: 10px; /* GÖLGE Yalnız yüzen katmanlarda (modal, açılır liste) kullanılır. Koyu kabukta gölge daha derin olmalı, yoksa pencere zemine yapışık durur. */ --golge-pencere: 0 18px 50px rgba(0, 0, 0, 0.55); --golge-yuzen: 0 4px 14px rgba(0, 0, 0, 0.4); /* ÜÇ KADEME (22.09) CSS'te 22 ayrı gölge tanımı vardı; yükseklik duygusu her yerde başka çıkıyordu. Artık üç kademe var ve hepsi buradan geliyor: 1 satır/kart -- yüzeyden bir tık yukarıda 2 açılır liste, ipucu 3 yüzen şerit, kalıcı katman Pencere gölgesi ayrı kalıyor: modal en üstte. */ --golge-1: 0 1px 2px rgba(0, 0, 0, 0.28); --golge-2: 0 4px 12px rgba(0, 0, 0, 0.34); --golge-3: 0 10px 28px rgba(0, 0, 0, 0.42); /* HAREKET Tek süre: her yerde aynı hızda tepki veren bir arayüz "oturmuş" duruyor. Farklı süreler savrukluk hissi veriyordu. */ --gecis-hizli: 0.12s ease; --gecis-orta: 0.2s ease; /* ============================================= ESKİ ADLAR ============================================= Bazı bölümler program büyürken kendi değişken adlarını uydurmuş: var(--yuzey, #ffffff) Bu adlar HİÇBİR YERDE tanımlı değildi; yani her zaman yedek değer çalışıyordu. Açık kabukta fark edilmedi çünkü yedekler zaten açıktı. Koyu kabukta aynı yedekler ekranda beyaz lekeler bırakıyordu: oda çizimi, G-kod önizlemesi, kertme penceresi. Adları tek tek dolaşıp değiştirmek yerine burada gerçek renge bağlandılar. Tek yer, tek karar. */ --yuzey: var(--renk-panel); --yuzeyRengi: var(--renk-panel); --yuzeyIkincil: var(--renk-alan-vurgu); --vurguYuzeyi: var(--renk-ana-acik); --metinRengi: var(--renk-yazi); --ikincilMetin: var(--renk-yazi-ikincil); --soluk: var(--renk-yazi-soluk); --kenar: var(--renk-kenarlik); --kenarRengi: var(--renk-kenarlik); --anaRenk: var(--renk-ana); --anaRenkKoyu: var(--renk-ana-hover); --vurgu: var(--renk-ana); --renk-vurgu: var(--renk-ana); --renk-girdi-zemin: var(--renk-alan); /* Satır vurgusu koyu zeminde siyahla değil beyazla yapılır; siyah eklemek zemini büsbütün karartıyordu. */ --renk-satir-vurgu: rgba(255, 255, 255, 0.05); --kose-kucuk: var(--radius-kucuk); /* ============================================= DÜĞME VE ŞERİT YÜZEYİ ============================================= Düğmeler her dosyada ayrı ayrı "linear-gradient(180deg, #ffffff, #eef2f7)" yazıyordu. On beş yerde aynı iki renk. Koyu kabukta bu on beş yer beyaz lekeler bırakıyordu: üst şeridin sağ tarafı ekranda hâlâ web sitesi gibi parlıyordu. Artık tek yerden geliyorlar. Gradyan bilerek çok hafif: masaüstü programlarında düğme parlamaz, yalnız yüzeyin nerede bittiği belli olur. */ --buton-yuzey: linear-gradient( 180deg, #383f4a, #2e343d ); --buton-yuzey-hover: linear-gradient( 180deg, #434b57, #373e48 ); --serit-yuzey: linear-gradient( 180deg, #333a44, var(--renk-serit) ); /* -------------------------------------------- İKON RENKLERİ -------------------------------------------- Programda iki ikon dili var: 24 ızgara, yalnız çizgi -- currentColor kullanıyor, renk yazıdan geliyor 50 ızgara, dolgulu -- kapak ayarı ve CAD penceresi; dolgu ile "hangi taraf" anlatılıyor, tek renkle anlatılamaz İkincisi sabit hex yazıyordu (#55637a, #e2e7ef, #fff). Açık temada doğru, koyu temada ters: çizgi koyu zeminde koyu kalıyor, dolgu parlak beyaz leke oluyor. Roller burada; çizim mantığı değişmiyor. */ --ikon-cizgi: #b3bcc9; --ikon-cizgi-soluk: #7e8896; --ikon-vurgu: var(--renk-ana-yazi); --ikon-dolgu: #2f343d; --ikon-dolgu-koyu: #3c434d; --ikon-zemin: var(--renk-alan); } /* ================================================= 1b. AÇIK TEMA ================================================= Yukarıdaki koyu kabuk programın VARSAYILANI ve öyle kalıyor: atölyede ekran saatlerce açık duruyor, göz yorulmasın diye. Ama her ortam aynı değil. Camdan ışık alan bir ofiste ya da gündüz dışarıda telefonla bakarken koyu ekran parlıyor ve okunmuyor. Bu yüzden açık tema bir seçenek olarak duruyor. NASIL ÇALIŞIYOR Aşağısı yeni bir tasarım değil, aynı tasarımın ters çevrilmiş yüzeyleri. Tek yapılan, en alttaki renk değişkenlerini yeniden tanımlamak; bölüm dosyalarının hiçbirine dokunulmadı. Takma adlar (--yuzey, --vurgu, --kenar ...) zaten bunlardan türüyor, kendiliğinden geliyorlar. YÜZEY SIRASI KORUNDU Koyu temada girdi alanı en KOYU yüzeydi: çukur görünsün diye. Açıkta bunun karşılığı en AÇIK olmak; kâğıt gibi beyaz alan, gri panelin içinde oyuk durur. Sıra tersine değil, aynı mantığın aynası. RENKLER GÖZLE DEĞİL ÖLÇÜLEREK SEÇİLDİ Her yazı/zemin çifti kontrast oranıyla denendi; hepsi normal yazı için 4.5 eşiğini geçiyor. En sıkışık olanlar: soluk yazı / zemin 4.76 mavi yazı / zemin 4.94 beyaz yazı / mavi düğme 4.65 Çizgiler koyu temadaki ayrımın aynısında tutuldu (1.4-1.9); daha koyusu ekranı kafes gibi gösteriyor. */ :root[data-tema="acik"] { /* YÜZEYLER Zemin en koyu, alan en açık: koyu temanın tam aynası. */ --renk-zemin: #dfe4ea; --renk-panel: #f2f5f8; --renk-serit: #f8fafc; --renk-bolum-baslik: #e7ecf2; --renk-alan: #ffffff; --renk-alan-vurgu: #f7f9fb; --renk-alan-pasif: #eceff4; /* ÇİZGİLER */ --renk-kenarlik: #c3ccd7; --renk-kenarlik-acik: #dde3ea; --renk-kenarlik-koyu: #aab4c2; /* YAZI */ --renk-yazi: #1b2430; --renk-yazi-ikincil: #4a5666; --renk-yazi-soluk: #596371; /* VURGU Mavi zemin (--renk-ana) iki temada da aynı: beyaz yazıyla 4.65 veriyor ve program tek bir kimlik rengini koruyor. Mavi YAZI ise ters yöne gidiyor: koyuda açılıyordu, açıkta koyulaşıyor. */ --renk-ana: #2973d6; --renk-ana-hover: #1f5cb4; --renk-ana-yazi: #1a5cbf; --renk-ana-acik: #dce9fb; --renk-ana-kenar: #9dc0ee; /* DURUM RENKLERİ "acik" olanlar burada gerçekten açık: rozet zemini. Yanlarındaki koyu yazıyla birlikte ölçüldüler. */ --renk-basarili: #17794a; --renk-basarili-acik: #d9f2e4; --renk-basarili-kenar: #8fd3ae; --renk-uyari: #8a5a00; --renk-uyari-acik: #fdf0d5; --renk-uyari-kenar: #e0b768; --renk-tehlike: #c02a24; --renk-tehlike-hover: #9e211c; --renk-tehlike-acik: #fde3e1; --renk-tehlike-kenar: #f0a9a5; /* VIEWPORT Koyu temada tek aydınlık alandı. Açık temada artık tek başına değil, ama yine de kabuktan bir tık farklı kalıyor ki işin bittiği yer belli olsun. */ --viewport-ust: #ffffff; --viewport-alt: #dbe3ec; --viewport-izgara: rgba(38, 50, 66, 0.12); --viewport-izgara-ana: rgba(38, 50, 66, 0.20); /* GÖLGE Açık kabukta derin gölge kirli görünür; yalnız yüzen katman havada dursun yeter. */ --golge-pencere: 0 18px 46px rgba(15, 25, 40, 0.18); --golge-yuzen: 0 4px 14px rgba(15, 25, 40, 0.12); /* ÜÇ KADEME -- AÇIK TEMA (22.09) Koyudaki siyah gölgeler burada kirli görünüyor; aynı kademeler laciverte çalan ve çok daha yumuşak. Yükseklik duygusu aynı kalıyor, ağırlık gitmiyor. */ --golge-1: 0 1px 2px rgba(15, 25, 40, 0.08); --golge-2: 0 4px 12px rgba(15, 25, 40, 0.10); --golge-3: 0 10px 28px rgba(15, 25, 40, 0.14); /* Satır vurgusu koyuda beyazla yapılıyordu; burada siyahla. */ --renk-satir-vurgu: rgba(15, 25, 40, 0.05); /* DÜĞME VE ŞERİT YÜZEYİ Gradyan yine çok hafif: yüzeyin nerede bittiği belli olsun, düğme parlamasın. */ --buton-yuzey: linear-gradient( 180deg, #ffffff, #eef2f7 ); --buton-yuzey-hover: linear-gradient( 180deg, #ffffff, #e3eaf3 ); --serit-yuzey: linear-gradient( 180deg, #ffffff, var(--renk-serit) ); /* Dil B ikonlarının özgün renkleri: açık temada bunlar doğruydu. */ --ikon-cizgi: #55637a; --ikon-cizgi-soluk: #8a97aa; --ikon-vurgu: #1d64d8; --ikon-dolgu: #e2e7ef; --ikon-dolgu-koyu: #cdd6e4; --ikon-zemin: #ffffff; } /* ===== css/bolumler/01-temel.css ===== */ /* ================================================= 2. TEMEL AYARLAR ================================================= */ * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; } body { overflow: hidden; color: var(--renk-yazi); background: var(--renk-zemin); /* Windows'ta yerel arayüz yazı tipi önce gelir. */ font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif; font-size: var(--yazi-normal); line-height: 1.35; /* Masaüstü programlarda arayüz metni seçilmez. */ -webkit-user-select: none; user-select: none; cursor: default; } button, input, select, textarea { font: inherit; -webkit-tap-highlight-color: transparent; } /* BUTON ZEMINI DE SIFIRLANIYOR Once yalniz renk miras aliniyordu. Sinifi olmayan ya da zemini tanimlanmamis bir dugme tarayicinin varsayilan ACIK GRI zeminini aliyor, ustune karanlik temanin ACIK yazisi biniyordu: beyaz kutu, okunmayan yazi. Kullanici: "bu birkac yerde butonlar beyaz kalmis o yuzden okunmuyor." Saydam zemin, eksik bir sinifi sessiz bir goruntu hatasina cevirmiyor: dugme panelin zeminini alir, yazisi okunur kalir. Kendi zeminini tanimlayan dugmeler bundan etkilenmiyor. */ button { color: inherit; background: transparent; } /* Değer alanları seçilebilir kalmalı. */ input, textarea, select { -webkit-user-select: text; user-select: text; } /* Fare ile tıklamada odak halkası gösterilmez, klavye ile gezinmede gösterilir. */ button:focus, input:focus, select:focus, textarea:focus { outline: none; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--renk-ana); outline-offset: 1px; } button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; } [hidden] { display: none !important; } /* JavaScript tarafından mod değişiminde gizlenen bölümler. */ .modTarafindanGizlendi { display: none !important; } #app { width: 100%; height: 100%; } /* ------------------------------------------------- KAYDIRMA ÇUBUKLARI Masaüstü programlarındaki gibi ince, kanallı ve gri. ------------------------------------------------- */ .incelKaydirma, #solPanelIcerik, .solPanelIcerik, #sagPanelIcerik, .sagPanelIcerik, .kutuphaneyeKaydetForm, .rafEklemeForm, .parcaEklemeForm, .menuPaneliIcerik { scrollbar-width: thin; scrollbar-color: #b3bfcf var(--renk-serit); } .incelKaydirma::-webkit-scrollbar, #solPanelIcerik::-webkit-scrollbar, .solPanelIcerik::-webkit-scrollbar, #sagPanelIcerik::-webkit-scrollbar, .sagPanelIcerik::-webkit-scrollbar, .kutuphaneyeKaydetForm::-webkit-scrollbar, .rafEklemeForm::-webkit-scrollbar, .parcaEklemeForm::-webkit-scrollbar, .menuPaneliIcerik::-webkit-scrollbar { width: 11px; height: 11px; } .incelKaydirma::-webkit-scrollbar-track, #solPanelIcerik::-webkit-scrollbar-track, .solPanelIcerik::-webkit-scrollbar-track, #sagPanelIcerik::-webkit-scrollbar-track, .sagPanelIcerik::-webkit-scrollbar-track, .kutuphaneyeKaydetForm::-webkit-scrollbar-track, .rafEklemeForm::-webkit-scrollbar-track, .parcaEklemeForm::-webkit-scrollbar-track, .menuPaneliIcerik::-webkit-scrollbar-track { background: var(--renk-serit); border-left: 1px solid var(--renk-kenarlik-acik); } .incelKaydirma::-webkit-scrollbar-thumb, #solPanelIcerik::-webkit-scrollbar-thumb, .solPanelIcerik::-webkit-scrollbar-thumb, #sagPanelIcerik::-webkit-scrollbar-thumb, .sagPanelIcerik::-webkit-scrollbar-thumb, .kutuphaneyeKaydetForm::-webkit-scrollbar-thumb, .rafEklemeForm::-webkit-scrollbar-thumb, .parcaEklemeForm::-webkit-scrollbar-thumb, .menuPaneliIcerik::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 6px; background: #b3bfcf; background-clip: content-box; } .incelKaydirma::-webkit-scrollbar-thumb:hover, #solPanelIcerik::-webkit-scrollbar-thumb:hover, .solPanelIcerik::-webkit-scrollbar-thumb:hover, #sagPanelIcerik::-webkit-scrollbar-thumb:hover, .sagPanelIcerik::-webkit-scrollbar-thumb:hover, .kutuphaneyeKaydetForm::-webkit-scrollbar-thumb:hover, .rafEklemeForm::-webkit-scrollbar-thumb:hover, .parcaEklemeForm::-webkit-scrollbar-thumb:hover, .menuPaneliIcerik::-webkit-scrollbar-thumb:hover { background: #8b9aad; background-clip: content-box; } /* ===== css/bolumler/02-kabuk.css ===== */ /* ================================================= 3. ÇALIŞMA EKRANI ================================================= */ .calismaEkrani { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--renk-zemin); } .calismaIcerik { flex: 1; min-height: 0; display: flex; position: relative; overflow: hidden; } /* ================================================= 4. ÜST ŞERİT (TOOLBAR) ================================================= */ /* Header iki satırlı: 1. marka | proje bilgisi | grup düğmeleri 2. açılan grubun komutları (gizliyken yok) Yükseklik sabit değil: ikinci satır açılınca header büyüyor ve çizim alanı o kadar aşağı kayıyor. Üstüne binen bir açılır kat denenmişti ama dolap düzenleme araçlarını kapatıyordu. */ .calismaHeader { flex-shrink: 0; position: relative; z-index: 20; display: flex; flex-direction: column; } .calismaHeaderUstSatir { height: var(--serit-yukseklik); flex-shrink: 0; display: grid; grid-template-columns: minmax(150px, auto) minmax(140px, 1fr) auto; align-items: center; gap: 14px; padding: 0 8px; background: var(--serit-yuzey); } /* Alt çizgi header'ın tamamında; ikinci satır açılınca da en altta kalıyor. */ .calismaHeader { border-bottom: 1px solid var(--renk-kenarlik); } .calismaHeaderMarka { min-width: 0; display: flex; align-items: center; gap: 8px; padding-right: 12px; border-right: 1px solid var(--renk-kenarlik-acik); } /* Kutu artık "MM" harflerini değil amblemi taşıyor: zemin ve yazı rengi amblemin kendi içinde. Buradaki mavi zemin kalırsa logonun yuvarlak köşeleri dışarı taşar. */ .calismaHeaderLogo { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .calismaHeaderProgramAdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--renk-yazi); font-size: var(--yazi-normal); font-weight: 600; } /* Proje / oda bilgisi bir dosya yolu gibi gösterilir. */ .calismaHeaderBilgi { min-width: 0; max-width: 420px; justify-self: start; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; overflow: hidden; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan); } .calismaHeaderProjeAdi, .calismaHeaderOdaAdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calismaHeaderProjeAdi { color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; } .calismaHeaderAyrac { flex-shrink: 0; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); } .calismaHeaderOdaAdi { color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .calismaHeaderIslemler { display: flex; align-items: center; justify-content: flex-end; gap: 4px; } .calismaHeaderBtn { height: var(--buton-yukseklik); display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--buton-yuzey); color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear, color 0.1s linear; } .calismaHeaderBtn:hover:not(:disabled) { border-color: var(--renk-kenarlik-koyu); background: var(--buton-yuzey-hover); } /* Basılı rengi açık kabuk döneminden kalma sabit bir değerdi (#dde3ec): koyu temada düğmeye her basıldığında beyaz parlıyordu. */ .calismaHeaderBtn:active:not(:disabled) { background: var(--renk-alan-pasif); } .calismaHeaderBtn:disabled { opacity: 0.45; } /* Kaydet birincil işlemdir. */ .calismaHeaderBtn[data-komut="kaydet"] { border-color: var(--renk-ana-hover); background: linear-gradient( 180deg, #2e74e0, var(--renk-ana) ); color: #ffffff; } .calismaHeaderBtn[data-komut="kaydet"]:hover:not(:disabled) { background: linear-gradient( 180deg, var(--renk-ana), var(--renk-ana-hover) ); } .calismaHeaderBtn[data-komut="kaydet"]:active:not(:disabled) { background: var(--renk-ana-hover); } /* Üretim dosyası butonu Kaydet'in yanında durur. Üretime giden asıl çıktı olduğu için ayrı bir renkte gösterilir. */ .calismaHeaderBtn[data-komut="uretimDosyasiniAl"] { border-color: #197a3c; background: linear-gradient( 180deg, #23974c, #1a7a3d ); color: #ffffff; } .calismaHeaderBtn[data-komut="uretimDosyasiniAl"]:hover:not(:disabled) { background: linear-gradient( 180deg, #1d8944, #166b35 ); } .calismaHeaderBtn[data-komut="uretimDosyasiniAl"]:active:not(:disabled) { background: #166b35; } /* ================================================= 5. ALT DURUM ÇUBUĞU ================================================= */ .durumCubugu { height: var(--durum-yukseklik); flex-shrink: 0; display: flex; align-items: stretch; padding: 0 4px; border-top: 1px solid var(--renk-kenarlik); background: var(--renk-serit); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); white-space: nowrap; } .durumCubuguBolum { display: inline-flex; align-items: center; gap: 5px; height: 100%; padding: 0 9px; overflow: hidden; } /* Sağa yaslanan bölümler. */ .durumCubuguBolum.saga { margin-left: auto; } /* Sunucu eşitlemesi (liste 3 madde 7). Birimden önce, sağa yaslı; birim onun hemen arkasında kalıyor. */ .durumCubuguBolum.sunucu { margin-left: auto; } .durumCubuguBolum.sunucu + .durumCubuguBolum.saga { margin-left: 0; } .durumCubuguBolum.sunucu[hidden] + .durumCubuguBolum.saga { margin-left: auto; } .durumCubuguBolum.sunucu .durumCubuguDeger::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #9aa3ad; vertical-align: 1px; } .durumCubuguBolum.sunucu[data-durum="esitlendi"] .durumCubuguDeger::before { background: #2f9e5b; } .durumCubuguBolum.sunucu[data-durum="gonderiliyor"] .durumCubuguDeger::before, .durumCubuguBolum.sunucu[data-durum="baglaniyor"] .durumCubuguDeger::before { background: #d69a1e; } .durumCubuguBolum.sunucu[data-durum="cevrimdisi"] .durumCubuguDeger::before { background: #c9463d; } .durumCubuguAyrac { width: 1px; flex-shrink: 0; margin: 4px 0; background: var(--renk-kenarlik-acik); } .durumCubuguEtiket { color: var(--renk-yazi-soluk); text-transform: uppercase; letter-spacing: 0.05em; } .durumCubuguDeger { overflow: hidden; text-overflow: ellipsis; color: var(--renk-yazi); font-weight: 600; font-variant-numeric: tabular-nums; } /* Aktif mod göstergesi. */ .durumCubuguBolum.mod .durumCubuguDeger { color: var(--renk-ana-yazi); } /* Dolabın içindeyken rozet uyarı rengine dönüyor (29.09): kullanıcı hangi durumda olduğunu ve Esc ile çıkacağını bir bakışta görsün. */ .durumCubuguBolum.mod[data-mod="dolapIci"] .durumCubuguDeger { color: var(--renk-uyari); } .durumCubuguBolum.mod[data-mod="dolapIci"] .durumCubuguDeger::before { background: var(--renk-uyari); } .durumCubuguBolum.mod .durumCubuguDeger::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--renk-ana); vertical-align: 1px; } /* ============================================================ TEMA DÜĞMESİ ============================================================ Header'ın en sağ ucunda, menü düğmelerinin yanında. Kare: içinde tek bir simge var, yazı genişliği kadar yer kaplamasına gerek yok. Bilerek sessiz duruyor. Günde bir kez, ışık değişince kullanılan bir düğme; komutların arasından sıyrılıp dikkat çekmemeli. TAM EKRAN DÜĞMESİ DE BURADAN GİYİNİYOR (29.09) İncelemede görüldü: "Tam ekran düğmesi hep kalın siyah çerçeveyle çiziliyor, odak halkası gibi duruyor." `tamEkranDugmesi` sınıfı JS'te ekleniyordu ama hiçbir CSS kuralı onu tanımıyordu -- tarayıcının çıplak düğme kenarlığı kalıyordu. Tema düğmesiyle aynı köşede, aynı boyda ve aynı işte (ekranla ilgili, işle değil); aynı kuralı paylaşıyorlar. Odak halkası yalnız klavyeyle (`:focus-visible`) çıkıyor. */ .temaDugmesi, .tamEkranDugmesi { width: var(--buton-yukseklik); height: var(--buton-yukseklik); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--buton-yuzey); color: var(--renk-yazi-ikincil); font-family: inherit; font-size: 13px; line-height: 1; cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear, color 0.1s linear; } .temaDugmesi:hover, .tamEkranDugmesi:hover { border-color: var(--renk-kenarlik-koyu); background: var(--buton-yuzey-hover); color: var(--renk-yazi); } .temaDugmesi:active, .tamEkranDugmesi:active { background: var(--renk-alan-pasif); } .temaDugmesi:focus-visible, .tamEkranDugmesi:focus-visible { outline: 2px solid var(--renk-ana); outline-offset: 1px; } /* Simge yazıyla birlikte kullanılınca (giriş ekranı) düğme genişliyor. */ .temaDugmesi:has(.temaDugmesiYazi) { width: auto; padding: 0 11px; } .temaDugmesiSimge { /* Güneş ve ay farklı yükseklikte oturuyor; blok yapıp ortalayınca düğme değişince simge zıplamıyor. */ display: block; font-size: 14px; line-height: 1; } .temaDugmesiYazi { font-size: var(--yazi-kucuk); font-weight: 600; } /* ============================================================ MARKA ADI ============================================================ İki kelime iki ağırlıkta yazılıyor. "Modüler" ne yaptığını anlatıyor, "Kesim" işin kendisi; göz ikincisine takılıyor. Dar ekranda ad kısalırken de okunan taraf kalın olan oluyor. */ .markaAdi { white-space: nowrap; } .markaAdiOnce { font-weight: 400; color: var(--renk-yazi-ikincil); } .markaAdiSonra { font-weight: 700; color: var(--renk-yazi); letter-spacing: 0.01em; } /* ===== css/bolumler/03-solPanel.css ===== */ /* ================================================= 6. SOL PANEL (ARAÇ PALETİ) ================================================= */ .solPanel { width: var(--sol-panel-genislik); flex-shrink: 0; position: relative; z-index: 10; display: flex; flex-direction: column; overflow: hidden; background: var(--renk-panel); border-right: 1px solid var(--renk-kenarlik); transition: width 0.12s linear; } .solPanelBaslikAlani { height: var(--bolum-baslik-yukseklik); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 4px 0 9px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-bolum-baslik); } .solPanelBaslik { margin: 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .solPanelDaraltBtn { width: 19px; height: 19px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--renk-yazi-ikincil); font-size: 13px; line-height: 1; cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear; } .solPanelDaraltBtn:hover { border-color: var(--renk-kenarlik); background: var(--renk-alan); } #solPanelIcerik, .solPanelIcerik { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: 0; } .solPanelBosBilgi { margin: 8px; padding: 10px; border: 1px dashed var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.45; text-align: center; } /* ================================================= 7. SOL PANEL BÖLÜMLERİ ================================================= */ .solPanelBolumu { width: 100%; border: 0; border-bottom: 1px solid var(--renk-kenarlik); background: transparent; } /* Bölüm başlığı kaydırırken üstte yapışık kalır. */ .solPanelAnaBolumBasligi { /* GİZLİ Panelin kendi başlığı (h2) artık açık bölümün adını yazıyor; bu başlık onu tekrarlıyordu. Düzenleme modunda ikisi de "Araçlar" oluyordu — aynı kelime, iki satır. Öğe DOM'da duruyor: panel başlığı adını buradan okuyor ve data-bolum bilgisi kayıtlı kalıyor. Yalnız ekranda görünmüyor. */ display: none; height: var(--bolum-baslik-yukseklik); position: sticky; top: 0; z-index: 3; align-items: center; justify-content: space-between; padding: 0 9px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-bolum-baslik); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .solPanelBolumIcerigi { display: flex; flex-direction: column; padding: 0; } .dinamikKutuphaneBolumu { border-bottom: 0; } .dinamikKutuphaneIcerigi { padding: 0; } .solPanelBolumu.modTarafindanGizlendi, .solPanelAcilirMenu.modTarafindanGizlendi { display: none !important; } /* ================================================= 8. SOL PANEL AÇILIR MENÜLER ================================================= */ .solPanelAcilirMenu { width: 100%; border: 0; border-bottom: 1px solid var(--renk-kenarlik-acik); background: transparent; } .solPanelAcilirMenuBtn { width: 100%; height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 9px; border: 0; background: transparent; color: var(--renk-yazi); cursor: pointer; text-align: left; transition: background 0.1s linear; } .solPanelAcilirMenuBtn:hover { background: var(--renk-ana-acik); } .solPanelAcilirMenu.acik > .solPanelAcilirMenuBtn { background: var(--renk-alan-vurgu); } .solPanelAcilirMenuMetni { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--yazi-kucuk); font-weight: 600; } .solPanelAcilirMenuOku { width: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--renk-yazi-soluk); font-size: 11px; line-height: 1; } .solPanelAcilirMenuIcerik { display: flex; flex-direction: column; padding: 2px 0 4px; background: var(--renk-alan); border-top: 1px solid var(--renk-kenarlik-acik); } /* İç içe menüler girintili gösterilir ve bir ağaç çizgisi taşır. */ .solPanelAcilirMenuIcerik > .solPanelAcilirMenu { margin-left: 10px; border-left: 1px solid var(--renk-kenarlik-acik); } /* ================================================= 9. SOL PANEL ARAÇ BUTONLARI ================================================= */ .solPanelAracBtn { width: 100%; min-height: 28px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 4px 9px 4px 16px; border: 0; border-left: 2px solid transparent; background: transparent; cursor: pointer; text-align: left; transition: background 0.1s linear, border-color 0.1s linear; } .solPanelAracBtn:hover:not(:disabled) { background: var(--renk-ana-acik); } .solPanelAracBtn:active:not(:disabled) { background: #d2e1fa; } /* Seçili araç kategorisi. Daha önce JavaScript içinde satır içi stille yapılıyordu, artık sınıfla. */ .solPanelAracBtn.aktif { border-left-color: var(--renk-ana); background: var(--renk-ana-acik); } .solPanelAracBtn.aktif .solPanelAracAnaMetin { color: var(--renk-ana-hover); } .solPanelAracAnaMetin { color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; } .solPanelAracAltMetin { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.3; } .solPanelAracBtn:disabled, .solPanelAracBtn.devreDisi { cursor: not-allowed; opacity: 0.45; background: transparent; } /* ================================================= 10. KÜTÜPHANE MODEL SATIRLARI ================================================= */ .dinamikKutuphaneMenusu { border-bottom-color: var(--renk-kenarlik-acik); } .kutuphaneModelSatiri { width: 100%; min-height: 40px; display: flex; align-items: stretch; border-left: 2px solid transparent; transition: background 0.1s linear; } .kutuphaneModelSatiri:hover { background: var(--renk-ana-acik); } .kutuphaneModelBtn { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border: 0; background: transparent; cursor: pointer; text-align: left; } /* ------------------------------------------------- MODEL MİNYATÜRÜ İkon motorunun ürettiği görsel buraya oturur. Görsel gelmeden önce ve hiç gelemezse aynı ölçüde soluk bir yer tutucu durur; satırlar böylece zıplamaz. ------------------------------------------------- */ .kutuphaneModelIkonu { width: 32px; height: 32px; min-width: 32px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--renk-ana-acik); overflow: hidden; } .kutuphaneModelIkonu[data-durum="hazir"] { background: transparent; } .kutuphaneModelIkonGorseli { width: 100%; height: 100%; object-fit: contain; /* Minyatür küçültülürken kenarlar yumuşasın. */ image-rendering: auto; } .kutuphaneModelMetni { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .kutuphaneModelAdi { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 500; } .kutuphaneModelKodu { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } .kutuphaneModelSilBtn { width: 22px; min-width: 22px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--renk-yazi-soluk); font-size: 15px; line-height: 1; opacity: 0; cursor: pointer; transition: color 0.1s linear, background 0.1s linear, opacity 0.1s linear; } .kutuphaneModelSatiri:hover .kutuphaneModelSilBtn, .kutuphaneModelSatiri:focus-within .kutuphaneModelSilBtn { opacity: 1; } .kutuphaneModelSilBtn:hover:not(:disabled) { background: var(--renk-tehlike); color: #ffffff; } .kutuphaneModelSilBtn:disabled { opacity: 0.35; } .kutuphaneBosBilgi, .kutuphaneKategoriBos { margin: 6px 8px; padding: 8px; border: 1px dashed var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.4; text-align: center; } /* ================================================= 11. SOL PANEL DAR DURUMU ================================================= */ .solPanel.solPanelDar { width: var(--sol-panel-dar-genislik); } .solPanel.solPanelDar .solPanelBaslik { display: none; } .solPanel.solPanelDar .solPanelBaslikAlani { justify-content: center; padding: 0; } .solPanel.solPanelDar #solPanelIcerik, .solPanel.solPanelDar .solPanelIcerik { display: none; } /* ================================================= 12. KASA KÖŞE KONTROLLERİ Dört köşe için 2x2 ikon ızgarası. Izgara fiziksel yerleşimi taklit eder: sol üst ikon gerçekten sol üst köşedir. ================================================= */ .kasaKoseKontrolleri { display: flex; flex-direction: column; gap: 6px; margin: 6px 8px 10px; padding: 8px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan); } .kasaKoseBasligi { color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 700; } .kasaKoseAciklamasi { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.4; } .kasaKoseIzgarasi { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 5px; } .kasaKoseBtn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); color: var(--renk-yazi); cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear; } .kasaKoseBtn:hover:not(:disabled) { border-color: var(--renk-ana-kenar); background: var(--renk-ana-acik); } .kasaKoseBtn:disabled { cursor: not-allowed; opacity: 0.45; } .kasaKoseIkonu { width: 40px; height: 40px; flex-shrink: 0; } /* İçeride kalan parça soluk, dışta kalan parça vurgulu çizilir. Hangisinin hangisinin üstüne bindiği ikondan okunur. */ .kasaKoseIkonDikey, .kasaKoseIkonYatay { fill: var(--renk-kenarlik-koyu); opacity: 0.45; } .kasaKoseIkonDista { fill: var(--renk-ana); opacity: 1; } .kasaKoseEtiketi { font-size: var(--yazi-mini); font-weight: 600; line-height: 1.2; } .kasaKoseAltEtiketi { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.2; text-align: center; } .kasaKoseDurumu { padding-top: 4px; border-top: 1px solid var(--renk-kenarlik-acik); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); line-height: 1.4; } .kasaKoseKontrolleriPasif .kasaKoseDurumu { color: var(--renk-yazi-soluk); } /* Önizleme: fare ikonun üstündeyken tıklamanın SONUCU çizilir. Henüz uygulanmadığı için çerçeve kesik ve dıştaki parça yarı saydam; "olan" ile "olacak" birbirine karışmasın. */ .kasaKoseBtn.kasaKoseBtnOnizleme { border-style: dashed; border-color: var(--renk-ana); background: var(--renk-ana-acik); } .kasaKoseBtnOnizleme .kasaKoseIkonDista { opacity: 0.6; } .kasaKoseBtnOnizleme .kasaKoseAltEtiketi { color: var(--renk-ana-hover); font-weight: 600; } /* ================================================= 13. KASA TİPİ SEÇENEKLERİ Kasa tipleri de köşe ikonlarıyla aynı dili konuşur: gövde ikonunda köşeye kadar uzanan parça dıştadır. Açıklama butonun içinde durmaz, üzerine gelince altta belirir. ================================================= */ .kasaTipiSecenekleri { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px 8px; } .kasaTipiIzgarasi { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 5px; } .kasaTipiBtn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); color: var(--renk-yazi); cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear; } .kasaTipiBtn:hover, .kasaTipiBtn:focus-visible { border-color: var(--renk-ana); background: var(--renk-ana-acik); outline: none; } .kasaGovdeIkonu { width: 48px; height: 48px; flex-shrink: 0; } /* Köşe ikonlarıyla aynı renk sözleşmesi: dışta kalan parça vurgulu, içeride kalan soluk. Gövde ikonunda hangi parçanın dışta olduğu uzunluğundan okunur, bu yüzden dört parça da vurgulu çizilir. */ .kasaGovdeIkonDikey, .kasaGovdeIkonYatay { fill: var(--renk-kenarlik-koyu); opacity: 0.45; } .kasaGovdeIkonDista { fill: var(--renk-ana); opacity: 1; } .kasaTipiEtiketi { font-size: var(--yazi-mini); font-weight: 600; line-height: 1.2; } .kasaTipiAciklamasi { min-height: 30px; padding-top: 4px; border-top: 1px solid var(--renk-kenarlik-acik); color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.4; } .kasaTipiAciklamasiVurgulu { color: var(--renk-yazi-ikincil); } /* ------------------------------------------------ KÜTÜPHANE BOŞ DURUMU (G5) ------------------------------------------------ */ .kutuphaneBosDurum { text-align: left; } .kutuphaneBosBaslik { font-weight: 600; margin-bottom: 4px; } .kutuphaneBosAciklama { font-size: var(--yazi-mini); color: var(--renk-yazi-ikincil); line-height: 1.4; } .kutuphaneBosDugmeler { display: flex; gap: 6px; margin-top: 8px; } .kutuphaneBosBtn { flex: 1; padding: 5px 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-ana-yazi); font: inherit; font-size: var(--yazi-mini); cursor: pointer; } .kutuphaneBosBtn:hover { background: var(--renk-ana-acik); color: var(--renk-ana-hover); } /* ------------------------------------------------ "YAKINDA" KATMANI (G9) ------------------------------------------------ Planlanan araçlar grubun içinde, kapalı ve soluk. */ .solPanelYakindaMenusu { margin: 4px 0 0 8px; opacity: 0.8; } /* Araç kategorileri ikon ızgarası (gezinti 10.09) */ .solPanelAracIkonIzgara { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px 8px; } .solPanelAracBtn.ikonlu { position: relative; width: auto; min-height: 40px; align-items: center; justify-content: center; padding: 6px 4px; border: 1px solid transparent; border-left-width: 1px; border-radius: 6px; } .solPanelAracBtn.ikonlu .solPanelAracAnaMetin, .solPanelAracBtn.ikonlu .solPanelAracAltMetin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .solPanelAracIkon { display: inline-flex; width: 22px; height: 22px; color: var(--renk-metin-ikincil, #4a5568); } .solPanelAracIkon svg { width: 100%; height: 100%; } .solPanelAracBtn.ikonlu.aktif { border-color: var(--renk-ana); background: var(--renk-ana-acik); } .solPanelAracBtn.ikonlu.aktif .solPanelAracIkon { color: var(--renk-ana-hover); } .solPanelAracBtn.ikonlu::after { content: attr(data-etiket); position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); padding: 3px 7px; border-radius: 4px; background: #1f2937; color: #fff; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s linear; z-index: 5; } .solPanelAracBtn.ikonlu:hover::after, .solPanelAracBtn.ikonlu:focus-visible::after { opacity: 1; } .solPanelAracIpucu { margin: 4px 10px 8px; padding: 6px 8px; border-left: 3px solid var(--renk-ana); background: var(--renk-ana-acik); font-size: 12px; line-height: 1.35; } /* ===== css/bolumler/04-cizimAlani.css ===== */ /* ================================================= 12. ÇİZİM ALANI (VIEWPORT) ================================================= */ .cizimBolumu { flex: 1; min-width: 0; min-height: 0; position: relative; z-index: 1; overflow: hidden; background: var(--renk-zemin); } #cizimAlani, .cizimAlani { width: 100%; height: 100%; position: relative; overflow: hidden; background: linear-gradient(180deg, var(--viewport-ust), var(--viewport-alt)); /* Görünüm alanı panellerin arasına gömülmüş gibi durur. */ box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06); } #cizimAlani canvas, .cizimAlani canvas, .threeCanvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; z-index: 1; } /* Üç boyutlu alanda fare imleci taşıma imlecine döner. */ .threeCanvas { cursor: crosshair; } /* ------------------------------------------------- ÇALIŞMA MODU SEKMELERİ Görünüm alanının sol üstünde duran bölümlü düğme (segmented control). ------------------------------------------------- */ /* ------------------------------------------------- ÜST ŞERİT (D154) Mod sekmeleri ile görünüm çubuğu aynı satırda. İkisi ayrı ayrı konumlanınca çizim alanı dar kalınca üst üste biniyorlardı ve "Düzenleme Modu" fareyle tıklanamıyordu. Yer yetmezse çubuk alt satıra iniyor. ------------------------------------------------- */ .calismaUstSerit { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 6; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px; /* Şeridin BOŞLUĞU çizim alanının kendisi: tıklama oraya geçmeli. Düğmeler kendi `pointer-events`ini geri açıyor. */ pointer-events: none; } .calismaModSekmeleri { position: relative; z-index: 6; pointer-events: auto; display: flex; align-items: center; padding: 0; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); overflow: hidden; background: var(--renk-alan); box-shadow: var(--golge-yuzen); } .calismaModSekmesi { min-width: 96px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 0; border-right: 1px solid var(--renk-kenarlik-acik); border-radius: 0; background: transparent; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; transition: background 0.1s linear, color 0.1s linear; } .calismaModSekmesi:last-child { border-right: 0; } .calismaModSekmesi:hover:not(:disabled):not(.aktif) { background: var(--renk-ana-acik); color: var(--renk-yazi); } .calismaModSekmesi.aktif { background: var(--renk-ana); color: #ffffff; } .calismaModSekmesi:disabled { cursor: not-allowed; opacity: 0.4; } /* ------------------------------------------------- GÖRÜNÜM HUD'U Görünüm alanının sağ üstünde duran kamera açısı düğmeleri. ------------------------------------------------- */ .gorunumHud { position: relative; z-index: 6; pointer-events: auto; /* ORTADA (kullanıcı 23.09) > "şu HUD ta ortaya gelsin, sağ tarafta sıkışmış > kalmış" Sağa yaslıydı (`margin-left: auto`) ve mod sekmeleri büyüdükçe kalan yere sıkışıyordu: yedi düğme sağ kenara yapışıp alt satıra dökülüyordu. Artık şeridin ortasında: iki yanındaki boşluk eşit, düğmeler yan yana duruyor. Sekmeler soldan büyüse de HUD yerinden oynamıyor. */ margin: 0 auto; display: flex; align-items: center; /* Dar şeritte düğmeler alt satıra iniyor; çubuk kırpılmıyor. */ flex-wrap: wrap; justify-content: center; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); overflow: hidden; background: var(--renk-alan); box-shadow: var(--golge-yuzen); } .gorunumHudBtn { min-width: 34px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; border: 0; border-right: 1px solid var(--renk-kenarlik-acik); background: transparent; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: background 0.1s linear, color 0.1s linear; } .gorunumHudBtn:last-child { border-right: 0; } .gorunumHudBtn:hover { background: var(--renk-ana-acik); color: var(--renk-ana-hover); } .gorunumHudBtn:active { background: var(--renk-ana); color: #ffffff; } /* Sığdır butonu diğerlerinden ayrılır. */ .gorunumHudBtn[data-gorunum="sigdir"] { border-left: 1px solid var(--renk-kenarlik); color: var(--renk-ana-yazi); } /* ------------------------------------------------- GERİ AL / İLERİ AL ------------------------------------------------- Kullanıcı istedi: Ctrl+Z çalışıyordu ama görünmüyordu. Görünmeyen özellik kullanılmıyor — geri alabileceğini bilmeyen kullanıcı denemekten de çekiniyor. Kamera düğmelerinden bir boşlukla ayrılıyorlar: biri bakış açısı, öteki proje geçmişi. Aynı şeritte ama aynı iş değil. */ /* Ayıracın solundaki düğmenin kendi çizgisi de var; ikisi yan yana gelince çift çizgi görünüyordu. Ekranda görünce kaldırdım. */ .gorunumHudBtn:has(+ .gorunumHudAyirac) { border-right: 0; } /* Grup etiketi (G8): "Bakış" · "Göster". Düğme değil, tıklanmaz; küçük ve soluk. */ .gorunumHudEtiket { padding: 0 4px 0 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--renk-yazi-ikincil); user-select: none; pointer-events: none; } .gorunumHudAyirac { width: 1px; height: 14px; margin: 0 5px; background: var(--renk-kenarlik); } .gorunumHudBtn[data-gorunum="geriAl"], .gorunumHudBtn[data-gorunum="ileriAl"] { min-width: 28px; padding: 0 6px; /* Ok simgesi mini yazıda okunmuyor; bir tık büyük. */ font-size: 14px; line-height: 1; } /* Yığında adım yoksa soluk. "Bastım da bir şey olmadı" sorusunu doğuran şey, çalışmayan düğmenin çalışıyor görünmesi. */ .gorunumHudBtn.pasif { opacity: 0.35; cursor: default; } .gorunumHudBtn.pasif:hover { background: transparent; color: var(--renk-yazi-ikincil); } /* ------------------------------------------------- BOŞ DURUM BİLGİSİ ------------------------------------------------- */ .cizimAlaniBosDurum { width: min( 320px, calc(100% - 32px) ); position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate( -50%, -50% ); padding: 18px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-orta); background: rgba(255, 255, 255, 0.9); color: var(--renk-yazi-ikincil); text-align: center; pointer-events: none; } .cizimAlaniBosDurum h3 { margin: 0 0 6px; color: var(--renk-yazi); font-size: 13px; font-weight: 700; } .cizimAlaniBosDurum p { margin: 0; font-size: var(--yazi-kucuk); line-height: 1.5; } #cizimAlani:has(canvas) .cizimAlaniBosDurum, .cizimAlani:has(canvas) .cizimAlaniBosDurum { display: none; } /* Eski mod bilgisi rozeti. Artık durum çubuğu bu bilgiyi gösterdiği için gizlenir. */ .calismaModBilgisi { display: none; } /* ÖLÇÜ DÜĞMESİ AÇIKKEN Aynı düğme hem açıyor hem kapatıyor. Hangi durumda olduğu görünmezse kullanıcı ölçüler çıkmadığında düğmeye mi basmadığını yoksa dolap mı olmadığını bilemez. */ .gorunumHudBtn.gorunumHudBtnAktif { background: var(--renk-ana); color: #ffffff; border-color: var(--renk-ana); } .gorunumHudBtn.gorunumHudBtnAktif:hover { background: var(--renk-ana); filter: brightness(1.08); } /* ============================================================ 3B AÇILAMADI MESAJI (D135) ============================================================ Denetleyen oturumun başına geldi -- kullanıcının kendi ekran kartında: çizim alanı bomboş kaldı, sebep yalnız konsolda yazıyordu. Kullanıcı konsola bakmaz. Mesaj çizim alanının ORTASINDA duruyor: boş ekrana bakan kişi onu aramak zorunda kalmamalı. */ .uc3BAcilamadiKutusu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 460px; padding: 24px 28px; background: var(--renk-yuzey, #ffffff); border: 1px solid var(--renk-kenar, #d7dee7); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); text-align: left; z-index: 5; } .uc3BAcilamadiKutusuBaslik { margin-bottom: 10px; font-size: 17px; font-weight: 600; color: var(--renk-yazi, #2f3742); } /* Güvence cümlesi en önemlisi: kullanıcı ilk anda verisini kaybettiğini sanıyor. Vurgulu duruyor. */ .uc3BAcilamadiKutusuGuvence { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--renk-yazi, #2f3742); } .uc3BAcilamadiKutusuYapilacak { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--renk-yazi-ikincil, #5b6675); } /* Teknik satır destek isterken işe yarıyor; ilk okumada korkutmasın diye küçük ve soluk. */ .uc3BAcilamadiKutusuTeknik { margin: 0; font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.4; color: var(--renk-yazi-soluk, #8894a3); word-break: break-word; } /* ===== css/bolumler/05-sagPanel.css ===== */ /* ================================================= 13. SAĞ PANEL (ÖZELLİK DENETÇİSİ) ================================================= */ #sagPanel, .sagPanel { width: var(--sag-panel-genislik); flex-shrink: 0; position: relative; z-index: 10; display: flex; flex-direction: column; overflow: hidden; background: var(--renk-panel); border-left: 1px solid var(--renk-kenarlik); transition: width 0.12s linear; } #sagPanel.sagPanelAcik, .sagPanel.sagPanelAcik { width: var(--sag-panel-genislik); visibility: visible; opacity: 1; pointer-events: auto; } /* Panel kapanınca yer kaplamaz. Böylece görünüm alanı genişler; web sitesi gibi üstüne binmez. */ #sagPanel.sagPanelKapali, .sagPanel.sagPanelKapali { width: 0; border-left-width: 0; visibility: hidden; opacity: 0; pointer-events: none; } .sagPanelBaslikAlani { height: var(--bolum-baslik-yukseklik); flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 4px 0 9px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-bolum-baslik); } .sagPanelBaslik { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } #sagPanelIcerik, .sagPanelIcerik { width: 100%; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 0 20px; background: var(--renk-panel); overscroll-behavior: contain; } /* ================================================= 14. SAĞ PANEL ÜST BUTONLARI ================================================= */ .sagPanelSabitleBtn, .sagPanelKapatBtn { width: 19px; height: 19px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--renk-yazi-ikincil); line-height: 1; cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear, color 0.1s linear; } .sagPanelSabitleBtn { margin-left: auto; font-size: 11px; } .sagPanelKapatBtn { font-size: 14px; } .sagPanelSabitleBtn:hover:not(:disabled) { border-color: var(--renk-kenarlik); background: var(--renk-alan); } .sagPanelSabitleBtn.aktif { border-color: var(--renk-ana); background: var(--renk-ana); color: #ffffff; } .sagPanelKapatBtn:hover:not(:disabled) { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike); color: #ffffff; } .sagPanelSabitleBtn:disabled, .sagPanelKapatBtn:disabled { opacity: 0.4; } /* ================================================= 15. SAĞ PANEL FORM YAPISI ================================================= */ .sagPanelForm { width: 100%; display: flex; flex-direction: column; } /* Her bölüm tam genişlikte bir şerittir. Kart görünümü kullanılmaz. */ .sagPanelFormBolumu { width: 100%; border: 0; border-bottom: 1px solid var(--renk-kenarlik); background: transparent; } .sagPanelFormBolumBasligi { height: var(--bolum-baslik-yukseklik); display: flex; align-items: center; margin: 0; padding: 0 9px; border: 0; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-bolum-baslik); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .sagPanelFormBolumIcerigi { display: flex; flex-direction: column; gap: 3px; padding: 6px 9px 8px; background: var(--renk-panel); } /* ------------------------------------------------- ÖZELLİK SATIRI Masaüstü denetçilerindeki gibi solda etiket, sağda değer. ------------------------------------------------- */ .sagPanelFormSatiri, .sagPanelSayiAlani { width: 100%; min-height: var(--alan-yukseklik); display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; } .sagPanelFormEtiketi, .sagPanelAlanEtiketi { /* 96 px'lik etiket sütunu (29.09): "Bu parçanın tol…", "Bu panelin bağ…" diye kesiliyordu. Artık sözcükten sarılıyor; "Genişlik", "Derinlik" gibi kısa etiketler tek satırda kalıyor ve sayı satırları aynı boyda. */ min-width: 0; overflow-wrap: break-word; line-height: 1.25; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } /* ------------------------------------------------- İŞLEM BUTONU IZGARASI ------------------------------------------------- */ .sagPanelDolapIslemButonlari { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 4px; } /* Aracın neden çıkmadığını söyleyen satır (D133). Köşe dolapta çekmece düğmesi hiç basılmıyor; kullanıcı düğmenin kaybolduğunu görüp neden diye sormasın diye sebebi burada yazıyor. İki sütunlu ızgarada tam genişlik kaplıyor. */ .bolgeAracUyarisi { grid-column: 1 / -1; margin: 0; padding: 8px; border-radius: 4px; background: var(--renk-yuzey-ikincil, rgba(0, 0, 0, 0.04)); color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.5; } .sagPanelDolapIslemButonlari .sagPanelIslemBtn[data-komut="dolabiDuzenle"], .sagPanelDolapIslemButonlari .sagPanelIslemBtn[data-komut="dolabiTasi"], .sagPanelDolapIslemButonlari .sagPanelIslemBtn.tehlikeli, .sagPanelDolapIslemButonlari .sagPanelIslemBtn[data-komut="dolabiSil"], .sagPanelDolapIslemButonlari .sagPanelIslemBtn.vurgulu { grid-column: 1 / -1; } /* ============================================================ EKLEME DÜĞMESİ PANELE YAPIŞIK (21.09) ============================================================ Gerçek ekranda ölçtüm: bölge araçlarında kapak düzenini seçtikten sonra "Kapak Ekle" düğmesi ayar panelinin altında kalıyor, kaydırmadan görünmüyordu. Kullanıcı düzeni seçip "oldu" sanıyor, hiçbir şey eklenmiyordu. Düğme artık panelin altına yapışık duruyor; arkasında sayfa kayarken o yerinde kalıyor. */ .sagPanelIslemBtn.yapisikEylem { position: sticky; bottom: 0; z-index: 2; /* Altından kayan içerik düğmenin içinden görünmesin. */ background: var(--renk-panel, #fff); box-shadow: 0 -6px 10px -8px rgba(15, 23, 42, 0.45); } /* Izgarada tek başına kalan son buton boş göz bırakmasın. */ .sagPanelDolapIslemButonlari .sagPanelIslemBtn:last-child:nth-child(odd) { grid-column: 1 / -1; } /* ------------------------------------------------- DOLAP İŞLEMLERİ: ÜÇ SIRA, ÜÇ ANLAM ------------------------------------------------- Önce dört sıraydı: Düzenle / Kopyala+Döndür / Taşı / Sil. Panelin yarısını düğme duvarı yiyor, asıl bilgi aşağı itiliyordu. Taşı'nın tek başına tam genişlik olması da düzeni tutarsız gösteriyordu. Artık gruplar anlamına göre diziliyor: Dolabı Düzenle asıl iş Kopyala Döndür Taşı dolabı oynatanlar Sil geri dönüşü olmayan Bir sıra kazanıldı ve hangi düğmenin ne işe yaradığı diziliminden okunuyor. Kural YALNIZ bu bölüme kapsanıyor: aynı ızgara sınıfını bölge ve panel işlemleri de kullanıyor, onların düğme sayısı farklı. */ .sagPanelDolapIslemleri .sagPanelDolapIslemButonlari { grid-template-columns: repeat( 3, minmax(0, 1fr) ); } /* Taşı artık tam genişlik değil; Kopyala ve Döndür ile aynı sırayı paylaşıyor. Sil'in tam genişlik kuralına dokunmuyoruz: beşinci ve son düğme olduğu için "tek kalan buton" kuralı zaten onu satırın tamamına yayıyor. */ .sagPanelDolapIslemleri .sagPanelDolapIslemButonlari .sagPanelIslemBtn[data-komut="dolabiTasi"] { grid-column: span 1; } .sagPanelDolapKutuphane .sagPanelDolapIslemButonlari { grid-template-columns: minmax(0, 1fr); } /* ================================================= 16. SAĞ PANEL AÇILIR BÖLÜMLER ================================================= */ .sagPanelAcilirBolumBasligi { width: 100%; justify-content: flex-start; gap: 6px; cursor: pointer; text-align: left; transition: background 0.1s linear, color 0.1s linear; } .sagPanelAcilirBolumBasligi:hover { background: var(--renk-ana-acik); color: var(--renk-yazi); } .sagPanelBolumOku { width: 10px; height: 10px; flex: 0 0 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--renk-yazi-soluk); font-size: 8px; line-height: 1; transition: transform 0.12s linear; } .sagPanelBolumOku::before { content: "▶"; } .sagPanelFormBolumu.acik .sagPanelBolumOku { transform: rotate(90deg); color: var(--renk-ana-yazi); } .sagPanelBolumBaslikYazisi { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sagPanelSabitBolumBasligi { cursor: default; } /* BÖLÜM ÖZETİ (kullanıcı 22.09) Katlanır başlığın sağında, o bölümün mevcut değeri: "Kulp · solda", "4/4 bant", "yok". Açmadan görünsün diye var -- kullanıcı kulpun tarafını öğrenmek için bölümü açıp kapatıyordu. Başlık yazısı `flex: 1` olduğu için özet kendiliğinden sağa yaslanıyor. Dar panelde başlık kısalır, özet okunur kalır: asıl bilgi özette. */ .sagPanelBolumOzeti { flex: 0 1 auto; min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 400; color: var(--renk-yazi-soluk); /* Başlığın kendi harf aralığı özeti bozmasın. */ letter-spacing: 0; text-transform: none; } .sagPanelFormBolumIcerigi[hidden] { display: none !important; } /* ================================================= 17. SAĞ PANEL GİRİŞ ALANLARI ================================================= */ .sagPanelInput, .sagPanelAlanInput { width: 100%; height: var(--alan-yukseklik); padding: 0 7px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); outline: none; background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-kucuk); transition: border-color 0.1s linear, box-shadow 0.1s linear; } /* Sayı alanları hizalı rakamla ve sağa yaslı gösterilir. */ .sagPanelSayiInput, .sagPanelAlanInput, input[type="number"], input[data-sayi-alani] { font-variant-numeric: tabular-nums; text-align: right; } /* Açılır liste. Sayı alanıyla aynı kutu; yalnız metni sola yaslı ve oku için sağda yer var. */ .sagPanelSecimInput { text-align: left; padding-right: 4px; cursor: pointer; } /* Onay kutusu satırı: etiket solda, kutu sağda. */ .sagPanelOnaySatiri { cursor: pointer; } .sagPanelOnayKutusu { width: 16px; height: 16px; margin: 0; accent-color: var(--renk-vurgu, #2d6cdf); cursor: pointer; } .sagPanelInput::placeholder, .sagPanelAlanInput::placeholder { color: var(--renk-yazi-soluk); } .sagPanelInput:hover:not(:disabled), .sagPanelAlanInput:hover:not(:disabled) { border-color: var(--renk-kenarlik-koyu); } .sagPanelInput:focus, .sagPanelAlanInput:focus { border-color: var(--renk-ana); box-shadow: inset 0 0 0 1px var(--renk-ana); } .sagPanelInput:disabled, .sagPanelInput[readonly], .sagPanelAlanInput:disabled { cursor: not-allowed; background: var(--renk-alan-pasif); color: var(--renk-yazi-soluk); } .sagPanelSayiKapsayici { width: 100%; position: relative; display: flex; align-items: center; } .sagPanelSayiInput { padding-right: 30px; } /* Birim etiketi alanın içine gömülür. */ .sagPanelBirim { position: absolute; top: 1px; right: 1px; bottom: 1px; display: flex; align-items: center; padding: 0 6px; border-left: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); font-weight: 600; pointer-events: none; } /* ▲▼ DÜĞMELERİ (Ö6) Sayı alanları virgüllü ondalık kabul edebilsin diye type="number" bırakıldı; tarayıcının kendi okları da onunla gitti. Bunlar bizim oklarımız. Kapsayıcı zaten "position: relative"; birim etiketiyle aynı yöntemle sağ kenara oturuyorlar. Birim varsa ok sütunu onun soluna geçiyor. */ .sagPanelSayiOklari { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 18px; display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid var(--renk-kenarlik-acik); opacity: 0.4; } .sagPanelSayiKapsayici:hover .sagPanelSayiOklari, .sagPanelSayiKapsayici:focus-within .sagPanelSayiOklari { opacity: 1; } .sagPanelSayiOku { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: var(--renk-alan-vurgu); color: var(--renk-yazi-soluk); font-size: 9px; line-height: 1; cursor: pointer; user-select: none; } .sagPanelSayiOku:hover { background: var(--renk-kenarlik-acik); color: var(--renk-yazi); } /* Yazı ok sütununun altına girmesin. */ .sagPanelSayiKapsayiciOklu .sagPanelSayiInput { padding-right: 24px; } .sagPanelSayiKapsayiciOkluBirimli .sagPanelSayiInput { padding-right: 52px; } .sagPanelSayiKapsayiciOkluBirimli .sagPanelBirim { right: 20px; } .sagPanelSayiInput::-webkit-inner-spin-button, .sagPanelSayiInput::-webkit-outer-spin-button { margin-left: 2px; opacity: 0.4; } .sagPanelSayiInput:hover::-webkit-inner-spin-button, .sagPanelSayiInput:focus::-webkit-inner-spin-button { opacity: 1; } /* ================================================= 18. SAĞ PANEL BİLGİ SATIRLARI ================================================= */ .sagPanelBilgiSatiri { width: 100%; min-height: 22px; display: flex; /* Değer iki satıra sarılınca etiket ilk satırla hizalı. */ align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 7px; border: 0; border-radius: 2px; background: transparent; } /* Okumayı kolaylaştıran satır gölgeleme. */ .sagPanelBilgiSatiri:nth-child(odd) { background: var(--renk-alan-vurgu); } .sagPanelBilgiEtiketi { flex: 1 1 auto; min-width: 0; /* Etiket de sarılabiliyor (29.09): "Gövde bağlan…" gibi kesik etiketler vardı. Kısa etiket tek satırda kalıyor. */ overflow-wrap: break-word; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .sagPanelBilgiDegeri { /* 62 % idi; tek satırda keserken yeterliydi. Sarılınca "Ayaklı dolap · ayak 100 / mm" gibi gereksiz satır kırıyordu -- "Durum" gibi kısa etiketin yanında yer boş kalıyor. Uzun etiket yine de %28'lik yer buluyor. */ max-width: 72%; /* SÖZCÜKTEN SARILIYOR (29.09) Önce "overflow-wrap: anywhere" vardı: uzun değer harfin ortasından kırılıp satırı büyütüyordu. Sonra tek satır + üç nokta yapıldı; tamamı title'daydı. İnceleme bunun da okunmadığını gösterdi: "Kapak / çekmece cephes…", "Yalnız bu dolap. Proje ay…", "5,18 kg · boş: tür varsay…". title dokunmatikte hiç çıkmıyor, masaüstünde de beklemek gerekiyor. Artık sözcük aralarından sarılıyor (tek sözcük sığmazsa o zaman kırılıyor). Kısa değerler yine tek satır; sayı satırları (En/Boy/Kalınlık) hiç değişmiyor. Etiket üstte hizalı kalsın diye satır `baseline`a geçiyor. */ overflow-wrap: break-word; line-height: 1.35; color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } .sagPanelBilgiKutusu { width: 100%; margin: 4px 0; padding: 9px; border: 1px dashed var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.45; text-align: center; } .sagPanelSaltOkunur { width: 100%; display: flex; flex-direction: column; gap: 0; padding: 6px 9px; } /* ------------------------------------------------- PANEL KENAR BÖLÜMÜ ------------------------------------------------- */ .sagPanelPanelKenarBolumu .sagPanelFormBolumIcerigi { padding-top: 0; } .sagPanelPanelKenarAciklama { margin: 0; padding: 6px 9px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.45; } /* ================================================= 19. SAĞ PANEL İŞLEM BUTONLARI ================================================= */ .sagPanelIslemBtn { width: 100%; min-height: var(--buton-yukseklik); display: flex; align-items: center; justify-content: center; padding: 4px 9px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--buton-yuzey); color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear, color 0.1s linear; } .sagPanelIslemBtn:hover:not(:disabled) { border-color: var(--renk-kenarlik-koyu); background: var(--buton-yuzey-hover); } .sagPanelIslemBtn:active:not(:disabled) { background: #dde3ec; } /* Bölüm içindeki ana işlem butonu. */ .sagPanelIslemBtn[data-komut="dolabiDuzenle"], .sagPanelIslemBtn.vurgulu { border-color: var(--renk-ana-kenar); background: var(--renk-ana-acik); color: var(--renk-ana-hover); } .sagPanelIslemBtn[data-komut="dolabiDuzenle"]:hover:not(:disabled), .sagPanelIslemBtn.vurgulu:hover:not(:disabled) { border-color: var(--renk-ana); background: var(--renk-ana); color: #ffffff; } /* KÜTÜPHANEYE EKLE İKİNCİL (29.09) Eskiden mavi dolgulu birincil düğmeydi. Denetleyen oturum: "Dolap İşlemleri"nin hemen altında, panelin en iri ve en parlak düğmesi -- dolap düzenlerken asıl iş bu değil, göz ilk ona gidiyordu. Artık öteki işlem düğmeleriyle aynı (ikincil) görünüm; burada ayrı bir kural yok. */ /* Tehlikeli işlem butonu. */ .sagPanelIslemBtn.tehlikeli, .sagPanelIslemBtn[data-komut="dolabiSil"] { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } /* KOYU TEMADA OKUNUR KIRMIZI (29.09) İnceleme, koyu tema: "Sil / Paneli Sil koyu kırmızı zemin üstünde koyu kırmızı yazı, zor okunuyor." Ölçü 5,8:1 -- kağıt üstünde yeterli ama 11 px kalın yazıda ve koyu zeminde göz onu sönük görüyor; düğme panelin en tehlikeli işi. Yazı bir kademe açık kırmızıya çıkıyor (7,2:1) ve kenar düz tehlike rengi: düğme uzaktan da seçiliyor. Açık tema kendi değerlerinde kalıyor. */ :root:not([data-tema="acik"]) .sagPanelIslemBtn.tehlikeli:not(:disabled):not(:hover), :root:not([data-tema="acik"]) .sagPanelIslemBtn[data-komut="dolabiSil"]:not(:disabled):not(:hover) { border-color: var(--renk-tehlike); color: var(--renk-tehlike-hover); } .sagPanelIslemBtn.tehlikeli:hover:not(:disabled), .sagPanelIslemBtn[data-komut="dolabiSil"]:hover:not(:disabled) { border-color: var(--renk-tehlike); background: var(--renk-tehlike); color: #ffffff; } .sagPanelIslemBtn:disabled, .sagPanelIslemBtn.devreDisi { cursor: not-allowed; opacity: 0.5; background: var(--renk-alan-pasif); color: var(--renk-yazi-soluk); } /* ================================================= 20. KAPAK AYAR PANELİ ================================================= */ .kapakAyarPaneli { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; padding: 8px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan); } .kapakAyarBasligi { color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .kapakAyarIkonlari { display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: 4px; } .kapakAyarIkonBtn { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 5px 2px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); line-height: 1.2; text-align: center; cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear, color 0.1s linear; } .kapakAyarIkonBtn:hover { border-color: var(--renk-ana-kenar); background: var(--renk-alan-vurgu); } .kapakAyarIkonBtn.aktif { border-color: var(--renk-ana); background: var(--renk-ana-acik); color: var(--renk-ana-hover); font-weight: 600; } .kapakAyarIkonBtn svg { display: block; } .kapakAyarSatiri { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; min-height: var(--alan-yukseklik); } .kapakAyarEtiketi { color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .kapakAyarInput, .kapakAyarSelect { width: 100%; height: var(--alan-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); outline: none; background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .kapakAyarInput { text-align: right; font-variant-numeric: tabular-nums; } .kapakAyarInput:focus, .kapakAyarSelect:focus { border-color: var(--renk-ana); box-shadow: inset 0 0 0 1px var(--renk-ana); } /* Alanin altindaki kucuk aciklama. Dikme bolmelerinde bolgenin toplam olcusunu ve dikme kalinligini gosteriyor: kullanici neyi boldugunu gorsun. */ .sagPanelIpucu { margin: 2px 0 0; font-size: 11px; color: var(--soluk, #7b8aa0); } /* Geri alinamayan islem dugmesi. Kolonu silmek kertmeleri de gecersiz kilar; dugmenin bunu belli etmesi gerekiyor. */ .sagPanelTehlikeliBtn { width: 100%; padding: 8px 12px; border: 1px solid #d9a3a3; border-radius: 6px; background: #fdf3f3; color: #a33131; font-size: 13px; cursor: pointer; } .sagPanelTehlikeliBtn:hover { background: #f8e3e3; border-color: #c98686; } /* ================================================= ÇEKMECE YIĞINI ================================================= Cephe yükseklikleri gerçek dizilimiyle: üstteki kutu üstteki çekmece, yükseklikler orantılı. Rakamlara bakıp kafada canlandırmak yerine ekranda görünüyor — yazdığın 150 burada da alçak duruyor. */ .cekmeceYigini { margin-top: 8px; } /* Kat yükseklikleriyle kesilen cephe boyu aynı şey değil (D60): bindirmeli cephe komşusuna biniyor. Bu satır kullanıcıyı doğru kaynağa yolluyor. */ .cekmeceYiginiNotu { margin: -2px 0 8px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.45; } .cekmeceYiginiBaslik { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } .cekmeceYiginiBaslik span { color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; } .cekmeceEsitleBtn { height: 20px; padding: 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); cursor: pointer; } .cekmeceEsitleBtn:hover { border-color: var(--renk-ana-kenar); background: var(--renk-ana-acik); color: var(--renk-yazi); } .cekmeceYiginiKutusu { display: flex; flex-direction: column; gap: 2px; padding: 3px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-orta); background: var(--renk-alan-pasif); } /* Bir çekmece. Yüksekliği ölçüsüyle orantılı; değeri JS veriyor. */ .cekmeceKat { display: flex; align-items: center; gap: 6px; padding: 0 6px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan); transition: border-color 0.12s linear, background 0.12s linear; } /* Kilitli çekmece: kullanıcının kendi yazdığı ölçü. Sol kenardaki çizgi hangilerinin sabit olduğunu tek bakışta gösteriyor. */ .cekmeceKat.kilitli { border-color: var(--renk-ana-kenar); box-shadow: inset 3px 0 0 var(--renk-ana); } .cekmeceKatEtiketi { flex-shrink: 0; width: 26px; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); font-weight: 600; } .cekmeceKat.kilitli .cekmeceKatEtiketi { color: var(--renk-ana-yazi); } .cekmeceKatGirisi { width: 100%; min-width: 0; height: 20px; padding: 0 4px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-variant-numeric: tabular-nums; text-align: right; } .cekmeceKatGirisi:focus { outline: none; border-color: var(--renk-ana-kenar); background: var(--renk-alan-vurgu); } /* Hesaplanmış değer: kullanıcı bunu kendi yazdığı sanmasın. */ .cekmeceKatGirisi.otomatik { border-style: dashed; color: var(--renk-yazi-soluk); } .cekmeceKatBirimi { flex-shrink: 0; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); } .cekmeceKilitBtn { flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-soluk); font-size: 13px; line-height: 1; cursor: pointer; } .cekmeceKilitBtn:hover { background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } /* Durum satırı: bölge kaç mm, kaç ölçü sabit, kalan nereye gitti. Hesap kapalı kutuda kalmasın: hata ancak kesimden sonra anlaşılıyordu. */ .cekmeceYiginiDurum { margin-top: 5px; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); line-height: 1.45; } .cekmeceYiginiDurum.hatali { padding: 5px 7px; border: 1px solid var(--renk-tehlike-kenar); border-radius: var(--radius-kucuk); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } /* ================================================= KÖR KÖŞE BÖLÜMÜ ================================================= Kapak ayar panelinin içinde, açılım seçeneklerinin hemen altında. Eskiden kör pay sessizce uygulanıyordu: 900'lük dolapta 308 mm kapak çıkıyor, kullanıcı nedenini göremiyordu. Artık sayı da sebebi de burada. */ .korKoseBolumu { display: flex; flex-direction: column; gap: 6px; padding: 6px 7px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); } .korKoseBaslik { display: flex; align-items: center; gap: 6px; color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; } .korKoseKutu { width: 14px; height: 14px; margin: 0; accent-color: var(--renk-ana); cursor: pointer; } /* Sayının nereden geldiğini söyleyen küçük rozet: program mı buldu, kullanıcı mı yazdı. */ .korKoseRozet { margin-left: auto; padding: 1px 5px; border: 1px solid var(--renk-kenarlik); border-radius: 999px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); font-weight: 500; white-space: nowrap; } .korKoseRozet.korKoseRozetBulundu { border-color: var(--renk-basarili-kenar); background: var(--renk-basarili-acik); color: var(--renk-basarili); } .korKoseGovde { display: flex; flex-direction: column; gap: 4px; } /* Kapalıyken alanlar duruyor ama görünmüyor: kullanıcı kutuyu işaretleyince yazdığı değer yerinde kalsın. */ .korKoseGovde.korKoseGizli { display: none; } .korKoseAciklama { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.45; } .korKoseUyari:not(:empty) { padding: 4px 6px; border: 1px solid var(--renk-uyari-kenar); border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-mini); line-height: 1.45; } /* Kapak yapısının ne getirdiğini söyleyen satır. "Alüminyum" seçen kullanıcı o kapağın levhadan ÇIKMAYACAĞINI bilmeli; kesim listesinde göremeyince eksik sanıyor. */ .kapakAyarNotu { margin: -2px 0 8px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); line-height: 1.55; } /* ================================================= ARKALIK ARACI (D218) ================================================= Üç bağlanma yöntemi yan yana duruyordu ve hiçbirinde seçili işareti yoktu: kullanıcı bir hafta sonra dolabı açtığında hangisini seçtiğini ancak arkalığın ölçüsüne bakarak anlıyordu. Seçili düğme artık D194'ün köşe rozetleriyle aynı dilde işaretleniyor. */ .sagPanelIslemBtn.secili { border-color: var(--renk-ana-kenar); background: var(--renk-ana-acik); color: var(--renk-ana-yazi); font-weight: 700; } .sagPanelIslemBtn.secili::before { content: "✓"; margin-right: 5px; font-weight: 700; } .sagPanelArkalikDurumu { grid-column: 1 / -1; margin-bottom: 6px; padding: 6px 8px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); } /* Kanal ölçüsü alanları. Kutunun kendi biçimi hiç yazılmamıştı; alanlar butonların arasında biçimsiz duruyordu. */ .sagPanelKanalAlanlari { grid-column: 1 / -1; margin-bottom: 6px; padding: 6px 8px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); } .sagPanelKanalBasligi { margin-bottom: 2px; color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; } .sagPanelKanalAciklamasi { display: block; margin-bottom: 6px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); line-height: 1.45; } /* Sınır aşıldığında sebebini yazan satır (D218/4). Boşken hiç yer kaplamıyor: sessiz durum sessiz görünsün. */ .sagPanelKanalUyarisi:empty { display: none; } .sagPanelKanalUyarisi { margin-top: 5px; color: var(--renk-uyari); font-size: var(--yazi-mini); line-height: 1.45; } .sagPanelKanalUyarisi.hatali { color: var(--renk-tehlike); font-weight: 600; } /* ------------------------------------------------ HAZIR MODÜL NOTLARI (G10) ------------------------------------------------ */ .sagPanelModulNotlari { margin: 8px 0 4px; padding: 8px; border-left: 3px solid var(--renk-ana); background: var(--renk-ana-acik); border-radius: var(--radius-kucuk); } .sagPanelModulNotBasligi { font-size: var(--yazi-mini); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--renk-ana-yazi); margin-bottom: 4px; } .sagPanelModulNotu { font-size: var(--yazi-mini); line-height: 1.4; color: var(--renk-yazi); } .sagPanelModulNotu + .sagPanelModulNotu { margin-top: 4px; } /* Taşı → Oda Konumu öne çıkıyor (gezinti 10.09) */ .sagPanelFormBolumu.sagPanelBolumVurgu { outline: 2px solid #2f6fdd; outline-offset: -2px; border-radius: 6px; transition: outline-color 0.6s ease; } /* Bölge araçları: ikon + grup başlığı (gezinti 10.09) */ .sagPanelIslemBtn.ikonlu { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .sagPanelIslemIkon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; } .sagPanelIslemIkon svg { width: 100%; height: 100%; } .bolgeAracGrupBasligi { grid-column: 1 / -1; margin: 6px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--renk-metin-ikincil, #6b7280); } /* Panel kenarı ikonu (gezinti 10.09) */ .sagPanelKenarIkonu { display: inline-flex; align-items: center; margin-right: 6px; vertical-align: middle; color: var(--renk-ana); } .sagPanelKenarIkonu svg { display: block; } /* Bant kenarları (A5) */ .sagPanelAltBaslik { margin: 10px 0 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--renk-metin-ikincil, #6b7280); } .sagPanelAciklama { margin: 0 0 6px; font-size: 11px; color: var(--renk-metin-ikincil, #6b7280); } .sagPanelBantKenari input[type="checkbox"] { justify-self: end; margin: 0; } /* Bant kenarları Panel Kenarları'nın içinde kendi bölümü (29.09, panelKenarBolumuOlustur.js). İki bölümün alt çizgisi üst üste gelip kalın görünmesin; iç bölüm dış bölümün çizgisini kullanıyor. Açıklama ve satırlar bölüm içeriğinin dolgusunda, öbür bölümlerle hizalı. */ .sagPanelPanelKenarBolumu > .sagPanelBantBolumu { border-bottom: 0; } .sagPanelBantBolumu .sagPanelBantKenarlari { display: flex; flex-direction: column; gap: 3px; } .sagPanelBantBolumu .sagPanelAciklama { line-height: 1.45; } /* Kulp yerleşimi: dokuz göz (A8) */ .sagPanelKulpIzgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 96px; margin: 6px auto 8px; padding: 6px; border: 1px solid var(--renk-kenarlik, #cbd2dc); border-radius: 4px; background: var(--buton-yuzey, #f7f8fa); } .sagPanelKulpGozu { width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--renk-kenarlik, #cbd2dc); border-radius: 3px; background: #fff; cursor: pointer; } .sagPanelKulpGozu:hover { border-color: var(--renk-kenarlik-koyu, #8a94a6); background: var(--buton-yuzey-hover, #eef1f6); } .sagPanelKulpGozu.otomatik { border: 1px dashed var(--renk-vurgu, #2f6fed); background: #eaf1ff; } .sagPanelKulpGozu.secili { border-color: var(--renk-vurgu, #2f6fed); background: var(--renk-vurgu, #2f6fed); } /* ------------------------------------------------- BÖLGE ARAÇ KARTLARI (A13) ------------------------------------------------- Kullanıcı: "bu butonlara genel bir el atmak lazım, web sitesi gibi". Kapak Yapılandırması kartlarıyla aynı dil: ikon üstte, kısa etiket altta, üç sütun. Vurgulu (Ekle) ve tehlikeli (Kaldır) düğmeler tam satır kalır. */ .bolgeAracIzgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .bolgeAracIzgara .sagPanelIslemBtn.ikonlu { flex-direction: column; justify-content: flex-start; gap: 3px; min-height: 62px; padding: 6px 3px 5px; background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 500; line-height: 1.2; text-align: center; } .bolgeAracIzgara .sagPanelIslemBtn.ikonlu .sagPanelIslemIkon { width: 22px; height: 22px; flex-basis: 22px; color: var(--renk-ana); } .bolgeAracIzgara .sagPanelIslemBtn.ikonlu .sagPanelIslemMetin { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 100%; padding-top: 1px; overflow: hidden; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; } .bolgeAracIzgara .sagPanelIslemBtn.ikonlu:hover:not(:disabled) { border-color: var(--renk-ana-kenar, var(--renk-kenarlik-koyu)); background: var(--renk-alan-vurgu, var(--buton-yuzey-hover)); } .bolgeAracIzgara .sagPanelIslemBtn.ikonlu.secili { border-color: var(--renk-ana); background: var(--renk-ana-acik); color: var(--renk-ana-hover); font-weight: 600; } .bolgeAracIzgara .sagPanelIslemBtn.ikonlu.vurgulu, .bolgeAracIzgara .sagPanelIslemBtn.ikonlu.tehlikeli { flex-direction: row; justify-content: center; min-height: var(--buton-yukseklik); padding: 4px 9px; font-size: var(--yazi-kucuk); font-weight: 600; } .bolgeAracIzgara .sagPanelIslemBtn.ikonlu.vurgulu .sagPanelIslemIkon, .bolgeAracIzgara .sagPanelIslemBtn.ikonlu.tehlikeli .sagPanelIslemIkon { width: 18px; height: 18px; flex-basis: 18px; color: currentColor; } .bolgeAracIzgara .sagPanelIslemBtn.ikonlu.vurgulu .sagPanelIslemMetin { width: auto; } /* ================================================= BÖLMELER TABLOSU (kullanıcı 22.09) ================================================= Modül kartındaki bölme listesi. Satır düzeni: [ 250 ] mm 1. Bölme Kapak · 2 raf Ölçü başta duruyor -- gözün aradığı o, KesApp'te de solda. Ad ortada, içerik özeti sağa yaslı. Ölçü kutusu dar (56 px): dört haneli mm değeri sığıyor, fazlası satırı şişiriyordu. */ .sagPanelBolmeTablosu { display: flex; flex-direction: column; gap: 2px; } .sagPanelBolmeSatiri { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; background: var(--renk-yuzey-2, transparent); } .sagPanelBolmeSatiri:hover { background: var(--renk-ana-acik); } .sagPanelBolmeOlcusu { display: flex; align-items: baseline; gap: 3px; flex: 0 0 auto; } .sagPanelBolmeGirisi { width: 56px; padding: 3px 5px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--renk-yazi); background: var(--renk-giris-zemin, var(--renk-yuzey-3, transparent)); border: 1px solid var(--renk-kenar); border-radius: 3px; } .sagPanelBolmeGirisi:focus { outline: none; border-color: var(--renk-vurgu, var(--renk-ana)); } /* Sayı alanının tarayıcı okları: satırı dar tutuyoruz. */ .sagPanelBolmeGirisi::-webkit-outer-spin-button, .sagPanelBolmeGirisi::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sagPanelBolmeGirisi { -moz-appearance: textfield; appearance: textfield; } .sagPanelBolmeSabitOlcu { display: inline-block; width: 56px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--renk-yazi-ikincil); } .sagPanelBolmeBirimi { font-size: 10px; color: var(--renk-yazi-soluk); } .sagPanelBolmeAdi { flex: 0 0 auto; font-size: 12px; color: var(--renk-yazi); } .sagPanelBolmeIcerigi { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 11px; color: var(--renk-yazi-soluk); } /* ================================================= MODÜL KARTI ŞEMASI (kullanıcı 22.09) ================================================= Ölçülendirilmiş cephe çizimi kartın üstünde. SVG `cizimMotoru/dolapFoyuOlustur`dan geliyor; Ölçü Föyü'ndeki çizimin aynısı. Çizim koyu temada da okunsun diye açık bir zemine oturuyor: föyün çizgi renkleri kâğıt için seçilmiş. */ .sagPanelSemaYuvasi { display: flex; justify-content: center; padding: 6px 2px; border-radius: 4px; background: #ffffff; overflow: hidden; } .sagPanelSemaYuvasi svg { max-width: 100%; /* BOY SINIRI (22.09) Ekranda ölçtüm: 600 × 770 dolabın şeması 267 × 575 px çıkıyor ve altındaki BÖLMELER / BAZA / KULP bölümlerini ekran dışına itiyordu. Kullanıcı "kalabalık" dediği için buraya sınır koyuldu: şema panelin yarısından fazlasını kaplamıyor, altındaki bölümler ilk bakışta görünüyor. Oran korunuyor (height: auto yerine max-height): çizim bozulmadan küçülüyor. */ max-height: 520px; height: auto; width: auto; } /* ================================================= BÖLGE KATEGORİ ŞERİDİ (kullanıcı 22.09) ================================================= Bölge araçlarının üstünde: Bölme · Kuşak · Çekmece · Kapak · Arkalık. Eskiden bu seçim yalnız SOL panelde vardı; "Kapak Ekle"ye basmak için önce oraya gitmek gerekiyordu. Dar panelde sığmazsa yatay kayıyor: beş sekme 260 px'e sığmayabilir ve sarılırsa iki satır olup araçları aşağı iter. */ .bolgeKategoriSeridi { display: flex; gap: 2px; margin-bottom: 6px; overflow-x: auto; scrollbar-width: none; } .bolgeKategoriSeridi::-webkit-scrollbar { display: none; } .bolgeKategoriBtn { flex: 0 0 auto; padding: 4px 8px; border: 1px solid var(--renk-kenarlik); border-radius: 3px; background: transparent; color: var(--renk-yazi-ikincil); font-size: 11px; cursor: pointer; transition: background 0.1s linear, color 0.1s linear, border-color 0.1s linear; } .bolgeKategoriBtn:hover { background: var(--renk-alan); color: var(--renk-yazi); } .bolgeKategoriBtn.aktif { border-color: var(--renk-ana); background: var(--renk-ana); color: #ffffff; } /* ================================================= BÖLMEYE EKLEME DÜĞMELERİ (kullanıcı 22.09) ================================================= Bölme satırının altında "+ Kapak · + Çekmece · + Raf". KesApp'in modül kartında tür satırın kendisinde seçiliyor; kullanıcının beğendiği şey buydu. Satır yüksekliğini şişirmemek için küçük ve düz: ikon yok, çerçeve yok, yalnız metin. Satıra gelince belirginleşiyor. */ .sagPanelBolmeEkle { flex: 0 0 100%; display: flex; gap: 4px; margin-top: 2px; padding-left: 60px; } .sagPanelBolmeEkleBtn { padding: 1px 5px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--renk-yazi-soluk); font-size: 10px; cursor: pointer; transition: color 0.1s linear, border-color 0.1s linear; } .sagPanelBolmeSatiri:hover .sagPanelBolmeEkleBtn { color: var(--renk-yazi-ikincil); } .sagPanelBolmeEkleBtn:hover { border-color: var(--renk-ana); color: var(--renk-ana); } /* Satır iki satıra dönüyor: düğmeler alta iniyor. */ .sagPanelBolmeSatiri { flex-wrap: wrap; } /* MONTAJ İLİŞKİLERİ (serbest montaj, 29.09) Temas satırının etiketi uzun ("Üst ön kasa ↔ Sol uç panel · uç temas · 300 × 18 mm"); 96 px'lik etiket sütununa sığmıyor. Etiket üstte tam genişlik, seçim altında. */ .sagPanelTemasSatiri { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 6px 0; border-bottom: 1px solid var(--renk-kenarlik); } .sagPanelTemasSatiri .sagPanelFormEtiketi { overflow: visible; white-space: normal; } /* SERBEST ÜRÜN (29.09): Parçalar bölümü ve parça işlemleri. Ekleme düğmeleri iki sütun; parça listesi tıklanır satırlar. */ .sagPanelSerbestEkle, .sagPanelSerbestIslemler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 6px 0 8px; } .sagPanelSerbestListe { display: flex; flex-direction: column; gap: 2px; } .sagPanelSerbestParca { width: 100%; padding: 6px 8px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 12px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .sagPanelSerbestParca:hover { border-color: var(--renk-ana); } .sagPanelSerbestCad { margin: 4px 0 8px; } /* Telefon tutamağı ve tuş takımı yalnız telefonda görünüyor (45-telefon.css); masaüstünde yer kaplamasınlar. */ .sagPanelTutamak { display: none; } .sayiTusTakimi { display: none; } /* ===== css/bolumler/06-menu.css ===== */ /* ================================================= 21. GENEL MENÜ PANELİ ================================================= */ .menuPaneli { width: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); } .menuPaneliBaslikAlani { height: var(--bolum-baslik-yukseklik); display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 3px 0 9px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-bolum-baslik); } .menuPaneliBaslik { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .menuPaneliYeniMenuBtn { width: 19px; height: 19px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--renk-kenarlik); border-radius: 2px; background: var(--renk-alan); color: var(--renk-ana-yazi); font-size: 14px; line-height: 1; cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear, color 0.1s linear; } .menuPaneliYeniMenuBtn:hover:not(:disabled) { border-color: var(--renk-ana); background: var(--renk-ana); color: #ffffff; } .menuPaneliYeniMenuBtn:disabled { opacity: 0.4; } .menuPaneliIcerik { width: 100%; display: flex; flex-direction: column; gap: 0; padding: 3px 0; background: var(--renk-alan); } .menuPaneliBosMesaj { margin: 6px; padding: 9px; border: 1px dashed var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.4; text-align: center; } /* ================================================= 22. MENÜ AĞACI DÜĞÜMLERİ ================================================= */ .menuDugumu { width: 100%; } .menuSatiri { width: 100%; min-height: 24px; display: flex; align-items: center; gap: 2px; padding: 0 3px 0 calc( 3px + ( var(--menu-derinlik, 0) * 13px ) ); border: 0; border-left: 2px solid transparent; background: transparent; transition: background 0.1s linear; } .menuSatiri:hover { background: var(--renk-alan-vurgu); } .menuSatiriSecili { border-left-color: var(--renk-ana); background: var(--renk-ana-acik); } .menuSatiriPasif { opacity: 0.55; } .menuSatiriGizli { opacity: 0.4; } .menuAcKapatBtn { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 2px; background: transparent; color: var(--renk-yazi-soluk); font-size: 10px; line-height: 1; cursor: pointer; transition: background 0.1s linear, color 0.1s linear; } .menuAcKapatBtn:hover:not(:disabled) { background: var(--renk-kenarlik-acik); color: var(--renk-yazi); } .menuAcKapatBtn:disabled, .menuAcKapatBtnBos { cursor: default; opacity: 0; } .menuAdiBtn { flex: 1; min-width: 0; min-height: 22px; display: flex; align-items: center; padding: 0 3px; border: 0; overflow: hidden; background: transparent; color: var(--renk-yazi); text-overflow: ellipsis; white-space: nowrap; font-size: var(--yazi-kucuk); text-align: left; cursor: pointer; } .menuSatiriSecili .menuAdiBtn { color: var(--renk-ana-hover); font-weight: 600; } .menuIslemleri { flex-shrink: 0; display: flex; align-items: center; gap: 1px; opacity: 0; pointer-events: none; transition: opacity 0.1s linear; } .menuSatiri:hover .menuIslemleri, .menuSatiri:focus-within .menuIslemleri, .menuSatiriSecili .menuIslemleri { opacity: 1; pointer-events: auto; } .menuIslemBtn { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--renk-yazi-soluk); font-size: 11px; line-height: 1; cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear, color 0.1s linear; } .menuIslemBtn:hover:not(:disabled) { border-color: var(--renk-kenarlik); background: var(--renk-alan); color: var(--renk-yazi); } .menuIslemBtn:disabled { cursor: not-allowed; opacity: 0.35; } .menuAltMenuEkleBtn:hover:not(:disabled) { border-color: var(--renk-ana-kenar); background: var(--renk-ana-acik); color: var(--renk-ana-hover); } .menuDuzenleBtn:hover:not(:disabled) { border-color: var(--renk-uyari-kenar); background: var(--renk-uyari-acik); color: var(--renk-uyari); } .menuSilBtn:hover:not(:disabled) { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } .menuAltMenuAlani { width: 100%; display: flex; flex-direction: column; } .menuDugumuAcik > .menuAltMenuAlani { position: relative; } /* Ağaç bağlantı çizgisi. */ .menuDugumuAcik > .menuAltMenuAlani::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc( 11px + ( var(--menu-derinlik, 0) * 13px ) ); width: 1px; background: var(--renk-kenarlik-acik); pointer-events: none; } /* ===== css/bolumler/07-pencereler.css ===== */ /* ================================================= 23. PENCERELER (ORTAK) Kütüphaneye kaydet, parça ekleme, raf ekleme ve bakış yönü pencereleri aynı iskeleti paylaşır. ================================================= */ .kutuphaneyeKaydetKatmani, .parcaEklemeKatmani, .rafEklemeKatmani, .malzemeSecimiKatmani, .dolapBakisYonuKatmani { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(27, 35, 48, 0.34); } .kutuphaneyeKaydetKatmani { z-index: 5000; animation: katmanGiris 0.12s linear; } .parcaEklemeKatmani { z-index: 10000; } .rafEklemeKatmani { z-index: 10000; } .dolapBakisYonuKatmani { z-index: 10000; } .kutuphaneyeKaydetPenceresi, .parcaEklemePenceresi, .rafEklemePenceresi, .malzemeSecimiPenceresi, .dolapBakisYonuPenceresi { display: flex; flex-direction: column; max-height: calc(100vh - 48px); overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); animation: pencereGiris 0.12s linear; } .kutuphaneyeKaydetPenceresi { width: min(100%, 440px); } .parcaEklemePenceresi { width: min(100%, 380px); } .rafEklemePenceresi { width: min(100%, 420px); } .dolapBakisYonuPenceresi { width: min(100%, 380px); } /* ------------------------------------------------- PENCERE BAŞLIK ÇUBUĞU Masaüstü penceresi gibi ince ve koyu zeminli. ------------------------------------------------- */ .kutuphaneyeKaydetBaslikAlani, .parcaEklemeBaslikAlani, .rafEklemeBaslikAlani, .malzemeSecimiBaslikAlani, .dolapBakisYonuBaslikAlani { height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 0 10px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-bolum-baslik); } .kutuphaneyeKaydetBaslik, .parcaEklemeBaslik, .rafEklemeBaslik, .malzemeSecimiBaslik, .dolapBakisYonuBaslik { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 700; } .kutuphaneyeKaydetKapatBtn, .parcaEklemeKapatBtn, .rafEklemeKapatBtn, .malzemeSecimiKapatBtn, .dolapBakisYonuKapatBtn { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--renk-yazi-ikincil); font-size: 15px; line-height: 1; cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear, color 0.1s linear; } .kutuphaneyeKaydetKapatBtn:hover:not(:disabled), .parcaEklemeKapatBtn:hover, .rafEklemeKapatBtn:hover, .dolapBakisYonuKapatBtn:hover { border-color: var(--renk-tehlike); background: var(--renk-tehlike); color: #ffffff; } /* ------------------------------------------------- PENCERE GÖVDESİ ------------------------------------------------- */ .kutuphaneyeKaydetForm, .parcaEklemeForm, .rafEklemeForm, .malzemeSecimiForm, .dolapBakisYonuIcerik { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overflow-x: hidden; padding: 12px; background: var(--renk-panel); } /* ------------------------------------------------- PENCERE ALT BUTON ÇUBUĞU ------------------------------------------------- */ .kutuphaneyeKaydetAltButonAlani, .kutuphaneyeKaydetYeniMenuButonAlani, .parcaEklemeButonAlani, .rafEklemeButonAlani, .malzemeSecimiButonAlani { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .kutuphaneyeKaydetAltButonAlani, .parcaEklemeButonAlani, .rafEklemeButonAlani, .malzemeSecimiButonAlani { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--renk-kenarlik-acik); } .kutuphaneyeKaydetBirincilBtn, .kutuphaneyeKaydetIkincilBtn, .parcaEklemeBirincilBtn, .parcaEklemeIkincilBtn, .rafEklemeBirincilBtn, .rafEklemeIkincilBtn, .malzemeSecimiBirincilBtn, .malzemeSecimiIkincilBtn { min-width: 84px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: var(--radius-kucuk); font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear, color 0.1s linear; } .kutuphaneyeKaydetBirincilBtn, .parcaEklemeBirincilBtn, .rafEklemeBirincilBtn, .malzemeSecimiBirincilBtn { border: 1px solid var(--renk-ana-hover); background: linear-gradient( 180deg, #2e74e0, var(--renk-ana) ); color: #ffffff; } .kutuphaneyeKaydetBirincilBtn:hover:not(:disabled), .parcaEklemeBirincilBtn:hover, .rafEklemeBirincilBtn:hover { background: linear-gradient( 180deg, var(--renk-ana), var(--renk-ana-hover) ); } .kutuphaneyeKaydetIkincilBtn, .parcaEklemeIkincilBtn, .rafEklemeIkincilBtn, .malzemeSecimiIkincilBtn { border: 1px solid var(--renk-kenarlik); background: var(--buton-yuzey); color: var(--renk-yazi); } .kutuphaneyeKaydetIkincilBtn:hover:not(:disabled), .parcaEklemeIkincilBtn:hover, .rafEklemeIkincilBtn:hover { border-color: var(--renk-kenarlik-koyu); background: var(--buton-yuzey-hover); } .kutuphaneyeKaydetBirincilBtn:active:not(:disabled), .kutuphaneyeKaydetIkincilBtn:active:not(:disabled), .parcaEklemeBirincilBtn:active, .parcaEklemeIkincilBtn:active, .rafEklemeBirincilBtn:active, .rafEklemeIkincilBtn:active { filter: brightness(0.95); } .kutuphaneyeKaydetBirincilBtn:disabled, .kutuphaneyeKaydetIkincilBtn:disabled, .parcaEklemeBirincilBtn:disabled, .parcaEklemeIkincilBtn:disabled, .rafEklemeBirincilBtn:disabled, .rafEklemeIkincilBtn:disabled { cursor: not-allowed; opacity: 0.45; } /* ------------------------------------------------- PENCERE MESAJLARI ------------------------------------------------- */ .kutuphaneyeKaydetMesaj, .parcaEklemeMesaj, .rafEklemeMesaj { width: 100%; padding: 7px 9px; border-radius: var(--radius-kucuk); font-size: var(--yazi-kucuk); line-height: 1.45; } .kutuphaneyeKaydetMesaj[hidden], .parcaEklemeMesaj[hidden], .rafEklemeMesaj[hidden] { display: none; } .kutuphaneyeKaydetMesajHata, .parcaEklemeMesajHata, .rafEklemeMesajHata, .hata { border: 1px solid var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike-hover); } .kutuphaneyeKaydetMesajBasarili, .basarili { border: 1px solid var(--renk-basarili-kenar); background: var(--renk-basarili-acik); color: var(--renk-basarili); } /* ================================================= 24. KÜTÜPHANEYE KAYDET PENCERESİ ================================================= */ .kutuphaneyeKaydetFormGrubu { width: 100%; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 8px; } .kutuphaneyeKaydetLabel { color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } /* Alt/üst dolap işaretinin açıklaması (D131). Seçilen seçeneğin ne yapacağını yazıyor; "kendi ölçüsünde"nin ne demek olduğu tahmin edilecek bir şey olmamalı. */ .kutuphaneyeKaydetAciklama { margin: 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); opacity: 0.8; } .kutuphaneyeKaydetInput, /* Aynı adlı model uyarısı (D206). Kütüphane bu programın en pahalı verisi; üzerine yazma kararı göze batsın. */ .kutuphaneyeKaydetCakisma { margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--renk-uyari-kenar, var(--renk-tehlike-kenar)); border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik, var(--renk-tehlike-acik)); } .kutuphaneyeKaydetCakismaMetni { margin: 0 0 6px; color: var(--renk-uyari, var(--renk-tehlike)); font-size: var(--yazi-kucuk); line-height: 1.4; } .kutuphaneyeKaydetSelect { width: 100%; height: var(--alan-yukseklik); padding: 0 7px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); outline: none; background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-kucuk); transition: border-color 0.1s linear, box-shadow 0.1s linear; } .kutuphaneyeKaydetInput::placeholder { color: var(--renk-yazi-soluk); } .kutuphaneyeKaydetInput:hover:not(:disabled), .kutuphaneyeKaydetSelect:hover:not(:disabled) { border-color: var(--renk-kenarlik-koyu); } .kutuphaneyeKaydetInput:focus, .kutuphaneyeKaydetSelect:focus { border-color: var(--renk-ana); box-shadow: inset 0 0 0 1px var(--renk-ana); } .kutuphaneyeKaydetInput:disabled, .kutuphaneyeKaydetSelect:disabled { cursor: not-allowed; background: var(--renk-alan-pasif); color: var(--renk-yazi-soluk); } .kutuphaneyeKaydetMenuSecimAlani { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; } .kutuphaneyeKaydetYeniMenuBtn { min-width: 88px; height: var(--alan-yukseklik); padding: 0 10px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--buton-yuzey); color: var(--renk-ana-hover); font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear; } .kutuphaneyeKaydetYeniMenuBtn:hover:not(:disabled) { border-color: var(--renk-ana-kenar); background: var(--renk-ana-acik); } .kutuphaneyeKaydetYeniMenuAlani { width: 100%; grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--renk-ana-kenar); border-radius: var(--radius-kucuk); background: var(--renk-ana-acik); } .kutuphaneyeKaydetYeniMenuBaslik { margin: 0; color: var(--renk-ana-hover); font-size: var(--yazi-kucuk); font-weight: 700; } /* ================================================= 25. PARÇA EKLEME PENCERESİ ================================================= */ .parcaEklemeAciklama { margin: 0; padding: 7px 9px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.45; } .parcaEklemeFormGrubu { width: 100%; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 8px; } .parcaEklemeLabel { color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .parcaEklemeInput { width: 100%; height: var(--alan-yukseklik); padding: 0 7px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); outline: none; background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-variant-numeric: tabular-nums; transition: border-color 0.1s linear, box-shadow 0.1s linear; } .parcaEklemeInput::placeholder { color: var(--renk-yazi-soluk); } .parcaEklemeInput:hover:not(:disabled) { border-color: var(--renk-kenarlik-koyu); } /* Adet 1'den fazlayken konum kapanıyor (11.09): değeri duruyor ama kullanılmadığı görünmeli. */ .parcaEklemeInput:disabled { background: var(--renk-alan-pasif); color: var(--renk-yazi-soluk); } .parcaEklemeInput:focus { border-color: var(--renk-ana); box-shadow: inset 0 0 0 1px var(--renk-ana); } /* ================================================= 26. RAF EKLEME PENCERESİ ================================================= */ .rafEklemeAciklama { margin: 0; padding: 7px 9px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.45; } .rafEklemeFormSatiri, .rafEklemeYerlesimSatiri { width: 100%; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 8px; } .rafEklemeFormEtiketi { color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .rafEklemeFormIcerigi { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .rafEklemeInput { width: 100%; height: var(--alan-yukseklik); padding: 0 7px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); outline: none; background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-kucuk); transition: border-color 0.1s linear, box-shadow 0.1s linear; } .rafEklemeInput:hover { border-color: var(--renk-kenarlik-koyu); } .rafEklemeInput:focus { border-color: var(--renk-ana); box-shadow: inset 0 0 0 1px var(--renk-ana); } .rafEklemeSayiInput { text-align: right; font-variant-numeric: tabular-nums; } .rafEklemeSayiInput::-webkit-inner-spin-button, .rafEklemeSayiInput::-webkit-outer-spin-button { opacity: 0.4; } .rafEklemeSayiInput:hover::-webkit-inner-spin-button, .rafEklemeSayiInput:focus::-webkit-inner-spin-button { opacity: 1; } /* ------------------------------------------------- RADYO SEÇENEKLERİ ------------------------------------------------- */ .rafEklemeSecenekler { display: flex; flex-direction: column; gap: 2px; } .rafEklemeRadioSecenegi { min-height: 24px; display: flex; align-items: center; gap: 7px; padding: 2px 7px; border: 1px solid transparent; border-radius: var(--radius-kucuk); cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear; } .rafEklemeRadioSecenegi:hover { background: var(--renk-alan-vurgu); } .rafEklemeRadioSecenegi input { position: absolute; opacity: 0; pointer-events: none; } .rafEklemeRadioIsareti { width: 12px; height: 12px; flex-shrink: 0; position: relative; display: inline-flex; border: 1px solid var(--renk-kenarlik-koyu); border-radius: 50%; background: var(--renk-alan); } .rafEklemeRadioIsareti::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: transparent; } .rafEklemeRadioSecenegi:has(input:checked) { border-color: var(--renk-ana-kenar); background: var(--renk-ana-acik); } .rafEklemeRadioSecenegi input:checked + .rafEklemeRadioIsareti { border-color: var(--renk-ana); } .rafEklemeRadioSecenegi input:checked + .rafEklemeRadioIsareti::after { background: var(--renk-ana); } .rafEklemeRadioMetni { color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .rafEklemeBilgiKutusu { padding: 7px 9px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); line-height: 1.45; } .rafEkleme32mmAyarlari { display: flex; flex-direction: column; gap: 8px; padding: 9px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan); } .rafEkleme32mmAyarlari[hidden], .rafEklemeBilgiKutusu[hidden] { display: none; } /* 32'lik sistemin bir cümlelik anlatımı. Alanların üstünde duruyor: kullanıcı sayıyı girmeden önce neyin ne olduğunu okuyor. */ .rafEkleme32mmAciklama { margin: 0; font-size: 12px; line-height: 1.5; color: var(--renk-yazi-soluk); } /* Rafın gerçekte hangi deliğe oturacağı. İstenen ölçü merdivene yuvarlandığı için girilen sayı ile sonuç ayrı olabiliyor; bunu vurgulu göstermek gerekiyor. */ .rafEkleme32mmOnizleme { margin: 0; padding-top: 6px; border-top: 1px solid var(--renk-kenarlik-acik); font-size: 12px; line-height: 1.5; color: var(--renk-ana-yazi); } .rafEkleme32mmOnizleme:empty { display: none; } .rafEklemeAdimKapsayici { display: flex; align-items: center; gap: 6px; } .rafEklemeAdimKapsayici .rafEklemeInput { width: 70px; } .rafEklemeAdimCarpani { color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); } .rafEklemeAdimSonucu { padding: 3px 7px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; font-variant-numeric: tabular-nums; } /* ================================================= 27. DOLAP BAKIŞ YÖNÜ PENCERESİ ================================================= */ .dolapBakisYonuAciklama { margin: 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.45; } .dolapBakisYonuSecenekleri { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 6px; } .dolapBakisYonuSecenekBtn { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear; } .dolapBakisYonuSecenekBtn:hover { border-color: var(--renk-ana-kenar); background: var(--renk-alan-vurgu); } .dolapBakisYonuSecenekBtn.aktif { border-color: var(--renk-ana); background: var(--renk-ana-acik); color: var(--renk-ana-hover); } .dolapBakisYonuSimge { font-size: 18px; line-height: 1; } .dolapBakisYonuMetni { font-size: var(--yazi-kucuk); font-weight: 600; } /* ============================================================ MALZEME SEÇİM PENCERESİ ============================================================ DXF üretilmeden önce açılan pencere. */ .malzemeSecimiKatmani { z-index: 10000; } .malzemeSecimiPenceresi { width: 520px; max-width: calc(100vw - 40px); } .malzemeSecimiKapatBtn:hover { border-color: var(--renk-tehlike); background: var(--renk-tehlike); color: #ffffff; } .malzemeSecimiBirincilBtn:hover { background: linear-gradient( 180deg, var(--renk-ana), var(--renk-ana-hover) ); } .malzemeSecimiIkincilBtn:hover { border-color: var(--renk-kenarlik-koyu); background: var(--buton-yuzey-hover); } .malzemeSecimiSatir { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; } .malzemeSecimiEtiket { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--renk-yazi); } .malzemeSecimiGirdi { height: 28px; padding: 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: 3px; background: var(--renk-girdi-zemin, #fff); color: var(--renk-yazi); font-size: 12px; } .malzemeSecimiGirdi:focus { outline: none; border-color: var(--renk-ana); } .malzemeSecimiAciklama { font-size: 11px; color: var(--renk-yazi-soluk, #888); } .malzemeSecimiAltBaslik { margin: 4px 0 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--renk-yazi-soluk, #888); } /* Grup satırı: etiket | seçim | modeldeki kalınlık */ .malzemeSecimiGrupSatiri { display: grid; grid-template-columns: 1fr 190px 86px; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 3px; } .malzemeSecimiGrupSatiri:nth-child(even) { background: var(--renk-satir-vurgu, rgba(0, 0, 0, 0.03)); } .malzemeSecimiGrupEtiketi { font-size: 12px; color: var(--renk-yazi); } .malzemeSecimiSecme { height: 26px; padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: 3px; background: var(--renk-girdi-zemin, #fff); color: var(--renk-yazi); font-size: 12px; } .malzemeSecimiModelBilgisi { font-size: 11px; text-align: right; color: var(--renk-yazi-soluk, #888); } /* Seçilen malzemenin kalınlığı modeldekinden farklıysa satır uyarı rengine döner. */ .malzemeSecimiGrupSatiriUyumsuz { background: rgba(200, 60, 40, 0.10); } .malzemeSecimiGrupSatiriUyumsuz .malzemeSecimiModelBilgisi { font-weight: 600; color: #c83c28; } /* Kaç dosya çıkacağını gösteren canlı özet. Satır satır okunacağı için pre-line. */ .malzemeSecimiDosyaOzeti { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid var(--renk-ana); border-radius: 2px; background: var(--renk-ana-acik); white-space: pre-line; font-size: 11px; line-height: 1.6; color: var(--renk-yazi-ikincil); } .malzemeSecimiUyari { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid #c83c28; border-radius: 2px; background: rgba(200, 60, 40, 0.08); font-size: 11px; line-height: 1.5; color: #a83220; } /* Konum alanının altındaki aralık bilgisi. Form ızgarası iki sütunlu olduğu için açıklamayı satırın tamamına yayıyoruz. */ .parcaEklemeKonumAciklamasi { grid-column: 1 / -1; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.45; } /* ================================================= 24. MALZEME YÖNETİMİ Üst şeritteki "Malzeme" düğmesiyle açılır. Solda kayıtlı levhalar, sağda seçilenin formu. Diğer pencerelerden geniş; iki sütun ve uzun bir form taşıyor. ================================================= */ .malzemeYonetimiKatmani { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(27, 35, 48, 0.34); animation: katmanGiris 0.12s linear; } .malzemeYonetimiPenceresi { width: min(100%, 780px); height: min(100%, 620px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); animation: pencereGiris 0.12s linear; } /* ------------------------------------------------- BAŞLIK ------------------------------------------------- */ .malzemeYonetimiBaslikAlani { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .malzemeYonetimiBaslik { margin: 0; color: var(--renk-yazi); font-size: 13px; font-weight: 600; } .malzemeYonetimiAciklama { margin: 3px 0 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.45; } .malzemeYonetimiKapatBtn { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-ikincil); font-size: 17px; line-height: 1; cursor: pointer; } .malzemeYonetimiKapatBtn:hover { background: var(--renk-tehlike); color: #ffffff; } /* ------------------------------------------------- GÖVDE ------------------------------------------------- */ /* ------------------------------------------------- SEKME ŞERİDİ Üstte Plakalar / Aksesuarlar, aksesuarların içinde Raylar / Menteşeler / Kulplar. ------------------------------------------------- */ .sekmeSeridi { flex-shrink: 0; display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-bolum-baslik); } .sekmeBtn { height: 27px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--renk-yazi-ikincil); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .sekmeBtn:hover { color: var(--renk-yazi); } .sekmeBtn.aktif { border-bottom-color: var(--renk-ana); color: var(--renk-ana-yazi); font-weight: 600; } /* Kategori şeridi ana şeridin altında; daha ince ve açık zeminli. */ .aksesuarKategoriSekmeleri { background: var(--renk-alan-vurgu); } .aksesuarKategoriSekmeleri .sekmeBtn { height: 24px; font-size: var(--yazi-mini); } .malzemeYonetimiGovde { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* Sekme panelleri gövdeyi tamamen doldurur. */ .aksesuarPaneli { flex: 1; min-height: 0; display: flex; flex-direction: column; } .malzemeYonetimiPanel { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px 1fr; } /* ============================================================ AYRINTILAR KAPALIYKEN LİSTE TAM GENİŞLİK (kullanıcı 25.09) ============================================================ > "şu malzeme tanımı stok kısmını hâlâ sevemedim" Ölçülmüştü: pencere 780x620, sağ sütun hiçbir plaka seçili değilken bomboş ("soldan bir plaka seçin") ve genişliğin %60'ını tutuyordu. Kurulum alanları artık "Ayrıntılar" altında. Kapalıyken sağ sütun hiç yer kaplamıyor, liste bütün genişliği alıyor: malzeme adı, ölçüsü, stoğu ve fiyatı aynı satırda rahat okunuyor. */ .malzemeYonetimiPanel--ayrintiKapali { grid-template-columns: 1fr; } /* ------------------------------------------------ GÜNLÜK ALAN: elimde / tanesi ------------------------------------------------ Seçili plakanın altında açılıyor. Günlük iş burada: ne aldım, kaça aldım, kaç tane kaldı. */ .gunlukStokAlani { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 10px; padding: 10px 12px 12px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-orta); background: var(--renk-alan); } .gunlukStokBolum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gunlukStokEtiket { flex: 0 0 auto; min-width: 48px; color: var(--renk-yazi-ikincil); font-size: 12px; } .gunlukStokLevhalar { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; } .gunlukStokLevha, .gunlukStokEkleme { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .gunlukStokOlcu { min-width: 120px; font-size: 13px; font-variant-numeric: tabular-nums; } .gunlukStokAdet { min-width: 26px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; } .gunlukStokDugme { min-width: 26px; padding: 2px 7px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: inherit; font: inherit; line-height: 1.4; cursor: pointer; } .gunlukStokDugme:hover { border-color: var(--renk-ana); } /* BORÇ: eksi sayı, elde olmayan donanım üretime girmiş. Sipariş listesine bakmadan görülsün. */ .gunlukStokBorc { color: var(--renk-uyari, #e0584f); } .gunlukStokSil { color: var(--renk-uyari, #e0584f); } .gunlukStokSayi { padding: 3px 6px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: inherit; font: inherit; font-variant-numeric: tabular-nums; text-align: right; } .gunlukStokBirim, .gunlukStokKarsilik, .gunlukStokBos { color: var(--renk-yazi-ikincil); font-size: 12px; } .gunlukStokKarsilik { margin-left: 4px; } .gunlukStokEkleDugmesi { padding: 4px 10px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: inherit; font: inherit; font-size: 12px; cursor: pointer; } .gunlukStokEkleDugmesi:hover { border-color: var(--renk-ana); } .gunlukStokUyari { color: var(--renk-uyari, #e0584f); font-size: 12px; } .gunlukStokAyrintilar { align-self: flex-start; padding: 3px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--renk-yazi-ikincil); font: inherit; font-size: 12px; cursor: pointer; } .gunlukStokAyrintilar:hover { color: var(--renk-ana); } /* Stoğu ve fiyatı girilmemiş malzemeleri katlayan başlık. Kullanıcının verisinde yedi plakanın altısı böyleydi ve gerçekten kullandığı tek malzemeyi gömüyorlardı. */ .malzemeListesiKatlamaBasligi { width: 100%; margin-top: 10px; padding: 8px 12px; border: 0; border-top: 1px solid var(--renk-kenarlik); background: transparent; color: var(--renk-yazi-ikincil); font: inherit; font-size: 12px; text-align: left; cursor: pointer; } .malzemeListesiKatlamaBasligi:hover { color: var(--renk-yazi); } /* ------------------------------------------------- DELİK DÜZENLEYİCİ ------------------------------------------------- */ .delikDuzenleyici { margin-top: 14px; } .delikDuzenleyiciAciklamasi { margin-bottom: 7px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.45; } .delikDuzenleyiciUstBilgiler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; } .delikDuzenleyiciUstAlan { display: flex; flex-direction: column; gap: 2px; } .delikDuzenleyiciUstAlan > span { color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); } .delikSatiri { display: grid; grid-template-columns: 1.3fr 1.2fr 0.9fr 0.9fr 22px; align-items: center; gap: 4px; margin-bottom: 4px; } .delikSatiriBaslik { margin-bottom: 3px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .delikSatiriBaslik > span { padding-left: 2px; } .delikSilBtn { width: 22px; height: var(--alan-yukseklik); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-soluk); font-size: 15px; line-height: 1; cursor: pointer; } .delikSilBtn:hover { background: var(--renk-tehlike); color: #ffffff; } .delikDuzenleyiciBos { padding: 6px 2px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .delikEkleBtn { height: var(--buton-yukseklik); margin-top: 4px; padding: 0 10px; border: 1px dashed var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-ikincil); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .delikEkleBtn:hover { border-color: var(--renk-ana); border-style: solid; color: var(--renk-ana-yazi); } .aksesuarFormBolumAciklamasi { margin-bottom: 7px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.45; } .malzemeYonetimiListeSutunu { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--renk-kenarlik); background: var(--renk-alan-vurgu); } .malzemeYonetimiListeAraclari { flex-shrink: 0; display: flex; flex-direction: column; gap: 5px; padding: 8px; border-bottom: 1px solid var(--renk-kenarlik-acik); } .malzemeYonetimiYeniBtn, .malzemeYonetimiSifirlaBtn { height: var(--buton-yukseklik); border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-kucuk); cursor: pointer; } .malzemeYonetimiYeniBtn { border-color: var(--renk-ana-kenar); background: var(--renk-ana); color: #ffffff; font-weight: 600; } .malzemeYonetimiYeniBtn:hover { background: var(--renk-ana-hover); } .malzemeYonetimiSifirlaBtn { color: var(--renk-yazi-ikincil); } .malzemeYonetimiSifirlaBtn:hover { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } .malzemeYonetimiListe { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; } .malzemeYonetimiListeBos { padding: 14px 12px; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); } .malzemeYonetimiListeSatiri { width: 100%; display: flex; align-items: center; gap: 8px; padding: 5px 10px; border: 0; border-left: 2px solid transparent; background: transparent; cursor: pointer; text-align: left; } .malzemeYonetimiListeSatiri:hover { background: var(--renk-ana-acik); } .malzemeYonetimiListeSatiri.secili { border-left-color: var(--renk-ana); background: var(--renk-ana-acik); } .malzemeYonetimiListeSatiri.pasif .malzemeYonetimiSatirAdi { color: var(--renk-yazi-soluk); text-decoration: line-through; } .malzemeYonetimiRenkKutusu { width: 16px; height: 16px; flex-shrink: 0; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-kucuk); } .malzemeYonetimiSatirMetinleri { flex: 1; min-width: 0; display: flex; flex-direction: column; } .malzemeYonetimiSatirAdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 500; } .malzemeYonetimiSatirDetayi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } .malzemeYonetimiFiyatUyarisi { flex-shrink: 0; padding: 1px 4px; border: 1px solid var(--renk-uyari-kenar); border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-mini); /* (29.09) "₺?" yerine "fiyat yok": iki kelime kırılmasın. */ white-space: nowrap; } /* ------------------------------------------------- FORM SÜTUNU ------------------------------------------------- */ .malzemeYonetimiFormSutunu { min-height: 0; overflow-y: auto; padding: 12px 14px; } .malzemeYonetimiBosBilgi { padding: 24px 8px; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); line-height: 1.5; text-align: center; } .malzemeFormBolumBasligi { margin: 14px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--renk-kenarlik-acik); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } .malzemeFormBolumBasligi:first-child { margin-top: 0; } .malzemeFormSatiri { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 0 10px; margin-bottom: 6px; } .malzemeFormEtiketi { color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .malzemeFormGirisKutusu { display: flex; align-items: center; gap: 6px; } .malzemeFormGiris { flex: 1; min-width: 0; height: var(--alan-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); } .malzemeFormGiris:focus { border-color: var(--renk-ana); outline: none; } .malzemeFormBirim { flex-shrink: 0; min-width: 32px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .malzemeFormRenk { width: 46px; height: var(--alan-yukseklik); padding: 1px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); cursor: pointer; } .malzemeFormIsaret { width: 14px; height: 14px; margin: 0; cursor: pointer; } .malzemeFormAciklamasi { grid-column: 2; margin-top: 2px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.4; } .malzemeFormOzeti { margin: 6px 0 0 150px; padding: 4px 7px; border-radius: var(--radius-kucuk); background: var(--renk-alan-pasif); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } .malzemeFormOzeti[data-durum="hata"] { background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } .malzemeFormUyarisi { margin-top: 12px; padding: 6px 8px; border: 1px solid var(--renk-uyari-kenar); border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-kucuk); line-height: 1.5; } .malzemeFormUyarisi[data-tur="hata"] { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } .malzemeFormUyarisi[data-tur="bilgi"] { border-color: var(--renk-basarili-kenar); background: var(--renk-basarili-acik); color: var(--renk-basarili); } .malzemeFormDugmeleri { display: flex; justify-content: flex-end; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--renk-kenarlik-acik); } .malzemeFormKaydetBtn, .malzemeFormSilBtn { height: var(--buton-yukseklik); padding: 0 14px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-kucuk); cursor: pointer; } .malzemeFormKaydetBtn { border-color: var(--renk-ana-kenar); background: var(--renk-ana); color: #ffffff; font-weight: 600; } .malzemeFormKaydetBtn:hover { background: var(--renk-ana-hover); } .malzemeFormSilBtn { margin-right: auto; color: var(--renk-tehlike); } .malzemeFormSilBtn:hover { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); } /* ================================================= 26. PROJE AYARLARI Projenin kurulumu: hangi parça hangi levhadan, hangi menteşe, hangi ray. Yeni proje açılınca ilk dolap eklenmeden önce kendiliğinden açılır. ================================================= */ .projeAyarlariKatmani { position: fixed; inset: 0; z-index: 10500; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(27, 35, 48, 0.42); animation: katmanGiris 0.12s linear; } .projeAyarlariPenceresi { width: min(100%, 620px); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); animation: pencereGiris 0.12s linear; } .projeAyarlariBaslikAlani { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .projeAyarlariBaslik { margin: 0; color: var(--renk-yazi); font-size: 13px; font-weight: 600; } .projeAyarlariAciklama { margin: 4px 0 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.5; } .projeAyarlariKapatBtn { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-ikincil); font-size: 17px; line-height: 1; cursor: pointer; } .projeAyarlariKapatBtn:hover { background: var(--renk-tehlike); color: #ffffff; } .projeAyarlariGovde { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; } .projeAyarlariKutusu { margin-bottom: 10px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan); } /* Bölüm başlığı artık DÜĞME: bölümü açıp kapatıyor. Kullanıcı istedi: kurulum sayfası dört ekran boyundaydı, bir ayarı değiştirmek için her seferinde aranıyordu. */ .projeAyarlariKutuBasligi { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: none; text-align: left; cursor: pointer; padding: 7px 9px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } /* Kapalı bölümde açıklama ve içerik gizli. display:none seçildi, yükseklik animasyonu değil: kapalı bölümdeki alanlar sekme sırasına girmemeli, yoksa klavyeyle gezerken görünmeyen alanlara düşülüyor. */ .projeAyarlariKutusu:not(.acik) .projeAyarlariKutuAciklamasi, .projeAyarlariKutusu:not(.acik) .projeAyarlariKutuIcerigi { display: none; } /* Ok işareti: bölümün açık mı kapalı mı olduğu tek bakışta görünmeli. */ .projeAyarlariKutuOku { flex: none; width: 0; height: 0; border-left: 5px solid var(--renk-yazi-soluk); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.14s ease; } /* Açıkken aşağı dönüyor. Ok bir KARAKTER değil çizgi: başlığın metnine karışmasın. Metne yazınca ekran okuyucu "Bağlantı Yerleşimi sağ üçgen" diyordu. */ .projeAyarlariKutuOku.acik { transform: rotate(90deg); } .projeAyarlariKutuAciklamasi { padding: 6px 9px 0; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.45; } .projeAyarlariKutuIcerigi { padding: 8px 9px; } .projeAyarlariSatiri { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-bottom: 5px; } .projeAyarlariEtiketi { color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .projeAyarlariGirisSarmali { display: flex; align-items: center; gap: 6px; } .projeAyarlariGirisi { width: 210px; height: var(--alan-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); } .projeAyarlariGirisi[type="number"], .projeAyarlariGirisi[data-sayi-alani] { width: 92px; text-align: right; } .projeAyarlariGirisi:focus { border-color: var(--renk-ana); outline: none; } /* Seçilen malzemenin kalınlığı. Kalınlık geometriyi belirlediği için hep görünsün. */ .projeAyarlariKalinlik { min-width: 44px; padding: 1px 5px; border-radius: var(--radius-kucuk); background: var(--renk-ana-acik); color: var(--renk-ana-yazi); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; text-align: center; } .projeAyarlariBirim { min-width: 24px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .projeAyarlariSatirAciklamasi { display: block; margin: -2px 0 7px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.4; } .projeAyarlariUyarisi { flex-shrink: 0; margin: 0 12px; padding: 7px 9px; border: 1px solid var(--renk-tehlike-kenar); border-radius: var(--radius-kucuk); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); font-size: var(--yazi-kucuk); line-height: 1.5; } .projeAyarlariAltCubuk { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 9px 13px; border-top: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .projeAyarlariIptalBtn, .projeAyarlariKaydetBtn { height: var(--buton-yukseklik); padding: 0 14px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .projeAyarlariIptalBtn { margin-right: auto; color: var(--renk-yazi-ikincil); } .projeAyarlariKaydetBtn { border-color: var(--renk-ana-kenar); background: var(--renk-ana); color: #ffffff; font-weight: 600; } .projeAyarlariKaydetBtn:hover { background: var(--renk-ana-hover); } /* ================================================= 27. ARTIK STOĞU Kesimden artan parçaların listesi. Nesting tam levha açmadan önce buradakileri dener. ================================================= */ .artikStoguKatmani { position: fixed; inset: 0; z-index: 10400; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(27, 35, 48, 0.38); animation: katmanGiris 0.12s linear; } .artikStoguPenceresi { width: min(100%, 860px); height: min(100%, 620px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); animation: pencereGiris 0.12s linear; } .artikStoguBaslikAlani { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .artikStoguBaslik { margin: 0; color: var(--renk-yazi); font-size: 13px; font-weight: 600; } .artikStoguOzeti { margin: 3px 0 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.45; } .artikStoguKapatBtn { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-ikincil); font-size: 17px; line-height: 1; cursor: pointer; } .artikStoguKapatBtn:hover { background: var(--renk-tehlike); color: #ffffff; } /* ------------------------------------------------- ELLE EKLEME Program kullanılmaya başlandığında atölyede zaten yığınla artık vardır; onlar girilmezse stok birkaç iş sonra işe yaramaya başlar. ------------------------------------------------- */ .artikStoguEkleme { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); } .artikStoguGirisi { height: var(--alan-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); } .artikStoguGirisi.malzeme { flex: 1; min-width: 0; } .artikStoguGirisi.olcu { width: 80px; text-align: right; } .artikStoguGirisi.konum { width: 150px; } .artikStoguEkleBtn { height: var(--buton-yukseklik); padding: 0 12px; border: 1px solid var(--renk-ana-kenar); border-radius: var(--radius-kucuk); background: var(--renk-ana); color: #ffffff; font-family: inherit; font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; } .artikStoguEkleBtn:hover, .levhaStoguEkleBtn:hover { background: var(--renk-ana-hover); } .artikStoguUyarisi { flex-shrink: 0; padding: 6px 12px; border-bottom: 1px solid var(--renk-basarili-kenar); background: var(--renk-basarili-acik); color: var(--renk-basarili); font-size: var(--yazi-kucuk); } .artikStoguUyarisi[data-tur="hata"], .levhaStoguUyarisi[data-tur="hata"] { border-bottom-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } /* ------------------------------------------------- LİSTE ------------------------------------------------- */ .artikStoguListesi { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px; } .artikStoguBos { padding: 28px 8px; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); line-height: 1.6; text-align: center; } .artikStoguSatiri { display: grid; grid-template-columns: 1.4fr 0.9fr 0.6fr 1fr 1.2fr auto; align-items: center; gap: 8px; padding: 4px 2px; border-bottom: 1px solid var(--renk-kenarlik-acik); color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .artikStoguSatiri.baslik { position: sticky; top: 0; border-bottom-color: var(--renk-kenarlik); background: var(--renk-panel); color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .artikStoguSatiri.ayrildi { opacity: 0.6; } /* D122: levhadan büyük kayıt listede duruyor ama özete ve yerleşime girmiyor. Kullanıcı dört satır sayıp başlıkta üç görmesin diye satır soluk ve sebebini yazıyor. */ .artikStoguSatiri.levhadanBuyuk { opacity: 0.55; } .artikStoguSatiri.levhadanBuyuk .artikStoguolcu { color: var(--renk-uyari); } .artikStoguolcu { font-variant-numeric: tabular-nums; } .artikStogukaynak { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .artikStoguKonumAlani { width: 100%; height: 22px; padding: 0 5px; border: 1px solid transparent; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-mini); } .artikStoguKonumAlani:hover, .levhaStoguKonumAlani:hover, .artikStoguKonumAlani:focus, .levhaStoguKonumAlani:focus { border-color: var(--renk-kenarlik); background: var(--renk-alan); outline: none; } .artikStoguIslemler { display: flex; align-items: center; gap: 4px; } .artikStoguTukendiBtn { height: 22px; padding: 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-family: inherit; font-size: var(--yazi-mini); cursor: pointer; } .artikStoguTukendiBtn:hover, .levhaStoguIslemBtn:hover { border-color: var(--renk-basarili-kenar); background: var(--renk-basarili-acik); color: var(--renk-basarili); } .artikStoguSilBtn { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-soluk); font-size: 15px; line-height: 1; cursor: pointer; } .artikStoguSilBtn:hover, .levhaStoguSilBtn:hover { background: var(--renk-tehlike); color: #ffffff; } .artikStoguAltCubuk { flex-shrink: 0; display: flex; align-items: center; padding: 8px 12px; border-top: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .artikStoguTemizleBtn { height: var(--buton-yukseklik); padding: 0 12px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .artikStoguTemizleBtn:hover { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } /* ================================================= 28. CNC AYARLARI Takım tablası ve tezgâh değerleri. Buradaki sayılar doğrudan NC dosyasına yazılır. ================================================= */ .cncAyarlariKatmani { position: fixed; inset: 0; z-index: 10600; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(27, 35, 48, 0.4); animation: katmanGiris 0.12s linear; } .cncAyarlariPenceresi { width: min(100%, 900px); height: min(100%, 640px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); animation: pencereGiris 0.12s linear; } .cncAyarlariBaslikAlani { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .cncAyarlariBaslik { margin: 0; color: var(--renk-yazi); font-size: 13px; font-weight: 600; } .cncAyarlariAciklama { margin: 3px 0 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .cncAyarlariKapatBtn { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-ikincil); font-size: 17px; line-height: 1; cursor: pointer; } .cncAyarlariKapatBtn:hover { background: var(--renk-tehlike); color: #ffffff; } .cncAyarlariSekmeSeridi { flex-shrink: 0; display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-bolum-baslik); } .cncAyarlariSekmeBtn { height: 27px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--renk-yazi-ikincil); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .cncAyarlariSekmeBtn.aktif { border-bottom-color: var(--renk-ana); color: var(--renk-ana-yazi); font-weight: 600; } .cncAyarlariGorunum { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 12px; } .cncAyarlariGorunum[hidden] { display: none; } /* ------------------------------------------------- TAKIM TABLASI ------------------------------------------------- */ .cncTakimAraclari { flex-shrink: 0; display: flex; gap: 6px; margin-bottom: 8px; } .cncYeniTakimBtn, .cncTakimSifirlaBtn, .cncTezgahSifirlaBtn, .cncTezgahKaydetBtn { height: var(--buton-yukseklik); padding: 0 12px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .cncYeniTakimBtn, .cncTezgahKaydetBtn { border-color: var(--renk-ana-kenar); background: var(--renk-ana); color: #ffffff; font-weight: 600; } .cncYeniTakimBtn:hover, .cncTezgahKaydetBtn:hover { background: var(--renk-ana-hover); } .cncTakimSifirlaBtn, .cncTezgahSifirlaBtn { color: var(--renk-yazi-ikincil); } .cncTakimSifirlaBtn:hover, .cncTezgahSifirlaBtn:hover { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } .cncTakimUyarisi, .cncTezgahBilgisi { flex-shrink: 0; margin-bottom: 8px; padding: 6px 9px; border: 1px solid var(--renk-basarili-kenar); border-radius: var(--radius-kucuk); background: var(--renk-basarili-acik); color: var(--renk-basarili); font-size: var(--yazi-kucuk); } .cncTakimUyarisi[data-tur="hata"], .cncTezgahBilgisi[data-tur="hata"] { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } /* ⚠️ DAR PENCEREDE SÜTUN EZİLMESİN (D102) Denetleyen oturum ölçtü: > "pencere 527 px Ad alanı 14 px · Tip seçicisi 14 px" > "pencere 1400 px Ad alanı 255 px · Tip seçicisi 170 px" > "Sayısal sütunlar (52-76 px) hiç küçülmüyor; > daralma tamamen iki metin sütunundan > karşılanıyor, o yüzden takımın adı tamamen > görünmez oluyor." > "Atölyede takımı numarasıyla değil adıyla arayan > biri için tabloyu okunamaz yapıyor." Çözüm: iki metin sütununa alt sınır kondu ve daralma kaydırmayla karşılanıyor. Başlık satırı da aynı kutunun içinde olduğu için sütunlarla birlikte kayıyor -- başlık bir yerde, değer başka yerde kalmıyor. */ .cncTakimListesi { flex: 1; min-height: 0; overflow-x: auto; } .cncTakimSatiri { display: grid; /* Onuncu sutun: cevresel hiz (D174). Kullanici 18000'in Ø5'te baska, Ø18'de bambaska bir sey demek oldugunu ekranda gormeli. */ /* Ad ve Tip sütunlarının alt sınırı var (D102): pencere daralınca 14 px'e inip boş görünmüyor, satır kaydırma çubuğuna taşıyor. 140 px "Ø18 matkap (linco..." kadarını, 110 px tip seçicisinin okunur kalmasını sağlıyor. */ grid-template-columns: 52px minmax(140px, 1.5fr) minmax(110px, 1fr) 58px 70px 74px 76px 70px 58px 58px 24px; align-items: center; gap: 5px; margin-bottom: 4px; } .cncTakimSatiri.baslik { margin-bottom: 6px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .cncTakimGirisi { width: 100%; height: var(--alan-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); } .cncTakimGirisi.sayi { text-align: right; font-variant-numeric: tabular-nums; } .cncTakimGirisi:focus { border-color: var(--renk-ana); outline: none; } .cncTakimSilBtn { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-soluk); font-size: 15px; line-height: 1; cursor: pointer; } .cncTakimSilBtn:hover { background: var(--renk-tehlike); color: #ffffff; } /* ------------------------------------------------- TEZGÂH AYARLARI ------------------------------------------------- */ .cncTezgahIzgarasi { display: grid; grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ); gap: 10px; align-items: start; } .cncAyarKutusu { border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan); } .cncAyarKutuBasligi { padding: 5px 9px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } .cncAyarKutuAciklamasi { padding: 6px 9px 0; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.45; } .cncAyarKutuIcerigi { padding: 8px 9px; } .cncAyarSatiri { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-bottom: 5px; } .cncAyarEtiketi { color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .cncAyarGirisSarmali { display: flex; align-items: center; gap: 5px; } .cncAyarGirisi { width: 92px; height: var(--alan-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); text-align: right; } select.cncAyarGirisi { text-align: left; } /* Metin alanı (17.09): ilki karekod ADRESİ. 92 piksellik sayı kutusunda "https://module" diye kesiliyordu; kullanıcı yazdığı adresi göremiyordu. */ .cncAyarGirisi.cncAyarYaziGirisi { width: 300px; max-width: 100%; text-align: left; } .cncAyarGirisi:focus { border-color: var(--renk-ana); outline: none; } .cncAyarBirimi { min-width: 26px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .cncAyarIsareti { width: 14px; height: 14px; margin: 0; cursor: pointer; } /* Kontur kutusunun altındaki canlı paso özeti ve uyarısı (D199). Sayının sonucu ekranda duruyor: kullanıcı G kod önizlemesine gitmeden görüyor. */ .cncPasoOzeti { margin: 2px 0 6px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } .cncPasoUyarisi, .cncSinirUyarisi { margin: 0 0 6px; padding: 6px 9px; border: 1px solid var(--renk-tehlike-kenar); border-radius: var(--radius-kucuk); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); font-size: var(--yazi-mini); line-height: 1.4; } .cncAyarAciklamasi { display: block; margin: -2px 0 7px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.4; } .cncTezgahDugmeleri { flex-shrink: 0; display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; } .cncTezgahSifirlaBtn { margin-right: auto; } /* ============================================================ STOK SEKMELERİ ============================================================ Levha ve artık stoğu aynı pencerede, iki sekmede. */ .artikStoguSekmeleri { flex-shrink: 0; display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--renk-kenarlik); } .artikStoguSekmeBtn { padding: 7px 12px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); cursor: pointer; } .artikStoguSekmeBtn:hover { color: var(--renk-yazi); } .artikStoguSekmeBtn[data-secili="evet"] { border-bottom-color: var(--renk-ana); color: var(--renk-ana-yazi); font-weight: 600; } /* Bölme, pencerenin kalan yüksekliğini kaplıyor; liste kendi içinde kayıyor. */ .artikStoguBolmesi { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* [hidden] üstteki display:flex'i yenemiyor; gizli sekme açık kalıyordu. */ .artikStoguBolmesi[hidden] { display: none; } /* ============================================================ LEVHA SATIRI ============================================================ Beş sütun: malzeme · ölçü · adet · konum · işlemler Artık satırından ayrı bir ızgara: orada durum sütunu var, burada adet. */ .levhaStoguSatiri { display: grid; grid-template-columns: 1.5fr 1.1fr 0.9fr 1.1fr auto; align-items: center; gap: 10px; padding: 5px 2px; border-bottom: 1px solid var(--renk-kenarlik-acik); color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .levhaStogumalzeme { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .levhaStoguolcu { color: var(--renk-yazi-ikincil); font-variant-numeric: tabular-nums; } .levhaStoguadet { font-variant-numeric: tabular-nums; } .levhaStogukaynak { overflow: hidden; color: var(--renk-yazi-soluk); text-overflow: ellipsis; white-space: nowrap; } /* En az adedin altına düşen kalem. Sipariş listesi gözden kaçmasın diye işaretli. */ .levhaStoguSatiri[data-azalan="evet"] { background: var(--renk-tehlike-acik); } .levhaStoguSatiri[data-azalan="evet"] .levhaStoguadet { color: var(--renk-tehlike); font-weight: 600; } /* Levha bölmesinin biçimi artık bölmesiyle aynı. Sınıf adları ayrı çünkü iki form aynı pencerede duruyor ve aynı adı taşısalardı hangi formun hangisi olduğu kodda da testte de karışırdı. */ .levhaStoguEkleme { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--renk-kenarlik-acik); } .levhaStoguGirisi { height: var(--alan-yukseklik); min-width: 0; padding: 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .levhaStoguListesi { flex: 1; overflow-y: auto; padding: 4px 12px 10px; } .levhaStoguBos { margin: 16px 0; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); text-align: center; } .levhaStoguIslemler { display: flex; gap: 4px; justify-content: flex-end; } /* LEVHA STOĞU DÜĞMELERİ (29.09) İnceleme: "Stok → Levha Stoğu satır düğmeleri (−, +, Sil, Geçmiş, + Ekle) tarayıcının çıplak düğmesi gibi duruyor." Bu dosyada yalnız `:hover` kuralları vardı (artık stoğu kurallarının yanına eklenmiş); taban kuralı hiç yazılmamıştı, kalın siyah kenarlık tarayıcıdan geliyordu. Artık artık stoğuyla aynı aile: "+ Ekle" ana düğme, satır düğmeleri alçak ve sessiz, Sil tehlike renginde. Üzerine gelince kurallar yukarıdaki ortak `:hover` seçicilerinden geliyor. */ .levhaStoguEkleBtn { flex-shrink: 0; height: var(--alan-yukseklik); padding: 0 12px; border: 1px solid var(--renk-ana-kenar); border-radius: var(--radius-kucuk); background: var(--renk-ana); color: #ffffff; font-family: inherit; font-size: var(--yazi-kucuk); font-weight: 600; white-space: nowrap; cursor: pointer; } .levhaStoguIslemBtn, .levhaStoguGecmisBtn { min-width: 26px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--buton-yuzey); color: var(--renk-yazi-ikincil); font-family: inherit; font-size: var(--yazi-mini); line-height: 1; white-space: nowrap; cursor: pointer; } .levhaStoguGecmisBtn:hover { border-color: var(--renk-ana-kenar); color: var(--renk-yazi); } .levhaStoguSilBtn { border-color: var(--renk-tehlike-kenar); color: var(--renk-tehlike); } .levhaStoguEkleBtn:focus-visible, .levhaStoguIslemBtn:focus-visible, .levhaStoguGecmisBtn:focus-visible { outline: 2px solid var(--renk-ana); outline-offset: 1px; } /* ============================================================ TAKIM EŞLEŞTİRME ============================================================ Hangi işi hangi takımla yapacağına kullanıcı karar veriyor. Satır iki sütun: solda işin ne olduğu, sağda takım listesi. İş sütunu üç satır — adı, teknik katman adı, ne işe yaradığı — çünkü kullanıcı NC dosyasında gördüğü adla buradaki adı eşleştirebilmeli. */ .takimEslestirmeBolmesi { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 12px; } .takimEslestirmeAciklama { margin: 0; color: var(--renk-yazi-soluk, #9aa4b2); font-size: 12px; line-height: 1.5; } .takimEslestirmeListesi { display: flex; flex-direction: column; border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-kucuk, 4px); overflow: hidden; } /* Üç sütun: iş · takım · derinlik. Derinlik dar tutuldu; iki haneli bir sayı giriyor. Geniş olsaydı takım seçimiyle aynı ağırlıkta görünürdü, oysa çoğu işte boş kalacak. */ .takimEslestirmeSatiri { display: grid; grid-template-columns: 1fr minmax(150px, 220px) 78px; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--renk-kenarlik); } .takimEslestirmeSatiri:last-child { border-bottom: none; } .takimEslestirmeSatiri:nth-child(odd) { background: var(--renk-satir-vurgu, rgba(255, 255, 255, 0.02)); } .takimEslestirmeIs { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .takimEslestirmeAd { color: var(--renk-yazi); font-size: 13px; font-weight: 600; } /* Teknik katman adı: NC dosyasında ve DXF'te aynen bu yazıyor. Tek aralıklı yazıyla, çünkü orada da öyle görünüyor. */ .takimEslestirmeKatman { color: var(--renk-ana-yazi); font-family: Consolas, "Courier New", monospace; font-size: 11px; } .takimEslestirmeNot { color: var(--renk-yazi-soluk, #9aa4b2); font-size: 11px; line-height: 1.4; } /* TABLODA OLMAYAN ÇAP UYARISI (D184) İşin kendi satırında duruyor: kullanıcı hangi işin takımsız kaldığını aramak zorunda kalmasın. */ /* KATALOGTA SEÇİLEN ÇAPIN TAKIMI YOKSA (D184) */ .delikDuzenleyiciTakimUyarisi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; } .delikDuzenleyiciTakimUyariYazi { color: var(--renk-uyari, #e0b050); font-size: 11px; line-height: 1.4; } .delikDuzenleyiciTakimBtn { padding: 2px 8px; background: transparent; color: var(--renk-vurgu, #6ab0f3); border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-kucuk, 4px); font-size: 11px; cursor: pointer; } .delikDuzenleyiciTakimBtn:hover { background: var(--renk-satir-vurgu, rgba(255, 255, 255, 0.06)); } .takimEslestirmeUyari { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; } .takimEslestirmeUyariYazi { color: var(--renk-uyari, #e0b050); font-size: 11px; line-height: 1.4; } .takimEslestirmeUyariBtn { padding: 2px 8px; background: transparent; color: var(--renk-vurgu, #6ab0f3); border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-kucuk, 4px); font-size: 11px; cursor: pointer; } .takimEslestirmeUyariBtn:hover { background: var(--renk-satir-vurgu, rgba(255, 255, 255, 0.06)); } .takimEslestirmeSecim { width: 100%; padding: 5px 8px; background: var(--renk-girdi-zemin, #171a1f); color: var(--renk-yazi); border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-kucuk, 4px); font-size: 12px; } .takimEslestirmeSecim:focus { outline: none; border-color: var(--renk-ana); } /* Otomatik kalan satır soluk duruyor: kullanıcı neyi kendi seçtiğini bir bakışta görsün. */ .takimEslestirmeSecim:invalid, .takimEslestirmeSecim[data-otomatik="1"] { color: var(--renk-yazi-soluk, #9aa4b2); } /* ============================================================ ÇEKMECE KUTU YÜKSEKLİĞİ ============================================================ Salt okunur bilgi satırı: kutunun kaç mm çıkacağını gösteriyor. Kutu boyu standart bir listeden seçildiği için "cephe eksi pay" hesabı kafadan yapılamıyor; program söylüyor. */ .cekmeceKutuBilgisi { align-items: baseline; } .cekmeceKutuDegeri { color: var(--renk-ana-yazi); font-size: 13px; font-weight: 600; text-align: right; } /* Standart listeden seçilemeyen ölçü: açıklığa hiçbir standart sığmamış ve kutu kalana göre yapılmış. Rengi ayrı, çünkü o parça stoktan değil ölçüye göre kesiliyor. */ .cekmeceKutuDegeri.standartDisi { color: var(--renk-uyari, #e0a44a); } .cekmeceKutuNotu { margin: 2px 0 8px; color: var(--renk-yazi-soluk, #9aa4b2); font-size: 11px; line-height: 1.45; } /* ============================================================ CNC AYARLARI IKINCIL DUGMESI ============================================================ "Hepsini otomatige dondur" gibi, ana eylem olmayan dugmeler. Sinif JS'te kullaniliyordu ama CSS'te hic tanimli degildi: dugme ciziliyor, stili olmuyor, koyu zeminde okunmuyordu. */ .cncAyarlariIkincilBtn { align-self: flex-start; height: var(--buton-yukseklik, 28px); padding: 0 14px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk, 4px); background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .cncAyarlariIkincilBtn:hover { border-color: var(--renk-ana-kenar); background: var(--renk-alan-vurgu); color: var(--renk-yazi); } .takimEslestirmeDerinlik { width: 100%; height: var(--buton-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; } .takimEslestirmeDerinlik:focus { border-color: var(--renk-ana); outline: none; } /* Yazilmis derinlik katalogdan farkli demek; goz onu bulsun. */ .takimEslestirmeDerinlik:not(:placeholder-shown) { border-color: var(--renk-ana-kenar); font-weight: 600; } .takimEslestirmeDerinlikYok { color: var(--renk-yazi-soluk); font-size: 12px; text-align: center; cursor: default; } /* Satırla aynı ızgara: başlıklar sütunların tam üstüne gelsin. */ .takimEslestirmeBasliklari { display: grid; grid-template-columns: 1fr minmax(150px, 220px) 78px; gap: 10px; padding: 0 10px 5px; color: var(--renk-yazi-soluk); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .takimEslestirmeBaslikDerinlik { text-align: right; } /* ============================================================ TEKRAR KESİM ============================================================ Kullanıcı ArtCAM'i örnek gösterdi: bütün işler solda çıkar, sağa attıkların çalışır. Aynı düzen. İki liste eşit genişlikte; hangisinin "kaynak" olduğu başlıklardan anlaşılıyor, ok çizmeye gerek yok. Tıklayınca karşıya geçiyor. */ .tekrarKesimKatmani { position: fixed; inset: 0; z-index: 11400; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(12, 16, 22, 0.55); } .tekrarKesimPenceresi { width: min(100%, 720px); max-height: calc(100vh - 40px); display: flex; flex-direction: column; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-orta); background: var(--renk-panel); box-shadow: var(--golge-pencere); } .tekrarKesimBasligi { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-bolum-baslik); } .tekrarKesimKapatBtn { width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-soluk); font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; } .tekrarKesimKapatBtn:hover { background: var(--renk-alan-pasif); color: var(--renk-yazi); } .tekrarKesimAciklama { margin: 0; padding: 10px 12px 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.5; } .tekrarKesimGovde { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; min-height: 0; } .tekrarKesimListesi { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); } .tekrarKesimListeBasligi { padding: 7px 9px; border-bottom: 1px solid var(--renk-kenarlik); color: var(--renk-yazi-soluk); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .tekrarKesimListeGovdesi { min-height: 120px; max-height: 320px; overflow-y: auto; padding: 5px; } .tekrarKesimIs { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 4px; padding: 6px 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); color: var(--renk-yazi); font-family: inherit; text-align: left; cursor: pointer; } .tekrarKesimIs:hover { border-color: var(--renk-ana); } /* Tekrarında kopmuş parça savrulabilecek işler. Renk uyarı değil dikkat: seçilmesi yasak değil, bilerek seçilmeli. */ .tekrarKesimIs.uyarili { border-left: 3px solid var(--renk-uyari); } .tekrarKesimIsAdi { font-size: 12px; font-weight: 600; } .tekrarKesimIsBilgisi { color: var(--renk-yazi-soluk); font-size: 11px; font-variant-numeric: tabular-nums; } .tekrarKesimDerinlik { display: flex; align-items: center; gap: 8px; padding: 0 12px 10px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .tekrarKesimDerinlikGirisi { width: 88px; height: var(--buton-yukseklik); padding: 0 7px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; } .tekrarKesimUyarilari { display: flex; flex-direction: column; gap: 5px; padding: 0 12px; } .tekrarKesimUyarisi { padding: 6px 8px; border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); color: var(--renk-yazi-ikincil); font-size: 11.5px; line-height: 1.45; } .tekrarKesimUyarisi.tehlikeli { background: var(--renk-uyari-acik); color: var(--renk-uyari); border: 1px solid var(--renk-uyari-kenar); } .tekrarKesimAltCubuk { display: flex; justify-content: flex-end; padding: 12px; } .tekrarKesimUretBtn { height: var(--buton-yukseklik); padding: 0 14px; border: 1px solid var(--renk-ana); border-radius: var(--radius-kucuk); background: var(--renk-ana); color: #ffffff; font-family: inherit; font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; } .tekrarKesimUretBtn:disabled { opacity: 0.45; cursor: default; } /* ------------------------------------------------- DONANIM STOĞU ------------------------------------------------- Kullanıcı istedi: stok yalnız levha ve artıktan ibaret olmasın. Kalemler üretimle kendiliğinden açılıyor; kullanıcı yalnız adet giriyor. */ .donanimStoguAciklamasi { margin-bottom: 10px; padding: 9px 11px; border-left: 3px solid var(--renk-ana); border-radius: 0 var(--radius-kucuk) var(--radius-kucuk) 0; background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); line-height: 1.6; } .donanimStoguUyarilari:empty { display: none; } /* Eksiye düşen kalem sipariş listesinin ilk sırası. */ .donanimStoguUyarisi { margin-bottom: 10px; padding: 9px 11px; border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-mini); line-height: 1.55; } .donanimStoguSatiri { display: grid; grid-template-columns: 1fr 90px 80px auto auto; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--renk-kenarlik-acik); } /* Borçlu kalem: üretimde kullanıldı ama stokta yoktu. Aramak zorunda kalmasın diye kırmızı. */ .donanimStoguSatiri.borclu { background: var(--renk-uyari-acik); } .donanimStoguSatiri.borclu .donanimStoguAltMetni { color: var(--renk-uyari); font-weight: 600; } /* Eşiğin altına düşen: yakında bitecek. */ .donanimStoguSatiri.azalan .donanimStoguAltMetni { color: var(--renk-uyari); } .donanimStoguAdi { color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .donanimStoguAltMetni { margin-top: 2px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } .donanimStoguAdedi, .donanimStoguEklemesi { padding: 5px 7px; border: 1px solid var(--renk-kenarlik); border-radius: 5px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-variant-numeric: tabular-nums; text-align: right; } .donanimStoguEkleBtn { padding: 5px 10px; border: 1px solid var(--renk-ana); border-radius: 6px; background: var(--renk-ana); color: #ffffff; font-size: var(--yazi-kucuk); cursor: pointer; } .donanimStoguSilBtn { padding: 3px 8px; border: none; border-radius: 6px; background: transparent; color: var(--renk-yazi-ikincil); font-size: 16px; line-height: 1; cursor: pointer; } .donanimStoguSilBtn:hover { background: var(--renk-alan); } .donanimStoguBos { padding: 36px 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); text-align: center; line-height: 1.6; } /* ============================================================ KÜTÜPHANEDEN EKLERKEN AÇILAN GENİŞLİK KUTUSU (A18 · D176) ============================================================ Kutu tek alanlı: yalnız EN soruluyor. Alt/üst işareti olmayan modelde bir satır daha çıkıyor (D176) -- "ölçüler nereden gelsin". O satır bir kez cevaplanıp kütüphaneye yazılıyor, sonra kutu yine tek alanlı. */ .kutuphaneEniPenceresi .parcaEklemeSatir { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .kutuphaneEniPenceresi .parcaEklemeEtiket { display: flex; flex-direction: column; gap: 6px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .kutuphaneEniPenceresi .parcaEklemeAlan { padding: 8px 10px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-normal); } .kutuphaneEniHizli { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .kutuphaneEniHizliBtn { padding: 5px 10px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: transparent; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); cursor: pointer; } .kutuphaneEniHizliBtn:hover { background: var(--renk-alan); color: var(--renk-yazi); } .kutuphaneEniTurNotu { margin: 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.5; } .kutuphaneEniPenceresi .parcaEklemeDugmeler { display: flex; justify-content: flex-end; gap: 8px; } /* Takım tablosundaki çevresel hız sütunu (D174). Girilebilir değil: sayı çap ve devirden çıkıyor. Önerilen bandın dışına çıkınca kırmızı. */ .cncTakimHizi { text-align: right; padding-right: 4px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); font-variant-numeric: tabular-nums; } .cncTakimHizi.yuksek { color: var(--renk-tehlike); font-weight: 600; } /* ------------------------------------------------ EK LEVHA BOYLARI (D168) ------------------------------------------------ Aynı dekor birden çok ebatta satılıyor; malzemenin altında bir levha listesi duruyor ve nesting hangisini açacağını kendisi seçiyor. */ .malzemeEkBoylarKutusu { display: flex; flex-direction: column; gap: 4px; } .malzemeEkBoylarListesi { display: flex; flex-direction: column; gap: 4px; } .malzemeEkBoySatiri { display: flex; align-items: center; gap: 6px; } .malzemeEkBoyGirisi { flex: 0 1 90px; min-width: 60px; } .malzemeEkBoyCarpi { flex-shrink: 0; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); } .malzemeEkBoyBos { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .malzemeEkBoyEkle, .malzemeEkBoySil { align-self: flex-start; padding: 3px 8px; border: 1px solid var(--renk-kenar); border-radius: 4px; background: var(--renk-yuzey); color: var(--renk-yazi); font-size: var(--yazi-mini); cursor: pointer; } .malzemeEkBoySil { flex-shrink: 0; align-self: center; } .malzemeEkBoyEkle:hover, .malzemeEkBoySil:hover { background: var(--renk-yuzey-vurgu); } /* ------------------------------------------------ KÜTÜPHANE SATIRINDA ÖLÇÜ KAYNAĞI ROZETİ (D176/7) ------------------------------------------------ İşaret ekranda görünüyor ve görünen şeyin kendisi değiştirme kapısı. Yanlış seçen kullanıcı modeli silmek zorunda kalmıyor. */ .kutuphaneOlcuKaynagiRozeti { flex-shrink: 0; align-self: center; margin-right: 4px; padding: 1px 5px; border: 1px solid var(--renk-kenar); border-radius: 3px; background: var(--renk-yuzey); color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); letter-spacing: 0.4px; cursor: pointer; } .kutuphaneOlcuKaynagiRozeti:hover { border-color: var(--renk-vurgu); color: var(--renk-vurgu); } /* ================================================= KIRMIZI DEVRİN SEBEBİ (D229) ================================================= Çevresel hız sütununda kırmızı sayı vardı ve sebebi yalnız fare ipucunda yazıyordu. Bu programın her yerinde sebep ekranda: kutu tablonun üstünde, satırın kendi altında da bir satır. Kırmızı yoksa ikisi de hiç görünmüyor (`hidden`). */ .cncDevirNotu { flex-shrink: 0; margin-bottom: 8px; padding: 6px 9px; border: 1px solid var(--renk-uyari-kenar); border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-kucuk); line-height: 1.5; } .cncDevirNotuBasligi { margin-bottom: 3px; font-weight: 600; } .cncDevirNotuSatiri { margin-top: 2px; } .cncTakimSatirUyarisi { margin-top: 2px; color: var(--renk-uyari); font-size: var(--yazi-mini); line-height: 1.45; } /* ------------------------------------------------- KARTELA'DAN SEÇ (K4) Malzeme yönetimi penceresinin üstünde açılır; marka seçimi + arama, altında dekor satırları (renk kutusu · kod · ad · yüzey). ------------------------------------------------- */ .kartelaKatmani { z-index: 10001; } .kartelaPenceresi { width: min(100%, 560px); } .kartelaGovde { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px 14px 14px; } .kartelaAracSatiri { display: flex; gap: 8px; } .kartelaAracSatiri .kartelaMarka { flex: 0 1 240px; } .kartelaAracSatiri .kartelaArama { flex: 1; } .kartelaGruplar { display: flex; flex-wrap: wrap; gap: 4px; } .kartelaGruplar:empty { display: none; } .kartelaGrupBtn { height: 22px; padding: 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: 11px; background: var(--renk-alan); color: var(--renk-yazi-soluk); font-family: inherit; font-size: 11px; cursor: pointer; } .kartelaGrupBtn:hover { border-color: var(--renk-ana); } .kartelaGrupBtnAktif { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; } .kartelaDurum { color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); } .kartelaDurumHata { color: var(--renk-uyari); } .kartelaListe { display: flex; flex-direction: column; gap: 2px; max-height: min(52vh, 460px); overflow-y: auto; padding-right: 2px; } .kartelaSatir { display: grid; grid-template-columns: 26px 88px 1fr auto; align-items: center; gap: 10px; padding: 5px 8px; border: 1px solid transparent; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); text-align: left; cursor: pointer; } .kartelaSatir:hover, .kartelaSatir:focus-visible { border-color: var(--renk-ana); background: var(--renk-alan); outline: none; } .kartelaRenk { width: 26px; height: 20px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 4px; } .kartelaRenkYok { background: repeating-linear-gradient( 45deg, #ddd 0 4px, #f4f4f4 4px 8px); } .kartelaKod { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kartelaAd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kartelaYuzey { color: var(--renk-yazi-soluk); font-size: 11px; white-space: nowrap; } .kartelaBos, .kartelaNot { margin: 0; color: var(--renk-yazi-soluk); font-size: 11px; } .malzemeFormKartelaBtn { flex: none; height: var(--alan-yukseklik); padding: 0 10px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); white-space: nowrap; cursor: pointer; } .malzemeFormKartelaBtn:hover { border-color: var(--renk-ana); } /* ------------------------------------------------- KARTTA STOK (K16a) Malzeme/aksesuar kartının altında: elde ne var, tek tıkla Stok penceresi. ------------------------------------------------- */ .malzemeFormStokOzeti { margin-left: 0; } .malzemeFormStokBtn { margin-top: 6px; height: var(--alan-yukseklik); padding: 0 10px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .malzemeFormStokBtn:hover { border-color: var(--renk-ana); } .malzemeFormStokBtn:disabled { opacity: 0.55; cursor: default; } /* Şablonun ölçü aralığı (29.09): ad + en az + en çok tek satırda. Alanlar dar: dört haneli mm yeter. */ .kutuphaneyeKaydetAralikKutusu { display: grid; gap: 6px; min-width: 0; } .kutuphaneyeKaydetAralikSatiri { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; margin: 0; } .kutuphaneyeKaydetAralikSatiri > .kutuphaneyeKaydetInput { width: 100%; min-width: 0; } .kutuphaneyeKaydetAralikSatiri > span { font-size: 12px; color: var(--renk-yazi-ikincil); } /* ===== css/bolumler/08-hareket.css ===== */ /* ================================================= 28. HAREKETLER ================================================= */ @keyframes katmanGiris { from { opacity: 0; } to { opacity: 1; } } @keyframes pencereGiris { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Hareket azaltma tercihine saygı. */ @media ( prefers-reduced-motion: reduce ) { /* OLCULEN KUSUR (kullanici 23.09) > "ben bir animasyon goremedim" Kullanicinin Windows'unda "animasyonlari goster" kapali; tarayici reduce bildiriyor. Bu blok butun sureleri 0,01 ms yapiyordu, yani programdaki HICBIR animasyon kullaniciya hic oynamamis: modul seridi gecisi, pencere girisi, sekme akisi. Olculdu: sekmelerin animation-duration degeri 1e-05s geliyordu. Artik sifirlamiyoruz. Tercihe saygi duruyor (tekrarlanan hareket yok, kaydirma ziplamiyor) ama arayuz olu kalmiyor; her bolum kendi suresini kisaltiyor. */ *, *::before, *::after { scroll-behavior: auto !important; animation-iteration-count: 1 !important; } } /* Tamamen susturmak isteyen icin: koke data-hareket="kapali" eklemek yeter. */ :root[data-hareket="kapali"] *, :root[data-hareket="kapali"] *::before, :root[data-hareket="kapali"] *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* ================================================= 29. DUYARLI EKRAN AYARLARI ================================================= */ @media ( max-width: 1200px ) { :root { --sol-panel-genislik: 224px; --sag-panel-genislik: 280px; } } /* D29: 224px'lik daralma yalnız 448px'in ÜSTÜNDE yeterli -- "3B alanı pencerenin yarısından azına düşmesin" kuralı (pencere − 224 ≥ pencere / 2) 448'in altında bozuluyor. Gerçek tarayıcıda ölçtüm: 530px ve 400px pencerede panel doğru şekilde 224'e iniyordu (denetleyenin "244 kalıyor" bulgusu ölçüm yönteminin medya sorgusunu hiç tetiklememesinden kaynaklanıyordu) ama 400px'de 3B alanı 176px'e düşüyordu -- pencerenin yarısından az. Panel daralt düğmesiyle zaten çalışan "dar" görünüme (32px, başlık ve içerik gizli) burada da geçiyoruz; kullanıcının kendi tercihini değil, pencerenin kendisini soruyoruz. Aynı stiller 03-solPanel.css'te .solPanel.solPanelDar için tanımlı; burada .solPanelDar sınıfı olmadan da aynı görünüme zorluyoruz. */ /* EŞİK 460 → 746 (D154, 5. ölçüm) Denetleyen oturum 460 px'lik pencerede ölçtü: sol panel 224 px çizim 236 px → pencerenin %51'i Yani 460 px'lik kural TETİKLENMİYORDU. Emülasyonun bildirdiği genişlik 460'ın bir tık üstünde kalıyor olabilir; ama asıl sorun eşiğin bıçak sırtı olması -- tam ölçüde durmak, ölçmenin her küçük farkında davranışı değiştiriyor. Yeni eşik uydurma değil, ölçütün kendi cümlesinden çıkıyor: "çizim alanı pencerenin en az %70'i olsun" pencere − 224 ≥ 0,7 × pencere 0,3 × pencere ≥ 224 pencere ≥ 746,7 Yani 224 px'lik panel ancak 747 px ve üstünde ölçüte uyuyor. Altında panel 32 px'e iniyor: 460 px → 428 px çizim (%93) 700 px → 668 px (%95) 750 px → 526 px (%70) ← 224 px panel Kullanıcının kendi "panel daralt" düğmesi bundan bağımsız çalışmaya devam ediyor. */ @media ( max-width: 746px ) { .solPanel { width: var(--sol-panel-dar-genislik); } .solPanel .solPanelBaslik { display: none; } .solPanel .solPanelBaslikAlani { justify-content: center; padding: 0; } .solPanel #solPanelIcerik, .solPanel .solPanelIcerik { display: none; } /* ⚠️ MODEL AĞACI DA GİZLENİYOR (D205) Bu blok elle daraltmanın (`.solPanelDar`) beş kuralından DÖRDÜNÜ kopyalamıştı; beşincisi eksikti. Denetleyen oturum 32 px'lik şeritte kırık kelimeler ölçtü: > ".modelAgaciBaslik x=8..46 → 32'de kesiliyor > → \"MOD\" > .modelAgaciBos satır satır sarıyor > → \"Oda / hen / dola / yok.\"" Ve doğrusunun zaten yazılı olduğunu da gösterdi: > "aynı pencerede `‹` ile elle daralttığımda > .modelAgaciYuvasi 0 px'e iniyor ve şerit > tertemiz." Aynı bilgi iki yerde yazıldığında biri geride kalıyor -- bu gecenin deseni. Beşinci kural da buraya kondu; kaynağı `22-modelAgaci.css`'teki `.solPanelDar` kuralı. */ .solPanel .modelAgaciYuvasi { display: none; } } @media ( max-width: 1000px ) { .calismaHeaderProgramAdi { display: none; } .calismaHeader { grid-template-columns: auto minmax(120px, 1fr) auto; gap: 8px; } } @media ( max-width: 820px ) { .calismaHeaderBilgi { display: none; } .calismaHeaderBtn { padding: 0 8px; font-size: var(--yazi-mini); } .durumCubuguBolum { padding: 0 6px; } } @media ( max-width: 700px ) { :root { --sag-panel-genislik: 260px; } .calismaModSekmesi { min-width: 76px; padding: 0 8px; } .gorunumHudBtn { min-width: 28px; padding: 0 6px; } } @media ( max-width: 600px ) { .kutuphaneyeKaydetKatmani, .parcaEklemeKatmani, .rafEklemeKatmani, .dolapBakisYonuKatmani { padding: 10px; } .kutuphaneyeKaydetFormGrubu, .parcaEklemeFormGrubu, .rafEklemeFormSatiri, .rafEklemeYerlesimSatiri, .sagPanelFormSatiri, .sagPanelSayiAlani { grid-template-columns: minmax(0, 1fr); gap: 3px; } .kutuphaneyeKaydetMenuSecimAlani { grid-template-columns: minmax(0, 1fr); } .kutuphaneyeKaydetYeniMenuBtn { width: 100%; } } @media ( max-width: 520px ) { .menuSatiri { padding-left: calc( 3px + ( var(--menu-derinlik, 0) * 9px ) ); } } /* ===== css/bolumler/09-girisEkrani.css ===== */ /* ================================================= 30. GİRİŞ EKRANI ================================================= Uygulamanın açılış sayfası: proje listesi ve yeni proje. Çalışma ekranıyla aynı masaüstü dilini kullanır; yalnız kartlar biraz daha ferah, çünkü burada yoğunluk değil okunabilirlik önemli. */ .girisEkrani { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--renk-zemin); } /* ------------------------------------------------- ÜST ŞERİT ------------------------------------------------- */ .girisHeader { height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--serit-yuzey); } .girisMarka { display: flex; align-items: center; gap: 10px; } .girisLogo { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .girisProgramAdi { color: var(--renk-yazi); font-size: 14px; font-weight: 700; line-height: 1.2; } .girisAltBaslik { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); letter-spacing: 0.08em; text-transform: uppercase; } /* Üye rozeti header'da: marka solda, rozet + Yeni Proje sağda (30.09). */ .girisHeader .uyeRozetiHeaderde { margin-left: auto; margin-right: 12px; } .girisYeniProjeBtn { height: 30px; padding: 0 16px; border: 1px solid var(--renk-ana-hover); border-radius: var(--radius-kucuk); background: linear-gradient( 180deg, #2e74e0, var(--renk-ana) ); color: #ffffff; font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; transition: background 0.1s linear; } .girisYeniProjeBtn:hover { background: linear-gradient( 180deg, var(--renk-ana), var(--renk-ana-hover) ); } /* ------------------------------------------------- GÖVDE ------------------------------------------------- */ .girisGovde { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; } .girisListeAlani { max-width: 1100px; margin: 0 auto; } .girisProjeIzgarasi { display: grid; grid-template-columns: repeat( auto-fill, minmax(260px, 1fr) ); gap: 14px; } /* ------------------------------------------------- PROJE KARTI ------------------------------------------------- */ .girisProjeKarti { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-buyuk); background: var(--renk-alan); transition: border-color 0.1s linear, box-shadow 0.1s linear; } .girisProjeKarti:hover { border-color: var(--renk-ana-kenar); box-shadow: var(--golge-yuzen); } .girisKartBaslikAlani { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .girisKartBaslik { margin: 0; overflow: hidden; text-overflow: ellipsis; color: var(--renk-yazi); font-size: 14px; font-weight: 700; line-height: 1.3; } .girisKartSilBtn { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--renk-yazi-soluk); font-size: 16px; line-height: 1; cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear, color 0.1s linear; } .girisKartSilBtn:hover { border-color: var(--renk-tehlike); background: var(--renk-tehlike); color: #ffffff; } .girisKartMusteri { color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .girisKartSayilar { display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: 6px; padding: 8px 0; border-top: 1px solid var(--renk-kenarlik-acik); border-bottom: 1px solid var(--renk-kenarlik-acik); } .girisKartSayi { display: flex; flex-direction: column; align-items: center; gap: 2px; } .girisKartSayi strong { color: var(--renk-yazi); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .girisKartSayi span { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); letter-spacing: 0.05em; text-transform: uppercase; } .girisKartTarih { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } .girisKartAcBtn { width: 100%; height: 30px; border: 1px solid var(--renk-ana-kenar); border-radius: var(--radius-kucuk); background: var(--renk-ana-acik); color: var(--renk-ana-hover); font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; transition: background 0.1s linear, color 0.1s linear; } .girisKartAcBtn:hover { background: var(--renk-ana); color: #ffffff; } /* ------------------------------------------------- BOŞ DURUM ------------------------------------------------- */ .girisBosDurum { max-width: 460px; margin: 60px auto; padding: 28px; border: 1px dashed var(--renk-kenarlik); border-radius: var(--radius-buyuk); background: var(--renk-alan); text-align: center; } .girisBosDurum h3 { margin: 0 0 10px; color: var(--renk-yazi); font-size: 15px; font-weight: 700; } .girisBosDurum p { margin: 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.6; } /* ------------------------------------------------- ALT DURUM ÇUBUĞU ------------------------------------------------- */ .girisDurumCubugu { height: var(--durum-yukseklik); flex-shrink: 0; display: flex; align-items: center; padding: 0 14px; border-top: 1px solid var(--renk-kenarlik); background: var(--renk-serit); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); } .girisDurumCubugu.uyari { background: var(--renk-uyari-acik); color: var(--renk-uyari); } /* ================================================= 31. YENİ PROJE PENCERESİ ================================================= */ .yeniProjeKatmani { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(27, 35, 48, 0.34); animation: katmanGiris 0.12s linear; } .yeniProjePenceresi { width: min(100%, 420px); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); animation: pencereGiris 0.12s linear; } .yeniProjeBaslikAlani { height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 10px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-bolum-baslik); } .yeniProjeBaslik { margin: 0; color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 700; } .yeniProjeKapatBtn { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--renk-yazi-ikincil); font-size: 15px; line-height: 1; cursor: pointer; } .yeniProjeKapatBtn:hover { border-color: var(--renk-tehlike); background: var(--renk-tehlike); color: #ffffff; } .yeniProjeForm { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 12px; } .yeniProjeSatiri { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 8px; min-height: var(--alan-yukseklik); } .yeniProjeEtiketi { color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } /* Zorunlu alan yıldızı. Müşteri adı boş bırakılınca proje kurulmuyordu ama formda zorunlu olduğu görünmüyordu. */ .yeniProjeZorunlu { margin-left: 3px; color: var(--renk-tehlike); } .yeniProjeInput { width: 100%; height: var(--alan-yukseklik); padding: 0 7px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); outline: none; background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-kucuk); transition: border-color 0.1s linear, box-shadow 0.1s linear; } .yeniProjeInput[type="number"], .yeniProjeInput[data-sayi-alani] { text-align: right; font-variant-numeric: tabular-nums; } .yeniProjeInput:focus { border-color: var(--renk-ana); box-shadow: inset 0 0 0 1px var(--renk-ana); } .yeniProjeMesaj { padding: 7px 9px; border: 1px solid var(--renk-tehlike-kenar); border-radius: var(--radius-kucuk); background: var(--renk-tehlike-acik); color: var(--renk-tehlike-hover); font-size: var(--yazi-kucuk); } .yeniProjeMesaj[hidden] { display: none; } .yeniProjeButonAlani { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 12px; border-top: 1px solid var(--renk-kenarlik-acik); } .yeniProjeBirincilBtn, .yeniProjeIkincilBtn { min-width: 84px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: var(--radius-kucuk); font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; transition: background 0.1s linear, border-color 0.1s linear; } .yeniProjeBirincilBtn { border: 1px solid var(--renk-ana-hover); background: linear-gradient( 180deg, #2e74e0, var(--renk-ana) ); color: #ffffff; } .yeniProjeBirincilBtn:hover { background: linear-gradient( 180deg, var(--renk-ana), var(--renk-ana-hover) ); } .yeniProjeIkincilBtn { border: 1px solid var(--renk-kenarlik); background: var(--buton-yuzey); color: var(--renk-yazi); } .yeniProjeIkincilBtn:hover { border-color: var(--renk-kenarlik-koyu); background: var(--buton-yuzey-hover); } /* ------------------------------------------------- KART GÖRSELİ ------------------------------------------------- Proje kaydedilirken alınan 3B görüntü. On proje yan yana dururken adından hangisi olduğunu çıkarmak zor; resmi görünce bir bakışta anlaşılıyor. Sabit oran: resimler farklı boylarda geliyor ve kartlar birbirinden farklı yükseklikte olursa ızgara bozuluyor. */ .girisKartGorseli { order: -1; aspect-ratio: 16 / 10; margin: -14px -14px 0; border-radius: var(--radius-buyuk) var(--radius-buyuk) 0 0; background: var(--renk-alan-vurgu); overflow: hidden; } .girisKartGorseli img { display: block; width: 100%; height: 100%; /* Dolap kesilmesin diye contain: kart oranı ile sahne oranı tutmuyor ve cover kullanınca dolabın üstü kırpılıyordu. */ object-fit: contain; } /* ------------------------------------------------- YEDEK HATIRLATMASI (D175) ------------------------------------------------- Bütün iş tarayıcının deposunda duruyor ve tek yedek yolu kullanıcının hatırlayıp dosya indirmesi. Yedek bayatlayınca giriş ekranında görünür bir şerit çıkıyor. Yedek günceldeyse şerit hiç çizilmiyor: her açılışta görünen uyarı okunmaz olur. */ .girisYedekHatirlatmasi { flex-shrink: 0; margin: 12px 14px 0; padding: 10px 14px; border: 1px solid var(--renk-uyari); border-radius: var(--kose-kucuk); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-kucuk); } /* ------------------------------------------------- KARTTA 3B GÖRÜNÜM + YEDEK ŞERİDİ KAPATMA (10.09) ------------------------------------------------- */ .girisKartGorseli { position: relative; cursor: pointer; } .girisKart3bRozeti { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(27, 32, 39, 0.72); color: #fff; font-size: 11px; letter-spacing: 0.02em; pointer-events: none; } .girisKartGorseli--3b { cursor: grab; } .girisKartGorseli--3b .girisKart3bRozeti { display: none; } .girisYedekHatirlatmasi { display: flex; align-items: center; gap: 12px; } .girisYedekHatirlatmasi > span { flex: 1 1 auto; } .girisYedekHatirlatmasiKapat { flex: none; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; opacity: 0.75; } .girisYedekHatirlatmasiKapat:hover { opacity: 1; } /* ===== css/bolumler/10-nesting.css ===== */ /* ================================================= 25. NESTING (LEVHA YERLEŞİMİ) PENCERESİ Diğer pencerelerden geniş: içinde levha çizimleri var ve bunlar okunabilir büyüklükte olmalı. ================================================= */ .nestingKatmani { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(27, 35, 48, 0.4); animation: katmanGiris 0.12s linear; } .nestingPenceresi { width: min(100%, 1100px); height: min(100%, 760px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); animation: pencereGiris 0.12s linear; } /* ------------------------------------------------- BAŞLIK ------------------------------------------------- */ .nestingBaslikAlani { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .nestingBaslik { margin: 0; color: var(--renk-yazi); font-size: 13px; font-weight: 600; } .nestingDurum { margin: 3px 0 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); font-variant-numeric: tabular-nums; } .nestingKapatBtn { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-ikincil); font-size: 17px; line-height: 1; cursor: pointer; } .nestingKapatBtn:hover { background: var(--renk-tehlike); color: #ffffff; } .nestingHata { padding: 24px; color: var(--renk-tehlike); font-size: var(--yazi-kucuk); text-align: center; } /* ------------------------------------------------- GÖRÜNÜM SEKMELERİ Yerleşim sonuçları ile ayarlar arası geçiş. ------------------------------------------------- */ .nestingGorunumSeridi { flex-shrink: 0; display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-bolum-baslik); } .nestingGorunumBtn { height: 27px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--renk-yazi-ikincil); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .nestingGorunumBtn:hover { color: var(--renk-yazi); } .nestingGorunumBtn.aktif { border-bottom-color: var(--renk-ana); color: var(--renk-ana-yazi); font-weight: 600; } .nestingGorunum { flex: 1; min-height: 0; display: flex; flex-direction: column; } .nestingGorunum[hidden] { display: none; } /* ------------------------------------------------- AYAR PANELİ ------------------------------------------------- */ .nestingAyarPaneli { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; } .nestingAyarIzgarasi { display: grid; grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); gap: 10px; align-items: start; } .nestingAyarKutusu { border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan); } .nestingAyarKutuBasligi { padding: 5px 9px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } .nestingAyarKutuIcerigi { padding: 8px 9px; } .nestingAyarSatiri { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-bottom: 5px; } .nestingAyarEtiketi { color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .nestingAyarGirisSarmali { display: flex; align-items: center; gap: 4px; } .nestingAyarGirisi { width: 108px; height: var(--alan-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); } .nestingAyarGirisi:focus { border-color: var(--renk-ana); outline: none; } .nestingAyarBirimi { min-width: 22px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .nestingAyarIsareti { width: 14px; height: 14px; margin: 0; cursor: pointer; } .nestingAyarAciklamasi { display: block; margin: -2px 0 7px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.4; } /* Sınır mesafeleri şeması: dört kutu bir levhanın çevresinde. */ .nestingSinirSemasi { display: grid; grid-template-columns: 56px 1fr 56px; grid-template-rows: auto auto auto; gap: 4px; align-items: center; justify-items: center; margin-top: 4px; } .nestingSinirGirisi { width: 54px; height: 22px; padding: 0 4px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-mini); text-align: center; } .nestingSinirGirisi.ust { grid-column: 2; grid-row: 1; } .nestingSinirGirisi.sol { grid-column: 1; grid-row: 2; } .nestingSinirGirisi.sag { grid-column: 3; grid-row: 2; } .nestingSinirGirisi.alt { grid-column: 2; grid-row: 3; } .nestingSinirLevha { grid-column: 2; grid-row: 2; width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid #8a6f45; border-radius: var(--radius-kucuk); background: #e8d7b8; color: #6b5326; font-size: var(--yazi-mini); } /* Başlangıç köşesi: dört kutucuk, seçili olanın köşesinde işaret. */ .nestingKoseIzgarasi { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 4px; } .nestingKoseBtn { position: relative; height: 42px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: #f7f4ee; cursor: pointer; } .nestingKoseBtn:hover { border-color: var(--renk-ana-kenar); } .nestingKoseBtn.aktif { border-color: var(--renk-ana); background: var(--renk-ana-acik); } .nestingKoseIsareti { position: absolute; width: 14px; height: 14px; border-radius: 2px; background: #d6b27c; } .nestingKoseBtn.aktif .nestingKoseIsareti { background: var(--renk-ana); } .nestingKoseBtn.solAlt .nestingKoseIsareti { left: 5px; bottom: 5px; } .nestingKoseBtn.sagAlt .nestingKoseIsareti { right: 5px; bottom: 5px; } .nestingKoseBtn.solUst .nestingKoseIsareti { left: 5px; top: 5px; } .nestingKoseBtn.sagUst .nestingKoseIsareti { right: 5px; top: 5px; } .nestingAyarDugmeleri { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; } .nestingBaslangicBilgisi { padding: 40px 20px; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); line-height: 1.6; text-align: center; } .nestingAyarSifirlaBtn, .nestingAyarIptalBtn, .nestingAyarUygulaBtn { height: var(--buton-yukseklik); padding: 0 14px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .nestingAyarSifirlaBtn { margin-right: auto; color: var(--renk-yazi-ikincil); } .nestingAyarIptalBtn { color: var(--renk-yazi-ikincil); } .nestingAyarIptalBtn:hover { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } .nestingAyarUygulaBtn { border-color: var(--renk-ana-kenar); background: var(--renk-ana); color: #ffffff; font-weight: 600; } .nestingAyarUygulaBtn:hover { background: var(--renk-ana-hover); } .nestingAyarBilgisi { margin-top: 10px; padding: 6px 9px; border: 1px solid var(--renk-basarili-kenar); border-radius: var(--radius-kucuk); background: var(--renk-basarili-acik); color: var(--renk-basarili); font-size: var(--yazi-kucuk); } .nestingAyarBilgisi[data-tur="hata"] { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } /* Kullanılabilir alan sınırı: levhanın kırpılmış kenarını gösteren ince çerçeve. */ .nestingKullanilabilirAlan { position: absolute; border: 1px dashed #b9a988; pointer-events: none; } /* ------------------------------------------------- KAPSAM ŞERİDİ Odadaki tüm dolaplar mı, sadece seçili dolap mı yerleştirilecek. ------------------------------------------------- */ .nestingKapsamSeridi { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); } .nestingKapsamEtiketi { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .nestingKapsamBtn { height: 22px; padding: 0 10px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-family: inherit; font-size: var(--yazi-mini); cursor: pointer; } .nestingKapsamBtn:hover { border-color: var(--renk-ana-kenar); } .nestingKapsamBtn.aktif { border-color: var(--renk-ana-kenar); background: var(--renk-ana); color: #ffffff; font-weight: 600; } /* ------------------------------------------------- SONUÇ SEKMELERİ Her sekme bir yerleşim seçeneği. Üstte levha sayısı, altta artık büyüklüğü. ------------------------------------------------- */ .nestingSekmeSeridi { flex-shrink: 0; display: flex; gap: 3px; padding: 5px 8px 0; overflow-x: auto; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-bolum-baslik); } .nestingSekme { min-width: 86px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 10px; border: 1px solid var(--renk-kenarlik); border-bottom: 0; border-radius: var(--radius-kucuk) var(--radius-kucuk) 0 0; background: var(--renk-alan-pasif); color: var(--renk-yazi-ikincil); font-family: inherit; cursor: pointer; } .nestingSekme > strong { font-size: var(--yazi-kucuk); font-variant-numeric: tabular-nums; } .nestingSekme > small { font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } .nestingSekme:hover { background: var(--renk-alan-vurgu); } .nestingSekme.aktif { border-color: var(--renk-ana-kenar); background: var(--renk-alan); color: var(--renk-ana-yazi); } /* ------------------------------------------------- İÇERİK ------------------------------------------------- */ .nestingIcerik { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; } .nestingUyarilar { margin-bottom: 10px; padding: 7px 9px; border: 1px solid var(--renk-uyari-kenar); border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-kucuk); line-height: 1.5; } /* ------------------------------------------------- ÖZET ------------------------------------------------- */ .nestingOzetYontem { margin-bottom: 7px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .nestingOzetKutulari { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } /* Özetin altındaki açıklama satırı (D209). "Fire %85.4" ile "Gerçek kayıp %0.6" yan yana durunca ikisi de "boşa giden" gibi okunuyordu; farkı anlatan cümle yalnız `title` içindeydi. */ .nestingOzetAciklamasi { margin: 8px 0 0; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); line-height: 1.5; } /* İpucu taşıyan kutuda küçük bir işaret: fareyi nereye götüreceğini bilmeyen kullanıcı ipucunun varlığını göremiyordu (D209/2). */ .nestingOzetKutusu[data-ipucu-var="1"] { position: relative; cursor: help; } .nestingOzetKutusu[data-ipucu-var="1"]::after { content: "\24D8"; position: absolute; top: 4px; right: 6px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); opacity: 0.7; } .nestingOzetKutusu { min-width: 110px; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan); } .nestingOzetKutusu.vurgulu { border-color: var(--renk-ana-kenar); background: var(--renk-ana-acik); } .nestingOzetKutusu > strong { color: var(--renk-yazi); font-size: 15px; font-variant-numeric: tabular-nums; } .nestingOzetKutusu > small { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } /* ------------------------------------------------- MALZEME GRUBU ------------------------------------------------- */ .nestingGrup { margin-bottom: 16px; } .nestingGrupBasligi { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; padding-bottom: 3px; border-bottom: 1px solid var(--renk-kenarlik-acik); } .nestingGrupBasligi > span { color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; } .nestingGrupBasligi > small { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } .nestingSigmayanUyarisi { margin-bottom: 7px; padding: 5px 8px; border: 1px solid var(--renk-tehlike-kenar); border-radius: var(--radius-kucuk); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); font-size: var(--yazi-mini); line-height: 1.5; } /* ------------------------------------------------- LEVHA ÇİZİMİ ------------------------------------------------- */ /* auto-fit, auto-fill değil (14.09 gezintisi) auto-fill boş sütunları da yer ayırıyordu: tek levhalık işte 1100 px'lik pencerede levha 258 px çiziliyordu; sıra numarası parça adının, bant rozeti ölçünün üstüne biniyor, hangi parçanın hangisi olduğu okunmuyordu. auto-fit boş sütunu kapatıyor; dört ve üstü levhada çizim aynı kalıyor, az levhada büyüyor. Çok da büyümesin diye levha 560 px'de duruyor. */ .nestingPlakalar { display: grid; grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) ); gap: 12px; } .nestingPlaka { display: flex; flex-direction: column; gap: 4px; max-width: 560px; } .nestingPlakaBasligi { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } .nestingPlakaBasligi > span { color: var(--renk-yazi); font-size: var(--yazi-mini); font-weight: 600; } .nestingPlakaBasligi > small { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } /* Levhanın kendisi. Oranı JS'ten aspect-ratio ile geliyor. */ .nestingPlakaAlani { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-kucuk); background: #f7f4ee; } /* Ad ve ölçü sol üst köşede (14.09 gezintisi). Ortadayken sıra numarası çoğu parçada tam üstüne oturuyordu (etiket yeri de parçanın ortası çıkıyor); "Sa⑨an 58⑨70" okunuyordu. Bant rozeti sağ üstte, numara ortada; üçü artık ayrı yerde. */ .nestingParca { position: absolute; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; padding: 3px 4px; overflow: hidden; border: 1px solid #8a6f45; background: #d6b27c; color: #3b2c15; line-height: 1.1; text-align: left; } /* Kolona ya da kirişe giren parça dikdörtgen değil; kutunun köşesi clip-path ile kesiliyor. Kenarlık clip-path'ten sonra kırpıldığı için kertme kenarında çizgi kalmıyor; kesilen köşeyi kenarlık yerine daha koyu bir zeminle belli ediyoruz. */ .nestingParca.kertmeli { border-color: #7a5a2e; background: #c9a367; } /* Kenara değmeyen kertme: parçanın ortasından çıkan kesim. Levha zemini gibi görünüyor ki orada malzeme olmadığı anlaşılsın. */ .nestingParcaDeligi { position: absolute; border: 1px dashed #7a5a2e; background: #f2ead8; pointer-events: none; } /* Çevrilmiş parçalar farklı renkte; damarlı levhada bu hiç görünmemeli, görünüyorsa damar işareti unutulmuş demektir. */ .nestingParca.cevrildi { border-color: #6f7f52; background: #bcc98f; } .nestingParcaEtiketi { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; font-size: 9px; } .nestingParcaOlcusu { font-size: 8px; font-variant-numeric: tabular-nums; opacity: 0.75; } /* Etiket numarası, etiketin yapışacağı yerde (K15a: elle etiketleme). Sayı okunur kalsın diye kutu ölçeğinden bağımsız sabit boy; konumlu olan merkezinden yerleşiyor, konumsuz köşede. */ .nestingEtiketYeri { position: absolute; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; border: 1px solid #1e293b; border-radius: 8px; background: #fff7d6; color: #1e293b; font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; pointer-events: auto; } .nestingEtiketYeriKonumlu { transform: translate(-50%, 50%); } .nestingEtiketYeriKose { left: 2px; bottom: 2px; } .nestingEtiketYeriCakisiyor { border-color: #b91c1c; background: #fee2e2; color: #b91c1c; } /* Delik ve frezeler parçanın üstüne çiziliyor. Parça kutusunun İÇİNE koyulsalardı kenara yakın olanlar overflow:hidden yüzünden kırpılırdı. */ .nestingDelik { position: absolute; min-width: 2px; min-height: 2px; border-radius: 50%; background: rgba(24, 32, 48, 0.72); pointer-events: none; } .nestingFreze { position: absolute; min-width: 1px; min-height: 1px; border-radius: 1px; background: rgba(180, 40, 40, 0.62); pointer-events: none; } .nestingArtik { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px dashed #c3bcae; background: repeating-linear-gradient( 45deg, transparent, transparent 4px, rgba(0, 0, 0, 0.035) 4px, rgba(0, 0, 0, 0.035) 8px ); pointer-events: none; } /* LEVHA KAGIDININ KENDI MUREKKEBI Levha zemini (--nestingPlakaAlani) her iki temada da ayni krem: teknik bir cizim kagidi, kabukla birlikte donmuyor. Buradaki yesil once kabugun --renk-basarili ailesinden geliyordu. Koyu temada o aile koyu zemine gore ayarli: en buyuk artigin zemini #14301f oluyor ve krem kagidin ustunde neredeyse siyah bir leke birakiyordu. Etiketi de #56d98a ile 1.64 kontrasta dusup okunmuyordu. Kagit sabitse murekkep de sabit olmali. */ .nestingArtik.enBuyuk { border-color: #2f7d4f; background: #dcefe0; } .nestingArtikEtiketi { color: #276a42; font-size: 8px; font-variant-numeric: tabular-nums; } /* Temiz artığı ayıran tek düz kesim. Operatör bu çizgiden keserse elinde stoğa konabilecek düzgün bir parça kalır. */ /* Kesim cizgisi de kagidin uzerinde: kabuk yesili yerine kagida gore koyu yesil. */ .nestingKesimCizgisi { position: absolute; background: #2f7d4f; pointer-events: none; } .nestingKesimCizgisi.yatay { height: 2px; } .nestingKesimCizgisi.dikey { width: 2px; } /* Stoktan gelen levha: tam levha değil, raftaki artık parça. Operatör karıştırmasın diye başlıkta rozet, çizimde farklı zemin. */ .nestingStokRozeti { margin-left: 5px; padding: 1px 4px; border-radius: var(--radius-kucuk); background: var(--renk-basarili); color: #ffffff; font-size: 8px; font-weight: 700; letter-spacing: 0.5px; vertical-align: middle; } .nestingPlakaAlani.stoktan { border-color: var(--renk-basarili); background: #f2f7f2; } /* ------------------------------------------------- ALT ÇUBUK ------------------------------------------------- */ .nestingAltCubuk { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } /* TEK AİLE (29.09) İnceleme: "Alt çubukta 11 düğme, üç ayrı görünüm: bazıları kalın siyah kenarlı, biri yeşil yazılı, öbürleri gri." Kalın siyah kenarlık: "G kod önizleme" ve "Tekrar kesim" sonradan eklendi ve bu listeye hiç girmedi -- tarayıcının çıplak düğmesi kalmıştı. İkisi de burada artık. Yeşil yazı: NC dosyaları "asıl çıktı" diye ayrılmıştı. Ama çubukta zaten bir ana düğme var (Bu yerleşimi kullan); ikinci bir vurgu rengi hangisinin ana iş olduğunu bulandırıyordu. NC artık öbür ikincil düğmelerle aynı. Hangi düğmenin ne zaman basılabildiği burada değil (nestingPenceresiOlustur.js); `:disabled` yalnız sönük görünüyor. */ .nestingDurdurBtn, .nestingListeBtn, .nestingCsvBtn, .nestingEtiketBtn, .nestingOnizlemeBtn, .nestingNcBtn, .nestingTekrarBtn, .nestingDosyaIndirBtn, .nestingDosyadanAcBtn, .nestingKullanBtn { white-space: nowrap; height: var(--buton-yukseklik); padding: 0 14px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .nestingDurdurBtn { margin-right: auto; } /* GİZLİ DÜĞME GİZLİ KALSIN (29.09) "Aramayı durdur" arama yokken `hidden`; düğme stili display verdiği için tarayıcının gizlemesi eziliyordu. Pasif görünüm ve satır kırmama yukarıda (tek yerde). */ .nestingAltCubuk button[hidden] { display: none; } .nestingDurdurBtn:hover:not(:disabled), .nestingListeBtn:hover:not(:disabled), .nestingCsvBtn:hover:not(:disabled), .nestingEtiketBtn:hover:not(:disabled), .nestingOnizlemeBtn:hover:not(:disabled), .nestingTekrarBtn:hover:not(:disabled), .nestingDosyaIndirBtn:hover:not(:disabled), .nestingDosyadanAcBtn:hover:not(:disabled), .nestingNcBtn:hover:not(:disabled) { border-color: var(--renk-ana-kenar); background: var(--renk-ana-acik); } .nestingAltCubuk button:disabled { cursor: not-allowed; opacity: 0.45; } .nestingAltCubuk button:focus-visible { outline: 2px solid var(--renk-ana); outline-offset: 1px; } .nestingKullanBtn { border-color: var(--renk-ana-kenar); background: var(--renk-ana); color: #ffffff; font-weight: 600; } .nestingKullanBtn:hover { background: var(--renk-ana-hover); } /* ============================================================ HANGİ LEVHA YATIRILACAK ============================================================ İşe giren her malzeme için ebat seçimi. Malzeme tipi dekoru söylüyor, bu şerit ebadı soruyor. */ .nestingLevhaSeridi { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan); } .nestingLevhaSeridi[hidden] { display: none; } .nestingLevhaSatiri { display: flex; align-items: center; gap: 6px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .nestingLevhaSecimi { height: var(--alan-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--kose-kucuk); background: var(--renk-panel); color: var(--renk-yazi); font-size: var(--yazi-kucuk); } /* ============================================================ KAYITLI YERLEŞİM ============================================================ Daha önce "kullan" denen yerleşim listenin başında duruyor ve ilk o seçili geliyor. Kullanıcı: "bir sıkıntı olduğunda tekrar müdahale edebileyim; hangi seçimi kullanacaksam onu daha sonra da açabilmem lazım." Motor aramaya devam ediyor; daha iyisini bulursa kullanıcı ona geçebilsin diye ötekiler de duruyor. Ayırt edilmesi gereken tek şey hangisinin kayıtlı olduğu. */ .nestingSekme.kayitli { border-color: var(--renk-ana); } /* Küçük bir işaret: yazıyla yer kaplamadan "bu seninki" demek. */ .nestingSekme.kayitli::before { content: "●"; position: absolute; top: 4px; right: 6px; color: var(--renk-ana-yazi); font-size: 9px; line-height: 1; } .nestingSekme { position: relative; } /* ============================================================ SONUC SAYFASI ============================================================ Arama surdukce sonuc birikiyordu ve serit yatayda uzayip gidiyordu; yirminci sonuca ulasmak icin kaydirmak gerekiyordu. Simdi onarli sayfalar var. Kumanda seridin sonunda, sekmelerden ince bir cizgiyle ayriliyor. */ .nestingSayfaKumandasi { flex-shrink: 0; display: flex; align-items: center; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--renk-kenarlik); } .nestingSayfaOku { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: 13px; line-height: 1; cursor: pointer; } .nestingSayfaOku:hover:not(:disabled) { border-color: var(--renk-kenarlik-koyu); background: var(--renk-alan-vurgu); } .nestingSayfaOku:disabled { opacity: 0.35; cursor: default; } .nestingSayfaSayaci { padding: 0 4px; color: var(--renk-yazi-soluk); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ------------------------------------------------- BANTLI KENARLAR ------------------------------------------------- Kullanıcı istedi: bantlı kenarlar kalın çizgiyle ve kalınlık metniyle görünsün — "kırmızı/siyah". SİYAH seçildi çünkü FREZE ZATEN KIRMIZI (.nestingFreze). İkisi de kırmızı olsaydı operatör linco frezesiyle bantlanacak kenarı karıştırırdı; ekranda gördüm. Siyah çizgi parçanın kendi kahverengi kenarlığından da kalın ve koyu: ayrılıyor. Çizgiler parçanın İÇİNE çiziliyor: dışına taşsalardı komşu parçanın üstüne biner ve hangi parçaya ait olduğu anlaşılmazdı. */ .nestingBant { position: absolute; background: #17181a; pointer-events: none; } .nestingBant-sol, .nestingBant-sag { top: 0; bottom: 0; width: 3px; } .nestingBant-sol { left: 0; } .nestingBant-sag { right: 0; } .nestingBant-alt, .nestingBant-ust { left: 0; right: 0; height: 3px; } .nestingBant-alt { bottom: 0; } .nestingBant-ust { top: 0; } /* 0.4 ile 2 mm bant aynı makinede aynı işi görmüyor; operatör hangisini takacağını bilmeli. KÖŞEDE duruyor, ortada değil: ortada parça adı ve ölçüsü var. Üç satır alt alta gelince küçük parçada hiçbiri okunmuyordu. */ .nestingBantOlcusu { position: absolute; top: 4px; right: 4px; padding: 0 2px; border-radius: 2px; background: rgba(23, 24, 26, 0.82); color: #f4f1ea; font-size: 8px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.5; pointer-events: none; } /* Sonuç listesinin sıralama ölçütü (D168). Kullanıcı "En iyi neden en iyi" diye soruyordu; kural artık listenin başında yazılı. */ .nestingSiralamaNotu { /* Kenar payı (29.09): not pencerenin sol kenarına yapışıktı (inceleme: "Sıra: en az levha → … pencere kenarına yapışık"). Kapsam şeridiyle aynı 12 px. */ flex-shrink: 0; margin: 0; padding: 6px 12px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.4; } /* ===== css/bolumler/11-etiket.css ===== */ /* ================================================= 29. ETİKET PENCERESİ Solda ayarlar, sağda birebir önizleme. Önizleme bir iframe: etiket sayfasının kendi stili var (mm ölçüler, sayfa boyutu), ana arayüzün stiliyle karışmamalı. ================================================= */ .etiketKatmani { position: fixed; inset: 0; z-index: 10700; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(27, 35, 48, 0.4); animation: katmanGiris 0.12s linear; } .etiketPenceresi { width: min(100%, 1000px); height: min(100%, 700px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); animation: pencereGiris 0.12s linear; } .etiketBaslikAlani { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .etiketBaslik { margin: 0; color: var(--renk-yazi); font-size: 13px; font-weight: 600; } .etiketOzeti { margin: 3px 0 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .etiketKapatBtn { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-ikincil); font-size: 17px; line-height: 1; cursor: pointer; } .etiketKapatBtn:hover { background: var(--renk-tehlike); color: #ffffff; } .etiketGovde { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px 1fr; } .etiketAyarSutunu { min-height: 0; overflow-y: auto; padding: 10px; border-right: 1px solid var(--renk-kenarlik); background: var(--renk-alan-vurgu); } .etiketOnizlemeSutunu { min-height: 0; display: flex; background: var(--renk-zemin); } /* Önizleme çerçevesi kendi stilini taşıyor; burada yalnız yer veriyoruz. */ .etiketOnizleme { flex: 1; width: 100%; height: 100%; border: 0; background: #ffffff; } .etiketAyarKutusu { margin-bottom: 9px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan); } .etiketAyarKutusu[hidden] { display: none; } .etiketAyarKutuBasligi { padding: 5px 9px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } .etiketAyarKutuAciklamasi { padding: 6px 9px 0; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.45; } .etiketAyarKutuIcerigi { padding: 8px 9px; } .etiketAyarSatiri { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-bottom: 5px; } .etiketAyarEtiketi { color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .etiketAyarGirisSarmali { display: flex; align-items: center; gap: 5px; } .etiketAyarGirisi { width: 88px; height: var(--alan-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); text-align: right; } select.etiketAyarGirisi { width: 130px; text-align: left; } .etiketAyarGirisi:focus { border-color: var(--renk-ana); outline: none; } .etiketAyarBirimi { min-width: 22px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .etiketAyarIsareti { width: 14px; height: 14px; margin: 0; cursor: pointer; } .etiketAyarAciklamasi { display: block; margin: -2px 0 7px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.4; } .etiketUyarisi { margin-top: 8px; padding: 6px 9px; border: 1px solid var(--renk-uyari-kenar); border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-mini); line-height: 1.5; } .etiketAltCubuk { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .etiketSifirlaBtn, .etiketYazdirBtn { height: var(--buton-yukseklik); padding: 0 14px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .etiketSifirlaBtn { margin-right: auto; color: var(--renk-yazi-ikincil); } .etiketYazdirBtn { border-color: var(--renk-ana-kenar); background: var(--renk-ana); color: #ffffff; font-weight: 600; } .etiketYazdirBtn:hover:not(:disabled) { background: var(--renk-ana-hover); } .etiketYazdirBtn:disabled { opacity: 0.5; cursor: default; } /* ===== css/bolumler/12-ipucu.css ===== */ /* ================================================= 30. İPUCU BALONU Ekranın altında birkaç saniye görünüp kaybolan kısa bilgi mesajı. Katman tıklamayı geçirir; kullanıcının altındaki çizim alanına erişimi kapanmaz. ================================================= */ .ipucuBalonKatmani { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 11000; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; } .ipucuBalonu { max-width: min(100%, 460px); display: flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--renk-kenarlik-koyu); border-radius: 999px; background: var(--renk-panel); color: var(--renk-yazi); font-size: var(--yazi-kucuk); line-height: 1.45; text-align: center; box-shadow: var(--golge-pencere); /* Başlangıç durumu: görünmez ve biraz aşağıda. "gorunur" sınıfı eklenince yukarı kayarak beliriyor. */ opacity: 0; transform: translateY(10px); transition: opacity 0.2s linear, transform 0.2s linear; } .ipucuBalonu.gorunur { opacity: 1; transform: translateY(0); } /* Sistem "hareketi azalt" diyorsa kaydırma animasyonunu kapatıyoruz; balon yalnız beliriyor. */ @media (prefers-reduced-motion: reduce) { .ipucuBalonu { transform: none; transition: opacity 0.2s linear; } .ipucuBalonu.gorunur { transform: none; } } /* ===== css/bolumler/13-panelCizim.css ===== */ /* ================================================= 31. PANEL ÇİZİM PENCERESİ Solda panel seçimi ve ölçü formu, sağda panelin 2B görüntüsü. Çizim SVG; ölçekleme kayıpsız olsun diye. ================================================= */ .panelCizimKatmani { position: fixed; inset: 0; z-index: 10800; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(27, 35, 48, 0.4); animation: katmanGiris 0.12s linear; } .panelCizimPenceresi { width: min(100%, 1180px); height: min(100%, 760px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); animation: pencereGiris 0.12s linear; } .panelCizimBaslikAlani { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .panelCizimBaslik { margin: 0; color: var(--renk-yazi); font-size: 13px; font-weight: 600; } .panelCizimOzeti { margin: 3px 0 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .panelCizimKapatBtn { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-ikincil); font-size: 17px; line-height: 1; cursor: pointer; } .panelCizimKapatBtn:hover { background: var(--renk-tehlike); color: #ffffff; } .panelCizimGovde { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr; } .panelCizimAyarSutunu { min-height: 0; overflow-y: auto; padding: 10px; border-right: 1px solid var(--renk-kenarlik); background: var(--renk-alan-vurgu); } .panelCizimGorselSutunu { min-height: 0; display: flex; padding: 14px; background: var(--renk-zemin); } .panelCizimGorseli { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; } /* SVG kendi en-boy oranını koruyor; kapsayıcı ne kadar yer verirse o kadar büyüyor. */ .panelCizimGorseli .panelCizimi { max-width: 100%; max-height: 100%; } /* ------------------------------------------------- ÇİZİM ÖĞELERİ ------------------------------------------------- */ .panelCizimi .cizimPanel { fill: var(--renk-alan); stroke: var(--renk-kenarlik-koyu); stroke-width: 2; } .panelCizimi .cizimBosluk { fill: rgba(96, 165, 250, 0.22); stroke: var(--renk-ana); stroke-width: 2; } .panelCizimi .cizimBosluk.secili { fill: rgba(96, 165, 250, 0.38); stroke-width: 3; } .panelCizimi .cizimBosluk.hatali { fill: rgba(239, 68, 68, 0.22); stroke: var(--renk-tehlike); } /* Takım merkezinin yolu. Kesikli çizgi: kesilen kenar değil, takımın gezdiği yer. */ .panelCizimi .cizimTakimYolu { fill: none; stroke: var(--renk-uyari); stroke-width: 1.5; stroke-dasharray: 10 7; } .panelCizimi .cizimDalis { fill: var(--renk-uyari); opacity: 0.75; } .panelCizimi .cizimKenarYazisi { fill: var(--renk-yazi-ikincil); font-family: Arial, Helvetica, sans-serif; } /* D18: kenarın adı ile ölçüsü ayrı yazılar. Ad daha koyu ve kalın -- okuyan kişi önce "hangi kenar" sorusunu cevaplıyor, sonra sayıya bakıyor. */ .panelCizimi .cizimKenarAdi { fill: var(--renk-yazi); font-family: Arial, Helvetica, sans-serif; font-weight: 600; } .panelCizimi .cizimKenarOlcusu { fill: var(--renk-yazi-ikincil); font-family: Arial, Helvetica, sans-serif; } .panelCizimi .cizimOlcuCizgisi { fill: none; stroke: var(--renk-yazi-ikincil); stroke-width: 1; vector-effect: non-scaling-stroke; } .panelCizimi .cizimBoslukAdi { fill: var(--renk-yazi); font-family: Arial, Helvetica, sans-serif; font-weight: 600; } .panelCizimi .cizimUyari { fill: var(--renk-yazi-soluk); font-family: Arial, Helvetica, sans-serif; } /* ------------------------------------------------- ARKALIK KANALI (Ö5) ------------------------------------------------- Kanal panelin öbür yüzünden çıkmıyor: kör bir yiv. Dolgu açık, kenarı çizgili -- kesilen kenarla karışmasın. */ .panelCizimi .cizimArkalikKanali { fill: rgba(16, 185, 129, 0.18); stroke: rgba(16, 185, 129, 0.85); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .panelCizimi .cizimArkalikKanaliYazisi { fill: var(--renk-yazi-ikincil); font-family: Arial, Helvetica, sans-serif; } /* ------------------------------------------------- RAF PİMİ DELİKLERİ (Ö4/2) ------------------------------------------------- Boş delik içi boş, raf oturan delik dolu. Hat bütün delindiği için kullanıcı ancak böyle "rafım şu an nerede" sorusunu cevaplayabiliyor. */ .panelCizimi .cizimRafPimi { fill: var(--renk-yuzey); stroke: var(--renk-kenarlik-koyu); stroke-width: 1; vector-effect: non-scaling-stroke; } /* Rafın kendi pim yuvası ALT yüzde: parça ikinci bağlamada ters çevrilecek, çizimde de ayrı görünsün. */ .panelCizimi .cizimRafPimi.altYuz { stroke-dasharray: 3 3; } .panelCizimi .cizimRafPimi.kullaniliyor { fill: var(--renk-ana); stroke: var(--renk-ana); } /* Hattın kendisi: delik değil, delikleri birleştiren yardımcı çizgi. Kesikli ki kesilecek bir şeyle karışmasın. */ .panelCizimi .cizimRafPimiHatti { stroke: var(--renk-kenarlik); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; } .panelCizimi .cizimRafPimiYazisi { fill: var(--renk-yazi-ikincil); font-family: Arial, Helvetica, sans-serif; } /* ------------------------------------------------- KULLANICININ KENDİ OPERASYONLARI (Ö3) ------------------------------------------------- Alt yüzdeki iş kesikli: parça ikinci bağlamada ters çevrilecek, çizimde de ayrı görünsün. */ .panelCizimi .cizimOperasyon { fill: rgba(245, 158, 11, 0.22); stroke: var(--renk-uyari); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .panelCizimi .cizimOperasyon.altYuz { fill: rgba(245, 158, 11, 0.10); stroke-dasharray: 7 5; } .panelCizimi .cizimOperasyonYazisi { fill: var(--renk-yazi); font-family: Arial, Helvetica, sans-serif; } /* ------------------------------------------------- FORM ------------------------------------------------- */ .panelCizimKutusu { margin-bottom: 9px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan); } .panelCizimKutuBasligi { padding: 5px 9px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } .panelCizimKutuAciklamasi { padding: 6px 9px 0; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.45; } .panelCizimKutuIcerigi { padding: 8px 9px; } .panelCizimSatiri { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-bottom: 5px; } .panelCizimSatiri[hidden] { display: none; } .panelCizimEtiketi { color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .panelCizimGirisSarmali { display: flex; align-items: center; gap: 5px; } .panelCizimGirisi { width: 96px; height: var(--alan-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); text-align: right; } select.panelCizimGirisi, .panelCizimMetin { width: 150px; text-align: left; } .panelCizimPanelSecimi { width: 100%; } .panelCizimGirisi:focus { border-color: var(--renk-ana); outline: none; } .panelCizimGirisi:disabled { opacity: 0.5; } .panelCizimBirimi { min-width: 22px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .panelCizimAciklamasi { display: block; margin: -2px 0 7px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.4; } /* ------------------------------------------------- BOŞLUK LİSTESİ ------------------------------------------------- */ .panelCizimListesi { display: flex; flex-direction: column; gap: 3px; margin-bottom: 7px; } .panelCizimBosMetin { padding: 6px 2px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .panelCizimListeSatiri { display: block; width: 100%; padding: 6px 8px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); text-align: left; cursor: pointer; } .panelCizimListeSatiri:hover { border-color: var(--renk-ana-kenar); } .panelCizimListeSatiri.secili { border-color: var(--renk-ana-kenar); background: var(--renk-ana); color: #ffffff; } .panelCizimListeSatiri.hatali { border-color: var(--renk-tehlike); color: var(--renk-tehlike); } .panelCizimListeSatiri.secili.hatali { background: var(--renk-tehlike); color: #ffffff; } .panelCizimEkleBtn { width: 100%; height: var(--buton-yukseklik); border: 1px dashed var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-ikincil); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .panelCizimEkleBtn:hover { border-color: var(--renk-ana-kenar); color: var(--renk-ana-yazi); } .panelCizimUyarisi { margin-top: 8px; padding: 6px 9px; border: 1px solid var(--renk-uyari-kenar); border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-mini); line-height: 1.5; } /* ------------------------------------------------- ALT ÇUBUK ------------------------------------------------- */ .panelCizimAltCubuk { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .panelCizimSilBtn, .panelCizimBitirBtn { height: var(--buton-yukseklik); padding: 0 14px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .panelCizimSilBtn { margin-right: auto; color: var(--renk-tehlike); } .panelCizimSilBtn:disabled { opacity: 0.45; cursor: default; } .panelCizimBitirBtn { border-color: var(--renk-ana-kenar); background: var(--renk-ana); color: #ffffff; font-weight: 600; } .panelCizimBitirBtn:hover { background: var(--renk-ana-hover); } /* ================================================= ÇİZİLEMEYEN PARÇANIN SEBEBİ (D228) ================================================= Panel listeden sessizce düşüyordu; kullanıcı aracın bozuk olduğunu sanıyordu. Sebep artık listenin altında. Çizilemeyen parça yoksa satır hiç açılmıyor. */ .panelCizimAcilamayanNotu { margin-top: 5px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); line-height: 1.45; } /* İnce ve dar parçada boşluk uyarısı: yasak değil, bilgi. */ .panelCizimParcaUyarisi:empty { display: none; } .panelCizimParcaUyarisi { margin-top: 5px; color: var(--renk-uyari); font-size: var(--yazi-mini); line-height: 1.45; } /* ===== css/bolumler/14-yonetici.css ===== */ /* ================================================= 32. YÖNETİCİ PANELİ Menü ve model silme. Hiçbir menüde görünmüyor; Ctrl + Shift + Y ile açılıyor. Silme düğmeleri bilerek tehlike renginde ve "×" değil "Sil" yazıyor: yanlışlıkla basılan bir simge yüzünden model kaybetmeyelim. ================================================= */ .yoneticiKatmani { position: fixed; inset: 0; z-index: 11200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(27, 35, 48, 0.5); animation: katmanGiris 0.12s linear; } .yoneticiPenceresi { width: min(100%, 640px); height: min(100%, 620px); /* ------------------------------------------------ MONTAJ SIRASINDA PENCERE GENİŞLİYOR (21.09) ------------------------------------------------ Gerçek ekranda denedim: üç sütun 640 px'e sıkışınca simülasyon 180 px kalıyor ve izleyici o darlıkta 3B sahneyi hiç çizmiyor, yazı listesine düşüyor. Kullanıcının istediği tam tersi: > "bir tarafta ben seçerken neyin nereye olacağını > görmeliyim" Menü/model/yedek sekmeleri dar pencerede rahat; yalnız sıra sekmesi geniş açılıyor. */ transition: width 0.15s ease; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); animation: pencereGiris 0.12s linear; } .yoneticiBaslikAlani { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .yoneticiBaslik { margin: 0; color: var(--renk-yazi); font-size: 13px; font-weight: 600; } .yoneticiOzeti { margin: 3px 0 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .yoneticiKapatBtn { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-ikincil); font-size: 17px; line-height: 1; cursor: pointer; } .yoneticiKapatBtn:hover { background: var(--renk-tehlike); color: #ffffff; } /* ------------------------------------------------ MONTAJ SIRASI SEKMESİ ------------------------------------------------ Solda modeller, sağda sıra kurma alanı. */ .montajSirasiDuzeni { display: flex; gap: 20px; align-items: flex-start; } .montajSirasiModeller { flex: 0 0 220px; display: flex; flex-direction: column; gap: 4px; } .montajSirasiCalisma { flex: 1; min-width: 0; } /* ============================================================ YANDA CANLI SİMÜLASYON (21.09) ============================================================ Kullanıcı: "iki ekran olmalı ki bir tarafta ben seçerken neyin nereye olacağını görmeliyim". Sıra sütunu kadar yer veriyoruz: küçük bir kutuda dolap seçilemez, parçanın nereye oturduğu görülmez. */ .montajSirasiOnizleme { /* İzleyici bu genişliğin altında 3B sahneyi bırakıp yazı listesine düşüyor; ölçtüm. */ flex: 0 0 460px; min-width: 380px; display: flex; flex-direction: column; gap: 6px; } /* Sıra sekmesi açıkken pencere geniş. */ .yoneticiPenceresi.genisPencere { width: min(100%, 1180px); height: min(100%, 760px); } .montajSirasiCerceve { width: 100%; /* Ekranın yarısı: dolap boyuna sığsın. */ height: min(58vh, 620px); min-height: 320px; border: 1px solid var(--kenar, #e2e8f0); border-radius: 10px; background: var(--kutu, #fff); } /* Kaynağı yokken boş çerçeve çizgi gibi durmasın. */ .montajSirasiCerceve:not([src]) { background: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(148, 163, 184, 0.12) 10px, rgba(148, 163, 184, 0.12) 20px ); } .montajSirasiBolumBasligi { margin: 14px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ikincilMetin, #64748b); } .montajSirasiModeller .montajSirasiBolumBasligi { margin-top: 0; } .montajSirasiModel { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 12px; text-align: left; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 8px; } .montajSirasiModel:hover { background: var(--yuzeyIkincil, #f1f5f9); } .montajSirasiModel.secili { font-weight: 600; background: var(--yuzeyIkincil, #f1f5f9); border-color: var(--kenar, #cbd5f5); } .montajSirasiRozet { flex: none; padding: 2px 6px; font-size: 10px; font-weight: 600; color: #1d4ed8; background: #dbeafe; border-radius: 999px; } .montajSirasiListe { margin: 0; padding-left: 22px; font-size: 13px; } .montajSirasiMadde { display: flex; align-items: center; gap: 6px; padding: 4px 0; } .montajSirasiMadde span { flex: 1; } .montajSirasiKucukDugme { flex: none; width: 26px; height: 26px; font-size: 13px; line-height: 1; cursor: pointer; background: var(--yuzeyIkincil, #f1f5f9); border: 1px solid var(--kenar, #e2e8f0); border-radius: 6px; } .montajSirasiKucukDugme:disabled { opacity: 0.3; cursor: default; } .montajSirasiKalanlar { display: flex; flex-wrap: wrap; gap: 6px; } .montajSirasiKalan { padding: 6px 10px; font-size: 12px; cursor: pointer; background: var(--yuzey, #ffffff); border: 1px dashed var(--kenar, #cbd5f5); border-radius: 8px; } .montajSirasiKalan:hover { border-style: solid; background: var(--yuzeyIkincil, #f1f5f9); } .montajSirasiDugmeler { display: flex; gap: 8px; margin-top: 18px; } .montajSirasiDugme { padding: 9px 14px; font-size: 13px; cursor: pointer; background: var(--yuzeyIkincil, #f1f5f9); border: 1px solid var(--kenar, #e2e8f0); border-radius: 8px; } .montajSirasiDugme.birincil { font-weight: 600; color: #ffffff; background: var(--vurgu, #2563eb); border-color: var(--vurgu, #2563eb); } .montajSirasiDugme:disabled { opacity: 0.45; cursor: default; } .montajSirasiBilgi { margin: 10px 0 0; font-size: 12px; color: var(--ikincilMetin, #64748b); } .yoneticiSekmeCubugu { flex-shrink: 0; display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .yoneticiSekme { padding: 6px 12px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-kucuk) var(--radius-kucuk) 0 0; background: transparent; color: var(--renk-yazi-ikincil); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .yoneticiSekme:hover { color: var(--renk-yazi); } .yoneticiSekme.aktif { border-color: var(--renk-kenarlik); background: var(--renk-panel); color: var(--renk-yazi); font-weight: 600; } .yoneticiGovde { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; background: var(--renk-alan-vurgu); } /* Benzer adlı menü uyarısı (29.09): listenin üstünde, silme/birleştirme kararı kullanıcıda. */ .yoneticiUyarisi { margin-bottom: 8px; padding: 7px 9px; border: 1px solid var(--renk-uyari-kenar); border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik); color: var(--renk-yazi); font-size: var(--yazi-mini); line-height: 1.4; } .yoneticiListesi { display: flex; flex-direction: column; gap: 4px; } .yoneticiSatiri { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan); } .yoneticiSatirMetni { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .yoneticiSatirAdi { color: var(--renk-yazi); font-size: var(--yazi-kucuk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yoneticiSatirAciklamasi { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } /* "Sil" yazısı bilerek açık; simge yerine kelime kullanmak yanlış tıklamayı azaltıyor. */ .yoneticiSilBtn { flex-shrink: 0; height: var(--buton-yukseklik); padding: 0 12px; border: 1px solid var(--renk-tehlike); border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-tehlike); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .yoneticiSilBtn:hover { background: var(--renk-tehlike); color: #ffffff; } /* ------------------------------------------------- YEDEK SEKMESİ ------------------------------------------------- */ .yoneticiAciklama { margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--renk-uyari-kenar); border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-mini); line-height: 1.55; } .yoneticiYedekDurumu { margin-bottom: 10px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } /* Yedek bayatladiysa ya da hic alinmadiysa gorunur olsun (D175): kullanici buraya bakip "yedegim var" diye dusunmesin. */ .yoneticiYedekDurumu.yoneticiYedekUyari { padding: 8px 10px; border: 1px solid var(--renk-uyari); border-radius: var(--kose-kucuk); background: var(--renk-uyari-acik); color: var(--renk-uyari); } .yoneticiYedekBtn { width: 100%; height: var(--buton-yukseklik); margin-bottom: 14px; border: 1px solid var(--renk-ana-kenar); border-radius: var(--radius-kucuk); background: var(--renk-ana); color: #ffffff; font-family: inherit; font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; } .yoneticiYedekBtn:hover { background: var(--renk-ana-hover); } .yoneticiYedekYukle { padding: 9px; border: 1px dashed var(--renk-kenarlik); border-radius: var(--radius-kucuk); } .yoneticiYedekBasligi { margin-bottom: 6px; color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; } .yoneticiDosyaGirisi { width: 100%; color: var(--renk-yazi-ikincil); font-family: inherit; font-size: var(--yazi-mini); } .yoneticiBosMetin { padding: 14px 4px; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); text-align: center; } .yoneticiAltCubuk { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .yoneticiDurumu { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .yoneticiBitirBtn { height: var(--buton-yukseklik); padding: 0 14px; border: 1px solid var(--renk-ana-kenar); border-radius: var(--radius-kucuk); background: var(--renk-ana); color: #ffffff; font-family: inherit; font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; } .yoneticiBitirBtn:hover { background: var(--renk-ana-hover); } /* ===== css/bolumler/15-ustMenu.css ===== */ /* ================================================= 33. ÜST MENÜ İki kat: üst gruplar (Proje, Tasarım, Malzeme, Üretim) alt açılan grubun komutları + açıklama şeridi Alt kat üst şeridin ALTINA taşıyor; header'ın kendi yüksekliği değişmiyor, düğmeler yerinde kalıyor. ================================================= */ .ustMenu { position: relative; display: flex; align-items: center; } .ustMenuGruplari { display: flex; align-items: center; gap: 3px; } .ustMenuGrupBtn, .ustMenuOgeBtn { display: inline-flex; align-items: center; gap: 7px; height: var(--buton-yukseklik); padding: 0 11px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--buton-yuzey); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-kucuk); white-space: nowrap; cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear, color 0.1s linear; } .ustMenuGrupBtn:hover, .ustMenuOgeBtn:hover { border-color: var(--renk-kenarlik-koyu); background: var(--buton-yuzey-hover); } /* Açık grup: alt katla görsel olarak birleşiyor. */ .ustMenuGrupBtn.acik { border-color: var(--renk-ana-kenar); background: var(--renk-ana); color: #ffffff; } /* Basılı kalan bölüm düğmeleri (Oda, Kasa, Dolap Ekle). Sol panelde o bölüm açık demek. */ .ustMenuOgeBtn.aktif { border-color: var(--renk-ana-kenar); background: var(--renk-ana); color: #ffffff; } .ustMenuIkonKutusu { display: inline-flex; align-items: center; flex-shrink: 0; } .ustMenuIkon { width: 17px; height: 17px; flex-shrink: 0; } .ustMenuGrupAdi, .ustMenuOgeAdi { line-height: 1; } /* ------------------------------------------------- AÇILAN KAT ------------------------------------------------- Header'ın İKİNCİ SATIRI. Üste binmiyor; açılınca header büyüyor ve çizim alanı o kadar aşağı kayıyor. Önce üste binen bir kat denenmişti ama dolap düzenleme araçlarını kapatıyordu. */ .ustMenuAltKat { flex-shrink: 0; display: flex; align-items: center; flex-wrap: wrap; /* Komutlar sağa dayalı: üstteki grup düğmeleriyle aynı hizada duruyorlar. */ justify-content: flex-end; gap: 6px 14px; padding: 7px 10px; border-top: 1px solid var(--renk-kenarlik); background: var(--renk-alan-vurgu); animation: ustMenuAcilis 0.12s linear; } .ustMenuAltKat[hidden] { display: none; } @keyframes ustMenuAcilis { from { opacity: 0.4; } to { opacity: 1; } } .ustMenuOgeleri { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; } /* Açıklama şeridi. Üstüne gelinen komutun ne yaptığını anında yazıyor; tarayıcının kendi balonunu beklemeye gerek kalmıyor. Komutların SOLUNDA duruyor, altında değil: header'ın ikinci satırı gereksiz yere kalınlaşmasın. Kalan boşluğu kaplıyor; metin sağa dayalı ki komutlarla arasında boşluk açılmasın. */ .ustMenuAciklamasi { flex: 1; min-width: 180px; display: flex; align-items: center; justify-content: flex-end; padding-right: 14px; border-right: 1px solid var(--renk-kenarlik-acik); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); line-height: 1.4; text-align: right; } /* Dar ekranda gruplar sığmazsa kaydırılabilsin. Açıklama şeridi de alt satıra insin. */ @media (max-width: 900px) { .ustMenuGruplari { overflow-x: auto; } .ustMenuAciklamasi { flex-basis: 100%; order: 2; padding-right: 0; border-right: 0; } } @media (prefers-reduced-motion: reduce) { .ustMenuAltKat { animation: none; } } /* ===== css/bolumler/16-gKodOnizleme.css ===== */ /* ============================================================ G KOD ÖNİZLEME ============================================================ Üretilen NC dosyasının takım yolu. */ /* Levha Yerleşimi (10000) içinden açılıyor; onun ve CNC Ayarları'nın (10600) üstünde, ipucu balonlarının (11000) ve tekrar kesimin (11400) altında. 1200'deyken yerleşimin arkasında kalıyordu (14.09 gezintisi). */ .gKodOnizlemeKatmani { position: fixed; inset: 0; z-index: 10700; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, 0.55); } .gKodOnizlemePenceresi { display: flex; flex-direction: column; width: min(1280px, 100%); height: min(880px, 100%); overflow: hidden; background: var(--yuzey, #ffffff); border-radius: 12px; box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3); } /* ------------------------------------------------ BAŞLIK ------------------------------------------------ */ .gKodOnizlemeBaslikAlani { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--kenar, #e2e8f0); } .gKodOnizlemeBaslik { margin: 0; font-size: 18px; font-weight: 600; } .gKodOnizlemeOzeti { margin: 4px 0 0; font-size: 13px; color: var(--ikincilMetin, #64748b); } .gKodOnizlemeKapat { padding: 8px 16px; font-size: 13px; cursor: pointer; background: var(--yuzeyIkincil, #f1f5f9); border: 1px solid var(--kenar, #e2e8f0); border-radius: 8px; } .gKodOnizlemeKapat:hover { background: var(--kenar, #e2e8f0); } /* ------------------------------------------------ GÖVDE ------------------------------------------------ */ .gKodOnizlemeGovde { display: flex; flex: 1; min-height: 0; } .gKodOnizlemeSol { display: flex; flex-direction: column; gap: 10px; flex: 0 0 300px; padding: 16px 18px; overflow-y: auto; border-right: 1px solid var(--kenar, #e2e8f0); } .gKodOnizlemeCizim { display: flex; flex: 1; align-items: flex-start; justify-content: center; padding: 20px; overflow: auto; background: repeating-conic-gradient( #f8fafc 0% 25%, #eef2f7 0% 50% ) 0 0 / 20px 20px; } .gKodOnizlemeBolumBasligi { margin: 6px 0 0; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ikincilMetin, #64748b); } /* ------------------------------------------------ DOSYA LİSTESİ ------------------------------------------------ */ .gKodOnizlemeListe { display: flex; flex-direction: column; gap: 4px; } .gKodOnizlemeDosya { padding: 8px 10px; font-size: 12px; text-align: left; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 8px; } .gKodOnizlemeDosya:hover { background: var(--yuzeyIkincil, #f1f5f9); } .gKodOnizlemeDosya.secili { font-weight: 600; background: var(--yuzeyIkincil, #f1f5f9); border-color: var(--kenar, #cbd5f5); } /* ------------------------------------------------ ÖZET ------------------------------------------------ */ .gKodOnizlemeOzetListesi { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 12px; } .gKodOnizlemeOzetListesi dt { color: var(--ikincilMetin, #64748b); } .gKodOnizlemeOzetListesi dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; } /* ------------------------------------------------ TAKIMLAR ------------------------------------------------ */ .gKodOnizlemeTakimlar { display: flex; flex-wrap: wrap; gap: 6px; } .gKodOnizlemeTakim { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer; background: var(--yuzey, #ffffff); border: 1px solid var(--kenar, #e2e8f0); border-radius: 999px; } .gKodOnizlemeTakim:hover { background: var(--yuzeyIkincil, #f1f5f9); } .gKodOnizlemeTakim.secili { font-weight: 600; border-color: var(--vurgu, #2563eb); } .gKodOnizlemeBenek { width: 10px; height: 10px; border-radius: 50%; } .gKodOnizlemeSecenek { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; } /* ------------------------------------------------ UYARILAR ------------------------------------------------ */ .gKodOnizlemeTehlike { padding: 10px 12px; font-size: 12px; line-height: 1.5; color: #7f1d1d; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; } .gKodOnizlemeTehlike p { margin: 4px 0 0; } .gKodOnizlemeSatirlar { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; } .gKodOnizlemeUyari { padding: 8px 10px; font-size: 12px; color: var(--renk-uyari); background: var(--renk-uyari-acik); border: 1px solid var(--renk-uyari-kenar); border-radius: 8px; } .gKodOnizlemeBos { font-size: 13px; color: var(--ikincilMetin, #64748b); } /* ------------------------------------------------ ÇİZİM ------------------------------------------------ */ .gKodOnizlemeTuval { background: #ffffff; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12); } .gKodCizimi { display: block; max-width: 100%; height: auto; } .gKodLevha { fill: #ffffff; stroke: #cbd5e1; stroke-width: 1; } /* Boş gezinme ince ve kesik: kesim çizgisinin önüne geçmesin. */ .gKodHizli { stroke-width: 0.6; stroke-dasharray: 3 3; opacity: 0.7; } .gKodKesme { stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .gKodDelik { stroke-width: 1; } /* Tehlike her şeyin üstünde ve kalın. */ .gKodTehlike { stroke-width: 2.4; stroke-linecap: round; } /* ===== css/bolumler/17-odaCizim.css ===== */ /* ============================================================ ODA ÇİZİM PENCERESİ ============================================================ Odanın planını tepeden çizdiren pencere. İskelet parça ekleme penceresinden geliyor (parcaEkleme* sınıfları); burada yalnız plan yüzeyi ve ölçü kutuları tanımlı. */ .odaCizimPenceresi { width: min(1100px, 94vw); max-width: 94vw; } /* ------------------------------------------------ ARAÇ ÇUBUĞU ------------------------------------------------ */ .odaCizimAracCubugu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 18px 12px; } .odaCizimDugme { padding: 7px 14px; border: 1px solid var(--kenarRengi, #ccd4de); border-radius: 6px; background: var(--yuzeyRengi, #fff); color: var(--metinRengi, #253040); font-size: 13px; cursor: pointer; } .odaCizimDugme:hover:not(:disabled) { background: var(--vurguYuzeyi, #eef3f9); } .odaCizimDugme:disabled { opacity: 0.45; cursor: default; } .odaCizimUygulaBtn { background: var(--anaRenk, #2d6cdf); border-color: var(--anaRenk, #2d6cdf); color: #fff; font-weight: 600; } .odaCizimUygulaBtn:hover:not(:disabled) { background: var(--anaRenkKoyu, #2559b8); } .odaCizimYukseklik { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--metinRengi, #253040); } .odaCizimYukseklik input { width: 90px; padding: 6px 8px; border: 1px solid var(--kenarRengi, #ccd4de); border-radius: 6px; font-size: 13px; } /* ------------------------------------------------ ÇİZİM YÜZEYİ ------------------------------------------------ SVG ile ölçü kutuları üst üste duruyor; sarmal konumlandırma referansı. */ .odaCizimYuzeyi { position: relative; height: min(56vh, 520px); margin: 0 18px; border: 1px solid var(--kenarRengi, #ccd4de); border-radius: 8px; background: #fbfcfe; overflow: hidden; } .odaCizimSvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; } .odaCizimOlcuKatmani { position: absolute; inset: 0; pointer-events: none; } /* ------------------------------------------------ ÇİZGİLER ------------------------------------------------ */ .odaCizimIzgara { stroke: #e6ebf2; stroke-width: 1; } .odaCizimAlan { fill: #dce8fa; fill-opacity: 0.55; stroke: none; } .odaCizimDuvar { stroke: #2d4a72; stroke-width: 3; stroke-linecap: round; } .odaCizimLastik { stroke: #7b93b5; stroke-width: 2; stroke-dasharray: 6 5; } .odaCizimKose { fill: #fff; stroke: #2d4a72; stroke-width: 2; cursor: grab; } .odaCizimKose:hover { fill: #cfe0fb; } /* Çizim sürerken ilk köşe vurgulu; üstüne tıklayınca şekil kapanıyor. */ .odaCizimIlkKose { fill: #ffd9a8; stroke: #c2761a; } /* ------------------------------------------------ ÖLÇÜ KUTULARI ------------------------------------------------ Duvarın ortasında durur, dışa doğru itilir. */ .odaCizimOlcuKutusu { position: absolute; width: 74px; padding: 3px 4px; transform: translate(-50%, -50%); border: 1px solid #9fb2cb; border-radius: 5px; background: #fff; color: #1d2a3d; font-size: 12px; text-align: center; pointer-events: auto; } /* Kose ic acisi, derece. Duvarin boyu kadar acisi da olculebilir olmali; rastgele aci ise yaramiyor. */ .odaCizimAciKutusu { position: absolute; width: 56px; padding: 2px 3px; transform: translate(-50%, -50%); border: 1px solid #c9a86a; border-radius: 10px; background: #fffaf0; color: #6b4c12; font-size: 11px; text-align: center; pointer-events: auto; } .odaCizimAciKutusu:focus { outline: none; border-color: #c2761a; box-shadow: 0 0 0 2px rgba(194, 118, 26, 0.2); } .odaCizimOlcuKutusu:focus { outline: none; border-color: var(--anaRenk, #2d6cdf); box-shadow: 0 0 0 2px rgba(45, 108, 223, 0.2); } /* ------------------------------------------------ ÖLÇÜ GİRİŞ KUTUSU ------------------------------------------------ Çizerken imlecin yanında duran uzunluk/açı kutusu. CAD programlarındaki gibi ölçüyü yazıp Enter'a basıyorsun. */ .odaCizimGiris { position: absolute; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #2d4a72; border-radius: 7px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 2px 8px rgba(20, 40, 70, 0.18); font-size: 12px; pointer-events: auto; white-space: nowrap; } .odaCizimGizli { display: none; } .odaCizimGirisAlani { display: flex; align-items: center; gap: 4px; color: #35485f; } .odaCizimGirisAlani input { width: 66px; padding: 3px 4px; border: 1px solid #9fb2cb; border-radius: 4px; font-size: 12px; text-align: right; } .odaCizimGirisAlani input:focus { outline: none; border-color: var(--anaRenk, #2d6cdf); box-shadow: 0 0 0 2px rgba(45, 108, 223, 0.2); } .odaCizimGirisBirim { color: #7b8aa0; } .odaCizimDonus { padding-left: 4px; border-left: 1px solid #dbe2ec; color: #c2761a; font-weight: 600; } /* ------------------------------------------------ BİLGİ VE ALT SATIR ------------------------------------------------ */ .odaCizimBilgi { padding: 10px 18px 0; font-size: 13px; color: #4a5a70; min-height: 20px; } .odaCizimBilgiHata { color: #b3341f; } .odaCizimAltSatir { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px 18px; } /* ===== css/bolumler/18-kertme.css ===== */ /* ============================================================ KERTME PENCERESİ ============================================================ Kolona ya da kirişe giren dolaplarda hangi panelden ne kesileceğini listeler. İskelet parça ekleme penceresinden geliyor; burada yalnız liste ve satırlar tanımlı. */ .kertmePenceresi { width: min(680px, 92vw); } .kertmeListesi { max-height: min(48vh, 420px); margin: 0 18px; overflow-y: auto; } /* ------------------------------------------------ DOLAP KUTUSU ------------------------------------------------ */ .kertmeDolapKutusu { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--kenarRengi, #ccd4de); border-radius: 8px; background: var(--yuzeyRengi, #fff); } .kertmeDolapBasligi { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--metinRengi, #253040); } /* ------------------------------------------------ KERTME SATIRI ------------------------------------------------ Panel adı · ölçü · hangi kenardan. */ .kertmeSatiri { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 12px; border-top: 1px solid #eef2f7; } .kertmeSatiri:first-of-type { border-top: none; } .kertmePanelAdi { flex: 0 0 130px; color: #35485f; } .kertmeOlcusu { flex: 0 0 120px; font-weight: 600; color: #1d2a3d; } .kertmeYeri { flex: 1; color: #7b8aa0; } /* Silinecek kertme üstü çizili: dolap kolondan uzaklaşmış, panelde kalan eski kesim kaldırılacak. */ .kertmeSilinecek .kertmeOlcusu, .kertmeSilinecek .kertmePanelAdi { color: #a05252; text-decoration: line-through; } .kertmeSilinecek .kertmeYeri { color: #a05252; } /* Daraltma: kertme değil, dar kesim. Kolon panelin bir ucunu boydan boya yiyorsa oraya kertme açılmaz; panel o kadar dar kesilir. Kullanıcıya sormuyoruz, bilgi olarak gösteriyoruz. */ .kertmeSatiri.kertmeDaraltma { padding-left: 8px; border-left: 3px solid #4a7fb5; background: #eef4fa; } .kertmeDaraltma .kertmePanelAdi, .kertmeDaraltma .kertmeOlcusu { color: #2b5580; } .kertmeDaraltma .kertmeYeri { color: #46698e; } /* Açılamayan kertme: kolon panelin bir ucunu boydan boya yiyor. Uygulamak bunu çözmüyor, dolabın taşınması gerekiyor. Bekleyenden görsel olarak ayrı durmalı; yoksa kullanıcı "uyguladım, bitti" sanıyor. */ .kertmeSatiri.kertmeSorunlu { padding-left: 8px; border-left: 3px solid #c0392b; background: #fdf0ee; } .kertmeSorunlu .kertmePanelAdi, .kertmeSorunlu .kertmeOlcusu { color: #a03228; font-weight: 600; } .kertmeSorunlu .kertmeYeri { color: #8c3a2f; } .kertmeBosSatir { margin: 0; font-size: 12px; color: #7b8aa0; } /* ------------------------------------------------ UYARILAR ------------------------------------------------ Eğik dolap, dar kertme gibi durumlar. Uygulamayı engellemiyor ama görünüyor. */ .kertmeUyarilari { margin: 10px 18px 0; padding: 8px 10px; border-left: 3px solid #d8a24a; background: #fdf7ec; } .kertmeUyarilari p { margin: 0 0 4px; font-size: 12px; color: #7a5a1d; } .kertmeUyarilari p:last-child { margin-bottom: 0; } /* ------------------------------------------------ ALT SATIR ------------------------------------------------ */ .kertmeAltSatir { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px 18px; } .kertmeDugme { padding: 8px 16px; border: 1px solid var(--kenarRengi, #ccd4de); border-radius: 6px; background: var(--yuzeyRengi, #fff); color: var(--metinRengi, #253040); font-size: 13px; cursor: pointer; } .kertmeDugme:hover:not(:disabled) { background: var(--vurguYuzeyi, #eef3f9); } .kertmeDugme:disabled { opacity: 0.45; cursor: default; } .kertmeUygulaBtn { background: var(--anaRenk, #2d6cdf); border-color: var(--anaRenk, #2d6cdf); color: #fff; font-weight: 600; } .kertmeUygulaBtn:hover:not(:disabled) { background: var(--anaRenkKoyu, #2559b8); } /* ===== css/bolumler/19-trendyol.css ===== */ /* ============================================================ PAZARYERİ PENCERESİ ============================================================ Fiyat ayarları ve ürün kartı. Ölçüler CNC ayarları penceresiyle aynı: iki pencere yan yana açıldığında biri diğerinden farklı görünmesin. */ .trendyolKatmani { position: fixed; inset: 0; z-index: 10600; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(27, 35, 48, 0.4); animation: katmanGiris 0.12s linear; } .trendyolPenceresi { width: min(100%, 960px); height: min(100%, 720px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); animation: pencereGiris 0.12s linear; } .trendyolBaslikAlani { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .trendyolBaslik { margin: 0; color: var(--renk-yazi); font-size: 14px; font-weight: 600; } .trendyolAciklama { margin: 2px 0 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .trendyolKapatBtn { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-size: 15px; line-height: 1; cursor: pointer; } .trendyolKapatBtn:hover { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } /* ------------------------------------------------ SEKMELER ------------------------------------------------ */ .trendyolSekmeSeridi { flex-shrink: 0; display: flex; gap: 2px; padding: 6px 12px 0; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .trendyolSekmeBtn { height: 26px; padding: 0 14px; border: 1px solid transparent; border-bottom: none; border-radius: var(--radius-orta) var(--radius-orta) 0 0; background: transparent; color: var(--renk-yazi-ikincil); font-size: var(--yazi-normal); cursor: pointer; } .trendyolSekmeBtn:hover { color: var(--renk-yazi); } .trendyolSekmeBtn.aktif { border-color: var(--renk-kenarlik); background: var(--renk-panel); color: var(--renk-yazi); font-weight: 600; } .trendyolGovde { flex: 1; min-height: 0; display: flex; } .trendyolGorunum { flex: 1; min-height: 0; padding: 12px; overflow-y: auto; } .trendyolGorunum[hidden] { display: none; } /* ------------------------------------------------ BÖLÜM VE ALANLAR ------------------------------------------------ */ .trendyolBolumBasligi { margin: 14px 0 8px; } .trendyolBolumBasligi:first-child { margin-top: 0; } .trendyolBolumBasligi h3 { margin: 0; color: var(--renk-yazi); font-size: var(--yazi-normal); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .trendyolBolumBasligi p { margin: 3px 0 0; max-width: 640px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.45; } .trendyolIzgara { display: grid; grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) ); gap: 10px; } .trendyolAlan { display: flex; flex-direction: column; gap: 3px; } .trendyolAlanEtiketi { color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; } .trendyolAlanKutusu { display: flex; align-items: center; gap: 6px; } .trendyolAlan input[type="number"], .trendyolAlan input[data-sayi-alani], .trendyolAlan input[type="text"], .trendyolAlan select { width: 100%; height: var(--alan-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-normal); } .trendyolAlan input:focus, .trendyolAlan select:focus { outline: none; border-color: var(--renk-ana-kenar); background: var(--renk-alan-vurgu); } .trendyolAlanBirimi { flex-shrink: 0; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); } .trendyolAlanIpucu { color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); line-height: 1.4; } .trendyolOnayAlani { flex-direction: row; align-items: flex-start; gap: 7px; } .trendyolOnayAlani input { margin-top: 2px; } /* ------------------------------------------------ KARGO TARİFESİ ------------------------------------------------ */ .trendyolTarife { display: flex; flex-direction: column; gap: 4px; max-width: 420px; } .trendyolTarifeSatiri { display: grid; grid-template-columns: 1fr 1fr 26px; gap: 6px; } .trendyolTarifeSatiri input { height: var(--alan-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-normal); } .trendyolTarifeBasligi span { color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); font-weight: 600; } .trendyolSatirSilBtn { height: var(--alan-yukseklik); border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi-soluk); cursor: pointer; } .trendyolSatirSilBtn:hover { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } /* ------------------------------------------------ DÜĞMELER ------------------------------------------------ */ .trendyolDugmeSeridi { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--renk-kenarlik-acik); } .trendyolAnaBtn, .trendyolIkincilBtn, .trendyolKucukBtn { height: var(--buton-yukseklik); padding: 0 12px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-normal); cursor: pointer; } .trendyolAnaBtn { border-color: var(--renk-ana); background: var(--renk-ana); color: #ffffff; font-weight: 600; } .trendyolAnaBtn:hover { background: var(--renk-ana-hover); } .trendyolIkincilBtn:hover, .trendyolKucukBtn:hover { border-color: var(--renk-ana-kenar); background: var(--renk-ana-acik); } .trendyolKucukBtn { height: 22px; padding: 0 8px; font-size: var(--yazi-kucuk); } .trendyolDurumYazisi { margin-right: auto; color: var(--renk-basarili); font-size: var(--yazi-kucuk); } .trendyolDurumYazisi.hataliDurum { color: var(--renk-tehlike); } /* ------------------------------------------------ SONUÇ ------------------------------------------------ */ .trendyolSonuc { margin-top: 14px; } .trendyolFiyatKutusu { display: grid; grid-template-columns: repeat( auto-fit, minmax(170px, 1fr) ); gap: 8px; } .trendyolBuyukSayi { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-orta); background: var(--renk-alan); } .trendyolBuyukSayi.vurgulu { border-color: var(--renk-ana-kenar); background: var(--renk-ana-acik); } .trendyolBuyukSayiEtiketi { color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .trendyolBuyukSayi strong { color: var(--renk-yazi); font-size: 17px; font-weight: 600; } .trendyolKirilim { display: flex; flex-direction: column; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-orta); overflow: hidden; } .trendyolKirilimSatiri { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 1fr) 120px; gap: 8px; padding: 5px 10px; background: var(--renk-alan); font-size: var(--yazi-normal); } .trendyolKirilimSatiri:nth-child(even) { background: var(--renk-alan-vurgu); } .trendyolKirilimAyrinti { color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); } .trendyolKirilimTutar { text-align: right; font-variant-numeric: tabular-nums; } /* ------------------------------------------------ KOPYALANABİLİR METİN ------------------------------------------------ */ .trendyolKopyaAlani { margin-bottom: 10px; } .trendyolKopyaBasligi { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; } .trendyolKopyaAlani textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: inherit; font-size: var(--yazi-normal); line-height: 1.5; resize: vertical; } /* ------------------------------------------------ FOTOĞRAFLAR ------------------------------------------------ Görseller 1200x1800 dikey. Izgara onları küçültüp gösteriyor; indirilen dosya tam boyutta. */ .trendyolFotografIzgarasi { display: grid; grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) ); gap: 10px; } .trendyolFotografKarti { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 8px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-orta); background: var(--renk-alan); } .trendyolFotografKarti img { width: 100%; /* Dikey çerçevenin oranı korunuyor: kart içinde ürün ne kadar yer kaplıyorsa indirilende de o kadar kaplayacak. */ aspect-ratio: 2 / 3; object-fit: contain; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: #ffffff; } .trendyolFotografKarti figcaption { display: flex; flex-direction: column; gap: 3px; } .trendyolFotografKarti figcaption strong { color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .trendyolFotografKarti figcaption span { color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); line-height: 1.4; } .trendyolFotografKarti button { align-self: flex-start; margin-top: 2px; } /* ------------------------------------------------ UYARILAR ------------------------------------------------ Fiyatın ÜSTÜNDE duruyorlar. Eksik bir kalem sessizce sıfır geçerse ürün maliyetin altına satılıyor. */ .trendyolUyariKutusu { margin-bottom: 12px; padding: 8px 10px; border: 1px solid var(--renk-uyari-kenar); border-radius: var(--radius-orta); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-kucuk); } .trendyolUyariKutusu ul { margin: 4px 0 0; padding-left: 18px; } .trendyolUyariKutusu li { line-height: 1.5; } .trendyolBosMesaj { margin: 0; padding: 12px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-normal); } /* Çekim seçenekleri (30.09): kapaklar açık, yakın çekim, stüdyo, 2×. */ .trendyolSecenekler { display: flex; flex-wrap: wrap; gap: 6px 14px; width: 100%; margin-bottom: 6px; } .trendyolDugmeSeridi > button { white-space: nowrap; } .trendyolOnay { display: inline-flex; align-items: center; gap: 6px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); cursor: pointer; } /* ===== css/bolumler/20-montajKilavuzu.css ===== */ /* ============================================================ MONTAJ KILAVUZU PENCERESİ ============================================================ Sol tarafta ayarlar, sağ tarafta canlı önizleme. Karekod yazarken oluşuyor. Bu pencerenin işi "bir dosya üret" değil, "üretilecek şeyin doğru olduğunu göster". O yüzden önizleme ayarlarla aynı ekranda ve aynı büyüklükte. */ .kilavuzKatmani { position: fixed; inset: 0; z-index: 10600; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(27, 35, 48, 0.4); animation: katmanGiris 0.12s linear; } .kilavuzPenceresi { width: min(100%, 940px); height: min(100%, 620px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); animation: pencereGiris 0.12s linear; } .kilavuzBaslikAlani { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .kilavuzBaslik { margin: 0; color: var(--renk-yazi); font-size: 14px; font-weight: 600; } .kilavuzAciklama { margin: 2px 0 0; max-width: 640px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.45; } .kilavuzKapatBtn { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-size: 15px; line-height: 1; cursor: pointer; } .kilavuzKapatBtn:hover { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } /* ------------------------------------------------ GÖVDE ------------------------------------------------ İki sütun. Dar ekranda alt alta düşüyor; önizleme kaybolmuyor, aşağı iniyor. */ .kilavuzGovde { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; } .kilavuzSol { min-height: 0; padding: 12px; overflow-y: auto; } .kilavuzSag { min-height: 0; display: flex; flex-direction: column; padding: 12px; border-left: 1px solid var(--renk-kenarlik); background: var(--renk-serit); overflow-y: auto; } @media (max-width: 820px) { .kilavuzGovde { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; } .kilavuzSag { border-left: none; border-top: 1px solid var(--renk-kenarlik); } } /* ------------------------------------------------ BÖLÜM VE ALANLAR ------------------------------------------------ */ .kilavuzBolum { margin: 14px 0 8px; } .kilavuzBolum:first-child { margin-top: 0; } .kilavuzBolum h3 { margin: 0; color: var(--renk-yazi); font-size: var(--yazi-normal); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .kilavuzBolum p { margin: 3px 0 0; max-width: 520px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.45; } .kilavuzIzgara { display: grid; grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) ); gap: 10px; } .kilavuzAlan { display: flex; flex-direction: column; gap: 3px; } .kilavuzAlanEtiketi { color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; } .kilavuzAlan input, .kilavuzAlan select { width: 100%; height: var(--alan-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-normal); } .kilavuzAlan input:focus, .kilavuzAlan select:focus { outline: none; border-color: var(--renk-ana-kenar); background: var(--renk-alan-vurgu); } .kilavuzAlanIpucu { color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); line-height: 1.4; } /* ------------------------------------------------ ÖNİZLEME KARTI ------------------------------------------------ Kutunun üstüne yapışacak etiketin ta kendisi: karekod, altında kod ve adres. Kullanıcı buradaki karekodu telefonuyla okutup hemen deneyebiliyor. En sık yapılan hata — adresi yanlış yazmak — ancak böyle yakalanıyor. */ .kilavuzKart { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 14px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-orta); background: var(--renk-alan); } .kilavuzKarekod { width: 172px; height: 172px; display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: var(--radius-kucuk); background: #ffffff; /* Karekod ekranda oluşurken hafif bir belirme: kullanıcı değiştiğini fark etsin. */ animation: karekodBelir 0.18s ease-out; } .kilavuzKarekod svg { display: block; width: 100%; height: 100%; } .kilavuzKarekod.bos { border: 1px dashed var(--renk-kenarlik); background: var(--renk-alan-pasif); } @keyframes karekodBelir { from { opacity: 0.35; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } .kilavuzKartMetin { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .kilavuzKod { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--renk-yazi); } .kilavuzAdres { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 10px; word-break: break-all; color: var(--renk-yazi-soluk); } .kilavuzNot { font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } /* ------------------------------------------------ DURUM ------------------------------------------------ */ .kilavuzDurum { flex: 1; margin-top: 10px; } .kilavuzOzet { margin: 0 0 8px; color: var(--renk-basarili); font-size: var(--yazi-normal); font-weight: 600; } .kilavuzYol { margin: 8px 0 0; padding: 6px 8px; border-radius: var(--radius-kucuk); background: var(--renk-ana-acik); color: var(--renk-yazi); font-size: var(--yazi-kucuk); line-height: 1.45; } .kilavuzUyariKutusu { padding: 8px 10px; border: 1px solid var(--renk-uyari-kenar); border-radius: var(--radius-orta); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-kucuk); } .kilavuzUyariKutusu ul { margin: 4px 0 0; padding-left: 16px; } .kilavuzUyariKutusu li { line-height: 1.5; } .kilavuzBosMesaj { margin: 0; padding: 16px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-normal); } /* ------------------------------------------------ DÜĞMELER ------------------------------------------------ */ .kilavuzDugmeSeridi { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--renk-kenarlik-acik); } .kilavuzAnaBtn, .kilavuzIkincilBtn { height: var(--buton-yukseklik); padding: 0 12px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-normal); cursor: pointer; } .kilavuzAnaBtn { border-color: var(--renk-ana); background: var(--renk-ana); color: #ffffff; font-weight: 600; } .kilavuzAnaBtn:hover { background: var(--renk-ana-hover); } .kilavuzIkincilBtn:hover { border-color: var(--renk-ana-kenar); background: var(--renk-ana-acik); } /* ------------------------------------------------ KILAVUZUN EKRAN ÖNİZLEMESİ (D155/5) ------------------------------------------------ Atölye basmadan önce kâğıdın kendisini görüyor. Çerçevenin içindeki sayfa, yazıcıya giden sayfanın aynısı. */ /* flex-shrink: 0 (14.09 gezintisi): sağ sütun esnek; kutu overflow: hidden olduğu için en küçük yüksekliği 0 sayılıyordu. 1366 × 768 ekranda önizleme 9 piksele eziliyor, basılacak sayfa görünmüyordu. Kutu kendi boyunu koruyor, sütun (overflow: auto) kayıyor. */ .kilavuzOnizlemeKutusu { flex-shrink: 0; margin-top: 10px; border: 1px solid var(--renk-kenar); border-radius: 6px; background: var(--renk-yuzey); overflow: hidden; } .kilavuzOnizlemeNotu { margin: 0; padding: 10px 12px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.4; } .kilavuzOnizlemeCercevesi { display: block; width: 100%; height: 420px; border: 0; background: #ffffff; } /* ===== css/bolumler/21-donanimKatalogu.css ===== */ /* ============================================================ DONANIM KATALOĞU ============================================================ Kullandığımız Samet ürünlerinin ölçüleri. Kart düzeni: her ürün kendi kutusunda, ölçü kuralları formül olarak. Tezgâhta bakılan bir ekran; okunması hızlı olmalı, süslü olması değil. */ .donanimKatmani { position: fixed; inset: 0; z-index: 10600; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(27, 35, 48, 0.4); animation: katmanGiris 0.12s linear; } .donanimPenceresi { width: min(100%, 720px); height: min(100%, 680px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); animation: pencereGiris 0.12s linear; } .donanimBaslikAlani { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .donanimBaslik { margin: 0; color: var(--renk-yazi); font-size: 14px; font-weight: 600; } .donanimAciklama { margin: 2px 0 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .donanimKapatBtn { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-size: 15px; line-height: 1; cursor: pointer; } .donanimKapatBtn:hover { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } .donanimGovde { flex: 1; min-height: 0; padding: 12px; overflow-y: auto; } /* ------------------------------------------------ BÖLÜM ------------------------------------------------ */ .donanimBolum { margin: 16px 0 8px; } .donanimBolum:first-child { margin-top: 0; } .donanimBolum h3 { margin: 0; color: var(--renk-yazi); font-size: var(--yazi-normal); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .donanimBolum p { margin: 3px 0 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.45; } /* ------------------------------------------------ KART ------------------------------------------------ */ .donanimKart { margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-orta); background: var(--renk-alan); } .donanimKartBasligi { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 7px; } .donanimKartBasligi strong { color: var(--renk-yazi); font-size: var(--yazi-normal); } .donanimRozet { padding: 1px 7px; border-radius: 999px; background: var(--renk-ana-acik); color: var(--renk-ana-yazi); font-size: var(--yazi-kucuk); font-weight: 600; } .donanimKod { margin-left: auto; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--yazi-kucuk); color: var(--renk-yazi-soluk); } .donanimKartAciklamasi { margin: 0 0 7px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.5; } /* ------------------------------------------------ ÖLÇÜ KURALLARI ------------------------------------------------ Formül olarak yazılıyor: kullanıcı tezgâhta uygulayabilsin ve hangi ölçüden çıktığını görsün. */ .donanimKurallar { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; padding: 7px 9px; border-left: 2px solid var(--renk-ana); border-radius: 0 var(--radius-kucuk) var(--radius-kucuk) 0; background: var(--renk-alan-vurgu); } .donanimKurallar code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--yazi-kucuk); color: var(--renk-yazi); } /* ------------------------------------------------ BİLGİ IZGARASI ------------------------------------------------ */ .donanimIzgara { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; align-items: baseline; } .donanimEtiket { color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); white-space: nowrap; } .donanimDeger { color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-variant-numeric: tabular-nums; } .donanimOzellikler { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .donanimOzellikler span { padding: 2px 8px; border: 1px solid var(--renk-kenarlik-acik); border-radius: 999px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } /* Ölçünün nereden geldiği. Şüphe edilirse katalogda o sayfaya bakılıyor. */ .donanimKaynak { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--renk-kenarlik-acik); color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); } /* ------------------------------------------------ HESAP KARTI ------------------------------------------------ Sayfadaki tek etkileşimli parça; ayrı dursun diye zemini farklı. */ .donanimHesapKarti { border-color: var(--renk-ana-kenar); background: var(--renk-ana-acik); } .donanimHesapSatiri { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .donanimAlan { display: flex; flex-direction: column; gap: 3px; } .donanimAlanEtiketi { color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; } .donanimAlanKutusu { display: flex; align-items: center; gap: 5px; } .donanimAlan input { width: 78px; height: var(--alan-yukseklik); padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-normal); font-variant-numeric: tabular-nums; text-align: right; } .donanimAlan input:focus { outline: none; border-color: var(--renk-ana); } .donanimAlanBirimi { color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); } .donanimHesapSonucu { padding: 7px 9px; border-radius: var(--radius-kucuk); background: var(--renk-alan); font-size: var(--yazi-normal); } .donanimHesapSonucu strong { color: var(--renk-ana-yazi); } .donanimHesapSonucu span { color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); } /* ------------------------------------------------- 3B MODEL SATIRI ------------------------------------------------- Üreticinin STL dosyası buradan yükleniyor. Kartın altında ve çizgiyle ayrı: katalog bilgisi (üreticinin verdiği) ile kullanıcının kendi eklediği şey birbirine karışmasın. */ .donanimModelSatiri { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--renk-kenarlik-acik); } .donanimModelBasligi { color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .donanimModelDurumu { margin-top: 4px; color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-variant-numeric: tabular-nums; } .donanimModelOlcuSatiri { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; } .donanimModelOlcuEtiketi { color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .donanimModelOlcuGirisi { width: 96px; flex: none; padding: 5px 7px; border: 1px solid var(--renk-kenarlik); border-radius: 5px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-variant-numeric: tabular-nums; text-align: right; } /* Ölçünün ne işe yaradığı yazıyor: boş bırakan kullanıcı modelin neden yanlış boyda çıktığını anlamalı. */ .donanimModelNotu { margin-top: 4px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.55; } .donanimModelDugmeleri { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .donanimModelDosyasi { flex: 1; min-width: 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); } .donanimModelKaldir { flex: none; padding: 5px 12px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-alan); color: var(--renk-yazi); font-size: var(--yazi-kucuk); cursor: pointer; } /* Çalışmayan düğmenin çalışıyor görünmesi bastım da bir şey olmadı sorusunu doğuruyor. */ .donanimModelKaldir.pasif, .donanimModelKaldir:disabled { opacity: 0.4; cursor: default; } /* Ölçek şüphesi, düz model, çok üçgen. Engellemiyoruz — kullanıcı bilerek yüklemiş olabilir — ama görmesi gerekiyor. */ .donanimModelUyarilari:empty { display: none; } .donanimModelUyarisi { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-mini); line-height: 1.55; } /* ===== css/bolumler/22-modelAgaci.css ===== */ /* ================================================= 22. MODEL AĞACI ================================================= Sol panelin üstünde duran, odanın içindekileri gösteren ağaç. Yoğunluk CAD programlarının ölçüsünde: 20 px satır, 11 px yazı. Bir dolabın on beş paneli ekrandan taşmadan sığmalı; süslü satır aralığı burada lüks değil, engel. */ .modelAgaciYuvasi { flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid var(--renk-kenarlik); } .modelAgaci { display: flex; flex-direction: column; min-height: 0; background: var(--renk-panel); } /* ------------------------------------------------- BAŞLIK ------------------------------------------------- */ .modelAgaciBaslikAlani { height: var(--bolum-baslik-yukseklik); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-bolum-baslik); } .modelAgaciBaslik { margin: 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .modelAgaciSayac { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } /* ------------------------------------------------- LİSTE Yüksekliği sınırlı: ağaç uzayınca kendi içinde kayıyor, altındaki araçları ekrandan itmiyor. ------------------------------------------------- */ .modelAgaciListe { /* Kisa ekranda agac araclari asagi itmesin: ekranin ucte birinden fazlasini almiyor. */ max-height: min(246px, 32vh); overflow-y: auto; overflow-x: hidden; padding: 3px 0; } .modelAgaciBos { margin: 0; padding: 7px 10px; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); } /* ------------------------------------------------- SATIR ------------------------------------------------- */ .modelAgaciSatir { height: 20px; display: flex; align-items: center; gap: 4px; padding-right: 8px; color: var(--renk-yazi); font-size: var(--yazi-kucuk); line-height: 1; white-space: nowrap; cursor: default; user-select: none; } .modelAgaciSatir--dolap, .modelAgaciSatir--panel { cursor: pointer; } .modelAgaciSatir:hover { background: var(--renk-satir-vurgu); } /* Seçili satır 3B'deki seçimle aynı maviyi kullanıyor: iki yerde aynı şey seçili olduğu anlaşılsın. */ .modelAgaciSatir.secili { background: var(--renk-ana); color: #ffffff; } .modelAgaciSatir.secili .modelAgaciOlcu { color: rgba(255, 255, 255, 0.75); } /* ------------------------------------------------- AÇMA OKU Adla ayrı: dolabı seçmek isteyen dalı açmak zorunda kalmasın. ------------------------------------------------- */ .modelAgaciOk { width: 14px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-soluk); font-size: 9px; line-height: 1; cursor: pointer; } .modelAgaciOk:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); color: var(--renk-yazi); } .modelAgaciOk--bos { cursor: default; opacity: 0; } /* ------------------------------------------------- AD VE ÖLÇÜ Ad uzunsa kısalır, ölçü ASLA kısalmaz: ölçü yarım okunursa hiç okunmamış sayılır. ------------------------------------------------- */ .modelAgaciAd { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modelAgaciSatir--oda .modelAgaciAd { font-weight: 700; } .modelAgaciSatir--dolap .modelAgaciAd { font-weight: 600; } .modelAgaciSatir--panel .modelAgaciAd { color: var(--renk-yazi-ikincil); } .modelAgaciOlcu { flex-shrink: 0; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } /* ------------------------------------------------- DAR PANEL Sol panel daraltılınca ağaç da gizlenir; 34 piksellik şeritte okunacak bir şey yok. ------------------------------------------------- */ .solPanel.solPanelDar .modelAgaciYuvasi { display: none; } /* ===== css/bolumler/23-donanimListesi.css ===== */ /* ================================================= DONANIM LİSTESİ PENCERESİ ================================================= Kaç menteşe, kaç ray takımı, kaç linco, kaç ayak. Liste okunmak için değil SAYILMAK için var: marangoz bayiye söylerken satırı gözüyle takip ediyor. O yüzden adet sağa yaslı ve rakamlar aynı genişlikte (tabular-nums) — sayılar alt alta hizalı dursun. */ .donanimListesiKatmani { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.45); } .donanimListesiPenceresi { display: flex; flex-direction: column; width: 100%; max-width: 480px; max-height: 100%; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-orta, 6px); background: var(--renk-alan); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); overflow: hidden; } .donanimListesiBaslikAlani { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--renk-kenarlik-acik); } .donanimListesiBaslik { margin: 0; color: var(--renk-yazi); font-size: var(--yazi-normal); font-weight: 600; } .donanimListesiOzeti { margin-top: 2px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .donanimListesiKapatBtn { flex: 0 0 auto; width: 26px; height: 26px; border: none; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-ikincil); font-size: 18px; line-height: 1; cursor: pointer; } .donanimListesiKapatBtn:hover { background: var(--renk-alan-vurgu); color: var(--renk-yazi); } .donanimListesiGovde { flex: 1 1 auto; padding: 8px 16px 16px; overflow-y: auto; } .donanimListesiKategori { margin: 14px 0 6px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .donanimListesiKategori:first-child { margin-top: 4px; } .donanimListesiSatir { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--renk-kenarlik-acik); } .donanimListesiSatir:last-child { border-bottom: none; } .donanimListesiAd { color: var(--renk-yazi); font-size: var(--yazi-kucuk); } /* Adet sağda ve tabular: rakamlar alt alta hizalansın, göz tek sütunda insin. */ .donanimListesiAdet { flex: 0 0 auto; color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .donanimListesiBos { margin: 12px 0; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); line-height: 1.5; } .donanimListesiUyari { margin-top: 14px; padding: 8px 10px; border: 1px solid var(--renk-uyari-kenar); border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-mini); line-height: 1.45; } .donanimListesiUyari h3 { margin: 0 0 4px; font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .donanimListesiUyari p { margin: 2px 0; } .donanimListesiAltCubuk { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--renk-kenarlik-acik); } .donanimListesiBtn { height: var(--alan-yukseklik); padding: 0 12px; border: 1px solid var(--renk-ana-kenar); border-radius: var(--radius-kucuk); background: var(--renk-ana); color: #fff; font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; } .donanimListesiBtn:hover:not(:disabled) { background: var(--renk-ana-hover); } .donanimListesiBtn:disabled { border-color: var(--renk-kenarlik); background: var(--renk-alan-vurgu); color: var(--renk-yazi-soluk); cursor: default; } /* Pano çalışmazsa liste buraya basılıyor (D212): kullanıcı elle seçip kopyalayabilsin. */ .donanimListesiMetinKutusu { flex-basis: 100%; width: 100%; height: 160px; margin-top: 8px; padding: 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font-family: monospace; font-size: var(--yazi-mini); resize: vertical; } .donanimListesiDurum { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } /* ===== css/bolumler/24-kesimeHazir.css ===== */ /* ================================================= KESİME HAZIR MI PENCERESİ ================================================= Üç renk: yeşil kesebilirsin, sarı bakılacaklar var, kırmızı parça çöp olur. Renk pencerenin ÜST ÇUBUĞUNDA duruyor — açar açmaz tek bakışta anlaşılsın. Satırların yanındaki ince şerit de aynı dili konuşuyor. */ .kesimeHazirKatmani { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.5); } .kesimeHazirPenceresi { display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: 100%; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-orta, 6px); background: var(--renk-alan); box-shadow: 0 20px 56px rgba(0, 0, 0, 0.4); overflow: hidden; } /* Üst çubuğun rengi durumu söylüyor. */ .kesimeHazirBaslikAlani { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--renk-kenarlik-acik); border-left: 4px solid var(--renk-kenarlik); } .kesimeHazirPenceresi[data-renk="yesil"] .kesimeHazirBaslikAlani { border-left-color: var(--renk-basarili); background: var(--renk-basarili-acik); } .kesimeHazirPenceresi[data-renk="sari"] .kesimeHazirBaslikAlani { border-left-color: var(--renk-uyari); background: var(--renk-uyari-acik); } .kesimeHazirPenceresi[data-renk="kirmizi"] .kesimeHazirBaslikAlani { border-left-color: var(--renk-tehlike, #d64545); background: var(--renk-tehlike-acik, #fdecec); } .kesimeHazirBaslik { margin: 0; color: var(--renk-yazi); font-size: var(--yazi-normal); font-weight: 600; } .kesimeHazirOzeti { margin-top: 2px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } .kesimeHazirKapatBtn { flex: 0 0 auto; width: 26px; height: 26px; border: none; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-ikincil); font-size: 18px; line-height: 1; cursor: pointer; } .kesimeHazirKapatBtn:hover { background: rgba(0, 0, 0, 0.08); color: var(--renk-yazi); } .kesimeHazirGovde { flex: 1 1 auto; padding: 8px 16px 16px; overflow-y: auto; } .kesimeHazirTemiz { margin: 14px 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.55; } .kesimeHazirGrup { margin: 16px 0 8px; font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .kesimeHazirGrup[data-seviye="hata"] { color: var(--renk-tehlike, #d64545); } .kesimeHazirGrup[data-seviye="uyari"] { color: var(--renk-uyari); } .kesimeHazirGrup[data-seviye="bilgi"] { color: var(--renk-yazi-soluk); } .kesimeHazirGrup:first-child { margin-top: 6px; } /* Her bulgu bir satır; soldaki ince şerit seviyeyi söylüyor. Göz listeyi tararken renge takılıyor. */ .kesimeHazirSatir { padding: 7px 10px; margin-bottom: 6px; border-left: 3px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); } .kesimeHazirSatir[data-seviye="hata"] { border-left-color: var(--renk-tehlike, #d64545); } .kesimeHazirSatir[data-seviye="uyari"] { border-left-color: var(--renk-uyari); } .kesimeHazirSatirBaslik { color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; } .kesimeHazirSatirAciklama { margin-top: 3px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); line-height: 1.5; } .kesimeHazirSatirKonum { margin-top: 3px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } .kesimeHazirAltCubuk { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--renk-kenarlik-acik); } .kesimeHazirBtn { height: var(--alan-yukseklik); padding: 0 12px; border: 1px solid var(--renk-ana-kenar); border-radius: var(--radius-kucuk); background: var(--renk-ana); color: #fff; font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; } .kesimeHazirBtn:hover:not(:disabled) { background: var(--renk-ana-hover); } .kesimeHazirBtn:disabled { border-color: var(--renk-kenarlik); background: var(--renk-alan-vurgu); color: var(--renk-yazi-soluk); cursor: default; } .kesimeHazirBtnIkincil { border-color: var(--renk-kenarlik); background: var(--renk-alan); color: var(--renk-yazi); } .kesimeHazirBtnIkincil:hover:not(:disabled) { background: var(--renk-alan-vurgu); } /* "Yine de üret" onayı. Üretim düğmesinin YANINDA duruyor ve kutuyu işaretlemeden düğme açılmıyor: kullanıcı hatayı sessizce geçemesin. */ .kesimeHazirZorla { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--renk-tehlike, #d64545); font-size: var(--yazi-mini); cursor: pointer; } .kesimeHazirZorla input { width: 14px; height: 14px; margin: 0; accent-color: var(--renk-tehlike, #d64545); cursor: pointer; } .kesimeHazirDurum { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } /* Çözüm satırı: açıklamadan bir tık öne çıksın ki gözü ilk oraya gitsin, çünkü yapılacak iş orada. */ .kesimeHazirSatirCozum { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--renk-basarili); font-weight: 600; } /* Bilgi grubu katlı geliyor (G7): başlık tıklanır. */ .kesimeHazirGrupKatli { cursor: pointer; user-select: none; } .kesimeHazirGrupKatli:hover { text-decoration: underline; } /* ===== css/bolumler/25-olcuFoyu.css ===== */ /* ================================================= ÖLÇÜ FÖYÜ PENCERESİ ================================================= Odadaki her dolabın cephesi ve her gözün ölçüsü. Çizimler beyaz zemine oturuyor — koyu temada bile. Föy kâğıda gidecek bir şey; ekranda da kâğıt gibi görünmesi doğrusu. */ .olcuFoyuKatmani { position: fixed; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.5); } .olcuFoyuPenceresi { display: flex; flex-direction: column; width: 100%; max-width: 760px; max-height: 100%; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-orta, 6px); background: var(--renk-alan); box-shadow: 0 20px 56px rgba(0, 0, 0, 0.4); overflow: hidden; } .olcuFoyuBaslikAlani { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--renk-kenarlik-acik); } .olcuFoyuBaslik { margin: 0; color: var(--renk-yazi); font-size: var(--yazi-normal); font-weight: 600; } .olcuFoyuOzeti { margin-top: 2px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } .olcuFoyuKapatBtn { flex: 0 0 auto; width: 26px; height: 26px; border: none; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-ikincil); font-size: 18px; line-height: 1; cursor: pointer; } .olcuFoyuKapatBtn:hover { background: var(--renk-alan-vurgu); color: var(--renk-yazi); } .olcuFoyuGovde { flex: 1 1 auto; padding: 16px; overflow-y: auto; } /* Her föy bir kâğıt. Beyaz zemin sabit: çizim kâğıda gidecek ve ekranda da öyle görünmeli. Koyu temada mavi ölçü çizgisi koyu zeminde okunmuyordu. */ .olcuFoyuKutusu { margin-bottom: 16px; padding: 10px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: #ffffff; } .olcuFoyuKutusu:last-child { margin-bottom: 0; } /* ------------------------------------------------- SOLDA GÖRSEL, SAĞDA ÇİZİM ------------------------------------------------- Kullanıcı örnek gönderdi (PttAVM ürün sayfası): solda ürünün görseli, sağda ölçülendirilmiş cephe. Görsel yoksa çizim bütün genişliği alıyor; yarısı boş kutu bırakmak resim yüklenmedi gibi görünürdü. */ .olcuFoyuSeridi { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; } /* TEKNIK CIZIM SERIDIN COGUNU ALIYOR (D170/4) Once 5fr / 7fr idi: seridin %41i 3B fotograf, cizime %57 kaliyordu. Denetleyen oturum olctu ve olcut %70 istedi. Fotograf musteriye "nasil gorunuyor" diyor; CIZIM "nasil kesilecek" diyor. Ikincisi atolyeye giden bilgi. ⚠️ AYNI ORAN IKI YERDE Yazdirma sayfasi kendi HTML'ini uretiyor ve orada ayni bolunme .serit sinifinda duruyor (olcuFoyuPenceresiOlustur.js). Biri degisip oteki kalirsa ekran ile kagit ayrisir; ikisi birlikte degistirildi. */ .olcuFoyuSeridi.gorselli { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); } /* Dar ekranda alt alta: iki sütun sıkışınca ölçü yazıları okunmaz oluyor. */ @media (max-width: 900px) { .olcuFoyuSeridi.gorselli { grid-template-columns: 1fr; } } .olcuFoyuGorseli img { display: block; width: 100%; height: auto; border-radius: var(--radius-kucuk); } .olcuFoyuKutusu svg { display: block; width: 100%; height: auto; } /* ------------------------------------------------- MALZEME KUTUSU ------------------------------------------------- Müşteri hangi renk diye soruyor; cevabı imzaladığı kâğıtta yazmalı. */ .olcuFoyuMalzemeleri { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e2ded6; } .olcuFoyuMalzeme { display: flex; align-items: baseline; gap: 6px; padding: 4px 9px; border-radius: var(--radius-kucuk); background: #f4f1ea; } .olcuFoyuMalzemeEtiketi { color: #6c6459; font-size: var(--yazi-mini); letter-spacing: 0.04em; text-transform: uppercase; } .olcuFoyuMalzemeAdi { color: #2f3742; font-size: var(--yazi-kucuk); font-weight: 600; } /* Çizim renkleri: föyün kendi dili. Seçiciler .olcuFoyuKutusu değil .dolapFoyu ile başlıyor: o sınıf SVG kökünün kendisinde. Föy çizimi artık köşe sihirbazında da gösteriliyor. Pencereye bağlı seçiciyle orada renksiz çıkardı — çizgiler görünmez, ölçüler okunmaz. */ /* Gövde koyu ve kalın, gözler ince, ölçüler mavi — 3B'deki ölçü çizgileriyle aynı mavi. */ .dolapFoyu .foyGovde { fill: none; stroke: #2f3742; stroke-width: 2.5; } .dolapFoyu .foyGoz { fill: #f4f7fa; stroke: #8894a3; stroke-width: 1; } /* D132: raf da çiziliyor. Gövde çizgisinden ayırt edilebilsin diye dolu ve daha koyu; müşteri cephe çiziminde rafı görmeli. */ .dolapFoyu .foyRaf { fill: #d7dee7; stroke: #5b6675; stroke-width: 1; } .dolapFoyu .foyGozOlcusu { fill: #2f3742; font-family: system-ui, sans-serif; font-size: 16px; } .dolapFoyu .foyOlcu line { stroke: #2973d6; stroke-width: 1; } .dolapFoyu .foyOlcu text { fill: #2973d6; font-family: system-ui, sans-serif; font-size: 14px; } .dolapFoyu .foyBaslik { fill: #1b2027; font-family: system-ui, sans-serif; font-size: 20px; font-weight: 600; } .dolapFoyu .foyAltBaslik { fill: #66707d; font-family: system-ui, sans-serif; font-size: 13px; } .olcuFoyuBos { margin: 12px 0; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); line-height: 1.55; } .olcuFoyuAltCubuk { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--renk-kenarlik-acik); } .olcuFoyuBtn { height: var(--alan-yukseklik); padding: 0 12px; border: 1px solid var(--renk-ana-kenar); border-radius: var(--radius-kucuk); background: var(--renk-ana); color: #fff; font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; } .olcuFoyuBtn:hover:not(:disabled) { background: var(--renk-ana-hover); } .olcuFoyuBtn:disabled { border-color: var(--renk-kenarlik); background: var(--renk-alan-vurgu); color: var(--renk-yazi-soluk); cursor: default; } .olcuFoyuDurum { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } /* ------------------------------------------------- TAMAMLAYICI PARÇA LİSTESİ (D169) ------------------------------------------------- Tezgâh ve süpürgelik bir dolabın gövdesi değil, sıranın parçası: kot çizimi yerine ölçü listesi duruyor. Denetleyen oturum ölçtü: "Föyde yalnız gövde ölçüleri var; süpürgelik satırı yok." Müşteri imzaladığı kâğıtta aldığı her parçayı görmeli. */ .olcuFoyuParcaListesi { display: flex; flex-direction: column; gap: 6px; width: 100%; } .olcuFoyuParcaSatiri { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 5px; border-bottom: 1px solid var(--renk-kenarlik); font-size: var(--yazi-kucuk); } .olcuFoyuParcaAdi { color: var(--renk-yazi); } .olcuFoyuParcaOlcusu { color: var(--renk-yazi-ikincil); white-space: nowrap; } /* ------------------------------------------------ ÜST GÖRÜNÜŞTEKİ OYUK (D191) ------------------------------------------------ Kolona oyulmuş dolabın planındaki boşluk. Dolu gövdeden ayırt edilsin diye taralı ve soluk; müşteri "burası kesik" diye görüyor. */ .dolapFoyu .foyOyuk { fill: #eef1f5; stroke: #98a3b2; stroke-width: 1; stroke-dasharray: 6 4; } .dolapFoyu .foyOyukAdi { fill: #66707d; font-family: system-ui, sans-serif; font-size: 13px; } /* Çizimin yanındaki ek parça listesi: kertmenin doğurduğu kapatma parçaları. */ .olcuFoyuEkParcalar { margin-top: 8px; } /* İZOMETRİK FÖY (A2) — kutu yüzleri beyaz dolgu + ince çizgi; ressam sırası gizli çizgiyi örtüyor. Askı borusu açık gri. */ .dolapFoyu .foyYuz { fill: #ffffff; stroke: #2f3742; stroke-width: 1.2; stroke-linejoin: round; } .dolapFoyu .foyBoru { fill: #d9dde3; stroke: #2f3742; stroke-width: 1; } .dolapFoyu .foyDerinlik text { dominant-baseline: auto; } /* ===== css/bolumler/26-kazima.css ===== */ /* ============================================================ KAZIMA ÖNİZLEMESİ ============================================================ Harf yüksekliği 8 mm mi 12 mi — rakam olarak sorulunca kimse bilemiyor. Yanlış seçen adam yanlışı ancak parça tezgâhtan indikten sonra görüyor. Bu yüzden ayar değiştikçe yazının gerçek hâli hemen altta çiziliyor. NEDEN LEVHA RENGİ Önizlemeyi programın kendi arka planına çizince yazı ekranda net görünüyordu ama parçada öyle değil: ham suntanın rengi krem, kazınan iz koyu. Önizlemenin zemini levhanın rengi, çizgi kazınan izin rengi. Ekranda gördüğü şey parçadan çıkacak şeye benzesin. */ .kazimaOnizleme { display: flex; align-items: center; justify-content: flex-start; min-height: 86px; padding: 12px 14px; border-radius: var(--radius-kucuk); /* Ham suntalam rengi. */ background: #efe6d6; /* Kazınan izin rengi: V uç suntanın gövdesini açığa çıkarıyor, iz gövdeden koyu. */ color: #4a3820; overflow: hidden; } .kazimaOnizlemeSvg { width: 100%; max-height: 120px; } .kazimaOnizlemeOlcu { margin-top: 7px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } /* Koyu temada levha rengi değişmiyor: parça değişmiyor. Yalnız kenarlık biraz belirginleşiyor ki krem alan boşlukta yüzmesin. */ @media (prefers-color-scheme: dark) { .kazimaOnizleme { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); } } /* ============================================================ SHAKER ÖNİZLEMESİ ============================================================ Çerçeve 60 mm mi 80 mm mi — rakam olarak sorulunca kimse bilemiyor. Gözle bakılacak bir şey: kapağın oranı değişiyor. Kazıma önizlemesiyle aynı dosyada duruyorlar çünkü ikisi de aynı soruyu cevaplıyor: "parçada bu nasıl görünecek". */ /* Kapağın kendisi: boyalı MDF. */ /* Frezelenen alan çukurda kalıyor; gölgeli duruyor. Kesik çizgi değil DOLU: çukur bir alan, bir hat değil. */ /* ===== css/bolumler/27-kisayolYardimi.css ===== */ /* ============================================================ KLAVYE KISAYOLLARI PENCERESİ ============================================================ Tek tuşla açılıp tek tuşla kapanan bir liste. Tasarım kararı: tuşlar SOLDA ve gerçek tuş gibi duruyor. Metin solda, tuş sağda olan listelerde göz her satırda soldan sağa gidip geri dönüyor; tuşu arayan adam tuşları alt alta tarayabilmeli. */ .kisayolYardimiKatmani { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 18, 22, 0.55); backdrop-filter: blur(2px); } .kisayolYardimiPenceresi { display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(78vh, 720px); border-radius: var(--radius-orta, 10px); background: var(--renk-panel); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32); overflow: hidden; } .kisayolYardimiBaslikAlani { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--renk-kenarlik-acik, #e3e6ea); background: var(--renk-alan-vurgu, #f5f7f9); } .kisayolYardimiBaslik { color: var(--renk-yazi, #1d2228); font-size: var(--yazi-normal); font-weight: 600; } .kisayolYardimiKapat { border: none; background: transparent; color: var(--renk-yazi-ikincil, #6b7480); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 6px; } .kisayolYardimiKapat:hover { background: var(--renk-alan, #eef1f4); color: var(--renk-yazi, #1d2228); } .kisayolYardimiGovde { padding: 10px 18px 16px; overflow-y: auto; } .kisayolYardimiGrup { margin: 14px 0 6px; color: var(--renk-yazi-ikincil, #6b7480); font-size: var(--yazi-mini, 11px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .kisayolYardimiGrup:first-child { margin-top: 6px; } .kisayolYardimiSatir { display: grid; /* "Ctrl + Y veya Ctrl + Shift + Z" 168'e sığmayıp alt satıra düşüyordu; ekranda görünce genişlettim. */ grid-template-columns: 204px 1fr; gap: 14px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--renk-kenarlik-acik, #eef1f4); } .kisayolYardimiSatir:last-child { border-bottom: none; } /* Çalışamayan kısayol soluk: basıp bir şey olmayınca kullanıcı kısayolun bozuk olduğunu sanıyor. */ .kisayolYardimiSatir.uygunDegil { opacity: 0.5; } .kisayolYardimiTuslar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* Gerçek tuş gibi: hafif kabartma ve alt gölge. */ .kisayolYardimiTus { display: inline-block; padding: 3px 8px; border: 1px solid var(--renk-kenarlik, #ccd2d9); border-bottom-width: 2px; border-radius: 5px; background: var(--renk-girdi-zemin); color: var(--renk-yazi, #1d2228); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: nowrap; } .kisayolYardimiAyirac { color: var(--renk-yazi-ikincil, #6b7480); font-size: var(--yazi-mini, 11px); } .kisayolYardimiAd { color: var(--renk-yazi, #1d2228); font-size: var(--yazi-kucuk, 13px); } .kisayolYardimiAciklama { margin-top: 2px; color: var(--renk-yazi-ikincil, #6b7480); font-size: var(--yazi-mini, 11px); line-height: 1.5; } .kisayolYardimiSebep { margin-top: 3px; color: var(--renk-uyari, #b06a12); font-size: var(--yazi-mini, 11px); } .kisayolYardimiBos { padding: 24px 0; color: var(--renk-yazi-ikincil, #6b7480); text-align: center; } .kisayolYardimiAltNot { padding: 10px 18px 14px; border-top: 1px solid var(--renk-kenarlik-acik, #e3e6ea); background: var(--renk-alan, #f7f9fa); color: var(--renk-yazi-ikincil, #6b7480); font-size: var(--yazi-mini, 11px); line-height: 1.55; } @media (prefers-color-scheme: dark) { .kisayolYardimiKatmani { background: rgba(0, 0, 0, 0.62); } } /* ===== css/bolumler/29-koseSihirbazi.css ===== */ /* ============================================================ KÖŞE SİHİRBAZI ============================================================ Solda sorular, sağda üstten görünüş. Köşe dolabı yanlış kurulduğunda hata montajda çıkıyor — o aşamada levha bitmiş oluyor. Kullanıcı çizime bakıp "evet, benim köşem böyle" diyebilmeli; o yüzden çizim soruların yanında, altında değil. */ .koseSihirbaziKatmani { position: fixed; inset: 0; z-index: 1360; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 18, 22, 0.55); } .koseSihirbaziPenceresi { display: flex; flex-direction: column; width: min(900px, 100%); max-height: min(84vh, 780px); border-radius: var(--radius-orta, 10px); background: var(--renk-panel); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32); overflow: hidden; } .koseSihirbaziBaslikAlani { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--renk-kenarlik-acik, #e3e6ea); background: var(--renk-alan-vurgu, #f5f7f9); } .koseSihirbaziBaslik { color: var(--renk-yazi, #1d2228); font-size: var(--yazi-normal); font-weight: 600; } .koseSihirbaziAdimYazisi { margin-top: 3px; color: var(--renk-yazi-ikincil, #6b7480); font-size: var(--yazi-mini, 11px); } .koseSihirbaziKapat { border: none; background: transparent; color: var(--renk-yazi-ikincil, #6b7480); font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 6px; cursor: pointer; } .koseSihirbaziKapat:hover { background: var(--renk-alan, #eef1f4); } .koseSihirbaziGovde { display: grid; grid-template-columns: 1fr 320px; flex: 1; min-height: 0; } .koseSihirbaziSoru { padding: 16px 18px; overflow-y: auto; } .koseSihirbaziOnizleme { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-left: 1px solid var(--renk-kenarlik-acik, #e3e6ea); background: var(--renk-alan, #f8fafb); overflow-y: auto; } /* ------------------------------------------------- SORU BAŞLIĞI ------------------------------------------------- */ .koseSihirbaziSoruBasligi { margin-bottom: 12px; } .koseSihirbaziSoruMetni { color: var(--renk-yazi, #1d2228); font-size: var(--yazi-normal); font-weight: 600; } .koseSihirbaziSoruNotu { margin-top: 3px; color: var(--renk-yazi-ikincil, #6b7480); font-size: var(--yazi-mini, 11px); line-height: 1.55; } /* ------------------------------------------------- ÇÖZÜM KARTLARI ------------------------------------------------- Artı ve eksi yan yana değil ALT ALTA: kullanıcı üç kartı da okuyup karşılaştırıyor, göz aşağı iniyor. */ .koseSihirbaziKart { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-bottom: 9px; padding: 11px 13px; border: 1px solid var(--renk-kenarlik, #ccd2d9); border-radius: var(--radius-kucuk, 7px); background: var(--renk-panel); text-align: left; cursor: pointer; } .koseSihirbaziKart:hover { border-color: var(--renk-ana, #2f6fd0); } .koseSihirbaziKart.secili { border-color: var(--renk-ana, #2f6fd0); box-shadow: inset 0 0 0 1px var(--renk-ana, #2f6fd0); background: var(--renk-ana-acik, #eef4fd); } .koseSihirbaziKartAd { color: var(--renk-yazi, #1d2228); font-size: var(--yazi-kucuk, 13px); font-weight: 600; } .koseSihirbaziKartOzet { color: var(--renk-yazi-ikincil, #6b7480); font-size: var(--yazi-mini, 11px); line-height: 1.55; } .koseSihirbaziKartArti { margin-top: 4px; color: var(--renk-basarili); font-size: var(--yazi-mini, 11px); } .koseSihirbaziKartEksi { color: var(--renk-uyari, #9a6a12); font-size: var(--yazi-mini, 11px); } /* ------------------------------------------------- KÖŞE YÖNÜ ------------------------------------------------- İki sütun: odanın dört köşesi zaten iki iki duruyor. */ .koseSihirbaziYonIzgarasi { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .koseSihirbaziYon { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border: 1px solid var(--renk-kenarlik, #ccd2d9); border-radius: var(--radius-kucuk, 7px); background: var(--renk-panel); text-align: left; cursor: pointer; } .koseSihirbaziYon:hover { border-color: var(--renk-ana, #2f6fd0); } .koseSihirbaziYon.secili { border-color: var(--renk-ana, #2f6fd0); background: var(--renk-ana-acik, #eef4fd); } .koseSihirbaziYonAd { color: var(--renk-yazi, #1d2228); font-size: var(--yazi-kucuk, 13px); font-weight: 600; } .koseSihirbaziYonNot { color: var(--renk-yazi-ikincil, #6b7480); font-size: var(--yazi-mini, 11px); line-height: 1.5; } /* ------------------------------------------------- ÖLÇÜ SATIRLARI ------------------------------------------------- */ .koseSihirbaziOlcuSatiri { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--renk-kenarlik-acik, #eef1f4); } .koseSihirbaziOlcuMetni { display: flex; flex-direction: column; gap: 2px; } .koseSihirbaziOlcuAdi { color: var(--renk-yazi, #1d2228); font-size: var(--yazi-kucuk, 13px); } .koseSihirbaziOlcuNotu { color: var(--renk-yazi-ikincil, #6b7480); font-size: var(--yazi-mini, 11px); line-height: 1.5; } .koseSihirbaziOlcuGirisi { width: 84px; flex: none; padding: 5px 7px; border: 1px solid var(--renk-kenarlik, #ccd2d9); border-radius: 5px; background: var(--renk-girdi-zemin); color: var(--renk-yazi, #1d2228); font-size: var(--yazi-kucuk, 13px); font-variant-numeric: tabular-nums; text-align: right; } /* ------------------------------------------------- ÜSTTEN GÖRÜNÜŞ ------------------------------------------------- Üç çözümün ayrımı ancak üstten bakınca anlaşılıyor. */ .koseSihirbaziCizim { display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: var(--radius-kucuk, 7px); background: var(--renk-panel); } .koseSihirbaziSvg { width: 100%; max-height: 220px; } .koseSihirbaziGovdeCizim { fill: #e3ecf7; stroke: var(--renk-ana, #2f6fd0); stroke-width: 14; stroke-linejoin: round; } .koseSihirbaziOzet { color: var(--renk-yazi, #1d2228); font-size: var(--yazi-kucuk, 13px); font-weight: 600; } .koseSihirbaziBilgi { color: var(--renk-yazi-ikincil, #6b7480); font-size: var(--yazi-mini, 11px); line-height: 1.6; } .koseSihirbaziUyari { padding: 9px 11px; border-radius: var(--radius-kucuk, 7px); background: var(--renk-uyari-acik); color: var(--renk-uyari, #9a6a12); font-size: var(--yazi-mini, 11px); line-height: 1.6; } /* ------------------------------------------------- ALT ŞERİT ------------------------------------------------- */ .koseSihirbaziAltSerit { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--renk-kenarlik-acik, #e3e6ea); background: var(--renk-alan, #f7f9fa); } .koseSihirbaziGeri, .koseSihirbaziIleri { padding: 7px 16px; border-radius: 6px; font-size: var(--yazi-kucuk, 13px); cursor: pointer; } .koseSihirbaziGeri { border: 1px solid var(--renk-kenarlik, #ccd2d9); background: var(--renk-panel); color: var(--renk-yazi, #1d2228); } .koseSihirbaziIleri { border: 1px solid var(--renk-ana, #2f6fd0); background: var(--renk-ana, #2f6fd0); color: #ffffff; font-weight: 600; } /* Çalışmayan düğmenin çalışıyor görünmesi "bastım da bir şey olmadı" sorusunu doğuruyor. */ .koseSihirbaziGeri.pasif, .koseSihirbaziIleri.pasif { opacity: 0.4; cursor: default; } @media (prefers-color-scheme: dark) { .koseSihirbaziKatmani { background: rgba(0, 0, 0, 0.62); } } /* ------------------------------------------------- CEPHE GÖRÜNÜŞÜ ------------------------------------------------- Kullanıcı istedi: sihirbazda oluşan dolabın görseli çıksın. Üstten görünüş köşenin ŞEKLİNİ anlatıyor; cephe yüksekliği ve göz ölçüsünü. İkisi alt alta. Çizimi ölçü föyü motoru üretiyor: föyde ne görülecekse burada da o görünsün. */ .koseSihirbaziCephesi { margin-top: 10px; padding: 10px; border-radius: var(--radius-kucuk); background: #ffffff; } .koseSihirbaziCephesi svg { display: block; width: 100%; max-height: 260px; } /* ===== css/bolumler/31-koli.css ===== */ /* ============================================================ KOLİ VE KARGO PENCERESİ ============================================================ Koli koli kartlar; her kartın üstünde ölçü, altında içindekiler. Tezgâh penceresiyle aynı iskelet: kullanıcı iki pencereyi de aynı yerden açıyor, farklı görünmeleri için sebep yok. */ .koliKatmani { position: fixed; inset: 0; z-index: 1380; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 18, 22, 0.55); } .koliPenceresi { display: flex; flex-direction: column; width: min(820px, 100%); max-height: min(86vh, 800px); border-radius: var(--radius-orta); background: var(--renk-panel); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32); overflow: hidden; } .koliBaslikAlani { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); } .koliBaslik { color: var(--renk-yazi); font-size: var(--yazi-normal); font-weight: 600; } /* Özet başlıkta duruyor: kullanıcı pencereyi açar açmaz kaç koli çıktığını görmeli, aşağı kaydırmadan. */ .koliOzet { margin-top: 3px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } .koliKapat { border: none; background: transparent; color: var(--renk-yazi-ikincil); font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 6px; cursor: pointer; } .koliKapat:hover { background: var(--renk-alan); } .koliGovde { flex: 1; min-height: 0; padding: 16px 18px; overflow-y: auto; } /* Paketleme yöntemi: ölçülerin nereden çıktığını söylüyor. */ .koliYontem { margin-bottom: 14px; padding: 10px 12px; border-left: 3px solid var(--renk-ana); border-radius: 0 var(--radius-kucuk) var(--radius-kucuk) 0; background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); line-height: 1.6; } .koliUyari { margin-bottom: 10px; padding: 10px 12px; border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-kucuk); line-height: 1.6; } .koliBos { padding: 40px 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); text-align: center; } /* ------------------------------------------------- KOLİ KARTI ------------------------------------------------- */ .koliKart { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); } /* Sınırı aşan koli şubeden geri dönüyor; kart kırmızı kenarla ayrılıyor. */ .koliKart.asimli { border-color: var(--renk-uyari); background: var(--renk-uyari-acik); } .koliKartUst { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .koliKartAd { color: var(--renk-yazi); font-size: var(--yazi-kucuk); font-weight: 600; } .koliKartOlcu { color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; } /* ------------------------------------------------- SAYI ŞERİDİ ------------------------------------------------- Kilo, desi ve hangisinden ücretlendirileceği. Üçü yan yana: kullanıcı karşılaştırıyor. */ .koliSerit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; } .koliSayiKutusu { padding: 8px 10px; border-radius: var(--radius-kucuk); background: var(--renk-alan); } .koliSayiEtiketi { color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); letter-spacing: 0.04em; text-transform: uppercase; } .koliSayiDegeri { margin-top: 2px; color: var(--renk-yazi); font-size: var(--yazi-normal); font-weight: 600; font-variant-numeric: tabular-nums; } .koliSayiNotu { margin-top: 3px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); line-height: 1.45; } .koliSayiNotu:empty { display: none; } /* ------------------------------------------------- İÇİNDEKİLER ------------------------------------------------- */ .koliParcalar { border-top: 1px solid var(--renk-kenarlik-acik); } .koliParca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--renk-kenarlik-acik); } .koliParca:last-child { border-bottom: none; } /* KUTUYA GIREN DONANIM (K3) Panelle ayni gorunuyor ama ayri sinif: bir olcum ikisini birden saymasin diye. */ .koliDonanimSatiri { display: block; padding: 5px 0; border-bottom: 1px solid var(--renk-kenarlik-acik); } .koliDonanimSatiri:last-child { border-bottom: none; } /* Agirligi bilinmeyen kalem varsa soylenen not. */ .koliNot { padding: 4px 0 8px; color: var(--renk-yazi-soluk); font-size: 12px; } .koliParcaAd { color: var(--renk-yazi); font-size: var(--yazi-kucuk); } /* Boyalı yüz: paketleyen araya köpük koymalı. */ .koliParca.gorunen .koliParcaAd::before { content: "◆ "; color: var(--renk-ana); } .koliParcaOlcu { color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; white-space: nowrap; } .koliNot { margin-top: 8px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); line-height: 1.55; } /* ===== css/bolumler/32-mesajKutusu.css ===== */ /* ================================================= 32. MESAJ VE ONAY KUTUSU ================================================= Tarayıcının `alert` ve `confirm` kutularının yerine geçen kendi kutumuz. Yeni Proje penceresinin düzenini izliyor; programda iki farklı kutu görüntüsü olmasın. z-index kodda veriliyor (9000 + sıra): mesaj kutusu her zaman pencerelerin ÜSTÜNDE durmalı, çünkü çoğu zaman bir pencerenin içinden çağrılıyor. */ .mesajKutusuKatmani { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(27, 35, 48, 0.34); animation: katmanGiris 0.12s linear; } .mesajKutusu { width: min(100%, 380px); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); } /* ------------------------------------------------- BAŞLIK ------------------------------------------------- */ .mesajKutusuBaslikSatiri { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik-acik); } .mesajKutusuBaslik { margin: 0; color: var(--renk-yazi); font-size: var(--yazi-normal); font-weight: 600; } /* Kutunun türü başlığın rengiyle belli oluyor; ayrı bir ikon koymuyoruz. */ .mesajKutusuHata .mesajKutusuBaslik { color: var(--renk-tehlike); } .mesajKutusuUyari .mesajKutusuBaslik { color: var(--renk-uyari); } .mesajKutusuKapatBtn { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-soluk); font-size: var(--yazi-normal); line-height: 1; cursor: pointer; } .mesajKutusuKapatBtn:hover { border-color: var(--renk-kenarlik); color: var(--renk-yazi); } /* ------------------------------------------------- METİN ------------------------------------------------- */ .mesajKutusuMetin { padding: 12px; overflow-y: auto; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); line-height: 1.5; } .mesajKutusuMetin p { margin: 0 0 6px; } .mesajKutusuMetin p:last-child { margin-bottom: 0; } /* ------------------------------------------------- DÜĞMELER ------------------------------------------------- */ .mesajKutusuDugmeAlani { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 12px; border-top: 1px solid var(--renk-kenarlik-acik); } .mesajKutusuBirincilBtn, .mesajKutusuIkincilBtn { min-width: 84px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: var(--radius-kucuk); font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; transition: background 0.1s linear, border-color 0.1s linear; } .mesajKutusuBirincilBtn { border: 1px solid var(--renk-ana-hover); background: linear-gradient( 180deg, #2e74e0, var(--renk-ana) ); color: #ffffff; } .mesajKutusuBirincilBtn:hover { background: linear-gradient( 180deg, var(--renk-ana), var(--renk-ana-hover) ); } /* Silme gibi geri dönüşü olmayan işler kırmızı düğmeyle soruluyor; kullanıcı ne onayladığını renkten de anlasın. */ .mesajKutusuTehlikeliBtn { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike); color: #ffffff; } .mesajKutusuTehlikeliBtn:hover { background: var(--renk-tehlike-hover); } .mesajKutusuIkincilBtn { border: 1px solid var(--renk-kenarlik); background: var(--renk-alan); color: var(--renk-yazi); } .mesajKutusuIkincilBtn:hover { background: var(--renk-alan-vurgu); } /* ===== css/bolumler/33-donanimKartlari.css ===== */ /* ================================================= DONANIM KARTLARI ================================================= Eski "Donanım Kataloğu"nun yerine: solda ürün listesi, sağda seçili ürünün kartı. Temel katman, pencere, başlık ve rozet sınıfları 21-donanimKatalogu.css'ten geliyor; burada yalnız iki sütunlu düzen ve kaynak renkleri var. KAYNAK RENGİ BİLGİDİR Föy / CAD / kumpas: yeşil. Devralınmış ya da yazılmamış: kırmızı. 4.5 · 5.3'teki "310'un sayısını devraldı" hatası bir daha görünmeden geçmesin. */ .donanimKartlariPenceresi { width: min(1180px, 96vw); height: min(860px, 92vh); } .donanimKartlariGovde { display: grid; grid-template-columns: 300px 1fr; gap: 0; height: calc(100% - 92px); min-height: 0; } .donanimKartlariListe { overflow: auto; border-right: 1px solid var(--renk-kenar, #2a3442); padding: 8px 6px 12px; } .donanimKartlariSuzgec { display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px; font-size: 12px; color: var(--renk-yazi-soluk, #94a3b8); } .donanimKartlariGrup { margin: 10px 8px 4px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--renk-yazi-soluk, #94a3b8); } .donanimKartlariSatir { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "ad rozet" "alt rozet"; gap: 2px 8px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; } .donanimKartlariSatir:hover { background: var(--renk-zemin-hover, rgba(255, 255, 255, 0.04)); } .donanimKartlariSatir.secili { background: var(--renk-ana-acik, #1a2c45); border-color: var(--renk-ana-kenar, #37628f); } .donanimKartlariSatirAd { grid-area: ad; font-weight: 600; font-size: 13px; line-height: 1.25; } .donanimKartlariSatirAlt { grid-area: alt; font-size: 11px; color: var(--renk-yazi-soluk, #94a3b8); } .donanimKartlariRozet { grid-area: rozet; align-self: center; font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .donanimKartlariRozet.hazir, .donanimKartlariRozet.durum-aktif { background: var(--renk-basarili-acik, #14301f); color: var(--renk-basarili, #56d98a); border: 1px solid var(--renk-basarili-kenar, #2c6444); } .donanimKartlariRozet.eksik, .donanimKartlariRozet.durum-planlanan { background: var(--renk-uyari-acik, #33280e); color: var(--renk-uyari, #f0b44a); border: 1px solid var(--renk-uyari-kenar, #6f5620); } .donanimKartlariRozet.durum-pasif, .donanimKartlariRozet.notr, .donanimKartlariRozet.marka, .donanimKartlariRozet.kategori { background: transparent; color: var(--renk-yazi-soluk, #94a3b8); border: 1px solid var(--renk-kenar, #2a3442); } .donanimKartlariKart { overflow: auto; padding: 16px 20px 28px; } .donanimKartlariKimlik { margin-bottom: 8px; } .donanimKartlariAd { margin: 0 0 8px; font-size: 18px; } .donanimKartlariRozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .donanimKartlariKodSatiri { display: flex; align-items: center; gap: 12px; font-size: 13px; } .donanimKartlariLink { color: var(--renk-ana-yazi, #6fb0fa); } .donanimKartlariSeri { color: var(--renk-yazi-soluk, #94a3b8); } .donanimKartlariBolum { margin-top: 14px; } .donanimKartlariBolumBasligi { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--renk-yazi-soluk, #94a3b8); } .donanimKartlariOnizleme { width: 320px; height: 220px; border-radius: 8px; background: var(--renk-zemin-koyu, rgba(0, 0, 0, 0.18)); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 8px; } .donanimKartlariOnizleme.bos { color: var(--renk-yazi-soluk, #94a3b8); font-size: 12px; } .donanimKartlariModelDurum { font-size: 12px; color: var(--renk-yazi-soluk, #94a3b8); margin-bottom: 8px; word-break: break-all; } .donanimKartlariTablo { width: 100%; border-collapse: collapse; font-size: 13px; } .donanimKartlariTablo td, .donanimKartlariTablo th { padding: 6px 8px; border-bottom: 1px solid var(--renk-kenar, #2a3442); text-align: left; vertical-align: top; } .donanimKartlariTablo.foy td, .donanimKartlariTablo.foy th { text-align: right; font-variant-numeric: tabular-nums; } .donanimKartlariTablo.foy td:first-child, .donanimKartlariTablo.foy th:first-child { text-align: left; } .donanimKartlariOlcu .deger { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; } .donanimKartlariOlcu .kaynak { font-size: 12px; white-space: nowrap; } .donanimKartlariOlcu .not { font-size: 12px; color: var(--renk-yazi-soluk, #94a3b8); } .kaynak-foy, .kaynak-cad, .kaynak-kumpas { color: var(--renk-basarili, #56d98a); } .kaynak-katalog { color: var(--renk-yazi-soluk, #94a3b8); } .kaynak-devralindi, .kaynak-yok, .donanimKartlariOlcu.guvenilmez .deger { color: var(--renk-tehlike, #f4756f); } .donanimKartlariEksikler { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; } .donanimKartlariHazir { margin: 0; font-size: 13px; color: var(--renk-basarili, #56d98a); } .donanimKartlariKullanim, .donanimKartlariFiyat { margin: 0 0 4px; font-size: 13px; } .donanimKartlariBos { padding: 24px; font-size: 13px; color: var(--renk-yazi-soluk, #94a3b8); } /* ------------------------------------------------------------ STOK SATIRI (D1b) ------------------------------------------------------------ */ .donanimKartlariStokSatiri { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; } .donanimKartlariStokSatiri.yok .donanimKartlariStok { color: var(--renk-yazi-soluk, #94a3b8); } .donanimKartlariStokSatiri.borclu .donanimKartlariStok { color: var(--renk-uyari-yazi, #e0a04a); font-weight: 600; } .donanimKartlariStokGirisi { width: 72px; height: 26px; padding: 0 6px; border: 1px solid var(--renk-kenarlik, #3b4453); border-radius: 6px; background: var(--renk-alan, transparent); color: inherit; font: inherit; } .donanimKartlariStokBtn { height: 26px; padding: 0 10px; border: 1px solid var(--renk-kenarlik, #3b4453); border-radius: 6px; background: transparent; color: inherit; font-size: 12px; cursor: pointer; } /* ------------------------------------------------------------ DELİK İÇE AKTARMA PANELİ (B3) ------------------------------------------------------------ */ .delikIceAktarPaneli { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--renk-kenarlik, #3b4453); border-radius: 8px; font-size: 13px; } .delikIceAktarUst, .delikIceAktarAlt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .delikIceAktarAlt { margin-top: 8px; } .delikIceAktarBaslik { font-weight: 600; } .delikIceAktarKaynak, .delikIceAktarNot, .delikIceAktarGiris { height: 26px; padding: 0 6px; border: 1px solid var(--renk-kenarlik, #3b4453); border-radius: 6px; background: var(--renk-alan, transparent); color: inherit; font: inherit; } .delikIceAktarNot { flex: 1 1 220px; } .delikIceAktarGiris { width: 84px; } .delikIceAktarOkuBtn, .delikIceAktarKaydetBtn { height: 26px; padding: 0 10px; border: 1px solid var(--renk-kenarlik, #3b4453); border-radius: 6px; background: transparent; color: inherit; font-size: 12px; cursor: pointer; } .delikIceAktarKaydetBtn { border-color: var(--renk-ana-kenar, #4b7fd6); background: var(--renk-ana, #2f63c4); color: #fff; } .delikIceAktarDurum { color: var(--renk-yazi-soluk, #94a3b8); } .delikIceAktarTablo { margin-top: 8px; } .delikIceAktarSatiri.farkli td { color: var(--renk-uyari-yazi, #e0a04a); } .delikIceAktarSatiri.ayni td { color: var(--renk-yazi-soluk, #94a3b8); } /* ===== css/bolumler/34-teklif.css ===== */ /* ============================================================ 34 · TEKLİF PENCERESİ (C1) ============================================================ İskelet ölçü föyü sınıflarından (25-olcuFoyu.css); burada yalnız teklife özgü parçalar: şartlar formu, uyarı listesi, kâğıt önizlemesi. */ .teklifUyarilari { margin: 0 0 12px; padding: 10px 14px 10px 28px; border: 1px solid var(--renk-uyari-kenar, #d9a441); border-radius: var(--radius-kucuk); background: var(--renk-uyari-zemin, #fff7e6); color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .teklifUyarilari li { margin: 2px 0; } .teklifSartlari { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 14px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); } .teklifSartAlani { display: flex; flex-direction: column; gap: 4px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-soluk); } .teklifSartAlani:nth-child(n+3) { grid-column: 1 / -1; } .teklifSartGirdisi { height: var(--alan-yukseklik); padding: 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font: inherit; } /* Kâğıt önizlemesi: ekranda da beyaz kâğıt, koyu temada bile; müşteriye giden belge tema değiştirmez. */ .teklifOnizleme { padding: 18px 22px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: #fff; color: #1b2027; } .teklifOnizleme .sayfa { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed #c9c3b8; } .teklifOnizleme .sayfa:last-child { border-bottom: none; } .teklifUyariDahaBtn { margin-top: 6px; padding: 4px 10px; border: 1px solid var(--renk-uyari-kenar, #d9a441); border-radius: var(--radius-kucuk); background: transparent; color: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } /* ===== css/bolumler/35-siparis.css ===== */ /* ============================================================ 35 · SİPARİŞ LİSTESİ (stok penceresi sekmesi, D2) ============================================================ */ .siparisUstCubuk { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--renk-kenarlik-acik); font-size: var(--yazi-kucuk); } .siparisSuzgec { display: flex; align-items: center; gap: 6px; color: var(--renk-yazi); } .siparisDurum { color: var(--renk-yazi-soluk); } .siparisGovde { padding: 12px 16px; overflow-y: auto; } .siparisTablo h3 { margin: 10px 0 6px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-soluk); text-transform: uppercase; letter-spacing: 0.04em; } .siparisTablosu { width: 100%; border-collapse: collapse; font-size: var(--yazi-kucuk); } .siparisTablosu th, .siparisTablosu td { padding: 6px 8px; border-bottom: 1px solid var(--renk-kenarlik-acik); text-align: left; } .siparisTablosu th.sayi, .siparisTablosu td.sayi { text-align: right; white-space: nowrap; } .siparisSatiri.eksik td { font-weight: 600; } .siparisSatiri.eksik td:last-child { color: var(--renk-uyari-yazi, #b4541b); } /* ------------------------------------------------------------ DONANIM STOĞU · HAREKET GEÇMİŞİ (D1) ------------------------------------------------------------ */ .donanimStoguGecmisBtn { padding: 3px 8px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: transparent; color: var(--renk-yazi-soluk); font-size: var(--yazi-kucuk); cursor: pointer; } .donanimStoguGecmisBtn:hover { color: var(--renk-yazi); border-color: var(--renk-ana-kenar); } .donanimStoguGecmisi { flex-basis: 100%; margin-top: 4px; padding: 6px 10px; border-left: 2px solid var(--renk-kenarlik); font-size: var(--yazi-kucuk); color: var(--renk-yazi-soluk); } .donanimStoguHareketi[data-tur="uretim"] { color: var(--renk-uyari-yazi, #b4541b); } .donanimStoguHareketi[data-tur="giris"], .donanimStoguHareketi[data-tur="iade"] { color: var(--renk-basari-yazi, #2f7a3a); } /* ------------------------------------------------------------ UYARI SARI · BORÇ BÖLÜMÜ (29.09) ------------------------------------------------------------ Sipariş uyarıları stok penceresinin yeşil bilgi kutusunu miras alıyordu ("ağırlık uyarısı yeşil kutuda"). Uyarı rengi sarı; borç bölümü ayrı başlık + açıklama. */ .artikStoguUyarisi.siparisUyarisi[data-tur="uyari"] { border-bottom-color: var(--renk-uyari-kenar); background: var(--renk-uyari-acik); color: var(--renk-uyari); } .siparisUyariSatiri + .siparisUyariSatiri { margin-top: 3px; } .siparisTablosu th[title] { cursor: help; } .siparisBorcBolumu { margin-top: 14px; } .siparisBorcAciklamasi { margin: 0 0 6px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-soluk); } .siparisBorcSatiri td:nth-child(3) { color: var(--renk-uyari-yazi, #b4541b); font-weight: 600; } /* ===== css/bolumler/36-pencereDugmeleri.css ===== */ /* ================================================= PENCERE DÜĞMELERİ TEK STİL (kullanıcı 10.09, A13b) ================================================= Kullanıcı: "bu butonlara genel bir el atmak lazım, web sitesi gibi". Her pencere kendi *Btn sınıfını taşıyor (rafEklemeBirincilBtn, projeAyarlariKaydetBtn, nestingKapatBtn …) ve her biri ayrı ayrı biçimlenmişti. Burası adın SONUNA göre tek kural koyuyor ve EN SON yükleniyor ki pencerelerin kendi kuralları bunu ezmesin: …BirincilBtn · …KaydetBtn birincil (mavi) …IkincilBtn · …IptalBtn ikincil (yüzey) …KapatBtn köşedeki × (24 px, hayalet) Sağ panelin küçük × düğmesi (19 px) dışarıda: o pencere değil, panel başlığı. */ [class*="BirincilBtn"], [class*="KaydetBtn"], [class*="IkincilBtn"], [class*="IptalBtn"] { min-width: 84px; height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border-radius: var(--radius-kucuk); font-size: var(--yazi-kucuk); font-weight: 600; line-height: 1; cursor: pointer; transition: border-color 0.1s linear, background 0.1s linear, color 0.1s linear, opacity 0.1s linear; } [class*="BirincilBtn"], [class*="KaydetBtn"] { border: 1px solid var(--renk-ana-hover); background: linear-gradient(180deg, #2e74e0, var(--renk-ana)); color: #ffffff; } [class*="BirincilBtn"]:hover:not(:disabled), [class*="KaydetBtn"]:hover:not(:disabled) { background: linear-gradient(180deg, var(--renk-ana), var(--renk-ana-hover)); } [class*="IkincilBtn"], [class*="IptalBtn"] { border: 1px solid var(--renk-kenarlik); background: var(--buton-yuzey); color: var(--renk-yazi); } [class*="IkincilBtn"]:hover:not(:disabled), [class*="IptalBtn"]:hover:not(:disabled) { border-color: var(--renk-kenarlik-koyu); background: var(--buton-yuzey-hover); } [class*="BirincilBtn"]:disabled, [class*="KaydetBtn"]:disabled, [class*="IkincilBtn"]:disabled, [class*="IptalBtn"]:disabled { cursor: not-allowed; opacity: 0.5; } [class*="KapatBtn"]:not(.sagPanelKapatBtn) { width: 24px; height: 24px; min-width: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-ikincil); font-size: 17px; font-weight: 400; line-height: 1; cursor: pointer; transition: background 0.1s linear, color 0.1s linear; } [class*="KapatBtn"]:not(.sagPanelKapatBtn):hover { background: var(--renk-tehlike); color: #ffffff; } /* ===== css/bolumler/37-modelCizim.css ===== */ /* ============================================================ 2B ÇİZİM → 3B MODEL PENCERESİ (liste 3 madde 3) ============================================================ Pencere çerçevesi parcaEkleme sınıflarından geliyor; burada yalnız çizim düzeni. */ /* Donanım Kartları penceresinin (10600) içinden açılıyor; ortak katman sınıfı 10000'de kaldığı için arkada kalıyordu (gerçek sayfada ekran görüntüsü yakaladı). Mesaj kutusu kendini bütün z-index'lerin üstüne koyuyor, o yine önde. */ #modelCizimKatmani { z-index: 10700; } .modelCizimPenceresi { width: min(1040px, 96vw); max-width: 96vw; } .modelCizimGovde { display: grid; grid-template-columns: 130px minmax(0, 1fr) 300px; gap: 12px; padding: 12px 16px; align-items: start; } .modelCizimAraclari { display: flex; flex-direction: column; gap: 6px; } .modelCizimAracBtn, .modelCizimSilBtn, .donanimModelCiz { padding: 5px 8px; border: 1px solid rgba(120, 130, 145, 0.45); border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; text-align: left; } .modelCizimAracBtn:disabled { opacity: 0.45; cursor: default; } .modelCizimAracAktif { background: #2f6fdb; border-color: #2f6fdb; color: #fff; } .modelCizimAlani { min-width: 0; overflow: auto; } .modelCizimSvg { display: block; width: 100%; height: auto; background: rgba(127, 140, 160, 0.06); border: 1px solid rgba(120, 130, 145, 0.35); border-radius: 6px; cursor: crosshair; } .modelCizimIzgara { stroke: rgba(120, 130, 145, 0.18); stroke-width: 1; } .modelCizimDis { fill: rgba(47, 111, 219, 0.14); stroke: #2f6fdb; stroke-width: 2; } .modelCizimDelik { fill: rgba(255, 255, 255, 0.92); stroke: #c0392b; stroke-width: 1.5; } .modelCizimYeni { fill: none; stroke: #e67e22; stroke-width: 2; stroke-dasharray: 6 4; } .modelCizimOlculeri { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; } .modelCizimBolumBasligi { margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; } .modelCizimSatir { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; } .modelCizimAlan { display: flex; flex-direction: column; gap: 2px; font-size: 11px; } .modelCizimAlan .parcaEklemeInput { width: 64px; } .modelCizimDelikAdi { min-width: 28px; font-size: 12px; } .modelCizimNot { font-size: 11px; opacity: 0.65; } .modelCizimMesaj { padding: 0 16px; } @media (max-width: 860px) { .modelCizimGovde { grid-template-columns: 1fr; } } /* ===== css/bolumler/38-odaAcikliklari.css ===== */ /* ============================================================ KAPI / PENCERE / ZEMİN KAPLAMASI (liste 3 madde 6) ============================================================ */ .aciklikPenceresi { width: min(420px, 94vw); } .aciklikFormu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 0 18px; } .aciklikAlan { display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .aciklikNotu { padding: 8px 18px 0; font-size: 12px; opacity: 0.7; } .odaAciklikListesi { display: flex; flex-direction: column; gap: 6px; padding: 6px 12px 10px 17px; } .odaAciklikSatiri { display: flex; align-items: center; gap: 6px; font-size: 12px; } .odaAciklikAdi { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .odaAciklikDugmesi { padding: 3px 8px; border: 1px solid rgba(120, 130, 145, 0.45); border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 11px; cursor: pointer; } .odaAciklikBos { font-size: 12px; opacity: 0.65; } /* ===== css/bolumler/39-uretimAkisi.css ===== */ /* ============================================================ ÜRETİM AKIŞI (liste 3 madde 8) ============================================================ Sol panelde altı adım, dikey zaman çizgisi gibi: numara dairesi durumu renkle söylüyor, adımlar ince bir çizgiyle bağlı, sıradaki adım halkayla öne çıkıyor. */ .uretimAkisi { display: flex; flex-direction: column; padding: 6px 12px 16px 12px; } /* ============================================================ YERLEŞTİRME KISAYOLU (21.09) ============================================================ Kullanıcı: "çoğu zaman direkt yerleştirme tarafını arıyorum direkt". Üretim'e basan adam listeyi okumaya değil, levhaya yerleştirmeye geliyor; düğme en üstte, tam genişlikte ve tek birincil eylem. */ .uretimKisayolBtn { width: 100%; margin: 2px 0 10px; padding: 9px 12px; border: none; border-radius: 7px; background: var(--renk-ana); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; } .uretimKisayolBtn:hover { filter: brightness(1.06); } /* Liste katlıyken öteki işlere giden küçük kısayollar. */ .uretimKisayolSeridi { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; } .uretimKisayolKucuk { padding: 5px 9px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: transparent; color: var(--renk-ana-yazi); font-size: 11.5px; cursor: pointer; } .uretimKisayolKucuk:hover { background: var(--renk-alan-pasif); } /* Katlanan liste başlığı: günlük işte kapalı duruyor, uyarı varsa kaç tane olduğunu söylüyor. */ .uretimListeBasligi { width: 100%; padding: 6px 0; border: none; background: transparent; color: var(--renk-yazi-ikincil); font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; text-align: left; cursor: pointer; } .uretimListeBasligi:hover { color: var(--renk-ana-yazi); } .uretimListeBasligi.sorunlu { color: var(--renk-uyari, #b45309); } .uretimAkisiUst { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0 8px; font-size: 11.5px; color: var(--renk-yazi-ikincil); } .uretimAkisiIlerleme { flex: 1; height: 5px; border-radius: 5px; overflow: hidden; background: var(--renk-alan-pasif); } .uretimAkisiIlerleme > span { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--renk-basarili), var(--renk-ana)); transition: width 0.45s ease; } .uretimAdimi { position: relative; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; padding: 9px 0 12px; } /* Adımları bağlayan çizgi. */ .uretimAdimi::before { content: ""; position: absolute; left: 12px; top: 36px; bottom: -9px; width: 2px; border-radius: 2px; background: var(--renk-kenarlik-acik); } .uretimAdimi:last-child::before { display: none; } .uretimAdimi[data-durum="tamam"]::before { background: var(--renk-basarili-kenar); } .uretimAdimNo { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--renk-kenarlik); background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-size: 11.5px; font-weight: 700; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .uretimAdimi[data-durum="tamam"] .uretimAdimNo { border-color: var(--renk-basarili); background: var(--renk-basarili); color: #fff; } .uretimAdimi[data-durum="uyari"] .uretimAdimNo { border-color: var(--renk-uyari-kenar); background: var(--renk-uyari-acik); color: var(--renk-uyari); } .uretimAdimi[data-durum="hata"] .uretimAdimNo { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } .uretimAdimi.siradaki .uretimAdimNo { border-color: var(--renk-ana); color: var(--renk-ana-yazi); box-shadow: 0 0 0 4px var(--renk-ana-acik); animation: uretimSiradakiNabiz 2.4s ease-in-out infinite; } @keyframes uretimSiradakiNabiz { 0%, 100% { box-shadow: 0 0 0 4px var(--renk-ana-acik); } 50% { box-shadow: 0 0 0 7px var(--renk-ana-acik); } } @media (prefers-reduced-motion: reduce) { .uretimAdimi.siradaki .uretimAdimNo { animation: none; } } .uretimAdimi[data-durum="kapali"] .uretimAdimGovde { opacity: 0.55; } /* Başlık tek satır; dar panelde SIRADAKİ etiketi alta düşüyor, başlığı ikiye bölmüyor ("Müşteri / onayı"). */ .uretimAdimBaslik { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-height: 26px; padding-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--renk-yazi); } .uretimAdimAdi { white-space: nowrap; } .uretimAdimEtiketi { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--renk-ana-yazi); } /* İsteğe bağlı adım (21.09): "SIRADAKİ" gibi bağırmıyor, sönük duruyor -- zorunlu sanılmasın. */ .uretimAdimEtiketi.istegeBagli { color: var(--renk-yazi-ikincil); font-weight: 500; } .uretimAdimOzet { margin-top: 1px; font-size: 12px; line-height: 1.4; color: var(--renk-yazi-ikincil); } /* Adımın "bu iş nerede yapılıyor" satırı. Özetten sönük: durum değil, yol tarifi. */ .uretimAdimIpucu { margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--renk-yazi-ikincil); opacity: 0.85; } .uretimAdimNeden { margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--renk-tehlike); } .uretimAdimEylemleri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; } .uretimAdimDugmesi { padding: 4px 10px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-alan); color: var(--renk-yazi); font: inherit; font-size: 11.5px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .uretimAdimDugmesi:hover:not(:disabled) { border-color: var(--renk-ana); } .uretimAdimDugmesi.birincil { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; } .uretimAdimDugmesi.birincil:hover:not(:disabled) { background: var(--renk-ana-hover); } .uretimAdimDugmesi:disabled { opacity: 0.5; cursor: not-allowed; } .uretimOnayKutusu { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12px; color: var(--renk-yazi); cursor: pointer; } .uretimDolapSecimi { max-width: 100%; padding: 3px 6px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); font: inherit; font-size: 11.5px; } /* ===== css/bolumler/40-parcaTasarim.css ===== */ /* ============================================================ AKSESUAR TASARIMI (Fusion / SolidWorks mantığı) ============================================================ Tam ekran: sol ağaç, orta 3B, sağ düzenleyici. Donanım Kartları'nın (10600) ve 2B çizim penceresinin (10700) de üstünde; karttan açılıyor. */ .parcaTasarimKatmani { position: fixed; inset: 0; z-index: 10800; display: flex; background: rgba(10, 14, 20, 0.45); } /* Üç satır: üst şerit · araç şeridi (ikonlu Ekle) · gövde. Araç şeridi kullanıcının isteğiyle sağ panelden buraya çıktı (12.09): "header gibi yaptığın yer daha müsait." */ .parcaTasarimPenceresi { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; width: 100%; height: 100%; background: var(--renk-zemin); color: var(--renk-yazi); font-size: 12.5px; } .parcaAracSeridi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 12px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-alan-vurgu); } .parcaAracSeridiAdi { margin-right: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--renk-yazi-ikincil); } /* İkon üstte, ad altında küçük: ikon tanımayan kullanıcı fareyi bekletmeden de okuyabiliyor. */ .parcaAracSeridi .parcaEkleDugmesi { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 58px; padding: 4px 7px; line-height: 1.1; } .parcaAracSeridi .parcaEkleDugmesi svg { display: block; } .parcaEkleAdi { font-size: 10px; color: var(--renk-yazi-ikincil); } .parcaAracSeridi .parcaEkleDugmesi:hover .parcaEkleAdi { color: var(--renk-ana-yazi); } .parcaUst { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .parcaBaslik { font-size: 13px; font-weight: 700; white-space: nowrap; } .parcaAdGirisi { min-width: 160px; padding: 5px 8px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); font: inherit; font-weight: 600; } .parcaBosluk { flex: 1; } .parcaTasarimlar { display: contents; } /* Üst şeridin ikincil kabı (30.09): masaüstünde görünmez kap, çocukları eskisi gibi şeride dizilir. Sıra `order` ile korunur: başlık, ad, [malzeme, şablon, tasarımlar], mod anahtarı, geri/ileri … kaydet, kapat. Telefonda kap "⋯" ile açılan ikinci satır olur (45-telefon.css). */ .parcaUstEk { display: contents; } .parcaUst .parcaBaslik { order: -4; } .parcaUst .parcaAdGirisi { order: -3; } .parcaUstEk > .parcaUstOn { order: -2; } .parcaUst .parcaModAnahtari { order: -1; } .parcaUstAc, .parcaAltSekmeler { display: none; } .parcaGovde { display: grid; grid-template-columns: 250px 1fr 340px; min-height: 0; } .parcaAgac, .parcaOzellikPaneli { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: auto; padding: 10px; background: var(--renk-panel); } .parcaAgac { border-right: 1px solid var(--renk-kenarlik); } .parcaOzellikPaneli { border-left: 1px solid var(--renk-kenarlik); } .parcaBolumBasligi { margin: 4px 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--renk-yazi-ikincil); } .parcaAgacBasligi { display: flex; align-items: baseline; justify-content: space-between; } .parcaAgacSayaci { font-size: 10.5px; color: var(--renk-yazi-soluk); } /* MODEL AĞACI GİBİ (29.09): uygulamanın sol ağacıyla aynı satır dili (22-modelAgaci.css): 22 px satır, ok, ad, sağda ölçü, seçili mavi. Kart görünümü kaldırıldı. */ .parcaAgacListesi { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; } .parcaAgacSatiri { position: relative; height: 22px; display: flex; align-items: center; gap: 4px; padding-right: 6px; border: 0; border-radius: 4px; background: transparent; color: var(--renk-yazi); font-size: 12px; line-height: 1; white-space: nowrap; user-select: none; } .parcaAgacSatiri:hover { background: var(--renk-satir-vurgu, rgba(0, 0, 0, 0.05)); } .parcaAgacSatiri.secili { background: var(--renk-ana); color: #fff; } .parcaAgacSatiri.secili .parcaAgacOzeti { color: rgba(255, 255, 255, 0.8); } .parcaAgacSatiri.secili .parcaAgacIkonu svg { filter: brightness(3); } .parcaAgacSatiri.hatali { color: var(--renk-tehlike); } .parcaAgacSatiri.hatali .parcaAgacOzeti { color: var(--renk-tehlike); } .parcaAgacSatiri.bastirildi { opacity: 0.5; } .parcaAgacSatiri.geride { opacity: 0.45; } .parcaAgacIkonu { display: inline-flex; flex: none; } .parcaAgacIkonu svg { width: 16px; height: 16px; display: block; } .parcaAgacAdi { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; } .parcaAgacAdGirisi { flex: 1; min-width: 0; height: 18px; padding: 0 4px; border: 1px solid var(--renk-ana); border-radius: 3px; background: #fff; color: var(--renk-yazi); font: inherit; font-weight: 600; } .parcaAgacSatiri.secili .parcaAgacAdGirisi { color: var(--renk-yazi); } .parcaAgacSekli .parcaAgacAdi { font-weight: 400; color: var(--renk-yazi-ikincil); } .parcaAgacSekli.secili .parcaAgacAdi { color: #fff; } .parcaAgacOzeti { flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis; margin: 0; font-size: 10.5px; color: var(--renk-yazi-soluk); font-variant-numeric: tabular-nums; } .parcaAgacAraclari { position: absolute; right: 4px; top: 2px; display: none; gap: 2px; padding-left: 6px; background: inherit; } .parcaAgacSatiri:hover .parcaAgacAraclari { display: flex; background: var(--renk-satir-vurgu, var(--renk-panel)); } .parcaAgacSatiri.secili:hover .parcaAgacAraclari { background: var(--renk-ana); } .parcaAgacSatiri.secili .parcaMini { color: #fff; border-color: rgba(255, 255, 255, 0.5); background: transparent; } .parcaAgacSatiri:hover .parcaAgacOzeti { visibility: hidden; } .parcaMini, .parcaDugme, .parcaEkleDugmesi, .parcaBakisDugmesi, .parcaAracDugmesi, .parcaSil, .parcaUstAc, .parcaKapat { padding: 4px 9px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-alan); color: var(--renk-yazi); font: inherit; font-size: 11.5px; cursor: pointer; } .parcaMini { padding: 1px 6px; font-size: 10.5px; } .parcaDugme.birincil { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; } .parcaKapat { font-size: 16px; line-height: 1; } /* `.parcaEkle` kuralı buradaydı: Ekle sağ panelin üstündeydi. Kullanıcı üst şeride taşınmasını isteyince sınıf de kalktı; kural da kalkıyor. Kullanılmayan biçim kuralı, yanlış yorumla birlikte durunca bir sonraki okuyanı yanıltıyor -- burada "Ekle sağ panelin üstünde" yazıyordu ve artık değil. Biçim `.parcaAracSeridi` altında, dosyanın başında. */ .parcaPanelIcerik { display: flex; flex-direction: column; gap: 6px; min-height: 0; } .parcaEkleDugmesi:hover, .parcaBakisDugmesi:hover, .parcaAracDugmesi:hover { border-color: var(--renk-ana); } /* Ölçü aracı şeridi (12.09) */ .parcaOlcumSeridi { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-top: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); } .parcaOlcumAdi { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--renk-yazi-ikincil); } .parcaOlcumSonucu { flex: 1; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--renk-ana-yazi); } .parcaBakisDugmesi.kesitAcik { border-color: #2f6fb0; background: #2f6fb0; color: #fff; } /* Kesit şeridi (30.09) */ .parcaKesitSeridi { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-top: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); } .parcaKesitSeridi .parcaKesitKonum { flex: 1; min-width: 120px; } .parcaKesitSeridi .parcaKesitEksen { font: inherit; font-size: 11.5px; } .parcaBakisDugmesi.olcumAcik { border-color: #d6892a; background: #d6892a; color: #fff; } .parcaHareketSeridi { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-top: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan); } .parcaHareketAdi { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--renk-yazi-ikincil); } .parcaHareketSeridi input[type="range"] { flex: 1; max-width: 420px; } .parcaHareketEtiketi { min-width: 190px; font-variant-numeric: tabular-nums; color: var(--renk-yazi-ikincil); } /* Sahne sütunu (30.09): gizli şeritler (`hidden`) grid ögesi olmadığından `grid-template-rows: auto auto 1fr …` tuvale değil ölçü şeridine 1fr veriyordu; tuval 195 px'te kalıyor, altında boşluk oluşuyordu (telefonda ölçtüm, masaüstünde de aynıydı). Flex sütun: tuval dışındaki her şerit kendi boyu, tuval kalan yükseklik. */ .parcaSahneAlani { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: linear-gradient(180deg, var(--renk-alan-vurgu), var(--renk-zemin)); } .parcaBakislar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; } .parcaSahneAlani > * { flex: none; } .parcaSahneAlani > .parcaTuval { flex: 1 1 0; } .parcaYuzEylemleri { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 0 10px 6px; } .parcaYuzEylemleri[hidden] { display: none; } .parcaYuzEylemi { padding: 3px 10px; border-color: var(--renk-ana); color: var(--renk-ana-yazi); background: var(--renk-ana-acik, #e8f0fe); font-weight: 600; } .parcaYuzEylemi[data-komut="yuzBirak"] { border-color: var(--renk-kenarlik); color: var(--renk-yazi-ikincil); background: transparent; font-weight: 400; } .parcaYuzIpucu { margin-left: 10px; font-weight: 600; color: var(--renk-ana-yazi); } .parcaTuval { position: relative; min-height: 0; overflow: hidden; } .parcaTuval canvas { display: block; width: 100%; height: 100%; } .parcaOlcuSeridi { padding: 6px 12px; border-top: 1px solid var(--renk-kenarlik); background: var(--renk-serit); font-variant-numeric: tabular-nums; color: var(--renk-yazi-ikincil); } .parcaAlan { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 6px; font-size: 11.5px; } .parcaUst .parcaAlan { grid-template-columns: auto auto; } .parcaAlan input, .parcaAlan select { min-width: 0; padding: 4px 6px; border: 1px solid var(--renk-kenarlik); border-radius: 5px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); font: inherit; } .parcaGrup { display: flex; flex-direction: column; gap: 5px; padding: 6px 0; border-bottom: 1px solid var(--renk-kenarlik-acik); } .parcaOnay { display: flex; align-items: center; gap: 6px; } .parcaNot, .parcaBos, .parcaCizimIpucu { font-size: 11px; line-height: 1.4; color: var(--renk-yazi-soluk); } /* Çizim düzenleyici */ .parcaCizimEditoru { display: flex; flex-direction: column; gap: 6px; } .parcaCizimAraclari { display: flex; flex-wrap: wrap; gap: 4px; } /* FUSION GİBİ ESKİZ (29.09): kısıt çubuğu, kenar tıklama, ölçü etiketi, kısıt listesi. */ .parcaKisitCubugu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--renk-kenarlik); } .parcaKisitCubugu input[data-alan="koseDegeri"] { width: 58px; } .parcaKisitDurumu { margin-left: auto; font-size: 12px; color: var(--renk-yazi-soluk, #5b6477); } .parcaKisitDurumu.tam { color: #1f8f4e; font-weight: 600; } .parcaKisitDurumu.celiskili { color: #c0392b; font-weight: 600; } .parcaKenar { stroke: transparent; fill: none; cursor: pointer; pointer-events: stroke; } .parcaKenar:hover { stroke: rgba(214, 137, 42, 0.25); } .parcaKenar.bekleyen { stroke: rgba(214, 137, 42, 0.45); } .parcaOlcuEtiketi { fill: #444; cursor: text; user-select: none; paint-order: stroke; stroke: rgba(255, 255, 255, 0.85); stroke-width: 0.6px; } .parcaOlcuEtiketi.surucu { fill: #1a1a1a; font-weight: 700; } .parcaOlcuEtiketi:hover { fill: #d6892a; } .parcaSekil.secili.tamKisitli { stroke: #1a1a1a; } .parcaOlcuGirisi { position: absolute; z-index: 5; width: 72px; padding: 2px 4px; font-size: 12px; border: 1px solid #d6892a; border-radius: 4px; } .parcaCizimEditoru { position: relative; } /* Boyut yazarak çiz (29.09): tuvalin üstünde küçük şerit. */ .parcaBoyutSeridi { position: absolute; z-index: 6; left: 50%; top: 40%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #d6892a; border-radius: 6px; background: var(--renk-panel); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .parcaBoyutSeridi[hidden] { display: none; } .parcaBoyutAlani { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--renk-yazi-ikincil); } .parcaBoyutAlani[hidden] { display: none; } .parcaBoyutAlani input { width: 64px; padding: 3px 5px; border: 1px solid var(--renk-kenarlik); border-radius: 4px; font: inherit; font-weight: 600; color: var(--renk-yazi); background: var(--renk-girdi-zemin); } .parcaKisitListesi { margin-top: 6px; } .parcaKisitSatiri { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 0; } .parcaKisitAdi { flex: 1; } .parcaAracDugmesi.aktif { border-color: var(--renk-ana); background: var(--renk-ana-acik); color: var(--renk-ana-yazi); } .parcaAracDugmesi.sag { margin-left: auto; } .parcaCizimAlani { width: 100%; height: 240px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-alan); cursor: crosshair; touch-action: none; } .parcaIzgara line { stroke: var(--renk-kenarlik-acik); } .parcaYuzIzi { fill: rgba(120, 132, 148, 0.22); stroke: rgba(120, 132, 148, 0.5); stroke-width: 0; } .parcaEksenU { stroke: #d24a3c; } .parcaEksenV { stroke: #2f9e5b; } .parcaSekil { fill: rgba(41, 115, 214, 0.14); stroke: var(--renk-ana); cursor: move; } .parcaSekil.secili { fill: rgba(41, 115, 214, 0.3); stroke: #d6892a; } /* Sac yolu: açık çizgi, iç dolgu yok (kapanış kenarı motorda da yok) */ .parcaSekil.acik, .parcaSekil.acik.secili { fill: none; stroke-linejoin: round; stroke-linecap: round; } .parcaBekleyen { fill: none; stroke: #d6892a; stroke-dasharray: 2 1; } .parcaSekilListesi { display: flex; flex-direction: column; gap: 5px; } .parcaSekilSatiri { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; padding: 6px; border: 1px solid var(--renk-kenarlik-acik); border-radius: 6px; } .parcaSekilSatiri.secili { border-color: #d6892a; } .parcaSekilSatiri .parcaAlan { grid-template-columns: 58px 1fr; } .parcaSekilAdi { grid-column: 1 / -1; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; } .parcaSekilSatiri .parcaSil { grid-column: 2; justify-self: end; } /* Çokgen köşeleri */ .parcaNokta { fill: #fff; stroke: #d6892a; stroke-width: 0; cursor: grab; } .parcaNoktaListesi { display: flex; flex-direction: column; gap: 3px; grid-column: 1 / -1; max-height: 150px; overflow: auto; } /* Köşe satırı: no · X · Y · ölçü · ＋ · × → ALTI sütun. ⚠️ Beş sütun yazılmıştı ve satırda altı öge var: "×" düğmesi tek başına kendi satırına düşüyordu. Taşma ölçümü bunu göremedi (taşma yok, düzen bozuk); ekran görüntüsü yakaladı -- bu oturumda üçüncü kez. */ .parcaNoktaSatiri { display: grid; grid-template-columns: 18px 1fr 1fr auto auto auto; align-items: center; gap: 4px; } .parcaNoktaNo { font-size: 10.5px; color: var(--renk-yazi-soluk); } /* Resim altlığı: çizimin EN ALTINDA duruyor. ⚠️ `pointer-events: none` bilerek: altlık fare olaylarını yutarsa çizim tıklamaları resme gider ve kullanıcı üstünden çizgi geçiremez -- altlığın bütün amacı bu. */ .parcaAltlik { pointer-events: none; } /* Kalibrasyon işareti: resim üzerinde gösterilen iki nokta ve aralarındaki ölçü çizgisi. */ .parcaKalibreNoktasi { fill: #1d6fd6; stroke: #fff; stroke-width: 0; pointer-events: none; } .parcaKalibreCizgisi { stroke: #1d6fd6; fill: none; stroke-dasharray: 4 3; pointer-events: none; } /* Ofset satırı: yalnız seçili şekilde görünüyor ve şekil kartının tam genişliğini kaplıyor. */ .parcaOfsetSatiri { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 4px; font-size: 11px; color: var(--renk-yazi-soluk); } .parcaOfsetSatiri input, .parcaOfsetSatiri select { min-width: 0; padding: 3px 5px; border: 1px solid var(--renk-kenarlik); border-radius: 5px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); font: inherit; font-size: 11px; } /* Kenarın yayı: köşe satırının ALTINDA kendi satırı. x/y satırına iki kutu daha sıkıştırsaydım 200 px'e daralan sağ panelde okunmaz olurdu -- bu oturumda ağaç kartının kırpılması tam bu yüzden oldu ve ekran görüntüsüyle yakalandı. */ .parcaNoktaYayi { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto minmax(0, 1fr) auto auto; align-items: center; gap: 4px; padding-left: 18px; font-size: 10.5px; color: var(--renk-yazi-soluk); } .parcaNoktaSatiri input { min-width: 0; padding: 3px 5px; border: 1px solid var(--renk-kenarlik); border-radius: 5px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); font: inherit; font-size: 11px; } /* ============================================================ ESKİZ MODU (kullanıcı 12.09) ============================================================ Kullanıcı: *"neden bu küçük ekranda çizmeye çalışıyoruz onu da anlamadım"* ve *"bu parça çizim ve buradaki 3 ekranı da oda modu düzenleme modu gibi olabilirdi."* Ekranda ölçtüm: 1366 × 641'lik pencerede 3B tuval 776 × 516 (400k px²), eskiz alanı 304 × 240 (73k px²). 3B, eskizin 5,5 KATI. Oysa eskiz CAD'in en çok yer isteyen işi; 3B'ye yalnız bakılıyor, eskizde çizim yapılıyor. Çözüm programın kendi deseni: oda modu / düzenleme modu gibi MOD. Eskiz modunda orta alanı çizim kaplıyor, 3B gizleniyor; Model modunda bugünkü hâl aynen duruyor. Gizleme sınıfla, `hidden` niteliğiyle değil: bu bölmeler `display: grid` ve nitelik onu ezmiyor. */ .parcaModAnahtari { display: flex; gap: 3px; padding: 2px; border: 1px solid var(--renk-kenarlik); border-radius: 7px; background: var(--renk-alan); } .parcaModDugmesi { padding: 4px 12px; border: 0; border-radius: 5px; background: none; color: var(--renk-yazi-ikincil); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; } .parcaModDugmesi.aktif { background: var(--renk-ana); color: #fff; } /* Model modu: eskiz bölmesi yok. */ .parcaEskizAlani { display: none; } .parcaGovde.eskizModu .parcaSahneAlani { display: none; } .parcaGovde.eskizModu .parcaEskizAlani { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; background: var(--renk-zemin); } .parcaEskizUst { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .parcaEskizAdi { font-weight: 700; } .parcaEskizNotu { color: var(--renk-yazi-soluk); font-size: 11px; } .parcaEskizKabi { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; padding: 8px 10px; } /* ------------------------------------------------ ESKİZ YERLEŞİMİ: ÖLÇÜ LİSTESİ SAĞDA (12.09) ------------------------------------------------ Kullanıcı: *"bu altta kalan kısmı da sola alabilirsin, scroll ile uğraşıp durmayalım"* -- sonra düzeltti: *"sola değil sağa tarafa kanka."* Liste alttaydı ve ölçtüm: çizim alanı 756 × 273, liste 756 × 142 -- liste yatayda kocaman, dikeyde kaydırmalı. 9 köşeli bir profilde kullanıcı sürekli kaydırıyordu. Sağa alınca liste tüm yüksekliği kullanıyor ve çizim alanı dikeyde büyüyor: iki taraf birden kazanıyor. DOM sırası DEĞİŞMİYOR -- yerleşim `grid-template-areas` ile. Editörün kodu bu yüzden tek satır değişmedi; bu depoda "toplu düzenleme iki kez üretime hata soktu" yazılı, yerleşim için koda dokunmuyoruz. */ /* Orta alan TAMAMEN çizime kalıyor: araç çubuğu, çizgi şeridi, çizim, ipucu. Ölçü listesi burada değil -- pencere onu sağ panele koyuyor (kullanıcının gösterdiği yer). */ /* 29.09: grid satırları (auto auto 1fr auto) çocuk sayısına bağlıydı; üçüncü şerit (Kısıt) eklenince 1fr satırı ona düşüyor, çizim alanı örtük satıra kayıyordu (telefonda 60 px kalıyordu). Sütun flex: çizim alanı kalan yerin tamamı, gizlenen çocuklar düzeni bozmuyor. */ .parcaGovde.eskizModu .parcaEskizKabi .parcaCizimEditoru { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; height: auto; min-height: 0; } .parcaGovde.eskizModu .parcaEskizKabi .parcaCizimEditoru > * { flex: none; } /* ⚠️ SVG KENDİ ORANIYLA ŞİŞİYOR Tarayıcıda ölçtüm: grid satırı çizim alanına 379 px veriyordu ama alanın kendi ölçüsü 756 × 756 çıkıyordu -- `height: auto` verilen bir SVG, viewBox oranından kendine yükseklik biçiyor ve satırı aşıyor. Taşan kısım kesiliyor, kullanıcıya görünen yalnız 188 px kalıyordu. Yani "küçük ekran" şikâyetinin son parçası ipucu metni ya da liste değil, SVG'nin içsel oranıydı. `height: 100%` satırın verdiği yeri alıyor. */ .parcaGovde.eskizModu .parcaEskizKabi .parcaCizimEditoru > .parcaCizimAlani { flex: 1 1 0; height: auto; min-height: 0; } /* Ölçü listesi sağ panelde, "ÇİZİM · …" alanlarının altında. Panelin kendi kaydırması var; liste kalan yeri alıyor ve kendi içinde kaydırılabiliyor. */ .parcaOzellikPaneli .parcaSekilListesi { display: flex; flex-direction: column; gap: 6px; min-height: 0; max-height: none; } /* ------------------------------------------------ ÇİZGİ ŞERİDİ: UZUNLUK · AÇI · IZGARA (12.09) ------------------------------------------------ Kullanıcı: *"mesela bir noktada çizmeye başladım, 90 derece yukarı gerçekten çıkabiliyor muyum onu göremiyorum"* ve *"arkadaki grid mesafesi de ayarlanabilir olsun, gridlere tıklayarak referans alabilirim line çizerken."* Tarayıcıda ölçtüm: çizim sırasında ekranda HİÇ giriş alanı yoktu (`cizimSirasindaGirisAlani: []`); sayı ancak şekil bittikten sonra listeden düzeltilebiliyordu. */ .parcaCizgiSeridi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--renk-kenarlik-acik); border-radius: 6px; background: var(--renk-alan-vurgu); } /* ⚠️ `display: flex` verdiğimiz şeritte `hidden` niteliği KENDİ BAŞINA gizlemiyor: açık display kuralı tarayıcının varsayılanını eziyor. Eskiz bölmesinde bunu bir kez yaşadım (bölmeler `display: grid` olduğu için nitelikle gizlenemiyordu) -- burada açıkça yazıyoruz. */ .parcaCizgiSeridi[hidden] { display: none; } .parcaCizgiAlani { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--renk-yazi-ikincil); } .parcaCizgiAlani input, .parcaCizgiAlani select { width: 76px; min-width: 0; padding: 3px 5px; border: 1px solid var(--renk-kenarlik); border-radius: 5px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); font: inherit; font-size: 11px; } .parcaCizgiAlani select { width: 92px; } /* Canlı ölçü: fare hareket ederken değişen sayı. */ .parcaCizgiOlcusu { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--renk-ana-yazi); } /* Açı kilitliyken turuncu: kullanıcı kilidi görebilsin. */ .parcaCizgiOlcusu.kilitli { color: #d6892a; } /* Önizleme çizgisi, yakalanan nokta ve ızgara noktaları. */ .parcaOnizleme { fill: none; stroke: #d6892a; stroke-dasharray: 3 2; } .parcaOnizlemeNoktasi { fill: #fff; stroke: #d6892a; stroke-width: 0; } .parcaIzgaraNoktasi { fill: var(--renk-kenarlik); } /* Yakalanan nokta: imleç var olan bir köşeye / kenar ortasına / merkeze oturduğunda yeşil halka. Görünmezse kullanıcı yakalandığını bilmez ve bir milimetre kaçık çizer -- işaretin kendisi özelliğin yarısı. */ .parcaYakalananNokta { fill: none; stroke: #2f9e5b; } /* Yakalama onayı: şeritte kutu + yazı. */ .parcaCizgiAlani input[type="checkbox"] { width: auto; margin: 0; } /* Pah / radyus: seçili kenarların listesi (15.09). */ .parcaKenarListesi { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .parcaKenarSatiri { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--renk-yazi-ikincil); } .parcaHataNotu { color: var(--renk-tehlike); } /* Uyarı: hata değil, kurulum sonrası silinmez (yazıda bilinmeyen harf). */ .parcaUyariNotu { color: #b8651b; } /* ZAMAN ÇİZELGESİ (29.09, Fusion'un alt şeridi): özellik ikonları sırayla, aralarında imleç; imlecin gerisi soluk. */ .parcaZamanCizelgesi { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-top: 1px solid var(--renk-kenarlik); background: var(--renk-panel); min-height: 40px; } .parcaZamanCizelgesi[hidden] { display: none; } .parcaZamanDugmesi { min-width: 26px; padding: 2px 4px; font-size: 11px; } .parcaZamanOgeleri { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; min-width: 0; padding: 0 6px; } .parcaZamanOgesi { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; } .parcaZamanOgesi svg { width: 22px; height: 22px; display: block; } .parcaZamanNo { position: absolute; right: 1px; bottom: 0; font-size: 9px; color: var(--renk-yazi-ikincil); } .parcaZamanOgesi:hover { background: var(--renk-ana-acik); } .parcaZamanOgesi.secili { border-color: var(--renk-ana); background: var(--renk-ana-acik); } .parcaZamanOgesi.hatali { border-color: #c0392b; } .parcaZamanOgesi.bastirildi { opacity: 0.45; } .parcaZamanOgesi.geride { opacity: 0.3; filter: grayscale(1); } .parcaZamanImleci { width: 3px; height: 30px; margin: 0 3px; border-radius: 2px; background: var(--renk-ana); flex: none; } .parcaAgacSatiri.geride { opacity: 0.45; } /* PARAMETRE TABLOSU (29.09): sağ sütunun üstünde; ifadeli alan mavi kenarlı, yanında hesaplanan değer. */ .parcaParametreKutusu { border-bottom: 1px solid var(--renk-kenarlik); padding-bottom: 6px; } .parcaParametreBaslik { display: flex; align-items: center; justify-content: space-between; } .parcaParametreTablosu { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .parcaParametreSatiri { display: grid; grid-template-columns: 76px 1fr auto 1fr auto; gap: 4px; align-items: center; font-size: 11.5px; } .parcaParametreSatiri input { min-width: 0; padding: 3px 5px; border: 1px solid var(--renk-kenarlik); border-radius: 5px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); font: inherit; } .parcaParametreSatiri.hatali input[data-alan="parametreIfadesi"] { border-color: #c0392b; } .parcaParametreDegeri { white-space: nowrap; color: var(--renk-yazi-ikincil); } .parcaParametreHatasi { grid-column: 1 / -1; color: #c0392b; font-size: 11px; } .parcaAlan input.ifadeli, .parcaParametreSatiri input.ifadeli { border-color: var(--renk-ana); color: var(--renk-ana); } .parcaAlan input.hatali { border-color: #c0392b; } .parcaIfadeDegeri { grid-column: 2; font-size: 10.5px; color: var(--renk-yazi-ikincil); } /* Düzenle çubuğu (29.09): kesme / uzatma / boole; böl doğrusu. */ .parcaDuzenleCubugu input[data-alan="duzenleMesafe"] { width: 58px; } .parcaBolCizgisi { stroke: #c0392b; stroke-dasharray: 4 3; } /* AKILLI ÖLÇÜ (29.09): uzatma çizgileri ince gri, ölçü çizgisi ve oklar koyu mavi, yazı beyaz haleli; seçili turuncu; önizleme yarı saydam. Tıklanabilir noktalar küçük halka. */ .parcaOlcuUzatma { stroke: #7a8494; } .parcaOlcuCizgisi { stroke: #1f4f9a; fill: none; } .parcaOlcuOku { fill: #1f4f9a; } .parcaOlcuYazi { fill: #1f4f9a; font-weight: 600; cursor: text; user-select: none; paint-order: stroke; stroke: rgba(255, 255, 255, 0.9); stroke-width: 0.7px; } .parcaOlcu.secili .parcaOlcuCizgisi, .parcaOlcu.secili .parcaOlcuUzatma { stroke: #d6892a; } .parcaOlcu.secili .parcaOlcuOku { fill: #d6892a; } .parcaOlcu.secili .parcaOlcuYazi { fill: #d6892a; } .parcaOlcu.onizleme { opacity: 0.55; } .parcaOlcuYazi:hover { fill: #d6892a; } .parcaOlcuNoktasi { fill: rgba(255, 255, 255, 0.9); stroke: #1f4f9a; stroke-width: 0.35px; cursor: crosshair; } .parcaOlcuNoktasi:hover, .parcaOlcuNoktasi.secili { fill: #d6892a; stroke: #d6892a; } /* Araç çubuğu grupları (29.09): etiket, ikon, sağ tık menüsü. */ .parcaCubukEtiketi { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--renk-yazi-soluk); min-width: 54px; } .parcaAracDugmesi { display: inline-flex; align-items: center; gap: 4px; } .parcaAracDugmesi:disabled { opacity: 0.4; cursor: default; } .parcaAracIkonu { flex: none; color: var(--renk-yazi-ikincil); } .parcaAracDugmesi.aktif .parcaAracIkonu { color: var(--renk-ana-yazi); } .parcaSagTikMenu { position: absolute; z-index: 8; min-width: 150px; padding: 4px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); } .parcaSagTikOgesi { display: block; width: 100%; padding: 5px 10px; border: 0; border-radius: 4px; background: none; color: var(--renk-yazi); font: inherit; font-size: 12px; text-align: left; cursor: pointer; } .parcaSagTikOgesi:hover:not(:disabled) { background: var(--renk-ana-acik); } .parcaSagTikOgesi:disabled { opacity: 0.4; cursor: default; } /* Kısayol kartı (?): pencerenin ortasında (29.09). */ .parcaKisayolKarti { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9; min-width: 560px; padding: 14px 18px; border: 1px solid var(--renk-kenarlik); border-radius: 10px; background: var(--renk-panel); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); font-size: 12.5px; line-height: 1.6; } .parcaKisayolKarti[hidden] { display: none; } .parcaKisayolBaslik { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 8px; } .parcaKisayolSutunlar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .parcaTasarimPenceresi { position: relative; } /* Eskiz durum çubuğu ve 3B mesafe etiketi (29.09). */ .parcaEskizDurumu { display: flex; align-items: center; gap: 12px; padding: 3px 8px; border-top: 1px solid var(--renk-kenarlik); font-size: 11px; color: var(--renk-yazi-ikincil); } .parcaEskizDurumu select { font-size: 11px; padding: 1px 4px; } .parcaEskizDurumOgesi { display: inline-flex; align-items: center; gap: 4px; } .parcaEskizImlec { font-variant-numeric: tabular-nums; min-width: 130px; } .parcaSahneAlani { position: relative; } .parcaTutamakEtiketi { position: absolute; z-index: 5; padding: 2px 6px; border-radius: 4px; background: #e07b10; color: #fff; font-size: 11.5px; font-weight: 700; pointer-events: none; white-space: nowrap; } .parcaTutamakEtiketi[hidden] { display: none; } .parcaOlcuNoktasi.orijin { fill: #2f9e5b; stroke: #1f6f3f; } /* Teknik resim katmanı (30.09): pencerenin içinde, sahnenin üstünde. */ .parcaTeknikKatmani { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; background: var(--renk-zemin); } .parcaTeknikKatmani[hidden] { display: none; } .parcaTeknikUst { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .parcaTeknikBaslik { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; } .parcaTeknikSayfa { flex: 1; min-height: 0; overflow: auto; padding: 16px; background: #6b7280; } .parcaTeknikSayfa svg { display: block; width: min(100%, 1200px); height: auto; margin: 0 auto; background: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); } /* ===== css/bolumler/42-parcaKontrolu.css ===== */ /* ============================================================ PARÇA KONTROLÜ PENCERESİ (14.09) ============================================================ Koli penceresinin iskeleti (katman, başlık, gövde, kart); burada yalnız tablo ve düğmeler. Satır sol kenarındaki şerit parçanın son durumunu renkle söylüyor: yeşil sağlam, turuncu yeniden kesimde, gri bekliyor. Kullanıcı on dört satırı okumadan eksik olanı görsün. */ .parcaKontroluPenceresi { width: min(900px, 100%); } /* FİRE RAPORU (16.09) Şerit her zaman görünür, ayrıntı katlı. Çubuklar kaba oran için: "vakumdan kaydı" ötekilerin iki katıysa bunu sayıyı okumadan görsün. */ .pkFire { margin-bottom: 12px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-orta); background: var(--renk-alan-vurgu); overflow: hidden; } .pkFireBaslik { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 8px 10px; border: none; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .pkFireBaslik:hover { background: var(--renk-alan); } .pkFireOk { color: var(--renk-yazi-soluk); } .pkFireAd { color: var(--renk-yazi); font-weight: 600; } .pkFireOzet { flex: 1; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .pkFireOran { padding: 1px 6px; border: 1px solid var(--renk-uyari-kenar); border-radius: 10px; background: var(--renk-uyari-acik); color: var(--renk-uyari); font-size: var(--yazi-mini); white-space: nowrap; } .pkFireSuzgec { display: flex; gap: 4px; padding: 6px 10px 0; border-top: 1px solid var(--renk-kenarlik-acik); } .pkFireSuzgecBtn { padding: 2px 8px; border: 1px solid var(--renk-kenarlik-acik); border-radius: 10px; background: var(--renk-alan); color: var(--renk-yazi-ikincil); font: inherit; font-size: var(--yazi-mini); cursor: pointer; } .pkFireSuzgecBtn:hover { border-color: var(--renk-kenarlik-koyu); color: var(--renk-yazi); } .pkFireSuzgecBtn.aktif { border-color: var(--renk-ana-kenar); background: var(--renk-ana-acik); color: var(--renk-ana-yazi); } .pkFireAyrinti { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; padding: 8px 10px 4px; border-top: 1px solid var(--renk-kenarlik-acik); } .pkFireSutunBaslik { padding: 6px 10px 2px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); letter-spacing: 0.05em; text-transform: uppercase; } .pkFireSutun .pkFireSutunBaslik { padding: 0 0 4px; } .pkFireSatir { display: grid; grid-template-columns: minmax(70px, 1fr) 46px auto; align-items: center; gap: 6px; padding: 2px 0; color: var(--renk-yazi); font-size: var(--yazi-kucuk); } .pkFireEtiket { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pkFireCubuk { height: 6px; border-radius: 3px; background: var(--renk-alan); } .pkFireDolu { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--renk-uyari), var(--renk-tehlike)); } .pkFireAdet { color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); font-variant-numeric: tabular-nums; white-space: nowrap; } .pkFireDurum { padding: 4px 10px 8px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .pkFireListe { display: flex; flex-direction: column; padding: 0 10px 10px; } .pkFireKayit { display: grid; grid-template-columns: 92px minmax(120px, 1fr) minmax(140px, 1.2fr); gap: 8px; padding: 3px 0; border-top: 1px solid var(--renk-kenarlik-acik); font-size: var(--yazi-kucuk); } .pkFireTarih { color: var(--renk-yazi-soluk); font-variant-numeric: tabular-nums; } .pkFireParca { color: var(--renk-yazi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pkFireSebep { color: var(--renk-yazi-ikincil); } .pkToplu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; } .pkTopluEtiket { font-size: 12px; color: var(--renk-yazi-ikincil); } .pkDolapBaslik { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .pkDolapAdi { font-weight: 600; color: var(--renk-yazi); } .pkDolapSayac { font-size: 12px; color: var(--renk-yazi-ikincil); font-variant-numeric: tabular-nums; } .pkTablo { display: flex; flex-direction: column; } .pkSatir { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(3, 118px); align-items: center; column-gap: 8px; padding: 6px 8px; border-left: 3px solid var(--renk-kenarlik-acik); border-top: 1px solid var(--renk-kenarlik-acik); } .pkBaslikSatiri { border-top: none; border-left-color: transparent; font-size: 11px; color: var(--renk-yazi-ikincil); } .pkAsamaBasligi { text-align: center; } .pkSatir[data-durum="tamam"] { border-left-color: var(--renk-basarili); } .pkSatir[data-durum="suruyor"] { border-left-color: var(--renk-ana); } .pkSatir[data-durum="yenidenKesimde"] { border-left-color: var(--renk-uyari); background: var(--renk-uyari-acik); } .pkParca { display: flex; flex-direction: column; min-width: 0; } .pkParcaAdi { font-size: 13px; color: var(--renk-yazi); } .pkParcaOlcu { font-size: 11.5px; color: var(--renk-yazi-ikincil); font-variant-numeric: tabular-nums; } .pkNot { margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: var(--renk-yazi-ikincil); } .pkUyari { color: var(--renk-uyari); } .pkHucre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; } /* Parça bu aşamaya girmiyor (bandı yok). */ .pkAtlanan { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); } .pkDugme { width: 34px; height: 28px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-alan); color: var(--renk-yazi-ikincil); font: inherit; font-size: 14px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .pkSaglam:hover { border-color: var(--renk-basarili); } .pkHasarli:hover { border-color: var(--renk-tehlike); } .pkSaglam.aktif { border-color: var(--renk-basarili); background: var(--renk-basarili); color: #fff; } /* Önceki aşama sonrakinden kendiliğinden doldu: soluk yeşil. */ .pkSaglam.aktif.otomatik { background: var(--renk-basarili-acik); color: var(--renk-basarili); } .pkHasarli.aktif { border-color: var(--renk-tehlike); background: var(--renk-tehlike); color: #fff; } .pkGeriAl { border: none; background: transparent; color: var(--renk-tehlike); font: inherit; font-size: 10.5px; text-decoration: underline; cursor: pointer; } .pkHasarFormu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 8px 10px 11px; border-left: 3px solid var(--renk-tehlike); background: var(--renk-tehlike-acik); } .pkHasarBaslik { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--renk-tehlike); } .pkNotGirdisi { flex: 1; min-width: 140px; padding: 3px 6px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); font: inherit; font-size: 11.5px; } /* Nesting penceresindeki havuz şeridi: levha şeridinin altında, uyarıların üstünde. Turuncu kenar: başka işin parçası bu levhaya girebilir. */ .nestingHavuzSeridi { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--renk-uyari); border-radius: 6px; background: var(--renk-uyari-acik); color: var(--renk-yazi); font-size: 12.5px; } .nestingHavuzEtiketi { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; } .nestingHavuzListesi { margin-top: 3px; padding-left: 24px; font-size: 11.5px; color: var(--renk-yazi-ikincil); } .pkHavuzSatiri { display: flex; flex-direction: column; padding: 6px 8px; border-left: 3px solid var(--renk-uyari); border-top: 1px solid var(--renk-kenarlik-acik); } /* ===== css/bolumler/43-sonKontrol.css ===== */ /* ============================================================ SON KONTROL PENCERESİ (16.09) ============================================================ NC indirmeden önceki son bakış. Durum rengi pencerenin üst kenarından başlayıp işarete ve ilk karta taşınıyor: operatör yazıyı okumadan rengi görsün. Katman 11450: Levha Yerleşimi (10000), G kod önizleme (10700) ve tekrar kesimin (11400) üstünde, mesaj kutusunun (12000+) altında. */ .sonKontrolKatmani { position: fixed; inset: 0; z-index: 11450; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 12, 16, 0.62); backdrop-filter: blur(2px); animation: skKatmanGir 0.16s ease-out; } .sonKontrolPenceresi { --sk-durum: var(--renk-basarili); --sk-durum-acik: var(--renk-basarili-acik); --sk-durum-kenar: var(--renk-basarili-kenar); position: relative; display: flex; flex-direction: column; width: min(980px, 100%); max-height: min(90vh, 900px); border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); overflow: hidden; animation: skPencereGir 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2); } .sonKontrolPenceresi.durum-sari { --sk-durum: var(--renk-uyari); --sk-durum-acik: var(--renk-uyari-acik); --sk-durum-kenar: var(--renk-uyari-kenar); } .sonKontrolPenceresi.durum-kirmizi { --sk-durum: var(--renk-tehlike); --sk-durum-acik: var(--renk-tehlike-acik); --sk-durum-kenar: var(--renk-tehlike-kenar); } /* Üst kenarda durum şeridi */ .sonKontrolPenceresi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--sk-durum), transparent 85%); } @keyframes skKatmanGir { from { opacity: 0; } to { opacity: 1; } } @keyframes skPencereGir { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } } /* --- başlık --- */ .skBaslik { display: flex; align-items: center; gap: 14px; padding: 16px 18px 14px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: linear-gradient(180deg, var(--sk-durum-acik), var(--renk-alan-vurgu) 70%); } .skDurumIsareti { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--sk-durum-kenar); border-radius: 50%; background: var(--sk-durum-acik); color: var(--sk-durum); font-size: 22px; font-weight: 700; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-durum) 12%, transparent); } .durum-kirmizi .skDurumIsareti { animation: skNabiz 1.8s ease-in-out infinite; } @keyframes skNabiz { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-durum) 12%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--sk-durum) 4%, transparent); } } .skBaslikMetni { flex: 1; min-width: 0; } .skUstSatir { color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); letter-spacing: 0.06em; text-transform: uppercase; } .skDurumBaslik { margin-top: 2px; color: var(--sk-durum); font-size: 18px; font-weight: 700; } .skDurumAlt { margin-top: 2px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-normal); } /* --- gövde --- */ .skGovde { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; overflow: auto; } .skKartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } .skKart { padding: 10px 12px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-orta); background: var(--renk-alan-vurgu); animation: skKartGir 0.3s ease-out both; } .skKart:nth-child(2) { animation-delay: 0.03s; } .skKart:nth-child(3) { animation-delay: 0.06s; } .skKart:nth-child(4) { animation-delay: 0.09s; } .skKart:nth-child(5) { animation-delay: 0.12s; } .skKart:nth-child(6) { animation-delay: 0.15s; } .skKart:nth-child(7) { animation-delay: 0.18s; } @keyframes skKartGir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .skKartDeger { color: var(--renk-yazi); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .skKartAd { color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .skKart.delik .skKartDeger { color: var(--renk-ana-yazi); } .skKart.iz .skKartDeger { color: var(--renk-uyari); } .skKart.gecmeli .skKartDeger { color: var(--renk-tehlike); } .skKart.ters .skKartDeger { color: #c49bf5; } /* --- ölçülmemiş donanım --- */ .skOlcumRozeti { padding: 10px 12px; border: 1px dashed var(--renk-uyari-kenar); border-radius: var(--radius-orta); background: var(--renk-uyari-acik); } .skOlcumBaslik { color: var(--renk-uyari); font-weight: 700; font-size: var(--yazi-normal); } .skOlcumBaslik::before { content: "⌀ "; } .skOlcumListe { margin: 6px 0 4px; padding-left: 18px; color: var(--renk-yazi); font-size: var(--yazi-normal); } .skOlcumNot { color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } /* --- yapılacaklar --- */ .skKalemler { display: flex; flex-direction: column; gap: 6px; } .skKalem { --sk-kalem: var(--renk-ana); padding: 8px 12px; border: 1px solid var(--renk-kenarlik-acik); border-left: 3px solid var(--sk-kalem); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); } .skKalem.hata { --sk-kalem: var(--renk-tehlike); background: color-mix(in srgb, var(--renk-tehlike-acik) 70%, var(--renk-alan-vurgu)); } .skKalem.uyari { --sk-kalem: var(--renk-uyari); } .skKalem.bilgi { --sk-kalem: var(--renk-kenarlik-koyu); } .skKalemUst { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .skSeviye { color: var(--sk-kalem); font-size: var(--yazi-mini); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .skKalemBaslik { flex: 1; min-width: 200px; color: var(--renk-yazi); font-weight: 600; } .skLevhaEtiketi { padding: 1px 6px; border: 1px solid var(--renk-kenarlik); border-radius: 10px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-mini); white-space: nowrap; } .skKalemAciklama { margin-top: 3px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-normal); line-height: 1.45; } .skKalemCozum { margin-top: 3px; color: var(--renk-ana-yazi); font-size: var(--yazi-kucuk); } .skKalemCozum::before { content: "→ "; } /* --- levhalar --- */ .skBolumBaslik { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--renk-yazi); font-weight: 600; } .skLejant { display: flex; gap: 12px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); font-weight: 400; } .skLejantOge { display: inline-flex; align-items: center; gap: 5px; } .skLejantOge i { width: 8px; height: 8px; border-radius: 50%; background: var(--sk-nokta); } .skLejantOge.delik { --sk-nokta: #5aa9ff; } .skLejantOge.iz { --sk-nokta: #f0b44a; } .skLejantOge.gecmeli { --sk-nokta: #f4756f; } .skLevhaIzgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; } .skLevhaKart { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-orta); background: var(--renk-alan); color: inherit; font: inherit; text-align: left; cursor: zoom-in; transition: border-color 0.12s linear, transform 0.12s ease-out; } .skLevhaKart:hover { border-color: var(--renk-ana-kenar); transform: translateY(-1px); } .skLevhaKart.buyuk { grid-column: 1 / -1; cursor: zoom-out; } .skLevhaSvg { width: 100%; max-width: 100%; /* Oran JS'te levhanın kendi ölçüsünden veriliyor. */ aspect-ratio: 1.35; max-height: 30vh; } .skLevhaKart.buyuk .skLevhaSvg { aspect-ratio: auto; height: min(56vh, 520px); } .skLevhaZemin { fill: #262b33; stroke: #4d5560; stroke-width: 6; } .skParca rect { fill: #3a4553; stroke: #8fa3ba; stroke-width: 4; } .skParca:hover rect { fill: #465467; } .skDelik { stroke: #0e1116; stroke-width: 2; } .skDelik.delik { fill: #5aa9ff; } .skDelik.iz { fill: #f0b44a; } .skDelik.gecmeli { fill: #f4756f; } .skLevhaAlt { display: flex; flex-direction: column; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .skLevhaAlt strong { color: var(--renk-yazi); font-size: var(--yazi-normal); } /* --- alt --- */ .skAlt { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); } .skAltNot { flex: 1; color: var(--renk-tehlike); font-size: var(--yazi-kucuk); } .skBirincilBtn.tehlike { border-color: var(--renk-tehlike-kenar); background: linear-gradient(180deg, #b4453f, #93322e); } .skBirincilBtn.tehlike:hover:not(:disabled) { background: linear-gradient(180deg, #c8524b, #a83b36); } @media (prefers-reduced-motion: reduce) { .sonKontrolKatmani, .sonKontrolPenceresi, .skKart, .durum-kirmizi .skDurumIsareti { animation: none; } } /* ===== css/bolumler/44-bildirim.css ===== */ /* ============================================================ BİLDİRİM ŞERİDİ (16.09) ============================================================ Sağ altta, mesaj kutusunun altında (12000) ama pencerelerin üstünde: bildirim bir pencereyi kapatmıyor, yalnız haber veriyor. */ .bildirimSeridi { position: fixed; right: 16px; bottom: 16px; z-index: 11800; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; } .bildirim { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 220px; max-width: 380px; padding: 10px 34px 10px 12px; border: 1px solid var(--renk-kenarlik); border-left: 3px solid var(--bildirim-renk, var(--renk-basarili)); border-radius: var(--radius-orta); background: var(--renk-panel); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28); pointer-events: auto; animation: bildirimGir 0.18s ease-out; } .bildirim.basari { --bildirim-renk: var(--renk-basarili); } .bildirim.bilgi { --bildirim-renk: var(--renk-ana); } /* UYARI TÜRÜ EKLENDİ (kullanıcı 27.09) `bildirimGoster` "uyari" türünü kabul ediyordu ama karşılığı burada yoktu: uyarı varsayılan renge düşüyor ve başlığın önüne "✓" giriyordu. Yani "stokta olmayan donanım" uyarısı YEŞİL TİKLE çıkardı. */ .bildirim.uyari { --bildirim-renk: var(--renk-uyari); } .bildirim.uyari .bildirimBaslik::before { content: "! "; } .bildirim.cikiyor { animation: bildirimCik 0.16s ease-in forwards; } .bildirimBaslik { color: var(--bildirim-renk); font-size: var(--yazi-normal); font-weight: 700; } .bildirimBaslik::before { content: "✓ "; } .bildirim.bilgi .bildirimBaslik::before { content: "i "; } .bildirimMetin { color: var(--renk-yazi); font-size: var(--yazi-normal); line-height: 1.4; } .bildirimKapatBtn { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; padding: 0; border: none; border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-soluk); font-size: 15px; line-height: 1; cursor: pointer; } .bildirimKapatBtn:hover { background: var(--renk-alan-vurgu); color: var(--renk-yazi); } @keyframes bildirimGir { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes bildirimCik { to { opacity: 0; transform: translateX(12px); } } @media (prefers-reduced-motion: reduce) { .bildirim, .bildirim.cikiyor { animation: none; } } /* ===== css/bolumler/41-tablet.css ===== */ /* ============================================================ TABLET (kullanıcı 12.09) ============================================================ Kullanıcı: *"bu uygulamayı muhtemelen telefonda kullanmak zor olacağı için responsive yapamazsın diye düşünüyorum, aksini düşünecek olursan yazarsın — ama tablete birebir uyumlu olmalı, yakınlaştırma vs parmak hareketleri ile ayarlayabilme miyiz."* TELEFON: BİLEREK YOK Aynı fikirdeyim ve sebebi ölçülebilir: ekran üç sütun (ağaç + çizim + özellik paneli) ve aynı anda görünmeleri işin kendisi. 390 px genişlikte bu üçü sırayla gösterilir, o da programı "tek seferde tek şey" hâline getirir -- marangozun aradığı şey bu değil. Depoda da kayıtlı: responsive bilerek yapılmadı. TABLET: ÖLÇEREK Tablet ölçüsünde (1024 × 768) ölçtüm: 28 tıklanabilir öğenin 28'i parmak için küçük (hepsi 24 px yükseklik; dokunma ölçütü 44 px) 2 öğe ekran dışına taşıyor: sağ panelin 19 × 19 sabitle ve kapat düğmeleri (sağ kenar 1058 ve 1083, ekran 1024) eskizde iki parmak yakınlaştırma yok; üstelik iki parmak ÇİZİME iki nokta ekliyordu Üçüncüsü koddan çözüldü (tasarimMotoru/dokunmaHareketi). Bu dosya ilk ikisini çözüyor. NEDEN `pointer: coarse` Ekran genişliğine göre değil, İŞARETÇİ TÜRÜNE göre büyütüyoruz: 1024 px'lik bir dizüstünde fare varsa 44 px hedefler yeri boşa harcar; 1024 px'lik tablette parmak varsa 24 px hedefe basılamaz. Soru "ekran kaç piksel" değil, "parmakla mı dokunuyor". Genişliğe bağlı tek şey panel daralması: orada gerçekten yer sorunu var. NEDEN TEK DEĞİŞKEN Satır yükseklikleri tek yerden yönetiliyor (00-degiskenler.css: --buton-yukseklik, --alan-yukseklik). 28 hedefi tek tek büyütmek yerine değişkeni eziyoruz -- bu depoda "script'le toplu değiştirme iki kez üretime hata soktu" yazılı. */ @media (pointer: coarse) { :root { /* 44 px: parmak ölçütü. 24 → 44 geçişi satırları uzatıyor ama tablette basılamayan düğmeden iyidir. */ --buton-yukseklik: 44px; --alan-yukseklik: 44px; /* ⚠️ BAŞLIK ŞERİDİ DÜĞMEDEN YÜKSEK OLMALI Önce 36 px yazmıştım ve içine 44 px düğme koyuyordum: düğme şeride sığmıyor, sağ panel `overflow: hidden` olduğu için kırpılıyor. Ölçümde görünmedi çünkü o an panel kapalıydı -- panel açıkken kullanıcının karşısına çıkacaktı. */ --bolum-baslik-yukseklik: 52px; --serit-yukseklik: 48px; /* Yazı da büyüyor: 12 px parmak mesafesinden okunmuyor. */ --yazi-normal: 14px; --yazi-kucuk: 13px; --yazi-mini: 12px; } /* Sağ panelin köşe düğmeleri 19 × 19'du: hem parmak için küçük hem tablet genişliğinde ekran dışına taşıyordu. */ .sagPanelSabitleBtn, .sagPanelKapatBtn { width: 44px; height: 44px; font-size: 18px; } /* Ağaç ve liste satırlarındaki mini düğmeler (Bastır, ▲ ▼ ×, köşe ekle/sil): 1 × 6 px dolgu parmakla basılamaz. */ .parcaMini, .parcaAgacAraclari button { min-width: 44px; min-height: 44px; padding: 6px 10px; font-size: 14px; } .parcaEkleDugmesi, .parcaBakisDugmesi, .parcaAracDugmesi, .parcaDugme, .parcaKapat { min-width: 44px; min-height: 44px; padding: 8px 12px; } /* Eskiz alanı ve 3B tuval: tarayıcının kendi kaydırma ve yakınlaştırmasını kapatıyoruz, hareketleri program yönetiyor (iki parmak yakınlaştırma + kaydırma). Eskizde zaten `touch-action: none` vardı; 3B tuvalde OrbitControls'ün dokunma desteğinin çalışması için aynısı gerekiyor. */ .parcaTuval canvas, .parcaCizimAlani { touch-action: none; } /* Sayı alanlarının ▲▼ okları: fare için tasarlanmış, parmakla iki ok da aynı yere denk geliyordu. */ .sagPanelSayiOku { min-width: 36px; min-height: 22px; } /* OK SÜTUNU DA GENİŞLİYOR (29.09) Düğme 36 px'e büyüdü ama sütunu (05-sagPanel.css) 18 px ve `overflow: hidden` kaldı. İnceleme, telefon: "sayı alanlarının ▴▾ okları sağdan kesik" -- 36 px'lik düğmenin yarısı sütunun dışındaydı, ok işareti kenarda yarım görünüyordu. Sütun düğmeyle aynı genişlikte; birim etiketi ve yazı payı da o kadar sola kayıyor. */ .sagPanelSayiOklari { width: 36px; } .sagPanelSayiKapsayiciOklu .sagPanelSayiInput { padding-right: 42px; } .sagPanelSayiKapsayiciOkluBirimli .sagPanelSayiInput { padding-right: 72px; } .sagPanelSayiKapsayiciOkluBirimli .sagPanelBirim { right: 38px; } /* ------------------------------------------------ CAD ŞERİTLERİ SARMALANIYOR ------------------------------------------------ ⚠️ Bunu ekran görüntüsünde yakaladım: dokunmatik hedefleri büyütmek CAD üst şeridini 1080 px yaptı ve ekran 1024 -- "Donanıma kaydet" sağdan kesiliyordu ("Donanı…"). Ölçüm betiğim taşmayı GÖRMEDİ: `scrollWidth > clientWidth` ile bakıyordum, şerit flex olduğu için kendisi genişliyor ve o karşılaştırma yanlış negatif veriyor. Göz gördü, ölçüm görmedi. Çözüm sarmalama: şerit iki satıra iniyor, hiçbir düğme kesilmiyor. Alternatifler daha kötüydü -- etiketleri gizlemek bilgi kaybı, yatay kaydırma ise düğmeyi "arayıp bulma" işi. */ .parcaUst, .parcaAracSeridi, .parcaBakislar, .parcaCizgiSeridi { flex-wrap: wrap; row-gap: 6px; } /* ------------------------------------------------ AĞAÇ KARTININ ARAÇLARI DA SARMALANIYOR ------------------------------------------------ ⚠️ Bunu da ekran görüntüsünde yakaladım: sol panel 200 px'e daralınca ağaç kartındaki dört düğme (Bastır + ▲ + ▼ + ×) sığmadı -- "Bastır" kırpıldı, × kartın dışına taştı ve kartın altında yatay kaydırma çubuğu çıktı. Ölçüm bunu GÖRMEDİ: ekran dışına taşma yoktu (panel İÇİNE taşıyor) ve yatay kaydırmayı `document.body` üzerinde ölçüyordum. Göz ikinci kez ölçümden önce gördü; ölçümü de düzelttim. */ .parcaAgacAraclari { flex-wrap: wrap; row-gap: 4px; } /* Ağaç satırı içeriğe göre uzuyor: sabit yükseklik kalırsa ikinci düğme satırı kırpılır. */ .parcaAgacSatiri { height: auto; } /* Sarmalanan üst şerit iki satır oluyor: pencere grid'i `auto auto 1fr` olduğu için gövde kendiliğinden kısalıyor, taşma olmuyor. */ .parcaUst { height: auto; min-height: var(--serit-yukseklik); } /* ------------------------------------------------ ANA EKRANIN DÜĞMELERİ ------------------------------------------------ Değişkeni ezmek bunlara İŞLEMEDİ: kendi yükseklikleri var. Tablet ölçümünde 28 hedeften 21'i 44 px altında kaldı ve listesi şuydu: gorunumHudBtn 36..53 × 24 (8 düğme) calismaModSekmesi 96 × 24, 137 × 24 solPanelAcilirMenuBtn 199 × 24 solPanelDaraltBtn 19 × 19 modelAgaciOk 14 × 16 Ölçmeden "değişkeni büyüttüm, oldu" deseydim tablette yine basılamayan 21 düğme kalacaktı. */ /* Yatay ölçü de 44: ölçümde bu düğmelerin yüksekliği 44'e çıkmıştı ama genişlik 28..39 px kalmıştı (↶ ve ↷ en darı). Tek yönde büyütmek parmak için yetmiyor. */ .gorunumHudBtn, .calismaModSekmesi, .solPanelAcilirMenuBtn { min-width: 44px; min-height: 44px; padding-top: 8px; padding-bottom: 8px; } /* ⚠️ `.pasif` DAHA ÖZGÜL BİR KURALLA EZİYORDU Ölçüm söyledi: geri al / ileri al düğmeleri (`gorunumHudBtn pasif`) 28 × 44 kaldı ve hesaplanmış değer `min-width: 28px`'ti -- yani yukarıdaki kural yüksekliği tuttu, genişliği tutmadı. Tek sınıflı seçici, iki sınıflı kuralı yenemiyor. Özgüllüğü eşitliyoruz. Gözle "tuttu galiba" demek yerine hesaplanmış değeri okumak bunu buldu. */ .gorunumHudBtn.pasif { min-width: 44px; } /* Daraltma oku ve ağaç okları: 19 × 19 ve 14 × 16'ydı. Önce 40 px yazmıştım; ama ölçüm ve test 44 ölçütünü kullanıyor -- ÖLÇÜT İKİ YERDE FARKLI olmasın. 40 ile bırakmak "ölçüme göre hâlâ küçük ama bence yeterli" demek olurdu; o karar kullanıcıyı ilgilendirir, sessiz kalınacak yer değil. */ .solPanelDaraltBtn, .modelAgaciOk { min-width: 44px; min-height: 44px; } } /* ------------------------------------------------------------ TABLET GENİŞLİĞİ: PANELLER DARALIYOR ------------------------------------------------------------ 1024 px'te ölçtüm: sol ağaç 250 + sağ panel 340 sabit olduğu için CAD'in orta alanı 437 × 588'e, eskiz tuvali 417 × 431'e düşüyor -- çizim yapılacak yer panellere gidiyor. Burada işaretçi türü değil GENİŞLİK sorun, o yüzden ölçüt genişlik. Paneller daralıyor, gizlenmiyor: üç sütunun birlikte görünmesi programın kendisi. */ @media (max-width: 1200px) { :root { --sol-panel-genislik: 200px; --sag-panel-genislik: 260px; } /* CAD penceresi kendi grid'ini kullanıyor. */ .parcaGovde { grid-template-columns: 200px minmax(0, 1fr) 280px; } /* Eskizde ölçü listesi de daralıyor. */ .parcaGovde.eskizModu .parcaEskizKabi .parcaCizimEditoru { grid-template-columns: minmax(0, 1fr); } } /* ===== css/bolumler/52-malzemeVeStok.css ===== */ /* ============================================================ MALZEME VE STOK — TEK PENCERE (29.09) ============================================================ Solda bölüm gezintisi, sağda içerik. Eski üç pencerenin (Malzeme, Stok, Donanım Kartları) görünümü korunuyor; bölmeler kendi sınıflarıyla geliyor. */ .malzemeVeStokKatmani { position: fixed; inset: 0; z-index: 10400; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(27, 35, 48, 0.38); animation: katmanGiris 0.12s linear; } .malzemeVeStokPenceresi { width: min(100%, 1040px); height: min(100%, 700px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); animation: pencereGiris 0.12s linear; } .malzemeVeStokBaslikAlani { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik); } .malzemeVeStokBaslik { margin: 0; font-size: 15px; font-weight: 700; } .malzemeVeStokOzet { margin: 2px 0 0; font-size: 12px; color: var(--renk-yazi-soluk); } .malzemeVeStokBaslikDugmeleri { display: flex; align-items: center; gap: 6px; } .malzemeVeStokAldimBtn, .malzemeVeStokKartBtn { padding: 6px 10px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius); background: var(--renk-panel-koyu, var(--renk-panel)); font-size: 12px; font-weight: 600; cursor: pointer; } .malzemeVeStokAldimBtn { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; } .malzemeVeStokKapatBtn { width: 28px; height: 28px; border: none; background: none; font-size: 20px; line-height: 1; color: var(--renk-yazi-soluk); cursor: pointer; } .malzemeVeStokGovde { flex: 1; min-height: 0; display: flex; } .malzemeVeStokGezinti { flex-shrink: 0; width: 168px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-right: 1px solid var(--renk-kenarlik); background: var(--renk-zemin); overflow-y: auto; } .malzemeVeStokGezintiBtn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: none; border-radius: var(--radius); background: none; color: var(--renk-yazi); font-size: 13px; text-align: left; cursor: pointer; } .malzemeVeStokGezintiBtn:hover { background: var(--renk-panel); } .malzemeVeStokGezintiBtn.aktif { background: var(--renk-ana-acik, rgba(37, 99, 235, 0.12)); color: var(--renk-ana); font-weight: 600; } .malzemeVeStokGezintiIkon { width: 18px; text-align: center; font-size: 14px; } .malzemeVeStokIcerik { flex: 1; min-width: 0; overflow-y: auto; padding: 12px; } .malzemeVeStokBolme[hidden] { display: none; } .malzemeVeStokAciklama { margin: 0 0 10px; font-size: 12px; color: var(--renk-yazi-soluk); } .malzemeVeStokBos { padding: 16px; text-align: center; color: var(--renk-yazi-soluk); font-size: 13px; } .stokDurumuBasligi, .alimGecmisBaslik { margin: 14px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--renk-yazi-soluk); } .stokDurumuBasligi:first-child { margin-top: 0; } /* Stok kalemi satırı (bant, bağlantı) */ .stokKalemSatiri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--renk-kenarlik-acik); } .stokKalemSatiri.borclu .stokKalemElimde { color: var(--renk-hata); font-weight: 700; } .stokKalemSatiri.kayitsiz .stokKalemElimde { color: var(--renk-yazi-soluk); } .stokKalemSol { flex: 1 1 220px; min-width: 0; } .stokKalemAd { font-size: 13px; font-weight: 600; } .stokKalemAlt { font-size: 11px; color: var(--renk-yazi-soluk); } .stokKalemSag { display: flex; align-items: center; gap: 6px; } .stokKalemElimde { min-width: 64px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; } .stokKalemSayi { width: 80px; padding: 5px 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius); font-size: 13px; text-align: right; } .stokKalemBtn { padding: 5px 9px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius); background: var(--renk-panel); font-size: 12px; cursor: pointer; } .stokKalemBtn:hover { background: var(--renk-zemin); } .stokKalemBtn.birincil, .stokKalemEkleBtn { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; } .stokKalemSayim, .stokKalemGecmis { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0 2px 24px; } .stokKalemGecmis { flex-direction: column; align-items: flex-start; gap: 2px; } .stokKalemGerekce { flex: 1 1 180px; padding: 5px 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius); font-size: 12px; } .stokKalemHareket, .stokKalemGecmisBos { font-size: 11px; color: var(--renk-yazi-soluk); font-variant-numeric: tabular-nums; } .bantFiyatSatiri { display: flex; align-items: center; gap: 4px; } .bantFiyatAlani { width: 70px; } .baglantiGrupBasligi { margin: 12px 0 2px; font-size: 12px; font-weight: 700; color: var(--renk-yazi); } .baglantiGrupBasligi:first-child { margin-top: 0; } /* Malzeme aldım fişi */ .alimUstSatir, .alimSatiri, .alimAltSatir { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; } .alimTedarikci, .alimNot, .alimKalemSecimi, .alimAdet, .alimFiyat { padding: 6px 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius); font-size: 13px; } .alimTedarikci { flex: 1 1 160px; } .alimNot { flex: 2 1 200px; } .alimKalemSecimi { flex: 1 1 260px; min-width: 0; } .alimAdet { width: 80px; text-align: right; } .alimFiyat { width: 90px; text-align: right; } .alimBirim { font-size: 12px; color: var(--renk-yazi-soluk); min-width: 34px; } .alimSatirSilBtn { padding: 4px 8px; } .alimAltSatir { justify-content: flex-start; margin-top: 4px; } .alimToplam { flex: 1; font-size: 12px; color: var(--renk-yazi-soluk); } .alimFisi { padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius); background: var(--renk-zemin); } .alimFisBasligi { font-size: 12px; font-weight: 700; margin-bottom: 2px; } .alimFisKalemi, .alimFisNotu { font-size: 11px; color: var(--renk-yazi-soluk); } /* ===== css/bolumler/53-gezinti.css ===== */ /* ============================================================ ODADA GEZİNTİ KAPLAMASI (29.09) ============================================================ İçeride yürüyen kamera açıkken çizim alanının üstünde: ipucu (üst orta), çıkış düğmesi (üst sağ), telefonda joystick (sol alt). Tuval kardeşi; joystick olayları tuvale gitmiyor (stopPropagation + touch-action none). */ .gezintiKaplamasi { position: absolute; inset: 0; z-index: 6; pointer-events: none; } .gezintiIpucu { position: absolute; top: 48px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(27, 35, 48, 0.72); color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none; } .gezintiCikBtn { position: absolute; top: 48px; right: 16px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius); background: rgba(27, 35, 48, 0.82); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; pointer-events: auto; } .gezintiJoystick { position: absolute; left: 24px; bottom: 24px; width: 120px; height: 120px; border-radius: 50%; background: rgba(27, 35, 48, 0.28); border: 2px solid rgba(255, 255, 255, 0.55); touch-action: none; pointer-events: auto; } .gezintiJoystickTopuz { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); pointer-events: none; } /* Gezintide kütüphane şeridi ve model ağacı gizli: yürüyüş bir bakış kipi; şerit altta, ağaç solda görüşü kapatıyordu. */ body.gezintiAcik .modulSeridi, body.gezintiAcik .yuzenAgac, body.gezintiAcik .modelAgaciYuvasi, body.gezintiAcik .gorunumKupu, body.gezintiAcik .gorunumKupuSigdir { display: none; } /* ===== css/bolumler/54-uyelik.css ===== */ /* ============================================================ ÜYELİK (30.09, madde 19) ============================================================ Giriş perdesi, üye rozeti, yönetici "Üyeler" sekmesi. */ .uyeGirisKatmani { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--renk-zemin); } .uyeGirisKarti { position: relative; width: 100%; max-width: 380px; padding: 26px 26px 20px; border: 1px solid var(--renk-kenarlik); border-radius: 12px; background: var(--renk-panel); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); color: var(--renk-yazi); } .uyeGirisKapat { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--renk-yazi-soluk); font-size: 20px; line-height: 1; cursor: pointer; } .uyeGirisKapat:hover { background: var(--renk-alan); color: var(--renk-yazi); } .uyeGirisMarka { font-weight: 700; letter-spacing: 0.04em; color: var(--renk-ana-yazi); font-size: 12px; text-transform: uppercase; } .uyeGirisBaslik { margin: 6px 0 4px; font-size: 20px; } .uyeGirisAciklama { margin: 0 0 14px; color: var(--renk-yazi-ikincil); font-size: 12.5px; line-height: 1.4; } .uyeGirisUyari { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #e0a020; border-radius: 8px; background: rgba(224, 160, 32, 0.12); font-size: 12.5px; line-height: 1.45; } .uyeGirisUyari[hidden] { display: none; } .uyeGirisBaglanti { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--renk-ana-yazi); font: inherit; text-decoration: underline; cursor: pointer; } .uyeGirisSekmeler { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--renk-kenarlik); } .uyeGirisSekme { padding: 6px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--renk-yazi-ikincil); font: inherit; font-weight: 600; cursor: pointer; } .uyeGirisSekme.aktif { color: var(--renk-ana-yazi); border-bottom-color: var(--renk-ana); } .uyeGirisForm { display: flex; flex-direction: column; gap: 10px; } .uyeGirisAlan { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--renk-yazi-ikincil); } .uyeGirisAlan[hidden] { display: none; } .uyeGirisAlan input { padding: 9px 10px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); font: inherit; font-size: 14px; } .uyeGirisAlan input:focus { outline: 2px solid var(--renk-ana); outline-offset: 1px; } .uyeGirisHata { color: #c0392b; font-size: 12.5px; } .uyeGirisHata[hidden] { display: none; } .uyeGirisDugme { margin-top: 4px; padding: 10px; border: 0; border-radius: 8px; background: var(--renk-ana); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .uyeGirisDugme:disabled { opacity: 0.6; cursor: wait; } .uyeGoogleKutusu { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .uyeGoogleKutusu[hidden] { display: none; } .uyeGirisAyirici { width: 100%; display: flex; align-items: center; gap: 10px; color: var(--renk-yazi-soluk); font-size: 11px; } .uyeGirisAyirici::before, .uyeGirisAyirici::after { content: ""; flex: 1; border-top: 1px solid var(--renk-kenarlik); } .uyeGirisAltNot { margin-top: 14px; color: var(--renk-yazi-soluk); font-size: 11px; line-height: 1.4; } /* Rozet */ .uyeRozeti { position: fixed; top: 6px; right: 10px; z-index: 900; display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border: 1px solid var(--renk-kenarlik); border-radius: 999px; background: var(--renk-panel); font-size: 12px; color: var(--renk-yazi); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .uyeRozeti[hidden] { display: none; } /* Header'ın sağ köşesinde: akışta durur, düğmelere binmez (30.09). */ .uyeRozeti.uyeRozetiHeaderde { position: static; margin-left: 6px; padding: 2px 4px 2px 8px; font-size: 11px; } .uyeRozetiHeaderde .uyeRozetAdi { max-width: 110px; } .uyeRozetiHeaderde .uyeRozetSure { display: none; } /* Telefonda header'daki rozet yalnız düğmeler. */ @media (max-width: 760px) { .uyeRozetiHeaderde .uyeRozetAdi { display: none; } .uyeRozeti.uyeRozetiHeaderde { padding-left: 4px; } } .uyeRozetAdi { font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uyeRozetSure { color: var(--renk-yazi-soluk); font-size: 11px; } .uyeRozetDugme { padding: 3px 8px; border: 1px solid var(--renk-kenarlik); border-radius: 999px; background: var(--renk-alan); color: var(--renk-yazi); font: inherit; font-size: 11px; cursor: pointer; } .uyeRozetDugme:hover { border-color: var(--renk-ana); color: var(--renk-ana-yazi); } /* Çıkış yap: kırmızı (30.09). */ .uyeRozetDugme.uyeRozetCikis { border-color: #c62828; background: #d32f2f; color: #fff; font-weight: 600; } .uyeRozetDugme.uyeRozetCikis:hover { background: #b71c1c; border-color: #b71c1c; color: #fff; } /* Yönetici · Üyeler */ .uyelerSekmesi { display: flex; flex-direction: column; gap: 12px; } .uyelerAyarlar { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan); } .uyelerAyarlar[hidden] { display: none; } .uyelerAyarSatiri { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .uyelerAnahtar { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--yazi-kucuk); } .uyelerAyarAlani { display: inline-flex; align-items: center; gap: 8px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .uyelerAyarAlani input { padding: 4px 6px; border: 1px solid var(--renk-kenarlik); border-radius: 4px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); font: inherit; } .uyelerAyarAlani input[type="number"] { width: 64px; } .uyelerGoogle input { flex: 1; min-width: 240px; } .uyeSatiri { flex-wrap: wrap; } .uyeSatiri.pasif { opacity: 0.6; } .uyeAraclari { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .uyeSecim { padding: 3px 6px; border: 1px solid var(--renk-kenarlik); border-radius: 4px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); font: inherit; font-size: var(--yazi-mini); } /* Şifre yenileme / değiştirme (30.09) */ .uyeGirisBilgi { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); color: var(--renk-yazi); font-size: var(--yazi-kucuk); line-height: 1.4; } .uyeGirisBilgi[hidden], .uyeGirisBaglanti[hidden], .uyeGirisSekmeler[hidden] { display: none; } .uyeSifreKatmani { background: rgba(0, 0, 0, 0.45); } /* Üye başına ek izinler (30.09) */ .uyeEkIzinler { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 11px; color: var(--renk-yazi-ikincil); } .uyeEkIzin { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .uyeEkIzin input:disabled + span { opacity: 0.6; } .uyeEkIzinNot { margin-left: auto; font-weight: 600; } /* ===== css/bolumler/55-kesimSiparisi.css ===== */ /* ============================================================ KESİM SİPARİŞİ (30.09, madde 23) ============================================================ Kesime gönder penceresi ve yönetici "Siparişler" sekmesi. */ .kesimSiparisKatmani { position: fixed; inset: 0; z-index: 1380; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.45); } .kesimSiparisPenceresi { display: flex; flex-direction: column; width: min(860px, 100%); max-height: min(90vh, 860px); border-radius: var(--radius-orta); background: var(--renk-panel); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32); overflow: hidden; color: var(--renk-yazi); } .kesimSiparisBaslikAlani { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); } .kesimSiparisBaslik { font-size: var(--yazi-normal); font-weight: 700; } .kesimSiparisAltBaslik { margin-top: 3px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .kesimSiparisKapat { flex: none; width: 30px; height: 30px; border: 1px solid var(--renk-kenarlik); border-radius: 50%; background: var(--renk-panel); color: var(--renk-yazi); font-size: 18px; line-height: 1; cursor: pointer; } .kesimSiparisGovde { overflow: auto; padding: 12px 18px 18px; } .kesimSiparisBolum + .kesimSiparisBolum { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--renk-kenarlik-acik); } .kesimSiparisBolumBaslik { margin: 0 0 10px; font-size: var(--yazi-kucuk); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--renk-yazi-ikincil); } .kesimSiparisRakamlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 10px; } .kesimSiparisRakam { padding: 8px 10px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); text-align: center; } .kesimSiparisRakamDeger { font-size: 16px; font-weight: 700; } .kesimSiparisRakamEtiket { font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .kesimSiparisDolaplar { margin: 0; padding: 0; list-style: none; } .kesimSiparisDolap { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--renk-kenarlik-acik); font-size: var(--yazi-kucuk); } .kesimSiparisDolapOlcu, .kesimSiparisDolapParca { color: var(--renk-yazi-ikincil); } .kesimSiparisDolapFiyat { font-weight: 600; } .kesimSiparisFiyatNotu { margin-top: 8px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .kesimSiparisUyari { margin-top: 8px; padding: 7px 10px; border-left: 3px solid var(--renk-uyari); border-radius: 0 var(--radius-kucuk) var(--radius-kucuk) 0; background: rgba(217, 138, 0, 0.08); font-size: var(--yazi-kucuk); } .kesimSiparisFiyatsiz { border-left-color: var(--renk-tehlike); background: rgba(244, 117, 111, 0.1); font-weight: 600; } .kesimSiparisUyariKatli { margin-top: 8px; font-size: var(--yazi-kucuk); } .kesimSiparisUyariKatli summary { cursor: pointer; color: var(--renk-yazi-ikincil); } .kesimSiparisTipler, .kesimSiparisOdeme { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 10px; } .kesimSiparisTip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--yazi-kucuk); cursor: pointer; } .kesimSiparisOdemeBaslik { font-size: var(--yazi-kucuk); font-weight: 700; } .kesimSiparisOdemeNotu { width: 100%; font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .kesimSiparisForm { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 14px; margin-bottom: 12px; } .kesimSiparisAlan { display: flex; flex-direction: column; gap: 4px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .kesimSiparisAlan[hidden] { display: none; } .kesimSiparisAlan input, .kesimSiparisAlan textarea { padding: 7px 9px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); color: var(--renk-yazi); font: inherit; font-size: var(--yazi-kucuk); } .kesimSiparisAlan textarea { min-height: 56px; resize: vertical; } .kesimSiparisSerit { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; } .kesimSiparisDurum { flex: 1 1 200px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .kesimSiparisDurum.hatali { color: var(--renk-tehlike); } .kesimSiparisGonderBtn { padding: 9px 18px; border: 0; border-radius: var(--radius-kucuk); background: var(--renk-vurgu); color: #fff; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; } .kesimSiparisGonderBtn:disabled { opacity: 0.5; cursor: default; } .kesimSiparisListe { display: flex; flex-direction: column; gap: 8px; } .kesimSiparisBos { font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .kesimSiparisKart, .siparisYonetimKarti { padding: 10px 12px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); font-size: var(--yazi-kucuk); } .kesimSiparisKartUst, .siparisYonetimUst { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; } .kesimSiparisKartNo { font-weight: 700; font-variant-numeric: tabular-nums; } .kesimSiparisKartAd, .siparisYonetimKimden { flex: 1; } .siparisYonetimTarih { color: var(--renk-yazi-ikincil); } .kesimSiparisRozet { padding: 2px 9px; border-radius: 999px; background: var(--renk-kenarlik-acik); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .kesimSiparisRozet.durum-sirada { background: #e8eef7; color: #2a4d8f; } .kesimSiparisRozet.durum-onaylandi { background: #e6f4ea; color: #1f6f3f; } .kesimSiparisRozet.durum-kesiliyor { background: #fff1d6; color: #9a5b00; } .kesimSiparisRozet.durum-bantlandi { background: #fbe7cf; color: #8a4a00; } .kesimSiparisRozet.durum-kargoda { background: #e3f2ff; color: #0b5aa5; } .kesimSiparisRozet.durum-teslim { background: #e3f6e8; color: #1e6b3a; } .kesimSiparisRozet.durum-iptal { background: #f4e0e0; color: #8b2a2a; } .kesimSiparisKartOzet, .siparisYonetimOzet, .siparisYonetimTeslimat { color: var(--renk-yazi-ikincil); } .kesimSiparisKartTakip, .kesimSiparisKartNot, .siparisYonetimNot { margin-top: 4px; } .kesimSiparisIptalBtn { margin-top: 8px; padding: 4px 10px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); color: var(--renk-yazi); font: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .siparislerSuzgec { margin: 8px 0; } .siparislerSuzgec select, .siparisYonetimDuzen select, .siparisYonetimDuzen input { padding: 5px 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); color: var(--renk-yazi); font: inherit; font-size: var(--yazi-kucuk); } .siparisYonetimDolaplar { margin: 4px 0; padding-left: 18px; color: var(--renk-yazi-ikincil); } .siparisYonetimDuzen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .siparisYonetimDuzen input { flex: 1 1 140px; } /* Kabul adımı (30.09) */ .siparisKabulFormu { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--renk-kenarlik-acik); border-left: 4px solid #1f6f3f; border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); } .siparisKabulBaslik { font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .siparisKabulFormu .siparisYonetimDuzen:first-of-type { margin-top: 6px; } .siparisKabulBtn { font-weight: 600; } .siparisRedBtn { color: #8b2a2a; } .siparisYonetimOnay, .kesimSiparisKartOnay { margin-top: 6px; padding: 6px 10px; border-left: 3px solid #1f6f3f; background: rgba(31, 111, 63, 0.07); font-size: var(--yazi-kucuk); } .siparisYonetimRed, .kesimSiparisKartRed { border-left-color: #8b2a2a; background: rgba(139, 42, 42, 0.06); } @media (max-width: 720px) { .kesimSiparisKatmani { padding: 0; } .kesimSiparisPenceresi { width: 100%; max-height: 100vh; border-radius: 0; } .kesimSiparisDolap { grid-template-columns: 1fr auto; } } /* Koli penceresi: etiket yazdırma düğmesi (madde 23). */ .koliEtiketBtn { margin-top: 6px; padding: 5px 12px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); color: var(--renk-yazi); font: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } /* ===== css/bolumler/56-yapayZeka.css ===== */ /* ============================================================ YAPAY ZEKÂ (30.09, madde 25) ============================================================ Yazarak / konuşarak çiz penceresi. */ .yzKatmani { position: fixed; inset: 0; z-index: 1380; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.45); } .yzPenceresi { display: flex; flex-direction: column; width: min(760px, 100%); max-height: min(90vh, 820px); border-radius: var(--radius-orta); background: var(--renk-panel); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32); overflow: hidden; color: var(--renk-yazi); } .yzBaslikAlani { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); } .yzBaslik { font-size: var(--yazi-normal); font-weight: 700; } .yzAltBaslik { margin-top: 3px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .yzKapat { flex: none; width: 30px; height: 30px; border: 1px solid var(--renk-kenarlik); border-radius: 50%; background: var(--renk-panel); color: var(--renk-yazi); font-size: 18px; line-height: 1; cursor: pointer; } .yzGovde { overflow: auto; padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 10px; } .yzDurumSatiri { font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .yzDurumSatiri:empty { display: none; } .yzDurumUyari { padding: 7px 10px; border-left: 3px solid var(--renk-uyari); background: rgba(217, 138, 0, 0.08); color: var(--renk-yazi); } .yzMetin { width: 100%; padding: 9px 11px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); color: var(--renk-yazi); font: inherit; font-size: var(--yazi-normal); resize: vertical; box-sizing: border-box; } .yzOrnekler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--yazi-kucuk); } .yzOrnekBaslik { color: var(--renk-yazi-ikincil); } .yzOrnekBtn { padding: 3px 9px; border: 1px solid var(--renk-kenarlik); border-radius: 999px; background: var(--renk-alan-vurgu); color: var(--renk-yazi); font: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .yzFoto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .yzFotoOnizleme { max-height: 72px; max-width: 120px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); } .yzFotoOnizleme[hidden], .yzFotoKaldir[hidden] { display: none; } .yzFotoKaldir { padding: 3px 9px; border: 1px solid var(--renk-kenarlik); border-radius: 999px; background: var(--renk-panel); color: var(--renk-yazi); font: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } .yzSerit { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; } .yzMesaj { flex: 1 1 200px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .yzAnaBtn { padding: 9px 18px; border: 0; border-radius: var(--radius-kucuk); background: var(--renk-vurgu); color: #fff; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; } .yzAnaBtn:disabled { opacity: 0.5; cursor: default; } .yzMikBtn { padding: 8px 14px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); color: var(--renk-yazi); font: inherit; cursor: pointer; white-space: nowrap; } .yzSonuc { padding-top: 10px; border-top: 1px solid var(--renk-kenarlik-acik); } .yzSonucBaslik { margin-bottom: 6px; font-weight: 700; } .yzSonucAltBaslik { margin: 10px 0 4px; font-size: var(--yazi-kucuk); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--renk-yazi-ikincil); } .yzListe { margin: 0; padding-left: 22px; } .yzKalem { padding: 4px 0; border-bottom: 1px dashed var(--renk-kenarlik-acik); font-size: var(--yazi-kucuk); } .yzKalemAd { font-weight: 600; margin-right: 8px; } .yzKalemAyrinti { color: var(--renk-yazi-ikincil); } .yzKalemNot { display: block; color: var(--renk-yazi-ikincil); font-style: italic; } .yzNot, .yzUyari { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--renk-kenarlik); font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .yzUyari { border-left-color: var(--renk-uyari); color: var(--renk-yazi); background: rgba(217, 138, 0, 0.08); } .yzUyariKarti { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--renk-kenarlik-acik); border-left-width: 4px; border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); font-size: var(--yazi-kucuk); } .yzUyariKarti.onem-yuksek { border-left-color: var(--renk-tehlike); } .yzUyariKarti.onem-orta { border-left-color: var(--renk-uyari); } .yzUyariKarti.onem-dusuk { border-left-color: var(--renk-kenarlik); } .yzUyariUst { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .yzUyariOneri { margin-top: 3px; color: var(--renk-yazi-ikincil); } .yzSunumKutusu { margin-top: 10px; } .yzSunumKutusu .yzSerit { justify-content: space-between; margin-bottom: 4px; } .yzSunumKutusu .yzSonucAltBaslik { margin: 0; } .uyelerYz { margin-top: 8px; } .uyelerYzAnahtar { flex: 1 1 320px; } @media (max-width: 720px) { .yzKatmani { padding: 0; } .yzPenceresi { width: 100%; max-height: 100vh; border-radius: 0; } } /* Eksik fiyat sihirbazı (madde 30) */ .eksikFiyatListe { display: flex; flex-direction: column; gap: 6px; } .eksikFiyatSatiri { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--renk-kenarlik-acik); font-size: var(--yazi-kucuk); } .eksikFiyatAd { flex: 1 1 auto; } .eksikFiyatMiktar { color: var(--renk-yazi-ikincil); } .eksikFiyatGiris { width: 120px; padding: 6px 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); color: var(--renk-yazi); font: inherit; font-size: var(--yazi-kucuk); text-align: right; } /* Müşteri paylaşım bağlantısı (madde 31) */ .yzPaylasimKutusu { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); } .yzPaylasimKutusu .yzSerit { flex-wrap: wrap; gap: 6px; margin: 6px 0 0; } .yzPaylasimKutusu input.yzMetin { width: 100%; box-sizing: border-box; margin-top: 6px; font-family: inherit; } .yzPaylasimKutusu input.yzTelefon { width: auto; flex: 1 1 180px; margin-top: 0; } .yzPaylasimKutusu a.yzMikBtn, .yzPaylasimKutusu a.yzAnaBtn { text-decoration: none; display: inline-flex; align-items: center; } /* ===== css/bolumler/45-telefon.css ===== */ /* ============================================================ TELEFON (kullanıcı 21.09) ============================================================ 12.09'da telefon BİLEREK yapılmamıştı; gerekçesi 41-tablet.css'in başında duruyor ve hâlâ geçerli: program üç sütunla çalışıyor (ağaç + çizim + özellik paneli), 390 px'te üçü aynı anda görünmüyor. Kullanıcı 21.09 farklı bir şey istedi: > "bir de uygulamayı gerçekten çalışabilecek şekilde > telefona responsive etsen, buradan programın akışını > kontrol edebilirdim" Yani telefonda DOLAP ÇİZMEK değil, İŞİ İZLEMEK istiyor: hangi proje nerede, kesime hazır mı, sıradaki adım ne. Telefonda ölçtüm (390 × 844, dokunmatik açık) ve şunu gördüm: proje listesi düzgün, tek sütun, okunur çalışma ekranı 3B çiziliyor AMA üst menü taşıyor (Proje ve Tasarım ekran dışında) sol panel hiç açılmıyor -- üretim akışına ulaşmanın yolu yok durum çubuğu kesik Bu dosya o üçünü çözüyor. Çizim yapmayı telefona taşımıyor: paneller ÜSTTE AÇILAN KATMAN oluyor, kapatınca çizim yine tam ekran. NEDEN 760 px Tablet kuralları 1200 px'te başlıyor ve orada üç sütun hâlâ duruyor. 760'ın altında üç sütun fiziksel olarak sığmıyor; katmana geçme sınırı orası. */ @media (max-width: 760px) { /* -------------------------------------------- PANELLER ÜSTTE AÇILIYOR -------------------------------------------- Akış yerinde kalsın diye panel çizimi itmiyor, üstüne biniyor. Kapatınca çizim yine tam ekran. */ .solPanel:not(.solPanelDar) { position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 330px); z-index: 60; box-shadow: 2px 0 18px rgba(15, 23, 42, 0.28); } /* FIXED OLUNCA İÇERİK ÇÖKÜYORDU Panel kabuğun içindeyken yüksekliğini ondan alıyor. `position: fixed` ile kabuğun dışına çıkınca çocuklar yüksekliksiz kaldı: ölçtüm, model ağacı ve içerik alanı 0 px oldu -- panel açılıyor ama BOŞ görünüyordu. Yükseklik burada açıkça veriliyor, içerik alanı da kalanı alıp kendi içinde kayıyor. */ .solPanel:not(.solPanelDar) { height: 100dvh; } .solPanel:not(.solPanelDar) > .solPanelIcerik { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* ESKİ DAR EKRAN KURALINI EZİYORUZ 08-hareket.css, 746 px altında paneli zorla daraltıyor ve içeriği `display: none` yapıyor. O kural çizim alanını korumak için yazılmıştı ve telefonda haklıydı: panel yerinde dursaydı 390 px ekranda çizime yer kalmazdı. Artık panel çizimin ÜSTÜNE açıldığı için yer çalmıyor. Kullanıcı açtığında içerik görünmeli -- ölçtüm, o kural yüzünden panel açılıyor ama BOŞ görünüyordu. */ .solPanel:not(.solPanelDar) .solPanelBaslik { display: block; } .solPanel:not(.solPanelDar) #solPanelIcerik, .solPanel:not(.solPanelDar) .solPanelIcerik { display: flex; } /* MODEL AĞACI KURALLARI KALDIRILDI (22.09) Burada ağaç yuvasını geri açan iki kural vardı. Yuva sol panelin içindeyken gerekliydi; ağaç odanın üstünde yüzen kabuğa taşındı (49-yuzenAgac.css) ve kurallar hiçbir öğeye denk gelmiyordu. Ölü kuralı bırakmak sonraki okuyucuya ağacın hâlâ panelde olduğunu söyler. */ /* Daraltılmış panel telefonda yer kaplamıyor; yalnız açma düğmesi görünüyor (başlık alanı 40 px). */ .solPanel.solPanelDar { width: 38px; } /* ID SEÇİCİSİ GEREKİYOR (22.09) Bu kural `.sagPanel` diye yazılmıştı ve HİÇ İŞLEMİYORDU: `05-sagPanel.css` paneli `#sagPanel, .sagPanel` diye kuruyor ve öğede id duruyor. CSS'te id seçicisi sınıf seçicisini yener -- dosya sırası değiştirmiyor. Telefonda ölçülen sonucu: sağ panel açılınca katman olmuyor, `position: relative · 260 px` kalıyor ve çizim alanını 92 px'e sıkıştırıyordu. Ölçü kutuları kesiliyordu ("60(", "77("). Aynı özgüllükle yazıp bu dosyanın en sonda yüklenmesine dayanıyoruz; sol panelde aynı sorun yok çünkü orada kural `.solPanel:not(...)` ile zaten iki sınıf taşıyor. */ #sagPanel, .sagPanel { position: fixed; top: 0; bottom: 0; right: 0; width: min(90vw, 360px); z-index: 60; box-shadow: -2px 0 18px rgba(15, 23, 42, 0.28); } /* Açıkken de genişlik buradan: `#sagPanel.sagPanelAcik` kuralı da id'li ve masaüstünün 260 px'ini dayatıyordu. 390 px ekranda 260 px panelde ölçü kutuları sıkışıyor. */ #sagPanel.sagPanelAcik, .sagPanel.sagPanelAcik { width: min(90vw, 360px); } /* Kapalıyken yer kaplamamalı: 05-sagPanel'in `#sagPanel.sagPanelKapali` kuralı da id'li, o da eziliyordu. */ #sagPanel.sagPanelKapali, .sagPanel.sagPanelKapali { width: 0; box-shadow: none; } /* -------------------------------------------- ÜST MENÜ TAŞMIYOR -------------------------------------------- 390 px'te altı menü başlığı sığmıyordu ve ilk ikisi (Proje, Tasarım) ekran dışında kalıyordu -- yani telefondan projeye dönmek bile mümkün değildi. */ /* KAYDIRMA KURALI İŞLEMİYORDU (29.09) İnceleme: "390 px'te üst menüde yalnız Proje görünüyor; Tasarım simgesi tam ekran düğmesinin altında; Malzeme, Üretim, CAD, Pazaryeri ekran dışında ve ulaşılamıyor." Ölçtüm: `.ustMenu` 113 px genişlikteydi ve scrollWidth de 113 -- kaydıracak bir şey görmüyordu. Sebep grid: proje bilgisi 820 px altında `display: none` oluyor, işlem alanı ortadaki `1fr` sütununa kayıyor ve sağdaki `auto` sütunu boş kalıyor. Altı grup 113 px'e sıkışıyor, tam ekran düğmesi Tasarım'ın üstüne biniyordu. Telefonda şerit iki sütun: marka | işlemler. Grup düğmeleri yalnız simge -- adı `title`da ve ekran okuyucuda duruyor, açılan grubun komutları alt katta yazıyla çıkıyor. Altı simge, tam ekran ve tema 390 px'e sığıyor; daha dar ekranda gruplar kendi içinde kayıyor. */ .calismaHeaderUstSatir { grid-template-columns: auto minmax(0, 1fr); gap: 6px; padding: 0 6px; } .calismaHeaderMarka { padding-right: 6px; } .calismaHeaderIslemler { min-width: 0; } .ustMenu { flex: 1 1 auto; min-width: 0; justify-content: flex-end; } .ustMenuGruplari { flex-wrap: nowrap; min-width: 0; overflow-x: auto; /* Kaydırma çubuğu 44 px'lik düğmeyi kısaltmasın. */ scrollbar-width: none; } .ustMenuGrupBtn { flex: 0 0 40px; width: 40px; padding: 0; justify-content: center; } /* Ad görünmüyor ama erişilebilir adın parçası kalıyor: `display: none` onu ekran okuyucudan da silerdi. */ .ustMenuGrupAdi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .calismaHeader .tamEkranDugmesi, .calismaHeader .temaDugmesi { width: 40px; } /* -------------------------------------------- ÇİZİM ÜSTÜ ARAÇ ÇUBUĞU -------------------------------------------- BAKIŞ / GÖSTER düğmeleri iki satıra bölünüp kenardan taşıyordu; artık yatay kayıyor. */ .cizimAlani .cizimUstAraclar, .cizimUstAraclar { overflow-x: auto; flex-wrap: nowrap; } /* GÖSTER ÇUBUĞU TEK SATIR (29.09) İnceleme: "model ağacı GÖSTER çubuğunun (geri/ileri al) üstüne biniyor; Bant düğmesi ekran dışında." Yukarıdaki kural `.cizimUstAraclar` diye yazılmıştı; çubuğun kendisi `.gorunumHud` ve 04-cizimAlani.css'te `flex-wrap: wrap` taşıyor. Telefonda iki satıra iniyor (Ölçü … Izgara | ↶ ↷) ve Bant sağdan kesiliyordu. Artık tek satır ve kendi içinde kayıyor; yüksekliği bir düğme boyu, ağaç onun altından başlıyor (49-yuzenAgac.css). */ .gorunumHud { flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .gorunumHud > * { flex-shrink: 0; } /* -------------------------------------------- DURUM ÇUBUĞU -------------------------------------------- "Oda … | DOLAP | PANEL ; | SEÇİM y" diye kesiliyordu. Kayabilir hâle geliyor; sayılar okunur kalsın diye bölümler daralmıyor. */ /* KAYDIRMA YETMEDİ, SARILIYOR (29.09) İnceleme: "durum çubuğu kesik, SUNUCU değeri görünmüyor." Kayan çubukta sunucu durumu hep sağda, ekran dışında kalıyordu -- kaydırılabildiğini de kimse bilmiyor. "Kaydedildi mi" telefonda en çok bakılan bilgi. Çubuk iki satıra iniyor: bölümler bütün kalıyor (sayı ile etiketi ayrılmıyor), sunucu ve birim ikinci satırda yine sağa yaslı. */ .durumCubugu { height: auto; min-height: var(--durum-yukseklik); flex-wrap: wrap; } .durumCubuguBolum { flex-shrink: 0; height: var(--durum-yukseklik); } /* -------------------------------------------- PENCERELER TAM EKRAN -------------------------------------------- Ortada duran 640 px'lik pencere telefonda kenarlardan taşıyor ve düğmeleri ekran dışında kalıyor. */ .pencereKatmani .pencere, .modalKatman > div, .yoneticiPenceresi, .nestingPenceresi { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; } /* -------------------------------------------- LEVHA YERLEŞİMİ ALT ÇUBUĞU (22.09) -------------------------------------------- Telefonda ölçüldü: dokuz düğme tek satıra diziliyor (`justify-content: flex-end` + sarma yok) ve taşma SOLA doğru oluyor. Ekranda ölçülen konumlar: Aramayı durdur −504 Kesim listesi −414 CSV −339 Etiketler −277 G kod önizleme −187 NC dosyaları −101 Yani telefondan NC dosyası, kesim listesi, CSV, etiket ve G kod önizleme ALINAMIYORDU. Çubuk kendi içinde de kaymıyordu (overflow: visible). Telefonda düğmeler sarılıyor: hepsi ekranda kalıyor, çubuk birkaç satır yükseliyor. Hizalama da başa alındı -- sağa yaslamak dar ekranda ilk düğmeyi dışarı itiyor. */ .nestingAltCubuk { flex-wrap: wrap; justify-content: flex-start; row-gap: 6px; } /* Sonuç kartları şeridi de taşıyordu (31 öğe ekran dışında). Kendi içinde kayabilsin. */ .nestingSonucSeridi, .nestingSonuclar { overflow-x: auto; } /* ============================================================ TELEFONDA PANEL ALTTAN, DÜĞMELER İKONLU, KÜÇÜK TUŞ TAKIMI (29.09) ============================================================ Kullanıcı: "telefon modunda dolaba tıklayınca açılan kısmı da ikonlarla ve biraz daha küçültebilirsen daha iyi olur" ve "sayı girerken klavye çok fazla yer kaplıyor". Panel ekranı baştan sona kaplıyordu (sağdan 360 px, tam boy): dolap görünmüyor, düğmeler ve ölçü kutuları iri. panel alttan açılan yarım boy çekmece; tutamağa dokununca tam boy (sagPanelTamBoy) işlemler Kilitle / Kopyala / Yön / Konum / Sil tek sırada, ikon üstte küçük yazı altta ölçü satırı etiket solda, kutu sağda, tek satır tuş takımı sistem klavyesi yerine altta ince şerit (sayiTusTakimi.js) */ #sagPanel, .sagPanel, #sagPanel.sagPanelAcik, .sagPanel.sagPanelAcik { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: min(52vh, 460px); border-radius: 14px 14px 0 0; box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.28); transition: height 0.18s ease; } #sagPanel.sagPanelTamBoy, .sagPanel.sagPanelTamBoy { height: 88vh; } /* Panel açıkken sahne panelin ÜSTÜNDE kalan alana sığsın (kullanıcı: "aşağıya almışsın ama hâlâ oda görünmüyor burası açıkken"). Çizim alanı kısalınca ResizeObserver (threeBaslat) kamerayı yeniden ölçüyor; dolap görünür alanın ortasına geliyor. Tam boyda küçültülmüyor. */ body:has(#sagPanel.sagPanelAcik:not(.sagPanelTamBoy)) #cizimAlani { height: calc(100% - min(52vh, 460px) + 24px); } /* Kalan küçük alanı şerit ve model ağacı kapatıyordu: panel açıkken ikisi de çekiliyor, kapanınca dönüyor. */ body:has(#sagPanel.sagPanelAcik) .modulSeridi, body:has(#sagPanel.sagPanelAcik) .modelAgaciYuvasi { display: none; } #sagPanel.sagPanelKapali, .sagPanel.sagPanelKapali { width: 100%; height: 0; box-shadow: none; } .sagPanelTutamak { display: block; flex: 0 0 auto; width: 100%; height: 18px; padding: 0; border: 0; background: transparent; cursor: grab; } .sagPanelTutamak::before { content: ""; display: block; width: 42px; height: 4px; margin: 7px auto; border-radius: 2px; background: var(--renk-kenarlik); } .sagPanelBaslikAlani { padding-top: 0; padding-bottom: 4px; } /* İşlemler: tek sıra ikonlu küçük düğmeler. */ /* 05-sagPanel'de "tek kalan tam genişlik", "Sil tam genişlik" ve üç sütun kuralları sınıf zinciriyle yazılmış; id ile kapsıyoruz ki telefonda beşi tek sırada dursun. */ #sagPanel .sagPanelDolapIslemleri .sagPanelDolapIslemButonlari { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } #sagPanel .sagPanelDolapIslemleri .sagPanelDolapIslemButonlari .sagPanelIslemBtn { grid-column: auto; } .sagPanelIslemBtn.ikonlu { flex-direction: column; gap: 2px; min-height: 48px; padding: 4px 2px; } .sagPanelIslemBtn.ikonlu .sagPanelIslemMetin { font-size: 10.5px; line-height: 1.1; white-space: nowrap; } /* Ölçü satırı: etiket solda, kutu sağda. */ .sagPanelFormSatiri, .sagPanelSayiAlani { grid-template-columns: 38% minmax(0, 1fr); min-height: 38px; gap: 6px; } .sagPanelFormSatiri input, .sagPanelFormSatiri select { min-height: 36px; } /* Tuş takımı açıkken panelin altı takımın arkasında kalmasın. */ body.sayiTusTakimiAcik .sagPanelIcerik { padding-bottom: 230px; } .sayiTusTakimi:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--renk-panel); border-top: 1px solid var(--renk-kenarlik); box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.18); } .sayiTusTakimiOzet { padding: 2px 4px 6px; color: var(--renk-yazi-ikincil); font-size: 13px; text-align: center; } .sayiTusTakimiIzgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; } .sayiTusu { height: 40px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-alan, #fff); color: var(--renk-yazi); font: inherit; font-size: 18px; touch-action: manipulation; } .sayiTusu:active { background: var(--renk-ana-acik); } .sayiTusuTamam { grid-column: span 2; border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; font-size: 16px; font-weight: 600; } /* MALZEME VE STOK (29.09): pencere tam ekran, gezinti üstte yatay kaydırılan şerit; satırlar alt alta. */ .malzemeVeStokKatmani { padding: 0; } .malzemeVeStokPenceresi { width: 100%; height: 100%; border-radius: 0; } .malzemeVeStokGovde { flex-direction: column; } .malzemeVeStokGezinti { width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: none; border-bottom: 1px solid var(--renk-kenarlik); padding: 6px 8px; } .malzemeVeStokGezintiBtn { flex: 0 0 auto; padding: 6px 8px; font-size: 12px; } .malzemeVeStokBaslikDugmeleri .malzemeVeStokKartBtn { display: none; } .stokKalemSag { flex-wrap: wrap; } /* Gezinti (29.09): ipucu kısa, çıkış düğmesi üstte sağda. */ .gezintiIpucu { top: auto; bottom: 24px; max-width: 60vw; left: auto; right: 16px; transform: none; white-space: normal; text-align: center; } .gezintiCikBtn { top: 64px; } .gezintiJoystick { left: 16px; bottom: 24px; } /* ============================================================ CAD PENCERESİ TELEFONDA (29.09) ============================================================ Telefonda ölçtüm (390 × 844): üç sütunlu gövde 390 px'e sığmıyordu; bakış düğmeleri panelin üstüne biniyor, 3B tuval hiç görünmüyordu. Burada tek sütun: önce sahne / eskiz (ekranın yarısı), altında kısa ağaç, en altta kaydırılabilir özellik paneli. Şeritler yatay kaydırılır. */ /* (aynı medya bloğunun devamı: dosyada tek sorgu kuralı) */ .parcaTasarimPenceresi { font-size: 12px; } /* Üst şerit tek satır (30.09): [ad] [Model|Eskiz] [⋯] [×]. İkincil araçlar `.parcaUstEk` kabında; "⋯" ile ikinci satır olarak açılır, kapalıyken 3B alan büyür. */ .parcaUst { flex-wrap: wrap; gap: 6px; padding: 6px 8px; } .parcaUst .parcaBaslik { display: none; } .parcaUst > * { flex: 0 1 auto; min-width: 0; } .parcaUst .parcaAdGirisi { flex: 1 1 60px; min-width: 60px; padding: 4px 6px; } .parcaUst .parcaModAnahtari { flex: 0 0 auto; order: 0; } .parcaUst .parcaUstAc { display: inline-block; flex: 0 0 auto; order: 1; padding: 4px 10px; font-size: 16px; line-height: 1; } .parcaUst .parcaUstAc.aktif { background: var(--renk-ana); border-color: var(--renk-ana); color: #fff; } .parcaUst .parcaKapat { flex: 0 0 auto; order: 2; } .parcaUstEk { display: none; } .parcaUst.ekAcik .parcaUstEk { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; order: 3; padding-top: 6px; border-top: 1px dashed var(--renk-kenarlik); } .parcaUstEk > * { flex: 0 1 auto; min-width: 0; } .parcaUstEk > .parcaAlan { flex: 1 1 40%; grid-template-columns: auto minmax(0, 1fr); } .parcaUstEk .parcaAlan select { width: 100%; min-width: 0; } .parcaUstEk .parcaBosluk { display: none; } .parcaUst select, .parcaUst .parcaDugme, .parcaUst button { padding: 4px 6px; font-size: 12px; min-height: 30px; } .parcaAracSeridi { flex-wrap: nowrap; overflow-x: auto; padding: 4px 8px; -webkit-overflow-scrolling: touch; } .parcaAracSeridi .parcaEkleDugmesi { min-width: 52px; padding: 3px 5px; flex: none; } /* Gövde (30.09): sahne / alttan açılan sayfa / sekme çubuğu. Ağaç ve özellik paneli sekmeyle açılır; ikisi de kapalıyken 3B alan ekranın tamamını kullanır. */ .parcaGovde { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "sahne" "alt" "sekmeler"; } .parcaSahneAlani, .parcaGovde.eskizModu .parcaEskizAlani { grid-area: sahne; min-height: 0; } .parcaAgac, .parcaOzellikPaneli { display: none; grid-area: alt; max-height: 44vh; border-right: 0; border-left: 0; border-top: 1px solid var(--renk-kenarlik); padding: 6px 8px; } .parcaGovde[data-alt-panel="agac"] .parcaAgac, .parcaGovde[data-alt-panel="panel"] .parcaOzellikPaneli { display: flex; } .parcaAltSekmeler { display: flex; grid-area: sekmeler; gap: 6px; padding: 6px 8px; border-top: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .parcaAltSekme { flex: 1 1 0; min-height: 36px; padding: 6px 8px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-alan); color: var(--renk-yazi); font: inherit; font-size: 13px; font-weight: 600; } .parcaAltSekme.aktif { background: var(--renk-ana); border-color: var(--renk-ana); color: #fff; } .parcaBakislar { flex-wrap: wrap; gap: 4px; padding: 4px 8px; } .parcaBakislar button, .parcaBakislar .parcaDugme { padding: 3px 7px; min-height: 28px; font-size: 12px; } .parcaYuzIpucu { flex-basis: 100%; margin-left: 0; font-size: 11px; line-height: 1.3; } /* Yüz eylem şeridi: tek satır, kaydırmalı, kısa düğmeler (3B alan küçülmesin). */ .parcaYuzEylemleri { flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 0 8px 4px; } .parcaYuzEylemi, .parcaYuzEylemleri .parcaDugme { flex: none; min-height: 30px; padding: 3px 9px; font-size: 12px; } /* Klavye ipucu telefonda anlamsız; yüz/kenar seçim ipucu kalsın. */ .parcaYuzIpucu:empty { display: none; } .parcaOlcuSeridi { padding: 4px 8px; font-size: 11px; } .parcaZamanCizelgesi { overflow-x: auto; min-height: 36px; } /* Eskiz şeritleri: tek satır, yatay kaydırma. */ .parcaCizimAraclari, .parcaKisitCubugu { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .parcaCizimAraclari .parcaAracDugmesi, .parcaKisitCubugu button { flex: none; padding: 4px 7px; min-height: 30px; font-size: 12px; } .parcaEskizKabi { padding: 4px 6px; } .parcaEskizUst { flex-wrap: wrap; gap: 6px; padding: 4px 8px; } .parcaEskizUst .parcaDugme { min-height: 30px; padding: 3px 8px; } .parcaEskizNotu { display: none; } /* Eskizde çizim alanı büyüsün: ağaç gizli, panel kısa, şeritler sıkı. */ .parcaGovde.eskizModu .parcaOzellikPaneli { max-height: 36vh; } .parcaGovde.eskizModu .parcaCizimAraclari, .parcaGovde.eskizModu .parcaKisitCubugu { padding: 2px 4px; gap: 3px; } .parcaGovde.eskizModu .parcaCizimIpucu { font-size: 11px; padding: 2px 0; } .parcaEskizDurumu { flex-wrap: wrap; row-gap: 2px; font-size: 11px; } /* Klavye kısayol kartı ve sağ tık menüsü ekrana sığsın. */ .parcaKisayolSutunlar { grid-template-columns: 1fr; gap: 10px; } .parcaKisayolKarti { left: 8px; right: 8px; max-height: 80vh; overflow: auto; } /* Teknik resim katmanı: başlık sarar, sayfa kenarsız. */ .parcaTeknikUst { flex-wrap: wrap; gap: 6px; padding: 6px 8px; } .parcaTeknikBaslik { flex-basis: 100%; white-space: normal; font-size: 12px; } .parcaTeknikSayfa { padding: 6px; } } /* ===== css/bolumler/46-modulSeridi.css ===== */ /* ============================================================ MODÜL ŞERİDİ (kullanıcı 22.09) ============================================================ Ekranın altında yüzen şerit: kategori sekmeleri ve küçük resimli modül kartları. KesApp'in en belirgin parçası buydu ve kullanıcı ASIL dolap ekleme yolu olmasını istedi. Çizimin ÜSTÜNE biniyor, yer çalmıyor: dolap eklemek bakarak yapılan bir iş, odayı görmek gerekiyor. Kartlar 96 px: ikon 128 px üretiliyor, küçültülünce keskin duruyor. Şerit yatay kayıyor -- yirmi modül de olsa yükseklik değişmiyor. */ .modulSeridi { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20; max-width: min(760px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border: 1px solid var(--renk-kenarlik); border-radius: 10px; background: var(--renk-panel); box-shadow: 0 6px 24px rgba(15, 23, 42, 0.18); } /* -------------------------------------------- SEKMELER -------------------------------------------- Kullanıcının kendi menüleri. Çok kategori olursa yatay kayıyor; sarılsaydı şerit büyüyüp odayı kapatırdı. */ .modulSeridiSekmeleri { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; } .modulSeridiSekmeleri::-webkit-scrollbar { display: none; } .modulSeridiSekme { flex: 0 0 auto; padding: 4px 10px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--renk-yazi-ikincil); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.1s linear, color 0.1s linear; } .modulSeridiSekme:hover { background: var(--renk-alan); color: var(--renk-yazi); } .modulSeridiSekme.aktif { background: var(--renk-ana); color: #ffffff; } /* -------------------------------------------- KARTLAR -------------------------------------------- */ .modulSeridiKartlari { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .modulSeridiKart { flex: 0 0 auto; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 5px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-alan); cursor: pointer; transition: border-color 0.1s linear, transform 0.1s linear; } .modulSeridiKart:hover { border-color: var(--renk-ana); transform: translateY(-2px); } /* Oda modunda değilken kart sebebini söylüyor: sessizce hiçbir şey yapmak en kötüsü. */ .modulSeridiKart.modulSeridiKartUyari { border-color: var(--renk-tehlike-kenar, #d97706); animation: modulSeridiSars 0.25s linear; } @keyframes modulSeridiSars { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } .modulSeridiKartGorseli { width: 100%; height: 56px; border-radius: 4px; background-color: var(--renk-panel); background-position: center; background-repeat: no-repeat; background-size: contain; } .modulSeridiKartAdi { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 10px; color: var(--renk-yazi-ikincil); } .modulSeridiBosYazi { margin: 0; padding: 6px 4px; max-width: 420px; font-size: 11px; line-height: 1.5; color: var(--renk-yazi-soluk); } /* -------------------------------------------- TELEFON -------------------------------------------- 390 px'te şerit kenarlara yapışıyor ve kartlar küçülüyor; oda yine görünür kalsın. */ @media (max-width: 760px) { .modulSeridi { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; padding: 6px 8px 8px; } .modulSeridiKart { width: 78px; } .modulSeridiKartGorseli { height: 44px; } } /* ÖLÇÜ KAYNAĞI ROZETİ Model alt/üst dolap diye işaretliyse ölçüsü projenin varsayılanından geliyor ve ekleme kutusu bir daha sormuyor. Rozet sol paneldeki listede vardı; liste şeride taşınınca o da geldi. Kartın sağ üstünde, küçük: bilgi veriyor ama kartı kalabalıklaştırmıyor. */ .modulSeridiKart { position: relative; } .modulSeridiKartRozeti { position: absolute; top: 3px; right: 3px; padding: 0 4px; border-radius: 3px; background: var(--renk-ana); color: #ffffff; font-size: 8px; font-weight: 700; letter-spacing: 0.06em; } /* KASA KARTI (kullanıcı 22.09) Boş dolap kurmanın yolu da şeritte. Kütüphane kartıyla aynı ölçüde ama görseli 3B minyatür değil, kasa tipinin şeması -- henüz ortada dolap yok. */ .modulSeridiKasaKarti .modulSeridiKartGorseli { display: flex; align-items: center; justify-content: center; padding: 4px; color: var(--renk-yazi-ikincil); } .modulSeridiKasaKarti:hover .modulSeridiKartGorseli { color: var(--renk-ana); } /* ============================================================ KASA OLUŞTUR KOLU (kullanıcı 22.09) ============================================================ > "kütüphane bir yere gitmesin; kasa oluştur düğmesini > kütüphane tarafının solunda dik bir şekilde istiyorum, > ona bastığımda animasyonla kütüphane içerikleri gidip > kasa oluştur içerikleri gelsin" > "şeridin sağında olacak kasa oluştur" Kasa önce sekmelerin arasında bir kategoriydi. Kütüphane kategorileriyle aynı sırada durunca o da bir kategori gibi okunuyordu -- oysa öbürleri hazır model, bu sıfırdan kasa. İki ayrı iş, iki ayrı yer. Kol dik duruyor çünkü yatay dursa sekme satırını uzatır ve kartların yerini alırdı. Dikeyde şeridin tam boyunu kaplıyor ve kaydırma ondan bağımsız: kullanıcı kütüphaneyi sağa sola kaydırırken kol yerinde kalıyor. */ .modulSeridi { flex-direction: row; align-items: stretch; gap: 8px; } /* Gövde: sekmeler + kartlar. Kolun yanında tek parça duruyor ki soluma animasyonu ikisine birden işlesin. */ .modulSeridiGovde { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; transition: opacity var(--gecis-orta), transform var(--gecis-orta); } /* DEĞİŞİM ANIMASYONU İki liste de aynı yerde duruyor; içerik anında değişirse neyin neye dönüştüğü görünmüyor. Gövde soluyor, içerik o sırada değişiyor, sonra geri geliyor. Kayma küçük (6 px) ve yatay: listenin geldiği yönü gösteriyor, dikkat çalmıyor. GİRİŞ animasyonu: içerik zaten değişmiş oluyor, yeni liste bu noktadan yerine kayıyor. Çıkışı beklemek içeriği geciktiriyordu. */ .modulSeridiGovdeGiris { opacity: 0; transform: translateX(6px); } /* ============================================================ KOL ŞERİDİN BOYUNU BELİRLEMESİN (kullanıcı 25.09) ============================================================ > "bizim kütüphane için açılan ekran odadan büyük neredeyse" Ölçüldü (1030x760 pencere, boş kütüphane): şerit 480 x 198 kol 30 x 178 ← boyu bu belirliyordu gövde 420 x 178 gövdenin içeriği 420 x 45 Şerit BOMBOŞKEN bile 198 px, yani 3B tuvalin %28'i. Sebep: "KASA OLUŞTUR" 12 harf, `nowrap` yüzünden tek sütunda alt alta 158 px ediyordu; gövde de flex satırında ona hizalanıyor ve dörtte üçü boş duruyordu. Yazı dik kalıyor (kullanıcının 23.09 isteği), ama artık sarılıyor: "KASA OLUŞTUR" iki sütun oluyor. Harf de sıkıştı -- 0,1em aralık 12 harfte tek başına 12 px'ti. */ .modulSeridiKol { /* ŞERİDİN ÜST KENARINA OTURAN SEKME (kullanıcı 29.09) > "kütüphane yazısının sığmadığını görüyorum ... > sağında etiket gibi çıkan bir buton mu olsun" > "dikine olmak zorunda değil, buton göze hoş > gözükecek şekilde ayarla" Kol şeridin içinde 42 px'lik dik bir kutuydu: harfler alt alta, "KASA OLUŞTUR" iki sütuna bölünüyor, "KÜTÜPHANE" zor sığıyordu (canlıda görüldü). Artık yatay: ikon + tam ad, şeridin sağ üst köşesinden yukarı taşan bir klasör sekmesi. Şeridin akışında değil (absolute) -- kartların yerini almıyor, şeridin boyunu belirlemiyor. */ position: absolute; right: 14px; bottom: calc(100% - 1px); display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border: 1px solid var(--renk-kenarlik); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--renk-panel); /* Sekme tıklanıyor: ana renk. */ color: var(--renk-ana); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: 0 -3px 10px rgba(15, 23, 42, 0.08); transition: background var(--gecis-hizli), border-color var(--gecis-hizli), color var(--gecis-hizli); } .modulSeridiKolIkonu { display: inline-flex; } .modulSeridiKolIkonu svg { width: 16px; height: 16px; } .modulSeridiKol:hover { background: var(--renk-alan); } /* Basılı hâli: kasa tarafı açıkken kol dolu renkte duruyor. Kullanıcı hangi tarafta olduğunu şeride bakmadan görüyor. */ .modulSeridiKol.aktif { border-color: var(--renk-ana); background: var(--renk-ana); color: #ffffff; } /* Kasa tarafında sekme satırı boş kalıyor. Gizlemek yerine yüksekliğini koruyoruz: şerit zıplayınca kol ile kartlar birlikte oynuyor ve geçiş bozuk görünüyor. */ .modulSeridiKasaAcik .modulSeridiSekmeleri { min-height: 22px; } /* -------------------------------------------- TELEFON -------------------------------------------- 390 px'te 30 px'lik kol kartlardan çalıyor ama yatay olsaydı bütün satırı alırdı. Daralıyor, yazı küçülüyor. */ @media (max-width: 760px) { .modulSeridiKol { right: 10px; height: 26px; padding: 0 10px 0 8px; font-size: 11px; } } /* ===== css/bolumler/47-tamEkranCizim.css ===== */ /* ============================================================ ÇİZİM TAM EKRAN, PANELLER ÜSTÜNE BİNİYOR (kullanıcı 22.09) ============================================================ Kullanıcı KesApp'i inceledikten sonra istedi: > "çizim ekranı tam ekran olmamış, dolap düzenleme sekmesi > hâlâ duruyor, aynı ekranda yapacaktık, dolaba tıklayınca > sağda her şey açılacaktı" Program üç sütunla çalışıyordu: sol panel 244 px + çizim + sağ panel 300 px. 1440 px ekranda odaya kalan 896 px -- ekranın %62'si. KesApp'te oda neredeyse tam ekran, paneller onun üstünde yüzüyor. Bu dosya panelleri akıştan çıkarıp çizimin ÜSTÜNE koyuyor. Çizim alanı böylece bütün genişliği alıyor; panel kapanınca da gerçekten tam ekran oluyor. NEDEN TELEFON DOSYASINDAN SONRA 45-telefon.css dar ekranda panelleri zaten katman yapıyor. Buradaki kurallar masaüstü içindir ve onunkileri ezmemeli; o yüzden hepsi `min-width: 761px` ile korunuyor. NEDEN ID SEÇİCİSİ Paneller `#solPanel, .solPanel` diye kuruluyor ve öğede id var. Sınıfla yazılan kural id'liyi yenemez -- 22.09'da telefon tarafında tam bu yüzden bir kural hiç işlememişti (ölçüldü: sağ panel katman olmuyor, çizim 92 px'e sıkışıyordu). Aynı hataya düşmemek için burada da id yazılıyor. */ @media (min-width: 761px) { /* -------------------------------------------- ÇİZİM BÜTÜN GENİŞLİĞİ ALIYOR -------------------------------------------- Paneller akıştan çıkınca gövde tek çocuk kalıyor; çizim bölümü kendiliğinden yayılıyor. */ #solPanel, .solPanel { position: absolute; top: 0; bottom: 0; left: 0; z-index: 30; box-shadow: 2px 0 16px rgba(15, 23, 42, 0.14); } #sagPanel, .sagPanel { position: absolute; top: 0; bottom: 0; right: 0; z-index: 30; box-shadow: -2px 0 16px rgba(15, 23, 42, 0.14); } /* Gövde artık konumlandırma çerçevesi: paneller ona göre yerleşiyor. */ .calismaIcerik { position: relative; } /* -------------------------------------------- ÜST ŞERİT VE ARAÇLAR ÇİZİMİN ÜSTÜNDE -------------------------------------------- Çizim alanı bütün gövdeyi kapladığı için araç çubuğu da onun üstünde yüzüyor; yoksa şeridin altında kalan bir boşluk oluşuyordu. */ .calismaUstSerit { position: absolute; top: 0; left: 0; right: 0; z-index: 25; pointer-events: none; background: transparent; border-bottom: 0; } /* Şeridin kendisi tıklama almıyor ama içindeki düğmeler alıyor: arkadaki 3B sahne fareyle döndürülebilsin. */ .calismaUstSerit > * { pointer-events: auto; } /* Araç çubuğu panellerin altında kalmasın diye panellerin genişliği kadar içeriden başlıyor. Panel kapanınca boşluk kendiliğinden doluyor. */ .cizimUstAraclar { margin-left: var(--sol-panel-genislik, 0); margin-right: var(--sag-panel-genislik, 0); } } /* ===== css/bolumler/48-tasarimDili.css ===== */ /* ============================================================ TASARIM DİLİ (kullanıcı 22.09) ============================================================ > "elden geçir, daha şık güzel bir uygulama olsun, > KesApp'tan daha iyi, ikonlar daha güzel" > "bizim uygulamamızda hem koyu tasarım hem açık tasarım > olacak" Ölçülen sorun renk seçimi değil, TUTARSIZLIKTI: dokuz ayrı köşe yarıçapı (6px 31 kez, 2px 14, 8px 13, 3px 12, 4px 9, 5px 8, 10px 7 …) yirmi iki ayrı gölge tanımı #ffffff 85 kez + #fff 32 kez -- aynı renk iki yazımla Her bileşen kendi kararını vermişti. Göz bunu "dağınık" diye okuyor, adını koyamıyor. Bu dosya kararları TEK YERE alıyor. Hiçbir sabit renk yok: hepsi değişkenden geliyor, iki tema da kendiliğinden çalışıyor. NEDEN AYRI DOSYA VE EN SONDA 46 CSS dosyasını tek tek düzeltmek bu depoda iki kez üretime hata soktu (toplu düzenleme notu). Bunun yerine en sonda yüklenen bir katman: eski kurallar yerinde duruyor, görünen yüzey buradan geliyor. Bir şey ters giderse tek dosya geri alınıyor. NE DEĞİŞMİYOR Yoğunluk. Satır yükseklikleri (24 px), yazı ölçüleri (12/11/10) ve panel genişlikleri aynı: bu bir atölye programı, ekranda çok sayı duruyor. Şıklık için ferahlık eklemek burada bilgi kaybı demek. */ /* ============================================================ DÜĞMELER ============================================================ Üç ailenin (işlem, araç, menü) köşesi, geçişi ve basılma tepkisi aynı olsun. Eskiden her biri kendi yarıçapını yazıyordu. */ .sagPanelIslemBtn, .solPanelAracBtn, .bolgeAracBtn, .nestingDurdurBtn, .nestingListeBtn, .nestingCsvBtn, .nestingEtiketBtn, .nestingOnizlemeBtn, .nestingNcBtn, .nestingTekrarBtn, .nestingDosyaIndirBtn, .nestingDosyadanAcBtn, .nestingKullanBtn, .pencereBtn, .modalBtn { border-radius: var(--radius-orta); transition: background var(--gecis-hizli), border-color var(--gecis-hizli), color var(--gecis-hizli), transform var(--gecis-hizli); } /* Basınca 1 px iniyor: dokunmatikte de masaüstünde de "bastım" geri bildirimi. Gölge yok -- düğme sayısı fazla, hepsi havada durursa ekran gürültülü oluyor. */ .sagPanelIslemBtn:active, .solPanelAracBtn:active, .bolgeAracBtn:active, .pencereBtn:active, .modalBtn:active { transform: translateY(1px); } /* ============================================================ GİRİŞ ALANLARI ============================================================ Sayı kutuları programın en çok dokunulan yeri. Odakta ince bir halka: kenarlık kalınlaşınca satır zıplıyordu. */ .sagPanelInput, .sagPanelAlanInput, .sagPanelBolmeGirisi, .pencereInput, input[type="text"], input[type="number"], select, textarea { border-radius: var(--radius-kucuk); transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli); } .sagPanelInput:focus, .sagPanelAlanInput:focus, .sagPanelBolmeGirisi:focus, .pencereInput:focus, input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--renk-ana); box-shadow: 0 0 0 2px color-mix(in srgb, var(--renk-ana) 28%, transparent); } /* ============================================================ PANELLER VE YÜZEN KATMANLAR ============================================================ Paneller çizimin üstüne biniyor (47-tamEkranCizim.css); yüzen şeyin kenarı yumuşak, gölgesi kademeli olmalı. */ #solPanel, .solPanel, #sagPanel, .sagPanel { box-shadow: var(--golge-2); } .modulSeridi { border-radius: var(--radius-buyuk); box-shadow: var(--golge-3); } .pencereKatmani .pencere, .nestingPenceresi, .gKodOnizlemePenceresi, .yoneticiPenceresi, .modalKatman > div { border-radius: var(--radius-buyuk); box-shadow: var(--golge-pencere); } /* ============================================================ SEKME VE ROZETLER ============================================================ Kategori şeritleri, mod rozetleri, durum etiketleri: hepsi hap biçiminde. Karışık yarıçaplar bu ailede en çok göze batıyordu. */ .bolgeKategoriBtn, .modulSeridiSekme, .durumRozeti, .etiketRozeti { border-radius: var(--radius-hap); transition: background var(--gecis-hizli), color var(--gecis-hizli), border-color var(--gecis-hizli); } /* ============================================================ KARTLAR VE SATIRLAR ============================================================ */ .modulSeridiKart, .sagPanelBolmeSatiri, .yoneticiSatiri, .girisProjeKarti { border-radius: var(--radius-orta); transition: background var(--gecis-hizli), border-color var(--gecis-hizli), transform var(--gecis-hizli), box-shadow var(--gecis-hizli); } .modulSeridiKart:hover, .girisProjeKarti:hover { box-shadow: var(--golge-2); } /* ============================================================ BÖLÜM BAŞLIKLARI ============================================================ Modül kartındaki katlanır başlıklar: ok dönüyor, başlık zıplamıyor. */ .sagPanelAcilirBolumBasligi { transition: background var(--gecis-hizli); } .sagPanelBolumOku { transition: transform var(--gecis-orta); } .sagPanelFormBolumu.acik > .sagPanelAcilirBolumBasligi .sagPanelBolumOku { transform: rotate(90deg); } /* ============================================================ KAYDIRMA ÇUBUKLARI ============================================================ Tarayıcının varsayılan çubuğu açık temada kalın gri bir şerit bırakıyor ve panelin kenarını bozuyor. İnce ve yüzeyle aynı dilde. */ * { scrollbar-width: thin; scrollbar-color: var(--renk-kenarlik-koyu) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: var(--radius-hap); background-clip: content-box; background-color: var(--renk-kenarlik-koyu); } *::-webkit-scrollbar-thumb:hover { background-color: var(--renk-yazi-soluk); } /* ============================================================ ARAÇ PENCERESİ (kullanıcı 22.09) ============================================================ > "en soldaki yerin bir amacı kalmadı artık bana göre" Sol panelin tek yer olan iki bölümü (Oda, Üretim Akışı) pencereye taşındı. Görünümü öbür pencerelerle aynı dilde: aynı köşe, aynı gölge, aynı başlık şeridi. */ .aracPenceresiKatmani { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 44px 16px 30px; background: rgba(15, 23, 42, 0.32); overflow-y: auto; } .aracPenceresi { display: flex; flex-direction: column; max-height: 100%; min-height: 0; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-pencere); } .aracPenceresiBaslikAlani { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik); } .aracPenceresiBaslik { margin: 0; font-size: 13px; font-weight: 600; color: var(--renk-yazi); } .aracPenceresiKapat { padding: 0 6px; border: 0; background: transparent; color: var(--renk-yazi-soluk); font-size: 18px; line-height: 1; cursor: pointer; transition: color var(--gecis-hizli); } .aracPenceresiKapat:hover { color: var(--renk-yazi); } /* Gövde kendi içinde kayıyor: üretim akışı uzun, oda araçları kısa. Pencere ekrandan taşmıyor. */ .aracPenceresiGovde { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; } /* Sol panel bölümleri pencerede de aynı dosyadan geliyor; oradaki "gizli" durumu pencerede anlamsız. */ .aracPenceresiGovde .solPanelBolumu { display: block; } /* ===== css/bolumler/49-yuzenAgac.css ===== */ /* ============================================================ MODEL AĞACI ODANIN ÜSTÜNDE (kullanıcı 22.09) ============================================================ > "sol tarafa çok ihtiyaç kalmadı gibi, model ağacını yine > solda gösterebiliriz ama odanın üstünde olur, böyle > kutucuk gibi değil, gizlenir tekrar gelir yaparız" Ağaç sol panelin ilk bölümüydü. Panel kapalı başlamaya geçince ağaç da onunla birlikte kayboldu -- oysa "odada ne var" sorusu program açılır açılmaz sorulur. Artık çizimin üstünde yüzüyor. Yer çalmıyor, başlığına basınca katlanıyor, sayacı katlıyken de okunuyor. KUTUCUK GİBİ DEĞİL Kullanıcının istemediği şey odanın ortasında duran, kenarı ağır, gölgesi koyu bir kutuydu. Burada kabuk panel yüzeyiyle aynı renkte, kenarı ince, gölgesi bir kademe -- odanın bir köşesine yaslanmış bir liste gibi duruyor. Boş odada HİÇ görünmüyor (aşağıdaki `:empty` kuralı): içinde tek "Oda" satırından başka bir şey yokken ortada durmasının anlamı yok. NEDEN KARDEŞ SEÇİCİ Kabuğun soldan uzaklığı sol panelin o anki genişliğine göre kayıyor. Kural `.solPanelDar ~ .yuzenAgac` diye yazıldığı için panel açılıp kapanınca yer kendiliğinden güncelleniyor; JavaScript tarafında tek satır yok. Kardeş seçici yalnız SONRAKİ kardeşi görür: kabuk bu yüzden panellerden sonra ekleniyor. */ @media (min-width: 761px) { .yuzenAgac { position: absolute; /* Üst araç çubuğunun altından başlıyor: çubuk çizimin üstünde yüzüyor (47-tamEkranCizim.css) ve ağaç onu kapatmamalı. */ top: 52px; /* Panel AÇIKKEN varsayılan. Kapalı hâli aşağıda. */ left: calc( var(--sol-panel-genislik) + 12px ); /* Panellerin (30) altında, çizim araçlarının üstünde. Panel açılırsa ağacın üstüne biniyor ama ağaç zaten onun sağına kaçmış oluyor. */ z-index: 22; width: 216px; max-height: calc( 100% - 140px ); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-2); transition: left var(--gecis-orta); } .solPanel.solPanelDar ~ .yuzenAgac { left: calc( var(--sol-panel-dar-genislik) + 12px ); } /* Kabuğun içindeki yuva sol paneldeyken alt kenarlık taşıyordu; kabuğun kendi kenarı var. */ .yuzenAgac .modelAgaciYuvasi { min-height: 0; border-bottom: 0; } .yuzenAgac .modelAgaci { min-height: 0; background: transparent; } /* Liste kabuğun içinde kayıyor: on beş panelli bir dolap açılınca kabuk büyüyüp odayı kapatmasın. */ .yuzenAgac .modelAgaciListe { overflow-y: auto; } /* BOŞ ODADA GÖRÜNMÜYOR Ağaç odada dolap yokken tek satır ("Oda") çiziyor ve onu da `.modelAgaciBos` ile anlatıyor. O hâlde kabuk ortada durmasın: kullanıcı ilk açılışta boş bir oda ve altta modül şeridi görsün. */ .yuzenAgac:has(.modelAgaciBos) { display: none; } .yuzenAgac:has(.modelAgaciYuvasi:empty) { display: none; } } /* ============================================================ TELEFON ============================================================ İLK HÂLİ YANLIŞTI (aynı gün düzeltildi) Kabuk burada `display: none` yazıyordu; gerekçesi "telefonda ağaç sol panelin içindeki yerinde kalıyor" idi. Yanlıştı: yuva sol panelden ÇIKARILMIŞTI, artık orada değil. Yani telefonda model ağacı tamamen kayboluyordu ve kimse şikâyet etmeyeceği için de öyle kalırdı. Kabuk telefonda da duruyor, dar ve katlanabilir hâliyle. 216 px yerine 168 px: 390 px'lik ekranın yarısını kapatmıyor, katlanınca da tek şeride iniyor. */ @media (max-width: 760px) { .yuzenAgac { position: absolute; /* GÖSTER ÇUBUĞUNUN ALTINDAN (29.09) 46 px yazıyordu. Dokunmatikte çubuğun düğmeleri 44 px ve çubuk çizim alanının 8 px içinden başlıyor: alt kenarı 52 px'te. İnceleme: "model ağacı GÖSTER çubuğunun üstüne biniyor". Artık düğme boyundan hesaplanıyor; fareli dar pencerede (24 px) de doğru yerde duruyor. */ top: calc(var(--buton-yukseklik) + 18px); left: 8px; z-index: 22; /* 168 px'te ölçü sütunu ("80 × 77 × 58") adı tek harfe indiriyordu: "A". Ağaç telefonda artık katlı açılıyor (calismaEkraniBaslat.js), yani geniş hâli yalnız kullanıcı isteyince çıkıyor; ad okunacak kadar yer alabilir. */ width: min(260px, calc(100vw - 16px)); max-height: 42dvh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-buyuk); background: var(--renk-panel); box-shadow: var(--golge-2); } .yuzenAgac .modelAgaciYuvasi { min-height: 0; border-bottom: 0; } .yuzenAgac .modelAgaci { min-height: 0; background: transparent; } .yuzenAgac .modelAgaciListe { overflow-y: auto; } /* Boş odada masaüstündeki gibi ortada durmuyor. */ .yuzenAgac:has(.modelAgaciBos), .yuzenAgac:has(.modelAgaciYuvasi:empty) { display: none; } /* Katlıyken yalnız "MODEL · 2 dolap ›" şeridi kadar. */ .yuzenAgac:has(.modelAgaciKatli) { width: auto; } } /* ============================================================ KATLAMA ============================================================ Başlık alanının kendisi kol. Ayrı düğme yerine bütün şeride basılıyor -- 14 px'lik bir oka nişan almak gerekmiyor. */ .modelAgaciBaslikAlaniKol { cursor: pointer; user-select: none; transition: background var(--gecis-hizli); } .modelAgaciBaslikAlaniKol:hover { background: var(--renk-alan-vurgu); } .modelAgaciBaslikAlaniKol:focus-visible { outline: 2px solid var(--renk-ana); outline-offset: -2px; } /* İkon başlığın solunda: ağacın ne olduğunu anlatan tek işaret o. Yazıyla aynı renkte -- currentColor. */ .modelAgaciIkon { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--renk-yazi-ikincil); } .modelAgaciIkon svg { width: 14px; height: 14px; } .modelAgaciKatlaOku { margin-left: auto; flex-shrink: 0; color: var(--renk-yazi-soluk); font-size: 13px; line-height: 1; transition: transform var(--gecis-orta); } /* Katlıyken yalnız başlık şeridi kalıyor. Sayaç şeritte olduğu için "kapalı ama içinde üç dolap var" okunuyor. */ .modelAgaci.modelAgaciKatli .modelAgaciListe { display: none; } /* ===== css/bolumler/50-kasaOnizleme.css ===== */ /* ============================================================ KASA KURMA EKRANI (kullanıcı 22.09) ============================================================ > "herhangi bir kasaya bastığımda artık açılan ekranda > ölçüleri yazdığımız yerin yanında kasanın oluşmuş hâli > de gözüksün bir yandan; mesela burada artık o dolabı > kurma işini bitireyim" Pencere altı sayı kutusuydu ve parça ekleme penceresiyle aynı dar kalıbı kullanıyordu. İki sütun olunca kalıp yetmiyor: form solda, önizleme sağda. Genişlik yalnız BU pencerede artıyor; öbür pencereler (parça ekleme, kapak, çekmece) eski dar kalıpta kalıyor. Onlarda gösterilecek bir çizim yok. */ .kasaOlculeriPenceresi { width: min(860px, calc(100vw - 32px)); max-width: none; } .kasaOlculeriGovdesi { display: flex; align-items: stretch; gap: 0; min-height: 0; } /* ============================================================ YER PAYLAŞIMI (kullanıcı 22.09) ============================================================ > "ölçüleri gireceğimiz inputlar çok uzun, orayı çizim > yapılan yere değerlendirebilirsin" Form sütunu esniyordu ve sayı kutuları 320 pikselе kadar uzuyordu. Bir kutuya en fazla dört hane yazılıyor: "1200". Geri kalanı boşluktu ve göz etiketten değere uzun yol kat ediyordu. Form artık sabit ve dar; kalan bütün genişlik çizime gidiyor. Çizim burada asıl iş -- tıklanıp bölge seçilen yer o. */ .kasaOlculeriGovdesi > .parcaEklemeForm { flex: 0 0 300px; min-width: 0; } /* Sayı kutusu dört haneye göre. Etiket solda kaldığı için kutu sağa yaslanıyor ve sütun hizalı duruyor. */ .kasaOlculeriPenceresi .parcaEklemeInput { width: 96px; margin-left: auto; } /* Açılır liste (üst kapanış) metin taşıyor; dört haneye sığmaz. */ .kasaOlculeriPenceresi select.parcaEklemeInput { width: 100%; margin-left: 0; } /* ============================================================ ÖNİZLEME ============================================================ Çizim gerçek föy motorundan geliyor (kasaOnizlemesiOlustur). Burada yalnız çerçevesi var. */ .kasaOnizleme { flex: 1 1 auto; min-width: 0; /* Konumlandırma çerçevesi: 3B köşe görüntüsü buna göre yerleşiyor. */ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 16px 14px; border-left: 1px solid var(--renk-kenarlik); background: var(--renk-alan); } /* ============================================================ CEPHE ============================================================ Büyük ve tıklanabilir: çalışılan yer. 3B köşede küçük duruyor -- kasa tipinin farkı (yanlar içte/dışta) ancak orada görünüyor, cephede iki tip de aynı dikdörtgen. */ .kasaCephesi { width: 100%; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; } .kasaCephesiSvg { width: 100%; height: 100%; max-height: 100%; display: block; } /* Gövde: dolabın dış hattı. İçi boş, bölgeler üstüne biniyor. */ .kasaCephesiGovde { fill: var(--ikon-dolgu); stroke: var(--ikon-cizgi); stroke-width: 3; vector-effect: non-scaling-stroke; } /* Bölge: tıklama hedefi. Boş göz olduğu için zemin renginde; kenarı gövdeden ince. */ .kasaCephesiBolge { fill: var(--ikon-zemin); stroke: var(--ikon-cizgi-soluk); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill var(--gecis-hizli); } .kasaCephesiBolge:hover { fill: color-mix(in srgb, var(--renk-ana) 12%, var(--ikon-zemin)); } .kasaCephesiBolge.secili { fill: color-mix(in srgb, var(--renk-ana) 22%, var(--ikon-zemin)); stroke: var(--renk-ana); stroke-width: 2; } /* Dikme: gerçek panel, gövdeyle aynı koyulukta. */ .kasaCephesiDikme { fill: var(--ikon-cizgi); pointer-events: none; } .kasaCephesiOlcu { fill: var(--ikon-cizgi); font-weight: 600; pointer-events: none; user-select: none; } .kasaCephesiBilgisi { margin: auto; max-width: 220px; text-align: center; font-size: 11px; line-height: 1.6; color: var(--renk-yazi-soluk); } /* ============================================================ 3B KÖŞE GÖRÜNTÜSÜ (kullanıcı 22.09) ============================================================ > "tamam da bu seferde 3d olan gözükmedi" Önce cephenin ALTINDA ayrı bir satırdı. Cephe bütün genişliği alınca 3B en alta itildi ve kısa ekranda gözden kaçıyordu -- kullanıcı göremedi. Artık cephenin sağ üst köşesinde yüzüyor. Cepheyle aynı anda görünüyor ve yer çalmıyor. Oyunlardaki küçük harita gibi: asıl görüntü arkada, özet köşede. Tıklama almıyor: altındaki bölgeye basmak isteyen kullanıcı engellenmesin. */ .kasaOnizlemeUclu { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 4px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-orta); background: var(--renk-panel); box-shadow: var(--golge-1); pointer-events: none; } /* Minyatür ikon motorundan geliyor: 128 CSS pikseli, iki katı çözünürlükte (256 gerçek piksel). 240 pikselde keskin duruyor; daha fazla büyütmek bulanıklaştırır. */ .kasaOnizlemeGorseli { width: 96px; height: 96px; object-fit: contain; opacity: 0.9; } .kasaOnizlemeOzeti { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--renk-yazi-ikincil); } /* Ölçü yarım yazılmışken motor kasa kuramıyor. Eski çizimi ekranda bırakmak yerine sebebi yazıyoruz: kullanıcı geçersiz ölçüyle doğru bir dolap görmesin. */ .kasaOnizlemeBilgisi { margin: 0; max-width: 220px; text-align: center; font-size: 11px; line-height: 1.6; color: var(--renk-yazi-soluk); } /* ============================================================ DAR EKRAN ============================================================ 760 px altında iki sütun sığmıyor. Önizleme formun ALTINA geçiyor: gizlemek yerine sıraya koymak, çünkü kullanıcının istediği şey tam da onu görmek. */ @media (max-width: 800px) { .kasaOlculeriGovdesi { flex-direction: column; } .kasaOnizleme { width: auto; border-left: 0; border-top: 1px solid var(--renk-kenarlik); } .kasaCephesi { min-height: 200px; } } /* ============================================================ PENCERE EKRANA SIĞIYOR (kullanıcı 22.09) ============================================================ > "gözüküyor ama bizim açılan pencere sığmıyor aşağıya > doğru, onu üste alsana" Pencere dikey ORTALANMIŞTI. Önizleme eklenince yükseklik arttı ve kısa ekranlarda alt kenarı -- "Dolabı Oluştur" düğmesinin durduğu yer -- ekranın dışında kalıyordu. Düğmeye ulaşmanın yolu yoktu. Üste yaslamak tek başına yetmiyor: içerik yine uzun. Pencere en fazla ekran kadar yüksek oluyor ve gerekirse KENDİ İÇİNDE kayıyor. Düğme alanı içeriğin sonunda olduğu için kaydırınca ulaşılıyor. Kural yalnız bu pencereye: öbürleri kısa ve ortada durmaları doğru. */ #kasaOlculeriKatmani { align-items: stretch; /* ARAÇ ŞERİDİ PENCERENİN SOLUNDA (kullanıcı 23.09) > "butonları bu çerçevenin soluna koy demek > istemiştim, çerçevenin sol dışında olacak" Şerit ve pencere yan yana duruyor; ikisi birlikte ortalanıyor. Şerit pencerenin içinde olsaydı formun genişliğini paylaşır, çizime yer kalmazdı. */ justify-content: center; /* ŞERİT PENCEREYE YAPIŞIK (kullanıcı 23.09) > "soldaki butonları da bu şekilde istememiştim; > butonlar açılan ilk pencereye yapışık olacaktı, > dışarıda" Arada 10 px boşluk vardı: şerit ayrı bir kutu gibi duruyordu. Artık pencerenin sol kenarına bitişik -- dışarıda ama aynı gövdenin parçası. */ gap: 0; /* > "bu açılan pencereyi bence en üst butonların oradan > başlatıp aşağıdaki dolap panel seçim sunucuya kadar > indir bence" Paylar ekrandaki iki şeridin yüksekliği: üstte menü (44 px), altta durum çubuğu (30 px). Pencere ikisinin arasını dolduruyor. Sabit yükseklik burada israf değil: bu ekrana bölme ve raf bölümleri de girecek ve pencere her açılışta aynı boyda durmalı -- içerik değişince zıplayan bir pencere yer belleğini bozuyor. */ padding-top: 44px; padding-bottom: 30px; } #kasaOlculeriKatmani .kasaOlculeriPenceresi { /* Ortalamayi katman yapiyor (justify-content: center). Burada ayrica "margin: 0 auto" varken ikisi carpisiyor ve arac seridi ile pencere arasinda 100 px bosluk kaliyordu (olculdu). */ margin: 0; /* Genişlik sabit, yükseklik ekranı dolduruyor. */ height: 100%; display: flex; flex-direction: column; min-height: 0; } /* Başlık sabit kalıyor, gövde kayıyor: kullanıcı hangi kasa tipini kurduğunu kaydırırken de görüyor. */ #kasaOlculeriKatmani .kasaOlculeriGovdesi { flex: 1 1 auto; overflow-y: auto; min-height: 0; } /* Önizleme kayan gövdenin içinde yapışık duruyor: form uzun, çizim kısa. Kaydırırken çizimin ekrandan çıkması önizlemenin amacını bozuyordu. */ @media (min-width: 801px) { #kasaOlculeriKatmani .kasaOnizleme { position: sticky; top: 0; align-self: flex-start; max-height: calc(100dvh - 110px); } } /* ============================================================ BÖLME BÖLÜMÜ (kullanıcı 22.09) ============================================================ > "yatay dikme eklemek istediğimde sadece adet soracak, > sonra oluştur dediğimde dikmeler gelecek, bölgelerde > girilebilir inputlar gözükecek ve o an hangi bölgenin > yüksekliğinin ne olmasını istiyorsam girebileceğim" İki adım: kaç parça, sonra ölçüler. Ölçüler eşit dağıtılmış geliyor; kullanıcı yalnız değiştirmek istediğine dokunuyor. */ .kasaBolmeBolumu { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--renk-kenarlik); } .kasaBolmeBasligi { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--renk-yazi-ikincil); } /* Hangi gözün bölüneceğini söyleyen satır. Seçim yoksa ne olacağını yazıyor -- sessiz varsayılan en kötüsü. */ .kasaBolmeHedefi { margin: 0 0 8px; font-size: 11px; line-height: 1.5; color: var(--renk-yazi-soluk); } .kasaBolmeKurma { display: flex; align-items: center; gap: 6px; } /* Eksen listesi yer alıyor, adet dar, düğme sabit: üçü tek satıra sığsın. */ .kasaBolmeKurma select.parcaEklemeInput { flex: 1 1 auto; width: auto; margin-left: 0; min-width: 0; } .kasaOlculeriPenceresi .kasaBolmeAdet { flex: 0 0 auto; width: 52px; margin-left: 0; } .kasaBolmeBolBtn { flex: 0 0 auto; padding: 4px 12px; } /* -------------------------------------------- KURULMUŞ BÖLMELER -------------------------------------------- */ .kasaBolmeListesi { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .kasaBolmeGrubu { padding: 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-orta); background: var(--renk-alan-vurgu); } .kasaBolmeGrupBasligi { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 11px; font-weight: 600; color: var(--renk-yazi-ikincil); } .kasaBolmeSilBtn { padding: 2px 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-soluk); font-size: 10px; cursor: pointer; transition: border-color var(--gecis-hizli), color var(--gecis-hizli); } .kasaBolmeSilBtn:hover { border-color: var(--renk-tehlike-kenar, var(--renk-ana)); color: var(--renk-yazi); } /* Ölçü kutuları yan yana sarılıyor: on parçalı bir bölmede liste dikeyde uzayıp pencereyi taşırmasın. */ .kasaBolmeParcalari { display: flex; flex-wrap: wrap; gap: 6px; } .kasaBolmeParcasi { display: flex; align-items: center; gap: 4px; } .kasaBolmeParcaAdi { font-size: 10px; color: var(--renk-yazi-soluk); } .kasaOlculeriPenceresi .kasaBolmeOlcusu { width: 64px; margin-left: 0; } .kasaBolmeBirimi { margin: 2px 0 0; font-size: 10px; line-height: 1.5; color: var(--renk-yazi-soluk); } /* ============================================================ GÖZÜN İÇİNDEKİ ÖLÇÜ KUTUSU (kullanıcı 23.09) ============================================================ > "şu bölgelere ölçü verdiğimiz bölgenin içinde olsa daha > iyi olur" Ölçü kutuları formda liste hâlindeydi: kullanıcı cephedeki göze bakıp formda ona karşılık gelen kutuyu arıyordu. Dört sütunlu bir gardıropta on kutu alt alta duruyor ve hangisinin hangi göz olduğu belli değil. Kutu artık gözün ortasında, çizimin içinde. Zemini yok -- okurken ölçü YAZISI gibi görünüyor, tıklayınca kutu oluyor. */ .kasaCephesiOlcuGirdisi { width: 100%; height: 100%; padding: 0; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--ikon-cizgi); font-weight: 600; font-family: inherit; text-align: center; cursor: text; transition: background var(--gecis-hizli), border-color var(--gecis-hizli); } /* Sayı kutusunun artırma okları çizimin içinde gürültü yapıyor; klavye ve tekerlek yine çalışıyor. */ .kasaCephesiOlcuGirdisi::-webkit-outer-spin-button, .kasaCephesiOlcuGirdisi::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; appearance: none; } .kasaCephesiOlcuGirdisi { -moz-appearance: textfield; appearance: textfield; } .kasaCephesiOlcuGirdisi:hover { border-color: var(--ikon-cizgi-soluk); } .kasaCephesiOlcuGirdisi:focus { outline: none; border-color: var(--renk-ana); background: var(--renk-panel); color: var(--renk-yazi); } /* ============================================================ CEPHEYE KAPANAN PARÇALAR (kullanıcı 23.09) ============================================================ > "kapak yönünü seçemiyorum mesela bunun gibi eksikler var" Kasada kapak ve çekmece cephesi varken çizimde hiçbiri yoktu: kullanıcı kapak ekliyor, cephede hiçbir şey değişmiyordu. Yarı saydam çiziliyor. Opak olsaydı arkadaki bölme, raf ve dikme kaybolurdu ve kullanıcı neyi kapattığını göremezdi. CAD programlarında da cepheler böyle gösterilir. */ .kasaCephesiKapak { fill: color-mix( in srgb, var(--renk-ana) 14%, transparent ); stroke: var(--renk-ana); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; } /* Çekmece cephesi kapaktan ayrı renkte: bir gözde ikisi bir arada olabiliyor ve hangisinin ne olduğu okunmalı. */ .kasaCephesiCekmece { fill: color-mix( in srgb, var(--ikon-cizgi) 16%, transparent ); stroke: var(--ikon-cizgi); stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; } /* Menteşe kenarı: kapağın hangi taraftan açıldığı. Mobilya çizimlerindeki gösterim. */ .kasaCephesiMentese { stroke: var(--renk-ana); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; } /* ============================================================ ARAÇ ŞERİDİ (kullanıcı 23.09) ============================================================ > "bölgeye tıklandığında o pencerenin sol tarafına butonlar > gelir... onlardan birine tıkladığımızda onunla alakalı > detaylı özellik penceresi soluna açılır" Pencerenin DIŞINDA, sol kenarında. İçinde sağ panelin kendi bölge içeriği duruyor -- kategori şeridi ve o kategorinin araçları. Seçim yokken boş kalıyor ve hiç yer kaplamıyor: kasanın tamamına raf eklemenin anlamı yok, önce bir göz seçilmeli. */ .kasaBolmeAraclari { flex: 0 0 auto; /* DİK SEKME ŞERİDİ (kullanıcı 23.09, defter çizimi) > "dik şekilde duracaktı, yazılar da dik olabilir" Defterdeki kademeli kutular: dar bir şerit, içinde dikey yazılı sekmeler. "Kasa Oluştur" koluyla aynı dil, aynı yazı yönü. Şeritte yalnız kategori sekmeleri var; ayarlar ve ekleme düğmeleri pencerenin sol sütununda. 44 pikselin içine ayar formu sığmaz. */ width: 44px; /* PENCERENİN ALTINDA (kullanıcı 23.09) > "büyük pencerenin arkasından kayarak gelsinler" Şerit pencereden geride duruyor. Sekmeler açılırken pencerenin altından çıkıyor: sağdan sola kayarken önce görünmüyorlar, pencerenin kenarını geçince beliriyorlar. */ position: relative; z-index: 0; align-self: center; /* Boy içeriğe göre değil sekmelere göre: beş sekme hep aynı yerde duruyor, kategori değiştirmek şeridi oynatmıyor. */ max-height: 100%; overflow: visible; /* DIŞ KUTU YOK (kullanıcı 23.09) > "butonların en dışındaki dikdörtgen kasayı da sil" > "ana pencere, butonlara bastığımızda büyüyüp > küçülüyor; onun sabit kalması lazım" Şeridin kendi kenarlığı, zemini ve gölgesi vardı: sekmeler bir kutunun içinde duruyordu ve o kutu kategori değişince içeriğe göre büyüyüp küçülüyordu. Artık şerit görünmez bir raf: yalnız sekmeler var, doğrudan pencerenin kenarına yapışıyorlar. */ border: 0; background: transparent; box-shadow: none; } /* Boşken kenarlık ve gölge de gitsin: yanda boş bir kutu durmasın. */ .kasaBolmeAraclari:empty { display: none; } /* İçteki form kabı da görünmez: sekmelerin arkasında beyaz bir dikdörtgen kalıyordu (kullanıcı: "butonların en dışındaki dikdörtgen kasayı da sil"). Şeridin kendi zeminini kaldırmak yetmedi, kutu bundan geliyordu. */ .kasaBolmeAraclari > .sagPanelForm, .kasaBolmeAraclari .sagPanelFormBolumu, .kasaBolmeAraclari .sagPanelFormBolumIcerigi { padding: 0; border: 0; background: transparent; box-shadow: none; } /* Şeritte başlık yok: "Bölge Araçları" yazısı 44 px'e sığmıyor ve zaten sekmeler ne olduğunu söylüyor. */ .kasaBolmeAraclari .sagPanelFormBolumBasligi { display: none; } .kasaBolmeAraclari .sagPanelFormBolumIcerigi { padding: 0; } /* Sekmeler alt alta, her biri dikey yazılı. */ .kasaBolmeAraclari .bolgeKategoriSeridi { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; /* Sağ pay yok: aktif sekme pencerenin kenarına kadar uzanıp onunla birleşiyor. */ padding: 10px 0 10px 5px; } .kasaBolmeAraclari .bolgeKategoriBtn { width: 32px; /* Boy yazıya göre uzuyor; sabit olsaydı "ARKALIK" kesilirdi. Alt sınır kısa adların da sekme gibi durmasını sağlıyor. */ min-height: 72px; padding: 12px 5px; border: 1px solid var(--renk-kenarlik); border-right: 0; /* Sekme dili: sol köşeler yuvarlak, sağ taraf düz -- panele giren kenar. */ border-radius: var(--radius-kucuk, 6px) 0 0 var(--radius-kucuk, 6px); background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-size: 11px; font-weight: 600; /* DİK HARFLERDE ARALIK (kullanıcı 23.09) > "butonlardaki yazılar neden böyle oluyor, olmadı, > estetik olmadı sanki neden" > "yazı stiliyle mi alakalı acaba" Yazı stili değil, aralık. Dikey yazıda metin akış yönü de dikey: harfler arasındaki boşluğu `letter-spacing` veriyor, `line-height` değil (o satırın YATAY kalınlığı). İlk denememde line-height'ı kısmıştım, hiçbir şey değişmedi. Her harf 1em'lik kutuda ortalanıyor; "İ" ile "M" aynı yeri kaplıyor ve arada hava kalıyor. Negatif aralık o havayı topluyor. */ line-height: 1; letter-spacing: -0.14em; /* "Kasa Oluştur" koluyla aynı yön ve aynı duruş: baş harf üstte, her harf ayakta, göz yukarıdan aşağı iniyor. Kullanıcı bunu deftere yazıp gönderdi. */ writing-mode: vertical-rl; text-orientation: upright; /* Hepsi büyük harf (kullanıcı 23.09: "hepsini büyük harf yap bakalım"). Deftere de "BÖLME" diye büyük yazmıştı; dik harflerde küçük harfler alt alta dizilince boy farkı göze batıyor. Türkçe dilinde: "Ç" -> "Ç", "İ" doğru büyüyor. */ text-transform: uppercase; text-align: center; white-space: nowrap; cursor: pointer; } .kasaBolmeAraclari .bolgeKategoriBtn { transition: background var(--gecis-hizli, 140ms), border-color var(--gecis-hizli, 140ms), color var(--gecis-hizli, 140ms); } .kasaBolmeAraclari .bolgeKategoriBtn:hover { border-color: var(--renk-ana); background: var(--renk-panel); color: var(--renk-yazi); } /* ============================================================ SEKMELER SIRAYLA KAYARAK GELİYOR (kullanıcı 23.09) ============================================================ > "butonlar gelirken animasyon ver, sola kayarak sırayla > gelsinler" Pencere açılınca beş sekme aynı anda belirmiyor; sağdan sola, birer birer yerine oturuyor. Gecikme 45 ms: göz sırayı takip edecek kadar uzun, bekletmeyecek kadar kısa. `backwards` doldurma kipi şart: gecikme boyunca sekme başlangıç halinde (saydam) duruyor, yoksa önce görünüp sonra zıplıyor. */ /* Başlangıç ötelemesi sekme genişliğinden büyük (46 px): sekme tamamen pencerenin altında duruyor, oradan çıkıyor. Saydamlık yok -- pencere zaten örtüyor, sönümleme "arkasından çıkma" hissini bozuyordu. */ @keyframes bolgeSekmesiGirisi { from { transform: translateX(46px); } to { transform: translateX(0); } } .kasaBolmeAraclari .bolgeKategoriBtn { /* Süre ve gecikme kullanıcının ölçüsü: > "animasyonlar çok hızlı, biraz daha yavaş gelsin" 420 ms hareket, 90 ms aralık: beş sekme 780 ms'de yerine oturuyor. Göz sırayı rahat takip ediyor. */ animation: bolgeSekmesiGirisi 420ms cubic-bezier(0.22, 0.75, 0.3, 1) backwards; } .kasaBolmeAraclari .bolgeKategoriBtn:nth-child(1) { animation-delay: 0ms; } .kasaBolmeAraclari .bolgeKategoriBtn:nth-child(2) { animation-delay: 90ms; } .kasaBolmeAraclari .bolgeKategoriBtn:nth-child(3) { animation-delay: 270ms; } .kasaBolmeAraclari .bolgeKategoriBtn:nth-child(4) { animation-delay: 360ms; } .kasaBolmeAraclari .bolgeKategoriBtn:nth-child(5) { animation-delay: 450ms; } /* ============================================================ ANİMASYON TEKRAR ETMİYOR (kullanıcı 23.09) ============================================================ > "her bölgeye tıkladığımda butonlar -- bölme bile yazsa -- > aynı pencere yenileniyor" Şerit bir kez akıyor: ikinci çizimden sonra yuva "yerleşmiş" sayılıyor ve sekmeler olduğu yerde duruyor. Kartlar da yalnız kategori değiştiğinde akıyor; aynı kategorideyken bölgeden bölgeye geçmek onları oynatmıyor. */ .kasaBolmeAraclari.yerlesmis .bolgeKategoriBtn, .kasaBolmeOzellikleri .bolgeAracIzgara:not(.akiyor) > * { animation: none; } /* Sol sütundaki araç kartları da aynı sırayla geliyor: sekmeye basınca kartlar arkasından akıyor. */ .kasaBolmeOzellikleri .bolgeAracIzgara > * { animation: bolgeAracGirisi 320ms cubic-bezier(0.22, 0.75, 0.3, 1) backwards; } /* Araç kartları pencerenin içinde: arkadan çıkamazlar, kendi girişleri var -- kısa bir kayma ve soluk açılma. */ @keyframes bolgeAracGirisi { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } } .kasaBolmeOzellikleri .bolgeAracIzgara > :nth-child(2) { animation-delay: 70ms; } .kasaBolmeOzellikleri .bolgeAracIzgara > :nth-child(3) { animation-delay: 140ms; } .kasaBolmeOzellikleri .bolgeAracIzgara > :nth-child(n + 4) { animation-delay: 210ms; } /* ============================================================ HAREKET AZALTILMIŞ SİSTEM ============================================================ Kullanıcının Windows'unda "animasyonları göster" kapalıydı ve tarayıcı `prefers-reduced-motion: reduce` bildiriyordu; animasyonu yazdım, kullanıcı hiçbir şey göremedi (ölçüldü: `animation-name: none`). Kaydırmayı tümden kapatmak yerine küçültüyoruz: hareketten rahatsız olan kişi için 16 px yerine 0 px ötelemeyle sadece beliriyor, sıra duygusu korunuyor. */ @media (prefers-reduced-motion: reduce) { .kasaBolmeAraclari .bolgeKategoriBtn, .kasaBolmeOzellikleri .bolgeAracIzgara > * { /* Yari sure: sira duygusu duruyor, hareket kisaliyor. */ animation-duration: 300ms; } } /* ============================================================ AKTİF SEKME PANELLE BÜTÜNLEŞİYOR (kullanıcı 23.09) ============================================================ > "bir de tıkladığım yer sekme gibi bütünleşsin > özellikler ile" Dolu renkli bir düğme değil, gerçek bir sekme dili: arka planı pencereninkiyle aynı, aradaki çizgi o hizada kesiliyor, sekme panelin içine akıyor. Bir piksel sağa taşıyor ki pencerenin sol kenarlığını örtsün -- birleşme çizgisi orada kopuyor. */ .kasaBolmeAraclari .bolgeKategoriBtn.aktif { position: relative; z-index: 1; margin-right: -1px; padding-right: 6px; border-color: var(--renk-ana); background: var(--renk-panel); color: var(--renk-ana); font-weight: 700; /* Sol kenarda ince renk çizgisi: seçili sekme uzaktan da okunuyor. */ box-shadow: inset 3px 0 0 var(--renk-ana); } /* ============================================================ SEÇİLİ BÖLGENİN ÖZELLİK ŞERİDİ (kullanıcı 23.09) ============================================================ Defter çiziminde pencerenin üst kenarına giden ok: > "seçili bölgenin özelliği buraya" Başlıkla gövdenin arasında yatay bir şerit. Bölge bilgisi (ad, genişlik, yükseklik, derinlik) ve seçili kategorinin detay ayarları burada duruyor. Göz seçilmeden boş: kasa ölçülerini girerken yer kaplamasın. */ /* Sol sütun: üstte katlanabilir ölçü formu, altında seçili gözün ayarları. İkisi bir arada kaydırılıyor. */ .kasaOlculeriSolSutun { flex: 0 0 auto; /* Sütun genişliği sabit: kalan yer çizime gidiyor. > "ölçüleri gireceğimiz inputlar çok uzun, orayı > çizim yapılan yere değerlendirebilirsin" */ width: 360px; display: flex; flex-direction: column; min-height: 0; min-width: 0; /* Kaydırma BURADA. Form kendi içinde kaydırınca, sütunda ayar paneliyle yer paylaşırken 24 pikselе eziliyordu (ölçüldü): sekiz ölçü alanı görünmez olmuştu. */ overflow-y: auto; } /* Form ve özellik şeridi kendi boylarında duruyor, büzülmüyor. */ .kasaOlculeriSolSutun > .parcaEklemeForm, .kasaOlculeriSolSutun > .kasaBolmeOzellikleri, .kasaOlculeriSolSutun > .kasaOlculeriKatlaBtn { flex: 0 0 auto; overflow: visible; } /* Pencerenin alt çubuğu: düğmeler sağa yaslı, gövdenin tamamının altında. */ .kasaOlculeriPenceresi > .parcaEklemeButonAlani { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; margin: 0; padding: 10px 14px; border-top: 1px solid var(--renk-kenarlik); background: var(--renk-panel); } /* Katlama düğmesi kaydırırken üstte kalıyor: kullanıcı formu kapatmak için başa dönmek zorunda kalmasın. */ .kasaOlculeriSolSutun > .kasaOlculeriKatlaBtn { position: sticky; top: 0; z-index: 2; background: var(--renk-panel); } .kasaBolmeOzellikleri { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--renk-kenarlik); } .kasaBolmeOzellikleri:empty { display: none; } /* Şeritteki her kutu kendi genişliğini alıyor, kalanı ayar formuna kalıyor: bilgi dar, ayarlar geniş. */ .kasaBolmeOzellikleri > .bolgeAyarKapsayici { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .kasaBolmeOzellikleri > .bolgeAyarKapsayici:empty { display: none; } .kasaBolmeOzellikleri > .bolgeAyarKapsayici > * { min-width: 0; } /* ============================================================ AYAR SATIRLARI YAN YANA ============================================================ Kapak paneli tek sütunda 618 px uzunluğundaydı; pencerenin tamamı 567 px. Üst şeritte alt alta dizilirse şerit pencereyi yutuyor. Şerit geniş ama alçak: satırlar ızgaraya giriyor, etiket solda değer sağda kalıyor. */ .kasaBolmeOzellikleri .kapakAyarNotu { margin: 0 0 2px; font-size: 10px; } /* ============================================================ ÖLÇÜ FORMU KATLAMA DÜĞMESİ (kullanıcı 23.09) ============================================================ > "ölçü formu da okla kapanıp açılabilsin" Katlıyken başlıkta ölçü özeti yazıyor (800 × 720 × 560 mm): kullanıcı formu açmadan ne girdiğini görüyor. */ .kasaOlculeriKatlaBtn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 12px; border: 0; border-bottom: 1px solid var(--renk-kenarlik); background: transparent; color: var(--renk-yazi); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; } .kasaOlculeriKatlaBtn:hover { background: var(--renk-vurgu-yumusak, rgba(0, 0, 0, 0.04)); } .kasaOlculeriOk { font-size: 10px; opacity: 0.7; } .kasaOlculeriKatliOzet { margin-left: auto; font-weight: 400; font-size: 11px; opacity: 0.75; } /* ============================================================ DAR EKRAN ============================================================ 1200 px altında pencere ve çizim daralıyor. Şerit yerinde kalıyor -- 44 piksel her ekranda sığıyor. */ @media (max-width: 1200px) { #kasaOlculeriKatmani { flex-wrap: wrap; } /* ŞERİT DAR EKRANDA DA SOLDA (kullanıcı 23.09) > "şu an telefondan bakıyorum da bizim butonlar > pencerenin altında gözüküyor, solda değil miydi" Eski kural şeridi pencerenin ALTINA alıyordu. O kural şerit 268 px genişken yazılmıştı: o boyda yan yana sığmıyordu. Şerit artık 44 px -- telefonda bile yan yana duruyor ve dik sekme dizisi olduğu gibi kalıyor. Sekmeler biraz kısalıyor, pencereye yer açmak için. */ .kasaBolmeAraclari { width: 38px; } .kasaBolmeAraclari .bolgeKategoriBtn { width: 28px; min-height: 64px; padding: 9px 3px; font-size: 10px; } } /* ============================================================ TELEFONDA ŞERİT PENCERENİN SOLUNDA KALIYOR (29.09) ============================================================ İnceleme, 390 px: "Kasa penceresinde BÖLME, KUŞAK, ÇEKMECE, KAPAK, ARKALIK sekmeleri içeriğin üstünde harf harf dikey şeritler olarak duruyor." Ölçüm: pencere `calc(100vw - 32px)` = 358 px, şerit 38 px; toplam 396 px ekrana sığmıyor. Yukarıdaki `flex-wrap: wrap` şeridi ayrı bir satıra, pencerenin ÜSTÜNE atıyordu ve dik sekmeler başlık ile menünün üstünde ortada asılı kalıyordu. Telefonda sarma yok: şerit 38 px solda, pencere kalan yeri alıyor. Seçim yokken şerit boş ve `display: none`; pencere o zaman bütün genişliği kullanıyor. Dik sekme dili (kullanıcı 23.09) aynen kalıyor. */ @media (max-width: 760px) { #kasaOlculeriKatmani { flex-wrap: nowrap; padding-left: 0; padding-right: 0; } #kasaOlculeriKatmani .kasaOlculeriPenceresi { flex: 1 1 auto; width: auto; min-width: 0; } #kasaOlculeriKatmani .kasaBolmeAraclari { align-self: flex-start; margin-top: 56px; } } /* ===== css/bolumler/51-gorunumKupu.css ===== */ /* ============================================================ BAKIŞ KÜPÜ (kullanıcı 22.09) ============================================================ > "şu bakış kısmını da sağda bir yerde yüzen küp şeklinde > yapalım" Üst şeritteki Ön / Üst / Yan / İzo düğmeleri kalktı. Dört düğme dört kelimeydi; hangisinin ne gösterdiği ancak basınca anlaşılıyordu. Küp Fusion, SolidWorks ve Inventor'da aynı yerde durur: çizim alanının sağ kenarı. Nereye bakıldığını gösteriyor, tıklanınca oraya döndürüyor. NEDEN CSS 3B İkinci bir Three.js sahnesi (kendi kamerası, ışığı, render döngüsü) her karede ek çizim demekti. Altı yüz için CSS'in 3B dönüşümleri yetiyor ve ekran kartı işliyor. */ .gorunumKupu { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); z-index: 24; display: flex; flex-direction: column; align-items: center; /* Küp ile Sığdır arasını sahnenin payı açıyor. */ gap: 0; /* Küpün kendisi tıklama alıyor ama çevresindeki boşluk almıyor: arkadaki sahne fareyle döndürülebilsin. */ pointer-events: none; } /* Sahne: perspektif burada. Küp içinde dönüyor. 900 px uzaklık hafif bir perspektif veriyor -- yüzler birbirine göre eğik görünüyor ama küp bozulmuyor. */ .gorunumKupuSahnesi { width: 68px; height: 68px; /* DÖNÜK KÜP KUTUSUNDAN TAŞIYOR (canlı tur, 28.09) Kutu 68 px ama izometrik dönen küp ekranda ~98 x 105 px kaplıyor (ölçüldü). Taşan kısım sağda ekran kenarına dayanıyor, altta "Sığdır"ın üstüne biniyordu. Pay kutunun etrafında: 68 x (√3 - 1) / 2 ≈ 25 px. Küp sağ kenardan ayrıldı, Sığdır altına indi. */ margin: 26px; perspective: 900px; pointer-events: auto; } .gorunumKupuGovdesi { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; /* Kamera hareketi zaten akıcı; geçiş yalnız yüze TIKLAYINCA anlam taşıyor. Süre kamera animasyonuyla aynı olmalı, yoksa küp kameradan önce yerine oturup geri sıçrıyor. */ transition: transform var(--gecis-orta); } .gorunumKupuYuzu { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; /* Arkadaki yüzler de çiziliyor: küp yarı saydam olunca derinlik okunuyor ve hangi yüzün önde olduğu belli oluyor. */ border: 1px solid var(--renk-kenarlik-koyu); background: color-mix( in srgb, var(--renk-panel) 88%, transparent ); color: var(--renk-yazi-ikincil); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; user-select: none; backface-visibility: visible; transition: background var(--gecis-hizli), color var(--gecis-hizli); } .gorunumKupuYuzu:hover { background: var(--renk-ana); color: #ffffff; } .gorunumKupuYuzu:focus-visible { outline: 2px solid var(--renk-ana); outline-offset: -2px; } /* Sığdır küpün altında: bakış yönünü değil uzaklığı değiştiriyor, yani küpün yüzlerinden farklı bir iş yapıyor. */ .gorunumKupuSigdir { pointer-events: auto; padding: 3px 10px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-hap); background: var(--renk-panel); color: var(--renk-yazi-ikincil); font-size: 10px; font-weight: 600; cursor: pointer; box-shadow: var(--golge-1); transition: background var(--gecis-hizli), border-color var(--gecis-hizli), color var(--gecis-hizli); } .gorunumKupuSigdir:hover { border-color: var(--renk-ana); color: var(--renk-yazi); } /* ============================================================ TELEFON ============================================================ 390 px'te 68 px'lik küp sağ kenarda çizimin üstüne biniyor ama odayı kapatmıyor. Küçülüyor: dolabın kendisi asıl iş. */ @media (max-width: 760px) { .gorunumKupu { right: 8px; } .gorunumKupuSahnesi { width: 52px; height: 52px; /* 52 x (√3 - 1) / 2 ≈ 19 px */ margin: 20px; } .gorunumKupuYuzu { font-size: 8px; letter-spacing: 0.02em; } .gorunumKupuSigdir { padding: 2px 8px; font-size: 9px; } }