/* ============================================================ MotoMap public-site — Google vs MotoMap ölçümü (v8) ============================================================ Harita panelleri gerçekten sayfanın üstünde duran "yükseltilmiş malzeme": şasi --panel jetonunu okur (gece --raised, kâğıtta --paper-raised). Bölüm v9'dan beri kâğıtta (.ground-day). Görsel dil ölçüm/rapor hassasiyeti: değerler Geist Mono ve tabular-nums, paneller düz, tek saç teli kenar. showcase.js'in SÖZLEŞMESİ DEĞİŞMEDİ: ID'ler ve durum sınıfları (is-ok / is-recorded / is-loading / is-unavailable / is-empty, .show) aynen korunur. Veri disiplini de değişmedi: yalnızca canlı sonuç ya da tarihi yazılı kayıtlı ölçüm; ikisi de yoksa açık "kullanılamıyor". Placeholder asla gerçek değer gibi gösterilmez. v8 (2 Eylül) — kurucunun üç isteği: · KÜÇÜK YAZILAR SANS. Mono, büyük harf, geniş harf aralığı etiketler ("RECORDED MEASUREMENT", "DISTANCE") "yapay zekâ yapmış gibi" duruyordu. Etiketler Geist sans, cümle düzeni, 500 ağırlık, harf aralığı 0. Mono yalnızca ÖLÇÜLMÜŞ DEĞERDE kaldı (36.1 km, %1,9, koordinat, anahtardaki rakamlar) — "mono = ölçüm" kaydı bozulmadı, daraldı. Cümle düzeni CSS'te (::first-letter), dizeler dokunulmadı. · ÇERÇEVE SADE. Panelin saç teli kenarı ve plakanın kendi çerçevesi kalktı; plaka 6px yarıçapla şasiye oturuyor, yakınlaştırma kontrolü yalnız üzerine gelince/odaklanınca beliriyor, atıf şeridi sans ve daha sessiz. Malzeme (v9): --panel şasi, --map-l-ground plaka. · ÜÇ MOD ÜÇ RENK. Anahtardaki örnek çizgiler main.css MOD RENKLERİ jetonlarından okunuyor; haritadaki çizgilerle aynı kaynak. v9 (2 Eylül) — BÖLÜM KÂĞITTA. Şasi malzemesi --panel (kâğıtta --paper-raised, beyazımsı) ve yumuşak temas gölgesi; efsane cümlesi, ölçüm tarihi satırı ve koridor notu kalktı (kurucu: "bunları sil"). Harita zaten açık (v8f): Google'ın vektör altlığı --map-l-* ile, anahtarsız yedek Esri World Light Gray. ============================================================ */ .showcase-grid{ display:grid;gap:var(--s4); margin-top:clamp(var(--s8), 9vh, var(--s9)); } @media(min-width:900px){ .showcase-grid{grid-template-columns:1fr 1fr;gap:var(--s5);} } /* ÜÇ MOD görünümünde ızgara tek panele iner: o kayıtta karşılaştırılacak ikinci bir SAĞLAYICI yok, üç çizginin üçü de MotoMap motorunun çıktısı. Boş bir Google paneli bırakmak "Google burada ölçülemedi" gibi okunurdu; oysa hiç sorulmadı. */ @media(min-width:900px){ .showcase-grid.is-solo{grid-template-columns:1fr;} } /* ── PANEL ÇERÇEVESİ ───────────────────────────────────────────── Şikâyet çerçevenin VARLIĞI değil, hiyerarşisinin olmamasıydı: üstte ince bir renk çizgisi, altında aynı ağırlıkta bir başlık, onun yanında hap içinde aynı ağırlıkta bir rozet, kenarında sert biten — ve o sertliği bir vinyetle gizlenen — bir harita. Hepsi aynı sesle konuşuyordu. Yeni kayıt TEK BİR GEOMETRİK KARARA dayanıyor: PANEL BİR ŞASİDİR, HARİTA O ŞASİYE OTURTULMUŞ BİR PLAKADIR. · Şasinin iç boşluğu her kenarda --s4 (16px) ve panelin İÇİNDEKİ her şey — başlık, plaka, anahtar, ölçüm satırı — o tek dikey eksende hizalanır. Başlığın sol kenarı ile haritanın sol kenarı artık aynı çizgide (eskiden 24px ve 0px'teydiler). · Plakanın yarıçapı EŞMERKEZLİLİKTEN çıkar, zevkten değil: iç yarıçap = dış yarıçap − iç boşluk = 10px − 16px < 0, yani köşe KESKİN olmak zorunda (--r-0). Sahibin istediği "keskin"in ölçülebilir karşılığı bu; yuvarlatılmış bir plaka köşesi burada geometrik olarak yanlış olurdu. · Plakanın kendi saç teli çerçevesi --edge-lit: --lit'in (beyazın %7'si) OPAK karşılığı. Alfa bir kenar burada zemine göre kayardı; plaka bir malzeme gibi dursun diye kenarı da opak. ÜSTTEKİ RENK ÇİZGİSİ KALKTI. Sağlayıcı ayrımını artık dekoratif bir şerit değil MALZEME taşıyor: plakanın çerçevesi MotoMap tarafında marka mavisi, Google tarafında nötr. ---------------------------------------------------------------- */ .showcase-panel{ position:relative; padding:var(--s4); border-radius:var(--r-md); background:var(--panel); border:0; /* v9: kâğıt üstünde beyazımsı şasi, yumuşak temas gölgesi. */ box-shadow:var(--sh-1); } /* Veri geldiğinde panelin kenarı bir tık canlanıyor: durum değişimi rozetle birlikte kaptan da okunuyor. */ /* v8: kenar kalktı; durum değişimini rozet tek başına taşıyor. */ .showcase-panel-head{ display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3); padding:var(--s1) 0 var(--s4); } /* HİYERARŞİ ÖLÇÜLÜ: rakam 24–32px › panel adı 15px › ölçüm etiketi 11px › durum rozeti 10px. Dört kademe, dört farklı iş. Eskiden ad ve rozet aynı ağırlıktaydı çünkü rozetin dolgulu bir hapı vardı. */ .showcase-panel-title{ display:flex;align-items:center;gap:var(--s3); font-size:15px;line-height:20px;font-weight:520; letter-spacing:-.01em;color:var(--text); } .showcase-provider-dot{width:7px;height:7px;border-radius:var(--r-pill);flex-shrink:0;} .showcase-provider-dot.google{background:var(--text-3);} .showcase-provider-dot.motomap{background:var(--blue);} /* Durum rozeti: sayfadaki dört büyük-harf etiketinden biri. HAP KALKTI. Dolgulu bir hap, rozeti panelin ADIYLA aynı görsel ağırlığa çıkarıyordu — panelin kim olduğu ile ne durumda olduğu aynı sesle konuşuyordu. Şimdi rozet tek bir biçim: nokta + mono etiket; durumu RENK ve NOKTANIN DOLULUĞU taşıyor, kutu değil. Yan fayda ölçülebilir: hapın zemini --fill (yarı saydam beyaz) idi ve dosyanın eski notunda yazan bileşik-zemin sorunu (4,12:1) bu zeminden geliyordu. Zemin kalkınca metin doğrudan --raised üzerinde duruyor: --text-2 orada 7,64:1. */ .showcase-status-badge{ display:inline-flex;align-items:center;gap:var(--s2); /* v8f: ölçüm damgası serif, italik — fotoğraf künyesi gibi (kurucu: Nimbus Roman). Renk ve nokta mantığı aynı. */ font-family:var(--serif);font-style:italic;font-size:14px;line-height:16px;font-weight:400; letter-spacing:.01em;white-space:nowrap; color:var(--text-2); } .showcase-status-badge::before{ content:"";width:5px;height:5px;border-radius:var(--r-pill); flex-shrink:0;background:var(--text-3); } /* Canlı sonuç: mavi metin + dolu nokta. */ .showcase-status-badge.is-ok{color:var(--cyan);} .showcase-status-badge.is-ok::before{background:var(--cyan);} /* Kayıtlı ölçüm canlıdan GÖRSEL OLARAK ayrılır: nötr ton ve DOLU NOKTA YOK — nokta boş bir halka. Ziyaretçi neye baktığını rozetten anlar. */ .showcase-status-badge.is-recorded::before{ background:transparent;box-shadow:inset 0 0 0 1px var(--text-3); } .showcase-status-badge.is-unavailable{color:var(--danger);} .showcase-status-badge.is-unavailable::before{background:var(--danger);} /* PLAKA. Kendi çerçevesi, keskin köşesi ve şasinin iç boşluğu var — panele yapıştırılmış bir resim değil, panele oturtulmuş bir malzeme. */ .showcase-map-wrap{ position:relative;height:300px; background:var(--map-l-ground); border:0; /* v8: çerçevesiz plaka, 6px yarıçap. Eşmerkezlilik hesabı (10−16<0) keskin köşe diyordu; kurucu "daha modern, daha temiz" istedi ve çerçevesiz bir plakada keskin köşe sert duruyordu. Yarıçap şasinin yarıçapından (--r-md) küçük tutuldu ki hiyerarşi kalsın. */ border-radius:6px; overflow:hidden; } @media(min-width:640px){ .showcase-map-wrap{height:380px;} } @media(min-width:1024px){ .showcase-map-wrap{height:460px;} } .showcase-map{position:absolute;inset:0;} .showcase-map-unavailable{ position:absolute;inset:0;z-index:5; display:flex;align-items:center;justify-content:center; text-align:center;padding:var(--s6); background:var(--panel); } .showcase-map-unavailable p{font-size:15px;line-height:1.6;color:var(--text-2);max-width:20rem;} .showcase-map-loading{ position:absolute;inset:0;z-index:6; display:flex;align-items:center;justify-content:center; background:var(--map-l-veil); opacity:0;pointer-events:none; transition:opacity var(--state) var(--ease-state); } .showcase-map-loading.show{opacity:1;} .showcase-map-loading span{ display:inline-flex;align-items:center;gap:var(--s3); border-radius:var(--r-pill);padding:var(--s3) var(--s5); background:var(--panel); box-shadow:var(--sh-1); font-family:var(--mono);font-size:13px;color:var(--text-2); } /* Bu halka BİR DURUM GÖSTERGESİDİR, süs değil: reduced-motion açıkken de dönmeye devam eder. Dondurmak, sahibin istediği "yükleniyor durumu"nu yalana çevirirdi. */ .showcase-map-loading span::before{ content:"";width:13px;height:13px;border-radius:var(--r-pill);flex-shrink:0; border:2px solid var(--line);border-top-color:var(--cyan); animation:showcaseSpin .7s linear infinite; } @keyframes showcaseSpin{to{transform:rotate(360deg);}} /* Ölçüm satırı: mono, tabular, büyük. ÜSTTEKİ SAÇ TELİ KALKTI: başlığın altındaki ve buradaki iki çizgi, panelin içini üst üste yığılmış üç kutuya bölüyordu. Ayrımı artık plakanın kendi çerçevesi ve boşluk yapıyor — sayfanın "kutu yok" kuralının panel içindeki karşılığı. */ .showcase-panel-stats{ display:flex;gap:var(--s8); padding:var(--s5) 0 var(--s1); } /* Ölçüm rakamı kaydı, sayfanın geri kalanıyla aynı: mono + tabular + 380. Bu üç değer sayfadaki en büyük rakamlar ve tek başlarına farklı bir kayıttaydı (ağırlık 450), yani "her ölçülmüş rakam tek kayıtta" kuralının tek istisnasıydılar. 0 ile O'yu ayıran eğik kesik Geist Mono'nun varsayılan `zero` çiziminden geliyor, bir OpenType özelliğinden değil — bkz. main.css `.num`. Bir koordinatta bu ayrım gerçekten önemli, ve bu yüzden sayan rakamlar sans'a taşındı: kesikli sıfır artık tek başına "bu ölçüldü" demek. */ .showcase-panel-stats .stat-value{ display:block; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:clamp(1.5rem, 2.4vw, 2rem);font-weight:380; letter-spacing:-.02em;color:var(--text); } /* MotoMap tarafındaki değer marka mavisiyle vurgulanır — ama METİN mavisi (--cyan), dolgu mavisi değil: kontrast oranı için. */ .showcase-panel.is-motomap .stat-value:not(.is-empty){color:var(--cyan);} .showcase-panel-stats .stat-value.is-empty{color:var(--text-3);} .showcase-panel-stats .stat-label{ display:block;margin-top:var(--s2); font-family:var(--font);font-size:12px;line-height:16px;font-weight:500; letter-spacing:0;color:var(--text-3); } .showcase-panel-stats .stat-label::first-letter{text-transform:uppercase;} /* Neon rota tuvali: harita karolarının üstünde, etkileşimi engellemez. */ .showcase-map .neon-route-canvas{position:absolute;left:0;top:0;pointer-events:none;} /* Leaflet: açık OSM karoları koyu temaya çevrilir. Filtre YALNIZCA karo katmanına uygulanır; rota overlay'i ve atıf metni etkilenmez. DEĞERLER YENİDEN AYARLANDI. Öncekiler — invert(1) hue-rotate(196deg) saturate(.28) brightness(.82) contrast(.92) — ekranda sütlü, açık gri bir yüzey üretiyordu: yeşil park lekeleri ve beyazımsı yollar duruyordu, panel zeminin üstünde YAPIŞTIRILMIŞ bir ekran görüntüsü gibi okunuyordu. Ölçüm bölümünün en çok baktırılan yeri burası ve "daha profesyonel, daha smooth" isteğinin karşılığı önce burada. Yeni kayıt: doygunluk neredeyse sıfıra iner (harita RENK taşımaz, rota taşır — mavi görmek bir şey demek), parlaklık yarıya iner, kontrast biraz açılır ki yol ağı okunur kalsın. Sonuç, üzerinde neon rotanın gerçekten parladığı koyu bir alet yüzeyi. */ .showcase-map.leaflet-container{background:var(--map-l-ground);font-family:var(--font);} /* v8f: altlık artık AÇIK (Esri World Light Gray); karartma/invert filtreleri kalktı, karo olduğu gibi. */ .showcase-map .leaflet-tile{filter:none;} /* ── UYDU ALTLIĞI ── Yukarıdaki filtre AÇIK BİR ÇİZİM HARİTASINI koyulaştırmak için var ve `invert(1)` içeriyor. Uydu bir FOTOĞRAF: invert edilince gökyüzü turuncu, deniz kahverengi çıkıyor. O yüzden iki katmanın filtresi ayrı, ve ayrım karo kabındaki sınıftan geliyor (showcase.js, `className`). Fotoğraf karartılıyor ama SIFIRLANMIYOR: sayfanın tezi karanlık bir yol, ama arazi görünmezse uydunun bir anlamı kalmaz. Doygunluk da kısılıyor çünkü tam renkli bir uydu görüntüsünün üstünde MotoMap mavisi vurgu olmaktan çıkıp kalabalığın bir parçası oluyordu. */ /* Uydu katmanlarının (.sat-base/.sat-labels) kuralları v8f'te kalktı. */ /* KENAR VİNYETİ KALDIRILDI ve nedeni tam olarak sahibin şikâyeti. Burada dört kenardan içeri eriyen bir karartma vardı; işi, karo katmanının panel kenarında SERT bitmesini gizlemekti. Sert kenarı gizlemek onu düzeltmez — yumuşak bir vinyet, altında ne olduğu belirsiz bir sınır bırakır ve "ai slop" dedirten şey tam olarak budur. Sert kenar artık gizlenmiyor, KULLANILIYOR: plakanın kendi --edge-lit çerçevesi o sınırı bilinçli bir kenara çeviriyor ve şasinin 16px iç boşluğu haritayı panelin içine oturtuyor. Karartmanın ikinci işi olan "atıf okunur kalsın" da kayıp değil: atıf şeridinin kendi zemini zaten var (aşağıda). */ /* ATIF ESRİ'NİN ŞARTI — kaldırılmaz, kısaltılmaz. Yapılan tek şey sesini kısmak: plakanın alt kenarına yaslanmış, kendi zeminini taşıyan, mono ve küçük bir şerit. Köşesi de plakanınki gibi keskin; yuvarlatılmış bir atıf kutusu keskin bir plakanın içinde yamalı duruyordu. */ .showcase-map .leaflet-control-attribution{ background:var(--map-l-attr);color:var(--map-l-label); font-family:var(--font);font-size:10px;line-height:14px;letter-spacing:0; border-radius:var(--r-0); padding:2px var(--s2); /* Esri'nin atıf dizesi uzun ve KISALTILAMAZ — kaynağın görünmesi kullanım şartı. Uzun dize dar panelde iki satıra taşıp haritanın alt kenarına biniyordu. Çözüm dizeyi budamak değil, şeridi tek satırda tutup taşan kısmı kaydırılabilir bırakmak: şart yerine geliyor, kadraj bozulmuyor. */ max-width:100%; white-space:nowrap; overflow-x:auto; scrollbar-width:none; } .showcase-map .leaflet-control-attribution::-webkit-scrollbar{display:none;} .showcase-map .leaflet-control-attribution a{color:var(--paper-text);} /* Yakınlaştırma kutusu KALIYOR ama sesini kısıyor: bu paneller gezilecek bir harita değil, okunacak bir ölçüm. Kontrol gerektiğinde orada — üzerine gelinince görünür hâle geliyor — ama boştayken kadrajın köşesinde iki parlak kutu olarak durmuyor. Gizlenmiyor, SOLUYOR: gizlemek klavyeyle erişilebilirliği de götürürdü, odaklandığında yine tam görünür. */ .showcase-map .leaflet-control-zoom{ border:none;box-shadow:none; /* Leaflet'in kendi 10px kenar payı yerine ölçeğin değeri: kontrol, plakanın köşesine sayfanın kendi boşluk kümesiyle yaslanıyor. */ margin:var(--s2); opacity:0; transition:opacity var(--ui) var(--ease-state); } .showcase-map-wrap:hover .leaflet-control-zoom, .showcase-map .leaflet-control-zoom:focus-within{opacity:1;} /* Kontrol de plakayla aynı malzemeden: keskin köşe, opak --edge-lit saç teli, bulanıklık YOK. `backdrop-filter` kalktı — arkasındaki uydu fotoğrafını bulandırmak kontrolü "cam bir düğme"ye çeviriyordu ve panelin geri kalanında hiçbir cam yüzey yok. */ .showcase-map .leaflet-control-zoom a{ width:28px;height:28px;line-height:28px; background:var(--map-l-attr);color:var(--paper-text); border:0; border-radius:4px; } .showcase-map .leaflet-control-zoom a + a{border-top:0;} .showcase-map .leaflet-control-zoom a:hover{background:var(--map-l-road);color:var(--paper-ink);} /* Ölçüt medya sorgusu değil bayrak: karar :root[data-motion] üzerinde (v9: varsayılan açık; bayrak QA için duruyor). Özgüllük :hover kuralının üstünde kalıyor. */ :root[data-motion="off"] .showcase-map .leaflet-control-zoom{opacity:1;transition:none;} /* Google Maps JS atıf/kontrolleri okunur kalmalı — atıf gizlenmez (Google'ın şartları gerektiriyor). */ .showcase-map .gm-style{font-family:var(--font)!important;} /* KORİDOR ANAHTARI — panellerin üstünde iki gerçek düğme. JS koşmazsa hiç görünmez: işlevsiz iki düğme bırakmaktansa hiç göstermemek doğru, çünkü altındaki paneller JS olmadan da kayıtlı ölçümü gösteremiyor. `.is-live` sınıfını showcase.js koyuyor. */ .showcase-switch{ display:none; gap:4px; margin-top:clamp(var(--s7), 7vh, var(--s8)); padding:4px; /* min-width:0 ZORUNLU. Bu bir ızgara öğesi ve `width:max-content` ızgara rayının en küçük içerik boyuna katılıyor: iki uzun yer adı yan yana 415px istiyordu ve 360px'lik ekranda BÜTÜN bölümü 415px'e şişiriyordu (ölçüldü — taşan öğe anahtar değil, onu içeren .open-measure ızgarasıydı). min-width:0 rayın otomatik alt sınırını kaldırıyor, max-width:100% de kutuyu kadraja kilitliyor. */ width:max-content;max-width:100%;min-width:0; justify-self:start; /* v8f: kenar çizgisi yerine yumuşak dolgu; seçili seçenek hafif gölgeyle yükseliyor. */ border:0;background:var(--fill); border-radius:var(--r-pill); } /* Dar ekranda tam genişlik segmentli kontrol: iki uzun yer adı yan yana sığmıyor ve max-content orada bir çözüm değil, sorunun kendisi. */ @media(max-width:560px){ .showcase-switch{width:100%;} .showcase-switch__opt{flex:1 1 0;text-align:center;padding-inline:var(--s3);} } .showcase-switch.is-live{display:flex;flex-wrap:wrap;} .showcase-switch__opt{ padding:9px var(--s5); border-radius:var(--r-pill); font-family:var(--font);font-size:13px;line-height:18px;font-weight:500; letter-spacing:0; color:var(--text-3); transition:color var(--ui) var(--ease-state), background-color var(--ui) var(--ease-state), box-shadow var(--ui) var(--ease-state); } .showcase-switch__opt.is-on{background:var(--panel);color:var(--text);box-shadow:var(--sh-1);} @media (hover:hover) and (pointer:fine){ .showcase-switch__opt:not(.is-on):hover{color:var(--text-2);} } .showcase-switch__opt:active{transform:scale(.97);} /* Anahtar varken ızgaranın kendi üst boşluğu iki kez uygulanmasın. */ .showcase-switch.is-live + .showcase-grid{margin-top:var(--s4);} /* ── ÜÇ MODUN ANAHTARI ── YÜKSEKLİK PROFİLİ BURADAN KALKTI (sahibin kararı: "bu yükseklik şeylerine plota gerek yok"). Veri ve üretici betik depoda duruyor, yalnızca sayfadan çıktı. Yerinde duran şey bir grafik değil bir TABLO: haritadaki üç çizginin ne olduğunu ve neyi ölçtüğünü yazan satırlar. Kart değil, kutu değil — hizalanmış sütunlar ve saç teli ayraçlar. Rakamlar mono ve tabular, yani aynı sütundaki basamaklar gerçekten alt alta düşüyor. Blok yalnızca üç mod kaydı okunduğunda `hidden` kalkar; kayıt okunamazsa burada hiçbir şey durmaz. */ .showcase-modekey{ margin-top:var(--s4); border-top:1px solid var(--line-soft); } .showcase-modekey__row{ display:grid; /* Altı hücre, altı sütun: örnek çizgi · ad · varyant (boşluğu alan) · mesafe · ham süre · standartla ortak yol. `auto` sütunlar en geniş içeriğe göre boyutlanır, yani üç satırın rakamları hizalı çıkar. */ grid-template-columns:18px auto minmax(0,1fr) auto auto auto; align-items:baseline; column-gap:var(--s4);row-gap:var(--s1); padding:var(--s3) 0; border-bottom:1px solid var(--line-soft); } .showcase-modekey__row:last-of-type{border-bottom:0;} /* Örnek çizgi haritadaki çizginin ta kendisi: aynı renk, aynı desen. Renk `currentColor` üzerinden geliyor ve o da jetondan — desen yinelenen bir degrade, yani ikinci bir renk değişmezi yok. */ .showcase-modekey__mark{ width:18px;height:2px;align-self:center; background:currentColor; } .showcase-modekey__mark.is-standart{color:var(--mode-standart);} .showcase-modekey__mark.is-viraj_keyfi{color:var(--mode-viraj);} .showcase-modekey__mark.is-guvenli{color:var(--mode-guvenli);} .showcase-modekey__mark.is-dashed{ background:repeating-linear-gradient(to right, currentColor 0 6px, transparent 6px 11px); } .showcase-modekey__mark.is-dotted{ background:repeating-linear-gradient(to right, currentColor 0 2px, transparent 2px 6px); } .showcase-modekey__name{font-size:14px;line-height:20px;font-weight:500;color:var(--text);} .showcase-modekey__name::first-letter{text-transform:uppercase;} .showcase-modekey__variant{ font-family:var(--font);font-size:11px;line-height:14px; letter-spacing:0;color:var(--text-3); } .showcase-modekey__variant::first-letter{text-transform:uppercase;} /* Rakamların kabı geniş ekranda GÖRÜNMEZ: ızgara üç hücreyi doğrudan görsün ve satırlar arası sütun hizası bozulmasın diye. Kap yalnızca dar ekranda gerçek bir kutuya dönüyor (aşağıdaki medya sorgusu). */ .showcase-modekey__nums{display:contents;} .showcase-modekey__num{ font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:13px;line-height:18px;color:var(--text-2); text-align:right;white-space:nowrap; } .showcase-modekey__num.is-soft{color:var(--text-3);} /* İki koridor alternatifinin birbiriyle ortak yolu. Tek satır, en sönük ton: ekrandaki tek oran %0,2 kalsaydı "üçü de tamamen ayrı yollar" gibi okunurdu. */ .showcase-modekey__foot{ padding-top:var(--s3); font-family:var(--font);font-size:12px;line-height:16px; letter-spacing:0;color:var(--text-3); } /* Dar ekranda altı sütun sığmaz ve ızgarayı zorlamak yatay taşma üretirdi. Satır iki sütuna iner: örnek çizgi solda, ad ve varyant üst satırda, üç rakam kendi satırında ve ADIN HİZASINDA — asıl sorun buydu, rakamlar mod adının içine akıyordu. */ @media(max-width:640px){ .showcase-modekey__row{ grid-template-columns:18px minmax(0,1fr) auto; column-gap:var(--s3);row-gap:var(--s2); } .showcase-modekey__mark{grid-column:1;grid-row:1;} .showcase-modekey__name{grid-column:2;grid-row:1;} .showcase-modekey__variant{grid-column:3;grid-row:1;text-align:right;} .showcase-modekey__nums{ display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4); grid-column:2 / -1;grid-row:2; } .showcase-modekey__num{text-align:left;} }