/* ========================================================================== * TurnuvaGo — kanonik design-token kaynağı (docs/DESIGN_SYSTEM.md §9) * * v6.171.0 — UX/IA Faz 4B: SEMANTİK TOKEN TEMELİ. * * Tek gerçeklik yönü: * semantik token (--tg-brand-*, --tg-action-*, --tg-nav-*, --tg-status-*…) * → uyumluluk alias'ları (--tg-color-*, --v3-*, --navy/--blue/…) * Yeni CSS yalnız semantik aileyi kullanır; alias'lar mevcut kuralların * kırılmaması içindir ve Faz 6'da ekran ekran eritilir (DS-044). * * Tema motoru (app/theme_helpers.php theme_derive_css()) tokens.css'ten * SONRA yüklenen generated/theme-N.css ile yalnız semantik token'ları ve * uyumluluk için --tg-color-* ailesini override eder. Tema tarafından * DEĞİŞTİRİLEMEYEN token'lar (dokunma hedefi, yazı ölçeği, boşluk, radius, * gölge, kırılım) tasarım standardıdır (DS-010/DS-012). * * Brand ≠ Action (UXA-140): marka laciverti kimlik yüzeylerinde (menü, * marka), parlak mavi aksiyon rengi buton/bağlantı/odak yüzeylerinde. * ========================================================================== */ :root { /* ---------- Brand ---------- */ --tg-brand-primary: #082b50; /* Türetilmiş (tema motoru theme_contrast_text_color() ile üretir; burada varsayılan marka laciverti için fail-safe değer). Kullanıcı seçmez. */ --tg-brand-primary-text: #ffffff; --tg-brand-secondary: #0b466f; --tg-brand-accent: #f07800; /* 2026-10-19 — Yerleşik TurnuvaGo yazısındaki "Go" (logodaki GO ile aynı turuncu). Marka sabitidir, tema vurgusu DEĞİLDİR: tema motoru ve turnuva paleti bu token'ı YAZMAZ (`--tg-brand-accent` temayla değişmeye devam eder). Tek tüketici: foundation.css `.tg-brand-copy--tgo` kuralı (UX_ARCHITECTURE §15.43). */ --tg-brand-tgo-accent: #f07800; /* SPONSOR-ALTBILGI (v6.394.191, UX_ARCHITECTURE §15.62 md. 7) — public marka altbilgisindeki «Turnuva» sözcüğü: açık sayfa zemininde marka laciverti (#082b50), koyu zeminde beyaz. TÜRETİLMİŞTİR (kullanıcı seçmez): tema motoru kaydedilen temaya açık değeri yazar (theme_semantic_tokens()). GÜVENLİ VARSAYILAN (v6.394.192): bu token'ı taşımayan, ÖNCEDEN kaydedilmiş temada tema yeniden kaydedilmeden okunurluk korunur — bu :root bloğunun hemen ardındaki @supports bloğu aynı kuralı sayfa zemininden (--tg-page-bg) hesaplar; göreli renk + calc() desteklemeyen tarayıcıda temanın kendi metin rengi (--tg-text) kullanılır (her zeminde okunur). Kullanıcının tema ayarı otomatik DEĞİŞTİRİLMEZ. «GO» rengi ayrı ve sabittir (--tg-brand-tgo-accent). */ --tg-brand-tgo-word: var(--tg-text); /* ---------- Surface ---------- */ --tg-page-bg: #f4f7fb; --tg-surface: #ffffff; --tg-surface-soft: #f8fafc; /* v6.274.2 — MAÇ YÜZEYİ (genel amaçlı semantic surface). Maç/karşılaşma kartlarının kimlik yüzeyi. `--tg-surface-soft` bu iş için fazla nötr kalıyordu (kullanıcı kartı beyaz algılıyordu), durum renkleri ise DURUM anlatır — kart kimliği değildir. Değer aksiyon rengiyle karıştırılarak türetilir, böylece tema değiştiğinde kart da birlikte döner ve sabit bir hex çakılmaz. Durum bilgisi AYRICA semantic rozette taşınmaya devam eder. */ /* v6.274.24 — CANLI MAÇ KİMLİĞİ: GÜÇLÜ + SOFT AYNI AİLEDEN. Skorbord bu ailenin GÜÇLÜ yüzeyidir (app.css bugün `--tg-brand-primary` ile aynı lacivert değeri hardcoded taşır); Maç Olayları kartı ise AYNI ailenin soft yüzeyi. `color-mix` sayesinde tema markayı değiştirdiğinde ikisi BİRLİKTE kayar — sayfaya özel mavi ya da ayrı hex YOK. Bu aile format (Grup/Lig/Eleme) rengi DEĞİLDİR; canlı maç kimliğidir. */ --tg-surface-live-soft: color-mix(in srgb, var(--tg-brand-primary) 7%, var(--tg-surface)); --tg-surface-live-border: color-mix(in srgb, var(--tg-brand-primary) 18%, var(--tg-border)); --tg-surface-live-accent: color-mix(in srgb, var(--tg-brand-primary) 55%, var(--tg-surface)); --tg-surface-match: color-mix(in srgb, var(--tg-action-primary) 7%, var(--tg-surface)); --tg-surface-match-border: color-mix(in srgb, var(--tg-action-primary) 18%, var(--tg-border)); /* ---------- Text ---------- */ --tg-text: #10213a; --tg-text-muted: #718096; --tg-text-inverse: #ffffff; /* ---------- Border ---------- */ --tg-border: #e3eaf2; --tg-border-strong: #dbe4ef; /* ---------- Action (parlak mavi; Brand ≠ Action) ---------- */ --tg-action-primary: #1769df; --tg-action-primary-hover: #115fc8; --tg-action-primary-text: #ffffff; --tg-action-primary-soft: #eaf3ff; --tg-action-secondary-bg: var(--tg-surface); --tg-action-secondary-border: var(--tg-border-strong); --tg-action-secondary-text: var(--tg-text); /* ── Üst bar aksiyon ölçüsü (PD-UX14, PD-UX15'te ayrıldı) ── Üst bardaki ÜÇ aksiyon (sayfa yardımı, bildirim, profil) tek ölçü kaynağını paylaşır. PD-UX15'ten beri GÖRÜNÜR yüzey ile DOKUNMA alanı ayrı iki tokendır: kare yaklaşık %25 küçüldü (44 → 33) ama tıklanabilir alan dokunma tabanında (44px) KALDI — erişilebilirlik görsel yoğunluk için feda edilmez. */ --tg-topbar-action-size: 33px; --tg-topbar-action-hit: var(--tg-touch-min); /* Ust bar aksiyonlarinin arasindaki bosluk pay -- gorunmez dokunma katmani bu kadar tasar; komsu katmanla CAKISMAZ (bkz. foundation.css). */ --tg-topbar-action-gap: 3px; --tg-topbar-action-radius: var(--tg-radius-md); /* ── Context surface (PD-UX13) ── Turnuva içi yönetim ekranlarının ÜST BAĞLAM YÜZEYİ: sayfa özet başlığı (`tg_page_summary()`) ve takım detayının hero'su AYNI koyu mavi aileyi bu tek kaynaktan tüketir. Aynı yüzey rengi ayrı CSS dosyalarında hex/rgb/bağımsız color-mix ile TEKRAR ÜRETİLMEZ; marka değişirse hepsi tek yerden uyar. */ --tg-surface-context: var(--tg-brand-primary); --tg-surface-context-text: var(--tg-brand-primary-text); --tg-surface-context-border: color-mix(in srgb, var(--tg-brand-secondary) 65%, transparent); --tg-surface-context-soft: color-mix(in srgb, var(--tg-surface-context-text) 12%, transparent); --tg-surface-context-line: color-mix(in srgb, var(--tg-surface-context-text) 22%, transparent); --tg-surface-context-muted: color-mix(in srgb, var(--tg-surface-context-text) 78%, transparent); --tg-surface-context-accent: var(--tg-action-primary-soft); --tg-action-danger: #b42318; --tg-action-danger-soft: #fdeaea; --tg-action-danger-text: #ffffff; --tg-focus-ring: #2b78e4; /* ---------- Navigation (sidebar + drawer + platform menü) ---------- */ --tg-nav-bg: #082b50; --tg-nav-bg-gradient: linear-gradient(180deg, color-mix(in srgb, var(--tg-nav-bg) 88%, black 12%), var(--tg-brand-secondary)); --tg-nav-text: #ffffff; --tg-nav-text-muted: rgba(255, 255, 255, .62); --tg-nav-hover-bg: rgba(255, 255, 255, .08); --tg-nav-active-bg: #f2c14e; --tg-nav-active-text: #102b47; --tg-nav-border: rgba(255, 255, 255, .14); --tg-nav-surface: rgba(255, 255, 255, .06); --tg-nav-accent: #ffd968; /* ---------- Topbar ---------- */ --tg-topbar-bg: #ffffff; --tg-topbar-text: var(--tg-text); /* ---------- Status ---------- */ --tg-status-success: #16794a; --tg-status-success-soft: #e8f8ef; --tg-status-warning: #b45309; --tg-status-warning-soft: #fff4df; --tg-status-danger: #b42318; --tg-status-danger-soft: #fdeaea; --tg-status-info: #1769df; --tg-status-info-soft: #eaf3ff; --tg-status-neutral: #516273; --tg-status-neutral-soft: #edf2f7; /* v6.172.0 — Faz 5: kategori ayrımı (durum değil) için mor vurgu. Hızlı işlem kartlarının ayrışması bu tonla yapılır; renk dekorasyon değil, ayrıştırmadır (UXA-152). */ --tg-status-special: #6d4bc4; --tg-status-special-soft: #f1ecfb; /* Canlı Maç UX (LM-1) — disiplin KARTI dolguları. Yeni renk sistemi DEĞİL: oyuncu/istatistik kart görsellerinin (mobile-competition.css, public-tournament.css `.mini-card`) zaten kullandığı iki değer tek isimde toplandı; canonical maç olayı ikonları (`.tg-event-icon`) bunu okur. Kart rengi spor kuralının rengidir, tema rengi değildir. */ --tg-card-yellow: #f8c91c; --tg-card-red: #e33c45; /* ---------- Team card palette (v6.188.0 — DS-082) ---------- Takımlar ekranı kartlarının 5 SUNUM slotu. Durum rengi değildir, takımın domain rengi (teams.primary_color) değildir. Tema Yönetimi → Takım Kartı Paleti (config/theme_defaults.php team_card_N) ile BİREBİR aynı varsayılanlar; tint/border/hover kart CSS'inde türer. */ /* DS-088 — Semantik bölüm tema rolleri (fail-safe varsayılan; canonical kaynak config/theme_defaults.php `sections` + `section_palettes`, tema motoru theme-N.css ile override eder). Bölüm kimliği ≠ durum rengi. */ --tg-section-match-accent: #16794a; --tg-section-match-soft: #e8f8ef; --tg-section-match-text: #ffffff; --tg-section-discipline-accent: #b45309; --tg-section-discipline-soft: #fff4df; --tg-section-discipline-text: #ffffff; --tg-section-statistics-accent: #6d4bc4; --tg-section-statistics-soft: #f1ecfb; --tg-section-statistics-text: #ffffff; --tg-section-roster-accent: #1769df; --tg-section-roster-soft: #eaf3ff; --tg-section-roster-text: #ffffff; /* DS-090 — Yarışma formatı kimlik rolleri (Basit Mod'daki 4 sunum ailesi). Aynı fail-safe kural: canonical kaynak config/theme_defaults.php, tema motoru theme-N.css ile override eder. Format kimliği ≠ durum rengi; `format-knockout` accent'i TurnuvaGo altın ailesinin okunabilir koyu tonudur (beyaza karşı 5.37:1) — pastel sarı yalnız yüzeydir. */ --tg-section-format-league-accent: #1769df; --tg-section-format-league-soft: #eaf3ff; --tg-section-format-league-text: #ffffff; --tg-section-format-groups-accent: #16794a; --tg-section-format-groups-soft: #e8f8ef; --tg-section-format-groups-text: #ffffff; --tg-section-format-groups-knockout-accent: #b45309; --tg-section-format-groups-knockout-soft: #fff4df; --tg-section-format-groups-knockout-text: #ffffff; --tg-section-format-league-knockout-accent: #6d4bc4; --tg-section-format-league-knockout-soft: #f1ecfb; --tg-section-format-league-knockout-text: #ffffff; --tg-section-format-knockout-accent: #8a6410; --tg-section-format-knockout-soft: #fbf3dd; --tg-section-format-knockout-text: #ffffff; --tg-team-card-1: #2563eb; --tg-team-card-2: #4f46e5; --tg-team-card-3: #0891b2; --tg-team-card-4: #059669; --tg-team-card-5: #9333ea; /* ---------- Typography (sabit tasarım ölçeği) ---------- */ --tg-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --tg-font-xs: 12px; --tg-font-sm: 13px; --tg-font-md: 14px; --tg-font-lg: 16px; --tg-font-xl: 20px; --tg-font-2xl: 24px; --tg-font-weight-bold: 700; --tg-font-weight-black: 800; --tg-line-height: 1.45; /* ---------- Spacing ---------- */ --tg-space-1: 4px; --tg-space-2: 8px; --tg-space-3: 12px; --tg-space-4: 16px; --tg-space-5: 20px; --tg-space-6: 24px; --tg-space-8: 32px; --tg-page-gutter: 16px; --tg-mobile-gutter: 8px; /* ---------- Shell (masaüstü kabuk genişliği · DS-154) ---------- MASAUSTU-GENISLIK-KABUK (2026-11-01, UX_ARCHITECTURE §15.62 md. 8 / md. 11): turnuva yönetimi, Hesabım ve Platform Yönetimi kabuklarında yan menü + ana içerik TEK BÜTÜN olarak ortalanır. Bu değer menü + içerik + iç dolgular DAHİL toplam kabuğun azami genişliğidir — içerik genişliği DEĞİLDİR (içerik = toplam − menü − mevcut sol/sağ dolgu). Kullanıcı düzeltmesi (md. 11): toplam = public ana içerik kabının genişliği (app.css `.container` 1100 px; kullanıcının açık public sayfasında canlı ölçüldü). Önceki 1500 px SUPERSEDED. Tüketiciler yalnız kalıcı yan menü aralığında (`shell.css` ≥ 761 px, `platform-admin.css` ≥ 992 px); çekmece / mobil etkilenmez. Tema tarafından YAZILMAZ (DS-014). Public `.container` değeri değişirse bu değer de aynı kapsamda gözden geçirilir (sözleşme testi). */ --tg-shell-max: 1100px; /* ---------- Canonical tabs (PD-59 → PD-60 → PD-61 · renkler SEKME-TEMA-YONETIMI) ---------- Kullanıcı tarafından sabitlenmiş kesin ölçüler; mobilde DEĞİŞMEZ. Geometri: dış 44 = 1px çizgi + 1px iç boşluk + 40px görsel sekme + 1 + 1. Dokunma hedefi 44px: sekmenin şeffaf `::before` alanı çubuğun tam yüksekliğine uzanır (bkz. foundation.css). Aşağıdaki ölçüler tema tarafından YAZILMAZ (sabit tasarım standardı). */ --tg-tabbar-height: 44px; --tg-tab-height: 40px; --tg-tab-padding-x: 12px; --tg-tab-font-size: 14px; --tg-tab-section-gap: 12px; /* Seçili alt / üst çizgi kalınlığı (Alt çizgili · Üst çizgili görünüm). */ --tg-tab-active-line-width: 3px; /* ISTATISTIK-KAPSAM-ALT-SEKME-INCELTME (2026-10-30) — ALT SEVİYE (`.tg-tabbar-sub`) görsel ölçüleri: görünen sekme 32px (ana 40px), seçili çizgi 2px (ana 3px). Çubuk ve dokunma alanı 44px kalır (`--tg-tabbar-height`); şeffaf `::before` 32px sekmeden çubuğun iç boşluğu dahil tam 44px'e uzanır, kırpılmaz. Tema tarafından YAZILMAZ (sabit ölçü). SUPERSEDED: ANA-ALT-SEKME-AYRIMI'nın "alt seviyede 40px görsel sekme" ölçüsü. */ --tg-subtab-height: 32px; --tg-subtab-active-line-width: 2px; /* SEKME-TEMA-YONETIMI (2026-10-30) — GÖRÜNÜM + RENK token'ları. Tema Yönetimi → Sekmeler ayarından app/theme_helpers.php theme_tab_tokens() ile DÜZ DEĞER olarak üretilir ve tema CSS'inde (generated/theme-N.css) bu varsayılanları ezer. Buradaki değerler varsayılan görünümün (Yükseltilmiş, renkler "Temadan", Klasik tema) birebir aynısıdır — hiç tema kaydı olmayan kurulum içindir. `var()` YOK: turnuva paleti (`:root{--tg-brand-primary}`) sekmeleri değiştiremez. Köşe yalnız Hap görünümünde tam yuvarlaktır; çizgi konumu Alt / Üst çizgili. SUPERSEDED: PD-75 `color-mix(var(--tg-brand-primary) …)` tanımları ve %32 aktif kenar (#b0bbc7, kart / şerit üzerinde 3 : 1 altı). */ --tg-tabbar-radius: 12px; --tg-tab-radius: 9px; --tg-tabbar-bg: #e6eaee; --tg-tabbar-border: #d3d9e0; --tg-tab-text: #37475f; --tg-tab-hover-bg: #f5f7f8; --tg-tab-hover-text: #102b47; --tg-tab-active-bg: #ffffff; --tg-tab-active-text: #102b47; --tg-tab-active-border: #6b8096; --tg-tab-active-border-strong: transparent; --tg-tab-active-line: transparent; --tg-tab-active-line-position: bottom; --tg-tab-active-elevation: rgba(23, 50, 78, .055); --tg-tab-focus: #2b78e4; --tg-tab-active-focus: #2b78e4; /* ANA-ALT-SEKME-AYRIMI (2026-10-30) — ALT SEVİYE çubuk (`.tg-tabbar.tg-tabbar-sub`: aşama ve içerik türü gezinmesi) token'ları. Ayrı renk ayarı YOK: aynı üç temel renkten theme_tab_tokens() ile türetilir, tema CSS'inde düz değer olarak ezilir. Buradaki değerler varsayılanın (Yükseltilmiş, Temadan, Klasik tema) alt karşılığıdır: şeritsiz, seçili yüzey kart + 1px halka + hafif gölge, vurgu renkli seçili yazı. `var()` YOK (turnuva paleti etkilemez). */ --tg-subtab-radius: 9px; --tg-subtab-track: transparent; --tg-subtab-text: #37475f; --tg-subtab-hover-bg: #f0f2f5; --tg-subtab-hover-text: #102b47; --tg-subtab-active-bg: #ffffff; --tg-subtab-active-text: #082b50; --tg-subtab-active-border: #75889d; --tg-subtab-active-line: transparent; --tg-subtab-active-line-position: bottom; --tg-subtab-active-elevation: rgba(23, 50, 78, .055); --tg-subtab-focus: #2b78e4; --tg-subtab-active-focus: #2b78e4; /* ---------- Radius ---------- */ --tg-radius-sm: 8px; --tg-radius-md: 12px; --tg-radius-lg: 16px; --tg-radius-pill: 999px; /* ---------- Shadow ---------- */ --tg-shadow-card: 0 4px 14px rgba(23, 50, 78, .055); --tg-shadow-card-hover: 0 10px 24px rgba(23, 50, 78, .10); --tg-shadow-overlay: 0 18px 45px rgba(2, 16, 31, .28); /* ---------- Accessibility / touch (TEMA-DIŞI, sabit — DS-010) ---------- */ --tg-touch-min: 44px; --tg-control-height: 44px; /* Kompakt kontrol yüksekliği (button.compact — LAB-BTN-H, Wave 2). Veri yoğun yüzeyler (tablo satır aksiyonu, Platform Yönetimi) için GÖRÜNEN kutu; --tg-touch-min'in yerine GEÇMEZ. Dar ekranda görünen kutu büyür ama 44px'e ulaşmaz; aradaki farkı isabet alanı kapatır (foundation.css `.tg-btn-sm` bandı). */ --tg-control-height-compact: 34px; --tg-control-height-compact-mobile: 40px; --tg-input-font-mobile: 16px; /* ========================================================== * Uyumluluk katmanı — yalnız alias. Yeni kuralda KULLANILMAZ. * ========================================================== */ /* Faz 5A/5B --tg-color-* ailesi: tema motoru bunları da yazmaya devam * eder (eski generated CSS ve turnuva paleti inline override'ı için). */ --tg-color-brand-900: var(--tg-brand-primary); --tg-color-brand-800: #0b3a68; --tg-color-brand-700: var(--tg-brand-secondary); --tg-color-accent: var(--tg-brand-accent); --tg-color-page: var(--tg-page-bg); --tg-color-surface: var(--tg-surface); --tg-color-text: var(--tg-text); --tg-color-muted: var(--tg-text-muted); --tg-color-border: var(--tg-border); --tg-color-danger: var(--tg-status-danger); --tg-color-success: var(--tg-status-success); --tg-font-family-base: var(--tg-font-family); /* Faz 5A'da korunan eski değer depoları — tema tarafından değişmez. */ --tg-color-brand-legacy: #102a4c; --tg-color-blue-legacy: #1f5f9f; --tg-color-accent-legacy: #d6a83d; --tg-color-accent-legacy-v3: #f1b92f; --tg-color-page-legacy: #f3f6f9; --tg-color-text-legacy: #1f2937; --tg-color-muted-legacy: #6b7280; --tg-color-border-legacy: #dbe3ec; --tg-color-brand-landing: #0c2744; --tg-color-blue-landing: #155e9b; --tg-color-accent-landing: #d5a82d; --tg-color-text-landing: #102033; /* Legacy (v1/v4 shell) alias'ları — Faz 4B ile semantik tokene bağlandı: * --blue artık AKSİYON rengidir (bağlantı/buton), --navy marka rengi. */ --navy: var(--tg-brand-primary); --blue: var(--tg-action-primary); --gold: var(--tg-color-accent-legacy); --bg: var(--tg-page-bg); --surface: var(--tg-surface); --text: var(--tg-text); --muted: var(--tg-text-muted); --line: var(--tg-border); --danger: var(--tg-status-danger); --success: var(--tg-status-success); /* v3 shell alias'ları */ --v3-navy: var(--tg-brand-primary); --v3-navy-2: var(--tg-color-brand-800); --v3-gold: var(--tg-color-accent-legacy-v3); --v3-bg: var(--tg-page-bg); --v3-card: var(--tg-surface); --v3-text: var(--tg-text); --v3-muted: var(--tg-text-muted); --v3-line: var(--tg-border); } /* SPONSOR-ALTBILGI (v6.394.192) — «Turnuva» sözcüğünün güvenli varsayılanı (yukarıdaki not). Tema motorunun kuralının (theme_semantic_tokens(): beyaz mı #082b50 mi daha yüksek kontrast) CSS karşılığı, doğrusal sRGB'de: L = .2126r + .7152g + .0722b = sayfa zemininin WCAG göreli parlaklığı; L < .227966 (beyaz ↔ #082b50 kontrast eşitliği) ise beyaz, değilse #082b50 (doğrusal .002428 / .024158 / .080220). Motorla birebir aynı seçim tests/Unit/SponsorBannerContractTest'te ızgarayla kilitli. Kaydedilen yeni tema token'ı açıkça yazar ve bunu ezer. */ @supports (color: color(from red srgb-linear calc(r * 1) g b)) { :root { --tg-brand-tgo-word: color(from var(--tg-page-bg) srgb-linear calc(.002428 + .997572 * clamp(0, (.227966 - (.2126 * r + .7152 * g + .0722 * b)) * 10000000, 1)) calc(.024158 + .975842 * clamp(0, (.227966 - (.2126 * r + .7152 * g + .0722 * b)) * 10000000, 1)) calc(.080220 + .919780 * clamp(0, (.227966 - (.2126 * r + .7152 * g + .0722 * b)) * 10000000, 1))); } } @media (max-width: 760px) { :root { --tg-space-4: 14px; --tg-space-5: 18px; --tg-space-6: 20px; --tg-page-gutter: var(--tg-mobile-gutter); /* ── v6.325.0 (F-06) — DOKUNMADA GÖRÜNEN KUTU = DOKUNULAN KUTU ── PD-UX15 görünür kareyi 33px'e indirip eksik alanı kutunun DIŞINA taşan görünmez bir katmanla kapatıyordu. Masaüstünde bu doğru çözümdür; dokunmada DEĞİLDİ: aksiyonların arası yalnız 6px olduğu için 44px'e ulaşan katmanlar KOMŞUNUN üstüne biniyor ve kenar bölgede yanlış aksiyon tetiklenebiliyordu (gerçek tarayıcı hit-test ölçümü). Dar ekranda kare doğrudan dokunma tabanına çıkarılır; böylece isabet alanı flex akışının kendisiyle sınırlı kalır ve iki katmanın çakışması YAPISAL olarak imkânsızlaşır. Taşma payı da bu yüzden sıfırlanır. Masaüstü ölçüsü (33px) DEĞİŞMEZ — bu blok yalnız ≤760px'te geçerlidir. */ --tg-topbar-action-size: var(--tg-touch-min); --tg-topbar-action-gap: 0px; /* v6.388.x — 44px İSABET ALANIDIR, görünür kutu değil. Kutunun kendisi (yukarıdaki size) dokunma tabanında kalır ve komşuyla çakışmaz; görünür kare bu ölçüyle içeride çizilir (mobile-core.css, `::before`). */ --tg-topbar-action-visual: 36px; --tg-topbar-profile-visual: 38px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }