/* 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; } /* Gönderim uzun süredir başarısız (08.10): yazı da kırmızı. */ .durumCubuguBolum.sunucu[data-durum="kaydedilemedi"] .durumCubuguDeger { color: #c9463d; font-weight: 700; } .durumCubuguBolum.sunucu[data-durum="kaydedilemedi"] .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); } /* Dokununca / tıklayınca odaya döner (01.10). */ .durumCubuguBolum.mod[data-mod="dolapIci"] { cursor: pointer; } .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; } /* EŞİTLEME UYARI ŞERİDİ (08.10, veri kaybı): gönderim 10 sn'den uzun süredir başarısızsa kapanmayan kırmızı şerit; açılıştaki çakışma bildirimleri sarı. Bkz. js/sunucuMotoru/esitlemeUyarisi.js. ALTTA: üstte dururken üst menüyü ve "Yeni Proje"yi örtüyordu (ekran denemesinde tıklama şeride gitti); kapanmayan şerit programı kullanılmaz yapmasın. Altta durum çubuğunu örtüyor, o da aynı haberi veriyor. */ .esitlemeUyarilari { position: fixed; bottom: 0; left: 0; right: 0; z-index: 12000; display: flex; flex-direction: column-reverse; pointer-events: none; } .esitlemeUyarilari[hidden] { display: none; } .esitlemeUyariSeridi { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; font-size: 14px; line-height: 1.35; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.35); } .esitlemeUyariSeridi[data-tur="hata"] { background: #b3261e; color: #ffffff; font-weight: 600; } .esitlemeUyariSeridi[data-tur="bilgi"] { background: #fff3cd; color: #4a3500; border-bottom: 1px solid #e0c36a; } .esitlemeUyariMetni { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; } .esitlemeUyariDugmesi { flex: 0 0 auto; min-height: 32px; padding: 4px 12px; border-radius: 6px; border: 1px solid currentColor; background: #ffffff; color: #b3261e; font: inherit; font-weight: 700; cursor: pointer; } .esitlemeUyariDugmesi.ikincil { background: transparent; color: inherit; } .esitlemeUyariSeridi[data-tur="bilgi"] .esitlemeUyariDugmesi { color: #4a3500; } .esitlemeUyariSeridi[data-tur="bilgi"] .esitlemeUyariDugmesi:not(.ikincil) { background: #4a3500; color: #fff3cd; } /* ===== 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-yazi-ikincil); } .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-panel); border: 1px solid var(--renk-kenarlik); 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-yazi-ikincil); } /* 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-yazi-ikincil); } .sagPanelAciklama { margin: 0 0 6px; font-size: 11px; color: var(--renk-yazi-ikincil); } .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; } /* ============================================================ GELİŞMİŞ AYARLAR (03.10, gelismisBolumOlustur) ============================================================ Kapak ve çekmece ayarlarında az değişen alanlar katlı. */ .gelismisBolum { margin-top: 8px; border-top: 1px solid var(--renk-kenarlik); padding-top: 6px; } .gelismisBolumBasligi { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 0; border: 0; background: transparent; color: var(--renk-yazi-ikincil); font-size: 11px; font-weight: 600; text-align: left; cursor: pointer; } .gelismisBolumBasligi:hover { color: var(--renk-yazi); } .gelismisBolumOku { flex: 0 0 12px; font-size: 10px; } .gelismisBolumIcerigi { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; } .gelismisBolumIcerigi[hidden] { display: none; } /* Standart kütüphane (03.10): şeritte tür başlıkları ve çizgi şemalı kartlar. */ .modulSeridiGrupEtiketi { flex: 0 0 auto; align-self: center; padding: 2px 8px; border-left: 2px solid var(--renk-ana); color: var(--renk-yazi-ikincil); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); } .modulSeridiStandartSema { display: flex; align-items: center; justify-content: center; color: var(--renk-yazi); } .modulSeridiStandartSema svg { width: 100%; height: 100%; max-width: 64px; max-height: 64px; } /* ===== 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; flex-wrap: wrap; align-items: center; 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 64px 68px 70px 58px 58px 52px 24px; align-items: center; gap: 4px; 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; } /* ------------------------------------------------- MAKİNEDE / RAFTA (07.10) ------------------------------------------------- Aynı T numarasında birden çok bıçak: tezgâhta takılı olan "Makinede", ötekiler rafta (soluk). Aynı numaranın satırları solda tek çizgiyle bir grup. */ .cncMakinedeNotu { flex: 1 1 260px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); line-height: 1.35; } /* Dar ekranda not düğmelerin altına, tam genişlikte iner: dar sütunda on satıra bölünmesin. */ @media (max-width: 700px) { .cncMakinedeNotu { flex-basis: 100%; } } .cncTakimMakinede { display: flex; align-items: center; gap: 4px; min-width: 0; } .cncTakimMakinede label { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--renk-yazi); font-size: var(--yazi-mini); cursor: pointer; } .cncTakimMakinede input[type="checkbox"] { margin: 0; accent-color: var(--renk-ana); } .cncTakimBicakEkleBtn { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-left: auto; padding: 0; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-yazi-soluk); font-size: 12px; line-height: 1; cursor: pointer; } .cncTakimBicakEkleBtn:hover { border-color: var(--renk-ana); color: var(--renk-ana); } .cncTakimSatirKutusu.grupta { /* Satır kaymasın: çizgi kutunun dışında, gölgeyle. */ box-shadow: -4px 0 0 var(--renk-ana); } .cncTakimRaftaNotu { margin: -2px 0 4px 56px; color: var(--renk-yazi-soluk); font-size: var(--yazi-mini); font-style: italic; } .cncTakimSatirKutusu.grupta:not(.grupSonu) .cncTakimSatiri { margin-bottom: 2px; } .cncTakimSatirKutusu.grupSonu { margin-bottom: 6px; } .cncTakimSatirKutusu.rafta { box-shadow: -4px 0 0 var(--renk-kenarlik); } .cncTakimSatirKutusu.rafta .cncTakimSatiri > :not(.cncTakimMakinede):not(.cncTakimSilBtn) { opacity: 0.55; } .cncTakimMakinede input[type="checkbox"] { width: 16px; height: 16px; } .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; } /* LINCO YUVASI AÇMA ŞEKLİ (06.10) İş Ayarları'nın başındaki kutu. Durum satırı kararın ŞU AN ne çıkardığını söylüyor; uygun takım yoksa uyarı rengine dönüyor. */ .lincoYuvasiKutusu { margin-bottom: 12px; } /* Seçenek metinleri uzun ("Otomatik (T13 · Ø12 freze)"); 92 piksellik sayı kutusunda kesiliyordu. Etiketin altına iniyor, satırı dolduruyor. */ .lincoYuvasiKutusu .cncAyarSatiri { grid-template-columns: 1fr; gap: 4px; } .lincoYuvasiKutusu select.cncAyarGirisi { width: 100%; max-width: 420px; } .lincoYuvasiDurumu { margin-top: 8px; padding: 8px 10px; border-radius: var(--kose-kucuk, 4px); border: 1px solid var(--renk-kenarlik); font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .lincoYuvasiDurumu[data-tur="uyari"] { color: var(--renk-uyari); background: var(--renk-uyari-acik); border-color: var(--renk-uyari-kenar); } .lincoYuvasiAciklamasi { margin-top: 6px; 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); } /* Uygulama kurulumu (02.10): Malzemeler kutusunda kendi levhasını tanımlama düğmesi. */ .projeAyarlariIkincilBtn { align-self: flex-start; margin-top: 8px; height: var(--buton-yukseklik); padding: 0 12px; border: 1px dashed var(--renk-ana-kenar); border-radius: var(--radius-kucuk); background: transparent; color: var(--renk-ana); font-family: inherit; font-size: var(--yazi-kucuk); cursor: pointer; } /* İki taraflı konum (02.10): "Sol / Sağ Bölme Genişliği" ya da "Alt / Üst Bölme Yüksekliği" yan yana; açıklama altta. */ .parcaEklemeFormGrubu.parcaEklemeIkiTaraf { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 6px; } .parcaEklemeIkiTaraf > .parcaEklemeKonumAciklamasi { grid-column: 1 / -1; grid-row: 3; } /* Telefonda CNC sekmeleri (05.10): "İş Ayarları" iki satıra kırılıyordu; tek satır, sığmazsa yana kayar. */ .cncAyarlariSekmeSeridi { overflow-x: auto; scrollbar-width: none; } .cncAyarlariSekmeBtn { flex-shrink: 0; white-space: nowrap; } @media (max-width: 760px) { .cncAyarlariSekmeBtn { padding: 0 10px; } } @media (max-width: 380px) { .cncAyarlariSekmeBtn { padding: 0 7px; } } /* ===== 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; } /* Yeniden adlandır (01.10): silmenin yanında, nötr renk. */ .girisKartAdBtn { margin-left: auto; } .girisKartAdBtn:hover { border-color: var(--renk-ana); background: var(--renk-ana); } .girisKartAdKutusu { flex: 1 1 auto; min-width: 0; height: 26px; padding: 0 6px; border: 1px solid var(--renk-ana); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font: inherit; font-size: 14px; font-weight: 700; } .girisProjeArama { width: 100%; max-width: 360px; height: 32px; margin: 0 0 12px; padding: 0 10px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font: inherit; } .girisProjeKarti[hidden], .girisProjeArama[hidden] { display: none; } .girisListeAlani[data-arama-sonucu="yok"]::after { content: "Aramaya uyan proje yok."; color: var(--renk-yazi-ikincil); font-size: 13px; } .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); } /* Seçim kutuları yazıyı kesmesin (05.10: "CNC bıçağı +", "Malzemedeki"). */ select.nestingAyarGirisi { width: auto; min-width: 108px; max-width: 210px; } .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, .nestingMakineBtn, .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), .nestingMakineBtn: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); } .nestingLevhaBasligi { align-self: center; font-weight: 600; font-size: var(--yazi-mini); } .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; } /* Stoktaki artıklar: neden kullanıldı / kullanılmadı (05.10). */ .nestingArtikRaporu { margin: 10px 0 4px; padding: 8px 12px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-panel); font-size: var(--yazi-kucuk); } .nestingArtikRaporu summary { cursor: pointer; font-weight: 600; } .nestingArtikRaporu ul { margin: 6px 0 0; padding-left: 4px; list-style: none; } .nestingArtikRaporu li { padding: 2px 0; } .nestingArtikRaporu li.kullanilmadi { color: var(--renk-yazi-soluk); } /* CNC kontur bıçağı notu (05.10): çap takım tablosundan. */ .nestingAyarNotu { margin-top: 6px; font-size: var(--yazi-kucuk, 12px); color: var(--renk-yazi-ikincil); 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); } /* Telefon görünümü / parça sayfaları stilsizdi: tarayıcının kalın siyah çerçevesi (01.10). */ .etiketSifirlaBtn, .etiketYazdirBtn, .etiketTelefonBtn, .etiketParcaYayinBtn { 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; } .etiketTelefonBtn:hover:not(:disabled), .etiketParcaYayinBtn:hover:not(:disabled) { border-color: var(--renk-ana); color: var(--renk-ana); } .etiketTelefonBtn:disabled, .etiketParcaYayinBtn:disabled { opacity: 0.55; cursor: default; } .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(--renk-kenarlik); border-radius: 10px; background: var(--renk-panel); } /* 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(--renk-kenarlik); 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(--renk-kenarlik); 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; /* Dar ekranda sekmeler alt satıra kırılıp içeriğin üstüne biniyordu (01.10). */ overflow-x: auto; scrollbar-width: none; padding: 6px 12px 0; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .trendyolSekmeBtn { flex-shrink: 0; white-space: nowrap; 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; } /* Onay kutusunun açıklaması başlığın altında (gezinti 03.10: "Montaj dahilİşaretliyse" bitişik okunuyordu). */ .trendyolOnayAlani .trendyolAlanIpucu { display: block; } /* ------------------------------------------------ KARGO TARİFESİ ------------------------------------------------ */ .trendyolTarife { display: flex; flex-direction: column; gap: 4px; max-width: 420px; } .trendyolTarifeSatiri { display: grid; /* minmax(0, …): sayı kutularının kendi genişliği sütunu şişiriyordu; telefonda Ücret ve sil düğmesi pencere dışına taşıyordu (QA 01.10). */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 6px; } .trendyolTarifeSatiri input { width: 100%; 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-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; } /* Telefonda üçüncü sekme ("Fiyat Ayarları") ekranın dışında kalıyordu; dar dolgu ile üçü de sığıyor (05.10). */ @media (max-width: 760px) { .trendyolSekmeSeridi { padding-left: 8px; padding-right: 8px; } .trendyolSekmeBtn { padding: 0 9px; } } @media (max-width: 380px) { .trendyolSekmeBtn { padding: 0 6px; font-size: 13px; } } /* ===== 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; } /* Müşteriye gönder (01.10): link kopyala / WhatsApp, sunucuda yayında mı satırı. */ .kilavuzGonder { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); } .kilavuzGonder[hidden] { display: none; } .kilavuzSunucuDurumu { margin: 0 0 8px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-soluk); } .kilavuzSunucuDurumu[data-durum="var"] { color: var(--renk-basarili); } .kilavuzSunucuDurumu[data-durum="yok"] { color: var(--renk-uyari); font-weight: 600; } .kilavuzGonderSeridi { display: flex; flex-wrap: wrap; gap: 6px; } /* Montaj sırasının kaynağı (01.10). */ .kilavuzSiraKaynagi { margin: 8px 0 0; font-size: var(--yazi-kucuk); color: var(--renk-yazi-soluk); } .kilavuzSiraKaynagi[data-kaynak="kutuphane"], .kilavuzSiraKaynagi[data-kaynak="dolap"] { color: var(--renk-basarili); } .kilavuzSiraKaynagi[data-kaynak="eksik"], .kilavuzSiraKaynagi[data-kaynak="otomatik"] { color: var(--renk-uyari); font-weight: 600; } /* ===== 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; } /* Konum resmi alt alta düzende tam genişliğe büyüyüp dolap çizimini ekranın altına itiyordu (05.10). */ .olcuFoyuGorseli img { max-width: 200px; margin: 0 auto; } } .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; } /* Dar telefonda (360 px) "ÜCRETLENEN" kelimesi kutuyu koli kartının dışına itiyordu (05.10): sütunlar en dar içeriğe göre değil eşit bölünür, telefonda etiket küçük. */ .koliSerit { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 760px) { .koliSayiKutusu { padding: 6px 7px; } .koliSayiEtiketi { letter-spacing: 0; font-size: 10px; } } /* ===== 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); } /* ------------------------------------------------- FORM (formIste / metinIste, 08.10) ------------------------------------------------- `prompt` yerine sayfa içi kutu: etiket üstte, alan tam genişlikte. Telefonda yazı 16 px (iOS odakta yakınlaştırmasın), düğmeler parmak boyunda. */ .mesajKutusuFormlu { width: min(100%, 420px); } .mesajKutusuGenis { width: min(100%, 760px); } .mesajKutusuForm { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; padding: 12px; overflow-y: auto; } .mesajKutusuAlan { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); } .mesajKutusuAlan[hidden] { display: none; } .mesajKutusuTamSatir { grid-column: 1 / -1; } .mesajKutusuOnayAlani { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 6px; } .mesajKutusuAlanEtiketi { font-weight: 600; } .mesajKutusuGirdi { box-sizing: border-box; width: 100%; min-height: 30px; padding: 4px 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font: inherit; font-size: var(--yazi-normal); } textarea.mesajKutusuGirdi { min-height: 110px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--yazi-kucuk); resize: vertical; } .mesajKutusuOnayAlani .mesajKutusuGirdi { width: auto; min-height: 0; } .mesajKutusuGirdi:focus { outline: none; border-color: var(--renk-ana); box-shadow: 0 0 0 2px color-mix(in srgb, var(--renk-ana) 25%, transparent); } .mesajKutusuAlanIpucu { color: var(--renk-yazi-soluk); font-size: 11px; font-weight: 400; } .mesajKutusuFormHatasi { margin: 0 12px 8px; padding: 6px 8px; border-radius: var(--radius-kucuk); background: color-mix(in srgb, var(--renk-tehlike) 12%, transparent); color: var(--renk-tehlike); font-size: var(--yazi-kucuk); } .mesajKutusuFormHatasi[hidden] { display: none; } @media (max-width: 760px) { .mesajKutusuForm { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mesajKutusuGirdi { min-height: 40px; font-size: 16px; } .mesajKutusuFormlu .mesajKutusuBirincilBtn, .mesajKutusuFormlu .mesajKutusuIkincilBtn { height: 40px; flex: 1; } } /* ===== 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-kenarlik); 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-kenarlik); } .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-kenarlik); 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); 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; } /* CAD'de düzenle (tur 6): modeli CAD'den gelen kartta. */ .donanimKartlariCadDugmesi { min-height: 32px; margin: 8px 0 4px; padding: 0 14px; border: 1px solid var(--renk-ana, #2973d6); border-radius: 6px; background: transparent; color: var(--renk-ana-yazi, #2973d6); font-size: 13px; font-weight: 600; cursor: pointer; } .donanimKartlariCadDugmesi:hover { background: var(--renk-zemin-hover, rgba(47, 111, 214, 0.08)); } /* ------------------------------------------------------------ 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); } .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-acik); 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; } .teklifSartGirdisi.cokSatir { height: auto; min-height: var(--alan-yukseklik); padding: 6px 8px; line-height: 1.35; resize: vertical; overflow: hidden; } /* 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); } /* ------------------------------------------------------------ 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); } .donanimStoguHareketi[data-tur="giris"], .donanimStoguHareketi[data-tur="iade"] { color: var(--renk-basarili); } /* ------------------------------------------------------------ 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); 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." 06.10: kullanıcı "üst taraf çok karışık, paneller çok yer kaplıyor" dedi. Üst şerit tek satır (36 px), araç şeridi gruplu ve küçük (40 px), paneller dar ve kapanabilir. 1400 × 900'de 3B alan 810 × 699'dan büyüdü (ölçüm raporda). */ .parcaTasarimPenceresi { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; /* Uzun özellik şeridi pencereyi genişletmesin (gece gezintisi 03.10: 2393 px, kapat ekran dışı). */ grid-template-columns: minmax(0, 1fr); width: 100%; height: 100%; background: var(--renk-zemin); color: var(--renk-yazi); font-size: 12.5px; } .parcaAracSeridi { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; padding: 2px 8px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-alan-vurgu); } /* Grup: ad solda küçük yazı, düğmeler yanında; gruplar arasında ince çizgi (Fusion'daki "OLUŞTUR · DEĞİŞTİR"). */ .parcaAracGrubu { display: flex; align-items: center; gap: 4px; padding: 0 8px; border-left: 1px solid var(--renk-kenarlik-acik); } .parcaAracGrubu:first-child { padding-left: 0; border-left: 0; } .parcaAracGrubuDugmeleri { display: flex; align-items: center; gap: 1px; } .parcaAracSeridiAdi { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--renk-yazi-soluk); user-select: none; } /* İkon üstte, ad altında küçük: ikon tanımayan kullanıcı fareyi bekletmeden de okuyabiliyor. 06.10: kenarlıksız, ikon 18 px, yazı 9,5 px -- şerit 54 px'ten 40 px'e indi. */ .parcaAracSeridi .parcaEkleDugmesi, .parcaAracAcilirDugmesi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 46px; padding: 2px 4px; border-color: transparent; background: transparent; line-height: 1.05; } .parcaAracSeridi .parcaEkleDugmesi:hover, .parcaAracAcilirDugmesi:hover, .parcaAracAcilirDugmesi.aktif { border-color: var(--renk-kenarlik); background: var(--renk-alan); } .parcaAracSeridi .parcaEkleDugmesi svg { display: block; width: 18px; height: 18px; } .parcaEkleAdi { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; color: var(--renk-yazi-ikincil); } .parcaAracSeridi .parcaEkleDugmesi:hover .parcaEkleAdi { color: var(--renk-ana-yazi); } /* "Daha ▾": seyrek katı özellikleri (süpürme, loft, sac, ince cidar). */ .parcaAracAcilir { order: 1; } .parcaAracAcilirDugmesi { padding: 2px 6px; border: 1px solid transparent; border-radius: 6px; color: var(--renk-yazi-ikincil); font: inherit; cursor: pointer; } .parcaAracAcilirOk { font-size: 13px; line-height: 18px; } /* Liste `position: fixed`: telefonda şerit yatay kaydırılıyor; kaydırılan kabın içindeki mutlak konumlu liste kesilirdi. Konumu açılırken düğmeden hesaplanıyor. */ .parcaAracAcilirListe { position: fixed; z-index: 30; display: flex; flex-direction: column; gap: 1px; min-width: 170px; padding: 4px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-panel); box-shadow: var(--golge-yuzen, 0 8px 24px rgba(0, 0, 0, 0.25)); } .parcaAracAcilirListe[hidden] { display: none; } .parcaAracSeridi .parcaAracAcilirListe .parcaEkleDugmesi { flex-direction: row; justify-content: flex-start; gap: 8px; width: 100%; padding: 5px 8px; } .parcaAracAcilirListe .parcaEkleAdi { max-width: none; font-size: 12px; color: var(--renk-yazi); } .parcaUst { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-serit); } .parcaBaslik { font-size: 12.5px; font-weight: 700; white-space: nowrap; } .parcaAdGirisi { width: 190px; min-width: 80px; padding: 4px 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; } /* Geri / ileri: kare, küçük (06.10). */ .parcaUst .parcaGeriIleri { min-width: 28px; padding: 3px 6px; font-size: 13px; line-height: 1; } /* Yan panel düğmeleri: ikon, açıkken mavi. */ .parcaPanelDugmesi { display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-alan); color: var(--renk-yazi-ikincil); cursor: pointer; } .parcaPanelDugmesi svg { display: block; } .parcaPanelDugmesi.aktif { border-color: var(--renk-ana); color: var(--renk-ana-yazi); background: var(--renk-ana-acik, #e8f0fe); } .parcaUstAc { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .parcaUstAcSimge { font-size: 15px; line-height: 1; } .parcaUstAc.aktif { background: var(--renk-ana); border-color: var(--renk-ana); color: #fff; } .parcaTasarimlar { display: flex; align-items: center; gap: 6px; } .parcaTasarimlar:empty { display: none; } .parcaTasarimlar > .parcaAlan { flex: 1 1 auto; min-width: 0; } /* DOSYA MENÜSÜ (06.10) Üst şeridin ikincil kabı. 30.09'da masaüstünde görünmez kaptı (`display: contents`), öğeler şeride dökülüyordu; şerit iki satıra iniyordu. Artık her genişlikte "⋯ Dosya" düğmesinin altından açılan menü (sağa yaslı). Telefonda ekran genişliğinde (45-telefon.css). */ .parcaUstEk { display: none; } .parcaUst.ekAcik .parcaUstEk { position: absolute; top: calc(100% + 2px); right: 8px; z-index: 40; display: flex; flex-direction: column; gap: 6px; width: 330px; max-width: calc(100vw - 16px); max-height: 75vh; overflow: auto; padding: 8px 10px 10px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-panel); box-shadow: var(--golge-yuzen, 0 8px 24px rgba(0, 0, 0, 0.25)); } .parcaUstEkBaslik { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--renk-kenarlik-acik); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--renk-yazi-ikincil); } .parcaUstEkBaslik:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .parcaUstEkBaslik[hidden] { display: none; } .parcaUstEkSatiri { display: flex; flex-wrap: wrap; gap: 6px; } .parcaUstEk .parcaAlan { grid-template-columns: 84px minmax(0, 1fr); } .parcaUstEk .parcaAlan select { width: 100%; } /* Kaydet'e hedefsiz basınca Donanım kutusu gösteriliyor (tur 4). */ .parcaUstEk .parcaAlan.parcaVurgulu { margin: -3px -4px; padding: 3px 4px; border-radius: 6px; background: var(--renk-uyari-acik); box-shadow: 0 0 0 1px var(--renk-uyari-kenar); } .parcaUstEk > .parcaDugme { align-self: flex-start; } .parcaAltSekmeler { display: none; } /* GÖVDE: ADLI ALANLAR (06.10) Sütunlar 250 / 340 px'ti; 1400 px'te 3B alana 810 px kalıyordu. Şimdi 200 / 270 ve ikisi de kapanabilir (`agacKapali`, `panelKapali`: sütun 0). Alanlar adlı: kapanan sütun gizlenince otomatik yerleşim sahneyi soldaki boş sütuna kaydırmasın. */ .parcaGovde { --parca-agac-genislik: 200px; --parca-panel-genislik: 270px; position: relative; display: grid; grid-template-columns: var(--parca-agac-genislik) minmax(0, 1fr) var(--parca-panel-genislik); grid-template-areas: "agac sahne panel"; min-height: 0; } /* Tek sınıflı seçici: telefon / tablet kuralları (aynı özgüllük, sonra yüklenen) ezebilsin. */ .parcaAgac { grid-area: agac; } .parcaSahneAlani, .parcaEskizAlani { grid-area: sahne; } .parcaOzellikPaneli { grid-area: panel; } .parcaGovde.agacKapali { --parca-agac-genislik: 0px; } .parcaGovde.panelKapali { --parca-panel-genislik: 0px; } .parcaGovde.agacKapali > .parcaAgac, .parcaGovde.panelKapali > .parcaOzellikPaneli { display: none; } .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); } /* Girdi bekleniyor / ıskaladı (tur 5): kırmızı değil sarı; ad normal renkte kalır. */ .parcaAgacSatiri.bekliyor .parcaAgacOzeti, .parcaAgacSatiri.uyari .parcaAgacOzeti { color: var(--renk-uyari, #8a5a00); } .parcaAgacSatiri.secili.bekliyor .parcaAgacOzeti, .parcaAgacSatiri.secili.uyari .parcaAgacOzeti { color: #ffe3a3; } .parcaAgacSatiri.bastirildi { opacity: 0.5; } .parcaAgacSatiri.geride { opacity: 0.45; } .parcaAgacIkonu { display: inline-flex; flex: none; } .parcaAgacIkonu svg { width: 16px; height: 16px; display: block; } /* Ad önce (06.10): 200 px'lik ağaçta özet adı "1. Ke…"ye indiriyordu. Ad kendi boyunu alıyor, özet kalan yeri; sığmazsa önce özet kısalıyor. */ .parcaAgacAdi { flex: 0 1 auto; 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: 1 1 0; min-width: 0; text-align: right; white-space: nowrap; 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; } /* Patlat şeridi (08.10): kesit şeridiyle aynı görünüş. */ .parcaPatlatSeridi { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-top: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); } .parcaPatlatSeridi[hidden] { display: none; } .parcaPatlatSeridi .parcaPatlatOrani { flex: 1; min-width: 120px; max-width: 420px; } .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; } /* DURUM VE ÇARPIŞMA (08.10, karavan): şerit dar ekranda iki satıra sarar; çarpışma listesi şeridin üstünde, çarpışma varsa kırmızı. */ .parcaHareketSeridi { flex-wrap: wrap; row-gap: 6px; } .parcaHareketSeridi > .parcaDurumSecimi { max-width: 150px; } .parcaCarpismaListesi { display: flex; flex-direction: column; gap: 4px; max-height: 30vh; overflow: auto; padding: 6px 12px; border-top: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan); font-size: 12px; } .parcaCarpismaListesi.carpismaVar { border-left: 3px solid var(--renk-tehlike); background: var(--renk-tehlike-acik); } .parcaCarpismaBaslik { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; } .parcaCarpismaListesi.carpismaVar .parcaCarpismaMetni { color: var(--renk-tehlike); } .parcaCarpismaSatiri { padding: 4px 8px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-zemin); color: var(--renk-yazi); font: inherit; text-align: left; cursor: pointer; } .parcaCarpismaSatiri:hover { border-color: var(--renk-tehlike-kenar); } .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)); } /* YÜZEN GÖRÜNÜM GRUBU (06.10, ikinci tur) Bakış düğmeleri tuvalin üstünde kendi şeridiydi; şimdi tuvalin sağ üst köşesinde yüzen küçük gruplar (Fusion'un görünüm kübü yerine). Düğmeler Ekle şeridi gibi kenarsız; üstüne gelince belirginleşiyor. */ .parcaBakislar { position: absolute; top: 8px; right: 8px; z-index: 6; display: flex; align-items: flex-start; gap: 6px; } .parcaBakisGrubu { display: flex; gap: 1px; padding: 2px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-panel); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } .parcaBakislar .parcaBakisDugmesi { min-width: 30px; padding: 3px 8px; border-color: transparent; border-radius: 6px; background: transparent; color: var(--renk-yazi-ikincil); font-size: 11px; font-weight: 600; } .parcaBakislar .parcaBakisDugmesi:hover { border-color: var(--renk-kenarlik); background: var(--renk-alan-vurgu); color: var(--renk-yazi); } /* Yüzen bakış şeridinde Ölç / Kesit açıkken renkli kalsın (tur 5): şeridin saydam kuralı (iki sınıf) aynı ağırlıktaki ".olcumAcik" kuralından sonra geldiği için açık araç sönük görünüyordu. */ .parcaBakislar .parcaBakisDugmesi.olcumAcik, .parcaBakislar .parcaBakisDugmesi.olcumAcik:hover { border-color: #d6892a; background: #d6892a; color: #fff; } .parcaBakislar .parcaBakisDugmesi.kesitAcik, .parcaBakislar .parcaBakisDugmesi.kesitAcik:hover { border-color: #2f6fb0; background: #2f6fb0; color: #fff; } .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; } /* Yüz ipucu (06.10): görünüm grubundan çıktı; boşken yer tutmuyor. */ .parcaYuzIpucu { padding: 4px 10px; font-weight: 600; color: var(--renk-ana-yazi); } .parcaYuzIpucu:empty { display: none; } .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); } /* Hatalı özellik varken sebep şeritte kırmızı (tur 4). */ .parcaOlcuHatasi { color: var(--renk-tehlike); } .parcaOlcuBekliyor { color: var(--renk-uyari, #8a5a00); } .parcaAlan { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 6px; font-size: 11.5px; } .parcaUst > .parcaAlan { grid-template-columns: auto auto; } /* KIRPILAN ÜST ŞERİT (QA turu, 01.10): 1400 px'te öğeler sığmayınca küçülüyordu; "Çelik" "Çel" oluyor, "STL indir" iki satıra kırılıyordu. Öğeler kendi boyunda kalıyor. (06.10: ikincil öğeler Dosya menüsünde, şerit tek satır.) */ .parcaUst > .parcaDugme, .parcaUstEk .parcaDugme { flex-shrink: 0; white-space: nowrap; } /* 06.10: şerit tek satır; sığmazsa ad kutusu daralır, öğeler kırılmaz. */ .parcaUst > * { flex-shrink: 0; } .parcaUst > .parcaAdGirisi { flex-shrink: 1; } .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(34px, 1fr) auto minmax(34px, 1fr) auto auto; align-items: center; gap: 4px; padding-left: 18px; font-size: 10.5px; color: var(--renk-yazi-soluk); } /* Tur 10 (ayak gezintisi): yay verilince "R 98,17 mm · 28,4°" yazısı son sütunu genişletiyor, Yay / R kutuları 0 px'e eziliyordu (girilen değer görünmüyordu). Yazı alt satıra. */ .parcaNoktaYayi .parcaYayOlcusuSatiri { grid-column: 3 / -1; } .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[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); } .parcaHataNotu.bekliyor, .parcaHataNotu.uyari { color: var(--renk-uyari, #8a5a00); } /* 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.bekliyor, .parcaZamanOgesi.uyari { border-color: var(--renk-uyari-kenar, #e0b768); border-style: dashed; } .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; } /* Seçili deliğin X / Y referansı (tur 13): köşe "0", çizgi ortasında değer. */ .parcaReferansEtiketi { position: absolute; z-index: 4; transform: translate(-50%, -50%); padding: 1px 5px; border-radius: 4px; background: #2973d6; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.35; pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Kısa ölçüde (6 mm) üçü üst üste binmesin: köşe üstte, X altta, Y sağda. */ .parcaReferansEtiketi[data-referans="kose"] { transform: translate(-50%, -135%); border-radius: 8px; } .parcaReferansEtiketi[data-referans="x"] { transform: translate(-50%, 35%); } .parcaReferansEtiketi[data-referans="y"] { transform: translate(12px, -50%); } .parcaReferansEtiketi[hidden] { display: none; } /* Arka yüzdeki deliğin işareti sönük (tur 14). */ .parcaReferansEtiketi[data-arka="1"] { opacity: 0.45; } /* Ölçü çizgisinin ortasında mesafe (tur 5). */ .parcaOlcumEtiketi { position: absolute; z-index: 5; transform: translate(-50%, -130%); padding: 2px 7px; border-radius: 4px; background: #d6892a; color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .parcaOlcumEtiketi[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); } /* ============================================================ İKİNCİ TUR (06.10): BOŞ TASARIM, PANEL ADLARI, TEK SATIR ESKİZ ============================================================ */ /* Başlıktaki panel düğmelerinin adı yalnız telefonda (45-telefon.css). */ .parcaPanelDugmesiAdi { display: none; } /* Boş tasarım kartı: tuvalin ortasında, ızgaranın üstünde. */ .parcaBosIpucu { position: absolute; top: 50%; left: 50%; z-index: 4; transform: translate(-50%, -50%); width: max-content; max-width: calc(100% - 32px); padding: 16px 20px; border: 1px solid var(--renk-kenarlik); border-radius: 12px; background: var(--renk-panel); box-shadow: var(--golge-yuzen, 0 8px 24px rgba(0, 0, 0, 0.18)); text-align: center; } .parcaBosIpucu[hidden] { display: none; } .parcaBosIpucuBaslik { font-size: 14px; font-weight: 700; } .parcaBosIpucuMetni { margin: 6px 0 12px; color: var(--renk-yazi-ikincil); line-height: 1.4; } .parcaBosIpucuDugmeleri { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .parcaBosIpucuDugmeleri .parcaDugme { padding: 6px 14px; font-size: 12.5px; } /* ESKİZ: ÇİZİM ALANI ÖNCE (kullanıcı 06.10) "Çizim'e basınca çizim alanı küçücük kalıyor." Üç araç satırı (~130 px) tek satıra indi (`.parcaEskizSeridi`), başlık satırı inceldi, ipucu ile durum çubuğu tek satır (`.parcaEskizAlti`). Çizim alanı kalan yerin tamamı (flex: 1, min-height: 0); ızgara alanın oranına genişletiliyor (editörde `gorunumuAlanaUydur`). */ .parcaEskizUst { gap: 8px; padding: 4px 8px 4px 10px; } .parcaEskizNotu { display: none; } .parcaEskizUst .parcaDugme { padding: 3px 10px; } .parcaGovde.eskizModu .parcaEskizKabi { padding: 6px 8px 4px; } .parcaGovde.eskizModu .parcaEskizKabi .parcaCizimEditoru { gap: 4px; } .parcaEskizSeridi { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; min-width: 0; padding: 2px 4px; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-panel); scrollbar-width: thin; } .parcaEskizSeridi > .parcaCizimAraclari, .parcaEskizSeridi > .parcaKisitCubugu { flex: none; flex-wrap: nowrap; align-items: center; gap: 1px; margin: 0; padding: 0 6px; border-top: 0; border-left: 1px solid var(--renk-kenarlik-acik); } .parcaEskizSeridi > :first-child { padding-left: 0; border-left: 0; } .parcaEskizSeridi .parcaCubukEtiketi { display: none; } .parcaEskizSeridi .parcaAracDugmesi { justify-content: center; flex: none; width: 30px; height: 28px; padding: 0; border-color: transparent; background: transparent; } .parcaEskizSeridi .parcaAracDugmesi:hover:not(:disabled) { border-color: var(--renk-kenarlik); background: var(--renk-alan-vurgu); } .parcaEskizSeridi .parcaAracDugmesi.aktif { border-color: var(--renk-ana); background: var(--renk-ana-acik); } .parcaEskizSeridi .parcaAracAdi { display: none; } .parcaEskizSeridi .parcaAracIkonu { width: 16px; height: 16px; } /* İkonsuz olanlar (Bitir, Daha) yazıyla kalıyor. */ .parcaEskizSeridi .parcaAracDugmesi[data-komut="cokgenBitir"], .parcaEskizSeridi .parcaEskizDahaDugmesi { width: auto; padding: 0 8px; gap: 3px; font-size: 11.5px; } .parcaEskizSeridi .parcaAracDugmesi[data-komut="cokgenBitir"] { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; } .parcaEskizSeridi input[data-alan="koseDegeri"] { width: 50px; margin: 0 2px; padding: 2px 4px; font-size: 11px; } .parcaEskizSeridi .parcaKisitDurumu { margin-left: 6px; font-size: 11px; white-space: nowrap; } .parcaEskizSeridi > .parcaEskizDaha { flex: none; padding-left: 6px; border-left: 1px solid var(--renk-kenarlik-acik); } .parcaEskizSeridi > .parcaBosluk { flex: 1 0 8px; } .parcaEskizSeridi > .parcaAracDugmesi.sag { margin-left: 0; } .parcaEskizDahaDugmesi.acik { border-color: var(--renk-kenarlik); background: var(--renk-alan-vurgu); } .parcaEskizDahaListesi { position: fixed; z-index: 40; display: flex; flex-direction: column; gap: 2px; min-width: 220px; max-height: 70vh; overflow: auto; padding: 6px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-panel); box-shadow: var(--golge-yuzen, 0 8px 24px rgba(0, 0, 0, 0.25)); } .parcaEskizDahaListesi[hidden] { display: none; } .parcaEskizDahaBaslik { padding: 4px 4px 2px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--renk-yazi-soluk); } .parcaEskizDahaBolumu { display: flex; flex-direction: column; gap: 1px; } /* Liste DOM'da şeridin içinde: şerit kurallarını (ikon kare, ad gizli) burada geri alıyoruz. */ .parcaEskizSeridi .parcaEskizDahaListesi .parcaAracDugmesi { justify-content: flex-start; gap: 8px; width: 100%; min-width: 0; height: auto; padding: 5px 8px; border-color: transparent; background: transparent; text-align: left; } .parcaEskizDahaListesi .parcaAracDugmesi[hidden] { display: none; } .parcaEskizDahaListesi .parcaAracDugmesi:hover:not(:disabled) { background: var(--renk-alan-vurgu); } .parcaEskizDahaListesi .parcaAracDugmesi.aktif { border-color: var(--renk-ana); background: var(--renk-ana-acik); } .parcaEskizDahaSatiri { display: flex; align-items: center; gap: 4px; } .parcaEskizSeridi .parcaEskizDahaListesi .parcaAracAdi { display: inline; } .parcaEskizSeridi .parcaEskizDahaSatiri .parcaAracDugmesi { flex: 1 1 auto; width: auto; } .parcaEskizDahaSatiri input { width: 56px; 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; } /* İpucu ve durum tek satır: ipucu kısalır, durum sağda. */ .parcaEskizAlti { display: flex; align-items: center; gap: 10px; min-width: 0; border-top: 1px solid var(--renk-kenarlik); } .parcaEskizAlti .parcaCizimIpucu { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .parcaEskizAlti .parcaEskizDurumu { flex: none; border-top: 0; padding: 2px 0; } .parcaEskizAlti .parcaEskizImlec { min-width: 110px; } /* ------------------------------------------------ TUR 3 (06.10): SADELEŞTİRME VE PÜRÜZLER ------------------------------------------------ */ /* "?" düğmesi: kısayol kartı. Dokunmatikte klavye yok, gizli. */ .parcaUst .parcaYardimDugmesi { width: 28px; height: 28px; padding: 0; border-radius: 50%; font-weight: 700; color: var(--renk-yazi-ikincil); } .parcaUst .parcaYardimDugmesi:hover { color: var(--renk-yazi); border-color: var(--renk-ana); } @media (pointer: coarse), (max-width: 760px) { .parcaUst .parcaYardimDugmesi { display: none; } } /* Çokgen köşe listesi sağ panelde kendi içinde 150 px'e kısılıyordu: panel zaten kayıyor, iç içe ikinci kaydırma satırları yarıdan kesiyor ve "Sil" düğmesi kesik satırın üstüne biniyordu. */ .parcaOzellikPaneli .parcaNoktaListesi { max-height: none; overflow: visible; } /* Zaman çizelgesi düğmeleri: tarayıcının kalın siyah çerçevesi yerine sessiz ikon düğme. */ .parcaZamanCizelgesi > .parcaZamanDugmesi { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0; border-color: transparent; background: transparent; color: var(--renk-yazi-ikincil); font-size: 11px; flex: none; } .parcaZamanCizelgesi > .parcaZamanDugmesi:hover { border-color: var(--renk-kenarlik); background: var(--renk-alan-vurgu); color: var(--renk-yazi); } .parcaZamanCizelgesi > .parcaZamanDugmesi:nth-child(4) { margin-right: 4px; } /* Parametreler sütunun altında, ayrı bir bölüm başlığıyla. */ .parcaParametreKutusu { margin-top: 12px; padding-top: 8px; padding-bottom: 0; border-top: 1px solid var(--renk-kenarlik); border-bottom: 0; } /* Yapılandırma (08.10): katalog boyu seçimi, tablo kapalıyken de görünür. */ .parcaParametreKutusu > .parcaYapilandirma { margin-top: 6px; } .parcaParametreBaslik .parcaPanelBaslik { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--renk-yazi-ikincil); } /* Kısayol kartı: tuş (kbd) + ne yaptığı, satır satır. */ .parcaKisayolKarti { width: min(860px, calc(100% - 32px)); min-width: 0; max-height: calc(100% - 40px); overflow: auto; line-height: 1.4; } .parcaKisayolBaslik { font-size: 13.5px; margin-bottom: 10px; } .parcaKisayolSutunlar { gap: 18px; } .parcaKisayolBolumAdi { margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--renk-yazi-ikincil); } .parcaKisayolSatiri { display: grid; grid-template-columns: 76px 1fr; align-items: baseline; gap: 8px; padding: 2px 0; } .parcaKisayolTuslar { display: inline-flex; flex-wrap: wrap; gap: 2px; } .parcaKisayolTuslar kbd { display: inline-block; min-width: 18px; padding: 1px 5px; border: 1px solid var(--renk-kenarlik); border-bottom-width: 2px; border-radius: 4px; background: var(--renk-alan); color: var(--renk-yazi); font: 600 11px/1.4 inherit; font-family: inherit; text-align: center; } .parcaKisayolNotu { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--renk-kenarlik); color: var(--renk-yazi-ikincil); font-size: 11.5px; } /* Eskiz durum çubuğundaki ızgara seçimi koyu temada beyaz kalıyordu. */ .parcaEskizDurumu select { border: 1px solid var(--renk-kenarlik); border-radius: 4px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); } @media (pointer: coarse) { .parcaZamanCizelgesi > .parcaZamanDugmesi { min-width: 40px; height: 40px; } } /* ESKİZ YAZILARI İKİ TEMADA (tur 3): ölçü etiketleri sabit koyu gri / koyu mavi ve BEYAZ haleliydi; koyu temada yazılar kabartma gibi parlıyor, ölçü çizgileri zeminde kayboluyordu. Renk yazı / vurgu değişkeninden, hale tuvalin zemininden. */ .parcaOlcuEtiketi { fill: var(--renk-yazi-ikincil); stroke: var(--renk-alan); } .parcaOlcuEtiketi.surucu { fill: var(--renk-yazi); } .parcaOlcuEtiketi:hover { fill: #d6892a; } .parcaSekil.secili.tamKisitli { stroke: var(--renk-yazi); } .parcaOlcuCizgisi { stroke: var(--renk-ana-yazi); } .parcaOlcuOku { fill: var(--renk-ana-yazi); } .parcaOlcuYazi { fill: var(--renk-ana-yazi); stroke: var(--renk-alan); } .parcaOlcuNoktasi { fill: var(--renk-alan); stroke: var(--renk-ana-yazi); } .parcaOlcu.secili .parcaOlcuCizgisi, .parcaOlcu.secili .parcaOlcuUzatma { stroke: #d6892a; } .parcaOlcu.secili .parcaOlcuOku, .parcaOlcu.secili .parcaOlcuYazi, .parcaOlcuYazi:hover { fill: #d6892a; } /* SAĞ PANEL KAYIYOR, İÇERİK EZİLMİYOR (tur 3) Tablette ölçtüm: panel 1031 px, içerik 1031 px kaydırma boyu -- yani panel HİÇ kaymıyordu. Alan kabı ve şekil listesi `min-height: 0` ile esnek sütunda büzülüyor, taşan köşe satırları alttaki öğenin üstüne biniyor ve son köşelere ulaşılamıyordu. Çocuklar büzülmüyor; kaydırma panelin kendisinde. */ .parcaOzellikPaneli > .parcaPanelIcerik, .parcaOzellikPaneli > .parcaParametreKutusu, .parcaOzellikPaneli .parcaSekilListesi { flex-shrink: 0; } /* Kenar / açık yüz seçerken sayaç + Bitti (tur 4). */ .parcaSecimSayaci { font-variant-numeric: tabular-nums; color: var(--renk-yazi-ikincil); } /* KAYIT GÖSTERGESİ, ÖNİZLEME ŞERİDİ, SÜRÜM PANELİ (08.10, veri kaybı) Bkz. tasarimSurumleri.js. Göstergenin rengi durumla: tamam yeşil, yerel / sürüyor sarı, hata kırmızı. */ .parcaKayitGostergesi { flex: 0 1 auto; min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--renk-kenarlik); background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; } .parcaKayitGostergesi::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #8a8f98; vertical-align: middle; } .parcaKayitGostergesi[data-durum="tamam"]::before { background: #2f9e5b; } .parcaKayitGostergesi[data-durum="suruyor"]::before, .parcaKayitGostergesi[data-durum="yerel"]::before { background: #d69a1e; } .parcaKayitGostergesi[data-durum="yerel"] { border-color: #d69a1e; } .parcaKayitGostergesi[data-durum="hata"] { border-color: #c9463d; background: #c9463d; color: #ffffff; font-weight: 700; } .parcaKayitGostergesi[data-durum="hata"]::before { background: #ffffff; } .parcaKayitGostergesi[data-durum="onizleme"] { border-color: var(--renk-ana); color: var(--renk-ana); } /* Pencere ızgarasının satırlarını kaydırmasın: üstte yüzen şerit. */ .parcaOnizlemeSeridi { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); z-index: 25; width: max-content; max-width: calc(100% - 16px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px; background: #fff3cd; color: #4a3500; border: 1px solid #e0c36a; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); font-size: 13px; } .parcaOnizlemeSeridi > span { flex: 1 1 220px; min-width: 0; } .parcaSurumPaneli { position: absolute; top: 44px; right: 8px; z-index: 30; width: min(460px, calc(100% - 16px)); max-height: min(70vh, calc(100% - 60px)); display: flex; flex-direction: column; background: var(--renk-panel); border: 1px solid var(--renk-kenarlik); border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } .parcaSurumBaslik { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--renk-kenarlik); } .parcaSurumListesi { overflow-y: auto; padding: 4px 0; } .parcaSurumSatiri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--renk-kenarlik-acik); } .parcaSurumBilgi { flex: 1 1 200px; min-width: 0; font-size: 12.5px; } .parcaSurumSatiri[data-kaynak="yerel"] .parcaSurumBilgi::before { content: "● "; color: #d69a1e; } .parcaSurumSatiri[data-kaynak="sunucu"] .parcaSurumBilgi::before { content: "● "; color: #2f9e5b; } .parcaSurumUyari, .parcaSurumBos { padding: 6px 10px; font-size: 12px; opacity: 0.85; } @media (max-width: 760px) { .parcaKayitGostergesi { max-width: 120px; font-size: 11px; padding: 3px 7px; } .parcaSurumPaneli { left: 8px; right: 8px; width: auto; } } /* ===== css/bolumler/65-cadKaravan.css ===== */ /* ================================================= 65. CAD KARAVAN TURU (08.10) ================================================= VW T5 karavan iç düzeni çizilirken çıkan eksikler. Ayrı dosya: 40-parcaTasarim'in hemen arkasında yükleniyor (sira.txt), tablet / telefon kuralları yine sonradan gelip eziyor. */ /* ------------------------------------------------- AĞAÇ SATIRI DÜĞMELERİ ADIN ÜSTÜNE BİNMİYOR ------------------------------------------------- Gizle / ▲ / ▼ / × düğmeleri fare gelince satırın sağına mutlak konumla, ADIN ÜSTÜNE açılıyordu: 200 px'lik ağaçta adın yarısını örtüyordu, ada tıklayan düğmeye basıyordu (bir kez sıra değişti, bir kez özellik gizlendi). Artık düğmeler yalnız SEÇİLİ satırda, adın ALTINDA kendi satırında ve sağa yaslı (telefondaki düzen her genişlikte). Seçili olmayan satırın üstünde düğme yok: ada tıklamak önce seçer, düğmeler ancak o zaman çıkar. Ad tam genişlikte kalıyor, hiçbir genişlikte üst üste binmiyor. */ .parcaAgacSatiri .parcaAgacAraclari, .parcaAgacSatiri:hover .parcaAgacAraclari { position: static; display: none; } .parcaAgacSatiri.secili { flex-wrap: wrap; height: auto; min-height: 22px; } .parcaAgacSatiri.secili .parcaAgacAraclari, .parcaAgacSatiri.secili:hover .parcaAgacAraclari { display: flex; flex: 0 0 100%; justify-content: flex-end; gap: 3px; padding: 1px 0 3px; background: transparent; } /* Özetin üstünde düğme yok artık; fare gelince de görünür kalsın. */ .parcaAgacSatiri:hover .parcaAgacOzeti { visibility: visible; } /* ------------------------------------------------- LEVHA LİSTESİ (toplu giriş tablosu) ------------------------------------------------- 60-80 levhalık iş: tablo kendi içinde iki yöne kayıyor, başlık satırı yapışık. Telefonda tablo yatay kayar; düğmeler sarmalanıyor. */ .levhaListesiKutusu { width: min(100%, 1040px); } .levhaListesiAraclari { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; } .levhaListesiYapistir { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 0 12px 8px; } .levhaListesiYapistir[hidden] { display: none; } .levhaListesiTabloKabi { flex: 1 1 auto; min-height: 120px; max-height: 52vh; margin: 0 12px; overflow: auto; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); } .levhaListesiTablosu { width: 100%; border-collapse: collapse; font-size: var(--yazi-kucuk); } .levhaListesiTablosu th { position: sticky; top: 0; z-index: 1; padding: 4px 4px; background: var(--renk-panel); color: var(--renk-yazi-ikincil); font-weight: 600; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--renk-kenarlik); } .levhaListesiTablosu td { padding: 2px; border-bottom: 1px solid var(--renk-kenarlik-acik); } .levhaListesiTablosu input, .levhaListesiTablosu select { box-sizing: border-box; width: 100%; min-width: 54px; height: 26px; padding: 2px 5px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font: inherit; } .levhaListesiTablosu td:first-child input { min-width: 130px; } .levhaListesiTablosu td:nth-child(2) select, .levhaListesiTablosu td:nth-child(9) select { min-width: 108px; } .levhaListesiDurumu.bilgi { background: color-mix(in srgb, var(--renk-ana) 10%, transparent); color: var(--renk-yazi); } @media (max-width: 760px) { .levhaListesiTablosu input, .levhaListesiTablosu select { height: 38px; font-size: 16px; } .levhaListesiTabloKabi { max-height: 46vh; } } /* ------------------------------------------------- TAŞI / AYNALA GÖVDE SEÇİMİ, AĞAÇTA ÇOKLU SEÇİM ------------------------------------------------- */ .parcaGovdeSecimi { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; padding: 6px; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); } .parcaGovdeSecimiBaslik { color: var(--renk-yazi-ikincil); font-size: 11px; font-weight: 600; } .parcaGovdeSecimiListesi { max-height: 180px; overflow-y: auto; } .parcaGovdeSecimiSatiri { font-size: 12px; } .parcaGovdeSecimiDugmeleri { display: flex; flex-wrap: wrap; gap: 4px; } .parcaAgacSatiri.cokluSecili:not(.secili) { background: color-mix(in srgb, var(--renk-ana) 18%, transparent); box-shadow: inset 3px 0 0 var(--renk-ana); } /* ------------------------------------------------- ESKİZDE YÜZEN SIĞDIR ------------------------------------------------- Şeritteki Sığdır yalnız ikondu; telefonda kayan şeridin dışında kalıyordu. Modeldeki bakış şeridi gibi çizim alanının sağ üstünde, yazısıyla. Çizim alanından önce geliyor; eksi alt pay onu alanın üstüne bindiriyor (yerleşim kaymıyor: 6 + 30 − 42 + aradaki boşluk = sıfır). */ .parcaEskizYuzenSigdir { position: relative; z-index: 5; align-self: flex-end; height: 30px; margin: 6px 8px -42px 0; padding: 0 12px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: var(--renk-yazi); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); font-size: 12px; font-weight: 600; cursor: pointer; } .parcaEskizYuzenSigdir:hover { border-color: var(--renk-ana); } @media (max-width: 760px) { .parcaEskizYuzenSigdir { height: 36px; margin-bottom: -48px; } } /* Eskiz eksen uçlarında dünya adı (Üst / Sağ'da −Z). */ .parcaEksenAdi { font-family: inherit; font-weight: 700; paint-order: stroke; stroke: var(--renk-alan); stroke-width: 0.25em; } .parcaEksenAdi.u { fill: #d24a3c; } .parcaEksenAdi.v { fill: #2f9e5b; } .parcaEksenNotu { font-weight: 600; } /* ------------------------------------------------- ARKA PLANDA HESAP: İLERLEME VE İPTAL ------------------------------------------------- Ağır kurulum (kabuk) Web Worker'da; pencerenin üst ortasında ilerleme çubuğu ve İptal. Mesaj kutularının (12000+) altında kalıyor. */ .parcaKurulumIlerleme { position: fixed; top: 64px; left: 50%; z-index: 11990; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 8px 10px 8px 14px; transform: translateX(-50%); border: 1px solid var(--renk-kenarlik); border-radius: 10px; background: var(--renk-panel); box-shadow: var(--golge-pencere); color: var(--renk-yazi); font-size: 12px; font-weight: 600; } .parcaKurulumIlerleme[hidden] { display: none; } .parcaKurulumIlerlemeMetni { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .parcaKurulumIlerlemeCubugu { flex: 0 0 120px; width: 120px; height: 8px; } @media (max-width: 760px) { .parcaKurulumIlerleme { top: auto; bottom: 70px; flex-wrap: wrap; } .parcaKurulumIlerlemeCubugu { flex: 1 1 100%; } } /* KOORDİNAT LİSTESİ YAPIŞTIR (karavan 08.10, madde 15): kutuda liste alanının altında küçük resim + özet + hatalı satırlar. */ .koordinatListesiGirdisi { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; white-space: pre; } .koordinatOnizleme { display: grid; grid-column: 1 / -1; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: start; } .koordinatOnizlemeResmi { width: 150px; height: 110px; color: var(--renk-ana); border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); background: var(--renk-panel); } .koordinatOnizlemeIlk { fill: var(--renk-ana); } .koordinatOnizlemeYazi { display: grid; gap: 4px; font-size: 13px; color: var(--renk-yazi); } .koordinatOnizlemeOzeti { font-weight: 600; } .koordinatOnizlemeHatalari { color: var(--renk-tehlike); } .koordinatHataBasligi { font-weight: 600; } .koordinatOnizlemeUyarilari { color: var(--renk-yazi-ikincil); } @media (max-width: 760px) { .koordinatOnizleme { grid-template-columns: minmax(0, 1fr); } .koordinatOnizlemeResmi { width: 100%; height: 120px; } } /* ===== css/bolumler/66-cadUretim.css ===== */ /* ================================================= 66. CAD'DEN ÜRETİME (karavan, 08.10) ================================================= "Üretime gönder" önizlemesi (CAD), 2D'de taşan şekil şeridi ve parça arası mesafe işaretleri. Renkler değişkenlerden: koyu temada kendiliğinden. */ /* ------------------------------------------------- ÖNİZLEME KUTUSU ------------------------------------------------- */ .cadUretimKutusu { width: min(100%, 1080px); } .cadUretimOzet { flex: none; padding-top: 0; } .cadUretimGovde { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 12px 8px; } /* Adım adım düzleştirme (50 gövde): ilerleme çubuğu. */ .cadUretimIlerleme { display: flex; flex-direction: column; gap: 8px; padding: 18px 4px; } .cadUretimIlerlemeMetni { color: var(--renk-yazi-ikincil); font-size: var(--yazi-normal); } .cadUretimIlerlemeCubugu { width: 100%; height: 10px; accent-color: var(--renk-ana); } .cadUretimTabloKabi { max-height: 46vh; overflow: auto; border: 1px solid var(--renk-kenarlik-acik); border-radius: var(--radius-kucuk); } .cadUretimTablosu { width: 100%; border-collapse: collapse; font-size: var(--yazi-kucuk); } .cadUretimTablosu th { position: sticky; top: 0; z-index: 1; padding: 5px 6px; background: var(--renk-panel); color: var(--renk-yazi-ikincil); font-weight: 600; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--renk-kenarlik); } .cadUretimTablosu td { padding: 4px 6px; vertical-align: middle; border-bottom: 1px solid var(--renk-kenarlik-acik); } .cadUretimSatiri.uyarili { background: color-mix(in srgb, var(--renk-uyari) 7%, transparent); } .cadUretimResimHucre { width: 48px; } .cadUretimResim { display: block; } .cadUretimResimDolgu { fill: color-mix(in srgb, var(--renk-ana) 22%, transparent); stroke: var(--renk-ana); stroke-width: 1.5%; vector-effect: non-scaling-stroke; } .cadUretimResimDelik { fill: var(--renk-panel); stroke: var(--renk-ana); vector-effect: non-scaling-stroke; } .cadUretimResimKor { fill: var(--renk-uyari); stroke: none; } .cadUretimAd { min-width: 120px; font-weight: 600; } .cadUretimMalzeme select { box-sizing: border-box; width: 100%; min-width: 185px; height: 28px; padding: 2px 5px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font: inherit; } .cadUretimSayi, .cadUretimAdet { white-space: nowrap; font-variant-numeric: tabular-nums; } .cadUretimAdet { font-weight: 700; text-align: center; } .cadUretimUyari { min-width: 160px; color: var(--renk-yazi-ikincil); } .cadUretimUyari ul, .cadUretimAtlananlar ul { margin: 0; padding-left: 16px; } .cadUretimTamam { color: var(--renk-yazi-soluk); } .cadUretimAltBaslik { margin: 10px 0 4px; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .cadUretimOzetSatiri { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 3px 0; border-bottom: 1px dashed var(--renk-kenarlik-acik); font-size: var(--yazi-kucuk); } .cadUretimOzetAd { font-weight: 600; } .cadUretimOzetSayi { color: var(--renk-yazi-ikincil); } .cadUretimAtlananlar { font-size: var(--yazi-kucuk); } .cadUretimAtlananlar li { margin-bottom: 2px; } .cadUretimGenelUyari { margin-top: 8px; padding: 6px 8px; border-radius: var(--radius-kucuk); background: var(--renk-uyari-acik); font-size: var(--yazi-kucuk); } .cadUretimDurum.bilgi { background: color-mix(in srgb, var(--renk-ana) 10%, transparent); color: var(--renk-yazi); } .cadUretimDugmeler { flex-wrap: wrap; } .cadUretimGuncelle { display: flex; align-items: center; gap: 6px; margin-right: auto; font-size: var(--yazi-kucuk); } /* Telefonda tablo kart satırına dönüyor: resim + ad üstte, değerler altta. */ @media (max-width: 760px) { .cadUretimTabloKabi { max-height: 50vh; } .cadUretimTablosu thead { display: none; } .cadUretimTablosu, .cadUretimTablosu tbody { display: block; } .cadUretimTablosu tr { display: grid; grid-template-columns: 48px 1fr auto; grid-template-areas: "resim ad adet" "resim malzeme malzeme" "olcu olcu olcu" "uyari uyari uyari"; gap: 2px 8px; padding: 6px 4px; border-bottom: 1px solid var(--renk-kenarlik-acik); } .cadUretimTablosu td { padding: 0; border: 0; } .cadUretimResimHucre { grid-area: resim; } .cadUretimAd { grid-area: ad; min-width: 0; } .cadUretimAdet { grid-area: adet; } .cadUretimMalzeme { grid-area: malzeme; } .cadUretimTablosu td:nth-child(4) { grid-area: olcu; display: inline; } .cadUretimTablosu td:nth-child(5) { grid-area: olcu; justify-self: end; } .cadUretimUyari { grid-area: uyari; min-width: 0; } .cadUretimMalzeme select { height: 38px; font-size: 16px; } .cadUretimAdet::before { content: "×"; margin-right: 1px; color: var(--renk-yazi-soluk); } } /* ------------------------------------------------- CAD ŞERİDİ: ÜRETİME GÖNDER ------------------------------------------------- */ .parcaUretimDugmesi { white-space: nowrap; } /* Telefon: ilk satırda Kaydet'in yanında, kısa adla ("Üretim"). */ @media (max-width: 760px) { .parcaUst > .parcaDugme.parcaUretimDugmesi { order: 2; padding: 4px 10px; font-size: 0; } .parcaUst > .parcaDugme.parcaUretimDugmesi::before { content: attr(data-kisa); font-size: 13px; font-weight: 600; } } /* ------------------------------------------------- 2B: TAŞMA / MESAFE ŞERİDİ, YAKIN ÇİFT İŞARETİ ------------------------------------------------- Tuval kâğıt gibi hep açık zeminli (61-ikiBoyutluKesim); şerit de sabit açık renkte, temayla dönmüyor. */ .ikbTasmaSeridi { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: flex; flex-direction: column; gap: 6px; } .ikbTasmaSeridi[hidden] { display: none; } .ikbTasmaSatiri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 10px; border: 1px solid #f0b429; border-radius: 8px; background: #fff6dd; color: #5c3d00; font-size: 12.5px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .ikbYakinSatiri { border-color: #e03131; background: #fff0f0; color: #8a1111; } .ikbTasmaMetni { flex: 1 1 260px; min-width: 0; } .ikbTasmaDugmeleri { display: flex; flex-wrap: wrap; gap: 6px; } .ikbYakinCizgi { stroke: #e03131; stroke-width: 3; stroke-linecap: round; } .ikbYakinHalka { fill: rgba(224, 49, 49, 0.14); stroke: #e03131; stroke-width: 1.5; stroke-dasharray: 3 2; } .ikbYakinYazi { fill: #a51111; font-size: 12px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; } /* ------------------------------------------------- NESTING LEVHASI: YAKIN ÇİFT ------------------------------------------------- */ .nestingYakinKatmani { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .nestingYakinCift { pointer-events: visiblePainted; cursor: help; } .nestingYakinCizgi { stroke: #e03131; stroke-width: 3px; stroke-linecap: round; vector-effect: non-scaling-stroke; } .nestingYakinNokta { fill: #e03131; } .nestingYakinHalka { fill: rgba(224, 49, 49, 0.18); stroke: #e03131; stroke-width: 1.5px; vector-effect: non-scaling-stroke; } .nestingYakinRozeti { margin-left: 8px; white-space: nowrap; padding: 1px 7px; border-radius: var(--radius-hap); background: #e03131; color: #fff; font-size: var(--yazi-mini); font-weight: 700; cursor: help; } .nestingPlaka.mesafeUyarili .nestingPlakaAlani { outline: 2px solid #e03131; outline-offset: 1px; } /* ------------------------------------------------- GEÇME (DİL / YUVA) PANELİ ------------------------------------------------- Tasarımın ortak köşe ayarı (bütün geçmeler): özelliğin kendi alanlarından kesik çizgiyle ayrılıyor. */ .parcaGecmeAyari { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--renk-kenarlik); } /* ===== css/bolumler/66-cadAgac.css ===== */ /* ================================================= 66. CAD AĞAÇ DÜZENİ VE 3B SEÇİM (karavan 08.10) ================================================= 100+ özellikli karavan tasarımı: ağaçta arama, Sıra / Parça görünümü, klasör, toplu işlem şeridi, göz (gizle / göster), çizim ekstrüzyonun içinde; 3B'de seçili gövdenin bilgi kutusu, "yalnız göster" şeridi, çakışma listesi. Ayrı dosya: 65-cadKaravan'ın arkasında, tablet / telefon kuralları yine sonradan gelip ezebiliyor. */ /* Araç şeridi kaydırınca üstte kalır (ağaç 100+ satır). */ .parcaAgacAraclar { position: sticky; top: -10px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -2px -10px 0; padding: 4px 10px 6px; background: var(--renk-panel); border-bottom: 1px solid var(--renk-kenarlik); } .parcaAgacAramaKutusu { position: relative; flex: 1 1 100%; min-width: 0; } .parcaAgacArama { width: 100%; height: 26px; padding: 0 24px 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-alan, #fff); color: var(--renk-yazi); font: inherit; font-size: 12px; } .parcaAgacArama:focus { outline: 2px solid var(--renk-ana); outline-offset: -1px; } .parcaAgacArama::-webkit-search-cancel-button { display: none; } .parcaAgacAramaTemizle { position: absolute; top: 3px; right: 3px; padding: 0 6px; border: 0; background: transparent; } .parcaAgacAramaTemizle[hidden] { display: none; } .parcaAgacGorunum { display: inline-flex; border: 1px solid var(--renk-kenarlik); border-radius: 6px; overflow: hidden; } .parcaAgacGorunumDugmesi { padding: 2px 9px; border: 0; background: var(--renk-alan, #fff); color: var(--renk-yazi-ikincil); font: inherit; font-size: 11px; cursor: pointer; } .parcaAgacGorunumDugmesi + .parcaAgacGorunumDugmesi { border-left: 1px solid var(--renk-kenarlik); } .parcaAgacGorunumDugmesi.aktif { background: var(--renk-ana); color: #fff; } .parcaAgacKlasorDugmesi { margin-left: auto; } .parcaAgacKlasorDugmesi[hidden] { display: none; } /* Toplu işlem şeridi ve gizli notu. */ .parcaAgacToplu, .parcaAgacGizliNotu { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 6px; font-size: 11px; } .parcaAgacToplu { background: color-mix(in srgb, var(--renk-ana) 12%, transparent); border: 1px solid color-mix(in srgb, var(--renk-ana) 35%, transparent); } .parcaAgacTopluSayac { margin-right: auto; font-weight: 700; } .parcaAgacGizliNotu { justify-content: space-between; color: var(--renk-yazi-ikincil); background: var(--renk-satir-vurgu, rgba(0, 0, 0, 0.04)); } .parcaAgacToplu[hidden], .parcaAgacGizliNotu[hidden], .parcaAgacMenusu[hidden] { display: none; } /* Klasöre taşı / klasör sağ tık menüsü (ağaç panelinin içinde). */ .parcaAgac { position: relative; } .parcaAgacMenusu { position: absolute; z-index: 9; min-width: 170px; max-width: calc(100% - 8px); max-height: 60vh; overflow: auto; 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); } .parcaAgacMenuAyraci { height: 1px; margin: 3px 4px; background: var(--renk-kenarlik); } /* Göz: her satırda, soluk; gizlide belirgin. */ .parcaAgacGoz { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--renk-yazi-ikincil); opacity: 0.45; cursor: pointer; } .parcaAgacGoz:hover:not(:disabled), .parcaAgacSatiri:hover .parcaAgacGoz { opacity: 0.9; } .parcaAgacGoz--kapali, .parcaAgacGoz--klasor { opacity: 0.9; } .parcaAgacGoz:disabled { cursor: default; opacity: 0.35; } .parcaAgacSatiri.secili .parcaAgacGoz { color: #fff; } .parcaAgacSatiri.gizli .parcaAgacAdi, .parcaAgacSatiri.gizli .parcaAgacIkonu { opacity: 0.5; } .parcaAgacSatiri.gizli .parcaAgacAdi { font-style: italic; } /* Klasör, gövde (Parça görünümü) ve katlanmış çizim satırları. */ .parcaAgacKlasoru .parcaAgacAdi { font-weight: 700; } .parcaAgacGovdesi .parcaAgacAdi { font-weight: 700; } .parcaAgacKatli .parcaAgacAdi { font-weight: 500; color: var(--renk-yazi-ikincil); } .parcaAgacSatiri.secili.parcaAgacKatli .parcaAgacAdi { color: #fff; } .parcaAgacSatiri[hidden] { display: none; } /* Seçili satır sarmalanıyor (araçlar alt satırda): göz adın satırında kalsın. */ .parcaAgacSatiri.secili .parcaAgacAdi { flex: 3 1 0; } /* 3B'de tıklanan gövdenin doğuranı. */ .parcaAgacSatiri.govdeSecili:not(.secili) { background: color-mix(in srgb, #2f7cf6 16%, transparent); box-shadow: inset 3px 0 0 #2f7cf6; } /* Ağaçta bul: kısa parlama. */ .parcaAgacSatiri.bulundu { animation: parcaAgacBulundu 1.3s ease-out 1; } @keyframes parcaAgacBulundu { 0%, 35% { box-shadow: inset 0 0 0 2px #2f7cf6; } 100% { box-shadow: inset 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .parcaAgacSatiri.bulundu { animation: none; box-shadow: inset 0 0 0 2px #2f7cf6; } } /* Arama eşleşmesi. */ .parcaAgacSatiri.aramaEslesti:not(.secili) .parcaAgacAdi { text-decoration: underline; text-decoration-color: var(--renk-ana); text-underline-offset: 2px; } /* Sürükle-bırak hedefi. */ .parcaAgacSatiri.birakHedefi { outline: 2px dashed var(--renk-ana); outline-offset: -2px; } .parcaAgacListesi.birakHedefi { outline: 2px dashed var(--renk-ana); } /* Çakışan gövde: adın önünde kırmızı nokta. */ .parcaAgacSatiri.cakisiyor .parcaAgacAdi::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--renk-tehlike, #c62828); vertical-align: 1px; } .parcaAgacSonucYok { font-style: italic; } /* ------------------------------------------------- SEÇİLİ GÖVDE BİLGİSİ (tuvalin sol altı) ------------------------------------------------- */ .parcaGovdeBilgisi { position: absolute; left: 8px; bottom: 8px; z-index: 4; width: min(300px, calc(100% - 16px)); padding: 6px 8px 7px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: color-mix(in srgb, var(--renk-panel) 94%, transparent); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); font-size: 11.5px; color: var(--renk-yazi); } .parcaGovdeBilgisi[hidden], .parcaGovdeKipSeridi[hidden] { display: none; } .parcaGovdeBilgisiUst { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } .parcaGovdeBilgisiAdi { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; } .parcaGovdeBilgisiKapat { border: 0; background: transparent; } .parcaGovdeBilgisiTablo { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 1px; } .parcaGovdeBilgisiSatiri { display: contents; } .parcaGovdeBilgisiEtiketi { color: var(--renk-yazi-soluk); } .parcaGovdeBilgisiDegeri { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .parcaGovdeBilgisiDugmeleri { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; } .parcaGovdeBilgisiDugmesi.aktif { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; } /* Yalnız göster / saydam sürerken: tuvalin sol üstünde, bakış düğmelerinin altında şerit. */ .parcaGovdeKipSeridi { position: absolute; top: 46px; left: 8px; z-index: 4; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); padding: 4px 6px 4px 10px; border-radius: 999px; background: #1d5fd6; color: #fff; font-size: 11.5px; white-space: nowrap; } .parcaGovdeKipSeridi .parcaMini { border-color: rgba(255, 255, 255, 0.6); background: transparent; color: #fff; } /* ------------------------------------------------- ÇAKIŞMA LİSTESİ (ağaç panelinde) ------------------------------------------------- */ .parcaCakismaKutusu { border: 1px solid color-mix(in srgb, var(--renk-tehlike, #c62828) 40%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--renk-tehlike, #c62828) 6%, transparent); font-size: 11.5px; } .parcaCakismaKutusu[hidden] { display: none; } .parcaCakismaKutusu.temiz { border-color: var(--renk-kenarlik); background: transparent; } .parcaCakismaBasligi { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; border: 0; background: transparent; color: var(--renk-tehlike, #c62828); font: inherit; font-weight: 700; text-align: left; cursor: pointer; } .parcaCakismaKutusu.temiz .parcaCakismaBasligi { color: var(--renk-yazi-ikincil); font-weight: 600; } .parcaCakismaListesi { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; margin: 0; padding: 0 4px 4px; list-style: none; } .parcaCakismaSatiri { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; padding: 3px 4px; border-radius: 4px; } .parcaCakismaSatiri:hover { background: var(--renk-satir-vurgu, rgba(0, 0, 0, 0.05)); } .parcaCakismaAdi { flex: 1 1 140px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .parcaCakismaHacmi { color: var(--renk-tehlike, #c62828); font-variant-numeric: tabular-nums; } .parcaCakismaSatiri.bilerek { opacity: 0.6; } .parcaCakismaSatiri.bilerek .parcaCakismaHacmi { color: var(--renk-yazi-soluk); } .parcaCakismaNotu { padding: 0 6px 5px; color: var(--renk-yazi-soluk); } /* Telefon: bilgi kutusu dar, düğmeler sarmalı; araç şeridi aynı. */ @media (max-width: 760px) { .parcaGovdeBilgisi { left: 6px; bottom: 6px; width: calc(100% - 64px); padding: 5px 7px; font-size: 11px; } .parcaGovdeBilgisiTablo { grid-template-columns: auto 1fr; font-size: 10.5px; } /* Telefonda tuval küçük: kutu satırı yok, düğmeler tek satır kayar. */ .parcaGovdeBilgisi [data-alan="govdeBilgisi_kutu"], .parcaGovdeBilgisiSatiri:nth-child(2) > .parcaGovdeBilgisiEtiketi { display: none; } .parcaGovdeBilgisiDugmeleri { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .parcaGovdeBilgisi .parcaMini { flex: none; min-height: 30px; min-width: 0; padding: 2px 9px; font-size: 12px; } /* Sağda dikey bakış sütunu var. */ .parcaGovdeKipSeridi { top: 8px; max-width: calc(100% - 86px); font-size: 11px; } .parcaGovdeKipSeridi > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .parcaGovdeKipSeridi .parcaMini { flex: none; min-height: 28px; padding: 2px 8px; font-size: 11.5px; } .parcaAgacArama { height: 34px; font-size: 14px; } .parcaAgacGoz { width: 32px; height: 32px; } .parcaAgacGorunumDugmesi { padding: 6px 12px; font-size: 12px; } } /* ------------------------------------------------- AĞAÇ GENİŞLİĞİ: geniş ekranda 236 px, kulpla 160-520 px ------------------------------------------------- */ @media (min-width: 1001px) { .parcaGovde:not(.agacKapali) { --parca-agac-genislik: var(--parca-agac-kullanici, 200px); } .parcaAgacKulpu { position: absolute; top: 0; bottom: 0; left: calc(var(--parca-agac-genislik) - 3px); z-index: 5; width: 6px; cursor: col-resize; touch-action: none; } .parcaAgacKulpu:hover, .parcaAgacKulpu.suruklen { background: color-mix(in srgb, var(--renk-ana) 45%, transparent); } .parcaGovde.agacKapali > .parcaAgacKulpu { display: none; } } @media (min-width: 1280px) { .parcaGovde:not(.agacKapali) { --parca-agac-genislik: var(--parca-agac-kullanici, 236px); } } @media (max-width: 1000px) { .parcaAgacKulpu { display: none; } } /* Telefon / tablet: arama ile görünüm düğmeleri aynı satırda. */ @media (max-width: 1000px) { .parcaAgacAramaKutusu { flex: 1 1 140px; } .parcaAgacAraclar { top: 0; margin: 0; padding: 4px 0 6px; } } /* Tuvalde çakışma rozeti (sağ alt): tık ağaçtaki listeyi açar. */ .parcaCakismaRozeti { position: absolute; right: 8px; bottom: 8px; z-index: 4; padding: 3px 9px; border: 0; border-radius: 999px; background: var(--renk-tehlike, #c62828); color: #fff; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; } .parcaCakismaRozeti[hidden] { display: none; } /* Telefonda sağda dikey bakış sütunu, solda altta bilgi kutusu: rozet sol üstte, kip şeridi altında. */ @media (max-width: 760px) { .parcaCakismaRozeti { top: 6px; left: 6px; right: auto; bottom: auto; padding: 4px 8px; font-size: 11px; } .parcaTuval:has(.parcaCakismaRozeti:not([hidden])) .parcaGovdeKipSeridi { top: 40px; } } /* ===== css/bolumler/67-cadTeknikResim.css ===== */ /* ================================================= 67. CAD: TEKNİK RESİM (TÜM PARÇALAR) (karavan P9, 08.10) ================================================= Dışa aktar ▸ "Teknik resim (tüm parçalar)" penceresi: ilerleme çubuğu 66-cadUretim'den; burada sayfaların küçük önizlemesi (A4 yatay kâğıtlar) ve yazdırma çerçevesi. Kâğıt temayla dönmüyor (çizim beyaz kâğıtta). */ .cadTeknikKutusu { width: min(100%, 1120px); } .cadTeknikSayfalar { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; padding: 6px 2px 10px; } .cadTeknikSayfa { display: flex; flex-direction: column; gap: 5px; margin: 0; } .cadTeknikSayfaResmi { display: block; width: 100%; height: auto; aspect-ratio: 297 / 210; background: #fff; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } .cadTeknikSayfaAdi { overflow: hidden; color: var(--renk-yazi-ikincil); font-size: var(--yazi-kucuk); white-space: nowrap; text-overflow: ellipsis; } /* Açılır pencere engellenince yazdırılan gizli çerçeve. */ .cadTeknikYazdirmaCercevesi { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; } @media (max-width: 760px) { .cadTeknikSayfalar { grid-template-columns: 1fr; } } /* ===== 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); } /* Arama (01.10): müşterinin bildirdiği MK kodu ya da parça adı; yazınca yalnız eşleşen satırlar kalır. */ .pkArama { margin: 0 18px 8px; padding: 7px 10px; font-size: var(--yazi-normal); color: var(--renk-yazi); background: var(--renk-alan); border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); } /* ===== 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; } /* Başlıktaki panel / Dosya düğmeleri ve Ekle'nin "Daha ▾"sı (06.10). */ .parcaPanelDugmesi, .parcaUstAc, .parcaAracAcilirDugmesi { min-width: 44px; min-height: 44px; } /* 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; } /* Tablet turu (01.10): 14 px yazıda "mm" etiketi ~38 px; 72 px payda son rakam etiketin altında kalıyordu ("80C", "77C"). Etiket 38 + ~38 → 84 px pay. */ .sagPanelSayiKapsayiciOkluBirimli .sagPanelSayiInput { padding-right: 84px; } .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; } /* Satır araçları (sil, gizle, kopyala) yalnız :hover'da çıkıyordu; dokunmatikte fare yok (QA 01.10). Seçili satırda hep görünür: önce dokun-seç, sonra araç. */ .parcaAgacSatiri.secili .parcaAgacAraclari { display: flex; background: var(--renk-ana); } .parcaAgacSatiri.secili .parcaAgacOzeti { visibility: hidden; } /* 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; } /* AĞAÇ SATIRI (QA turu, 01.10): ok 44 px ama satır 20 px sabitti; satırlar üst üste biniyordu. Ok ve hiç kısalmayan ölçü 214 px'lik ağaçta adı sıfıra indiriyordu: "Oda" ve "Alt Dolap 800" görünmüyordu. Satır oka göre uzuyor, ad en az ~6 harf, ölçü sığmazsa alt satıra iniyor. */ .modelAgaciSatir { height: auto; min-height: 44px; flex-wrap: wrap; row-gap: 0; align-content: center; } .modelAgaciAd { min-width: 6em; } /* Dolap satırında ad, 44 px'lik okun yanına sığsın (05.10): "100% - 40px" PC okuna göreydi; dokunmatikte ok ayrı satıra düşüyor, ağaç iki kat uzuyordu. */ .modelAgaciYuvasi .modelAgaciSatir.modelAgaciSatir--dolap .modelAgaciAd { flex-basis: calc(100% - 60px); } .modelAgaciYuvasi { --agac-olcu-girinti: 48px; } .modelAgaciYuvasi .modelAgaciSatir--oda .modelAgaciOlcu { flex-basis: 100%; padding-left: 48px; padding-bottom: 4px; } /* DOKUNMATİKTE PENCERE KAYSIN, KLAVYE ÖRTMESİN (01.10) Tablet turu: iPad dikeyde Kasa Ölçüleri penceresi 1470 px boyunda, ekran 1080; "Dolabı Oluştur" ekranın dışında kalıyor ve katman kaymadığı için dolap kurulamıyordu. Raf Ekle de ortada duruyor, klavye açılınca alanlar altında kalıyordu. Dokunmatikte form pencereleri ÜSTE yaslanıyor, katman kayıyor; altta klavyeye yer var. Pencere kendi içinde kırpılmıyor (max-height yok). */ .parcaEklemeKatmani, .rafEklemeKatmani, .kutuphaneyeKaydetKatmani, .malzemeSecimiKatmani, .dolapBakisYonuKatmani, .yeniProjeKatmani, .projeAyarlariKatmani, .tekrarKesimKatmani, .kesimSiparisKatmani { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 16px; padding-bottom: 42vh; } .parcaEklemePenceresi, .rafEklemePenceresi, .kutuphaneyeKaydetPenceresi, .malzemeSecimiPenceresi, .dolapBakisYonuPenceresi { max-height: none; overflow: visible; } /* YAPIŞKAN DÜĞMELER ÜST ÜSTE BİNMESİN (01.10) Kasa penceresinde "Raf Ekle" ve "Askılık Ekle" ikisi de alta yapışıyor; tablette 44 px'e büyüyünce sütun kayıyor, ikisi aynı yere yapışıyor ve Raf Ekle'ye dokunan Askılık ekliyordu. Dokunmatikte yapışma yok. */ .sagPanelIslemBtn.yapisikEylem { position: static; box-shadow: none; } } /* ------------------------------------------------------------ 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 (06.10: sütun genişlikleri değişkende). */ .parcaGovde { --parca-agac-genislik: 190px; --parca-panel-genislik: 260px; grid-template-columns: var(--parca-agac-genislik) minmax(0, 1fr) var(--parca-panel-genislik); } /* Başlık yazısı dar ekranda yer kaplıyor; adı kutuda zaten var. */ .parcaUst .parcaBaslik { display: none; } /* Eskizde ölçü listesi de daralıyor. */ .parcaGovde.eskizModu .parcaEskizKabi .parcaCizimEditoru { grid-template-columns: minmax(0, 1fr); } } /* DİKEY TABLET (QA turu, 01.10): 834 px'te ağaç 200 + parametreler 280 sabitti; çizim alanına 355 px kalıyordu. 01.10'da parametreler çizimin altına inmişti (3B alan yine 640 × 750). 06.10 (kullanıcı: "paneller çok yer kaplıyor"): tablette yan paneller sütun değil KATMAN. 3B alan ekranın tamamı; başlıktaki ağaç / parametre düğmesi paneli 3B'nin üstüne açar (`data-katman`), aynı anda biri. Ağaçta özelliğe basınca parametre katmanı kendiliğinden açılıyor. */ @media (min-width: 761px) and (max-width: 1000px) { .parcaGovde, .parcaGovde.agacKapali, .parcaGovde.panelKapali { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sahne"; } .parcaGovde > .parcaAgac, .parcaGovde > .parcaOzellikPaneli { position: absolute; grid-area: auto; top: 0; bottom: 0; z-index: 20; display: none; box-shadow: var(--golge-yuzen, 0 8px 24px rgba(0, 0, 0, 0.25)); } .parcaGovde > .parcaAgac { left: 0; width: min(260px, 40vw); } .parcaGovde > .parcaOzellikPaneli { right: 0; width: min(340px, 48vw); } .parcaGovde[data-katman="agac"] > .parcaAgac, .parcaGovde[data-katman="panel"] > .parcaOzellikPaneli { display: flex; } .parcaSahneAlani, .parcaGovde.eskizModu .parcaEskizAlani { min-height: 0; } /* Parametre katmanı açıkken bakış şeridi (Ön Üst … Kesit) ve yüz ipucu katmanın ALTINDA kalıyordu (tur 12, 820 px): delik için yüz seçerken Alt / İzo'ya basılamıyordu. Katmanın solunda duruyorlar. */ .parcaGovde[data-katman="panel"] .parcaBakislar { right: calc(min(340px, 48vw) + 8px); } .parcaGovde[data-katman="panel"] .parcaYuzIpucu { padding-right: calc(min(340px, 48vw) + 10px); } /* Ekle şeridi tek satıra sığsın: grup adları yerine yalnız ayırıcı çizgi. */ .parcaAracSeridiAdi { display: none; } .parcaAracGrubu { padding: 0 4px; } } /* ------------------------------------------------------------ CAD PENCERESİ DOKUNMATİKTE (06.10, ikinci tur) ------------------------------------------------------------ 1180 × 820 yatay tablette ölçtüm: mod düğmeleri 24 px, ad kutusu 27, geri / ileri 28 px genişti; zaman çizelgesi 23 px. Ağaçta seçili satırın dört düğmesi (44 px) satıra sığmayıp satırın üstüne biniyordu, nokta listesinde x / y kutuları sıfıra iniyordu. CAD'e özel hedefler 40 px: 44'lük genel kural CAD başlığını 52 px'e çıkarıyordu. */ @media (pointer: coarse) { .parcaUst .parcaDugme, .parcaUst .parcaKapat, .parcaUst .parcaPanelDugmesi, .parcaUst .parcaUstAc { min-width: 40px; min-height: 40px; padding: 4px 12px; } .parcaUst .parcaAdGirisi { min-height: 40px; } .parcaUst .parcaGeriIleri { min-width: 40px; } .parcaUst .parcaModDugmesi { min-height: 34px; padding: 4px 14px; } .parcaUstEk select, .parcaOzellikPaneli .parcaAlan input, .parcaOzellikPaneli .parcaAlan select { min-height: 40px; } /* Görünüm grubu ve eskiz şeridi: 40 px kare. */ .parcaBakislar .parcaBakisDugmesi { min-width: 40px; min-height: 40px; padding: 2px 10px; } .parcaEskizSeridi .parcaAracDugmesi { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; } .parcaEskizSeridi .parcaAracDugmesi[data-komut="cokgenBitir"], .parcaEskizSeridi .parcaEskizDahaDugmesi { width: auto; padding: 0 12px; } .parcaEskizDahaListesi .parcaAracDugmesi { min-height: 40px; } .parcaEskizUst .parcaDugme, .parcaEskizUst .parcaPanelDugmesi { min-width: 40px; min-height: 40px; padding: 4px 12px; } .parcaEskizDurumu select { min-height: 36px; } /* Zaman çizelgesi. */ .parcaZamanDugmesi { min-width: 40px; min-height: 40px; } .parcaZamanOgesi { width: 40px; height: 40px; } .parcaZamanImleci { height: 36px; } /* Ağaç: satır 40 px, ad + özet tek satırda (uygulamanın model ağacının dokunmatik kuralı burada satırı ikiye bölüyordu). Seçili satırın düğmeleri satırın ALTINDA kendi sırasında; satırı örtmüyor. */ .parcaAgac .modelAgaciSatir { min-height: 40px; flex-wrap: nowrap; align-content: normal; } .parcaAgac .modelAgaciAd { min-width: 0; } .parcaAgac .modelAgaciOk { min-width: 28px; min-height: 40px; padding: 0; } .parcaAgac .parcaAgacSatiri.secili { flex-wrap: wrap; } .parcaAgac .parcaAgacSatiri.secili .parcaAgacAraclari { position: static; flex-basis: 100%; flex-wrap: nowrap; justify-content: flex-end; padding: 2px 0 4px; background: transparent; } .parcaAgac .parcaAgacSatiri.secili .parcaAgacOzeti { visibility: visible; } .parcaAgac .parcaAgacAraclari button { min-width: 40px; min-height: 40px; padding: 4px 8px; } /* Nokta satırı: kenar ölçüsü alt satıra; x / y kutuları sıfıra inmesin. */ .parcaNoktaSatiri { grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr) auto auto; } .parcaNoktaSatiri [data-alan="kenarOlcusu"] { grid-row: 2; grid-column: 2 / -1; } .parcaNoktaSatiri input { min-height: 40px; } } /* Ağaç adı satır boyu (dokunma hedefi satırın tamamı); çizelge ögeleri daralmasın. */ @media (pointer: coarse) { .parcaAgac .parcaAgacAdi { align-self: stretch; } .parcaZamanOgesi { flex: none; } .parcaUst .parcaModAnahtari .parcaModDugmesi { min-height: 36px; } } /* ===== 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-tehlike); 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); } /* Başlık içi sekmeler (05.10): Levhalar → Levha çeşitleri / Artıklar … */ .malzemeVeStokAltSekmeler { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 10px; background: var(--renk-panel); } .malzemeVeStokAltSekmeler[hidden] { display: none; } .malzemeVeStokAltSekme { height: 30px; padding: 0 14px; border: 1px solid var(--renk-kenarlik); border-radius: 999px; background: var(--renk-panel); color: var(--renk-yazi); font-size: 13px; cursor: pointer; } .malzemeVeStokAltSekme.aktif { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; font-weight: 600; } /* 05.10 sadeleştirme: renk kutusu yuvarlak (onay kutusu sanılıyordu); "Varsayılanlara dön" listenin altında küçük metin düğmesi. */ .malzemeVeStokPenceresi .malzemeYonetimiRenkKutusu { width: 18px; height: 18px; border-radius: 50%; } .malzemeYonetimiListeAltAraclari { display: flex; justify-content: flex-end; padding: 10px 8px 4px; } .malzemeYonetimiListeAltAraclari .malzemeYonetimiSifirlaBtn { height: auto; padding: 4px 8px; border: none; background: none; font-size: 11px; text-decoration: underline; } .malzemeYonetimiListeAltAraclari .malzemeYonetimiSifirlaBtn:hover { background: none; } /* Levha formu iki kat (05.10) */ .malzemeFormIleriDugme { display: block; width: 100%; margin: 10px 0 4px; padding: 8px 10px; border: 1px dashed var(--renk-kenarlik); border-radius: 8px; background: none; color: var(--renk-yazi-soluk, var(--renk-yazi)); font-size: 13px; text-align: left; cursor: pointer; } .malzemeFormIleri[hidden] { display: none; } .malzemeFormIleri { padding-left: 8px; border-left: 2px solid var(--renk-kenarlik); } /* ============================================================ TELEFON VE TABLET (05.10, kullanıcı: "yaptığın değişikliklerde bakıyor musun telefonda ve tablette nasıl olduğuna") ============================================================ Ölçüldü (390 ve 820 genişlik): - telefonda dört başlık yan yana sığmıyor, "Alışveriş" dışarıda - levha seçilince form ikinci sütunda sıkışıyor (tablette de) - "Eksikleri aldım" düğmesinin yazısı kesiliyor - Elimdekiler'de levha ekleme kutuları 30 px'e düşüyor */ @media (max-width: 900px) { .malzemeVeStokPenceresi .malzemeYonetimiPanel { grid-template-columns: minmax(0, 1fr); } .malzemeVeStokPenceresi .malzemeYonetimiPanel > * { min-width: 0; } .malzemeVeStokPenceresi .malzemeYonetimiListeSutunu { border-right: none; border-bottom: 1px solid var(--renk-kenarlik); } .malzemeVeStokPenceresi .malzemeYonetimiFormSutunu { overflow: visible; } } @media (max-width: 760px) { .malzemeVeStokPenceresi .malzemeVeStokGezinti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; overflow: visible; } .malzemeVeStokPenceresi .malzemeVeStokGezintiBtn { flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 6px 2px; font-size: 11px; text-align: center; } .malzemeVeStokPenceresi .malzemeVeStokGezintiAd { white-space: normal; line-height: 1.15; } .malzemeVeStokPenceresi .malzemeVeStokAldimBtn { padding: 6px 10px; font-size: 12px; white-space: nowrap; } .malzemeVeStokOzet { font-size: 11px; } .siparisUstCubuk { flex-wrap: wrap; gap: 6px; } .siparisUstCubuk .siparisAldimBtn { height: auto; min-height: 32px; padding: 6px 10px; white-space: normal; text-align: left; } /* Levha stoğu ekleme: iki satır (malzeme tek başına, ölçüler alta). */ .malzemeVeStokPenceresi .levhaStoguEkleme { flex-wrap: wrap; padding: 8px 4px; } .malzemeVeStokPenceresi .levhaStoguEkleme > select { flex: 1 1 100%; } .malzemeVeStokPenceresi .levhaStoguEkleme > input { flex: 1 1 22%; min-width: 64px; } .malzemeVeStokPenceresi .levhaStoguEkleme > button { flex: 1 1 100%; } /* Levha satırı: ad üstte tam, ölçü/adet ve düğmeler altta. */ .malzemeVeStokPenceresi .levhaStoguSatiri { grid-template-columns: 1fr auto; row-gap: 4px; } .malzemeVeStokPenceresi .levhaStoguSatiri > :first-child { grid-column: 1 / -1; white-space: normal; font-weight: 600; } .malzemeVeStokPenceresi .levhaStoguSatiri > :last-child { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 760px) { /* Form satırı: etiket üstte, kutu altta (140 px etiket telefonda sığmıyordu). */ .malzemeVeStokPenceresi .malzemeFormSatiri { grid-template-columns: minmax(0, 1fr); row-gap: 3px; } .malzemeVeStokPenceresi .malzemeFormSatiri > * { min-width: 0; grid-column: 1; } } /* ===== 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; } /* KVKK onay kutuları (05.10) */ .uyeGirisOnaylar { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-alan); } .uyeGirisOnaylar[hidden] { display: none; } .uyeGirisOnay { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.4; color: var(--renk-yazi); cursor: pointer; } .uyeGirisOnay input { flex: none; margin: 2px 0 0; width: 16px; height: 16px; } .uyeGirisOnay a, .uyeGirisHukuk a { color: var(--renk-ana-yazi); } .uyeGirisHukuk { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; font-size: 11px; } .uyelerVeriSorumlusu .uyelerAyarAlani input[type="text"] { width: 260px; max-width: 100%; } .uyelerVeriSorumlusu .yoneticiAciklama a { margin-right: 10px; } /* 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; } /* iPhone 16px altındaki kutuya dokununca sayfayı büyütüyor; giriş ilk ekran. */ .uyeGirisAlan input { font-size: 16px; } } /* Destek girişi (05.10): yönetici başkasının hesabında; turuncu, telefonda da ad görünür ki unutulmasın. */ .uyeRozeti.uyeRozetiDestek { background: #ffe8c2; border-color: #e08a00; color: #5a3600; } .uyeRozetiDestek .uyeRozetAdi, .uyeRozetiHeaderde.uyeRozetiDestek .uyeRozetAdi { display: inline; max-width: 200px; } .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; } /* Telefon (05.10 gece turu): giriş ekranında "Çıkış yap" ve "Yeni Proje" iki satıra kırılıp kesiliyordu. */ .uyeRozetDugme { white-space: nowrap; } .uyeRozetDugme.uyeRozetYonetici { border-color: var(--renk-ana); color: var(--renk-ana); font-weight: 600; } .girisYeniProjeBtn { white-space: nowrap; flex-shrink: 0; } @media (max-width: 760px) { .girisHeader { gap: 6px; padding: 0 10px; } .girisHeader .uyeRozetiHeaderde { margin-right: 4px; min-width: 0; } .girisYeniProjeBtn { padding: 0 10px; } .girisAltBaslik { display: none; } } @media (max-width: 760px) { /* Giriş başlığında yer yok: program adı gizli, logo kalıyor (rozet "Yeni Proje"nin üstüne biniyordu). */ .girisHeader .girisProgramAdi, .girisHeader .girisAltBaslik { display: none; } /* Yönetici paneli ayarları: etiket üstte, kutu tam genişlik. */ .uyelerAyarAlani { display: flex; flex-wrap: wrap; width: 100%; } .uyelerAyarAlani > span { flex: 1 1 100%; } .uyelerAyarAlani input:not([type="checkbox"]):not([type="number"]) { flex: 1 1 auto; min-width: 0; width: 100%; } .uyelerGoogle input { min-width: 0; } .uyelerAyarSatiri { gap: 10px; } } /* ÜST ŞERİT DAR EKRAN (05.10 gece turu) Ölçüldü (390 px, mobilyacı): üst menü grupları 115 px'e sıkışıp Pazaryeri ve Yapay Zekâ "Hata bildir" ile rozetin altında kalıyordu; kaydırılabildiğini belli eden bir şey yoktu. 900 px altı: rozette yalnız simge, ad yok; Hata bildir yalnız bayrak; telefonda tam ekran düğmesi yok; kayan grupların sağ ucu soluyor. */ .uyeRozetSimge { display: none; } @media (max-width: 900px) { .uyeRozetiHeaderde .uyeRozetAdi { display: none; } .uyeRozetiHeaderde .uyeRozetSimge { display: inline; font-size: 14px; line-height: 1; } .uyeRozetiHeaderde .uyeRozetMetin { display: none; } .uyeRozetiHeaderde .uyeRozetDugme { min-width: 30px; padding: 4px 7px; } .uyeRozeti.uyeRozetiHeaderde { gap: 4px; padding: 2px 3px; } .calismaHeader .hataBildirDugmesi { width: 40px; padding: 0; } .calismaHeader .hataBildirYazisi { display: none; } .ustMenuGruplari { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); } /* Destek kipinde ad görünmeli (kimin hesabındayım). */ .uyeRozetiHeaderde.uyeRozetiDestek .uyeRozetAdi { display: inline; max-width: 90px; } } @media (max-width: 760px) { .calismaHeader .tamEkranDugmesi:not(.hataBildirDugmesi) { display: none; } } @media (max-width: 900px) { body.yoneticiOturumu .calismaHeader .hataBildirDugmesi { display: none; } } /* E-posta ayarı (06.10): adresler kesilmesin, deneme düğmesi kendi boyunda. */ .uyelerPosta input[type="email"] { width: 260px; max-width: 100%; } .uyelerPosta > [data-komut="postaDene"] { flex: 0 0 auto; width: auto; align-self: flex-start; padding: 0 14px; } .uyelerPostaSonuc:empty { display: none; } @media (max-width: 760px) { .uyelerPosta input[type="email"] { width: 100%; } .uyelerPosta > [data-komut="postaDene"] { width: 100%; } } /* ===== 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; } /* Yapay Zekâ Anahtarım (05.10) */ .yzAnahtarimPenceresi { max-width: 560px; } .yzAnahtarAdimlari { margin: 4px 0 6px; padding-left: 20px; font-size: 13px; line-height: 1.5; color: var(--renk-yazi); } .yzAnahtarBaglanti { display: inline-block; margin-bottom: 8px; font-size: 13px; color: var(--renk-ana); } .yzAnahtarGirisi { flex: 1 1 220px; min-width: 0; height: var(--alan-yukseklik, 32px); padding: 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: var(--renk-yazi); font-family: monospace; } .yzMikBtn[hidden] { display: none; } .uyelerYzPaylas { display: flex; align-items: center; gap: 6px; } .uyelerAyarAlani[hidden] { display: none; } /* ============================================================ ASİSTAN (06.10): sağda sohbet paneli; telefonda tam ekran. ============================================================ */ .asistanPaneli { position: fixed; top: calc(var(--serit-yukseklik, 44px) + 8px); right: 8px; bottom: 8px; z-index: 1370; display: flex; flex-direction: column; width: min(400px, calc(100vw - 16px)); border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-orta); background: var(--renk-panel); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32); color: var(--renk-yazi); overflow: hidden; } .asistanUst { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--renk-kenarlik-acik); background: var(--renk-alan-vurgu); } .asistanBaslik { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; } .asistanBaslikAd { font-weight: 700; } .asistanBaslikAlt { overflow: hidden; font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); white-space: nowrap; text-overflow: ellipsis; } .asistanUstBtn { flex: none; min-height: 30px; 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; } .asistanKapat { width: 30px; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; } .asistanAkis { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; overflow-y: auto; overscroll-behavior: contain; } .asistanSatir { max-width: 88%; padding: 8px 11px; border-radius: 12px; line-height: 1.45; overflow-wrap: anywhere; } .asistanSatir--kullanici { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--renk-vurgu); color: #fff; white-space: pre-wrap; } .asistanSatir--asistan { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--renk-alan-vurgu); } .asistanSatir--islem { align-self: flex-start; max-width: 100%; padding: 2px 4px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .asistanSatir--hata { align-self: stretch; max-width: 100%; border: 1px solid var(--renk-tehlike); color: var(--renk-tehlike); font-size: var(--yazi-kucuk); } .asistanSatir--bekle { display: flex; align-self: flex-start; gap: 4px; background: var(--renk-alan-vurgu); } .asistanNokta { width: 6px; height: 6px; border-radius: 50%; background: var(--renk-yazi-ikincil); animation: asistanNokta 1s infinite ease-in-out; } .asistanNokta:nth-child(2) { animation-delay: 0.15s; } .asistanNokta:nth-child(3) { animation-delay: 0.3s; } @keyframes asistanNokta { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } .asistanOnay { align-self: stretch; padding: 10px; border: 1px solid var(--renk-uyari); border-radius: var(--radius-orta); background: var(--renk-alan-vurgu); } .asistanOnay--evet { border-color: var(--renk-basarili-kenar, #2c6444); } .asistanOnay--hayir { opacity: 0.7; } .asistanOnayMetin { line-height: 1.4; } .asistanOnayKarar { margin-top: 6px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .asistanOnayDugmeler { display: flex; gap: 8px; margin-top: 8px; } .asistanOnayEvet, .asistanOnayHayir, .asistanGonder, .asistanMik { min-height: 34px; padding: 6px 14px; border-radius: var(--radius-kucuk); font: inherit; font-weight: 700; cursor: pointer; } .asistanOnayEvet, .asistanGonder { border: 0; background: var(--renk-vurgu); color: #fff; } .asistanGonder:disabled { opacity: 0.5; cursor: default; } .asistanOnayHayir, .asistanMik { border: 1px solid var(--renk-kenarlik); background: var(--renk-panel); color: var(--renk-yazi); } .asistanMik--dinliyor { border-color: var(--renk-tehlike); color: var(--renk-tehlike); } .asistanBos { margin: auto 0; text-align: center; } .asistanBosBaslik { font-size: 16px; font-weight: 700; } .asistanBosAlt { margin: 6px 0 12px; font-size: var(--yazi-kucuk); line-height: 1.5; color: var(--renk-yazi-ikincil); } .asistanOrnekler { display: flex; flex-direction: column; gap: 6px; } .asistanOrnek { padding: 8px 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); text-align: left; cursor: pointer; } .asistanAlt { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--renk-kenarlik-acik); } .asistanMetin { flex: 1 1 auto; min-width: 0; max-height: 140px; padding: 8px 10px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan-vurgu); color: var(--renk-yazi); font: inherit; resize: vertical; } .asistanAltDugmeler { display: flex; flex: none; gap: 6px; } @media (max-width: 640px) { .asistanPaneli { inset: 0; width: 100%; border: 0; border-radius: 0; z-index: 1390; } .asistanMetin { font-size: 16px; } .asistanSatir { max-width: 92%; } } /* ===== css/bolumler/57-hataBildirimi.css ===== */ /* ============================================================ 57 · HATA BİLDİR (02.10) ============================================================ Pencere yapay zekâ pencerelerinin iskeletini (yz…) kullanıyor; burada yalnız bildirime özgü parçalar ve header düğmesi. */ /* Header: ekran düğmeleriyle aynı boy, yazılı. */ .hataBildirDugmesi { width: auto; padding: 0 10px; font-size: var(--yazi-kucuk); font-weight: 600; white-space: nowrap; } .hataBildirimPenceresi { width: min(560px, calc(100vw - 24px)); } .hataBildirimSecenek { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .hataBildirimAyrinti { font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .hataBildirimAyrinti summary { cursor: pointer; } .hataBildirimAyrinti ul { margin: 6px 0; padding-left: 18px; } .hataBildirimAyrinti li { margin: 2px 0; word-break: break-word; } .hataBildirimOncekiler:empty { display: none; } .hataBildirimOncekiler { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--renk-kenarlik); } .hataBildirimOncekiBaslik { font-size: var(--yazi-kucuk); font-weight: 700; color: var(--renk-yazi-ikincil); } .hataBildirimOnceki { padding: 6px 9px; border: 1px solid var(--renk-kenarlik); border-left: 3px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-kucuk); background: var(--renk-panel); font-size: var(--yazi-kucuk); } .hataBildirimOnceki[data-durum="yeni"] { border-left-color: var(--renk-uyari); } .hataBildirimOnceki[data-durum="bakildi"] { border-left-color: var(--renk-ana); } .hataBildirimOnceki[data-durum="duzeldi"] { border-left-color: var(--renk-basarili); } .hataBildirimOncekiUst { display: flex; justify-content: space-between; gap: 8px; } .hataBildirimDurum { color: var(--renk-yazi-ikincil); } .hataBildirimOncekiMetin { margin-top: 2px; color: var(--renk-yazi); } .hataBildirimYanit { margin-top: 4px; color: var(--renk-basarili); } /* Yönetici Paneli → Bildirimler */ .bildirimlerSekmesi { display: flex; flex-direction: column; gap: 10px; } .bildirimSuzgec { display: flex; flex-wrap: wrap; gap: 6px; } .bildirimKarti { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--renk-kenarlik); border-left: 4px solid var(--renk-kenarlik-koyu); border-radius: var(--radius-orta); background: var(--renk-panel); } .bildirimKarti[data-durum="yeni"] { border-left-color: var(--renk-uyari); } .bildirimKarti[data-durum="bakildi"] { border-left-color: var(--renk-ana); } .bildirimKarti[data-durum="duzeldi"] { border-left-color: var(--renk-basarili); } .bildirimKartUst { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: var(--yazi-kucuk); color: var(--renk-yazi-ikincil); } .bildirimKartMetin { white-space: pre-wrap; color: var(--renk-yazi); } .bildirimKartBaglam { margin: 0; padding: 6px 8px; max-height: 180px; overflow: auto; border-radius: var(--radius-kucuk); background: var(--renk-alan); font-size: 11px; white-space: pre-wrap; word-break: break-word; } .bildirimKartGorsel { max-width: 100%; max-height: 420px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); } .bildirimKartAlt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .bildirimKartAlt input[type="text"] { flex: 1 1 200px; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); color: var(--renk-yazi); font: inherit; } /* Paneldeki düğme sınıfı tam genişlik; bu sekmede kendi boyunda. */ .bildirimlerSekmesi .yoneticiYedekBtn { width: auto; flex: 0 0 auto; align-self: flex-start; padding-left: 14px; padding-right: 14px; } .bildirimSuzgec { align-items: center; } /* ===== css/bolumler/59-makine.css ===== */ /* MAKİNEYE GÖNDER (05.10): nesting'deki "Makineye gönder" penceresi. Kabuk yapay zekâ penceresinin (yzKatmani). */ .makineDurumSatiri { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-alan); font-weight: 600; } .makineDurumSatiri[data-durum="tamam"] { border-color: #2e9d57; color: #1f7a42; } .makineDurumSatiri[data-durum="hata"] { border-color: #c0392b; color: #c0392b; } .makineIsaret { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #c99a2e; } .makineDurumSatiri[data-durum="tamam"] .makineIsaret { background: #2e9d57; } .makineDurumSatiri[data-durum="hata"] .makineIsaret { background: #c0392b; } .makineDurumSatiri[data-durum="aliniyor"] .makineIsaret { animation: makineNabiz 0.9s ease-in-out infinite alternate; } @keyframes makineNabiz { from { opacity: 0.3; } to { opacity: 1; } } .makineMesaj { margin: 6px 0 0; font-size: 12.5px; color: var(--renk-yazi-ikincil); white-space: pre-wrap; } .makineKopru { margin-top: 14px; padding: 12px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); } .makineKopru h4 { margin: 0 0 6px; font-size: 13px; } .makineKopru ol { margin: 6px 0 10px; padding-left: 20px; font-size: 12.5px; line-height: 1.5; } .makineKopruDurum { font-size: 12.5px; margin-bottom: 8px; } .makineKopruDurum[data-cevrimici="1"] { color: #1f7a42; } .makineKopruDurum[data-cevrimici="0"] { color: #b06d00; } .makineSatir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; } .makineSatir label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; } .makineSatir input[type="text"] { width: 220px; max-width: 100%; padding: 6px 8px; border: 1px solid var(--renk-kenarlik); border-radius: 4px; background: var(--renk-girdi-zemin); color: var(--renk-yazi); font: inherit; } .makineIsListesi { margin: 12px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--renk-yazi-ikincil); } .makineIsListesi li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--renk-kenarlik); } /* Yalnız yönetici: düğme gizliyse taban kuralının display'i ezmesin. */ .nestingMakineBtn[hidden] { display: none; } /* ===== css/bolumler/60-testere.css ===== */ /* Testere kesim planı (05.10): CNC'siz mobilyacı için. Panel kesim programları gibi: büyük renkli levha, numaralı kesimler, adım adım ilerleme, kesim ve parça tabloları. */ .testereKatmani { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(0, 0, 0, 0.35); } .testerePenceresi { display: flex; flex-direction: column; width: min(1280px, 100%); height: min(940px, calc(100vh - 24px)); border-radius: 10px; background: var(--renk-panel); color: var(--renk-yazi); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); overflow: hidden; } .testereUst { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--renk-kenarlik); } .testereBaslikKutu { flex: 1 1 260px; min-width: 0; } .testereBaslik { font-size: 16px; font-weight: 700; } .testereOzet { margin-top: 2px; font-size: 12px; color: var(--renk-yazi-soluk); } .testereAyarlar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; } .testereAyar { display: flex; align-items: center; gap: 5px; } .testereAyar input { width: 58px; height: 30px; padding: 0 6px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: var(--renk-yazi); } .testereBirim { color: var(--renk-yazi-soluk); } .testereDugme { height: 30px; padding: 0 12px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: var(--renk-yazi); cursor: pointer; } .testereKapat { width: 34px; height: 34px; border: none; border-radius: 6px; background: transparent; color: var(--renk-yazi); font-size: 22px; cursor: pointer; } .testereSecimler { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--renk-kenarlik); background: var(--renk-alan); } .testereCipSatiri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .testereMalzemeAdi { margin-right: 6px; font-weight: 600; font-size: 13px; } .testereCip { height: 28px; padding: 0 12px; border: 1px solid var(--renk-kenarlik); border-radius: 999px; background: var(--renk-panel); color: var(--renk-yazi); font-size: 12px; cursor: pointer; } .testereCip.secili { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; } .testereGovde { flex: 1; overflow: auto; padding: 10px 16px 18px; -webkit-overflow-scrolling: touch; } .testereMesaj:empty { display: none; } .testereMesaj { margin-bottom: 8px; font-size: 13px; color: var(--renk-ana); } .testereUyari { margin-bottom: 8px; padding: 6px 10px; border-radius: 6px; background: #fff3d6; color: #6b4a00; font-size: 12px; } .testereNot { margin-top: 8px; padding: 6px 10px; border-radius: 6px; background: var(--renk-alan); font-size: 12px; } .testereCizimKutu { padding: 6px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: #fbfaf7; } .testereCizim { display: block; width: 100%; height: auto; max-height: 56vh; } .testereLevha { fill: #efe6d2; stroke: #7d6d4f; stroke-width: 5; } .testereArtik { stroke: #b9a888; stroke-width: 2; } .testereArtikYazi { fill: #7d6d4f; font-family: system-ui, sans-serif; font-style: italic; } .testereParca { stroke: #3c3c3c; stroke-width: 4; } .testereParcaGrup.cikti .testereParca { fill: #b9e6b0; } .testereParcaGrup.simdi .testereParca { fill: #6fd36a; stroke: #1d7a1a; stroke-width: 8; } .testereBant { stroke: #e8590c; stroke-width: 9; stroke-linecap: round; } .testereNo { fill: #222; font-weight: 800; font-family: system-ui, sans-serif; } .testereParcaAdi { fill: #333; font-family: system-ui, sans-serif; } .testereOlcu { fill: #555; font-family: system-ui, sans-serif; } .testereKesim { stroke-linecap: round; } .testereKesim.plan { stroke: #2f5fbf; stroke-width: 5; stroke-dasharray: 26 14; } .testereKesim.yapildi { stroke: #8a8a8a; stroke-width: 4; } .testereKesim.sonra { stroke: #2f5fbf; stroke-width: 3; stroke-dasharray: 14 16; opacity: 0.5; } .testereKesim.simdi { stroke: #e03131; stroke-width: 14; } .testereRozet { fill: #2f5fbf; } .testereRozet.simdi { fill: #e03131; } .testereRozetYazi { fill: #fff; font-weight: 700; font-family: system-ui, sans-serif; } .testereOynatici { position: sticky; bottom: -18px; z-index: 2; display: flex; align-items: stretch; gap: 8px; margin-top: 8px; padding: 8px; border: 1px solid var(--renk-kenarlik); border-radius: 10px; background: var(--renk-panel); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06); } .testereOk { flex: 0 0 auto; min-width: 56px; padding: 0 14px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-alan); color: var(--renk-yazi); font-size: 18px; font-weight: 700; cursor: pointer; } .testereOk.ileri { background: var(--renk-ana); border-color: var(--renk-ana); color: #fff; font-size: 16px; } .testereOk:disabled { opacity: 0.4; cursor: default; } .testereAdimBilgi { flex: 1; min-width: 0; } .testereAdimNo { font-size: 12px; color: var(--renk-yazi-soluk); } .testereAdimMetin { margin-top: 2px; font-size: 16px; font-weight: 600; line-height: 1.35; } .testereTablolar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; margin-top: 12px; } .testereTabloKutu { min-width: 0; overflow-x: auto; } .testereTabloBaslik { margin-bottom: 4px; font-weight: 700; font-size: 13px; } .testereTablo { width: 100%; border-collapse: collapse; font-size: 12px; } .testereTablo th { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--renk-kenarlik); color: var(--renk-yazi-soluk); font-weight: 600; } .testereTablo td { padding: 4px 6px; border-bottom: 1px solid var(--renk-kenarlik-acik, var(--renk-kenarlik)); vertical-align: top; } .testereTablo td.sayi { font-variant-numeric: tabular-nums; white-space: nowrap; } .testereTablo tr.simdi td { background: #ffe3e3; font-weight: 700; } .testereTablo tr.yapildi td { color: var(--renk-yazi-soluk); text-decoration: line-through; } [data-alan="kesimListesi"] tr { cursor: pointer; } .testereRenkKare { display: inline-block; min-width: 26px; padding: 1px 4px; border: 1px solid #555; border-radius: 4px; color: #222; font-weight: 700; text-align: center; } .testereSoluk { font-size: 11px; color: var(--renk-yazi-soluk); } .testereYazdirmaAlani { display: none; } @media (max-width: 760px) { .testereKatmani { padding: 0; } .testerePenceresi { height: 100vh; height: 100dvh; border-radius: 0; } .testereTablolar { grid-template-columns: 1fr; } .testereAdimMetin { font-size: 15px; } .testereGovde { padding: 8px 10px 14px; } .testereUst { padding-right: 48px; } .testereKapat { position: absolute; top: 6px; right: 6px; } .testereOynatici { bottom: -14px; } } @media print { body.testereYazdiriliyor > *:not(.testereYazdirmaAlani) { display: none !important; } body.testereYazdiriliyor .testereYazdirmaAlani { display: block; } .testereYazdirmaSayfasi { break-after: page; font-family: system-ui, sans-serif; } .testereYazdirmaSayfasi h2 { font-size: 14px; margin: 0 0 6px; } .testereYazdirmaSayfasi .testereCizim { max-height: 60vh; } .testereYazdirmaListe { font-size: 11px; columns: 2; } } /* ===== css/bolumler/61-ikiBoyutluKesim.css ===== */ /* 2D Çizim ve Kesim (06.10): Corel gibi çiz / DXF-SVG al, tabaka ya da artık parçadan NC. Masaüstü: araçlar solda (dikey), tuval ortada, sekmeli panel sağda Tablet: araçlar üstte (yatay), tuval, panel altta (en çok %40) Telefon: araçlar üstte kayar şerit, tuval ekranın çoğu, panel alttan açılan katlanır sayfa (kapalıyken yalnız sekmeler) */ .ikbKatman { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(0, 0, 0, 0.35); } .ikbPencere { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "ust ust ust" "araclar tuval panel"; width: min(1600px, 100%); height: min(1000px, calc(100vh - 20px)); height: min(1000px, calc(100dvh - 20px)); border-radius: 10px; background: var(--renk-panel); color: var(--renk-yazi); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); overflow: hidden; } /* Üst şerit */ .ikbUst { grid-area: ust; display: flex; align-items: center; gap: 8px 12px; min-width: 0; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--renk-kenarlik); } .ikbBaslik { flex: 0 0 auto; font-size: 16px; font-weight: 700; white-space: nowrap; } .ikbAdGirdisi { flex: 1 1 160px; min-width: 90px; max-width: 320px; height: 32px; padding: 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: var(--renk-yazi); font-size: 13px; } .ikbUstDugmeler { display: flex; flex: 1 1 auto; justify-content: flex-end; gap: 6px; min-width: 0; } .ikbDugme { flex: 0 0 auto; height: 32px; padding: 0 12px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: var(--renk-yazi); font-size: 13px; white-space: nowrap; cursor: pointer; } .ikbDugme:hover { border-color: var(--renk-ana); } .ikbDugme.ana { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; font-weight: 600; } .ikbDugme.tehlike { color: #c92a2a; } .ikbDugme.kucuk { height: 28px; padding: 0 9px; font-size: 12px; } .ikbKapat { flex: 0 0 auto; width: 34px; height: 34px; border: none; border-radius: 6px; background: transparent; color: var(--renk-yazi); font-size: 22px; line-height: 1; cursor: pointer; } /* Araçlar */ .ikbAraclar { grid-area: araclar; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 6px; border-right: 1px solid var(--renk-kenarlik); background: var(--renk-alan); overflow-y: auto; overflow-x: hidden; } .ikbArac { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 46px; padding: 4px 2px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--renk-yazi); font-size: 10.5px; line-height: 1.1; cursor: pointer; touch-action: manipulation; } .ikbArac:hover { background: var(--renk-panel); border-color: var(--renk-kenarlik); } .ikbArac.secili { background: var(--renk-ana); border-color: var(--renk-ana); color: #fff; } .ikbArac[hidden] { display: none; } .ikbBitir { color: #2b8a3e; font-weight: 700; } .ikbAyrac { flex: 0 0 1px; height: 1px; margin: 3px 4px; background: var(--renk-kenarlik); } .ikbIzgaraAdimi { flex: 0 0 auto; height: 28px; margin: 0 2px; padding: 0 2px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: var(--renk-yazi); font-size: 11px; } /* Tuval */ .ikbTuval { grid-area: tuval; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #e9ecef; } .ikbTuvalSvg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: default; } .ikbTuval:not([data-arac="sec"]) .ikbTuvalSvg { cursor: crosshair; } .ikbZemin { fill: #e9ecef; } .ikbStok { fill: #f3e7cf; } .ikbStokCerceve { fill: none; stroke: #8a7348; stroke-width: 1.6; } .ikbKenarPayi { fill: none; stroke: #b08d4a; stroke-width: 1; stroke-dasharray: 6 5; } .ikbIzgara { fill: none; stroke: rgba(70, 80, 95, 0.12); stroke-width: 1; } .ikbIzgara.kalin { stroke: rgba(70, 80, 95, 0.22); } .ikbOlcuYazi { fill: #5c4b2a; font: 600 12px system-ui, sans-serif; } .ikbStokYazi { fill: #5c4b2a; font: 600 12px system-ui, sans-serif; } .ikbEksen { fill: none; stroke: #e03131; stroke-width: 2; } .ikbEksenYazi { fill: #e03131; font: 700 11px system-ui, sans-serif; } .ikbSifir { fill: #e03131; } .ikbOlcekCubugu { fill: none; stroke: #343a40; stroke-width: 1.5; } .ikbOlcekYazi { fill: #343a40; font: 600 11px system-ui, sans-serif; } .ikbSekil .ikbHat { fill: none; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; } .ikbSekil .ikbDolgu { fill-opacity: 0.07; stroke: none; } .ikbIslem-cep .ikbDolgu { fill-opacity: 0.28; } .ikbIslem-kazima .ikbHat { stroke-width: 1.4; } .ikbIslem-yok .ikbHat { stroke-dasharray: 5 4; } .ikbSekil.secili .ikbHat { stroke-width: 3; } .ikbSecimKutusu { fill: none; stroke: #1971c2; stroke-width: 1; stroke-dasharray: 4 3; } .ikbTaslak { fill: none; stroke: #1971c2; stroke-width: 1.6; stroke-dasharray: 6 4; } .ikbTaslakNokta { fill: #fff; stroke: #1971c2; stroke-width: 1.5; } .ikbArti { fill: none; stroke: #1971c2; stroke-width: 1; } .ikbDurum { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 10px; max-width: calc(100% - 180px); padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.86); color: #343a40; font-size: 11.5px; pointer-events: none; } .ikbImlec { flex: 0 0 auto; font-variant-numeric: tabular-nums; white-space: nowrap; } .ikbDurumMesaji { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ikbDurumMesaji:empty { display: none; } /* Panel */ .ikbPanel { grid-area: panel; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--renk-kenarlik); background: var(--renk-panel); } .ikbSekmeler { display: flex; align-items: stretch; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--renk-kenarlik); } .ikbSekme { flex: 1 1 0; min-width: 0; height: 34px; padding: 0 6px; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--renk-yazi-soluk); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; } .ikbSekme.secili { border-bottom-color: var(--renk-ana); color: var(--renk-yazi); } .ikbKatla { display: none; flex: 0 0 40px; border: none; background: transparent; color: var(--renk-yazi); font-size: 16px; cursor: pointer; } .ikbPanelGovde { flex: 1 1 auto; min-height: 0; padding: 10px 12px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: 13px; } .ikbBolumBaslik { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 14px; font-weight: 700; } .ikbAltBaslik { margin: 12px 0 4px; font-size: 12px; font-weight: 700; color: var(--renk-yazi-soluk); text-transform: uppercase; letter-spacing: 0.02em; } .ikbIpucu { margin: 8px 0; color: var(--renk-yazi-soluk); font-size: 12px; line-height: 1.45; } .ikbSoluk { color: var(--renk-yazi-soluk); font-size: 11.5px; } .ikbRenkNokta { display: inline-block; flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; } .ikbLejant { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; padding: 8px; border-radius: 8px; background: var(--renk-alan); font-size: 12px; } .ikbLejantOge { display: inline-flex; align-items: center; gap: 5px; } .ikbSekilListesi { display: flex; flex-direction: column; gap: 3px; } .ikbSekilSatiri { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 8px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: var(--renk-yazi); font-size: 12.5px; text-align: left; cursor: pointer; } .ikbSekilAdi { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ikbSekilIslem { flex: 0 0 auto; color: var(--renk-yazi-soluk); font-size: 11.5px; } .ikbIslemKutusu { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; padding: 8px; border-radius: 8px; background: var(--renk-alan); } .ikbAlanIzgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 8px 0; } .ikbAlanIzgara > .ikbAlan.genis { grid-column: span 2; } .ikbAlan { display: flex; flex-direction: column; gap: 3px; min-width: 0; position: relative; } .ikbAlan.genis { margin: 6px 0; } .ikbAlanEtiket { color: var(--renk-yazi-soluk); font-size: 11.5px; } .ikbGirdi { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: var(--renk-yazi); font-size: 13.5px; box-sizing: border-box; } .ikbBirim { color: var(--renk-yazi-soluk); font-size: 10.5px; opacity: 0.8; } .ikbDugmeSatiri { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .ikbSecmeli { display: flex; gap: 4px; margin-bottom: 8px; padding: 3px; border-radius: 8px; background: var(--renk-alan); } .ikbSecmeliOge { flex: 1 1 0; min-width: 0; min-height: 34px; padding: 4px 6px; border: none; border-radius: 6px; background: transparent; color: var(--renk-yazi); font-size: 12.5px; cursor: pointer; } .ikbSecmeliOge.secili { background: var(--renk-panel); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); font-weight: 700; } .ikbOzetSatiri { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; font-size: 12px; } .ikbOzetOge { display: inline-flex; align-items: center; gap: 5px; } .ikbTakimlar { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; padding: 8px; border-radius: 8px; background: var(--renk-alan); } .ikbTakimSatiri { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; } .ikbTakimIs { color: var(--renk-yazi-soluk); white-space: nowrap; } .ikbTakimAd { min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .ikbTakimAd.eksik { color: #c92a2a; } .ikbNcSonuc:empty { display: none; } .ikbNcSonuc { margin-top: 6px; } .ikbBasari { padding: 8px 10px; border-radius: 6px; background: #d3f9d8; color: #1b5e20; font-weight: 600; font-size: 12.5px; } .ikbUyari { padding: 8px 10px; border-radius: 6px; background: #fff3d6; color: #6b4a00; font-size: 12.5px; } .ikbUyari.hata { background: #ffe3e3; color: #a51111; } .ikbDosyaListesi { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .ikbDosyaSatiri { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; } .ikbDosyaAdi { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; font-size: 12px; } .ikbListe { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.45; } .ikbListe.hata { color: #a51111; } .ikbListe.uyari li { margin-bottom: 3px; color: #6b4a00; } /* Çizimlerim */ .ikbCizimlerim { position: absolute; top: 56px; right: 12px; z-index: 5; display: flex; flex-direction: column; gap: 6px; width: min(460px, calc(100% - 24px)); max-height: calc(100% - 72px); padding: 10px 12px 12px; border: 1px solid var(--renk-kenarlik); border-radius: 10px; background: var(--renk-panel); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); overflow-y: auto; } .ikbCizimlerim[hidden] { display: none; } .ikbCizimlerimUst { display: flex; align-items: center; gap: 8px; } .ikbCizimlerimUst .ikbBolumBaslik { flex: 1; margin: 0; } .ikbCizimSatiri { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; } .ikbCizimSatiri.acik { border-color: var(--renk-ana); } .ikbCizimBilgi { flex: 1 1 auto; min-width: 0; } .ikbCizimAdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; } /* Tablet ve dar masaüstü: araçlar üstte, panel altta */ @media (max-width: 1100px) { .ikbPencere { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "ust" "araclar" "tuval" "panel"; } .ikbAraclar { flex-direction: row; align-items: center; border-right: none; border-bottom: 1px solid var(--renk-kenarlik); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .ikbArac { min-width: 54px; min-height: 48px; } .ikbAyrac { flex: 0 0 1px; width: 1px; height: 30px; margin: 0 4px; } .ikbKatman { padding: 0; } .ikbPencere { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; } /* Sabit yükseklik: seçime göre panel uzayıp kısalınca tuval zıplamasın. */ .ikbPanel { height: 38vh; height: 38dvh; border-left: none; border-top: 1px solid var(--renk-kenarlik); } .ikbPanel.kapali { height: auto; } .ikbKatla { display: block; } .ikbPanel.kapali .ikbPanelGovde { display: none; } .ikbAlanIzgara { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .ikbAlanIzgara > .ikbAlan.genis { grid-column: span 1; } } /* Dokunmatikte iki parmakla yakınlaşıyor; düğmeler yer kaplamasın. */ @media (pointer: coarse) { .ikbAraclar [data-komut="yakinlas"], .ikbAraclar [data-komut="uzaklas"] { display: none; } } /* Telefon */ @media (max-width: 640px) { .ikbUst { flex-wrap: wrap; gap: 6px 8px; padding: 6px 6px 6px 10px; } .ikbBaslik { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; } .ikbAdGirdisi { order: 1; flex: 1 1 90px; max-width: none; height: 30px; font-size: 14px; } .ikbKapat { order: 2; width: 32px; height: 32px; } .ikbUstDugmeler { order: 4; flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } .ikbUstDugmeler::-webkit-scrollbar { display: none; } .ikbDugme { height: 32px; padding: 0 10px; } .ikbAraclar { gap: 2px; padding: 4px; scrollbar-width: none; } .ikbAraclar::-webkit-scrollbar { display: none; } .ikbArac { min-width: 50px; min-height: 46px; font-size: 10px; } .ikbPanel { height: 44vh; height: 44dvh; } .ikbSekme { height: 40px; font-size: 13px; } .ikbDurum { max-width: calc(100% - 110px); font-size: 11px; } .ikbAlanIzgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ikbGirdi { height: 38px; font-size: 16px; } .ikbCizimlerim { top: 8px; right: 8px; left: 8px; width: auto; max-height: calc(100% - 16px); } } /* ===== css/bolumler/62-desenKutuphanesi.css ===== */ /* Desen Kütüphanesi (06.10): lake kapak oluk desenleri. Masaüstü: liste solda, önizleme ortada, parametreler sağda Tablet: liste üstte yatay şerit, önizleme ve parametreler yan yana (dikey tablette alt alta) Telefon: tek sütun; pencere tam ekran ve kayıyor Kapak önizlemesi iki temada da beyaz lake kapak: anlattığı şey fiziksel kapak, tema rengi değil. Çevresi temadan. */ :root { --desen-kapak: #f3f1ec; --desen-kapak-kenar: #9aa1aa; --desen-oluk: #5b6470; --desen-delik: #7d8691; --desen-cakisma: #e03131; --desen-olcu: var(--renk-yazi-ikincil); } /* SVG önizleme (pencere, sağ panel) */ .desenOnizleme { display: block; width: 100%; height: 100%; } .desenOnizleme .desenKapak { fill: var(--desen-kapak); stroke: var(--desen-kapak-kenar); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .desenOnizleme .desenOluk { fill: none; stroke: var(--desen-oluk); stroke-linecap: round; stroke-linejoin: round; } .desenOnizleme .desenDelik { fill: rgba(125, 134, 145, 0.25); stroke: var(--desen-delik); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .desenOnizleme .desenDelik.arka { fill: none; stroke-dasharray: 4 3; } .desenOnizleme .desenCakisma { fill: none; stroke: var(--desen-cakisma); stroke-width: 2.2; vector-effect: non-scaling-stroke; } .desenOnizleme .desenOlcu { fill: var(--desen-olcu); font-family: inherit; } /* Sağ panel */ .sagPanelDesenOnizleme { height: 190px; margin: 6px 0 8px; padding: 6px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-alan); } .sagPanelDesenUyarilari { margin: 6px 0; padding: 6px 8px 6px 22px; border: 1px solid var(--renk-uyari-kenar); border-radius: 6px; background: var(--renk-uyari-acik); color: var(--renk-yazi); font-size: 12px; line-height: 1.35; } .sagPanelDesenUyarilari li + li { margin-top: 3px; } /* Pencere */ .dkKatman { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(0, 0, 0, 0.35); } .dkPencere { position: relative; display: flex; flex-direction: column; width: min(1280px, 100%); height: min(860px, calc(100vh - 20px)); height: min(860px, calc(100dvh - 20px)); border-radius: 10px; background: var(--renk-panel); color: var(--renk-yazi); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); overflow: hidden; } .dkUst { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--renk-kenarlik); } .dkBaslikKutu { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; } .dkBaslik { font-size: 16px; font-weight: 700; white-space: nowrap; } .dkAltBaslik { overflow: hidden; color: var(--renk-yazi-ikincil); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; } .dkDugme { flex: 0 0 auto; min-height: 32px; padding: 0 12px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: var(--renk-yazi); font-size: 13px; white-space: nowrap; cursor: pointer; touch-action: manipulation; } .dkDugme:hover { border-color: var(--renk-ana); } .dkDugme.ana { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; font-weight: 600; } .dkDugme.tehlike { color: var(--renk-tehlike); } .dkDugme.genis { width: 100%; white-space: normal; padding: 6px 12px; } .dkKapat { flex: 0 0 auto; width: 34px; height: 34px; border: none; border-radius: 6px; background: transparent; color: var(--renk-yazi); font-size: 22px; line-height: 1; cursor: pointer; } .dkGovde { display: grid; flex: 1 1 auto; grid-template-columns: 260px minmax(0, 1fr) 320px; min-height: 0; } /* Liste */ .dkListe { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 10px; border-right: 1px solid var(--renk-kenarlik); background: var(--renk-alan); overflow-y: auto; } .dkListeBaslik { margin: 4px 2px 0; color: var(--renk-yazi-ikincil); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .dkListeNot { padding: 6px 4px; color: var(--renk-yazi-soluk); font-size: 12px; line-height: 1.35; } .dkKart { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 6px 8px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-panel); color: var(--renk-yazi); text-align: left; cursor: pointer; touch-action: manipulation; } .dkKart:hover { border-color: var(--renk-ana-kenar, var(--renk-ana)); } .dkKart.secili { border-color: var(--renk-ana); box-shadow: inset 0 0 0 1px var(--renk-ana); } .dkKartOnizleme { flex: 0 0 34px; width: 34px; height: 54px; } .dkKartYazi { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dkKartAd { overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .dkKartTur { color: var(--renk-yazi-soluk); font-size: 11px; } /* Orta: önizleme */ .dkOrta { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 10px 14px; } .dkOlcuSatiri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .dkOlcu { display: flex; align-items: center; gap: 6px; font-size: 13px; } .dkOlcu .dkGirdi { width: 76px; } .dkHazirlar { display: flex; flex-wrap: wrap; gap: 4px; } .dkCip { min-height: 28px; padding: 0 10px; border: 1px solid var(--renk-kenarlik); border-radius: 999px; background: transparent; color: var(--renk-yazi); font-size: 12px; cursor: pointer; } .dkCip.secili { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; } .dkOnizleme { flex: 1 1 auto; min-height: 220px; padding: 10px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-alan); } .dkBilgi { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; } .dkBilgiSatiri { display: flex; gap: 8px; min-width: 0; } .dkBilgiEtiket { flex: 0 0 52px; color: var(--renk-yazi-soluk); } .dkBilgiDeger { min-width: 0; overflow-wrap: anywhere; } .dkBilgiSatiri.uyari .dkBilgiDeger { color: var(--renk-uyari); font-weight: 600; } /* Sağ: parametreler */ .dkPanel { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px; border-left: 1px solid var(--renk-kenarlik); overflow-y: auto; } .dkAlanlar { display: flex; flex-direction: column; gap: 8px; } .dkAlan { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; } .dkAlanEtiket { flex: 0 0 118px; color: var(--renk-yazi-ikincil); } .dkAlan .dkGirdi { flex: 1 1 auto; min-width: 0; } .dkAlan.onay .dkOnay { width: 18px; height: 18px; } .dkBirim { flex: 0 0 auto; color: var(--renk-yazi-soluk); font-size: 12px; } .dkGirdi { height: 32px; padding: 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-alan); color: var(--renk-yazi); font-size: 13px; } .dkGirdi:disabled { opacity: 0.65; } .dkAciklama { color: var(--renk-yazi-ikincil); font-size: 12px; line-height: 1.4; } .dkNot { padding: 8px 10px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-alan); color: var(--renk-yazi-ikincil); font-size: 12px; line-height: 1.4; } .dkDugmeler { display: flex; flex-wrap: wrap; gap: 6px; } .dkUygula { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--renk-kenarlik); } .dkUygulaBaslik { font-size: 13px; font-weight: 700; } /* 2D çizimden */ .dkCizimden { position: absolute; top: 56px; right: 12px; z-index: 2; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100% - 24px)); max-height: calc(100% - 68px); padding: 12px; border: 1px solid var(--renk-kenarlik); border-radius: 10px; background: var(--renk-panel); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3); overflow-y: auto; } .dkCizimden[hidden] { display: none; } .dkCizimdenUst { display: flex; align-items: center; justify-content: space-between; } .dkCizimListesi { display: flex; flex-direction: column; gap: 6px; } .dkCizimSatiri { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-alan); color: var(--renk-yazi); text-align: left; cursor: pointer; } .dkCizimSatiri:hover { border-color: var(--renk-ana); } /* Tablet */ @media (max-width: 1100px) { .dkKatman { padding: 0; } .dkPencere { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; } .dkGovde { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto minmax(0, 1fr); } .dkListe { grid-column: 1 / -1; flex-direction: row; align-items: stretch; border-right: none; border-bottom: 1px solid var(--renk-kenarlik); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .dkListeBaslik { display: none; } .dkListeNot { flex: 0 0 200px; } .dkKart { width: 200px; } } /* Dikey tablet ve telefon: tek sütun, pencere kayıyor */ @media (max-width: 900px) { .dkGovde { display: flex; flex-direction: column; overflow-y: auto; } .dkListe { flex: 0 0 auto; } .dkOrta { flex: 0 0 auto; } .dkOnizleme { flex: 0 0 auto; height: 46vh; height: 46dvh; min-height: 220px; } .dkPanel { flex: 0 0 auto; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); border-left: none; border-top: 1px solid var(--renk-kenarlik); overflow: visible; } .dkUygula { margin-top: 4px; } } @media (max-width: 640px) { .dkUst { gap: 6px; padding: 6px 6px 6px 12px; } .dkBaslik { font-size: 15px; } .dkAltBaslik { display: none; } .dkKart { width: 168px; min-height: 58px; } .dkOrta { padding: 8px 10px; } .dkOnizleme { height: 40vh; height: 40dvh; } .dkGirdi { height: 38px; font-size: 16px; } .dkOlcu .dkGirdi { width: 70px; } .dkAlanEtiket { flex-basis: 108px; } .dkDugme { min-height: 38px; } .dkCizimden { top: 50px; right: 8px; left: 8px; width: auto; } } /* ===== css/bolumler/63-profilKutuphanesi.css ===== */ /* Profil Kütüphanesi ve 3D yüzey işleme (06.10). Desen Kütüphanesi penceresinin "Profiller" sekmesi aynı ızgarayı kullanıyor (62-desenKutuphanesi.css); burada yalnız sekme şeridi, kesit / 3B önizleme, yöntem satırı ve rozetler. CNC Ayarları ▸ 3D Yüzey sekmesi, takım satırının altındaki "kestiği profil" ve sağ paneldeki işleme satırları da burada. Levha kesiti iki temada da beyaz lake (desen önizlemesi gibi): çizilen şey fiziksel parça. Takım izleri temadan. */ :root { --profil-levha: #f3f1ec; --profil-levha-kenar: #8b929b; /* Levha iki temada da açık: profil çizgisi hep koyu. */ --profil-cizgi: #2f343b; --profil-kaba: rgba(70, 120, 200, 0.16); --profil-kaba-kenar: #4678c8; --profil-finis: #d9480f; } /* Sekmeler */ .dkSekmeler { display: flex; flex: 0 0 auto; gap: 4px; padding: 6px 12px 0; border-bottom: 1px solid var(--renk-kenarlik); overflow-x: auto; scrollbar-width: none; } .dkSekme { flex: 0 0 auto; min-height: 34px; padding: 0 16px; border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; background: transparent; color: var(--renk-yazi-ikincil); font-size: 13px; font-weight: 600; cursor: pointer; touch-action: manipulation; } .dkSekme.aktif { border-color: var(--renk-kenarlik); background: var(--renk-alan); color: var(--renk-yazi); box-shadow: inset 0 2px 0 var(--renk-ana); } .dkGovde[hidden] { display: none; } /* Liste kartı */ .prKartOnizleme { flex: 0 0 52px; width: 52px; height: 40px; } .prRozet { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 16px; } .prRozet.form { background: var(--renk-basarili-acik); color: var(--renk-basarili); } .prRozet.yuzey { background: var(--renk-alan); color: var(--renk-ana); box-shadow: inset 0 0 0 1px var(--renk-kenarlik); } /* Orta: 3B + kesit */ .prGorunus { display: grid; flex: 1 1 auto; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; min-height: 220px; } .prUcBoyut, .prKesit { min-width: 0; min-height: 0; padding: 8px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-alan); } .profilKesitSvg, .profil3BSvg { display: block; width: 100%; height: 100%; } .profilKesitSvg .profilLevha { fill: var(--profil-levha); stroke: var(--profil-levha-kenar); stroke-width: 1; vector-effect: non-scaling-stroke; } .profilKesitSvg .profilCizgi { fill: none; stroke: var(--profil-cizgi); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .profilKesitSvg .profilKaba { fill: var(--profil-kaba); stroke: var(--profil-kaba-kenar); stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; } .profilKesitSvg .profilFinis { fill: none; stroke: var(--profil-finis); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .profilKesitSvg .profilOlcuCizgi { stroke: var(--renk-yazi-soluk); stroke-width: 1; vector-effect: non-scaling-stroke; } .profilKesitSvg .profilOlcu { fill: var(--renk-yazi-ikincil); font-family: inherit; } .profil3BSvg .profil3BYuz, .profil3BSvg .profil3BKesit { stroke: rgba(60, 64, 70, 0.35); stroke-width: 0.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .dkListe .profilKesitSvg .profilOlcu, .dkListe .profilKesitSvg .profilOlcuCizgi { display: none; } /* Yöntem satırı */ .prYontem { padding: 8px 12px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; font-size: 13.5px; font-weight: 700; line-height: 1.35; } .prYontem.form { border-color: var(--renk-basarili-kenar); background: var(--renk-basarili-acik); color: var(--renk-basarili); } .prYontem.yuzey { border-color: var(--renk-ana); color: var(--renk-yazi); box-shadow: inset 3px 0 0 var(--renk-ana); } .prYontem.yok { border-color: var(--renk-tehlike-kenar); background: var(--renk-tehlike-acik); color: var(--renk-tehlike); } .dkBilgiSatiri.vurgu .dkBilgiDeger { font-weight: 700; } .prGovde .dkBilgiEtiket { flex-basis: 96px; } /* Sağ */ .dkAlan.dikey { flex-direction: column; align-items: stretch; } .dkAlan.dikey .dkAlanEtiket { flex: 0 0 auto; } .prNoktalar { height: auto; min-height: 84px; padding: 6px 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.4; resize: vertical; } .prForm { margin-top: 4px; } .prKullanim { margin-top: auto; } /* Sağ panel: işleme satırları */ .sagPanelProfilIsleme { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; } .sagPanelProfilSatiri { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-alan); font-size: 12px; line-height: 1.35; } .sagPanelProfilSatiri.form { border-color: var(--renk-basarili-kenar); } .sagPanelProfilSatiri.yuzey { box-shadow: inset 3px 0 0 var(--renk-ana); } .sagPanelProfilSatiri.yok { border-color: var(--renk-tehlike-kenar); color: var(--renk-tehlike); } .sagPanelProfilEtiketi { color: var(--renk-yazi-soluk); font-size: 11px; } .sagPanelProfilMetni { font-weight: 600; } /* CNC Ayarları */ .cncTakimProfilSatiri { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; padding-left: 8px; color: var(--renk-yazi-ikincil); font-size: 12px; } .cncTakimProfilSatiri[hidden] { display: none; } .cncTakimProfilSatiri .cncTakimGirisi { flex: 0 1 280px; min-width: 0; } .cncYuzeyAdimNotu { margin-top: 4px; } .cncYuzeyProfilleri { display: flex; flex-direction: column; gap: 4px; } .cncYuzeyProfilSatiri { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(0, 2fr) auto; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--renk-kenarlik); font-size: 12.5px; } .cncYuzeyProfilAdi { font-weight: 600; } .cncYuzeyProfilDurumu.form { color: var(--renk-basarili); } .cncYuzeyProfilDurumu.yok { color: var(--renk-tehlike); } .cncYuzeyProfilSuresi { color: var(--renk-yazi-ikincil); white-space: nowrap; } @media (max-width: 900px) { .prGorunus { flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 34vh; height: 34dvh; min-height: 200px; } } @media (max-width: 640px) { .dkSekmeler { padding: 4px 8px 0; } .prGorunus { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1.2fr 1fr; height: 56vh; height: 56dvh; min-height: 320px; } .prYontem { font-size: 13px; } .cncYuzeyProfilSatiri { grid-template-columns: minmax(0, 1fr) auto; } .cncYuzeyProfilDurumu { grid-column: 1 / -1; grid-row: 2; } .cncTakimProfilSatiri { flex-wrap: wrap; } } /* ===== css/bolumler/64-kapakModelleri.css ===== */ /* Kapak Modelleri (06.10): makro seç, ölç, 3B gör, NC üret. Masaüstü: solda form (kayar), sağda önizleme (3B / üstten) Tablet: dikeyde önizleme üstte (%42), form altta; yatayda masaüstü gibi, form dar Telefon: tam ekran; önizleme üstte (%38), form altta kayar Düğme, liste, takım satırı ve sonuç kutuları 2D Çizim ve Kesim penceresinin sınıfları (ikb…): iki pencere aynı dili konuşsun. */ .kmKatman { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(0, 0, 0, 0.35); } .kmPencere { display: grid; grid-template-columns: minmax(330px, 420px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "ust ust" "modeller modeller" "form onizleme"; width: min(1500px, 100%); height: min(980px, calc(100vh - 20px)); height: min(980px, calc(100dvh - 20px)); border-radius: 10px; background: var(--renk-panel); color: var(--renk-yazi); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); overflow: hidden; } /* Üst şerit */ .kmUst { grid-area: ust; display: flex; align-items: center; gap: 8px 12px; min-width: 0; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--renk-kenarlik); } .kmBaslik { flex: 0 0 auto; font-size: 16px; font-weight: 700; white-space: nowrap; } .kmAdGirdisi { flex: 1 1 200px; min-width: 120px; max-width: 380px; height: 34px; padding: 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: var(--renk-yazi); font-size: 14px; font-weight: 600; } .kmUstDugmeler { display: flex; flex: 1 1 auto; justify-content: flex-end; gap: 6px; min-width: 0; } .kmUstDugmeler [hidden] { display: none; } /* Form */ .kmForm { grid-area: form; min-height: 0; padding: 10px 14px 18px; border-right: 1px solid var(--renk-kenarlik); overflow-y: auto; overscroll-behavior: contain; } .kmMakroAciklama { margin-bottom: 8px; color: var(--renk-yazi-soluk); font-size: 12.5px; line-height: 1.45; } .kmBolum { margin-bottom: 10px; padding: 8px 10px 10px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; } .kmBolumBaslik { margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--renk-yazi-soluk); text-transform: uppercase; letter-spacing: 0.02em; } .kmIzgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; } .kmAlan { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12.5px; } .kmAlan.genis { grid-column: 1 / -1; } .kmAlan.evetHayir { flex-direction: row; align-items: center; gap: 8px; grid-column: 1 / -1; min-height: 32px; cursor: pointer; } .kmAlanEtiket { color: var(--renk-yazi-soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kmAlan.evetHayir .kmAlanEtiket { color: var(--renk-yazi); } .kmBirim { opacity: 0.75; } .kmAlanNotu { color: var(--renk-yazi-soluk); font-size: 11px; line-height: 1.3; } .kmGirdi { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: var(--renk-yazi); font-size: 14px; } .kmGirdi:focus { border-color: var(--renk-ana); outline: none; } .kmOnay { width: 20px; height: 20px; margin: 0; accent-color: var(--renk-ana); } .kmTakimlar { display: flex; flex-direction: column; gap: 8px; } .kmTakimSatiri { flex-wrap: wrap; align-items: baseline; padding-bottom: 6px; border-bottom: 1px dashed var(--renk-kenarlik); } .kmTakimSatiri:last-child { border-bottom: none; padding-bottom: 0; } .kmTakimSatiri .ikbTakimAd { flex: 1 1 auto; white-space: normal; } .kmTakimSatiri .ikbDugme { margin-left: auto; } .kmTakimUyari { flex: 1 1 100%; color: #b35c00; font-size: 11.5px; } .kmTakimAciklama { flex: 1 1 100%; } .kmUyarilar { margin: 0 0 8px; padding: 8px 10px 8px 26px; border-radius: 8px; background: #fff3d6; } .kmUyarilar[hidden] { display: none; } .kmDugmeler .ikbDugme.ana { flex: 1 1 auto; height: 40px; font-size: 14px; } .kmSonuc { display: flex; flex-direction: column; gap: 6px; } .kmSure { font-size: 13px; font-weight: 600; } /* Önizleme */ .kmOnizleme { grid-area: onizleme; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--renk-alan); } .kmGorunumSekmeleri { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; } .kmSekme { height: 32px; padding: 0 12px; border: 1px solid var(--renk-kenarlik); border-radius: 16px; background: var(--renk-panel); color: var(--renk-yazi); font-size: 13px; cursor: pointer; touch-action: manipulation; } .kmSekme.secili { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; font-weight: 600; } .kmSekme.ikincil { margin-left: 0; } .kmSekme.ikincil:first-of-type { margin-left: auto; } .kmGorunumSekmeleri .kmSekme[data-komut="sigdir"] { margin-left: auto; } .kmSekme[hidden] { display: none; } .kmSekme:disabled { opacity: 0.45; cursor: default; } .km3BKutu, .kmUstKutu { position: relative; flex: 1 1 auto; min-height: 0; } .km3BKutu[hidden], .kmUstKutu[hidden] { display: none; } .km3BTuval { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; } .kmUstKutu { display: flex; align-items: center; justify-content: center; padding: 10px; } .kmUstSvg { width: 100%; height: 100%; } .kmOnizlemeBilgi { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 4px 9px; border-radius: 6px; background: var(--renk-panel); color: var(--renk-yazi); font-size: 12px; opacity: 0.92; pointer-events: none; } .kmOnizlemeBilgi.hata { color: #a51111; font-weight: 600; } /* Üstten görünüş: kapak iki temada da beyaz lake */ .kmUstSvg .kmKapak { fill: #f6f4ef; stroke: #4a4a4a; stroke-width: 1.2; vector-effect: non-scaling-stroke; } .kmUstSvg .kmOlukSerit { fill: rgba(70, 60, 45, 0.16); stroke: none; } .kmUstSvg .kmOlukSerit.is2 { fill: rgba(70, 60, 45, 0.24); } .kmUstSvg .kmOlukBant { fill: none; stroke: rgba(70, 60, 45, 0.24); } .kmUstSvg .kmKenar { fill: none; stroke: #6d6a63; stroke-width: 0.8; vector-effect: non-scaling-stroke; } /* Cam yeri (07.10): boydan boya açıklık, koyu cam. */ .kmUstSvg .kmCamYeri { fill: rgba(40, 70, 95, 0.55); stroke: #1f3a4d; stroke-width: 1.2; vector-effect: non-scaling-stroke; } .kmUstSvg .kmMerkez { fill: none; stroke: #868e96; stroke-width: 0.8; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; } .kmUstSvg .kmVCizgi { fill: none; stroke: #1c7ed6; stroke-width: 1.4; vector-effect: non-scaling-stroke; } .kmUstSvg .kmSirt { fill: none; stroke: #5c5953; stroke-width: 0.9; vector-effect: non-scaling-stroke; } .kmUstSvg .kmSirt.yuvarlak { stroke-dasharray: 3 3; } .kmUstSvg .kmOlcuCizgi { stroke: var(--renk-yazi-soluk); stroke-width: 0.9; vector-effect: non-scaling-stroke; } .kmUstSvg .kmOkUcu { fill: var(--renk-yazi-soluk); } .kmUstSvg .kmOlcuYazi { fill: var(--renk-yazi); font-family: inherit; } /* Tablet dikey ve dar masaüstü: önizleme üstte */ @media (max-width: 1000px) { .kmKatman { padding: 0; } .kmPencere { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 42vh minmax(0, 1fr); grid-template-rows: auto auto 42dvh minmax(0, 1fr); grid-template-areas: "ust" "modeller" "onizleme" "form"; } .kmForm { border-right: none; border-top: 1px solid var(--renk-kenarlik); } .kmIzgara { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } /* Tablet yatay: yan yana, form dar */ @media (min-width: 1001px) and (max-width: 1250px) { .kmKatman { padding: 0; } .kmPencere { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; grid-template-columns: 360px minmax(0, 1fr); } } /* Telefon */ @media (max-width: 640px) { .kmPencere { grid-template-rows: auto auto 34vh minmax(0, 1fr); grid-template-rows: auto auto 34dvh minmax(0, 1fr); } .kmUst { flex-wrap: wrap; gap: 6px 8px; padding: 6px 6px 6px 10px; } .kmBaslik { flex: 1 1 auto; font-size: 14px; } .ikbKapat { order: 2; } .kmAdGirdisi { order: 3; flex: 1 1 100%; max-width: none; font-size: 16px; } .kmUstDugmeler { order: 4; flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } .kmUstDugmeler::-webkit-scrollbar { display: none; } .kmForm { padding: 8px 10px 24px; } .kmIzgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kmGirdi { height: 40px; font-size: 16px; } .kmGorunumSekmeleri { padding: 6px; } .kmSekme { height: 34px; padding: 0 10px; } } /* CNC Ayarları ▸ Takımlar: V bıçağın uç açısı satırı (profil satırının eşi) */ .cncTakimAciSatiri { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; padding-left: 8px; color: var(--renk-yazi-ikincil); font-size: 12px; } .cncTakimAciSatiri[hidden] { display: none; } .cncTakimAciSatiri .cncTakimGirisi { flex: 0 1 120px; min-width: 0; } /* Toplu makro (iki göbekli kapı, 06.10): kapı listesi ve önizlenen kapı seçici. */ .kmKapiListesi { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .kmKapiSatiri { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 64px 34px; gap: 6px; align-items: center; } .kmKapiSatiri.baslik { font-size: 11.5px; color: var(--renk-yazi-soluk); } .kmKapiNo { height: 34px; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--renk-panel); color: var(--renk-yazi); font: inherit; font-size: 12.5px; cursor: pointer; } .kmKapiSatiri.secili .kmKapiNo { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; font-weight: 600; } .kmKapiSatiri .ikbDugme { height: 34px; padding: 0; } .kmKapiListesi > .ikbDugme { align-self: flex-start; margin-top: 2px; } .kmGobekBilgisi { margin-top: 4px; } .kmKapiSecimi { width: auto; max-width: 230px; height: 32px; font-size: 13px; } .kmKapiSecimi[hidden] { display: none; } /* Ölçü listesi her makroda (06.10): satırda not sütunu, yapıştır / projeden al araçları, toplam; kapak işi bölümü; pencere içi iletişim kutuları (yapıştır, projeden al, kapak işleri). */ .kmKapiSatiri { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 54px minmax(0, 1.25fr) 30px; } .kmKapiSatiri .kmNotGirdisi { font-size: 12.5px; } .kmListeAraclari { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } .kmListeAlti { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 2px; } .kmListeToplami { font-size: 12.5px; } .kmIsDugmeleri { flex-wrap: wrap; margin-top: 8px; } .kmAltKatman { position: fixed; inset: 0; z-index: 1210; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(0, 0, 0, 0.3); } .kmAltPencere { display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(760px, calc(100vh - 24px)); max-height: min(760px, calc(100dvh - 24px)); border-radius: 10px; background: var(--renk-panel); color: var(--renk-yazi); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); overflow: hidden; } .kmAltUst { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--renk-kenarlik); } .kmAltBaslik { font-size: 15px; font-weight: 700; } .kmAltGovde { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; overflow: auto; min-height: 0; } .kmAltDugmeler { padding: 10px 16px; border-top: 1px solid var(--renk-kenarlik); flex-wrap: wrap; } .kmYapistirMetni { width: 100%; height: auto; min-height: 120px; padding: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; resize: vertical; box-sizing: border-box; } .kmYapistirOzet { font-size: 13px; font-weight: 600; } .kmYapistirOnizleme { overflow-x: auto; } .kmOnizlemeTablosu { width: 100%; border-collapse: collapse; font-size: 12.5px; } .kmOnizlemeTablosu th, .kmOnizlemeTablosu td { padding: 4px 6px; border-bottom: 1px solid var(--renk-kenarlik); text-align: left; white-space: nowrap; } .kmOnizlemeTablosu td:last-child { white-space: normal; } .kmOnizlemeTablosu th { color: var(--renk-yazi-soluk); font-weight: 600; } .kmIsSatiri { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--renk-kenarlik); } .kmIsSatiri.secili { background: color-mix(in srgb, var(--renk-ana) 10%, transparent); } .kmIsAdi { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kmIsBilgi { min-width: 0; } .kmIsBilgi .ikbSoluk { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kmKalinlikSecimi { max-width: 160px; } .kmAlan[hidden] { display: none; } @media (max-width: 640px) { /* Telefonda not alt satırda, numaranın sağından sona. */ .kmKapiSatiri { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 50px 34px; } .kmKapiSatiri.baslik > span:nth-child(5) { display: none; } .kmKapiSatiri .kmNotGirdisi { grid-column: 2 / 6; grid-row: 2; height: 34px; font-size: 14px; } .kmAltKatman { padding: 0; align-items: stretch; } .kmAltPencere { width: 100%; max-height: none; border-radius: 0; } .kmIsSatiri { grid-template-columns: minmax(0, 1fr) auto auto; } .kmIsSatiri .tehlike { grid-column: 3; } } /* Cam sütunu (07.10, iki göbekli kapı): kapı satırında cam seçimi. Telefonda cam ve not ikinci satırda. */ .kmKapiListesi.camli .kmKapiSatiri { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 50px minmax(0, 1.2fr) minmax(0, 1fr) 30px; } .kmCamSecimi { height: 34px; font-size: 12.5px; padding: 0 4px; min-width: 0; } .kmCamSecimi.var { border-color: #2b6f9e; background: color-mix(in srgb, #2b6f9e 14%, var(--renk-panel)); font-weight: 600; } /* Levha görünümü (07.10): NC'nin dizilimi */ .kmLevhaKutu { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; } .kmLevhaKutu[hidden] { display: none; } .kmLevhaUst { display: flex; align-items: center; gap: 8px; } .kmLevhaUst .ikbDugme { min-width: 34px; height: 30px; font-size: 16px; flex: 0 0 auto; } .kmLevhaBilgi { font-size: 12.5px; color: var(--renk-yazi); flex: 1 1 auto; min-width: 0; text-align: center; } .kmLevhaCizim { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; } .kmLevhaSvg { width: 100%; height: 100%; max-height: 100%; } .kmLevhaSvg .kmLevha { fill: #d9c9a8; stroke: #8a7a5c; stroke-width: 1.2; vector-effect: non-scaling-stroke; } .kmLevhaSvg .kmLevhaKenar { fill: none; stroke: #8a7a5c; stroke-width: 0.8; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; } .kmLevhaSvg .kmLevhaParcaKutu { fill: #f6f4ef; stroke: #3d3d3d; stroke-width: 1.2; vector-effect: non-scaling-stroke; } .kmLevhaSvg .arka .kmLevhaParcaKutu { fill: #e9eef4; } .kmLevhaSvg .kmLevhaGobek { fill: none; stroke: #9a948a; stroke-width: 0.8; vector-effect: non-scaling-stroke; } .kmLevhaSvg .kmLevhaCam { fill: rgba(40, 70, 95, 0.45); stroke: #1f3a4d; stroke-width: 1; vector-effect: non-scaling-stroke; } .kmLevhaSvg .kmLevhaYazi { fill: #1d1d1d; font-family: inherit; font-weight: 700; } .kmLevhaSvg .kmLevhaYazi.ikincil { font-weight: 400; fill: #444; } /* Elle çevirme (08.10): tıklanabilir parça */ .kmLevhaSvg .cevrilebilir { cursor: pointer; } .kmLevhaSvg .cevrilebilir:hover .kmLevhaParcaKutu { stroke: var(--renk-vurgu, #2563eb); stroke-width: 2.2; } .kmLevhaSvg .yeniCevrildi .kmLevhaParcaKutu { stroke: var(--renk-vurgu, #2563eb); stroke-width: 3; fill: #e6efff; } .kmLevhaAlt { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; min-height: 30px; } .kmLevhaIpucu { font-size: 12px; color: var(--renk-yazi-soluk, #666); } .kmLevhaIpucu[hidden], .kmLevhaAlt .ikbDugme[hidden] { display: none; } @media (max-width: 640px) { .kmKapiListesi.camli .kmKapiSatiri { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 50px 34px; } .kmKapiListesi.camli .kmKapiSatiri.baslik > span.kmCamBaslik, .kmKapiListesi.camli .kmKapiSatiri.baslik > span.kmNotBaslik { display: none; } .kmKapiListesi.camli .kmCamSecimi { grid-column: 2 / 4; grid-row: 2; font-size: 14px; } .kmKapiListesi.camli .kmKapiSatiri .kmNotGirdisi { grid-column: 4 / 6; grid-row: 2; } .kmLevhaBilgi { font-size: 12px; } } /* Model seçici (07.10): resimli kart şeridi ve büyük resim baloncuğu. Resim zemini 3B önizlemeninki (beyaz lake kapak iki temada da seçilsin): açıkta gri, koyuda antrasit. */ .kmModelSecici { --km-resim-zemin: #262a31; grid-area: modeller; display: flex; gap: 8px; min-width: 0; padding: 8px 12px; border-bottom: 1px solid var(--renk-kenarlik); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; } :root[data-tema="acik"] .kmModelSecici, :root[data-tema="acik"] .kmBaloncukKatman { --km-resim-zemin: #cfd4db; } .kmModelKarti { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 112px; padding: 4px; border: 2px solid transparent; border-radius: 9px; scroll-snap-align: start; cursor: pointer; } .kmModelKarti:hover { background: color-mix(in srgb, var(--renk-ana) 8%, transparent); } .kmModelKarti.secili { border-color: var(--renk-ana); background: color-mix(in srgb, var(--renk-ana) 12%, transparent); } .kmModelResmi { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 1px solid var(--renk-kenarlik); border-radius: 6px; background: var(--km-resim-zemin); overflow: hidden; cursor: zoom-in; touch-action: manipulation; } .kmModelResim { display: block; width: 100%; height: 100%; object-fit: contain; } .kmModelResim.svg { padding: 4px; box-sizing: border-box; background: var(--renk-alan); } .kmModelResim.svg svg { width: 100%; height: 100%; } .kmModelResimYer { color: #9aa1ab; font-size: 11px; text-align: center; padding: 4px; } .kmModelResmi.ciziliyor .kmModelResimYer, .kmBaloncukResmi.ciziliyor .kmModelResimYer { animation: kmResimNabiz 1.1s ease-in-out infinite alternate; } .kmModelResmi.ciziliyor::before { content: ""; position: absolute; inset: 18% 22%; border: 2px dashed color-mix(in srgb, #9aa1ab 60%, transparent); border-radius: 3px; } @keyframes kmResimNabiz { from { opacity: 0.35; } to { opacity: 1; } } .kmBuyutec { position: absolute; right: 4px; bottom: 4px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; pointer-events: none; } .kmModelAdi { width: 100%; min-height: 30px; padding: 2px 2px; border: none; background: none; color: var(--renk-yazi); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; } .kmModelKarti.secili .kmModelAdi { color: var(--renk-ana); } /* Büyük resim baloncuğu */ .kmBaloncukKatman { --km-resim-zemin: #262a31; position: fixed; inset: 0; z-index: 1220; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.45); } .kmBaloncuk { display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border-radius: 12px; background: var(--renk-panel); color: var(--renk-yazi); box-shadow: 0 14px 48px rgba(0, 0, 0, 0.35); overflow: hidden; } .kmBaloncukUst { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--renk-kenarlik); } .kmBaloncukBaslik { font-size: 15px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kmBaloncukResmi { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 0; aspect-ratio: 3 / 4; max-height: calc(100dvh - 190px); margin: 12px auto 0; width: auto; max-width: calc(100% - 24px); border-radius: 8px; background: var(--km-resim-zemin); overflow: hidden; } .kmBaloncukImg { display: block; width: 100%; height: 100%; object-fit: contain; } .kmBaloncukSvg { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; background: var(--renk-alan); } .kmBaloncukSvg svg { width: 100%; height: 100%; } .kmBaloncukAciklama { padding: 8px 16px 0; color: var(--renk-yazi-soluk); font-size: 12.5px; line-height: 1.4; } .kmBaloncukAlt { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 10px 16px 12px; } @media (max-width: 640px) { .kmModelSecici { gap: 6px; padding: 6px 8px; } .kmModelKarti { width: 88px; padding: 3px; } .kmModelAdi { font-size: 11.5px; min-height: 28px; } .kmBaloncukKatman { padding: 10px; } .kmBaloncukResmi { max-height: calc(100dvh - 200px); } .kmBaloncukAlt .ikbDugme { flex: 1 1 auto; height: 40px; } } /* ===== 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; } /* GERİ / İLERİ AL SAĞDA SABİT (QA turu, 01.10) Çubuk kendi içinde kayıyor; ↶ ↷ en sonda, 390 px ekranda x=577'de, görünmüyordu. Kayan şeridin sağ ucuna yapışıyorlar; öteki düğmeler altlarından geçer. */ .gorunumHud > [data-gorunum="geriAl"], .gorunumHud > [data-gorunum="ileriAl"] { position: sticky; z-index: 1; width: 44px; background: var(--renk-panel); } .gorunumHud > [data-gorunum="geriAl"] { right: 44px; box-shadow: -6px 0 8px -4px rgba(0, 0, 0, 0.18); } .gorunumHud > [data-gorunum="ileriAl"] { right: 0; } /* "pasif" saydamlıkla soluyordu; yapışık düğme altını göstermesin. */ .gorunumHud > [data-gorunum="geriAl"].pasif, .gorunumHud > [data-gorunum="ileriAl"].pasif { opacity: 1; color: var(--renk-yazi-soluk); } /* -------------------------------------------- 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. */ /* 01.10 (QA turu): sarılınca dokuz düğme ~240 px'lik blok oluyordu; üstteki açıklamayla birlikte levha çizimlerine yer kalmıyordu. Tek satır, kendi içinde kayıyor; hepsi yine erişilebilir, çizim alanı geri geliyor. */ .nestingAltCubuk { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } .nestingAltCubuk > button { flex-shrink: 0; padding: 0 10px; white-space: nowrap; } /* Asıl iş başta (gezinti 03.10): "Bu yerleşimi kullan" çubuğun en sonunda, ekranın 700 px dışında kalıyordu; kaydırılabildiği de belli değildi. Başa alındı, sağ kenarda solma kaydırmayı ima ediyor. */ .nestingAltCubuk > .nestingKullanBtn { order: -1; } .nestingAltCubuk { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } /* Kapsam düğmesi iki satıra düşünce yazı mavi kutudan taşıyordu. */ .nestingKapsamBtn { height: auto; min-height: 28px; white-space: normal; text-align: left; line-height: 1.25; padding-top: 4px; padding-bottom: 4px; } .nestingSiralamaNotu { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; line-height: 1.4; max-height: 2.8em; padding-top: 0; padding-bottom: 0; margin-top: 8px; margin-bottom: 8px; } /* 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; /* Kaydırma tarayıcıya değil tutamağa (gezinti 03.10). */ touch-action: none; } .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; /* Pencerelerin önünde (01.10; form pencereleri 10000), mesaj kutusunun (12001) altında: onay sorusu hep en üstte kalmalı. */ z-index: 11999; 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 açılır, kapalıyken 3B alan büyür. 06.10: kap her genişlikte aynı açılır menü; telefonda ekran genişliğinde. Şeritte geri / ileri ve kısa "Kaydet" de var (`data-kisa`); yan panel düğmeleri yok (alt sekmeler aynı işi görüyor). */ /* İKİ SATIRLI BAŞLIK (06.10, ikinci tur) Tek satırda ad kutusu 48 px'e iniyordu ("Mont…"). Şimdi iki satır (sarmalanan flex, `order` ile; boşluk ögesi satır sonu): [ad ........................] [Kaydet] [⋯] [×] [Ağaç] [Model|Eskiz] [Özellik] ...... [↶] [↷] Ağaç / Özellik alttaki sekmelerin işini görüyor (sekme çubuğu gizli, 48 px 3B alana kaldı). Hedefler 40 px; 360 px'te ikinci satır 340 px. */ .parcaUst { flex-wrap: wrap; row-gap: 4px; column-gap: 4px; padding: 4px 6px; } .parcaUst .parcaBaslik { display: none; } .parcaUst > * { flex: 0 0 auto; min-width: 0; } .parcaUst > .parcaAdGirisi { order: 1; flex: 1 1 80px; width: auto; min-height: 40px; padding: 4px 10px; font-size: 14px; } .parcaUst > .parcaKaydetDugmesi { order: 2; } .parcaUst > .parcaUstAc { order: 3; } .parcaUst > .parcaKapat { order: 4; } .parcaUst > .parcaBosluk { order: 5; flex: 0 0 100%; height: 0; } .parcaUst > [data-komut="agacAcKapa"] { order: 6; } .parcaUst > .parcaModAnahtari { order: 7; } .parcaUst > [data-komut="panelAcKapa"] { order: 8; } .parcaUst > [data-komut="geriAl"] { order: 9; margin-left: auto; } .parcaUst > [data-komut="ileriAl"] { order: 10; } .parcaUst > .parcaUstEk { order: 11; } .parcaUst .parcaPanelDugmesi { min-height: 40px; padding: 4px 8px; font-size: 12.5px; font-weight: 600; } .parcaUst .parcaPanelDugmesi svg { display: none; } .parcaUst .parcaPanelDugmesiAdi { display: inline; } .parcaUst .parcaModDugmesi { min-height: 36px; padding: 4px 9px; font-size: 12.5px; } .parcaUst .parcaUstAc { display: inline-flex; justify-content: center; padding: 4px 6px; } .parcaUst .parcaUstAcAdi { display: none; } .parcaUst .parcaUstAc.aktif { background: var(--renk-ana); border-color: var(--renk-ana); color: #fff; } .parcaUstEk { display: none; } .parcaUst.ekAcik .parcaUstEk { display: flex; left: 6px; right: 6px; width: auto; } .parcaUstEk > * { min-width: 0; } .parcaUstEk .parcaAlan select { width: 100%; min-width: 0; } .parcaUst select, .parcaUst .parcaDugme, .parcaUst button { padding: 4px 6px; font-size: 12px; min-height: 40px; } .parcaUst .parcaGeriIleri { min-width: 40px; font-size: 16px; } .parcaUst > .parcaDugme.parcaKaydetDugmesi { font-size: 0; padding: 4px 12px; } .parcaUst > .parcaDugme.parcaKaydetDugmesi::before { content: attr(data-kisa); font-size: 13px; font-weight: 600; } /* Mod anahtarının içindeki düğmeler ve Dosya menüsü 40 px kuralından muaf değil ama kap içi. */ .parcaUst .parcaModAnahtari button { min-height: 34px; } .parcaAracSeridi { flex-wrap: nowrap; overflow-x: auto; padding: 2px 6px; -webkit-overflow-scrolling: touch; } .parcaAracGrubu { flex: none; padding: 0 4px; } .parcaAracSeridiAdi { display: none; } .parcaAracSeridi .parcaEkleDugmesi { min-width: 46px; padding: 2px 3px; 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; } /* 06.10: sekme çubuğu gizli; aynı iş başlıktaki Ağaç / Özellik'te. */ .parcaAltSekmeler { display: none; 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; } /* Görünüm grubu telefonda sağ kenarda dikey sütun (06.10). */ /* Özellik paneli açıkken 3B alan ~250 px kalıyor; sütun (8 düğme) taşıyordu, Ölç / Kesit tuvalin altında kayboluyordu (tur 12). Sütun tuvale sığıyor, gerisi kaydırılıyor. */ .parcaBakislar { top: 6px; right: 6px; flex-direction: column; gap: 4px; max-height: calc(100% - 12px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .parcaBakislar::-webkit-scrollbar { display: none; } .parcaBakisGrubu { flex-direction: column; } .parcaBakislar .parcaBakisDugmesi { min-width: 44px; min-height: 40px; padding: 2px 4px; font-size: 11.5px; } .parcaYuzIpucu { padding: 3px 8px; font-size: 11px; line-height: 1.3; } /* Boş tasarım kartı sağdaki görünüm sütununun altına girmesin. */ .parcaBosIpucu { left: 8px; right: 62px; width: auto; max-width: none; transform: translateY(-50%); padding: 14px 12px; } /* 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; } /* KLAVYE AÇIKKEN (tur 15): 390 × 844'te panelde ölçü yazarken klavye ekranın 300 px'ini aldı; şeritler ve 44vh panel kalınca 3B tuval 34 px'e düştü (yazdığın ölçünün etkisi görünmüyordu). Odak paneldeki yazı alanındayken (pencere `klavyeAcik` alıyor) ikincil şeritler gizleniyor: araç şeridi, başlığın ikinci satırı, ipucu, ölçü satırı, zaman çizelgesi. Kalan yükseklik tuval / panel 2:3 bölünüyor, tuval en az 120 px; panel kendi içinde kayıyor, odaktaki alan görünür tutuluyor. */ .parcaTasarimPenceresi.klavyeAcik .parcaAracSeridi, .parcaTasarimPenceresi.klavyeAcik .parcaYuzIpucu, .parcaTasarimPenceresi.klavyeAcik .parcaYuzEylemleri, .parcaTasarimPenceresi.klavyeAcik .parcaOlcuSeridi, .parcaTasarimPenceresi.klavyeAcik .parcaZamanCizelgesi, .parcaTasarimPenceresi.klavyeAcik .parcaBosIpucu, .parcaTasarimPenceresi.klavyeAcik .parcaUst > .parcaBosluk, .parcaTasarimPenceresi.klavyeAcik .parcaUst > [data-komut="agacAcKapa"], .parcaTasarimPenceresi.klavyeAcik .parcaUst > .parcaModAnahtari, .parcaTasarimPenceresi.klavyeAcik .parcaUst > [data-komut="panelAcKapa"], .parcaTasarimPenceresi.klavyeAcik .parcaUst > [data-komut="geriAl"], .parcaTasarimPenceresi.klavyeAcik .parcaUst > [data-komut="ileriAl"] { display: none; } .parcaTasarimPenceresi.klavyeAcik .parcaGovde { grid-template-rows: minmax(120px, 2fr) minmax(0, 3fr) auto; } .parcaTasarimPenceresi.klavyeAcik .parcaAgac, .parcaTasarimPenceresi.klavyeAcik .parcaOzellikPaneli { max-height: none; min-height: 0; overflow-y: auto; } /* 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: nowrap; gap: 6px; padding: 3px 6px 3px 8px; } .parcaEskizUst .parcaDugme { min-height: 36px; padding: 3px 10px; } /* Telefonda eskiz başlığındaki panel düğmeleri yok: başlıkta Ağaç / Özellik var. */ .parcaEskizUst .parcaPanelDugmesi { display: none; } .parcaEskizSeridi .parcaAracDugmesi { width: 40px; height: 40px; min-height: 40px; } .parcaEskizAlti { flex-wrap: wrap; row-gap: 0; } .parcaEskizAlti .parcaCizimIpucu { flex-basis: 100%; } .parcaEskizAlti .parcaEskizDurumu { flex: 1 1 100%; min-width: 0; column-gap: 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: 32vh; } /* Tur 11 (ayak yürüyüşü): panel açıkken çokgen aracında uzunluk şeridi ve kısıt çubuğu da gelince çizim alanı 130-207 px'e düşüyordu. Eskizde sahne satırının ALT SINIRI var (ekranın %58'i); panel kalan yeri alıyor ve kendi içinde kayıyor. Panelin tamamı için başlıktaki "Özellik" düğmesi paneli kapatıp açıyor. */ .parcaGovde.eskizModu { grid-template-rows: minmax(min(58vh, 520px), 1fr) minmax(0, auto) auto; } .parcaGovde.eskizModu .parcaOzellikPaneli { min-height: 0; } .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; } /* KLAVYE KUTUYU ÖRTMESİN (01.10) Kullanıcı: "raf eklerken telefonda klavye aşağıda kaldı". Form pencereleri ekranın ORTASINDA açılıyor; telefon klavyesi alttan gelince pencere yerinde kalıyor, yazılan kutu klavyenin arkasında kalıyordu. Telefonda pencereler ÜSTE yaslanıyor ve katman kayıyor: klavye altta, kutu hep görünür; uzun form kaydırılarak iner. Tam ekran çalışan katmanlar (yerleşim, CAD, çizim) bu listede yok. */ .rafEklemeKatmani, .parcaEklemeKatmani, .kutuphaneyeKaydetKatmani, .malzemeSecimiKatmani, .dolapBakisYonuKatmani, .yeniProjeKatmani, .projeAyarlariKatmani, .tekrarKesimKatmani, .mesajKutusuKatmani, .uyeGirisKatmani, .uyeSifreKatmani, .kesimSiparisKatmani { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 10px 45vh; } .rafEklemePenceresi, .parcaEklemePenceresi, .kutuphaneyeKaydetPenceresi, .malzemeSecimiPenceresi, .dolapBakisYonuPenceresi { max-height: none; } /* İÇ İÇE İKİ KAYDIRMA (gece gezintisi 03.10): Proje / Uygulama Ayarları ve Kesime Gönder'de katman da gövde de kayıyordu; parmak hangisini kaydırdığını bilmiyordu. Telefonda yalnız katman kayıyor. */ .projeAyarlariPenceresi, .kesimSiparisPenceresi { max-height: none; overflow: visible; } .projeAyarlariGovde, .kesimSiparisGovde { overflow: visible; } /* TELEFON TURU (01.10) — sıkışan üç pencere Montaj Kılavuzu: iki sütunlu ızgara 390 px'e sığmayınca sol sütun 24 px'e çöküyordu; adres, marka, destek numarası alanlarına ulaşılmıyordu. G kod önizleme: yan liste 300 px, çizim 2×2 px kalıyordu. Yönetici > Montaj Sırası: üç sütun yan yana, ↑↓× ve "Kaydet" ekran dışında: sıra telefondan kaydedilemiyordu. Hepsi alt alta diziliyor, katman kayıyor. */ .kilavuzKatmani, .gKodOnizlemeKatmani, .yoneticiKatmani { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 8px 40vh; } .kilavuzPenceresi, .gKodOnizlemePenceresi, .yoneticiPenceresi, .yoneticiPenceresi.genisPencere { width: 100%; height: auto; max-height: none; overflow: visible; } .kilavuzGovde { display: block; } .kilavuzSol, .kilavuzSag { overflow: visible; border-left: none; } .gKodOnizlemeGovde { flex-direction: column; } .gKodOnizlemeSol { flex: 0 0 auto; max-height: 40vh; border-right: none; } .gKodOnizlemeCizim { min-height: 55vh; padding: 8px; } .gKodCizimi { width: 100%; } .yoneticiGovde { overflow: visible; } .yoneticiSekmeCubugu { overflow-x: auto; flex-wrap: nowrap; } .montajSirasiDuzeni { flex-direction: column; align-items: stretch; } .montajSirasiModeller, .montajSirasiCalisma, .montajSirasiOnizleme { flex: 0 0 auto; min-width: 0; width: 100%; } .montajSirasiCerceve { height: 50vh; min-height: 260px; } .montajSirasiDugmeler { flex-wrap: wrap; } /* PARÇA KONTROLÜ (QA turu, 01.10): 180 + 3 × 118 px'lik satırda yalnız "CNC kesim" sütunu sığıyordu; Bantlama ve Montaj ekran dışındaydı. Parça adı tam satır, altında üç aşama yan yana, her hücre kendi adını yazıyor. */ .pkSatir { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 6px; } .pkSatir > .pkParca { grid-column: 1 / -1; } .pkBaslikSatiri { display: none; } .pkHucre::before { content: attr(data-asama-adi); width: 100%; text-align: center; font-size: 10.5px; color: var(--renk-yazi-ikincil); } .pkSatir { column-gap: 4px; } .pkDugme { width: 36px; height: 36px; } /* ETİKETLER (QA turu, 01.10): 290 px ayar sütunu + önizleme yan yanaydı; önizlemeye 25 px kalıyordu. Alt çubuk sağa yaslı olduğu için "Varsayılanlara dön" soldan taşıyordu. Telefonda üst üste: ayarlar kendi içinde kayıyor, önizleme tam genişlik; alt çubuk tek satır, kayar. */ .etiketGovde { grid-template-columns: 1fr; grid-template-rows: minmax(0, 42%) minmax(0, 1fr); } .etiketAyarSutunu { border-right: 0; border-bottom: 1px solid var(--renk-kenarlik); } .etiketOnizlemeSutunu { min-height: 240px; } .etiketAltCubuk { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } .etiketAltCubuk > button { flex-shrink: 0; white-space: nowrap; } /* Hata bildir (02.10): telefonda yalnız bayrak simgesi. */ .hataBildirDugmesi { width: var(--buton-yukseklik); padding: 0; } .hataBildirYazisi { display: none; } /* İKİ SÜTUNLU PENCERELER TEK SÜTUN (02.10) Telefonda bütün menüler tek tek açılıp tarandı; üç pencerede iki sütun sığmıyordu: Donanım Kartları liste 300 px, kart 40 px'e eziliyordu Köşe Dolabı soru sütunu 36 px (harf harf alt alta) Proje Ayarları seçim + kalınlık + bant 476 px, satır 324 px Liste/soru üstte, kart/çizim altta; ayar satırında etiket üstte, kutular sarıyor. */ .donanimKartlariGovde { grid-template-columns: 1fr; grid-template-rows: minmax(0, 38%) minmax(0, 1fr); } .donanimKartlariGovde > * { min-height: 0; overflow: auto; } .donanimKartlariListe { border-right: 0; border-bottom: 1px solid var(--renk-kenarlik); } .koseSihirbaziGovde { grid-template-columns: 1fr; overflow-y: auto; } .koseSihirbaziSoru { overflow-y: visible; } .projeAyarlariSatiri { grid-template-columns: 1fr; gap: 4px; } .projeAyarlariGirisSarmali { flex-wrap: wrap; min-width: 0; } .projeAyarlariGirisi { width: auto; flex: 1 1 160px; min-width: 0; } /* CAD TUR 3 (06.10): TELEFONDA ESKİZ Eskizde üstteki EKLE şeridi (Ekstrüzyon, Delik, Pah...) işe yaramıyor ama 50 px yiyordu; Fusion da eskizde katı araçlarını kaldırıyor. "Modele dön" ile geri geliyor. Durum çubuğu üç satıra sarıyordu (ipucu / ızgara + imleç / görünüm): görünüm genişliği telefonda gizli, kalan tek satır. */ .parcaTasarimPenceresi.eskizModunda > .parcaAracSeridi { display: none; } /* Pencere ızgarası dört satır (başlık · şerit · gövde · zaman); şerit yokken üç. */ .parcaTasarimPenceresi.eskizModunda { grid-template-rows: auto minmax(0, 1fr) auto; } .parcaEskizDurumu [data-alan="yakinlik"] { display: none; } /* Klavye kısayolları telefonda anlamsız. */ .parcaUstEk .parcaYardimBolumu { display: none; } .parcaEskizAlti .parcaEskizDurumu { flex-wrap: nowrap; } .parcaEskizAlti .parcaEskizImlec { min-width: 0; white-space: nowrap; } /* CAD TUR 4: ÇİZGİ ŞERİDİ TEK SATIR Çizgi aracında Uzunluk/Açı şeridi 360 px'te dört satıra sarıp ~125 px yiyordu; tuval o kadar kısalıyordu. Artık tek satır, sığmayan sağa kayıyor (parmakla kaydırılır). Izgara ve Yakala alttaki durum çubuğunda zaten var, burada gizli. Canlı ölçü başa alınıyor: kaydırmadan hep görünsün. */ .parcaCizgiSeridi { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; gap: 8px; padding: 3px 6px; } .parcaCizgiSeridi::-webkit-scrollbar { display: none; } .parcaCizgiSeridi > * { flex: 0 0 auto; } .parcaCizgiSeridi .parcaCizgiIkincil { display: none; } .parcaCizgiAlani { white-space: nowrap; } .parcaCizgiAlani input { width: 58px; min-height: 36px; font-size: 14px; } .parcaCizgiAlani select { width: 84px; min-height: 36px; } .parcaCizgiOlcusu { order: -1; margin-left: 0; white-space: nowrap; } } /* ===== 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; /* Geniş ekranda kartlar sığsın (gece gezintisi 03.10: 760 px'te son kart yarım, adlar kesik). */ max-width: min(1120px, 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%; /* İki satıra kadar (gece gezintisi 03.10: "Bulaşık (tam a…", "Bulaşık (yarı a…" birbirinden ayırt edilmiyordu). */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: 2.5em; line-height: 1.25; 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; } } /* KULLANICININ KENDİ DOLABI / MENÜSÜ SİLİNİR (kullanıcı 03.10) Kartın sol üstünde, sekmenin sağında küçük "×". Programla gelen Alt Dolaplar kart ve sekmesinde yok. Masaüstünde üstüne gelince belirginleşiyor; telefonda hep görünüyor (üstüne gelme yok). */ .modulSeridiSil { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; color: var(--renk-ikincil-yazi, #6b7280); font-size: 13px; line-height: 1; opacity: 0.45; cursor: pointer; } .modulSeridiKart .modulSeridiSil { position: absolute; top: 2px; left: 2px; background: var(--renk-zemin, #ffffff); } .modulSeridiSekme .modulSeridiSil { margin-left: 6px; color: inherit; } .modulSeridiKart:hover .modulSeridiSil, .modulSeridiSekme:hover .modulSeridiSil { opacity: 0.8; } .modulSeridiSil:hover { opacity: 1; background: #dc2626; color: #ffffff; } @media (pointer: coarse) { .modulSeridiSil { width: 22px; height: 22px; opacity: 0.75; } } /* -------------------------------------------- SAĞ PANEL AÇIKKEN (masaüstü ve tablet, genel gezinti 06.10) -------------------------------------------- Sağ panel çizim alanının ÜSTÜNE biniyor; şerit ise çizim alanının tamamına göre ortalanıyordu. 1400 px'te dolap seçilince şeridin sağ ucu (son kartlar, "Kasa Oluştur" sekmesinin yarısı) panelin altında kalıyordu: art arda dolap eklerken "Boşluk" kartı görünmüyordu. Panel açıkken şerit panelin solundaki alana göre ortalanıyor ve o alana sığıyor (kartlar zaten yatay kayıyor). Telefonda (760 px altı) panel alttan açılıyor ve şerit gizleniyor (45-telefon.css); bu kural ona dokunmuyor. */ @media (min-width: 761px) { body:has(#sagPanel.sagPanelAcik:not(.sagPanelKapali)) .modulSeridi { left: calc((100% - var(--sag-panel-genislik)) / 2); max-width: min(1120px, calc(100% - var(--sag-panel-genislik) - 32px)); } /* Üstteki GÖSTER çubuğu da aynı dertte: 820 px tablette panel açılınca "Gerçekçi", "Bant" ve ↶ ↷ panelin altında kalıyordu (geri al dokunulamıyordu). Üst şerit panelin solunda bitiyor. Alt satıra inince model ağacının altında kalıyordu; telefondaki gibi tek satır, kendi içinde kayıyor ve ↶ ↷ sağ uca yapışık (45-telefon.css, QA 01.10). */ body:has(#sagPanel.sagPanelAcik:not(.sagPanelKapali)) .calismaUstSerit { right: var(--sag-panel-genislik); } body:has(#sagPanel.sagPanelAcik:not(.sagPanelKapali)) .gorunumHud { flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; } body:has(#sagPanel.sagPanelAcik:not(.sagPanelKapali)) .gorunumHud > * { flex-shrink: 0; } body:has(#sagPanel.sagPanelAcik:not(.sagPanelKapali)) .gorunumHud > [data-gorunum="geriAl"], body:has(#sagPanel.sagPanelAcik:not(.sagPanelKapali)) .gorunumHud > [data-gorunum="ileriAl"] { position: sticky; z-index: 1; width: 44px; background: var(--renk-panel); } body:has(#sagPanel.sagPanelAcik:not(.sagPanelKapali)) .gorunumHud > [data-gorunum="geriAl"] { right: 44px; box-shadow: -6px 0 8px -4px rgba(0, 0, 0, 0.18); } body:has(#sagPanel.sagPanelAcik:not(.sagPanelKapali)) .gorunumHud > [data-gorunum="ileriAl"] { right: 0; } /* Pasif düğme saydamlaşıp altındaki "Gerçekçi"yi gösteriyordu. */ body:has(#sagPanel.sagPanelAcik:not(.sagPanelKapali)) .gorunumHud > [data-gorunum="geriAl"].pasif, body:has(#sagPanel.sagPanelAcik:not(.sagPanelKapali)) .gorunumHud > [data-gorunum="ileriAl"].pasif { opacity: 1; color: var(--renk-yazi-soluk); } } /* ===== 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, .nestingMakineBtn, .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. */ /* 03.10: 860 → 1180. Sol sütun sabit 360; artan genişliğin hepsi çizime gidiyor (sağda boş alan kalıyordu). */ .kasaOlculeriPenceresi { width: min(1180px, calc(100vw - 96px)); 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; } .kasaCephesiRaf { fill: var(--ikon-cizgi); opacity: 0.55; pointer-events: none; } .kasaCephesiOlcu { fill: var(--ikon-cizgi); font-weight: 600; pointer-events: none; user-select: none; } /* Dokunmatikte çoklu seçim anahtarı (01.10); farede Ctrl var, gizli. */ .kasaCepheCokluBtn { display: none; } @media (pointer: coarse) { .kasaCephesi { position: relative; } .kasaCepheCokluBtn { display: block; position: absolute; left: 6px; bottom: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); color: var(--renk-yazi); font: inherit; font-size: 12px; } .kasaCepheCokluBtn[data-acik="evet"] { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; } } .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. */ /* Dik tablet (05.10): 820 genişlikte iki sütunda çizim 250 px kalıyor, altı boş. Telefondaki gibi alt alta. */ @media (max-width: 800px), (max-width: 1100px) and (orientation: portrait) { .kasaOlculeriGovdesi { flex-direction: column; } .kasaOnizleme { width: auto; border-left: 0; border-top: 1px solid var(--renk-kenarlik); } .kasaCephesi { min-height: 200px; } .kasaOlculeriGovdesi > .parcaEklemeForm { flex: 0 0 auto; } #kasaOlculeriKatmani .kasaOlculeriSolSutun { width: auto; } #kasaOlculeriKatmani .kasaCephesiSvg { max-height: 58dvh; } } /* ============================================================ 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: 1101px), (min-width: 801px) and (orientation: landscape) { #kasaOlculeriKatmani .kasaOnizleme { position: sticky; top: 0; align-self: flex-start; max-height: calc(100dvh - 110px); } /* Boy dolap (QA turu, 01.10): 800 × 2100 çizim genişliğe göre ölçekleniyor, üstü altı ve ölçü yazısı pencereden taşıyordu. Yükseklik ekrana sınırlı; viewBox "meet" oranı koruyor. */ #kasaOlculeriKatmani .kasaCephesiSvg { height: auto; max-height: calc(100dvh - 240px); } } /* ============================================================ 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; } /* Dokunmatikte (QA turu, 01.10) genel düğme kuralları "Ekle"yi genişletiyor, tür listesi yalnız okuna iniyordu ve satır sütundan taşıyordu. Liste en az 110 px, düğme kendi boyunda; sığmazsa satır kırılır. */ .kasaOlculeriPenceresi .kasaBolmeKurma { flex-wrap: wrap; } .kasaOlculeriPenceresi .kasaBolmeKurma select.parcaEklemeInput { flex: 1 1 110px; min-width: 110px; } .kasaOlculeriPenceresi .kasaBolmeKurma > .kasaBolmeBolBtn, .kasaOlculeriPenceresi .kasaBolmeKurma > .kasaBolmeGeriAlBtn { flex: 0 0 auto; width: auto; min-width: 0; } /* -------------------------------------------- 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 > .kasaBolmeBolumu, .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; } } /* Çoklu göz seçiliyken şerit duruyor (02.10); üstte ne olacağını söyleyen not. */ .kasaBolmeCokluNotu { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: var(--vurguZemin, rgba(37, 99, 235, 0.08)); color: var(--metinAna, #1f2937); font-size: 12px; line-height: 1.4; } /* Seçili göz daha belirgin: kalın çerçeve (02.10, madde 3). */ .kasaCephesiBolge.secili { stroke-width: 3; } /* Dikme tutamağı (02.10): dikmenin üstünde görünmez şerit; üstüne gelince ve sürüklerken belirginleşiyor. */ .kasaCepheTutamak { fill: var(--renk-ana); fill-opacity: 0; stroke: none; cursor: col-resize; touch-action: none; } .kasaCepheTutamak.yatay { cursor: row-resize; } .kasaCepheTutamak:hover { fill-opacity: 0.25; } .kasaCepheTutamak.surukleniyor { fill-opacity: 0.55; } .kasaCepheSurukleEtiketi { position: absolute; z-index: 4; pointer-events: none; padding: 4px 8px; border-radius: 6px; background: var(--renk-ana, #2563eb); color: #ffffff; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2); } /* "Kaç eşit göz" seçici (02.10): kasa penceresinde Bölme sekmesinin üstünde, ızgaranın bütün sütunlarını kaplıyor. */ .bolgeEsitBolme { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--renk-ana) 6%, transparent); } .bolgeEsitBolmeBaslik { font-size: 12px; font-weight: 700; color: var(--renk-metin, #1f2937); } .bolgeEsitBolmeDugmeleri { display: inline-flex; gap: 4px; } .bolgeEsitBolmeBtn { min-width: 30px; height: 28px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--renk-kenarlik, #d0d7e2); background: var(--renk-yuzey, #ffffff); color: var(--renk-metin, #1f2937); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .bolgeEsitBolmeBtn:hover { border-color: var(--renk-ana); } .bolgeEsitBolmeBtn.secili { background: var(--renk-ana); border-color: var(--renk-ana); color: #ffffff; } .bolgeEsitBolmeIpucu { flex-basis: 100%; font-size: 11px; color: var(--renk-metin-soluk, #64748b); } /* ============================================================ KASA PENCERESİ KULLANIŞLILIK (02.10) ============================================================ Gerçek iş gibi kullanıldı (600'lük alt dolap: çekmece, raf, çift kapak). "Kapak Ekle" / "Çekmece Ekle" uzun ayarların altında, sütunun 387 px aşağısında kalıyordu; yapışkanlık düğmede olduğu için tek düğmelik kutusunun içinde kıpırdayamıyordu (ölçüldü). Kutunun kendisi sütunun altına yapışıyor: düğme her an görünür. */ .kasaBolmeOzellikleri .sagPanelDolapIslemButonlari:has(> .yapisikEylem.vurgulu) { position: sticky; bottom: 0; z-index: 3; padding: 8px 0 4px; background: var(--renk-panel, #fff); box-shadow: 0 -8px 10px -8px rgba(15, 23, 42, 0.35); } .kasaBolmeOzellikleri .sagPanelDolapIslemButonlari:has(> .yapisikEylem.vurgulu) > .yapisikEylem { position: static; box-shadow: none; } /* ============================================================ YAPILANLAR AĞACI (kullanıcı 02.10: "yapılanlar için bir ağaç ekleyelim") ============================================================ Göz satırı (konum + ölçü), altında içindekiler ve onu bölen bölme; alt gözler bir kademe içeride. Girinti `--derinlik` ile; kademe çizgisi soldaki ince kenarlık. */ .kasaBolmeListesi { gap: 0; max-height: 38vh; overflow-y: auto; margin-top: 4px; } .kasaBolmeListesi .kasaAgacSatiri.kasaBolmeGrubu { margin: 0; border: 0; background-color: transparent; } .kasaAgacSatiri { display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 6px 2px calc(4px + var(--derinlik, 0) * 12px); border-radius: var(--radius-kucuk); font-size: 12px; color: var(--renk-yazi); background-image: linear-gradient(var(--renk-kenarlik), var(--renk-kenarlik)); background-repeat: no-repeat; background-size: 1px 100%; background-position: calc(var(--derinlik, 0) * 12px - 4px) 0; } .kasaAgacSatiri.kasaAgacKok { background-image: none; font-weight: 700; } .kasaAgacOku { flex: 0 0 12px; font-size: 10px; color: var(--renk-yazi-soluk); cursor: pointer; text-align: center; } .kasaAgacAdi { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kasaBolmeListesi .kasaAgacAdi.kasaBolmeGrupBasligi { display: block; margin: 0; font-size: 12px; font-weight: 500; color: var(--renk-yazi); } .kasaAgacOlcu { flex: 0 0 auto; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--renk-yazi-ikincil); } .kasaAgacGoz { font-weight: 600; cursor: pointer; } .kasaAgacGoz:hover { background-color: var(--renk-alan-vurgu); } .kasaAgacGoz.secili { background-color: color-mix(in srgb, var(--renk-ana) 14%, transparent); color: var(--renk-ana); } .kasaAgacGoz.secili .kasaAgacOlcu { color: var(--renk-ana); } .kasaAgacBolme .kasaAgacAdi { color: var(--renk-yazi-ikincil); font-style: italic; } .kasaAgacSatiri .kasaBolmeSilBtn { opacity: 0; padding: 1px 6px; } .kasaAgacSatiri:hover .kasaBolmeSilBtn, .kasaAgacSatiri .kasaBolmeSilBtn:focus-visible { opacity: 1; } /* Dokunmatikte üzerine gelme yok: Sil hep görünsün. */ @media (hover: none) { .kasaAgacSatiri .kasaBolmeSilBtn { opacity: 1; } } .kasaAgacIpucu { margin: 6px 4px 0; font-size: 11px; color: var(--renk-yazi-soluk); } /* KASA SEKMESİ: ölçü formu ve köşe birleşimleri özellik alanında. Form pencerenin eski sol sütun kenar boşluklarını taşıyor; burada sıfırlanıyor. */ .kasaSekmesiIcerigi { display: flex; flex-direction: column; gap: 12px; } .kasaSekmesiIcerigi > form { padding: 0; margin: 0; overflow: visible; } .kasaSekmesiIcerigi .kasaKoseKontrolleri { padding-top: 10px; border-top: 1px solid var(--renk-kenarlik); } .kasaBolmeAraclari .bolgeKategoriBtn.bolgeKategoriKasa { margin-bottom: 8px; } /* Formun dışına taşınan Yapılanlar: formla aynı kenar boşluğu. */ .kasaOlculeriSolSutun > .kasaBolmeBolumu { padding: 0 12px; } /* Çoklu seçimde kapak: tek kapak / her göze ayrı (03.10). */ .kasaBolmeKapakSecimi { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; } .kasaBolmeKapakSecimBtn { padding: 3px 10px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); color: var(--renk-yazi); font-size: 11px; cursor: pointer; } .kasaBolmeKapakSecimBtn.secili { border-color: var(--renk-ana); background: color-mix(in srgb, var(--renk-ana) 12%, transparent); color: var(--renk-ana); } /* Yapılanlar başlığı: Geri / İleri düğmeleri yanında (03.10). */ .kasaBolmeBaslikSatiri { display: flex; align-items: center; gap: 6px; } .kasaBolmeBaslikSatiri > .kasaBolmeBasligi { flex: 1 1 auto; margin: 0; } .kasaBolmeGecmisBtn { padding: 2px 8px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); color: var(--renk-yazi); font-size: 11px; cursor: pointer; } .kasaBolmeGecmisBtn:hover:not(:disabled) { border-color: var(--renk-ana); color: var(--renk-ana); } .kasaBolmeGecmisBtn:disabled { opacity: 0.4; cursor: default; } /* ============================================================ SAĞ TIK MENÜSÜ (kullanıcı 03.10) ============================================================ */ .kasaSagTikMenusu { position: fixed; z-index: 10050; min-width: 200px; padding: 4px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-panel); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22); font-size: 12px; } .kasaSagTikBasligi { padding: 4px 10px 6px; font-size: 11px; font-weight: 600; color: var(--renk-yazi-ikincil); } .kasaSagTikOgesi { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: 4px; background: none; color: var(--renk-yazi); font: inherit; text-align: left; cursor: pointer; } .kasaSagTikOgesi:hover:not(:disabled), .kasaSagTikAdet:hover { background: var(--renk-ana-acik, var(--renk-alan-vurgu)); } .kasaSagTikOgesi:disabled { opacity: 0.4; cursor: default; } .kasaSagTikAdetSatiri { display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; } .kasaSagTikAdetSatiri > span { flex: 1 1 auto; color: var(--renk-yazi); } .kasaSagTikAdet { min-width: 28px; padding: 3px 0; border: 1px solid var(--renk-kenarlik); border-radius: 4px; background: var(--renk-panel); color: var(--renk-yazi); font: inherit; cursor: pointer; } .kasaSagTikAyirac { height: 1px; margin: 4px 6px; background: var(--renk-kenarlik); } /* ============================================================ CEPHE: KAPAK, KULP, AÇILIŞ, ASKILIK (03.10) ============================================================ Kapak seçili gözle aynı açık maviydi; şimdi ahşap tonunda, seçili göz mavi kalıyor. Açılış V'si ve kulp mobilya cephe çizimlerindeki gösterim. */ .kasaCephesiKapak { fill: color-mix(in srgb, #c9a46b 30%, var(--renk-panel)); fill-opacity: 0.88; stroke: color-mix(in srgb, #7a5a2e 70%, var(--renk-yazi)); stroke-width: 1.4; } .kasaCephesiCekmece { fill: color-mix(in srgb, #c9a46b 22%, var(--renk-panel)); fill-opacity: 0.9; stroke: color-mix(in srgb, #7a5a2e 60%, var(--renk-yazi)); } .kasaCephesiAcilis { fill: none; stroke: color-mix(in srgb, #7a5a2e 55%, var(--renk-yazi)); stroke-width: 1; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; pointer-events: none; } .kasaCephesiMentese { stroke: color-mix(in srgb, #7a5a2e 80%, var(--renk-yazi)); } .kasaCephesiKulp { stroke: var(--renk-yazi); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; } .kasaCephesiAskilik { stroke: var(--ikon-cizgi); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; } .kasaCephesiAski { fill: none; stroke: var(--ikon-cizgi); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.8; pointer-events: none; } /* Seçili gözün kapağı: mavi çerçeve kapağın üstünden okunsun. */ .kasaCephesiBolge.secili { stroke-width: 2.5; } .kasaCephesiSecimCercevesi { fill: color-mix(in srgb, var(--renk-ana) 10%, transparent); stroke: var(--renk-ana); stroke-width: 2.5; vector-effect: non-scaling-stroke; pointer-events: none; } /* Gözün ölçü sayısı kapağın altından okunsun. */ .kasaCephesiKapak, .kasaCephesiCekmece { fill-opacity: 0.62; } /* ============================================================ CANLI ÖZET (03.10): alt çubuğun solunda ============================================================ */ .kasaOzetSatiri { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; margin-right: auto; font-size: 12px; color: var(--renk-yazi-ikincil); } .kasaOzetYazisi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .kasaOzetUyarisi { position: relative; flex: 0 0 auto; padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, #d97706 16%, transparent); color: #b45309; font-weight: 600; cursor: help; } .kasaOzetUyariListesi { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20; width: 360px; padding: 8px 10px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-panel); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2); color: var(--renk-yazi); font-weight: 400; line-height: 1.45; } .kasaOzetUyariListesi > div + div { margin-top: 6px; } .kasaOzetUyarisi:hover .kasaOzetUyariListesi, .kasaOzetUyarisi:focus-within .kasaOzetUyariListesi { display: block; } /* Hazır iç düzen (03.10): Kasa sekmesinde ölçülerin altında. */ .kasaHazirDuzenler { padding-top: 10px; border-top: 1px solid var(--renk-kenarlik); } .kasaHazirDuzenBasligi { margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--renk-yazi); } .kasaHazirDuzenDugmeleri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .kasaHazirDuzenBtn { padding: 7px 6px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); color: var(--renk-yazi); font-size: 12px; cursor: pointer; } .kasaHazirDuzenBtn:hover { border-color: var(--renk-ana); color: var(--renk-ana); } /* 3B sahnede çoklu seçim anahtarı (03.10): yalnız dokunmatikte; odada dolaplar, düzenlemede bölgeler. Odada yeri JS ile şeridin üstüne alınır. */ .sahneCokluSecimBtn { display: none; } @media (pointer: coarse) { .sahneCokluSecimBtn:not([hidden]) { display: block; position: absolute; left: 12px; bottom: 12px; z-index: 5; min-height: 40px; padding: 0 14px; border: 1px solid var(--renk-kenarlik); border-radius: var(--radius-kucuk); background: var(--renk-panel); color: var(--renk-yazi); font: inherit; font-size: 13px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .sahneCokluSecimBtn[data-acik="evet"] { border-color: var(--renk-ana); background: var(--renk-ana); color: #fff; } } /* Telefon alt çubuğu (05.10): "Dolabı Oluştur" iki satıra kırılıyordu, özet yazısı "levha ≈ 1,…" diye kesiliyordu. Düğmeler tek satır; özet düğmelerin üstünde tam satır. */ @media (max-width: 760px) { .kasaOlculeriPenceresi > .parcaEklemeButonAlani { flex-wrap: wrap; row-gap: 6px; } .kasaOlculeriPenceresi > .parcaEklemeButonAlani button { white-space: nowrap; } .kasaOlculeriPenceresi > .parcaEklemeButonAlani > :not(button) { flex: 1 1 100%; white-space: normal; } } /* ===== 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; } } /* ===== css/bolumler/58-dokunmatik.css ===== */ /* ============================================================ DOKUNMATİK EKLER (gece gezintisi 03.10) ============================================================ 45-telefon.css tek bir dar ekran sorgusunda duruyor (test tutuyor). Dokunmatik ve yatay telefon kuralları ayrı sorgular istediği için burada; listenin sonunda, şerit ve küp dosyalarından sonra okunuyor. */ /* ============================================================ DOKUNMATİKTE KAPAT DÜĞMELERİ (gece gezintisi 03.10) ============================================================ Pencere × düğmeleri 24 px (bazıları 27x18) kalıyordu; parmakla zor vuruluyor. Proje kartındaki sil ×'i 22 px ve yeniden adlandırma kaleminin 8 px yanındaydı: ikisi karışıyordu. Dokunmatikte en az 40 px, sil biraz uzakta. */ @media (pointer: coarse) { .parcaKapat, .yoneticiKapatBtn, .yeniProjeKapatBtn, .uyeGirisKapat, .trendyolKapatBtn, .tekrarKesimKapatBtn, .rafEklemeKapatBtn, .projeAyarlariKapatBtn, .parcaEklemeKapatBtn, .panelCizimKapatBtn, .olcuFoyuKapatBtn, .nestingKapatBtn, .mesajKutusuKapatBtn, .malzemeYonetimiKapatBtn, .malzemeSecimiKapatBtn, .malzemeVeStokKapatBtn, .kutuphaneyeKaydetKapatBtn, .koseSihirbaziKapat, .koliKapat, .kisayolYardimiKapat, .kilavuzKapatBtn, .kesimeHazirKapatBtn, .kesimSiparisKapat, .gKodOnizlemeKapat, .etiketKapatBtn, .donanimListesiKapatBtn, .donanimKapatBtn, .dolapBakisYonuKapatBtn, .cncAyarlariKapatBtn, .artikStoguKapatBtn, .aracPenceresiKapat, .yzKapat { min-width: 40px; min-height: 40px; } .girisKartSilBtn { min-width: 36px; min-height: 36px; margin-left: 14px; } } /* ============================================================ TELEFON YATAY (gece gezintisi 03.10) ============================================================ iPhone yan tutulunca (≈844x390) üst çubuk, görünüm şeridi, modül şeridi ve durum çubuğu ekranı dolduruyor, 3B sahneye ≈70 px kalıyordu; görünüm küpü "Kasa Oluştur" kolunun üstüne biniyordu. Yatay telefonda şerit kartları küçük ikonlu ve kısa, küp küçük ve yukarıda, şerit sola yaslı (küpün yeri boş kalsın). */ @media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) { body .modulSeridi { right: auto; left: 8px; bottom: 6px; transform: none; max-width: calc(100% - 120px); gap: 3px; padding: 4px 6px 6px; } body .modulSeridiKart { width: 74px; gap: 2px; padding: 3px 3px 3px; } body .modulSeridiKartGorseli { height: 26px; } body .gorunumKupu { top: 42%; right: 8px; transform: translateY(-50%) scale(0.75); transform-origin: right center; } } /* ÜST ÇUBUK TAŞMASIN (gece gezintisi 03.10, tablet): Yapay Zekâ grubu görününce satır ekrandan genişliyordu; tam ekran ve tema düğmesi dışarıda, dikey tablette logo ve "Proje" solda kayboluyordu. Menü sütunu sıkışabiliyor, gruplar kendi içinde kayıyor. Geniş ekranda değişen bir şey yok. */ @media (min-width: 761px) { .calismaHeaderUstSatir { grid-template-columns: minmax(0, auto) minmax(80px, 1fr) minmax(0, auto); } .calismaHeaderIslemler { min-width: 0; } .ustMenu { min-width: 0; } .ustMenuGruplari { min-width: 0; overflow-x: auto; scrollbar-width: none; } .ustMenuGruplari::-webkit-scrollbar { display: none; } } /* DÜZENLEMEDE ŞERİT GİZLİ (gece gezintisi 03.10): kartlar yalnız odada çalışıyor; düzenlemede şerit dolabın altını, patlatılan parçaları ve tablette "Çoklu seç" düğmesini kapatıyordu. Sınıfı calismaModOlaylariniBaslat koyuyor. */ body.dolapDuzenlemeModu .modulSeridi { display: none; } /* MODEL AĞACINDA DOLAP ADI KESİLMESİN (gece gezintisi 03.10, PC): 216 px'lik yüzen ağaçta ölçü sütunu yer kaplıyor, ad 8 harfte kesiliyordu ("Bulaşı…" üç kez, hangisi hangisi belli değil). Dolap satırında ölçü adın altına iniyor. */ .modelAgaciYuvasi .modelAgaciSatir--dolap { height: auto; min-height: 20px; padding-top: 3px; padding-bottom: 3px; flex-wrap: wrap; row-gap: 2px; } .modelAgaciYuvasi .modelAgaciSatir--dolap .modelAgaciAd { flex: 1 1 calc(100% - 40px); } .modelAgaciYuvasi .modelAgaciSatir--dolap .modelAgaciOlcu { flex-basis: 100%; padding-left: var(--agac-olcu-girinti, 32px); } /* ODA / KOLON / KİRİŞ ÖLÇÜ PENCERESİ (gece gezintisi 03.10): kasa penceresinin 1180 px'lik iskeleti küçük bir formu köşede bırakıyordu. Kasa tipi yokken pencere formun kendi boyunda. */ #kasaOlculeriKatmani .kasaOlculeriPenceresi.kasaOlculeriPenceresiSade, .kasaOlculeriPenceresi.kasaOlculeriPenceresiSade { width: min(520px, calc(100vw - 32px)); height: auto; max-height: calc(100vh - 48px); align-self: flex-start; flex: 0 0 auto; } /* Şerit sekmeleri yana kayar (04.10, kullanıcı: "menüleri kaydırılabilir yap"). İki yanda ok, gizli sekme olan kenarda solma: kaydığı belli olsun. Oklar JS'de gizli sekme varken açılır. */ body .modulSeridiSekmeKutusu { position: relative; display: flex; align-items: center; min-width: 0; } body .modulSeridiSekmeKutusu .modulSeridiSekmeleri { flex: 1 1 auto; min-width: 0; overflow-x: auto; flex-wrap: nowrap; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; } body .modulSeridiSekmeKutusu.sagaKayar .modulSeridiSekmeleri { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } body .modulSeridiSekmeKutusu.solaKayar .modulSeridiSekmeleri { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); } body .modulSeridiSekmeKutusu.solaKayar.sagaKayar .modulSeridiSekmeleri { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); } /* Kullanıcı (04.10): "oradaki ok biraz büyük olmuş". */ body .modulSeridiSekmeOku { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 1px solid var(--renk-kenarlik); border-radius: 999px; background: var(--renk-panel); color: var(--renk-yazi-ikincil, var(--renk-yazi)); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; } body .modulSeridiSekmeOku[hidden] { display: none; } @media (pointer: coarse) { body .modulSeridiSekmeOku { width: 26px; height: 26px; font-size: 15px; } } /* Oda tipi (04.10): "Tümü" sekmesi kesik çerçeveli (menü değil, süzgeç); menünün oda işareti (⌂) silme işaretinin kırmızısını almaz. */ body .modulSeridiSekme.modulSeridiTumu { border: 1px dashed var(--renk-kenarlik); } body .modulSeridiSekme.modulSeridiTumu[data-tumu="acik"] { border-style: solid; border-color: var(--renk-ana); color: var(--renk-ana); } body .modulSeridiOdaIsareti:hover { background: var(--renk-ana); color: #ffffff; } body .modulSeridiSekme.modulSeridiOdaTipi { border: 1px solid var(--renk-kenarlik); text-transform: none; } /* ============================================================ TANITIM TURU (04.10) ============================================================ Karartma ışığın gölgesinden: ışık kutusunun dışı koyu, içi açık; tıklama katmana gider (alttaki uygulamaya değil). */ /* Pencerelerin üstünde, uyarı kutusunun (12001) altında. */ body .tanitimKatmani { position: fixed; inset: 0; z-index: 12000; } body .tanitimKatmani.tanitimOrtada { background: rgba(15, 23, 42, 0.55); } body .tanitimIsik { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55); outline: 2px solid var(--renk-ana); pointer-events: none; transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease; } body .tanitimIsik[hidden] { display: none; } body .tanitimKarti { position: fixed; box-sizing: border-box; padding: 14px 16px 12px; border-radius: 12px; background: var(--renk-panel, #ffffff); color: var(--renk-yazi); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); transition: left 0.18s ease, top 0.18s ease; } body .tanitimSayac { font-size: 12px; color: var(--renk-yazi-ikincil, var(--renk-yazi)); } body .tanitimBaslik { margin: 4px 0 6px; font-size: 17px; } body .tanitimMetin { margin: 0 0 12px; font-size: 14px; line-height: 1.45; } body .tanitimDugmeleri { display: flex; gap: 8px; align-items: center; } body .tanitimDugmeleri button { min-height: 36px; padding: 0 14px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; background: var(--renk-panel, #ffffff); color: var(--renk-yazi); font: inherit; font-size: 14px; cursor: pointer; } body .tanitimDugmeleri button[hidden] { display: none; } body .tanitimDugmeleri .tanitimAtla { margin-right: auto; border-color: transparent; background: transparent; color: var(--renk-yazi-ikincil, var(--renk-yazi)); } body .tanitimDugmeleri .tanitimIleri { border-color: var(--renk-ana); background: var(--renk-ana); color: #ffffff; font-weight: 600; } @media (pointer: coarse) { body .tanitimDugmeleri button { min-height: 42px; } }