/* ========================================================================== * TurnuvaGo — ortak bileşen temeli (docs/DESIGN_SYSTEM.md §10) * * v6.171.0 — UX/IA Faz 4E. tokens.css'ten hemen sonra, HER kabukta * (turnuva v3, hesap/platform Bootstrap, legacy page_header, public) yüklenir. * Yalnız semantik token tüketir; hardcoded renk YOKTUR. * * Aileler: .tg-btn (primary/secondary/ghost/danger/icon) · .tg-card · * .tg-status (success/warning/danger/info/neutral) · .tg-note (kalıcı not) * · .tg-toast (geçici mesaj) · .tg-input/.tg-field/.tg-form-actions · * .tg-page-header · .tg-icon. * * Eski sınıflar (v3-primary-button, platform-primary-button, .btn, .badge, * .v3-panel, .platform-card, .platform-status…) kendi dosyalarında aynı * token'lara bağlandı; burada YENİDEN tanımlanmaz (DS-044: additive). * Mobil 44px / 16px tabanı bu ailelerde yapısal olarak sağlanır (DS-010); * tema bu değerleri DEĞİŞTİREMEZ. * ========================================================================== */ /* ---------- Buttons ---------- */ .tg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tg-control-height);padding:10px 16px;border:1px solid transparent;border-radius:var(--tg-radius-md);font:inherit;font-size:var(--tg-font-md);font-weight:var(--tg-font-weight-black);line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent} .tg-btn:focus-visible{outline:3px solid var(--tg-focus-ring);outline-offset:2px} .tg-btn:disabled,.tg-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none} .tg-btn svg{flex:0 0 auto} .tg-btn-primary{background:var(--tg-action-primary);color:var(--tg-action-primary-text);box-shadow:0 6px 16px color-mix(in srgb,var(--tg-action-primary) 22%,transparent)} .tg-btn-primary:hover{background:var(--tg-action-primary-hover);color:var(--tg-action-primary-text)} .tg-btn-secondary{background:var(--tg-action-secondary-bg);border-color:var(--tg-action-secondary-border);color:var(--tg-action-secondary-text)} .tg-btn-secondary:hover{background:var(--tg-surface-soft);color:var(--tg-action-secondary-text)} .tg-btn-ghost{background:transparent;color:var(--tg-action-primary)} .tg-btn-ghost:hover{background:var(--tg-action-primary-soft);color:var(--tg-action-primary)} .tg-btn-danger{background:var(--tg-action-danger);color:var(--tg-action-danger-text)} .tg-btn-danger:hover{background:color-mix(in srgb,var(--tg-action-danger) 86%,black 14%);color:var(--tg-action-danger-text)} .tg-btn-danger-soft{background:var(--tg-action-danger-soft);color:var(--tg-action-danger)} .tg-btn-icon{width:var(--tg-touch-min);min-width:var(--tg-touch-min);padding:0;border-color:var(--tg-border);background:var(--tg-surface);color:var(--tg-text)} .tg-btn-icon:hover{background:var(--tg-surface-soft)} /* * button.compact — LAB-BTN-H (Wave 2 ürün kararı). * * Kullanıcı "Sıkışık / küçük" adayını seçti: düşük yükseklik, sıkı harf * aralığı, küçük radius. Aday değerleri (34/7-13/12.5px/7px radius) KÖR * KOPYALANMADI; canonical ölçeğe oturtuldu — punto `--tg-font-xs`, radius * `--tg-radius-sm`, yükseklik yeni `--tg-control-height-compact` token'ı. * PARALEL bir compact sınıfı açılmadı: mevcut `.tg-btn-sm` standardın * kendisi oldu (tek production kullanımı vardı, bkz. tournament.php). */ .tg-btn-sm{min-height:var(--tg-control-height-compact);padding:6px 13px; border-radius:var(--tg-radius-sm);font-size:var(--tg-font-xs);letter-spacing:.01em} .tg-btn-block{width:100%} /* * ── CANONICAL DOKUNMA HEDEFİ ──────────────────────────────────────── * * Wave 2. 44px kuralı bugüne kadar accessibility.css'teki ELLE YAZILMIŞ * eski sınıf listesine bağlıydı; bir buton canonical'a taşındığında * listeden düşüp sessizce 44px altına inebiliyordu. Üstelik o dosya * Platform Yönetimi kabuğunda hiç YÜKLENMİYOR (platform/app/platform.php) * — yani platform butonları hiçbir zaman bu güvenceyi almadı. * * Garanti bu yüzden canonical sınıfın KENDİSİNE, HER kabukta yüklenen bu * dosyaya taşındı. Yeni bir erişilebilirlik katmanı kurulmadı; eşik * Bootstrap kabuğuyla aynı (767.98) ve accessibility.css'in 760px * bandının üst kümesidir. */ @media (max-width: 767.98px) { .tg-btn{min-height:var(--tg-touch-min);display:inline-flex;align-items:center;justify-content:center} /* Kompakt buton dar ekranda 40px GÖRÜNÜR (yoğunluk korunur) ama tıklanabilir alan 44px'tir. Desen yeni DEĞİL: fixtures.css'teki "Planla / Maçı Aç" bandının aynısı — şerit butonun KENDİ kutusunun genişliğindedir (left/right:0), bu yüzden komşu aksiyonun isabetini çalamaz; yatayda 44px'i butonun gerçek genişliği sağlar. */ .tg-btn-sm{position:relative;min-height:var(--tg-control-height-compact-mobile); /* YATAY eksen şeritle DEĞİL gerçek kutuyla çözülür: "Sil" gibi kısa etiketli kompakt buton 42px genişliğinde kalıyordu (ölçüldü) ve şerit `left/right:0` olduğu için yatayda 44px'e ulaşamıyordu. Şeridi yanlara taşırmak komşu aksiyonun isabetini çalma riski üretir; bu yüzden kutu büyür — accessibility.css'teki üst bar bağlantılarıyla AYNI gerekçe. */ min-width:var(--tg-touch-min)} .tg-btn-sm::after{content:'';position:absolute;left:0;right:0;top:50%; height:var(--tg-touch-min);transform:translateY(-50%)} } /* ---------- Cards / panels ---------- */ .tg-card{background:var(--tg-surface);border:1px solid var(--tg-border);border-radius:var(--tg-radius-lg);padding:var(--tg-space-4);box-shadow:var(--tg-shadow-card);color:var(--tg-text)} .tg-card-soft{background:var(--tg-surface-soft);box-shadow:none} .tg-card-title{margin:0 0 var(--tg-space-2);font-size:var(--tg-font-lg);font-weight:var(--tg-font-weight-black);color:var(--tg-text)} .tg-card-muted{margin:0;color:var(--tg-text-muted);font-size:var(--tg-font-sm)} /* * ── card.sectioned — BÖLÜMLÜ KART (Wave 4 canonical) ──────────────── * * Kullanıcının seçtiği aday LAB-CARD-J ("Üst bilgi satırlı"). Aday * değerleri KÖR KOPYALANMADI, Wave 2'deki LAB-BTN-H kararıyla aynı * yöntemle canonical ölçeğe oturtuldu: 10.5px → `--tg-font-xs`, * 800 ağırlık → `--tg-font-weight-black`, aksan noktası * `--tg-action-primary`. Tek bir raw renk/px YOKTUR. * * Neden ayrı bir sınıf DEĞİL de `.tg-card` üstünde modifier: bölümlü * kart farklı bir KART değildir, aynı kartın iç düzenidir. Paralel bir * primitive (`.card`, `.ui-card`, `.platform-card` gibi) açılmaz. * * Yapı: * .tg-card.tg-card-sectioned * > .tg-card-head (isteğe bağlı .tg-card-eyebrow + başlık + açıklama) * > .tg-card-body * > .tg-card-foot (isteğe bağlı) * * Gövde dolgusu BURADAN gelir. Daha önce `platform/views/competition-engine.php` * karşılığı olmayan bir `.platform-card-body` yazıyordu ve içerik kart * kenarına yapışıyordu; çözüm o sınıfa yeni bir legacy kural eklemek * DEĞİL, yüzeyi bu canonical gövdeye taşımak oldu. */ .tg-card-sectioned{padding:0;overflow:hidden} .tg-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--tg-space-3); padding:var(--tg-space-3) var(--tg-space-4);border-bottom:1px solid var(--tg-border); background:var(--tg-surface-soft)} /* Başlık bölmesi daralabilmeli: flex çocuğun varsayılan `min-width:auto` değeri uzun turnuva/bölüm adında kartı dışarı taşırır (Wave 4'te gerçek tarayıcı ölçümüyle doğrulandı). */ .tg-card-head>div{min-width:0} .tg-card-head h2,.tg-card-head h3{margin:0;font-size:var(--tg-font-md); font-weight:var(--tg-font-weight-black);line-height:1.3;color:var(--tg-text);overflow-wrap:anywhere} .tg-card-head p,.tg-card-head small{display:block;margin:4px 0 0;color:var(--tg-text-muted); font-size:var(--tg-font-xs);line-height:var(--tg-line-height);overflow-wrap:anywhere} .tg-card-head-actions{display:flex;align-items:center;gap:var(--tg-space-2);flex-wrap:wrap;flex:0 0 auto} /* LAB-CARD-J'nin ayırt edici öğesi: başlıktan ÖNCE gelen bağlam satırı. */ .tg-card-eyebrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px; font-size:var(--tg-font-xs);font-weight:var(--tg-font-weight-black);letter-spacing:.07em; line-height:1.2;text-transform:uppercase;color:var(--tg-text-muted)} .tg-card-eyebrow::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%; background:var(--tg-action-primary)} .tg-card-body{padding:var(--tg-space-4);color:var(--tg-text)} .tg-card-foot{display:flex;align-items:center;gap:var(--tg-space-2);flex-wrap:wrap; padding:var(--tg-space-3) var(--tg-space-4);border-top:1px solid var(--tg-border); background:var(--tg-surface-soft)} /* * card.compact — YOĞUN BÖLÜMLÜ KART (Wave 4B). * * İkinci yoğunluk ihtiyacı VARSAYILMADI, ölçüldü: Platform Yönetimi'nin * 46 bölümlü kartı yıllardır kendi `.platform-card-header` ölçüsüyle * çiziliyordu (68px başlık kutusu, 13px başlık, 10px açıklama, dikey * ortalı satır). Canonical aileye taşınırken bu ölçü KAYBOLMAMALI — * yoksa göç sessizce 17 platform ekranını yeniden tasarlamış olurdu. * * Çözüm, `button.compact` (.tg-btn-sm) ve `input.compact` (.tg-input-sm) * ile AYNI kalıptır: ayrı bir `platform-*` sistemi değil, canonical * ailenin yoğunluk varyantı. Değerler platformun BUGÜNKÜ gerçek * değerleridir; yeni bir tasarım kararı verilmedi ve punto ölçeği * "iyileştirilmedi" — 10px açıklama bilinçli olarak korundu (erişilebilirlik * borcu olarak ayrıca raporlanır, bu göçün işi değildir). * * Renkler token'dan gelir; burada yalnız GEOMETRİ vardır. */ .tg-card-compact>.tg-card-head{min-height:68px;align-items:center;gap:14px;padding:14px 17px} .tg-card-compact>.tg-card-head h2,.tg-card-compact>.tg-card-head h3{font-size:13px;letter-spacing:-.15px} .tg-card-compact>.tg-card-head p,.tg-card-compact>.tg-card-head small{font-size:10px} /* ---------- Status pills ---------- */ .tg-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--tg-radius-pill);font-size:var(--tg-font-xs);font-weight:var(--tg-font-weight-black);line-height:1.3;white-space:nowrap;background:var(--tg-status-neutral-soft);color:var(--tg-status-neutral)} /* v6.326.0 — İSTEĞE BAĞLI ÖNCÜ NOKTA. `.platform-status` ailesi rozetin başında boş bir ile küçük bir daire basıyordu; canonical aileye taşınırken o gösterge kaybolmasın diye slot BURAYA taşındı. Kural yalnız gerçekten yazılmış rozetlere uygular, mevcut canonical kullanımların hiçbirinde yok — davranışları değişmez. */ .tg-status>i{flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:currentColor} .tg-status-success{background:var(--tg-status-success-soft);color:var(--tg-status-success)} .tg-status-warning{background:var(--tg-status-warning-soft);color:var(--tg-status-warning)} .tg-status-danger{background:var(--tg-status-danger-soft);color:var(--tg-status-danger)} .tg-status-info{background:var(--tg-status-info-soft);color:var(--tg-status-info)} .tg-status-neutral{background:var(--tg-status-neutral-soft);color:var(--tg-status-neutral)} .tg-status-special{background:var(--tg-status-special-soft);color:var(--tg-status-special)} .tg-status-solid{color:var(--tg-text-inverse)} .tg-status-solid.tg-status-success{background:var(--tg-status-success)} .tg-status-solid.tg-status-warning{background:var(--tg-status-warning)} .tg-status-solid.tg-status-danger{background:var(--tg-status-danger)} .tg-status-solid.tg-status-info{background:var(--tg-status-info)} /* ---------- Persistent note vs toast (DS-031: iki ayrı anlam) ---------- */ .tg-note{display:block;margin:var(--tg-space-3) 0 0;padding:10px 14px;border:1px solid color-mix(in srgb,var(--tg-status-info) 25%,transparent);border-left-width:4px;border-radius:var(--tg-radius-sm);background:var(--tg-status-info-soft);color:var(--tg-text);font-size:var(--tg-font-sm);line-height:var(--tg-line-height)} .tg-note a{color:var(--tg-action-primary);font-weight:var(--tg-font-weight-black)} .tg-note-warning,.tg-note-locked{border-color:color-mix(in srgb,var(--tg-status-warning) 35%,transparent);background:var(--tg-status-warning-soft)} .tg-note-danger{border-color:color-mix(in srgb,var(--tg-status-danger) 35%,transparent);background:var(--tg-status-danger-soft)} .tg-note-success{border-color:color-mix(in srgb,var(--tg-status-success) 35%,transparent);background:var(--tg-status-success-soft)} .tg-note-neutral{border-color:var(--tg-border);background:var(--tg-surface-soft);color:var(--tg-text-muted)} /* v6.173.0 — Faz 6A (DS-075): BİLGİ notu aksiyon gibi görünmez. Kompakt varyant ikon + metni tek satırda hizalar, dikey hacmi düşürür. */ .tg-note-compact{display:flex;align-items:flex-start;gap:8px;margin:0 0 var(--tg-space-3);padding:8px 12px;font-size:var(--tg-font-sm);line-height:1.4} .tg-note-compact svg{flex:0 0 auto;margin-top:1px;color:var(--tg-status-info)} .tg-note-compact>span{min-width:0} /* R5 (2026-10-18) — bakım duyuru bandı: kalıcı notun uyarı tonu, akış içinde (sticky / fixed YOK). Kabuğun içerik alanının başında; gövde düzeyindeki sayfalarda (landing, yardım, kod / kampanya) kenar boşluğu. Kapatma düğmesi canonical .tg-btn-icon (44px); `hidden` özniteliği .tg-note / .tg-btn display'ini ezer. */ .site-announcement{display:flex;align-items:flex-start;gap:8px;margin:0 0 var(--tg-space-3);padding:6px 6px 6px 12px} .site-announcement[hidden],.site-announcement [hidden]{display:none!important} .site-announcement-text{flex:1 1 auto;min-width:0;margin:0;padding:6px 0;overflow-wrap:anywhere} .site-announcement-time{white-space:normal;color:var(--tg-text-muted)} .site-announcement-close{flex:0 0 auto;min-height:var(--tg-touch-min);border-color:transparent;background:transparent} body>.site-announcement{margin:var(--tg-space-3) var(--tg-space-4) 0} .site-announcement-slot{padding-top:var(--tg-space-3)} .tg-toast{padding:12px 16px;border-radius:var(--tg-radius-md);background:var(--tg-status-info-soft);color:var(--tg-status-info);font-size:var(--tg-font-md);font-weight:var(--tg-font-weight-bold);box-shadow:var(--tg-shadow-overlay)} .tg-toast.success{background:var(--tg-status-success-soft);color:var(--tg-status-success)} .tg-toast.error,.tg-toast.danger{background:var(--tg-status-danger-soft);color:var(--tg-status-danger)} .tg-toast.warning{background:var(--tg-status-warning-soft);color:var(--tg-status-warning)} /* ---------- Form baseline ---------- */ .tg-field{display:grid;gap:6px;margin:0 0 var(--tg-space-3)} .tg-label{font-size:var(--tg-font-sm);font-weight:var(--tg-font-weight-black);color:var(--tg-text)} .tg-input,.tg-select,.tg-textarea{width:100%;min-height:var(--tg-control-height);padding:10px 12px;border:1px solid var(--tg-border-strong);border-radius:var(--tg-radius-sm);background:var(--tg-surface);color:var(--tg-text);font:inherit;font-size:var(--tg-font-md);line-height:1.3;box-sizing:border-box} .tg-textarea{min-height:96px;resize:vertical} .tg-input:focus,.tg-select:focus,.tg-textarea:focus{outline:3px solid color-mix(in srgb,var(--tg-focus-ring) 45%,transparent);outline-offset:0;border-color:var(--tg-action-primary)} .tg-input:disabled,.tg-select:disabled,.tg-textarea:disabled{background:var(--tg-surface-soft);color:var(--tg-text-muted)} /* * input.compact — Wave 3B ürün kararı. * * İkinci bir yoğunluk ihtiyacı ÖLÇÜLDÜ (Wave 3): Platform Yönetimi'nin * tamamı canonical ölçeğin altında çiziliyordu — Bootstrap tabanı 33.1px, * ekran override'ları 37–42px. Bu premature abstraction DEĞİL, gerçek bir * ikinci ölçek. Ayrı bir `platform-input-*` sistemi AÇILMADI. * * Hedef ~36px idi; mevcut ölçeğe oturtuldu ve `--tg-control-height-compact` * (34px) yeniden kullanıldı — yani kompakt girdi, kompakt BUTONLA aynı * yükseklikte. Yeni bir yükseklik token'ı açmak ölçeği ikiye bölerdi. * Adlandırma da mevcut modifier desenini izler (`-sm`), ürün belgesindeki * "input.compact" adı SEMANTİK kayıttır, runtime sınıfı değil. */ .tg-input-sm,.tg-select-sm{min-height:var(--tg-control-height-compact);padding:6px 10px;font-size:var(--tg-font-sm)} /* Kompakt textarea YALNIZ yoğunluk alır: çok satırlı doğal yüksekliği sıkıştırmak metni okunamaz kılardı. */ .tg-textarea-sm{padding:6px 10px;font-size:var(--tg-font-sm)} /* * ── CANONICAL ALAN DOĞRULAMA DURUMU ───────────────────────────────── * * Sözleşme `aria-invalid="true"`dur — yani önce ERİŞİLEBİLİRLİK, sonra * görünüm. Bootstrap'ın `.is-invalid` sınıfı source of truth DEĞİLDİR; * yalnızca mevcut JS akışlarını kırmamak için aynı görünümü alır * (geçiş uyumluluğu). Canonical stil tek başına `aria-invalid` ile * çalışır, legacy sınıf olmadan da tamdır. * * Anlam yalnız RENKLE verilmez: alanın altındaki `.tg-field-error` * metni ve `aria-describedby` bağı asıl taşıyıcıdır. Kırmızı zemin * kullanılmaz — metin okunabilirliği bozulmasın. */ .tg-input[aria-invalid="true"],.tg-select[aria-invalid="true"],.tg-textarea[aria-invalid="true"], .tg-input.is-invalid,.tg-select.is-invalid,.tg-textarea.is-invalid, .was-validated .tg-input:invalid,.was-validated .tg-select:invalid,.was-validated .tg-textarea:invalid{ border-color:var(--tg-action-danger)} .tg-input[aria-invalid="true"]:focus,.tg-select[aria-invalid="true"]:focus,.tg-textarea[aria-invalid="true"]:focus, .tg-input.is-invalid:focus,.tg-select.is-invalid:focus,.tg-textarea.is-invalid:focus, .was-validated .tg-input:invalid:focus,.was-validated .tg-select:invalid:focus,.was-validated .tg-textarea:invalid:focus{ outline:3px solid color-mix(in srgb,var(--tg-action-danger) 40%,transparent);border-color:var(--tg-action-danger)} .tg-field-error{color:var(--tg-action-danger);font-size:var(--tg-font-xs);font-weight:var(--tg-font-weight-bold);line-height:1.4} .tg-help{color:var(--tg-text-muted);font-size:var(--tg-font-xs);line-height:1.4} .tg-error{color:var(--tg-status-danger);font-size:var(--tg-font-xs);font-weight:var(--tg-font-weight-bold)} .tg-form-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--tg-space-2);margin-top:var(--tg-space-4)} /* ---------- Page header (DS-020 / DS-021: en fazla 1 primary CTA) ---------- */ .tg-page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--tg-space-5);margin-bottom:var(--tg-space-4)} .tg-page-header-copy{min-width:0;flex:1 1 auto} .tg-page-header-eyebrow{display:block;margin-bottom:2px;color:var(--tg-action-primary);font-size:var(--tg-font-xs);font-weight:var(--tg-font-weight-black);text-transform:uppercase;letter-spacing:.06em} .tg-page-header h1{margin:0 0 4px;font-size:var(--tg-font-2xl);font-weight:var(--tg-font-weight-black);line-height:1.15;color:var(--tg-text);overflow-wrap:anywhere} .tg-page-header-desc{margin:0;color:var(--tg-text-muted);font-size:var(--tg-font-sm);line-height:var(--tg-line-height)} .tg-page-header-actions{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--tg-space-2)} /* ── v6.357.0 — SADE SAYFA BAĞLAM BAŞLIĞI (PD-51) ── Turnuva İÇ yönetim ekranlarının (Takımlar, Kura, Fikstür, Puan Durumu, Turnuva Formatı / Gelişmiş Format) üstü artık KART DEĞİL: normal sayfa zemini üzerinde turnuva adı (eyebrow) + başlık + kısa açıklama + gerekiyorsa küçük bağlam chip'leri — Raporlar (PDF/Excel) ekranının `.v3-section-head` diliyle aynı. Yüzey, çerçeve, gölge ve iç boşluk YOK; bileşen ve markup DEĞİŞMEDİ (`tg_page_summary()`). Genel Bakış'ın özel turnuva banner'ı bu kuraldan ayrıdır. SUPERSEDED: PD-UX10/PD-UX13 "MAVİ VE KOMPAKT ÖZET KARTI" — marka mavisi (`--tg-surface-context`) dolgulu, ters renkli kart. */ .tg-page-summary{--summary-ink:var(--tg-text); --summary-line:var(--tg-border); --summary-layer:var(--tg-surface-soft); margin:0 0 var(--tg-space-3);padding:0;border:0;border-radius:0; background:transparent;color:var(--summary-ink);box-shadow:none} .tg-page-summary .tg-page-header{margin-bottom:0;gap:var(--tg-space-3);align-items:center} .tg-page-summary .tg-page-header-eyebrow{margin-bottom:0} .tg-page-summary .tg-page-header h1,.tg-page-summary .tg-page-header h2{margin:0;color:var(--summary-ink);font-size:var(--tg-font-xl)} /* PD-UX14 — açıklama TEK SATIRA ZORLANMAZ. Sığarsa bir satır, sığmazsa iki satır, iki satırı da aşarsa clamp. Tek satır + ellipsis kuralı uzun locale'lerde (de/ru) cümlenin ilk yarısını yutuyordu. */ .tg-page-summary .tg-page-header-desc{margin:2px 0 0;color:var(--tg-text-muted); font-size:var(--tg-font-xs);line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal;text-overflow:clip} /* Yardım: tam genişlik buton DEĞİL, küçük ghost giriş — kartın kendi yüzeyinde sakin durur ve satır yüksekliğini büyütmez. */ .tg-page-summary .help-contextual-link{display:inline-flex;align-items:center;gap:5px; min-height:28px;padding:3px 10px;border:1px solid var(--summary-line); border-radius:var(--tg-radius-pill,999px);background:var(--summary-layer); color:var(--summary-ink);font-size:11px;font-weight:800;line-height:1.2;text-decoration:none} .tg-page-summary .help-contextual-link:hover{background:var(--summary-ink); border-color:var(--summary-ink);color:var(--tg-surface)} .tg-page-summary .help-contextual-link svg{width:13px;height:13px} /* Başlıktaki ikincil aksiyonlar (ör. "Gelişmiş Formata Geç") kompakt kalır ve canonical ikincil buton rengini kullanır (ters renk yok — zemin artık sayfa zeminidir). */ .tg-page-summary .tg-page-header-actions{gap:6px} .tg-page-summary .tg-page-header-actions .tg-btn{min-height:28px;padding:3px 12px;font-size:11px} /* v6.386.0 — MODÜL AYARLARI ÇARKI (UX_ARCHITECTURE §15.6 MS-UX). Yeni bileşen DEĞİL: canonical `.tg-btn.tg-btn-icon` (44px, canonical focus). Burada yalnız iki mevcut başlık davranışına karşı korunur: özet kartı aksiyonları 28px'e sıkıştırır, mobil başlık aksiyonları tam genişliğe yayar — ikon aksiyonu ne ezilir ne esner. İkincil tonda kalır (ana CTA gibi görünmez). `v3-section-head` başlıklarında çark sağ üst köşeye oturur; başlık metni ve varsa mevcut aksiyon (ör. Maç Planlarını Yenile) yerinde kalır, yalnız sağda çark kadar boşluk bırakılır. v6.387.0 — GÖRSEL POLISH (beş modülde ortak, yalnız bu sınıf): çark çerçevesiz, şeffaf zeminli tek ikondur; dokunma alanı 44×44 KALIR. İkon (20px) başlığın ilk satırıyla hizalansın diye alan (44−20)/2 = 12px yukarı alınır — görsel olarak çıplak ikon, işlevsel olarak tam hedef. Geri bildirim yalnız etkileşimde: hover çok hafif nötr-mavi ton, active biraz daha koyu; odak halkası canonical `.tg-btn:focus-visible`. */ .tg-page-header-actions .tg-btn.tg-module-settings-action{flex:0 0 auto;min-height:var(--tg-touch-min);padding:0;font-size:inherit} .tg-btn.tg-module-settings-action{margin-top:calc((20px - var(--tg-touch-min)) / 2);border-color:transparent;background:transparent;box-shadow:none;color:var(--tg-text-muted)} .tg-btn.tg-module-settings-action:hover{background:color-mix(in srgb,var(--tg-action-primary) 7%,transparent);color:var(--tg-text)} .tg-btn.tg-module-settings-action:active{background:color-mix(in srgb,var(--tg-action-primary) 13%,transparent)} /* Özet kartı (Takımlar) aksiyonları dikeyde ortalar; çarkı taşıyan aksiyon alanı diğer modüllerdeki gibi başlığın ÜSTÜNE hizalanır. */ .tg-page-header-actions:has(>.tg-module-settings-action){align-self:flex-start} /* Mobil sınır (≤760px) aşağıdaki ana "Mobile" bloğundadır. */ .v3-section-head.has-module-settings{position:relative;padding-right:calc(var(--tg-touch-min) + var(--tg-space-2))} .v3-section-head.has-module-settings>.tg-module-settings-action{position:absolute;top:0;right:0;width:var(--tg-touch-min)} .tg-module-settings-back{margin:0 0 var(--tg-space-2);padding-left:0;padding-right:0} .tg-summary-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px; margin:8px 0 0;padding:0} .tg-summary-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px; border:1px solid var(--summary-line);border-radius:var(--tg-radius-pill,999px); background:var(--summary-layer);color:var(--summary-ink); font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap} .tg-summary-chip-label{color:var(--tg-text-muted);font-weight:900; font-size:9.5px;letter-spacing:.05em;text-transform:uppercase} .tg-summary-chip--muted{color:var(--tg-text-muted);font-weight:600} /* ── PD-UX14 — ÜST BAR AKSİYON KUTUSU ── Sayfa yardımı, bildirim ve profil AYNI kareyi paylaşır: aynı ölçü, aynı radius, aynı dokunma alanı. Yeni bir bileşen çerçevesi değildir — mevcut `.notification-topbar-link` ve `.tg-profile-avatar` kuralları bu tek ölçü kaynağını tüketir. Rozet kutunun DIŞINA taşar; kutunun gerçek boyutunu büyütmez, layout kaydırmaz. */ .tg-topbar-action{position:relative;display:grid;place-items:center; width:var(--tg-topbar-action-size);height:var(--tg-topbar-action-size); flex:0 0 var(--tg-topbar-action-size);border-radius:var(--tg-topbar-action-radius); box-sizing:border-box} /* PD-UX15 — GÖRÜNÜR KARE KÜÇÜK, DOKUNMA ALANI TAM. Kutunun kendisi 33px; tıklanabilir yüzey görünmez bir katmanla dokunma tabanına (44px) genişletilir. Rozet ve ikon yerleşimi etkilenmez, komşu aksiyonların arası da değişmez (katman yalnız isabet alanıdır, yerleşim kutusu değil). */ /* v6.325.0 (F-06) — KATMAN 44px'E TAM ULAŞMIYORDU ve KOMŞUYA TAŞIYORDU. `inset` yüzdesiz de olsa PADDING kutusuna göre çözülür; kutunun 1px kenarlığı düşüldüğü için gerçek band 44 değil 42.4px oluyordu (ölçüm). Ayrıca yatayda her iki yana 5.5px taşarken komşu aksiyonun arası yalnız 6px: iki katman üst üste biniyor ve kenar bölgede YANLIŞ aksiyon tetiklenebiliyordu. Geometri artık kenarlıktan bağımsız TAM `--tg-topbar-action-hit` yüksekliği verir ve yatay taşmayı `--tg-topbar-action-gap` ile sınırlar. İKİ ORTAM, İKİ ÇÖZÜM — ve bu bilinçlidir: - MASAÜSTÜ: kare 33px kalır, eksik alan bu görünmez katmanla kapatılır (imleç hedefi küçük olabilir, yoğunluk korunur). - DOKUNMA (≤760px): katmanla yatayda 44px'e ulaşmak komşuyla çakışmayı gerektiriyordu; bu yüzden orada KUTUNUN KENDİSİ dokunma tabanına çıkar ve taşma payı sıfırlanır (bkz. tokens.css mobil blok). Böylece dar ekranda bu katman kutunun İÇİNDE kalır, çakışma yapısal olarak imkânsızdır. */ .tg-topbar-action::after{content:"";position:absolute; left:calc(-1 * var(--tg-topbar-action-gap));right:calc(-1 * var(--tg-topbar-action-gap)); top:50%;height:var(--tg-topbar-action-hit);transform:translateY(-50%)} /* ── PD-UX13 — NOTICE SEMANTİK STANDARDI ── Aynı anlam her ekranda AYNI renkle anlatılır: info → nötr bilgi, hiçbir aksiyonu kısıtlamaz warning → dikkat gerektirir / mevcut aksiyonu etkiler (hata değil) danger → hata, başarısız işlem, gerçek engel success → tamamlanan durum `special` (mor) bir NOTICE anlamı DEĞİLDİR; mod/özellik kimliğidir. Yeni bir alert çatısı KURULMADI: bu sınıflar mevcut token ailelerini tüketen ince modifier'lardır ve gövde/ikon/markup şartı getirmez. */ .tg-notice{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tg-space-2); margin:0 0 var(--tg-space-3);padding:10px 14px;border:1px solid var(--tg-border); border-inline-start-width:4px;border-radius:var(--tg-radius-sm); background:var(--tg-surface-soft);color:var(--tg-text);font-size:var(--tg-font-sm);line-height:var(--tg-line-height)} .tg-notice--info{border-color:color-mix(in srgb,var(--tg-status-info) 30%,transparent); border-inline-start-color:var(--tg-status-info);background:var(--tg-status-info-soft)} .tg-notice--warning{border-color:color-mix(in srgb,var(--tg-status-warning) 30%,transparent); border-inline-start-color:var(--tg-status-warning);background:var(--tg-status-warning-soft)} .tg-notice--danger{border-color:color-mix(in srgb,var(--tg-status-danger) 30%,transparent); border-inline-start-color:var(--tg-status-danger);background:var(--tg-status-danger-soft)} .tg-notice--success{border-color:color-mix(in srgb,var(--tg-status-success) 30%,transparent); border-inline-start-color:var(--tg-status-success);background:var(--tg-status-success-soft)} .tg-notice-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--tg-radius-pill); background:var(--tg-surface);font-size:var(--tg-font-xs);font-weight:var(--tg-font-weight-black)} /* ---------- Export menu (DS-074: tek ikincil aksiyon + açılır liste) ---------- Kabuk native
; JS kapalıyken de açılır. Yeni bir dropdown çatısı YOKTUR — panel mutlak konumlu bir kutudur, öğeler gerçek /