/* GostCategoryIcons — "Ne arıyorsun?" başlığının hemen üstündeki ikon şeridi. Ölçüler token'lardan; ham renk/ölçü yok. Kutu kenarı (--gci-tile) ve öğe boşluğu (--gci-gap) index.tsx'ten gelir, çocuk bileşene miras kalır. */ .cc_n2k0mxzk_lqGuWBl0ng .gci { padding-top: var(--sec-pt); padding-bottom: var(--sec-pb); } /* Şerit EKRANA TAM YAYILIR (kullanıcı isteği): iz kabın tamamı, öğeler kenardan kenara (space-between). Mobil kuralı aşağıda ayrı. */ /* `width: auto` BİLİNÇLİ (eskiden 100%): .g-rail artık kart gölgesine yer açmak için iki yana kenar boşluğu kadar negatif margin + aynı dolguyu alıyor (global.css). Sabit %100 genişlik kutuyu yalnızca sola kaydırıp sağda 2×kenar boşluğu kadar daraltıyordu; auto, blok kutuyu iki yana uzatır ve içerik alanı kabın tam genişliği kalır. */ .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail { width: auto; justify-content: space-between; /* Öğe boşluğu panelden ("Öğeler Arası Boşluk" → --gci-gap). Inline `gap` YOK (index.tsx'teki nota bakın): mobil kuralı bunu ezebilmeli. */ gap: var(--gci-gap, var(--g-space-3)); } /* — RAYIN GERÇEK ESNEK ÖĞESİ HANGİSİ? — Öğeleri IkasComponentRenderer basıyor: `display: contents` bir kök, altında her öğe için ikas'ın kendi kabı ([id="category-icons-N"]) ve çocuğun kapsam sarmalayıcısı, en içte bizim kökümüz (.gcii). Bu kademelerden hangisinin kutu ürettiği (yani rayın esnek öğesi olduğu) yerelde doğrulanamıyor — GostHero'da `> * > *` varsayımı tutmamış, slaytlar yan yana dizilmişti. Bu yüzden öğe ölçüsü .gcii'yi İÇEREN HER kademeye ve .gcii'nin kendisine yazılır: `display: contents` olanlarda esnek özellikler yok sayılır, gerçek esnek öğe ölçüyü alır, içteki bloklar onu doldurur. */ /* ≥768: KUTULAR BÜYÜR, BOŞLUK DARALIR (kullanıcı, 2026-09-24: "iconlar arası mesafe çok, gerekiyorsa iconları büyült"). Öğenin esas genişliği kutu boyu (--gci-tile, panelde "İkon Kutusu Boyutu"); sığmadığında öğeler EŞİT küçülür, boşluk panel değerinde kalır. Yani satır kabı tam doldurur ve öğeler arasında yalnızca öğe boşluğu kalır. Kutu boyu kabı doldurmaya yetmiyorsa eski davranış sürer: öğeler kutu boyunda, artan alan eşit aralıklara dağılır (space-between). 1280 içerikte 7 öğe, boşluk 24px, kutu 160px → (1232 − 6×24) / 7 ≈ 155px; 1024'te ≈119px, 768'de ≈82px. Kutu kare kalır (aspect-ratio), ikon kutunun %54'ü — ikisi de kutunun GERÇEK genişliğinden (değişkenden değil), çünkü öğe küçülebiliyor. */ @media (min-width: 768px) { /* İki AYRI kural (tek seçici listesi değil): :has() tanımayan tarayıcı listenin TAMAMINI atar; ayrık yazınca en azından .gcii kuralı yaşar. */ .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .gcii { flex: 0 1 var(--gci-tile, 88px); min-width: 0; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail :has(.gcii) { flex: 0 1 var(--gci-tile, 88px); min-width: 0; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .gcii__tile { width: 100%; height: auto; aspect-ratio: 1 / 1; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .gcii__icon { width: 54%; height: auto; aspect-ratio: 1 / 1; /* Çizgi kalınlığı ikonla birlikte büyür (viewBox birimi): 1.6'lık çizgi 84px ikonda 5.6px'e çıkıyordu. Görünen kalınlık eski ölçüye (104px kutuda ≈3.7px) yakın tutulur: 768–1023'te 1.4 (≈2.6–3.7px). */ stroke-width: 1.4; } } /* ≥1024: kutu ≈119–155px, ikon ≈64–84px → 1.1 ile ≈2.9–3.9px. */ @media (min-width: 1024px) { .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .gcii__icon { stroke-width: 1.1; } } /* Sıralı çizim gecikmesi: değer öğenin ikas kabına yazılır ([id=…-N] — renderer kökünün doğrudan çocukları, kardeş olan kademe bu), özel değişken .gcii'ye MİRAS kalır (`display: contents` kademeden de geçer). Eskiden `.g-rail > *` yazılıyordu; o kademede yalnızca renderer kökü var, bu yüzden bütün öğeler 0ms alıyor, soldan sağa dalga oluşmuyordu. 12'den fazlası gecikmesiz çizilir. */ .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail > * > *:nth-child(1) { --gci-delay: 0ms; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail > * > *:nth-child(2) { --gci-delay: 60ms; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail > * > *:nth-child(3) { --gci-delay: 120ms; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail > * > *:nth-child(4) { --gci-delay: 180ms; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail > * > *:nth-child(5) { --gci-delay: 240ms; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail > * > *:nth-child(6) { --gci-delay: 300ms; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail > * > *:nth-child(7) { --gci-delay: 360ms; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail > * > *:nth-child(8) { --gci-delay: 420ms; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail > * > *:nth-child(9) { --gci-delay: 480ms; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail > * > *:nth-child(10) { --gci-delay: 540ms; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail > * > *:nth-child(11) { --gci-delay: 600ms; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail > * > *:nth-child(12) { --gci-delay: 660ms; } @media (max-width: 767px) { .cc_n2k0mxzk_lqGuWBl0ng .gci { padding-top: var(--sec-pt-m); padding-bottom: var(--sec-pb-m); } /* MOBİL: öğeler KAYDIRMASIZ, sayfaya tam yerleşir (kullanıcı, 2026-09-24: "sayfaya tam yerleşecek") — dörtlü sıralar, son sıra ortalı (7 öğe → 4 + 3). Şerit kaba sığdığı için kenar boşluğuna uzatılmaz; her öğe kabın çeyreği, kutu 64px, etiket iki satıra sarabilir. `column-gap: 0` artık GERÇEKTEN uygulanıyor: boşluk eskiden rayın üstüne inline yazılıyordu ve bu kuralı eziyordu (çeyrek öğeler + boşluklar %100'ü aşıp üçerli sıralara düşüyordu). */ .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail { --gci-tile: 64px; width: auto; flex-wrap: wrap; justify-content: center; column-gap: 0; row-gap: var(--g-gap); margin-inline: 0; padding-inline: 0; scroll-snap-type: none; } /* Çeyrek genişlik rayın gerçek esnek öğesine (yukarıdaki kademe notu); :has() yedeği için iki ayrı kural. */ .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .gcii { flex: 0 0 25%; min-width: 0; } .cc_n2k0mxzk_lqGuWBl0ng .gci__rail .g-rail :has(.gcii) { flex: 0 0 25%; min-width: 0; } }