/* D-07-11 (07-05, Task 1) — self-hosted font-face bloklari (asagida). Google Fonts CDN iki ucuncu taraf istegi yapiyordu (fonts.googleapis.com CSS + fonts.gstatic.com dosya), preconnect yalnizca ikincisine vardi (render-bloklayan ekstra DNS+TLS turu). Font DEGERLERI degismiyor (design-handoff.md:199, PROJECT.md), yalnizca teslim mekanizmasi. unicode-range degerleri Google Fonts CSS API'sinin GERCEK donusunden ayristirildi (PD-07-21) — elle yazilmadi. src: url() KOK-MUTLAK yazildi (/assets/fonts/...) cunku bu dosya build.mjs'in rewriteAssetPaths() hattindan GECMIYOR (statik olarak /assets/css/site.css'ten servis ediliyor, CSS url() gorece kendi konumuna cozulur — assets/css/ icinden "assets/fonts/" yazmak /assets/css/assets/fonts/'a coker, olcumle bulundu). */ /* PD-07-22 — fallback-metrik eslemesi OLCULEREK yapildi (tablo degerinden kopyalanmadi). Gercek headless Chrome'da (http sunucusu uzerinden, 'Helvetica Neue' yigindan GECICI cikarilarak) olculdu: Archivo/sistem- sans-serif genislik orani 1,0032 (Archivo ~%0,32 daha genis) -> size- adjust=99,68%; canvas fontBoundingBoxAscent/Descent (100px, 'Hxgjpqy') fallback icin ascent=92%/descent=23%, Archivo icin ascent=88%/descent=21% -> ascent-override/descent-override FALLBACK degerlerine (92%/23%) ayarlandi, boylece swap anindaki satir kutusu degismiyor. Alti Archivo bloguna da AYNI degerler uygulandi (hhea/OS2 metrik tablosu agirliklar arasinda paylasilir, glif anahat degil). */ @font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/archivo-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;size-adjust:99.68%;ascent-override:92%;descent-override:23%} @font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/archivo-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;size-adjust:99.68%;ascent-override:92%;descent-override:23%} @font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/archivo-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;size-adjust:99.68%;ascent-override:92%;descent-override:23%} @font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/archivo-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;size-adjust:99.68%;ascent-override:92%;descent-override:23%} @font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/archivo-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;size-adjust:99.68%;ascent-override:92%;descent-override:23%} @font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/archivo-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;size-adjust:99.68%;ascent-override:92%;descent-override:23%} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibmplexmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibmplexmono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibmplexmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibmplexmono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} *,*::before,*::after{box-sizing:border-box} :root{--pady:64px;--maxw:1440px;--pad:max(var(--pady),calc((100% - var(--maxw))/2));--c3:repeat(3,1fr);--c2:1fr 1fr;--c4:repeat(4,1fr);--r:4px;--rb:6px;--ease:cubic-bezier(.2,.6,.2,1);--pat-ink:repeating-linear-gradient(90deg,rgba(24,48,72,.055) 0 1px,transparent 1px 36px);--pat-gold:repeating-linear-gradient(90deg,rgba(180,156,120,.11) 0 1px,transparent 1px 36px);--focus-color:#8A6A44} body{margin:0;background:#F4F4F1;-webkit-font-smoothing:antialiased} h1,h2,h3,h4,p{margin:0} button{font:inherit;font-family:inherit;border:0;background:none;color:inherit;cursor:pointer;text-align:left} a{color:#8A6A44;text-decoration:none} /* A11Y-02 (07-02, Task 3) — odak halkasi rengi ARTIK TEK renk degil, ZEMINE GORE degisen bir custom property (--focus-color). OLCULDU: #B49C78 (onceki tek deger) acik zemin (#F4F4F1/#FFFFFF) uzerinde yalnizca ~2.4:1 veriyor -- WCAG 1.4.11 (non-text contrast, >=3:1) esiginin ALTINDA. Bu handoff'un KENDI kuralinin (design-handoff.md:129 -- #8A6A44 ACIK zemin, #B49C78 KOYU zemin) odak halkasina hic uygulanmamis olmasindan kaynaklanan bir hataydi (D-07-06'nin mega-menu hover duzeltmesiyle AYNI kok neden, farkli yuzey). --focus-color varsayilani ACIK-zemin degeri #8A6A44 (5.4:1, handoff'ta zaten olculu); asagidaki KOYU-zemin konteynerlerde (footer, mega menu paneli, karusel kontrolleri) #B49C78'e YENIDEN TANIMLANIR. Yeni bir hex ICAT EDILMEDI -- ikisi de handoff'un mevcut paletinden. 09-03'te (D-09-18) `[data-carousel]` bu listeye EKLENDİ, çünkü artık kabın İÇİNDEKİ kontrol düğmeleri (oklar) kendi opak `#0F2233` kap zemini üzerinde duruyor — açık-zemin varsayılanı `#8A6A44` bu koyu zeminde ≈3.27:1'e düşüyordu (07-REVIEW HG-01). ⚠ Bu tek satırlık ekleme --focus-color custom property'sini [data-carousel]'in KENDİSİNE ve TÜM torunlarına miras bırakır — ÖLÇÜLDÜ, bu iki yerde YANLIŞ: (1) kabın kendi tabindex=0 halkası section'ın açık zeminine karşı görünür kalmalı (kabın DIŞI hâlâ açık — ilk paragrafın gerekçesi kabın KENDİSİ için hâlâ geçerli), (2) nokta kümesi düğmeleri kendi opak `#B49C78` zemin ÜZERİNDE duruyor — brass halka brass zemin üzerinde 1:1 (görünmez). İki hedefli düzeltme aşağıda: kabın kendi odağı açık-zemin varsayılanına GERİ döner, nokta düğmeleri KENDİ koyu glif rengine (#1A1408, zaten kullanılan bir hex) geçer — 6.85:1 (aynı glif/zemin oranı, UI-SPEC tablosu). Ok düğmeleri hiçbir ek kural almadan [data-carousel]'den miras aldığı brass'ı korur (kendi ebeveyni kabın koyu `#0F2233` zemini, 6.26:1, ÖLÇÜLÜ HG-01 tablosu). */ a:focus-visible,button:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-color);outline-offset:3px} footer,[data-megapanel],[data-carousel]{--focus-color:#B49C78} [data-carousel]:focus-visible{--focus-color:#8A6A44} [data-dot]{--focus-color:#1A1408} @keyframes uvB{0%,28%{opacity:0}33%,61%{opacity:1}66%,100%{opacity:0}} @keyframes uvC{0%,61%{opacity:0}66%,95%{opacity:1}100%{opacity:0}} @keyframes uvClip{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}} @keyframes uvUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @keyframes uvPanel{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}} [data-reveal]{transition:transform .75s var(--ease)} [data-pre]{transform:translateY(22px)} [data-reveal="in"]{transform:none} /* Harf harf başlık inişi (REV5-01). Mevcut [data-reveal] mekanizmasının aynı disiplinini izler: GÖRÜNÜRLÜK OPAKLIĞA BAĞLANMAZ (CLAUDE.md hareket kuralı) — yalnızca transform sürülür. Harfleri saran 'ler DOM'da KALICI DEĞİLDİR; assets/js/site.js animasyon biter bitmez başlığı orijinal metnine döndürür, bu yüzden a11y ağacında kalıcı bir harf yığını oluşmaz. ⚠ Maskeleme (overflow:hidden) descender'ları (g/y/p) keser; padding+negatif margin çifti alt tarafta alan açar ve düzeni AYNI yükseklikte tutar (CLS 0). ⚠ .uv-word inline-block + nowrap: harf başına her harfi bir satır kırılma noktası yapardı ve kelimeler ortadan bölünürdü — kelime bütünlüğü bu sarmalayıcıyla korunur. ⚠ vertical-align:top ZORUNLU: inline-block öğeler varsayılan olarak baseline'a oturur ve satıra descender payı ekler — ÖLÇÜLDÜ, başlık kutusu bölünmüşken 38px'ten 44px'e çıkıyordu (görünür bir layout sıçraması / CLS riski). */ [data-letters]{overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em} [data-letters] .uv-word{display:inline-block;white-space:nowrap;vertical-align:top} [data-letters] .uv-ltr{display:inline-block;vertical-align:top;transform:translateY(-118%);transition:transform .52s var(--ease)} [data-letters] .uv-ltr--in{transform:none} /* İkinci kemer: JS reduced-motion altında zaten hiç bölmez, ama global transition:none kuralı bölünmüş bir başlığı yakalarsa harfler maskenin ARKASINDA donup kaybolurdu — burada bitiş durumu koşulsuz sabitlenir. */ @media(prefers-reduced-motion:reduce){[data-letters]{overflow:visible}[data-letters] .uv-ltr{transform:none !important}} [data-tile]{display:block;color:#14181C} [data-media]{overflow:hidden;border-radius:var(--r);position:relative} [data-mediaimg]{position:absolute;inset:0;background-size:cover;transition:transform .8s var(--ease)} /* REV-02 (Plan 02.1-03 Task 1e, UI-SPEC § 1 kok neden): asagidaki dort :hover kurali eskiden etikete degil ATTRIBUTE'A bagliydi ([data-x]:hover). Hedefsiz 'lari /
'e cevirmek CSS'i degistirmezse span/div fare uzerine gelindiginde HALA link gibi tepki verirdi (ok kaymasi, alt cizgi acilmasi, satir ici kaymasi) -- "aktif gorunme" sikayetini yarim cozerdi. Dort kural artik `a[data-x]:hover` ile etikete kilitli; TABAN kurallar (data-tile, data-uline, data-row-link -- asagida degismedi) kilitlenmez, aksi halde demote edilen ogelerin duzeni bozulurdu. */ a[data-tile]:hover [data-mediaimg]{transform:scale(1.05)} [data-arrow]{display:inline-block;transition:transform .3s var(--ease)} a[data-tile]:hover [data-arrow],a[data-link]:hover [data-arrow]{transform:translateX(6px)} [data-card]{transition:transform .3s var(--ease)} [data-card]:hover{background:#E8E8E3;transform:translateY(-3px)} [data-uline]{background-image:linear-gradient(#B49C78,#B49C78);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--ease)} a[data-uline]:hover{background-size:100% 1px} [data-row-link]{transition:padding-left .3s var(--ease)} /* D-07-06 (07-02, A11Y-01) — #8A6A44 (2,72:1) KOYU zemin [data-megapanel] (#183048) uzerinde AA'nin altindaydi; handoff'un kendi kurali (design-handoff.md:129) #8A6A44'u ACIK zemin rengi olarak tanimliyor, koyu zeminde kullanimi kuralin ihlaliydi. #B49C78 (5,12:1) ayni bilesenin (Ribbon cizgisi, odak halkasi) zaten tasidigi accent'e donuyor, yeni hex icat edilmedi. */ a[data-row-link]:hover{padding-left:10px;color:#B49C78} [data-btn]{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:var(--rb);font-weight:500;font-size:15px;line-height:1;padding:16px 26px;transition:transform .2s var(--ease),border-color .2s var(--ease)} [data-btn]:active{transform:translateY(1px)} [data-btn="solid"]{background:#183048;color:#fff} [data-btn="solid"]:hover{background:#0F2233} [data-btn="outline"]{border:1px solid #14181C;color:#14181C;padding:15px 26px} [data-btn="outline"]:hover{background:#14181C;color:#fff} [data-btn="brass"]{background:#B49C78;color:#1A1408} [data-btn="brass"]:hover{background:#C9AE85} [data-btn="onDark"]{border:1px solid rgba(255,255,255,.45);color:#fff;padding:15px 26px} [data-btn="onDark"]:hover{background:#fff;color:#183048;border-color:#fff} [data-btn="sm"]{padding:12px 20px;font-size:14px} [data-chip]{transition:border-color .22s var(--ease)} [data-chip]:hover{border-color:#183048} [data-megapanel]{display:none} [data-megapanel="open"]{display:block;animation:uvPanel .22s var(--ease) both} [data-mega-caret]{transition:transform .22s var(--ease)} [data-menu-btn]{display:none} [data-menu-panel]{display:none} [data-accpanel]{display:none} [data-cap]{animation-fill-mode:both} @media (max-width:1300px){:root{--c3:repeat(2,1fr);--c4:repeat(2,1fr)}} @media (max-width:1100px){ :root{--c2:1fr} [data-nav]{display:none !important} [data-megapanel]{display:none !important} [data-menu-btn]{display:flex !important} [data-hidesm]{display:none !important} [data-row]{flex-direction:column !important;gap:44px !important} [data-row2]{flex-direction:column !important;gap:32px !important} [data-side]{width:100% !important;border-left:0 !important;padding-left:0 !important} [data-herogrid]{grid-template-columns:1fr !important;gap:32px !important} [data-herofacts]{flex-direction:row !important;flex-wrap:wrap;gap:32px !important;text-align:left !important} } @media (max-width:820px){ :root{--pady:24px;--c3:1fr;--c4:1fr} [data-h1]{font-size:38px !important} [data-h2]{font-size:27px !important} [data-cap]{font-size:14.25px !important;max-width:300px} .uv-ribbon--lg{--uv-ribbon-size:36px} } @media (max-width:520px){:root{--pady:18px}[data-h1]{font-size:31px !important}[data-h2]{font-size:23px !important}.uv-ribbon--lg{--uv-ribbon-size:28px}.uv-ribbon{gap:24px}[data-carousel]{height:auto !important;min-height:0 !important;aspect-ratio:4/5}} @media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}[data-pre],[data-reveal]{transform:none !important}} /* Uretimde geri acilan gecisler - prototipte kare ilerlemedigi icin kapaliydi */ [data-slide]{transition:opacity .7s var(--ease)} [data-card]{transition:transform .3s var(--ease),background .3s var(--ease)} @media (prefers-reduced-motion: reduce){ [data-slide],[data-card]{transition:none !important} } [data-btn-sm="1"]{padding:11px 18px;font-size:14px} /* Cross-Listing Ribbon (Faz 2, SERV-02 — imza bileşeni). Sayfa şablonuna inline stil yazılmaz; boyut yalnızca .uv-ribbon--lg/--md/--sm sınıflarıyla ifade edilir. Orta çizginin background bildirimi tek ve koşulsuzdur — hiçbir @media(prefers-reduced-motion) veya animasyon dalı onu değiştirmez (pazarlık dışı kural, design-handoff.md). */ .uv-ribbon{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px} .uv-ribbon__side{display:flex;flex-direction:column;gap:4px} .uv-ribbon__side--right{text-align:right} .uv-ribbon__label{font:500 11px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#8A6A44} .uv-ribbon__ticker{font:500 var(--uv-ribbon-size,46px) 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.04em;font-variant-numeric:tabular-nums;line-height:1} .uv-ribbon__city{font-weight:400;font-size:14px;color:#5D666E} .uv-ribbon__line{height:1px;background:#B49C78} .uv-ribbon--lg{--uv-ribbon-size:46px} .uv-ribbon--md{--uv-ribbon-size:28px} .uv-ribbon--sm{--uv-ribbon-size:16px} /* Requirements & eligibility — TBC hücre + yatay kaydırma sarmalayıcısı (Faz 2, UI-D-03, § Component Specifications 3). .uv-tbc, 1px dashed "beklemede" desenini taşır. ⚠ 02.1-01 (D-2.1-01/02): ana sayfanın "AWAITING SPK APPROVAL" rozeti, taşıdığı Mercanlar kartıyla BİRLİKTE ana sayfadan kaldırıldı — bu sınıf artık o (silinen) örneğe atıf yapmıyor, kendi footer "Dubai coming soon" kullanımına (02.1-05) hazır kalıyor. .uv-tablescroll semantiğini bozmadan dar ekranda klavyeyle kaydırılabilir bölge sağlar; odak halkası global a:focus-visible,button:focus-visible kuralına takılmaz (sarmalayıcı bir
, buton/link değil) — bu yüzden ayrıca tanımlanır (07-02: artık generic [tabindex]:not([tabindex="-1"]):focus-visible kuralı da bunu kapsıyor ve yüksek özgüllüğü nedeniyle kazanıyor — bu satır var()'a çevrildi, iki kural aynı değeri üretir, tutarlılık için korunur). */ .uv-tbc{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px dashed #5D666E;border-radius:var(--rb);font:500 10.5px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;color:#5D666E;text-decoration:none} /* A11Y-01 (07-02) — OLCULDU: .uv-tbc'nin varsayilan #5D666E rengi (acik zemin icin, 5.31:1) footer'in koyu navy zemininde (#183048) yeniden kullanildiginda 2,31:1'e duser. footer.html'deki "Dubai coming soon" rozeti bu sinifi KOYU zeminde miras aliyor; requirements tablosundaki (acik zemin) ve Contact sayfasindaki (acik zemin) kullanimlar etkilenmez. Duzeltme footer'in KENDI mevcut ikincil metin rengine (#A9B4C0, 6,42:1 — footer.html'nin her yerinde zaten kullanili) donuyor, yeni hex icat edilmedi. */ footer .uv-tbc{color:#A9B4C0;border-color:#A9B4C0} .uv-tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .uv-tablescroll:focus-visible{outline:2px solid var(--focus-color);outline-offset:3px} /* Selected experience — kayıt sayısına göre esneyen ızgara + boş-durum satırı + statü rozeti varyantları (Faz 2, D-10/D-12, § Component Specifications 2). 1–2 kayıt sola hizalı doğal genişlikte kalır (var(--c3) tek kayıtla "eksik içerik deliği" gibi okunmasın diye — CONTEXT.md D-12), 3+ kayıt mevcut var(--c3) ızgarasına döner, 0 kayıt kart-olmayan tek satıra düşer. .uv-txstatus--completed rengi ana sayfanın tek kalan rozet örneğinden birebir alınır (src/pages/home.html satır 120). ⚠ 02.1-01 (D-2.1-01/04): --ongoing (oxblood kenarlık) ve --awaiting (dashed kenarlık) varyantları artık HİÇBİR üretilen HTML'de referans edilmiyor — build.mjs'in yeni yayın koşulu (loadTransactions()) tamamlanmamış statüleri hiç basmıyor. Sınıflar kasıtlı olarak SİLİNMEDEN korunuyor (UI-SPEC § 6: enum + olası Faz 3 filtre etiketleri için ölü ama kasıtlı kod, geri dönüş maliyeti ihmal edilebilir). */ .uv-expgrid{display:grid;grid-template-columns:var(--c3);gap:16px} .uv-expgrid[data-experience-count="1"],.uv-expgrid[data-experience-count="2"]{grid-template-columns:repeat(auto-fit,minmax(320px,420px));justify-content:start} .uv-expgrid[data-experience-count="0"]{display:block} .uv-emptyrow{border:1px solid #DEDEDA;padding:32px;text-align:center;font-weight:400;font-size:14px;line-height:1.55;color:#5D666E} .uv-txstatus{display:inline-block;padding:4px 10px;font:500 10.5px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.1em;border-radius:var(--rb)} .uv-txstatus--completed{background:#183048;color:#fff} .uv-txstatus--ongoing{border:1px solid #6B2130;color:#6B2130} .uv-txstatus--awaiting{border:1px dashed #5D666E;color:#5D666E} /* İşlem listesi satırı (Faz 3, Task 1, D-03-13/14/18, 03-UI-SPEC.md § Component 2/3/4). Kartsız, saç teli ayraçlı liste — masaüstünde tek satır flex, <=1100px'te dikey akış (TX-05, hiçbir alan düşürülmez), <=520px'te rol+rozet karşılıklı hizalanır. Monogram (izin yokken) ve gelecekteki (izin geldiğinde) AYNI 76x40 kutuyu paylaşır, kutu çerçevesi/boyutu hiçbir dalda değişmez (TX-04, "düzen bozulmaz"). */ .uv-txrow{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid #DEDEDA;align-items:center} .uv-txrow[hidden]{display:none} .uv-txrow__logo{width:76px;height:40px;border:1px solid #DEDEDA;background:#fff;border-radius:var(--r);flex:none;display:flex;align-items:center;justify-content:center;font:500 14px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.02em;color:#5D666E} .uv-txrow__logo img{width:100%;height:100%;object-fit:contain;padding:6px} .uv-txrow__company{width:230px} .uv-txrow__company h2{font-weight:500;font-size:19px;line-height:1.2;letter-spacing:-.012em} .uv-txrow__sub{font:400 11.5px 'IBM Plex Mono',ui-monospace,monospace;color:#5D666E;margin-top:5px;text-transform:uppercase} .uv-txrow .uv-ribbon--sm{margin-top:5px} .uv-txrow__summary{flex:1;min-width:200px;font-weight:400;font-size:15.5px;color:#5D666E} .uv-txrow__meta{width:120px;font:400 12px/1.5 'IBM Plex Mono',ui-monospace,monospace;color:#5D666E} .uv-txrow__role{width:170px;font-weight:400;font-size:14px;color:#5D666E} .uv-txrow .uv-txstatus{width:150px;text-align:right} @media(min-width:1101px){.uv-txrow__head{display:contents} /* UAT-01: `summary` boş olan kayıtta şablon `uv:itemif item.hasSummary` ile `.uv-txrow__summary`'yi HİÇ basmaz — ama o span `flex:1` taşır, yani meta/rol/rozeti sağa iten esnek boşluğun KENDİSİDİR. Yokken sağ sütunlar sola çöküyordu (1440px'te 486px kayma, `gersan-elektrik` satırında ölçüldü). `margin-left:auto` boşluğu meta'nın soluna devreder: özet VARSA `flex:1` zaten tüm boşluğu yuttuğu için bu değer 0'a çözülür (davranış değişmez), YOKSA hizayı kurtarır. Yalnızca satır yönünde geçerli — ≤1100px'te düzen `column`'a döner ve `margin-left` çapraz eksene düşerdi (TX-05'i bozardı), o yüzden kapsam bilinçli olarak bu medya sorgusudur. */ .uv-txrow__meta{margin-left:auto}} /* WINDOWS #10 / D-07-16 (07-03): 1101-1179px bandında özeti OLAN satırda `.uv-txrow__summary`'nin `min-width:200px` tabanı (satır 198) sağ sütunları itiyordu — ÖLÇÜLDÜ (gerçek Chrome, iframe viewport, düzeltme ÖNCESİ): 1101px=47px, 1120px=35px, 1150px=16px, 1180px=0px (1180px'te zaten sıfıra iniyor, bant üstte doğal olarak kapanıyor). Kapatmanın REDDEDİLEN iki yolu: TX-05'in kilitli 1100px kırılma noktasını değiştirmek (tamamlanmış bir gereksinimi bozar) ve `gersan-elektrik` kaydına özet yazmak (eski siteden birebir metin + proje sahibi sözü gerektirir, olgu yok). Üçüncü yol: taban YALNIZCA bu dar bantta 0'a çekilir — `@media(min-width:1101px)` bloğunun (yukarıda) `margin-left: auto` kuralına DOKUNULMAZ, özeti OLMAYAN satırın hizası (UAT-01, 486px sürüklenme düzeltmesi) tamamen ona bağlı kalır. `min-width:0`, mevcut `@media(max-width:1100px)` bloğunun (aşağıda, satır 218) zaten kullandığı değerdir — yeni bir sihirli sayı icat edilmedi (PD-07-14). Bu blok `@media(min-width:1101px)` bloğunun ARDINA yazılır ki kaskad sırası belirleyici olsun. Ölçülen SONUÇ (behavior-smoke W1/W2, tools/behavior-smoke.html): dört genişlikte de fark 0px'e indi, W2'nin 1100/1200px sınır davranışı (margin-left:auto mekanizması) değişmedi. */ @media(min-width:1101px) and (max-width:1179px){.uv-txrow__summary{min-width:0}} @media(min-width:521px){.uv-txrow__foot{display:contents}} @media(max-width:1100px){ .uv-txrow{flex-direction:column;align-items:stretch;gap:12px;padding:24px 0} .uv-txrow__head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px} .uv-txrow__company{width:auto} .uv-txrow__summary{min-width:0} .uv-txrow__meta,.uv-txrow__role{width:auto} .uv-txrow .uv-txstatus{width:auto;text-align:left} } @media(max-width:520px){ .uv-txrow__foot{display:flex;justify-content:space-between;align-items:center;gap:12px} } /* Filtre çip şeridi (Faz 3, Task 1, D-03-06/07/08, 03-UI-SPEC.md § Component 1). `hidden` niteliği ÜRETİLEN HTML'de baştan var (JS yoksa şerit hiç görünmez, ziyaretçi tam listeyi görür) — `.uv-txfilters[hidden] {display:none}` kuralı BURADA ZORUNLU: `.uv-txfilters{display:flex}` bir yazar-stil kuralıdır ve tarayıcının `[hidden]{display:none}` UA kuralını ezer, bu satır olmadan `hidden` şerit ekranda kalırdı (.uv-txrow[hidden] ile aynı gerekçe, satır 156). */ .uv-txfilters{display:flex;gap:26px;flex-wrap:wrap;align-items:center;padding:0 var(--pad) 24px;border-bottom:1px solid #14181C} .uv-txfilters[hidden]{display:none} .uv-txfilter-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .uv-txfilter-group--market{margin-left:auto} .uv-txfilter-group__label{font:500 10.5px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em;color:#5D666E;text-transform:uppercase} .uv-chip{ display:inline-flex;align-items:center;justify-content:center; min-height:44px; /* A11Y-03 — prototipin 8px 14px paddingi tek başına ~32px verir */ padding:8px 14px; border:1px solid #C9C9C4;border-radius:var(--rb); font-weight:500;font-size:13.5px; transition:border-color .22s var(--ease),background .22s var(--ease),color .22s var(--ease) } .uv-chip:hover{border-color:#183048} .uv-chip[aria-pressed="true"]{border-color:#183048;background:#183048;color:#fff} .uv-txcount{font:400 13px/1.5 'IBM Plex Mono',ui-monospace,monospace;color:#5D666E;padding:14px var(--pad) 0} @media(prefers-reduced-motion:reduce){.uv-chip{transition:none}} /* İkinci işlem liste görünümü — sol filtre sütunu + kutu ızgarası (Faz 13, `13-01`, D-13-05/D-13-06, REV2-10). Proje sahibinin işaret ettiği strandhanson.co.uk/all-transactions yerleşimi. Mevcut `.uv-txrow` satır listesi DEĞİŞMEDEN yaşamaya devam eder — bu sınıflar onunla hiç kesişmez. Yatay sınır `--pad` formülünden gelir (D-14-01); sayfaya elle max-width VERİLMEZ. Yeni kırılma noktası icat edilmez: 1300/1100 mevcut değerlerdir ve kutu ızgarası global bir kolon token'ı kullanır (D-13-06, D-14-11). ⚠ 2026-08-26 (proje sahibi kararı): kutular büyüsün ve liste "daha dolu" görünsün diye ızgara SABİT iki kolona geçti. Global token KULLANILMADI ve hiçbir token'a DOKUNULMADI (global tanım değişse ana sayfa da etkilenirdi): ölçüldü, hiçbir mevcut token istenen 2/2/1 davranışını vermiyor — `--c3` 3/2/1 (>1300 / <=1300 / <=820), `--c2` 2/1 (>1100 / <=1100). `--c2` denendi ve 821-1100px bandında tek kolona düştüğü için REDDEDİLDİ. Bileşene özel kural + mevcut 820 kırılma noktası seçildi. Ölçülen etki: >1300px 3→2 kolon, 1101-1300px değişmedi (2), 821-1100px değişmedi (2), <=820px değişmedi (1). */ .uv-txgrid{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start} /* Savunma kuralı (D-12 disiplini, insights.html'in `data-insempty` yorumunun emsali): kayıt yoksa `