/* Erfa Atelier — YENİ ARAÇLARIN KABUK KATMANI (/ses ve /parmak-izi). * ================================================================== * NE İŞE YARAR: bu iki araç doğduğunda ortak tam ekran kabuğunu (atelier.css * + fullscreen.js) taşımıyordu; sonradan takıldı. Kabuk sözleşmesi sihirbazı * DOĞRUDAN slotun çocuğu sanıyor (`.hr-fs-slot > .wiz`), bu iki araçta ise * araya bir ızgara sütunu giriyor. Aradaki farkı kapatan ve panele sığmayı * sağlayan kurallar burada. * * NEDEN AYRI DOSYA: iki sayfada da aynı kurallar gerekiyor; ses.css ve * parmak-izi.css'e iki kez yazmak, birini düzeltip diğerini unutmanın en * kısa yolu. Ortak dosyalara (atelier.css) DOKUNULMUYOR — orası altı aracın * motoru, buradaki kurallar yalnız bu iki araca uygulanıyor. * * SEÇİCİ SÖZLEŞMESİ: sihirbaz sütunu `.hr-tool-col` sınıfını taşır. * (Sayfaya özgü adı — .sk-wiz-col / .pi-wiz-col — kabuğun data-fs-movers * seçicisinde kullanılır; bu dosya paylaşılan adı kullanır.) */ /* ── 1) SÜTUN, SLOTUN KENDİSİ GİBİ DAVRANSIN ──────────────────────────── atelier.css `.hr-fs-slot .wiz-nav{margin-top:auto}` diyor; `margin-top:auto` yalnız FLEX kabında iş görür. Sihirbaz doğrudan slotun çocuğu olduğunda (/cizim, /konum) atelier.css onu zaten flex yapıyor (`.hr-fs-slot > .wiz`); araya sütun girince o seçici tutmuyor ve şerit panelin dibine değil içeriğin hemen ardına düşüyordu. Zincir burada aynen kuruluyor. */ .hr-fs-slot .hr-tool-col{margin:0!important;width:100%; display:flex!important;flex-direction:column;min-height:100%} .hr-fs-slot .hr-tool-col > .wiz{flex:1 1 auto;display:flex;flex-direction:column;min-height:0} /* ── 2) ADIM PANELE SIĞSIN ────────────────────────────────────────────── ÖLÇÜLDÜ (390x844, gerçek Chrome, elementFromPoint): panel 400 px · slot 346 px · yapışkan şerit 72 px → şeridin ÜSTÜNDE kalan gerçek bant 256 px, adım 508'de başlıyor, yani adımın boyu 246 px'i geçerse son satır şeridin arkasına düşüyor. İlk kurulumda /ses adım 4 (Arka yüz ve zincir) 277 px'ti: dört zincir çipinin dördü de şeridin arkasındaydı (çip y=739, şerit y=754). Dört eski araçta bu sorun yok çünkü adımları daha kısa — yani kusur kabukta değil, bu iki aracın adım YÜKSEKLİĞİNDE. Aşağıdaki daraltma YALNIZ KABUK İÇİNDE geçerli; sayfa düzenindeki (kabuk kapalı / JS yok) görünüm hiç değişmiyor. Metin silinmedi, satır aralığı ve bloklar arası boşluk sıkıştırıldı — okunabilirlik sınırı olarak satır yüksekliği 1,45'in altına indirilmedi. */ .hr-fs-slot .hr-tool-col .wiz{gap:12px} .hr-fs-slot .hr-tool-col .wiz-step.is-current{gap:7px} .hr-fs-slot .hr-tool-col .wiz-title{font-size:21px;line-height:1.14} .hr-fs-slot .hr-tool-col .wiz-sub{line-height:1.45;margin:-3px 0 2px} /* Ara başlık rolündeki `.wiz-sub`lar (Yüzey / Zincir boyu / Dalga nasıl işlensin?) sayfa düzeninde 14 px yukarıdan başlıyor; panelde o boşluk üç kez tekrarlanıp 30 px'e mal oluyordu. */ .hr-fs-slot .hr-tool-col .wiz-sub.hr-ara{margin-top:4px} /* ── 3) İKİ KAYNAK DÜĞMESİ YAN YANA ───────────────────────────────────── /ses adım 1'de "Ses dosyası yükle" ve "Mikrofonla kaydet" alt alta 350x48 duruyordu (96 px + boşluk). Panelde ikisi de aynı satıra sığıyor ve ikincisi şeridin arkasından kurtuluyor. Sayfa düzeninde alt alta kalmaya devam ediyor — orada genişlik derdi yok. */ .hr-fs-slot .hr-tool-col .sk-kaynak{display:grid;grid-template-columns:1fr 1fr;gap:8px} .hr-fs-slot .hr-tool-col .sk-kaynak > button{width:100%;justify-content:center; padding-left:10px;padding-right:10px;font-size:12.5px} /* ── 3b) FİYAT ROZETİ SAHNENİN SOL ALTINDA ────────────────────────────── Sayfa düzeninde sahne bir KARE kart; rozet sağ üstte, kolyenin boşluğunda duruyordu. Kabukta kutu ekran boyu kareye çıkıyor, yani "sağ üst" artık ekranın tepesi: rozet zincirin üstüne biniyor (ölçüldü, ekran görüntüsü .qa/ss/kabuk/sonra8/ses-a0.png). Dört eski araçta rozet (`.cz-price`) sol altta; kabuk içinde bu ikisi de oraya alınıyor. Sayfa düzenindeki sağ üst konum aynen duruyor. */ .hr-fs-stage .sk-price, .hr-fs-stage .pi-price{right:auto;top:auto;left:12px;bottom:12px} /* ── 4) SEÇİM KARTLARI PANELDE DAHA ALÇAK ─────────────────────────────── ÖLÇÜLDÜ (390x844, sonra3): /ses adım 2'de iki işleme çipi (Kesim/Gravür) y=771'de, /parmak-izi adım 2'de "Kalp" kartı y=722'de şeridin arkasına düşüyordu; ikisinin de üstünde duran şey seçim kartları. Kartın kendi yüksekliği panelde gereğinden büyüktü: simgeye 34-46 px ayrılmış, üstüne 86 px'lik bir taban konmuştu. Bunlar SAYFA DÜZENİ için ölçülmüş değerler — orada sütun 340 px'ten geniş ve dikey yer bol. Panelde simge küçülüyor, taban kalkıyor; yazıların punto ve satır yüksekliğine DOKUNULMUYOR (kart metni zaten 11 px). */ .hr-fs-slot .hr-tool-col .sk-kart, .hr-fs-slot .hr-tool-col .pi-kart{min-height:0;padding:9px 9px 8px;gap:5px} .hr-fs-slot .hr-tool-col .sk-kart svg{height:26px} .hr-fs-slot .hr-tool-col .pi-kart svg{height:34px} .hr-fs-slot .hr-tool-col .sk-kartlar, .hr-fs-slot .hr-tool-col .pi-kartlar{gap:8px} /* SUTUN SAYISI PANELE GORE, GORUNUM PENCERESINE GORE DEGIL. ses.css'teki `@media (max-width:520px)` gorunum penceresini oluyor; panel ise masaustunde de 350 px. Sonuc: 1280 px'lik ekranda medya sorgusu hic tetiklenmiyor ve kartlar 350 px'e UC sutun sikisiyordu (olculdu: 111 px kart). Dort form/cerceve varken bu 3+1 demek - sonuncusu tek basina alt satirda, aciklamasi yapiskan seridin altinda. Panel icinde iki sutun her genislikte dogru: 171 px kart, 2x2 duzen. */ /* DESEN izgarasi 2 sutun kalir, FORM izgarasi panelde 4 sutun olur. Once ikisini birden 4 sutun yaptim: form adimi duzeldi ama DESEN adimi bozuldu (6 uzun metinli kart 4 sutunda sarip uzadi, 4 kart ortulu kaldi). Kural artik yalniz .sk-formlar'a bagli. */ .hr-fs-slot .hr-tool-col .sk-kartlar{grid-template-columns:repeat(2,minmax(0,1fr))} .hr-fs-slot .hr-tool-col .sk-formlar{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} /* PANELDE KART NOTU GIZLI, SAYFA DUZENINDE DURUYOR. Dort form iki satira sigmiyordu: 2x2 duzende adim 389 px, panelde serit disi alan 254 px ve "Kesim/Gravur" haplari tam seridin hizasina dusuyordu (elementFromPoint -> wiz-prev / wiz-nav). Once kip satirini bir sonraki adima tasidim, bu sefer ORADAKI Parlak/Mat ortulu kaldi - sorunu tasimis oldum. Sonra iki alt yaziyi kaldirdim, yetmedi. Kart notunu panelde gizlemek bir KART SATIRI kazandiriyor: dort kart tek satira giriyor. Notlar sayfa duzeninde (kabuk kapaliyken) aynen duruyor, yani bilgi kaybolmuyor - yalniz dar panelde ada ve simgeye guveniliyor. Simge zaten formun silueti. */ .hr-fs-slot .hr-tool-col .sk-formlar .sk-kart span{display:none} .hr-fs-slot .hr-tool-col .sk-formlar .sk-kart b{font-size:11.5px;text-align:center} .hr-fs-slot .hr-tool-col .sk-formlar .sk-kart{padding:8px 4px;align-items:center} .hr-fs-slot .hr-tool-col .sk-formlar .sk-kart svg{height:22px} /* ── 5) İKİ SATIRLIK YER TUTUCULAR ────────────────────────────────────── `.pi-durum` boşken bile 34 px yer kaplıyor (metin geldiğinde sıçrama olmasın diye — doğru karar, ama panelde iki satır pahalı). Panelde tek satırlık yer tutucu yetiyor: durum metni tek cümle. `.pi-kaydir`/`.sk-alan` üst boşlukları da adım içi ritme eşitleniyor. */ .hr-fs-slot .hr-tool-col .pi-durum{min-height:17px;margin-top:3px} /* Yükleme düğmesi 44 px — dokunma hedefi alt sınırı KORUNUYOR, altına inilmedi; kazanılan yer yalnız ayrı verilmiş üst boşluklardan geliyor. ÖLÇÜLDÜ: bu satırlar olmadan "İz koyuluğu" kaydırıcısı (y=748, merkez 756) yapışkan şeridin (y=754) 2 px altında kalıyordu — 2 px yüzünden ölçüm "ORTULU" diyor ve müşteri de gerçekten şeridin arkasına dokunuyor. */ .hr-fs-slot .hr-tool-col .pi-yukle{min-height:44px;margin-top:2px} .hr-fs-slot .hr-tool-col .pi-kaydir{margin-top:2px} .hr-fs-slot .hr-tool-col .pi-kaydir label{margin-bottom:0} .hr-fs-slot .hr-tool-col .pi-kaydir, .hr-fs-slot .hr-tool-col .pi-alan, .hr-fs-slot .hr-tool-col .sk-alan{margin-top:6px}