:root { /* Task225 — GÜVENLİ ALAN (çentik / ev göstergesi / yan kulaklıklar). Değerler tek yerden okunur: hem tüm kullanımlar tutarlı olur hem de headless doğrulamada gerçek cihaz taklit edilebilir (`env()` masaüstünde hep 0'dır). DİKKAT: `viewport-fit=cover` olmadan iOS bu değerleri SIFIR döndürür — etiket index/legal/admin sayfalarında var. */ /* Task229 — İZLEME listesi şeridi (favori altın; bu farklı olsun — kullanıcı isteği) */ --watch: #a06cf0; /* Task431 — HAREKET SÖZLÜĞÜ (Faz 1). Ton SAKİN (kullanıcı kararı): kısa süreler, yumuşak çıkış. Yeni hareket yazan her yer bu değerleri okur; bileşene sabit süre yazılmaz. Erişilebilirlik kapısı aşağıda TEK yerde. */ --dur-tap: 120ms; /* dokunma geri bildirimi */ --dur-sm: 200ms; /* küçük giriş/çıkış (çip, rozet, açılır) */ --dur-md: 560ms; /* panel/pop-up girişi — kullanıcı "az daha uzat" dedi */ --dur-view: 560ms; /* menüden görünüm değişimi (kullanıcı: net hissedilmiyor) */ --dur-pane: 520ms; /* sekme/bölme değişimi — kullanıcı iki kez uzatmak istedi */ --dur-exit: 340ms; /* kapanış: girişten hızlı ama görülür */ --dur-rip: 450ms; /* dokunma halkası: kullanıcı iki kez "daha belirgin" dedi */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* içeri gelen */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* dışarı giden */ --ease-std: cubic-bezier(0.4, 0, 0.2, 1); /* yerinde değişen */ --vvb: 0px; /* Task416 — görünür alan ile düzen alanı arasındaki alt fark (JS yazar) */ --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); --bg: #07140e; --bg2: #0b1f17; --panel: #0f2a1f; --panel2: #123528; --line: #1d4434; --line2: #275a45; --text: #eaf5ef; --muted: #8fb3a3; --green: #18c07a; --green-d: #0f9a60; --gold: #f4c542; --gold-d: #c99a1e; --red: #ff5a5f; --accent: #19e08a; /* Task514 (kullanıcı: "açık temada seçili butonların yazısı siyah kalıyor, beyaz olanlar daha güzel duruyor") — VURGU ZEMİNİNİN ÜSTÜNDEKİ YAZI tek yerden gelir. Koyu temalarda accent parlak yeşil: siyah yazı doğru. Açık temada accent doygun mavi: yazı zemin rengine (beyaza yakın) döner. Mono'da accent beyaz: siyah kalır. */ --on-accent: #04140c; /* Task514 rev (kullanıcı: "anasayfadaki butonların mavisi güzel ama başka ekranlarda daha koyu maviler var") — DOLGU tek yerden: koyu temalarda degrade, açık temada anasayfadaki düz aksan rengi (degrade açık temada koyu duruyordu). */ --accent-fill: linear-gradient(180deg, var(--green), var(--green-d)); --accent-fill-h: linear-gradient(90deg, var(--green-d), var(--accent)); /* Altın rozetlerde yazı: kullanıcı "gri gibi daha soft" istedi (kömür siyahı sertti) */ --on-gold: #4a4436; --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --radius: 16px; /* Temalanan yüzeyler (varsayılan = koyu yeşil) */ --glow1: #11422f; --glow2: #0c2c1f; --topbar-bg: rgba(7, 20, 14, 0.82); --input-bg: #08180f; --input-text: #fff; --title-a: #fff; --title-b: #b9f3d6; --pts: #fff; --head-a: #14422f; /* grup başlığı degrade */ --head-b: #0e2c20; --chip-bg: #0a1f16; /* boş bayrak kutusu / sıra rozeti */ --fav-name: #ffd9dc; /* favori satırı takım adı */ --fav: #ff5a5f; /* favori maç vurgusu (temaya uyumlu) */ --fav-bg: rgba(255, 90, 95, 0.16); --fav-glow: rgba(255, 90, 95, 0.32); } /* ===== CAM (glass) TEMASI — Task563 ===================================================== Kullanıcı: "statslook renklerine benzeyen ama dark ile light arası, bir de LIQUID GLASS premium tema." Anlaşılan tanım: cam bir MALZEMEDİR (arkasını bulanıklaştırıp doygunlaştırır), derinlik gölgeyle değil IŞIKLA gelir (üstte ince parlak kenar), yüzey kaydırmada tonlanır, okunabilirlik her şeyin önündedir. Palet statslook ölçümünden (docs/design/statslook-analiz.md): marka `#2d5bff → #00c2d1`, saç teli kenarlık, ayrı veri paleti. Zemin KOYU DEĞİL: arduvaz orta ton (#1b2130) — kullanıcının istediği "dark ile light arası". Cam YALNIZ çerçeve ve panellerde (banner, şerit, alt menü, pop-up, panel başlığı). Maç satırları camlaşmaz: uzun listede hem okunabilirlik hem akıcılık bozulur. */ :root[data-theme='glass'] { /* Task563 rev (kullanıcı: "zemin ve ağırlıklı renk çok soluk geldi, statslook'tan esinlen") — ilk palet gri-arduvazdı (#232b3d) ve doygunluğu düşüktü. statslook'un ÖLÇÜLEN zeminleri çok daha derin ve MAVİ: #070b16 / #0f1626 / #1a2338. Buradaki taban o aileye çekildi ama tamamen siyaha inilmedi (kullanıcı "dark ile light arası" dedi): lacivert-mavi, doygun, camın altında renk veren bir zemin. Task564 (kullanıcı: "pop-up'lardan maç detayının background'ını beğendim; tema ve panel background'larını bu rengin etrafında döndür") — maç detayı yüzeyinin EKRANDAN ÖLÇÜLEN baskın rengi #263b63 = hsl(219 44% 27%). Bütün basamaklar o tonun adımları. Task565 (kullanıcı: "maç kartları ile background rengi sanki yer değiştirmeli; sayfanın asıl background'u daha AÇIK, kartlar ondan bir tık daha KOYU olmalı") — ilişki tersine çevrildi: zemin beğenilen tonun kendisi, kartlar bir basamak altı. Cam malzemenin beyaz dolgusu da bu yüzden KOYU dolguya döndü (`--glass-d`) — beyazla kart zeminden açık kalıyordu. Ölçüm: zemin/kart farkı 1.37, metin 9.5 (zemin) / 13.0 (kart). */ --bg: #2b4169; --bg2: #25385b; --panel: #1d2c49; --panel2: #24375c; --line: #3c5686; --line2: #4a6aa5; --text: #f4f7ff; --muted: #a6b2c9; --green: #00c2d1; --green-d: #0090a2; --gold: #eab308; --gold-d: #b8890a; --red: #f4456b; --accent: #4d78ff; --on-accent: #071227; --accent-fill: linear-gradient(120deg, #2d5bff, #00c2d1); --accent-fill-h: linear-gradient(120deg, #4d78ff, #22d3e0); --on-gold: #3a3212; /* Gölge yerine IŞIK: cam kenarında ince parlaklık + çok yumuşak derinlik */ --shadow: 0 18px 40px rgba(6, 10, 22, 0.38); --radius: 18px; --glow1: #2d5bff33; --glow2: #00c2d122; --topbar-bg: rgba(43, 65, 105, 0.55); --input-bg: rgba(0, 0, 0, 0.16); --input-text: #eef2fb; --title-a: #ffffff; --title-b: #9fd7ff; --pts: #ffffff; --head-a: rgba(255, 255, 255, 0.08); --head-b: rgba(255, 255, 255, 0.03); --chip-bg: rgba(255, 255, 255, 0.08); --fav-name: #ffd9dc; --fav: #f4456b; --fav-bg: rgba(244, 69, 107, 0.16); --fav-glow: rgba(244, 69, 107, 0.3); --watch: #a06cf0; /* Cam malzeme değişkenleri: tek yerden ayarlanır */ --glass-blur: 18px; --glass-sat: 165%; --glass-a: 0.1; /* cam yüzeyin beyaz payı (kenar ışığı ve denetimlerde kullanılır) */ /* Task565 — yüzey dolgusu KOYU: zemin açıldı, kartlar ondan bir tık koyu duracak */ --glass-d: 0.16; --glass-edge: rgba(255, 255, 255, 0.18); --glass-sheen: rgba(255, 255, 255, 0.42); /* Ton: takım rengi varsa JS `--glass-tint`i yazar; yoksa marka mavisi */ --glass-tint: rgba(45, 91, 255, 0.28); } /* --- Cam malzeme (yalnız `glass` temasında) ------------------------------------------ Kural: cam ÇERÇEVEDE ve PANELDE; satırda değil. Her yüzey üç katmandan oluşur: 1) `backdrop-filter` ile arkasını bulanıklaştırıp doygunlaştırır, 2) çok ince beyaz gradyan (yüzeyin kendi ışığı) + takım tonundan gelen renk payı, 3) üst kenarda 1 px iç parlaklık (specular) ve alt kenarda koyu çizgi. Bunlar TEK yerde tanımlanır; yüzeyler `--glass-*` değişkenleriyle ayarlanır. */ [data-theme='glass'] .topbar.banner, [data-theme='glass'] #competition-nav, [data-theme='glass'] .bottom-nav, [data-theme='glass'] .modal-card, [data-theme='glass'] .page-view, [data-theme='glass'] .live-cards:not(.lb-empty), [data-theme='glass'] .gmatches, [data-theme='glass'] .skorio-promo, [data-theme='glass'] .pg-sw-btn, [data-theme='glass'] .cal-head { /* Yüzey NÖTR kalır (beyaz cam); takım rengi yalnız ÜST KENARDAN sızan bir ışık olarak girer. İlk denemede ton yüzeyin tamamına verilmişti: sarı takımda cam zeytin yeşiline dönüyordu (ölçüldü, kullanıcı da "fazla renkli olabilir" demişti). */ background: radial-gradient(120% 80% at 50% -20%, var(--glass-tint), transparent 60%), linear-gradient( 180deg, rgba(0, 0, 0, calc(var(--glass-d) - 0.05)), rgba(0, 0, 0, calc(var(--glass-d) + 0.05)) ); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-sheen), inset 0 -1px 0 rgba(0, 0, 0, 0.22), var(--shadow); } /* Şerit: kenarlık yerine yalnız alt çizgi (satır ritmi bozulmasın) */ [data-theme='glass'] .cal-head { border: 0; border-bottom: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-sheen); } /* Panel başlığı camlaşmaz: ana sayfada bant zaten çerçevesiz (Task147) — yalnız yazı ve ince çizgi kalır; cam tabaka LİSTENİN kendisindedir. Yapışkan başlığın opak zemini (Task533) camda pencereyi kapatıyordu: burada da saydamlaşır, altından liste geçer. */ [data-theme='glass'] main#content #live-section > .group-head, [data-theme='glass'] main#content #fav-section > .group-head, [data-theme='glass'] main#content #watch-section > .group-head, [data-theme='glass'] main#content #today-section > .group-head, [data-theme='glass'] main#content .group-head { /* Yapışkan başlık: altından liste geçerken yazı kaybolmasın diye HAFİF cam (perde), ama panel gibi kenarlıklı bir kutu değil. */ background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.06)); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border: 0; box-shadow: none; } /* Liste tabakası: satırlar değil KAPSAYICI cam — tek katman, akıcı kaydırma. */ [data-theme='glass'] .live-cards:not(.lb-empty), [data-theme='glass'] .gmatches { border-radius: var(--radius); padding: 4px 6px; } /* Task566 (kullanıcı: "panellerin en altındaki düz çizgi sondaki maçın çizgisiyle çakışıyor; bu çizgiyi oradan alalım, panel başlığının altına koyalım — sadece yeni temada") — ölçüldü: panelin alt kenarı (cam saç teli) ile son satırın ayracı 1px arayla iki çizgi oluyordu. Alt kenar kalkar, aynı çizgi PANEL BAŞLIĞININ altına geçer: bant nerede başlıyor bilgisi orada zaten aranıyor. */ [data-theme='glass'] .live-cards:not(.lb-empty), [data-theme='glass'] .gmatches { border-bottom: 0; } /* Task566 rev (kullanıcı: "en alttan yukarıya taşıdığın ince çizgileri oradan da kaldıralım") — başlığın altına konan çizgi de kalktı: bant başlığı zaten harf aralığı ve rengiyle ayrılıyor, camda ek çizgi gürültü yapıyordu. */ /* Panelin İÇİNDEKİ maç satırları CAM DEĞİL: uzun listede okunabilirlik ve akıcılık. */ [data-theme='glass'] .live-card, [data-theme='glass'] .gmatch { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Task563 rev-2 (kullanıcı: "butonlara bayıldım ama liglerde ve ana sayfada hâlâ eskisi gibi görünen tab ve butonlar var") — ölçüldü: yalnız `.pg-sw-btn` camlaşmıştı; lig şeridi düğmeleri, sekmeler, hayalet düğmeler ve takvim okları düz kalıyordu. Orta boy DENETİMLERİN tamamı aynı cam kabuğu alır; satır içindeki küçük ikon düğmeleri (göz, paylaş, takvim, yıldız) SAYDAM kalır — her ikonun arkasına çip koymak listeyi gürültüye boğar. */ /* Task581 (kullanıcı: "lig ve hafta butonlarının üst ve alt çizgileri yokmuş, sayfa yüklenince çiziliyormuş gibi bir şey oluyor") — KÜÇÜK DENETİMLERDE BULANIKLIK YOK. Neden: `backdrop-filter` taşıyan 30 px'lik bir çip, arkasındaki içerik her değiştiğinde yeniden rasterleniyor; animasyon boyunca kenarları titriyor, animasyon bitince "beliriyor" gibi görünüyordu (kullanıcı iki ayrı biçimde bildirdi). Cam hissi bulanıklıktan değil IŞIKTAN geliyor: saydam koyu dolgu + saç teli kenar + iç parlaklık. Büyük yüzeylerde (panel, pop-up, çerçeve) bulanıklık aynen duruyor. */ [data-theme='glass'] .day-btn, [data-theme='glass'] .dt-tab, [data-theme='glass'] .cal-btn, [data-theme='glass'] .cal-nav, [data-theme='glass'] .btn.btn-ghost, [data-theme='glass'] .lg-btn, [data-theme='glass'] .pick-btn, [data-theme='glass'] .st-scope, [data-theme='glass'] .st-cat { /* Task583 (kullanıcı ekran görüntüsüyle: "sade ve takvim butonuna basıldığında lig ve hafta butonu çizgileri kaybolup tekrar görünüyor") — kalan sebep SAYDAMLIKTI: kenar beyaz %18 ve dolgu %72 saydam olduğu için görünen kontrast ARKADAKİ içeriğe bağlıydı; geçiş sırasında arkadaki şerit/satır kayınca çizgi sönüp geri geliyordu. Denetimler artık OPAK: taban `--bg2`, kenar `--line2`. Cam hissi üstteki ince ışıkla kalır. */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), var(--bg2); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--line2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); color: var(--text); } /* Seçili denetim: marka gradyanı (statslook dili) — cam kabuk yerini ışığa bırakır */ [data-theme='glass'] .day-btn.active, /* Lig sekmeleri kendi medya kuralında düz `--accent` yazıyor (özgüllük: 0,3,0) — camda marka gradyanı kazansın diye aynı bağlamda yazılır. */ [data-theme='glass'] .league-tabs .dt-tab.active, [data-theme='glass'] .dt-tab.active, [data-theme='glass'] .cal-btn.active, [data-theme='glass'] .st-scope.active, [data-theme='glass'] .st-cat.active, [data-theme='glass'] .btn.btn-primary { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px rgba(45, 91, 255, 0.28); } /* Task582 — Görünüm panelindeki sürüm satırı: sessiz ama OKUNUR (alt bilgideki etiket Task170 kararıyla görünmez; sürümü doğrulamak isteyen buraya bakar). */ .set-ver { margin-top: 10px; text-align: center; font-size: 11px; letter-spacing: 0.3px; color: var(--muted); opacity: 0.75; user-select: text; } /* Task580 (kullanıcı: "görünüm menüsünden açılan pop-up'ta butonlar yeni temaya uyumlu değil") — dil çipleri, saat dilimi seçicisi ve tema düğmeleri de cam dile geçer; seçili olan marka gradyanına döner (uygulamanın geri kalanıyla aynı kural). */ [data-theme='glass'] .lang-chip, [data-theme='glass'] .lang-select, [data-theme='glass'] .theme-btn { /* Task581 — küçük denetimlerde bulanıklık yok (aynı ilke). */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)), color-mix(in srgb, var(--bg2) 55%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); color: var(--text); } [data-theme='glass'] .lang-chip.active, [data-theme='glass'] .theme-btn.active { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 16px rgba(45, 91, 255, 0.28); } [data-theme='glass'] .theme-btn.active .ic { opacity: 1; color: var(--on-accent); } /* Task580 (kullanıcı: "karşılaştırma ekranlarında arama ve takım/oyuncu fotoğraflarının bulunduğu alanlar yeni temaya uyumlu değil") — sütun başlıkları (fotoğraf + ad) ve avatar halkası düz panel rengindeydi; kart içi ince cam dile geçer. Kapatma düğmesi de aynı. */ [data-theme='glass'] .cmp-cell.cmp-pl, [data-theme='glass'] .tm-close { background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); } [data-theme='glass'] .cmp-av { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border: 2px solid var(--glass-edge); } /* Task576 (kullanıcı: "maç detayda kadro tabındaki butonlar ve oyuncuya tıklanınca gelen küçük pop-up'taki butonlar yeni temaya uygun değil") — kadro denetimleri (takım anahtarı, nitelik çipleri, ilk 11 / paylaş düğmeleri) ve oyuncu şeridi sekmeleri cam dili konuşur; seçili olan marka gradyanına döner. */ [data-theme='glass'] .lu-team-btn, [data-theme='glass'] .lu-chip, [data-theme='glass'] .lu-11, [data-theme='glass'] .lu-share, [data-theme='glass'] .pm-tab, [data-theme='glass'] .pm-close { /* Task581 — küçük denetimlerde bulanıklık yok (kenar titremesi); ışık + saydam dolgu. */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)), color-mix(in srgb, var(--bg2) 55%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); color: var(--text); } /* Task589 (kullanıcı: "seçili takımda diziliş zor okunuyor") — `.lu-form` `--muted` gri kalıyordu; parlak gradyanın üstünde okunmuyordu. Seçilide diziliş de koyu mürekkep. */ [data-theme='glass'] .lu-team-btn.active .lu-form { color: var(--on-accent); opacity: 0.85; } [data-theme='glass'] .lu-team-btn.active, [data-theme='glass'] .lu-chip.active, [data-theme='glass'] .pm-tab.active { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 16px rgba(45, 91, 255, 0.28); } /* Task571 (kullanıcı: "maç detay kartının background rengini biraz aç ve oyuncu kartı, takım kartı, karşılaştırma ve diğer TÜM pop-up'larda bu rengi kullan; opaklığını bir tık azalt, cam hissi biraz daha fazla olsun") — pop-up yüzeyi sayfadaki kartlardan AYRILIR: koyu dolgu yerine beyaz ışık dolgusu (bir tık açık), daha derin bulanıklık ve doygunluk. Tek kural: `.modal-card` bütün pop-up'ların gövdesi, `.page-view` takım/oyuncu kartı. */ /* rev (kullanıcı: "ben maç detayın background'ının rengini diğerlerine uygula dedim, sen diğerlerini maç detaya uyguladın") — DOĞRU YÖN: maç detayı pop-up'ı kendi haliyle kalır (beyaz ışık + karartılmış zeminin bulanığı); TABAN TON yalnız arkasında karartma OLMAYAN yüzeylere (kart sayfaları, oyuncu şeridi) verilir ki onlar da aynı renge otursun. */ [data-theme='glass'] .modal-card { background: radial-gradient(120% 80% at 50% -20%, var(--glass-tint), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045)); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); } /* Task579 rev (kullanıcı: "maç detay pop-up'ının background'ını — SİYAH TONLU, hafif transparan, cam efektli — neden oyuncu ve takım kartına uygulayamıyorsun?") — çünkü pop-up'ın o tonu KENDİ KARARTMASINDAN geliyor: `.modal` zemini `rgba(0,0,0,0.6)`. Kart sayfalarının arkasında öyle bir karartma yok; aynı katman yüzeyin İÇİNE konur: beyaz ışık + siyah karartma + bulanıklık = pop-up ile aynı his. */ [data-theme='glass'] .page-view, [data-theme='glass'] .pm-strip { background: radial-gradient(120% 80% at 50% -20%, var(--glass-tint), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045)), rgba(0, 0, 0, 0.42); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); } /* Skorinho sayfasının bölmeli sekmeleri kendi kuralıyla yazılmış (`#skorio-body`, 1,1,0) ve camın sekme kuralını eziyordu (kullanıcı: "Skorinho menüsünden girince gelen tabların yeni temaya uyumlu hale gelmesi lazım"). Aynı bağlamda cam dili yazılır. */ [data-theme='glass'] #skorio-body .dt-tabs { background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.18)); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); } [data-theme='glass'] #skorio-body .dt-tab.active { background: var(--accent-fill); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 16px rgba(45, 91, 255, 0.28); } /* Task569 (kullanıcı: "arama ve içinde veri gösterilen etiket kartlarında da gözü rahatsız etmeyecek bir glass ya da liquid efekt olmalı") — bu yüzeyler KART İÇİNDE durur; kart zaten koyu olduğu için buradaki cam İNCE BİR IŞIK: beyaz payı düşük gradyan + kısa bulanıklık + saç teli kenar. Ölçü bilinçli olarak panelden hafif: göz yormasın. */ [data-theme='glass'] .search-box, [data-theme='glass'] .search-results, [data-theme='glass'] .search-field, [data-theme='glass'] .tp-row, [data-theme='glass'] .pc-card, [data-theme='glass'] .ss-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); } /* Arama YÜZEYLERİ sayfanın ÜSTÜNE düşüyor: cam saydamlığı burada okumayı bozuyordu (ölçüldü: sonuç listesinin altından e-posta doğrulama bandı okunuyordu). Beyaz ışık katmanı KOYU PANEL zemininin üstüne bindirilir — cam hissi kalır, metin okunur. */ [data-theme='glass'] .search-box, [data-theme='glass'] .search-results, [data-theme='glass'] .search-field { background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)), color-mix(in srgb, var(--panel) 92%, transparent); } [data-theme='glass'] .search-results { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--shadow); } /* Task569 (kullanıcı: "ligler seçilince görülen efekt aşağıdaki menüler seçiliyken de olsun") — seçili lig düğmesindeki marka gradyanı alt gezinmede de: aktif sekmenin ikonunun ARKASINDA gradyan hap. Üstteki ince çizgi camda kalkar (iki işaret gürültü). */ @media (max-width: 640px) { [data-theme='glass'] .tab-btn.active::before { display: none; } /* Task570 (kullanıcı: "menülerin yazıları seçili olduğunda renklenen yere teğet gibi görünüyor, biraz aşağıya alınabilir") — ölçüldü: hap 5–35px, etiket 33px'te başlıyordu. Camda ikon ile etiketin arası açılır ve hap bir tık yukarı/kısa olur. */ [data-theme='glass'] .tab-btn { gap: 6px; padding-top: 6px; } [data-theme='glass'] .tab-btn.active::after { content: ''; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 46px; height: 28px; border-radius: 999px; background: var(--accent-fill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 16px rgba(45, 91, 255, 0.3); z-index: -1; } [data-theme='glass'] .tab-btn.active { color: var(--text); } [data-theme='glass'] .tab-btn.active svg, [data-theme='glass'] .tab-btn.active .ic { color: var(--on-accent); } } /* Satır içi küçük ikon düğmeleri: cam YOK, yalnız dokunulunca hafif ışık */ [data-theme='glass'] .wstar, [data-theme='glass'] .share-mini, [data-theme='glass'] .cal-mini, [data-theme='glass'] .fav-star { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Task564 (kullanıcı: "Skorinho yazısı maç kartından taşmış, compact'ta ikon satırda normal görünmüyor — çerçeveye gerek var mı?") — GEREK YOK. Satır içi Skorinho düğmesi kardeş ikonlarla aynı dile döner: çerçevesiz, zeminsiz. NEDEN ÇIKMIŞTI: düğmenin sınıfları `btn btn-ghost pick-btn`; camın `.btn.btn-ghost` kuralı (0,3,0) satır kuralını (`.m-acts .pick-btn`, 0,2,0) eziyordu. Ayrıca dokunma kutusu mobilde 19px YUKARI büyüyor (`padding: 19px 9px 4px`) — görünmez olduğu sürece sorun değil, çerçeveliyken kartın üst kenarını kesiyordu (ölçüldü: 5px taşma). */ [data-theme='glass'] .m-acts .pick-btn { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Task564 (kullanıcı: "favori ya da başlamış maçın solundaki kırmızı/sarı çizgi compact mobil görünümde panele oturmuyor") — camda liste paneli 1px kenarlık + 18px köşe aldı; satırın sol kenarına yapışan şerit o köşeyi kesiyordu. Camda şerit satırın İÇİNE oturan bir hap olur: köşeyle kesişmez, anlamı (altın/mor/kırmızı) aynı kalır. */ [data-theme='glass'] .live-card.lc-rail::before { inset: 5px auto 5px 6px; width: 3px; border-radius: 999px; } /* Task568 (kullanıcı: "maç satırlarının başı en üstteki maç ile ortadaki maçlarda farklı olduğu için (kıvrımlı) aynı kırmızı çizgi tüm satırlarda kullanılamaz") — HAKLI: panelin 18px köşesi yalnız İLK satırın solunu kıvırıyor, ortadakiler düz başlıyordu; içeri çekilmiş hap iki durumda iki türlü görünüyor. Dar ekranda panel zaten kenardan kenara uzanıyor — orada YAPRAK haline gelir (köşe ve yan kenar yok), böylece HER satır aynı yerden başlar ve şerit satırın soluna TAM oturur. Geniş ekranda panel ortalanmış bir kart olduğu için hap biçimi korunur. */ @media (max-width: 700px) { [data-theme='glass'] .live-cards:not(.lb-empty), [data-theme='glass'] .gmatches { border-radius: 0; border-left: 0; border-right: 0; /* Task575 (kullanıcı: "panellerdeki maçların en üsttekinin üst çizgisi olmamalı, diğer temalarda olduğu gibi") — panelin üst kenarı ilk satırın üstünde çizgi gibi görünüyordu; dar ekranda panelin dış çerçevesi tamamen kalkar. */ border-top: 0; /* Task578 (kullanıcı: "up next altındaki çizgi duruyor") — ÖLÇÜLDÜ: kalan çizgi cam malzemenin İÇ IŞIĞIYDI (`inset 0 1px 0 var(--glass-sheen)`, panelin üst kenarında parlak 1px). Çerçevesi olmayan yaprakta iç ışık da anlamsız: kalkar. */ box-shadow: none; } [data-theme='glass'] .live-card.lc-rail::before { inset: 0 auto 0 0; width: 4px; border-radius: 0; } } /* Düğmeler: cam kabuk + seçiliyken marka gradyanı (statslook dili) */ [data-theme='glass'] .pg-sw-btn.active, [data-theme='glass'] .day-btn.active { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; } /* Kaydırınca yapışkan yüzey derinleşir: hareket sözlüğüne (Task431) bağlı, süresi kısa */ [data-theme='glass'] .topbar.banner, [data-theme='glass'] #competition-nav { transition: background-color var(--dur-sm) var(--ease-std), backdrop-filter var(--dur-sm) var(--ease-std); } /* Saydamlığı azaltılmış cihaz/tercih: cam KATILAŞIR (okunabilirlik önce gelir) */ @media (prefers-reduced-transparency: reduce) { [data-theme='glass'] .topbar.banner, [data-theme='glass'] #competition-nav, [data-theme='glass'] .bottom-nav, [data-theme='glass'] .modal-card, [data-theme='glass'] .page-view, [data-theme='glass'] .live-cards:not(.lb-empty), [data-theme='glass'] .gmatches, [data-theme='glass'] .skorio-promo, [data-theme='glass'] .pg-sw-btn, [data-theme='glass'] .cal-head, [data-theme='glass'] main#content .group-head { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--panel); } } /* ===== Lacivert (navy) tema ===== */ :root[data-theme='navy'] { --bg: #060d1f; --bg2: #0a1530; --panel: #0f1f42; --panel2: #14264f; --line: #243a66; --line2: #324c80; --text: #e8eefc; --muted: #93a6cf; --green: #3b82f6; --green-d: #2563eb; --accent: #4f8cff; --glow1: #16306b; --glow2: #0c1c44; --topbar-bg: rgba(6, 13, 31, 0.82); --input-bg: #0a1428; --title-b: #a9c7ff; --head-a: #16335f; --head-b: #0e2147; --chip-bg: #0e1d3a; --fav: #ff7a8a; --fav-bg: rgba(255, 122, 138, 0.15); --fav-glow: rgba(255, 122, 138, 0.3); } /* ===== Açık (light) tema ===== */ :root[data-theme='light'] { --bg: #eef2f0; --bg2: #f7faf8; --panel: #ffffff; --panel2: #f1f5f3; --line: #d4e0da; --line2: #b9ccc3; --text: #0f2018; --muted: #5a7064; --green: #12a766; --green-d: #0d8a52; --accent: #10b070; --on-accent: var(--bg); /* Task514 — açık temada vurgu üstü yazı AÇIK renktir */ --accent-fill: var(--accent); /* Task514 rev — açık temada tek ton mavi */ --accent-fill-h: var(--accent); --glow1: #cfeede; --glow2: #dff3e8; --topbar-bg: rgba(247, 250, 248, 0.85); --input-bg: #ffffff; --input-text: #0f2018; --title-a: #0f6b46; --title-b: #12a766; --pts: #0f2018; --shadow: 0 10px 30px rgba(0, 0, 0, 0.12); --head-a: #dceee5; --head-b: #eaf5ef; --chip-bg: #e6efe9; --fav-name: #a30713; --fav: #e23744; --fav-bg: rgba(226, 55, 68, 0.1); --fav-glow: rgba(226, 55, 68, 0.22); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--text); background: radial-gradient(1200px 700px at 80% -10%, var(--glow1) 0%, transparent 60%), radial-gradient(1000px 600px at -10% 10%, var(--glow2) 0%, transparent 55%), linear-gradient(180deg, var(--bg2), var(--bg)); background-attachment: fixed; min-height: 100vh; } /* Sağdaki sabit Haberler ikonu içeriği kapatmasın — boşluk sadece içerik alanında, banner (sticky topbar) tam genişlikte kalsın */ #app { padding-right: 42px; } /* ---------- Üst bar ---------- */ /* Masaüstü (geniş): eski yatay düzen — marka solda, kontroller sağda */ .topbar { position: sticky; top: 0; z-index: 90; /* lig şeridinin (z-80) ÜSTÜNDE — hesap menüsü altında kalmasın */ display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(12px, 3vw, 28px); background: var(--topbar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .tb-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .tb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 100%; } .tb-auth { flex: none; } .brand-ball { font-size: 28px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); animation: spin 9s linear infinite; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } @keyframes spin { to { transform: rotate(360deg); } } .tb-title h1 { margin: 0; font-size: clamp(18px, 3.4vw, 26px); font-weight: 800; letter-spacing: 0.3px; white-space: nowrap; background: linear-gradient(90deg, var(--title-a), var(--title-b)); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-sub { font-size: 12px; color: var(--muted); } .mode-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line2); } .lang-select { background: var(--panel2); color: var(--text); border: 1px solid var(--line2); border-radius: 8px; padding: 5px 6px; font-size: 12px; font-weight: 800; cursor: pointer; } .lang-select:hover { border-color: var(--green); } .lang-select:focus { outline: none; border-color: var(--accent); } .tz-select { max-width: 150px; } .online-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(25, 224, 138, 0.08); white-space: nowrap; flex: none; } .online-label { margin-left: 1px; } .online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: onlinePulse 2s ease-in-out infinite; } @keyframes onlinePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .mode-badge.readonly { color: var(--muted); } .mode-badge.edit { color: #06140d; background: var(--accent); border-color: var(--accent); } /* ---------- Tema seçici ---------- */ .theme-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel2); flex: none; } .theme-btn { cursor: pointer; border: 0; background: transparent; font-size: 14px; line-height: 1; padding: 5px 8px; border-radius: 999px; color: var(--muted); transition: 0.15s; -webkit-appearance: none; display: inline-flex; align-items: center; } /* SVG tema ikonları currentColor — koyu temada NET görünmeli (opacity ile soldurulmaz) */ .theme-btn .ic { opacity: 0.65; } .theme-btn:hover { color: var(--text); } .theme-btn:hover .ic { opacity: 1; } /* Seçili: aksan renkli ikon + halka (koyu temalarda ayırt edilir) */ .theme-btn.active { color: var(--accent); background: var(--bg2); box-shadow: inset 0 0 0 1.5px var(--accent); } .theme-btn.active .ic { opacity: 1; } /* ---------- Butonlar ---------- */ .btn { cursor: pointer; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 14px; transition: 0.15s; } .btn:hover { transform: translateY(-1px); border-color: var(--green); } .btn-primary { background: var(--accent-fill); border-color: var(--green-d); color: var(--on-accent); } .btn-login { background: var(--accent-fill); border-color: var(--green-d); color: var(--on-accent); } .btn-ghost { background: transparent; } /* ---------- Modal ---------- */ .modal { position: fixed; inset: 0; z-index: 200; /* sticky banner/nav ve pick-counter'ın ÜSTÜNDE (howto menü altında kalmasın) */ display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); overflow-y: auto; /* uzun içerik (howto/tören) taşarsa modal içinde kaydırılır */ /* Task383b (kullanıcı: "maç detayı açıkken bazı noktalarda popup değil ALTINDAKİ sayfa kayıyor") — kaydırma ZİNCİRİ kesilir: pencere sonuna gelince hareket arkadaki sayfaya geçmez. Gövde kilidi (position: fixed) yerine bu seçildi; kilit kaydırma konumunu zıplatıyor ve başka ekranları bozma riski taşıyor. */ overscroll-behavior: contain; /* Task225 — pencere kartı çentiğe ve ev göstergesine oturmaz */ padding: calc(16px + var(--sat)) var(--sar) calc(16px + var(--sab)) var(--sal); } /* İç kaydırılabilir bölgeler de zinciri kesmeli (kadro/istatistik panelleri, uzun listeler) */ .modal .tm-body, .modal .dt-pane, .modal .modal-card, #detail-inline { overscroll-behavior: contain; } /* Task102 — Maç detayı MOBİLDE hep en üstten açılır. `align-items: center` kısa içerikte kartı ekranın ortasına koyuyordu; kullanıcı bunu "kartın orta noktasında açılıyor" diye bildirdi ve her açılışta aynı yerden başlamasını istedi. Yalnız maç detayı (`#detail-modal`) hedeflenir: doğrulama/e-posta gibi kısa diyaloglar ortada kalır. */ @media (max-width: 860px) { #detail-modal { align-items: flex-start; /* Task225 — 10px'ti; çentikli telefonda kartın üstü çentiğin altında kalıyordu (ölçüldü: kart 10px'ten başlıyor, çentik 47px). Güvenli alan payı eklendi. */ padding-top: calc(10px + var(--sat)); } } /* Tema-uyumlu satır-içi ikonlar (currentColor SVG) metinle hizalı */ .ic { vertical-align: -2px; flex: none; } /* Takım popup'ı izleme/diğer listelerden açıldığında onların üstünde görünsün */ #team-modal { z-index: 70; } .modal-card { width: min(92vw, 360px); background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); max-height: 90vh; /* uzun içerik kart İÇİNDE kaydırılır (kapatma hep erişilir) */ overflow-y: auto; } .modal-card h3 { margin: 0 0 6px; } .modal-card p { margin: 0 0 14px; color: var(--muted); font-size: 14px; } .modal-card input { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--input-bg); color: var(--text); font-size: 15px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; } .login-error { color: var(--red); font-size: 13px; margin-top: 8px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Bölümler ---------- */ .section { padding: clamp(18px, 3vw, 34px) clamp(12px, 3vw, 28px) 4px; max-width: 1500px; margin: 0 auto; } .section-title { display: flex; align-items: center; gap: 10px; font-size: clamp(18px, 2.6vw, 24px); margin: 0 0 4px; } .section-title .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); } /* Eleme haritası indirme butonları (bölüm başlığının sağında: ağaç + çember) */ .bracket-dl-group { margin-left: auto; display: inline-flex; gap: 6px; } .bracket-dl { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--panel2); color: var(--text); border: 1px solid var(--line2); cursor: pointer; white-space: nowrap; } .bracket-dl:hover { border-color: var(--accent); color: var(--accent); } /* Şampiyon tahmini bandı: "Kupayı kim kaldırır?" — Bugün bölümüyle aynı genişlik, içerik ortalı */ .champ-band { background: linear-gradient(135deg, rgba(244, 197, 66, 0.08), transparent); border: 1px solid var(--gold-d); border-radius: var(--radius); padding: 12px 14px 16px; max-width: 760px; margin: 14px auto 0; text-align: center; } .champ-band .section-title { justify-content: center; } .cb-hint, .cb-note { font-size: 13px; color: var(--muted); margin: 4px 0 10px; } .cb-note { color: var(--gold); font-weight: 700; } .cb-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .cb-opt { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line2); color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer; } .cb-opt img { width: 22px; height: 15px; border-radius: 2px; object-fit: cover; } .cb-opt:hover, .cb-opt.on { border-color: var(--gold); color: var(--gold); } .cb-res { max-width: 540px; margin: 0 auto; text-align: left; } .cb-res .eg-tot { text-align: center; } .cb-acts { margin-top: 10px; display: flex; justify-content: center; } .cb-change { margin-top: 8px; background: none; border: none; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; } /* Eleme haritası önizleme katmanı: görsel ekranda, köşede İndir + kapat */ .bracket-view { position: fixed; inset: 0; z-index: 300; background: rgba(4, 10, 18, 0.84); display: flex; align-items: center; justify-content: center; padding: 18px; } .bracket-view.hidden { display: none; } .bv-box { position: relative; max-width: 96vw; max-height: 90vh; } .bv-box img { display: block; max-width: 96vw; max-height: 90vh; object-fit: contain; border-radius: 12px; border: 1px solid var(--line2); background: #0b1220; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55); } .bv-acts { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; } .bv-acts .bracket-dl { background: rgba(10, 18, 30, 0.88); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } /* Mobil: butonlar görselin ÜSTÜNDE ayrı satırda (başlık yazısını kapatmasın) ve daha ufak */ @media (max-width: 640px) { .bv-box { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .bv-box img { max-height: 82vh; } .bv-acts { position: static; } .bv-acts .bracket-dl { padding: 3px 8px; font-size: 11px; } } .section-hint { margin: 0 0 18px; color: var(--muted); font-size: 13px; } /* "Yarın →" butonu (Bugün başlığı sağında) + yarının programı satırları */ .tomorrow-btn { margin-left: auto; font-size: 12px; font-weight: 800; cursor: pointer; flex: none; background: var(--panel2); color: var(--accent); border: 1px solid var(--line2); border-radius: 999px; padding: 5px 12px; } .tomorrow-btn:hover { border-color: var(--green); } /* Gün değiştirici (Dün / Bugün / Yarın) — Bugün başlığı sağında segment */ .section-title { flex-wrap: wrap; } .day-switch { margin-left: auto; display: inline-flex; flex: none; gap: 0; padding: 2px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 999px; } .day-btn { cursor: pointer; border: 0; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 800; padding: 5px 13px; border-radius: 999px; transition: 0.15s; white-space: nowrap; } .day-btn:hover { color: var(--text); } .day-btn.active { background: var(--accent-fill); color: var(--on-accent); } /* Mobilde: segment kendi satırına, 3 buton eşit genişlik -> uzun dillerde (EN/DE/FR) taşmaz */ @media (max-width: 560px) { .day-switch { margin-left: 0; width: 100%; box-sizing: border-box; margin-top: 6px; } .day-btn { flex: 1 1 0; text-align: center; padding: 7px 4px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* Hızlı gezinme çubuğu (yapışkan, topbar'ın hemen altında) */ .quicknav { position: sticky; top: var(--tbh, 0); z-index: 38; display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 7px 12px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); scrollbar-width: none; } .quicknav::-webkit-scrollbar { display: none; } /* Webde çipler sayfaya ortalı; mobilde soldan başlar ve kaydırılır */ @media (min-width: 761px) { .quicknav { justify-content: center; } } /* Grup bölümü başındaki harf şeridi (A–L) */ .group-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2px 0 14px; } .qn-chip { flex: 0 0 auto; cursor: pointer; white-space: nowrap; min-width: 30px; background: var(--chip-bg, rgba(255, 255, 255, 0.05)); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 800; transition: 0.15s; } .qn-chip:hover { border-color: var(--accent); } .qn-chip.qn-active { color: var(--accent); border-color: rgba(46, 160, 204, 0.4); } .qn-chip.qn-ko { color: var(--gold); border-color: rgba(244, 197, 66, 0.4); } .qn-chip.qn-stats { color: var(--accent); border-color: rgba(46, 160, 204, 0.4); } .qn-chip.qn-grp { color: var(--accent); border-color: rgba(46, 160, 204, 0.4); } /* ---------- İstatistikler ---------- */ #stats-body { max-width: 760px; margin: 0 auto; } .st-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .st-seg { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .st-mchip, .st-schip { cursor: pointer; white-space: nowrap; background: var(--chip-bg, rgba(255, 255, 255, 0.05)); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; transition: 0.15s; } .st-mchip:hover, .st-schip:hover { border-color: var(--accent); } .st-mchip.active { background: var(--accent-fill); color: var(--on-accent); border-color: var(--green-d); } .st-schip.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .st-hint { font-size: 12px; color: var(--muted); margin: -4px 0 10px; } /* Faul alt seçimi: yaptığı / yapılan */ .st-foulmode { margin: -2px 0 10px; } .st-fchip { cursor: pointer; background: var(--panel2); color: var(--muted); border: 1px solid var(--line2); border-radius: 999px; padding: 5px 14px; font-size: 12.5px; font-weight: 700; } .st-fchip.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* Turnuva maç-başı ortalama kartları */ .st-avg-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin: 2px 0 8px; } .st-avg-title small { font-weight: 600; text-transform: none; } .st-avg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin-bottom: 16px; } .st-avg-card { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 6px; background: var(--chip-bg, rgba(255, 255, 255, 0.05)); border: 1px solid var(--line); border-radius: 10px; } .st-avg-ic { font-size: 16px; } .st-avg-card b { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--gold); } .st-avg-lbl { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.1; } /* İçerik alanı sabit min-yükseklik: kapsam/metrik değişince sayfa hoplamaz */ .st-content { min-height: 380px; } .st-list { display: flex; flex-direction: column; } .st-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); } .st-row:last-child { border-bottom: none; } .st-rank { width: 24px; text-align: center; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; } .st-name { display: flex; align-items: center; gap: 8px; min-width: 0; } .st-name img { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); flex: none; } .st-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-count { font-weight: 900; font-variant-numeric: tabular-nums; color: var(--gold); min-width: 28px; text-align: right; white-space: nowrap; } .st-avg { font-weight: 700; font-size: 11px; color: var(--muted); margin-left: 4px; } .st-avg::before { content: '('; } .st-avg::after { content: ')'; } .st-all { margin-top: 10px; width: 100%; cursor: pointer; background: var(--panel2); color: var(--accent); border: 1px solid var(--line2); border-radius: 10px; padding: 9px; font-weight: 800; font-size: 13px; } .st-all:hover { border-color: var(--green); } .tmr-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); } .tmr-time { font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; } .tmr-teams { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; font-weight: 700; } .tmr-teams .fb-vs { color: var(--muted); font-weight: 800; } .tmr-meta { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; white-space: nowrap; } /* ---------- Canlı maçlar (en üst bant) ---------- */ .live-section { background: linear-gradient(180deg, rgba(25, 224, 138, 0.05), transparent); border: 1px solid var(--line2); border-radius: var(--radius); margin: 14px auto 0; padding-bottom: 16px; max-width: 760px; /* sayaç + favori bandı ile aynı genişlik, ortalı */ } .dot.live-dot { background: var(--red); box-shadow: 0 0 12px var(--red); animation: livePulse 2.2s ease-in-out infinite; } /* Task064 — kullanıcı "çok hızlı yanıp sönüyor" dedi: süre 1,1-1,3 sn'den 2,2 sn'ye çıkarıldı ve sönme derinliği azaltıldı (0,3 → 0,45) — dikkat çeker ama rahatsız etmez. */ @keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* Tek sütun: her maç tam genişlik kart -> isimler kırpılmaz, ortada dengeli durur */ .live-cards { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 14px; } .live-card { background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line2); border-radius: 14px; /* Task064: alt boşluk üstten fazla — üstte rozet satırı tampon görevi görüyor, altta ise takım adları doğrudan kenara dayanıp kart çizgisi yakın duruyordu (CLAUDE.md ilke 4). */ padding: 12px 14px 18px; box-shadow: var(--shadow); min-width: 0; /* Mobilde Skorinho markası geri sayım satırına konumlanıyor (aşağıda) — bağlam burada. */ position: relative; } /* grid öğesi içeriğe göre büyüyüp section'ı taşmasın */ .live-card.live { border-color: rgba(255, 90, 95, 0.55); box-shadow: 0 0 22px rgba(255, 90, 95, 0.18); } .live-card.soon { border-color: rgba(244, 197, 66, 0.45); } .live-card.upcoming { border-color: var(--line2); } .live-card.done { opacity: 0.72; } /* Task133 — Üç yuva: solda saat (+ sayaç yoksa lig çipi), ORTADA tarih, sağda ikonlar. Yan yuvalar eşit (1fr) olduğu için tarih kartın tam merkezinde durur. Mutlak konumlama denendi ve `.lc-top`a `position: relative` eklemek Skorinho markasının (mutlak, karta göre konumlu) yerini bozdu — ölçümde marka ikon satırının altına düştü. */ .lc-top { display: grid; /* Task382 — orta sütun KARTIN ORTASINDA kalmalı (canlı dakika/MS rozeti oraya oturuyor), ama sağ sütun içeriğinden dar olmamalı: `1fr` iken ikon şeridi sütuna sığmayıp `justify-self: end` ile sola taşıyor ve saatin üstüne biniyordu (ölçüldü: 17px). `minmax(max-content, 1fr)` ikisini birden verir: yan sütunlar eşit esner, sağdaki içeriğinin altına DÜŞMEZ. */ grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 8px; margin-bottom: 10px; } .lc-side { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } /* Sütunlar AÇIKÇA verilir: takvim görünümünde tarih gizlendiği için (`.hc-cards .lc-meta`) ızgara otomatik yerleşimi ikon şeridini ORTA sütuna alıyordu — kullanıcı bildirdi: "ikonlar takvim görünümünde ortada görünüyor". */ .lc-top > .lc-side:first-child { grid-column: 1; } .lc-top .lc-meta { grid-column: 2; justify-self: center; } /* Task382 (kullanıcı, ekran görüntüsü: kadro ikonu saatin üstüne binmişti) — ikon şeridi KENDİ İÇERİĞİ KADAR yer alır ve aralığı 8→6 daralır. Sütun `1fr` iken şerit içeriğinden dar kalıyor, `justify-self: end` ile sola taşıyor ve saatin üstüne biniyordu (ölçüldü: saat 188-238, kadro ikonu 221-250 → 17px çakışma). */ .lc-side-r { grid-column: 3; justify-self: end; gap: 6px; } .lc-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 900; letter-spacing: 0.6px; padding: 3px 9px; border-radius: 999px; flex: none; white-space: nowrap; } /* Task305 (kullanıcı) — dolu kırmızı "çok göze batıyordu": pastel zemin + yumuşak kırmızı metin, soon/İY rozetleriyle aynı dil (saydam zemin + ince kenarlık). */ .lc-badge.live { background: color-mix(in srgb, var(--red) 16%, transparent); color: color-mix(in srgb, var(--red) 72%, var(--text)); border: 1px solid color-mix(in srgb, var(--red) 38%, transparent); } /* Nokta rozet rengini izler (pastel zeminde beyaz nokta kayboluyordu) */ .lc-badge.live .lc-dot { background: currentColor; } .lc-badge.soon { background: rgba(244, 197, 66, 0.18); color: var(--gold); border: 1px solid var(--gold-d); } .lc-badge.ht { background: var(--gold); color: #1a1206; } /* devre arası (İY) */ .lc-badge.upcoming { background: var(--panel2); color: var(--text); border: 1px solid var(--line2); } /* Mobil: geri sayım kendi satırında (saatin altında), ortada */ /* Task125 — Üç yuva: solda lig + hafta, ORTADA geri sayım, sağda denge boşluğu. Grid sayesinde geri sayım lig adı uzasa da tam ortada kalır. */ /* Task125 — Solda lig + hafta, ardından geri sayım. Grid (1fr auto 1fr) denendi ve 390px'te yan sütunlar lig çipini eziyordu (logo ince bir şerite dönüyordu — ölçüldü); flex + `margin:auto` ile sayaç kalan alanda ortalanır, çip kendi genişliğini korur. */ .lc-cd-wrap { display: flex; align-items: center; gap: 10px; text-align: center; margin: 2px 0 8px; line-height: 1; } .lc-cd-lig { display: inline-flex; align-items: center; gap: 6px; flex: none; } /* Task133 — Sayaç (varsa KALBİYLE BİRLİKTE) kartın TAM ORTASINDA durur; lig çipi solda kalır. Akışta ortalamak çipin genişliğine göre kayıyordu (ölçüm: mobilde 34px sola, webde 84px sağa). Mutlak %50 + geri kaydırma, çip ne kadar genişlerse genişlesin sayacı kartın merkezinde tutar. */ .lc-cd-wrap { position: relative; } .lc-cd-mid { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; white-space: nowrap; } /* Birim ekleri küçük ve soluk: rakam öne çıksın, kart ölçüsü değişmesin */ .lc-cd small { font-size: 0.62em; font-weight: 800; margin-left: 1px; opacity: 0.75; letter-spacing: 0; } .lc-cd-date { font-size: 14px; color: var(--muted); letter-spacing: 0; } .lc-cd { color: var(--gold); font-weight: 900; font-variant-numeric: tabular-nums; /* Task068 — kullanıcı isteğiyle küçültüldü (22px kart içinde skorla yarışıyordu). */ font-size: 17px; letter-spacing: 0.4px; } /* Türkiye maçında geri sayım başındaki atan kalp (geri sayım fontu büyüklüğünde) */ .beat-heart { display: inline-flex; align-items: center; line-height: 1; transform-origin: center; color: var(--accent); /* tema-aksanı (team temada takım rengi) — sabit kırmızı değil */ animation: heartBeat 1.1s ease-in-out infinite; } .beat-heart svg { width: 15px; height: 15px; } .lc-cd-wrap .beat-heart { vertical-align: -1px; margin-right: 5px; } /* Bugün kartı */ .lc-cd-wrap .beat-heart svg { width: 19px; height: 19px; } .fb-info .beat-heart { margin-right: 3px; vertical-align: -1px; } /* favori/izleme bandı */ @keyframes heartBeat { 0%, 40%, 100% { transform: scale(1); } 12% { transform: scale(1.28); } 26% { transform: scale(1.12); } } /* Task133 — Web'e özel "sayaç üst satıra mutlak konumlanır" düzeni KALDIRILDI: kullanıcı webin mobil düzenle aynı olmasını istedi (kart içinde üç satır: lig+sayaç · saat/tarih/ ikonlar · takımlar). Kart yine konumlandırıcı ata olarak kalır (marka mutlak). */ .live-card { position: relative; } .lc-badge.done { background: rgba(143, 179, 163, 0.14); color: var(--muted); border: 1px solid var(--line2); } /* Task541 (kullanıcı: "compact görünümde penaltı skorunu göremiyorum") — skorun yanındaki küçük penaltı rakamı. VARSAYILAN GİZLİ: zengin kartta penaltı kendi satırında yazılı, iki kez görünmesin. Sade satırda görünür; kutu genişliği değişmediği için sütun hizası ve satır yüksekliği bozulmaz. */ .sc-pen { display: none; margin-left: 1px; font-size: 9.5px; font-style: normal; font-weight: 800; line-height: 1; vertical-align: super; color: var(--muted); } .sc-pen-win { color: var(--gold); } .cd-compact .sc-pen { display: inline; } /* Fikstür satırında her kipte görünür: orada penaltının yazıldığı başka bir yer yok. */ .sc-pen.g-pen { display: inline; } /* Maç detayında penaltı ROZETİ: künye satırındaki düz metnin yerine (kullanıcı). */ .dt-pen { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 6px auto 0; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--gold) 12%, transparent); font-size: 12.5px; font-weight: 800; letter-spacing: 0.3px; color: var(--muted); } .dt-pen svg { width: 14px; height: 14px; } .dt-pen b { font-size: 14px; color: var(--text); } .dt-pen b.dt-pen-win { color: var(--gold); } .dt-pen i { font-style: normal; opacity: 0.6; } /* Günlük kartta penaltı sonucu satırı (eleme; skor berabere görünür, tur atlayan burada) */ .lc-pen { margin-top: 4px; font-size: 12px; color: var(--muted); text-align: center; } .lc-pen b { color: var(--gold); } /* Task304 — çift maçlı eleme: rövanşta "İlk maç x-y · Toplam a-b · tur atladı" satırı (WC deseninin taşınması). Kompakt fikstür satırında tam genişlik alt bant. */ .lc-agg { margin-top: 4px; font-size: 12px; color: var(--muted); text-align: center; } .lc-agg b { color: var(--text); } /* Tur atlayan/elenen: cümle yerine GÖRSEL vurgu (Sofascore/FotMob kalıbı) — atlayan takımın adı kalın ve tam renkte, elenen taraf soluk. Sınıf taraf kapsayıcısına gelir. */ .agg-adv .sn, .agg-adv .lc-nm, .dt-tm.agg-adv span { font-weight: 700; color: var(--text); } .agg-out { opacity: 0.5; } /* Task304 rev (kullanıcı: "satırı aşağıya ve yana genişletmeyecek") — kompakt satırda agregat AKIŞA GİRMEZ: skor hücresinin altına bindirilen mini rozet. Satır yüksekliği ve sütun genişlikleri değişmez; rozet alt padding'in içine oturur. */ .gscore { position: relative; } .g-agg { position: absolute; top: 100%; left: 50%; transform: translate(-50%, -2px); /* Skor fontunun bir küçüğü, italik değil (kullanıcı) — sayı tabular otursun */ font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--muted); } /* Task307 (kullanıcı) — mobil compact'ta canlı bandın başlık altı ve son satır altı gereksiz boşluk bırakıyordu: başlık dolgusu kısılır, liste karta yapışır. */ @media (max-width: 759px) { .cd-compact .live-band .group-head { padding: 8px 14px 4px; } .cd-compact .live-band .live-cards { padding-bottom: 0; } .cd-compact .live-band .live-card:last-child { border-bottom: 0; } } /* Task305 (kullanıcı) — canlı dakika / İY / MS rozetinin NORMAL karttaki yeri: skorun hemen üstünde ve ortada. Soldaki kopya normal modda gizlenir; compact satır sol sütunundaki rozetiyle yaşamaya devam eder (aşağıdaki compact kuralları). */ .lc-status { display: flex; justify-content: center; margin-bottom: 2px; } .live-card.has-status .lc-top .lc-side:not(.lc-side-r) > .lc-badge { display: none; } .cd-compact .live-card .lc-status { display: none; } .cd-compact .live-card.has-status .lc-top .lc-side:not(.lc-side-r) > .lc-badge { display: inline-flex; } .dt-status { margin: 4px 0 2px; } /* Task308 rev — "Yakında" SAATİ ayrı bir upcoming-hapıdır. Task314 (kullanıcı) — hap HER görünümde sözün sağında durur: normal görünümde soon penceresine girince saat kayboluyordu (upcoming rozeti soon'a dönüşüyor, saat hapı yalnız compact'ta görünüyordu). Maç başlayana dek saat kalır. */ i.soon-time { display: inline-flex; font-style: normal; } .lc-badge.soon .soon-word { font-style: normal; } /* Task306 — uzatma dakikası: normalde tam biçim ("90'+2'"), mobil compact'ta toplam */ .lc-badge.live .min-a, .lc-badge.live .min-b { font-style: normal; } .lc-badge.live .min-b { display: none; } @media (max-width: 759px) { .cd-compact .lc-badge.live .min-b { display: inline; } /* Toplam varyantı varsa tam biçim gizlenir (işaretlemede min-a önce gelir) */ .cd-compact .lc-badge.live .min-a:has(+ .min-b) { display: none; } } /* Task308 rev (kullanıcı) — web compact'ta "Yakında" rozeti NORMAL görünümle birebir aynıdır (sarı hap + kum saati + söz): compact ikon-gizleme kuralı bu rozet için geri açılır; saat AYRI hapta yanında durur. Mobilde rozet KABUĞU görünmez (boş sarı hap kalmasın): kum saati kartın soluna yapışır, ortada yalnız saat hapı kalır. */ .cd-compact .lc-badge.soon svg { display: inline; } @media (max-width: 759px) { /* Task315 rev (kullanıcı) — MOBİLDE "Yakında" SÖZÜ hiç yazılmaz (normal + compact): kum saati + saat yeter. Web'de söz durur. */ .lc-badge.soon .soon-word { display: none; } /* Task316 (kullanıcı) — mobil NORMAL görünümde pil (kum saati/saat) HEP çiplerin ALTINDA. Geri sayımlı kartta zaten öyle; kickoff geçip kaynak henüz canlı demeden önce cd düşer ve çipler pille aynı satıra yazılıyordu (tutarsızlık penceresi). Çip taşıyan sol yuva sarılır: çipler order 0 ilk satır, ::after kırılımı, pil order 2. */ .live-card.scheduled .lc-top .lc-side:not(.lc-side-r):has(.lc-comp) { flex-wrap: wrap; row-gap: 4px; } .live-card.scheduled .lc-top .lc-side:not(.lc-side-r):has(.lc-comp)::after { content: ''; flex-basis: 100%; height: 0; order: 1; } .live-card.scheduled .lc-top .lc-side:not(.lc-side-r):has(.lc-comp) > .lc-badge { order: 2; } /* Task343 (kullanıcı, not 10) — GERİ SAYIMLI normal kartta (mobil) saat hapı sayacın hemen altında KARTI ORTALAR; tarih sola geçer. Soon'da kum saati saatin solunda (soon-word mobilde zaten gizli). Compact aşağıdaki geri almalarla etkilenmez. */ .live-card.scheduled:has(.lc-cd-wrap) .lc-top .lc-side:not(.lc-side-r) { grid-column: 2; grid-row: 1; justify-self: center; } .live-card.scheduled:has(.lc-cd-wrap) .lc-top .lc-meta { grid-column: 1; grid-row: 1; justify-self: start; } /* Task361 (kullanıcı) — SAAT ile TARİH yer değiştirdi: saat orta sütunda (takım adlarının arasında), tarih solda. Bu kural `:has(.lc-cd-wrap)` özgüllüğüyle aşağıdaki genel kuralları ezdiği için swap BURADA yapılır. */ .cd-compact .live-card.scheduled:has(.lc-cd-wrap) .lc-top .lc-side:not(.lc-side-r) { grid-column: 2; justify-self: center; } /* Task362 (kullanıcı: "tarih biraz sola kaysın") — bu kural `:has(.lc-cd-wrap)` özgüllüğüyle aşağıdaki genel kuralı ezdiği için hizalama BURADA da yazılır; yoksa geri sayımlı (yani tüm yaklaşan) satırlarda tarih ortalı kalıyordu. */ .cd-compact .live-card.scheduled:has(.lc-cd-wrap) .lc-top .lc-meta { grid-column: 1; justify-self: start; } /* Compact bu kurala girmez: tek satır düzeni aynen kalır */ .cd-compact .live-card.scheduled .lc-top .lc-side:not(.lc-side-r):has(.lc-comp) { flex-wrap: nowrap; row-gap: 0; } .cd-compact .live-card.scheduled .lc-top .lc-side:not(.lc-side-r):has(.lc-comp)::after { content: none; } .cd-compact .live-card.scheduled .lc-top .lc-side:not(.lc-side-r):has(.lc-comp) > .lc-badge { order: 0; } /* "Yakında" satırı: mobil compact'ta söz rozeti yazısızdır ve kum saati sol raya mutlak konumlanırdı — TARİH sola geçince ikisi ÜST ÜSTE bindi. Dar satırda ikisi yan yana sığmıyor (46px kolonun tamamını yer, kart kenarına teğet olurdu). Yakında bilgisi burada RENKLE taşınır: saat altın olur, sol vurgu şeridi zaten yanar. Kum saati ikonu geniş/normal görünümlerde aynen durur. */ .cd-compact .live-card.scheduled .lc-badge.soon { display: none; } } i.agg-lbl { font-style: normal; } /* Ana sayfa kompakt listesinde kart varyantındaki tam satır da bindirmeye döner */ .cd-compact .live-card { position: relative; } .cd-compact .lc-agg { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); margin: 0; /* Task362 (kullanıcı: "fontu da 1 size büyüsün") — satır artık YALIN SKOR okuyor, yer açıldı: 8.5px → 10px, başlamamış rövanştaki ölçüyle aynı (tek ritim). Task362 rev (kullanıcı: "eleme maçlarında önceki maçın skoru bold görünsün") — kalınlık BAŞLAMIŞ/BAŞLAMAMIŞ ayrımı yapmaz; 10px ince gövde okunmuyordu. */ font-size: 10px; font-weight: 800; line-height: 1; } /* Task362 — SADE görünümde bu satırda yalnız SKOR kalır: etiketler ("İlk maç", "· Toplam") gizlenir; rövanş oynandıysa TOPLAM tek başına okunur, ilk maç parçası düşer. Normal görünümde satır tam metniyle durur. */ .cd-compact .lc-agg .agg-lbl { display: none; } .cd-compact .lc-agg:has(.agg-tot) .agg-fl { display: none; } /* Task362 rev (kullanıcı) — BAŞLAMIŞ elemeli maçta alt satır ayrıca TAM RENKTE: canlı skorun hemen altında durduğu için soluk gri okunmuyordu. Kalınlık her iki durumda da yukarıdaki temel kuraldan gelir. */ .cd-compact .live-card:not(.scheduled) .lc-agg { color: var(--text); } /* Task362 — Satır içindeki lig nişanları YALNIZ sade görünümde ve takvim GÜNE göre gruplandığında çizilir; başka her yerde gizlidir. Seçici `.lc-comp` ile birlikte yazılır: çipin kendi `display` kuralları kaynakta DAHA SONRA geliyor ve tek sınıflı gizleme kuralını eziyordu — normal görünümde bitmiş maçta "MS"nin yanında ikinci bir lig logosu belirmişti (kullanıcı bildirdi). */ .lc-comp.lc-meta-lig, .lc-comp.lc-side-lig { display: none; } /* Task332 (kullanıcı) — başlamamış rövanşta İLK MAÇ satırı saat hapına biniyordu (ölçüldü: hap y17-34, ilk maç y29-37). Hap negatif margin ile 4px yukarı alınır (transform DEĞİL — hapın merkezleme transform'unu ezmesin), ilk maç en dipte. Satır yükselmez (Task304 kuralı). */ /* Task360 — Task332'nin -5px kaldırması ARTIK GEREKSİZ: hap dikeyde ortalanıyor (align-self: center) ve ilk-maç satırı zaten mutlak konumla dipte. Nudge kalınca hap 5px yukarı kayıyordu (ölçüldü: hapΔ -5). Rövanşlı satırda adlar ORTADA kalır ki dipteki ilk-maç satırıyla çakışmasın (ölçüldü: 5px bindirme). */ .cd-compact .live-card.scheduled:has(.lc-agg) .lc-row { align-self: center; } /* Task361 — Rövanşlı BAŞLAMAMIŞ satırda tarih SOL sütunda ortalıdır (saatle yer değiştirdi); orta sütunda saat üstte, ilk maç skoru altında durur. Tarihi alt şeride indiren eski deneme KALDIRILDI (dikey ortalamayı bozuyordu — ölçüldü: 14px aşağıda). */ .cd-compact .live-card.scheduled:has(.lc-agg) .lc-agg { font-size: 8px; } .lc-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: livePulse 2.2s ease-in-out infinite; } /* Task453 — HAREKET İPUCU balonu: "sola kaydır" öğretisi. Küçük, ekranın altında, kendiliğinden kalkar. El/ok sola kayarak hareketi taklit eder. */ .hint-swipe { /* Task453 rev (kullanıcı: "ekranlarda dolaştım ama kapatma animasyonuna rastlayamadım") — balon `absolute` iken kabın KAYDIRILABİLİR içerik kutusuna yapışıyordu: uzun bir maç detayında ekranın çok altında, görünmez bir yerde doğuyordu (`.modal` fixed + overflow auto, `.page-view` uzun). Artık GÖRÜNÜM ALANINA sabit: nerede olursa olsun görünür. */ /* Task453 rev-2 (kullanıcı: "çok altta kalmış, ekranın orta kısmında görünebilir") — ekranın ortasında: gözün zaten olduğu yer. */ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 240; /* modalın (200) üstünde */ display: inline-flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 18px 8px; border-radius: 999px; background: color-mix(in srgb, var(--panel2) 92%, transparent); border: 1px solid var(--line2); color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); animation: hintIn var(--dur-sm) var(--ease-out), hintOut var(--dur-exit) var(--ease-in) 2.8s forwards; } .hint-text { text-align: center; } /* Task453 rev-2 — nokta METNİN ALTINDA kendi şeridinde, YAZI BOYUNCA sağdan sola gider; yolu JS şeridin genişliğinden ölçüp `--hint-travel` olarak yazar (metin dile göre uzayıp kısalıyor). İlk denemede nokta yazının üstünden geçiyordu, okunmuyordu. */ .hint-track { position: relative; height: 12px; } .hint-hand { position: absolute; left: 0; top: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); animation: hintSwipeMove 1.9s ease-in-out infinite; } @keyframes hintSwipeMove { 0% { transform: translateX(var(--hint-travel, 40px)); opacity: 0; } 15% { opacity: 1; } 75% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } } @keyframes hintIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } } @keyframes hintOut { to { opacity: 0; } } /* Task446 — turnuva göster/gizle düğmesi (lig başlığında, favori yıldızının yanında). Gizliyken üstü çizili göz ve sönük renk: durum tek bakışta okunur. */ .comp-vis-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin-left: 2px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; flex: none; } .comp-vis-btn svg { width: 17px; height: 17px; } /* Task448 — AÇIK: işaretli (vurgu rengi + hafif hâle). Yanındaki favori yıldızı ALTIN olduğu için burada vurgu rengi kullanıldı; iki düğme birbirine karışmasın. */ .comp-vis-btn.on { color: var(--accent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 45%, transparent)); } .comp-vis-btn.off { color: var(--red, #e0524d); } @media (hover: hover) { .comp-vis-btn:hover { color: var(--accent); } } /* Task445 — ÖN PLANA DÖNÜŞ tazelemesi sürerken canlı rozet "bekliyor" görünümüne geçer. Kullanıcı: "75. dakikada bıraktım, sabah açtığımda 75'te takılmış gibi göründü… refresh saniyesine kadar skorlar takılmış hissi veriyor." Eski dakika CANLI gibi durmasın: nabız durur, rozet soluklaşır. Veri gelince kendiliğinden normale döner. */ .veri-tazeleniyor .lc-badge.live, .veri-tazeleniyor .lc-badge.ht { opacity: 0.55; filter: saturate(0.6); transition: opacity var(--dur-sm) var(--ease-out); } .veri-tazeleniyor .lc-dot { animation-play-state: paused; } .lc-meta { font-size: 11px; color: var(--muted); text-align: right; min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lc-stage { color: var(--accent); cursor: pointer; font-weight: 700; text-decoration: underline dotted; text-underline-offset: 2px; } @media (hover: hover) { .lc-stage:hover { color: var(--gold); } } .lc-row { display: flex; align-items: center; gap: 8px; justify-content: center; min-width: 0; } /* Düzen: isim 🏴 skor : skor 🏴 isim -> orta küme (bayrak+skor) skora yaslı, her maçta hizalı. Ev/deplasman yarısı eşit alan; isimler dışa taşar (ev sağa, deplasman sola yaslı). */ .lc-half { display: flex; align-items: center; gap: 7px; flex: 1 1 0; min-width: 0; } .lc-half.home { justify-content: flex-end; } .lc-half.away { justify-content: flex-start; } .lc-half img { width: 30px; height: 21px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); flex: none; } /* display:block -> team-link'in inline-flex'ini ez ki ellipsis çalışsın (yoksa uzun isim taşar) */ .lc-half .lc-nm { display: block; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; } .lc-half.home .lc-nm { text-align: right; } .lc-half.away .lc-nm { text-align: left; } .lc-x { color: var(--muted); font-weight: 800; flex: none; } /* Task180 — Kullanıcı: "Favori takımların kırmızı çerçevesi hoş durmuyor, tema ile uyumlu da değil; onun yerine takvim görünümündeki soldaki sarı çizgi kalsın ve liste görünümüne de uygulansın." Kırmızı çerçeve+parıltı (WC'den devralınan kural) kalktı; her iki görünümde de takvimdeki ALTIN SOL ŞERİT kullanılır. */ .live-card.fav-match, .live-card.watch-match { position: relative; overflow: hidden; } .live-card.fav-match::before, .live-card.watch-match::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 4px 0 0 4px; background: var(--gold); } /* Task229 — İZLEME listesi: favoriyle aynı dil, FARKLI renk (kullanıcı isteği). Mor seçildi: altın (favori), kırmızı (canlı) ve yeşil/mavi (vurgu) ile karışmaz. Favori önceliklidir — aynı maç ikisindeyse altın kalır (kural aşağıda). */ .live-card.watch-match::before { background: var(--watch, #a06cf0); } .live-card.fav-match.watch-match::before { background: var(--gold); } /* ---------- Grup kartları ---------- */ .groups-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); } .group-card { background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .group-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: linear-gradient(90deg, var(--head-a), var(--head-b)); border-bottom: 1px solid var(--line); } .group-head h3 { margin: 0; font-size: 16px; letter-spacing: 0.5px; } .group-head .grp-letter { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: #05130c; font-weight: 900; margin-right: 8px; } .group-head .grp-status { font-size: 11px; color: var(--muted); } /* Puan cetveli */ .table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; } /* sabit yerleşim: uzun isim puan sütunlarını taşırmaz */ /* İstatistik sütunları DAR sabit genişlik (asla taşmaz); kalan tüm alan isim sütununa kalır, sığmazsa "…" ile kısalır */ .table th:not(.team-col), .table td:not(.team-col) { width: 20px; padding-left: 1px; padding-right: 1px; } .table th.gcol, .table td.gcol { width: 34px; } .table th:last-child, .table td:last-child { width: 26px; } /* Pts: 'Pts' başlığı sığsın (fark isim sütunundan) */ /* Task072 — sayı sütunları içeriğine göre: 20px'te üç haneli değerler (AV "-41", OA "100") hücreyi tam dolduruyor ve komşu sütuna değiyordu. Genişlik farkı yalnız isim sütunundan alınır (table-layout: fixed) — toplam tablo genişliği değişmez. */ /* Task601 (kullanıcı: "haftalık değişim okları favori yıldızının altında kalmış") — sıra sütunu 20px'ti; rozet (18px) yanına ▲/▼ sığmıyor, ok hücreden taşıp komşu hücredeki yıldızın altına giriyordu (ölçüldü: ok 30–46, yıldız 27–49). Sütun rozet + ok kadar; fark isim sütunundan (table-layout: fixed). */ .table th.c-rank, .table td.c-rank { /* rev (kullanıcı: "oklar beklediğimden çok yer kaplıyor" + "oku olmayan satırlarda sıra numaraları kaymış") — sütun 34px (rozet 18 + ok ~12), SOLA yaslı: rozet her satırda aynı x'te, ok yalnız sağına eklenir. */ /* rev-3 (kullanıcı: "oklar sıralamaya yanaşsın, yıldızla arası armayla arası kadar olsun") — hücre içeriği kadar: 2 + rozet 18 + 1 + ok 16 = 37px; ok taşmaz, yıldıza değmez. */ width: 37px; text-align: left; padding-left: 2px; padding-right: 0; } .table th.c-n, .table td.c-n { width: 24px; } .table th.c-g, .table td.c-g { width: 27px; } .table th.c-gd, .table td.c-gd { width: 32px; } .table th.c-pts, .table td.c-pts { width: 30px; } /* Dar ekranda artış daha ölçülü: genişlik farkı isim sütunundan geliyor ve 360px'te ad "Ars…"a kadar iniyordu. Sayılar yine komşusuna değmez (en dar boşluk ölçüldü). */ @media (max-width: 560px) { /* Sayılar 1 punto küçülür: aynı görsel boşluk daha dar hücreyle sağlanır ve kazanılan yer takım adına gider (kullanıcı: "mobilde takım adına çok az yer kaldı"). */ #standings .table tbody td.c-n, #standings .table tbody td.c-g, #standings .table tbody td.c-gd { font-size: 12px; } .table th.c-n, .table td.c-n { width: 21px; } .table th.c-g, .table td.c-g { width: 23px; } .table th.c-gd, .table td.c-gd { width: 27px; } .table th.c-pts, .table td.c-pts { width: 25px; } #standings td.team-col, #standings th.team-col { padding-right: 6px; padding-left: 7px; /* Task601 rev-3 — ok→yıldız arası = yıldız→arma arası (6px) */ } /* Ad dışındaki her şey (sıra, yıldız, arma, boşluklar) biraz kısılır — hepsi ada eklenir */ #standings td.team-col .tc-inner { gap: 4px; } #standings td.team-col img.crest { width: 19px; height: 19px; } #standings .team-col .star { font-size: 15px; /* Task601 rev-3 — bir tık büyük (13 → 15) */ padding: 0 1px; } } .table thead th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); font-weight: 700; padding: 8px 4px; text-align: center; border-bottom: 1px solid var(--line); } .table thead th.team-col { text-align: left; padding-left: 12px; } .table tbody td { padding: 7px 4px; text-align: center; border-bottom: 1px solid var(--line); } .table tbody td.team-col { text-align: left; padding-left: 10px; } .table tbody tr:last-child td { border-bottom: none; } .team-cell { display: flex; align-items: center; gap: 6px; min-width: 0; } /* min-width:0 -> isim sabit sütunda kısalabilsin */ .team-cell img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); flex: none; } .team-cell .tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; font-weight: 600; } .pts { font-weight: 800; color: var(--pts); } .rank-badge { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 5px; font-size: 11px; font-weight: 800; margin-right: 6px; background: var(--chip-bg); color: var(--muted); border: 1px solid var(--line); } /* Task601 rev-3 — puan cetveli sıra hücresinde rozetin sağ marjı yok: ok rozete YANAŞIK (kullanıcı); hücre 2 + 18 + 1 + 16 = 37px, taşma yok. */ .table td.c-rank .rank-badge { margin-right: 0; } tr.qual-1 .rank-badge, tr.qual-2 .rank-badge { background: var(--green); color: var(--on-accent); border-color: var(--green); } tr.qual-1, tr.qual-2 { background: linear-gradient(90deg, rgba(24, 192, 122, 0.16), transparent); } tr.qual-3 .rank-badge { background: var(--gold); color: var(--on-gold); border-color: var(--gold); } tr.qual-3 { background: linear-gradient(90deg, rgba(244, 197, 66, 0.14), transparent); } tr.qual-3.third-out { background: transparent; } tr.qual-3.third-out .rank-badge { background: var(--chip-bg); color: var(--muted); border-color: var(--line); } /* Grup maçları */ .gmatches { padding: 6px 10px 12px; } .gmatch { display: grid; /* Task322 (kullanıcı) — SOL sütun sabit tabanlı: canlı dakika rozeti ("32'"→"90'+4'") genişledikçe satırlar farklı hizaya kayıyordu. 84px en geniş canlı rozeti karşılar; tarih de aynı kutuda ortalanır — tüm satırlarda takım/skor aynı x'te. Sağdaki ikon kümesi de AÇIK 5. sütundur (örtük sütun satır başına değişebiliyordu). */ grid-template-columns: minmax(84px, auto) 1fr minmax(56px, auto) 1fr auto; align-items: center; gap: 6px; /* Sol padding TÜM satırlarda eşit (favori maç kaymasın — inset vurgu 4px içeride) */ padding: 6px 2px 6px 12px; border-bottom: 1px dashed var(--line); } /* Grup satırı baş sütunu: yatay ikon kümesi ÜSTTE, tarih ALTTA */ .g-lead { display: flex; flex-direction: column; align-items: center; gap: 1px; } .gmatch:last-child { border-bottom: none; } .gmatch .gdate { font-size: 10px; color: var(--muted); line-height: 1.1; } /* Düzen: isim 🏴 skor : skor 🏴 isim -> orta küme (bayrak+skor) skora yaslı, hizalı */ .side { display: flex; align-items: center; gap: 6px; min-width: 0; } .side.home { justify-content: flex-end; } .side.away { justify-content: flex-start; } .side img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); flex: none; } .side .sn { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; } .gmatch > .colon { color: var(--muted); font-weight: 800; flex: none; text-align: center; } .score-box { display: flex; align-items: center; gap: 4px; } .score-box input { width: 30px; height: 28px; text-align: center; border-radius: 7px; border: 1px solid var(--line2); background: var(--input-bg); color: var(--input-text); font-size: 15px; font-weight: 800; -moz-appearance: textfield; } .score-box input::-webkit-outer-spin-button, .score-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .score-box input:disabled { opacity: 0.85; cursor: default; } .score-box .colon { color: var(--muted); font-weight: 800; } .score-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(25, 224, 138, 0.25); } /* ---------- Eleme bracket (org-chart ağacı) ---------- */ .bracket-scroll { overflow-x: auto; padding-bottom: 14px; -webkit-overflow-scrolling: touch; } .bracket { min-width: max-content; padding: 6px 2px 10px; } /* Ağaç: kök (final) sağda, dallar sola. row-reverse ile kart sağda, çocuklar solda. */ .btree { display: flex; } .bnode { display: flex; flex-direction: row-reverse; align-items: center; } .bcard { display: flex; flex-direction: column; margin-left: 30px; } .bkids { display: flex; flex-direction: column; justify-content: center; } /* Bağlantı çizgileri: her çocuk, kartına doğru bir dirsek çizer */ .bkids > .bnode { position: relative; } .bkids > .bnode::before { /* yatay çizgi (ebeveyne doğru, sağa) */ content: ''; position: absolute; right: -30px; top: 50%; width: 30px; height: 2px; background: var(--line2); } .bkids > .bnode::after { /* dikey çizgi (kardeşe doğru, ebeveyn ortasına kadar) */ content: ''; position: absolute; right: -30px; width: 2px; height: 50%; background: var(--line2); } .bkids > .bnode:first-child::after { top: 50%; } .bkids > .bnode:last-child::after { top: 0; } .bnode > .bcard { position: relative; } .bround { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); text-align: center; margin-bottom: 4px; } .bround.fn { color: var(--gold); font-size: 12px; } /* 3.lük maçı — ağacın altında ortada */ .thirdplace { margin: 24px auto 0; width: 240px; } .tp-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); text-align: center; margin-bottom: 4px; } /* Task355 — Eleme sekmesi geniş ekranda tam genişlik: ağaç dar sütuna sıkışmasın */ .league-grid.brk-wide { grid-template-columns: 1fr; } .league-grid.brk-wide #standings-section { display: none; } /* Task355 — Eşleşme kartı (iki ayak tek düğüm): ağaçta ve mobil listede ORTAK. Kart kenarına teğet içerik yok; kazanan vurgulu, elenen soluk (advCls dili). */ .bt-card { width: 236px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px; padding: 9px 11px; display: flex; flex-direction: column; gap: 5px; } .bt-card.bt-done { border-color: color-mix(in srgb, var(--gold) 35%, var(--line2)); } .bt-row { display: flex; align-items: center; gap: 8px; min-height: 22px; } .bt-team { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex: 1; font-size: 13px; } .bt-team b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bt-team.agg-adv b { font-weight: 900; color: var(--text); } .bt-team.agg-out { opacity: 0.55; } .bt-crest { width: 18px; height: 18px; object-fit: contain; flex: none; } .bt-crest-ph { border-radius: 50%; background: var(--chip-bg); } .bt-agg { font-weight: 900; font-size: 15px; color: var(--gold); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 1px; flex: none; } .bt-agg i { font-style: normal; opacity: 0.6; padding: 0 1px; } .bt-agg em { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--muted); margin-left: 5px; } .bt-agg-tbd { color: var(--muted); } .bt-legs { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } /* Şampiyon şeridi: panelin üstünde, altın vurgulu */ .bt-champ { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold); font-size: 13px; font-weight: 800; } .bt-champ svg { width: 17px; height: 17px; } .bt-champ b { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 900; } /* Mobil tur sekmeleri: yatay ağaç telefona sığmaz. Task357 rev (kullanıcı: "sağdan taşmış gibi") — önce SIĞDIRMA denenir (dar ekranda punto/padding küçülür), sığmazsa uygulamanın KENAR SOLMA standardı (board-scopes ile aynı maske) devreye girer: taşma olduğu kenar flulaşır, kaydırılabilirlik anlaşılır. */ .bt-steps { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .bt-steps::-webkit-scrollbar { display: none; } .bt-steps.has-more { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent); } .bt-steps.has-prev { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); } .bt-steps.has-prev.has-more { -webkit-mask-image: linear-gradient( 90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent ); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); } .bt-step { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line2); color: var(--muted); font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; } /* Dar telefonda (≤430px) beş tur çoğu dilde tek ekrana sığar: punto ve iç boşluk kısılır */ @media (max-width: 460px) { .bt-steps { gap: 4px; } .bt-step { padding: 6px 9px; font-size: 11.5px; letter-spacing: -0.1px; } } .bt-step.on { color: var(--accent); border-color: var(--accent); } .bt-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); } .bt-list .bt-card { width: auto; } /* Görsel butonları: başlığın sağında, ikon + metin */ .bracket-dl svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; } /* ---------- Bildirim (zil) ---------- */ /* Dil/timezone select'leriyle aynı boy ve stil */ .notif-btn { cursor: pointer; background: var(--panel2); color: var(--muted); border: 1px solid var(--line2); border-radius: 8px; padding: 4px 7px; line-height: 0; display: inline-flex; align-items: center; } .notif-btn svg { width: 16px; height: 16px; display: block; } .notif-btn:hover { border-color: var(--green); color: var(--text); } .notif-btn.on { color: var(--accent); border-color: var(--accent); } /* bildirim açıkken vurgulu */ .notif-panel { position: fixed; /* Task225 — üst bar çentik payıyla uzuyor; panel de o kadar aşağıdan başlamalı */ top: calc(58px + var(--sat)); right: calc(12px + var(--sar)); z-index: 62; width: 250px; max-width: 92vw; background: var(--card, #121a2b); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .notif-panel.hidden { display: none; } .np-head { font-weight: 800; font-size: 14px; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; } .np-close { cursor: pointer; background: transparent; border: 0; color: var(--muted); font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 6px; } .np-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); } /* Maç kartı üstü "takip et" zili — izleme (göz) ikonuyla aynı renkler */ .follow-bell { cursor: pointer; background: transparent; border: 0; color: var(--line2); padding: 4px 7px; line-height: 0; display: inline-flex; align-items: center; vertical-align: middle; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } @media (hover: hover) { .follow-bell:hover { color: var(--gold); transform: scale(1.12); } } /* dokunmatikte yapışkan hover olmasın (göz/wStar gibi) */ .follow-bell.on { color: var(--gold); } .follow-bell.on svg path { fill: currentColor; fill-opacity: 0.16; } .share-mini { cursor: pointer; background: transparent; border: 0; color: var(--line2); padding: 4px 7px; line-height: 0; display: inline-flex; align-items: center; vertical-align: middle; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } @media (hover: hover) { .share-mini:hover { color: var(--gold); transform: scale(1.12); } } /* Detay modal başlığındaki aksiyonlar (zil + paylaş) — sağ üst, kapat (✕) butonunun solunda; taşma yok */ .dt-acts { display: flex; justify-content: flex-end; align-items: center; gap: 2px; /* Task102 — Alt boşluk 2px değil 10px: haber/izleme ikonları takım adı satırının hemen üstündeydi ve mobilde deplasman adına yapılan dokunuş haber ekranını açıyordu. */ margin: 0 38px 10px 0; min-height: 22px; } .dt-refresh { margin-top: 10px; background: var(--chip-bg); color: var(--text); border: 1px solid var(--line2); border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer; } .dt-refresh:hover { border-color: var(--green); } .dt-refresh:disabled { opacity: 0.6; cursor: default; } .np-desc { font-size: 12px; color: var(--muted); margin-bottom: 8px; } .np-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 600; cursor: pointer; } .np-row:last-of-type { border-bottom: none; } .np-cb { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; } .np-note { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.4; } /* ---------- Mobil eleme: tur sekmeleri + kaydırma ---------- */ .kostep { width: 100%; } .kostep-tabs { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: safe center; padding: 2px 2px 10px; scrollbar-width: none; } .kostep-tabs::-webkit-scrollbar { display: none; } .kostep-tab { flex: 0 0 auto; cursor: pointer; white-space: nowrap; background: var(--chip-bg, rgba(255, 255, 255, 0.05)); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 700; transition: 0.15s; } .kostep-tab.active { background: var(--accent-fill); color: var(--on-accent); border-color: var(--green-d); box-shadow: 0 3px 12px rgba(24, 192, 122, 0.3); } .kostep-viewport { overflow: hidden; } .kostep-track { display: flex; transition: transform 0.32s cubic-bezier(0.3, 1, 0.4, 1); } .kostep-pane { flex: 0 0 100%; min-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 2px; } .kostep-pane .tie { width: 100%; } .kostep-pane .tie-team .tt { max-width: none; } /* Stepper modunda yatay org-chart genişliğini (min-width:max-content) sıfırla */ @media (max-width: 760px) { .bracket-scroll { overflow-x: hidden; } .bracket { min-width: 0; width: 100%; } } .tie { position: relative; background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: 12px; padding: 7px; box-shadow: var(--shadow); } .tie.live { border-color: var(--line2); } .tie.decided { border-color: var(--green-d); } .tie.final { border-color: var(--gold); box-shadow: 0 0 24px rgba(244, 197, 66, 0.25); } /* Şu an oynanan eleme maçı: kırmızı çerçeve + parıltı (final dahil; diğer kartlardan ayırt edilir) */ .tie.playing { border-color: var(--red); box-shadow: 0 0 16px rgba(255, 90, 95, 0.3); } .tie-head .tie-live { font-size: 10px; padding: 2px 7px; letter-spacing: 0.4px; } .tie-head .tie-live .lc-dot { width: 6px; height: 6px; } .tie-head { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; } .tie-date { flex: 1; min-width: 0; font-size: 10px; color: var(--muted); text-align: center; } .tie-head .m-acts { flex: none; } .tie-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 8px; } .tie-row + .tie-row { margin-top: 4px; } .tie-row.win { background: linear-gradient(90deg, rgba(24, 192, 122, 0.18), transparent); } .tie-row.lose { opacity: 0.6; } .tie-team { display: flex; align-items: center; gap: 7px; min-width: 0; } .tie-team img { width: 22px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); flex: none; } .tie-team .tt { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .tie-team .tt.placeholder { color: var(--muted); font-style: italic; font-weight: 500; } .tie-team .flag-ph { width: 22px; height: 15px; border-radius: 2px; background: var(--chip-bg); border: 1px dashed var(--line2); flex: none; } .tie-score input { width: 30px; height: 26px; text-align: center; border-radius: 6px; border: 1px solid var(--line2); background: var(--input-bg); color: var(--input-text); font-weight: 800; -moz-appearance: textfield; } .tie-score input::-webkit-outer-spin-button, .tie-score input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .tie-score input:disabled { opacity: 0.85; } .tie-score input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(25, 224, 138, 0.25); } .pen-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--muted); } .pen-row .pen-btn { cursor: pointer; border: 1px solid var(--line2); background: var(--input-bg); color: var(--text); border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 700; } .pen-btn.active { background: var(--gold); color: #2a1f00; border-color: var(--gold); } .pen-btn[disabled] { cursor: default; } .pen-badge { font-size: 10px; color: var(--gold); font-weight: 700; } /* Penaltı atış skoru (ESPN) — "Pen: 4 - 3", kazanan kalın/altın */ .pen-row.pen-score { color: var(--muted); font-weight: 700; } .pen-row.pen-score b { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; min-width: 12px; text-align: center; } .pen-row.pen-score b.pw { color: var(--gold); } .pen-row.pen-score .pen-dash { color: var(--muted); } .lc-badge.live.pen { background: var(--gold); color: #2a1f00; } /* seri penaltı: altın rozet */ .tie.champ-seed { border-color: var(--gold); } /* ---------- Topluluk: emoji reaksiyon + anket (eleme) ---------- */ .engage { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(127, 127, 127, 0.16); } .eg-q { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 5px; text-align: center; } .eg-opts { display: flex; gap: 6px; } .eg-opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; border: 1px solid var(--line2); background: var(--input-bg); color: var(--text); border-radius: 8px; padding: 6px 8px; font-size: 12px; font-weight: 700; min-width: 0; } .eg-opt:hover { border-color: var(--gold); } .eg-opt img { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex: none; } .eg-opt span, .eg-opt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eg-res { display: grid; grid-template-columns: 1fr 64px 34px; align-items: center; gap: 7px; margin: 3px 0; font-size: 11.5px; } .eg-res-t { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eg-res-t img { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; } .eg-bar { height: 7px; background: rgba(127, 127, 127, 0.18); border-radius: 4px; overflow: hidden; } .eg-bar i { display: block; height: 100%; background: #5a6273; border-radius: 4px; transition: width 0.3s; } .eg-res.mine .eg-bar i { background: var(--gold); } .eg-res.mine .eg-res-t { color: var(--gold); font-weight: 800; } .eg-pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); } .eg-tot { text-align: center; font-size: 10.5px; color: var(--muted); margin-top: 2px; } .eg-emojis { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 8px; } .eg-emoji { cursor: pointer; border: 1px solid transparent; background: rgba(127, 127, 127, 0.1); border-radius: 10px; padding: 3px 4px 2px; line-height: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 26px; } .eg-emoji:hover { background: rgba(127, 127, 127, 0.2); } .eg-emoji.on { border-color: var(--gold); background: rgba(244, 197, 66, 0.16); } .eg-emoji .eg-e { font-size: 16px; } .eg-emoji .eg-c { height: 11px; line-height: 11px; font-size: 10px; font-style: normal; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; } .eg-emoji.on .eg-c { color: var(--gold); } /* ＋ ekle butonu + açılır emoji listesi (kart genişlemesin: yalnız eklenenler görünür) */ .eg-add { cursor: pointer; border: 1px dashed var(--line2); background: transparent; color: var(--muted); border-radius: 999px; min-width: 26px; height: 24px; padding: 0 6px; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .eg-add:hover { border-color: var(--gold); color: var(--gold); } .eg-picker { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(127, 127, 127, 0.2); } .eg-picker.hidden { display: none; } .eg-pick { font-size: 16px; padding: 4px 8px; } /* ---------- Seri penaltı takip animasyonu (ekran ortası, 2×, SABİT genişlik) ---------- */ .pk-overlay { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 80; } .pk-overlay.hidden { display: none; } .pk-card { position: relative; box-sizing: border-box; width: min(400px, 94vw); /* SABİT: içerikle değişmez */ background: rgba(12, 22, 38, 0.98); border: 2px solid var(--line2); border-radius: 22px; padding: 24px 28px 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); max-height: 92vh; overflow: auto; } .pk-card.done { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 24px 70px rgba(0, 0, 0, 0.6); } .pk-close { position: absolute; top: 6px; right: 12px; background: transparent; border: 0; color: #9fb0c8; font-size: 36px; line-height: 1; cursor: pointer; padding: 2px 10px; } .pk-close:hover { color: #fff; } .pk-title { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 19px; font-weight: 900; letter-spacing: 0.04em; color: var(--gold); margin: 0 40px 16px; } .pk-team { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; column-gap: 12px; padding: 8px 0; } .pk-flag { width: 44px; height: 32px; object-fit: cover; border-radius: 4px; } .pk-mid { display: flex; align-items: baseline; gap: 7px; min-width: 0; } /* isim kısalır, etiket tam kalır */ .pk-name { font-size: 24px; font-weight: 700; color: #e8eef7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .pk-kick { flex: none; white-space: nowrap; font-weight: 600; font-size: 16px; color: var(--gold); } .pk-num { font-size: 34px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; min-width: 30px; text-align: center; } .pk-slots { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 9px; margin: 7px 0 4px; } .pk-slot { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; border: 2.5px solid #2a3a55; background: #0d1626; color: #6b7c95; } .pk-slot.sc { background: #16361f; border-color: #2bb24c; animation: pkPlop 0.35s ease; } .pk-slot.ms { background: #3a1414; border-color: #e23; animation: pkPlop 0.35s ease; } .pk-slot.up { opacity: 0.5; } .pk-slot.cur { border-color: var(--gold); color: var(--gold); animation: pkBlink 0.7s ease-in-out infinite; } @keyframes pkPlop { 0% { transform: scale(0.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } } @keyframes pkBlink { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 197, 66, 0.6); background: #0d1626; } 50% { box-shadow: 0 0 0 11px rgba(244, 197, 66, 0); background: #2a2310; } } /* GOL/KAÇTI flaşı — body'e eklenir, JS kartın HEMEN ÜSTÜNE konumlar (kartı kapatmaz) */ .pk-flash { position: fixed; z-index: 90; font-size: 40px; font-weight: 900; padding: 12px 32px; border-radius: 16px; white-space: nowrap; pointer-events: none; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.55); animation: pkPop 1.4s ease forwards; transform: translate(-50%, -100%); } /* left/top JS ile = kart üst-orta; -100% tam üstte */ .pk-flash.goal { background: #16361f; color: #4ade80; border: 2px solid #2bb24c; } .pk-flash.miss { background: #3a1414; color: #f87171; border: 2px solid #e23; } @keyframes pkPop { 0% { transform: translate(-50%, -100%) scale(0.5); opacity: 0; } 18% { transform: translate(-50%, -100%) scale(1.12); opacity: 1; } 72% { transform: translate(-50%, -100%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -130%) scale(1); opacity: 0; } } /* Mobil: kart yine SABİT genişlik (94vw), biraz küçük yazı/yuva */ @media (max-width: 560px) { .pk-card { padding: 18px 18px 16px; } .pk-title { font-size: 15.5px; letter-spacing: 0.02em; margin: 0 32px 14px; } .pk-team { grid-template-columns: 38px 1fr auto; column-gap: 9px; } .pk-flag { width: 38px; height: 27px; } .pk-name { font-size: 19px; } .pk-num { font-size: 27px; min-width: 26px; } .pk-slot { width: 38px; height: 38px; font-size: 19px; border-width: 2px; } .pk-slots { gap: 7px; } .pk-flash { font-size: 30px; padding: 11px 26px; } .pk-close { font-size: 32px; } } /* ---------- Şampiyon overlay ---------- */ .champion-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, rgba(20, 66, 47, 0.96), rgba(5, 16, 11, 0.98)); } .champion-overlay.hidden { display: none; } #confetti { position: absolute; inset: 0; width: 100%; height: 100%; } .champion-card { position: relative; text-align: center; padding: 30px 40px; animation: pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); } @keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Türkiye golü kutlaması */ .goal-overlay { --goal-color: var(--accent); position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; /* Task225 — kutlama kartı ve Kapat düğmesi sistem alanlarına taşmaz */ padding: var(--sat) var(--sar) var(--sab) var(--sal); box-sizing: border-box; /* Takım renginde parıltı (turnuva-agnostik) — JS --goal-color'ı ayarlar */ background: radial-gradient( circle at 50% 38%, color-mix(in srgb, var(--goal-color) 42%, transparent), rgba(5, 10, 20, 0.93) ); } .goal-overlay.hidden { display: none; } #goal-balls { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Arkaya ülkeye özgü görsel (emoji) — büyük/soluk, gol yazısı üstünden büyür */ .goal-bg { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5vh; font-size: 44vmin; line-height: 1; opacity: 0.3; pointer-events: none; transform-origin: 50% 100%; filter: drop-shadow(0 0 28px rgba(0, 0, 0, 0.55)); } /* emoji de görseller gibi alt bölgede */ .goal-overlay:not(.hidden) .goal-bg { animation: goalBgIn 1s ease-out both; } @keyframes goalBgIn { from { transform: scale(0.5); } to { transform: scale(1); } } /* Silüet görseli: zemini şeffaf + krem renge boyanmış (PIL ile) -> kutu yok, sayfanın parçası; altta ufuk gibi, soluk */ /* Task305 (kullanıcı) — kutlamanın arkasındaki takım ARMASI ekranı kaplamasın: boyutu sınırlı, alt-orta, yarı saydam (emoji varyantının 44vmin'i armaya uygulanmaz). */ .goal-bg img.crest { width: min(38vmin, 220px); height: min(38vmin, 220px); object-fit: contain; opacity: 0.85; } .goal-bg.has-img { opacity: 1; font-size: 0; filter: none; } .goal-bg.has-img img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 1200px); max-height: 60%; object-fit: contain; object-position: bottom; opacity: 0.7; } /* Renkli fotoğraf: altta, küçültülmüş; kenarlar back color'a doğru erir (radyal mask) -> kutu yok, sahneye karışır */ .goal-bg.has-photo { opacity: 1; font-size: 0; filter: none; } .goal-bg.has-photo img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 1050px); max-height: 48%; object-fit: contain; object-position: bottom; opacity: 0.8; -webkit-mask-image: radial-gradient(135% 115% at 50% 100%, #000 48%, transparent 100%); mask-image: radial-gradient(135% 115% at 50% 100%, #000 48%, transparent 100%); } .goal-flag { height: 0.8em; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); margin-right: 4px; } .goal-card { position: relative; z-index: 1; text-align: center; padding: 16px 24px; } .goal-flames { font-size: clamp(38px, 9vw, 78px); line-height: 1; animation: flameFlick 0.45s ease-in-out infinite alternate; } .goal-text { font-size: clamp(54px, 16vw, 150px); font-weight: 900; letter-spacing: 2px; line-height: 1; margin-top: 4px; background: linear-gradient(180deg, #ffe66a 10%, #ff7a1f 55%, #e0140d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgba(255, 90, 31, 0.65)); animation: goalPop 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both; } .goal-sub { color: #fff; font-size: clamp(26px, 6.6vw, 50px); font-weight: 800; margin-top: 10px; } .goal-scorer { display: flex; gap: 12px; justify-content: center; align-items: baseline; flex-wrap: wrap; color: #ffe66a; font-size: clamp(24px, 5.6vw, 42px); font-weight: 800; margin-top: 16px; } @keyframes goalPop { 0% { transform: scale(0.15); opacity: 0; } 55% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } } @keyframes flameFlick { from { transform: scale(1) rotate(-4deg); filter: brightness(1); } to { transform: scale(1.14) rotate(4deg); filter: brightness(1.3); } } .champion-trophy { font-size: clamp(70px, 16vw, 130px); filter: drop-shadow(0 8px 30px rgba(244, 197, 66, 0.6)); animation: trophy 2.4s ease-in-out infinite; } @keyframes trophy { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } } .champion-label { letter-spacing: 5px; font-weight: 800; color: var(--gold); margin-top: 8px; font-size: clamp(13px, 2.6vw, 18px); } .champion-flag { width: clamp(120px, 26vw, 200px); border-radius: 8px; margin: 18px auto 10px; display: block; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 0 3px var(--gold); animation: wave 3s ease-in-out infinite; } @keyframes wave { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } } .champion-name { font-size: clamp(34px, 9vw, 76px); font-weight: 900; line-height: 1; background: linear-gradient(90deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 6px 30px rgba(244, 197, 66, 0.3); } .champion-stars { color: var(--gold); letter-spacing: 6px; margin-top: 12px; font-weight: 800; } .champion-close { margin-top: 26px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; padding: 9px 22px; border-radius: 10px; cursor: pointer; font-weight: 700; } .champion-close:hover { background: rgba(255, 255, 255, 0.2); } /* ---------- Açılış seremonisi (geçit töreni) ---------- */ .ceremony-overlay { position: fixed; inset: 0; z-index: 82; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, rgba(20, 66, 47, 0.97), rgba(5, 16, 11, 0.99)); } .ceremony-overlay.hidden { display: none; } #confetti3 { position: absolute; inset: 0; width: 100%; height: 100%; } .ceremony-card { position: relative; text-align: center; width: min(960px, 98vw); padding: 10px; animation: pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); } .ceremony-emoji { font-size: clamp(40px, 8vw, 64px); filter: drop-shadow(0 6px 20px rgba(244, 197, 66, 0.45)); animation: trophy 2.4s ease-in-out infinite; } .ceremony-title { font-size: clamp(24px, 5.5vw, 44px); font-weight: 900; letter-spacing: 1px; margin-top: 4px; background: linear-gradient(90deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 6px 30px rgba(244, 197, 66, 0.3); } .ceremony-sub { color: #cfeede; font-size: clamp(13px, 2.6vw, 18px); margin-top: 6px; font-weight: 600; } .ceremony-parade { position: relative; overflow: hidden; width: 100%; margin: 22px 0 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .parade-track { display: flex; gap: 26px; width: max-content; animation: paradeMarch 45s linear infinite; } .ceremony-parade:hover .parade-track { animation-play-state: paused; } @keyframes paradeMarch { from { transform: translateX(0); } to { transform: translateX(-50%); } } .parade-flag { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; flex: none; } .parade-flag img { width: 74px; height: 50px; object-fit: cover; border-radius: 5px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--gold); animation: wave 3s ease-in-out infinite; } .parade-flag span { font-size: 12px; font-weight: 700; color: #eaf5ef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92px; } .ceremony-count { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; align-items: center; color: #eaf5ef; font-size: clamp(13px, 2.6vw, 17px); margin-top: 4px; } .ceremony-count b { color: var(--gold); } .cer-left b { font-variant-numeric: tabular-nums; } /* ---------- Kupa başlangıç geri sayımı ---------- */ .countdown { margin: 14px auto 6px; max-width: 760px; text-align: center; background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line2); border-radius: var(--radius); padding: 16px 14px; box-shadow: var(--shadow); animation: cdIn 0.6s cubic-bezier(0.2, 1, 0.3, 1); } .countdown.hidden { display: none; } @keyframes cdIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } .cd-head { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: clamp(13px, 3vw, 17px); color: var(--text); letter-spacing: 0.5px; text-transform: uppercase; } .cd-trophy { font-size: 1.35em; filter: drop-shadow(0 3px 8px rgba(244, 197, 66, 0.4)); animation: trophy 2.6s ease-in-out infinite; } .cd-boxes { display: flex; justify-content: center; gap: clamp(8px, 2.4vw, 18px); margin-top: 12px; } .cd-box { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: clamp(56px, 16vw, 88px); padding: 12px 6px; border-radius: 12px; background: var(--input-bg); border: 1px solid var(--line); } .cd-box b { font-size: clamp(28px, 8.5vw, 48px); font-weight: 900; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; text-shadow: 0 3px 16px rgba(0, 0, 0, 0.35); } .cd-box span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); } .cd-when { margin-top: 11px; font-size: 12px; color: var(--muted); } .cd-d-sep { display: none; } /* ---------- Favori takım bandı ---------- */ .fav-band { display: flex; flex-direction: column; gap: 8px; position: relative; max-width: 760px; margin: 10px auto 4px; padding: 10px 14px; background: linear-gradient(90deg, rgba(25, 224, 138, 0.12), var(--panel)); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow); } .fav-band.hidden { display: none; } .fb-title { display: flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } /* Favori bandı: tek tuşla tüm maçları takvime ekle (başlık satırında, sağda; alttaki satırlara yapışmaz) */ .fb-calall { margin-left: auto; margin-right: 28px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; background: var(--panel2); color: var(--accent); border: 1px solid var(--line2); border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 800; line-height: 1.4; white-space: nowrap; } .fb-calall:hover { border-color: var(--green); transform: translateY(-1px); } @media (max-width: 560px) { .fb-calall span { display: none; } .fb-calall { padding: 5px 9px; } } /* Favori bandı köşesi: favori takım seçim ekranını açan ikon */ .fb-edit { position: absolute; top: 8px; right: 10px; background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 4px; line-height: 0; border-radius: 6px; } .fb-edit:hover { color: var(--accent); background: rgba(255, 255, 255, 0.05); } .fb-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; } .fb-row + .fb-row { border-top: 1px solid var(--line); padding-top: 8px; } .fb-star { font-size: 18px; } .fb-team { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; } .fb-team img { width: 26px; height: 18px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); } .fb-info { color: var(--text); font-size: 13px; } .fb-info b { color: var(--accent); } .fb-left { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 800; } .fb-ics { margin-left: auto; cursor: pointer; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); border-radius: 9px; padding: 6px 12px; font-weight: 700; font-size: 13px; transition: 0.15s; white-space: nowrap; } .fb-ics:hover { border-color: var(--accent); transform: translateY(-1px); } .fb-ics.added { color: var(--accent); border-color: var(--accent); background: rgba(25, 224, 138, 0.1); } .fb-pick { cursor: pointer; background: transparent; border: 0; color: var(--accent); font-weight: 800; font-size: 14px; padding: 2px 0; text-decoration: underline; } .fb-empty { color: var(--muted); font-size: 13px; padding: 2px 2px; } .fb-all { display: block; width: fit-content; margin: 4px auto 0; cursor: pointer; background: var(--panel2); border: 1px solid var(--line2); color: var(--accent); border-radius: 999px; padding: 5px 14px; font-weight: 700; font-size: 12px; transition: 0.12s; } .fb-all:hover { border-color: var(--accent); } .wm-row { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); } .wm-stage { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; } .wm-main { display: flex; align-items: center; gap: 10px; } .wm-teams { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; } .wm-main .tm-right { white-space: nowrap; } .watch-clear { display: block; margin: 0 0 10px auto; cursor: pointer; background: transparent; border: 1px solid var(--line2); color: var(--red); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; } .watch-clear:hover { border-color: var(--red); } /* ---------- İlk ziyaret: favori takım seçici ---------- */ .fav-card { width: min(94vw, 470px); } .fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 52vh; overflow-y: auto; margin: 6px 0; padding: 2px; } .fav-chip { display: flex; align-items: center; gap: 7px; cursor: pointer; text-align: left; background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; padding: 7px 8px; color: var(--text); font-size: 12px; font-weight: 600; transition: 0.12s; } .fav-chip img { width: 22px; height: 15px; object-fit: cover; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); } .fav-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fav-chip:hover { border-color: var(--green); } .fav-chip.on { border-color: var(--accent); background: rgba(25, 224, 138, 0.16); box-shadow: inset 0 0 0 1px var(--accent); } /* ---------- Takım turnuva programı popup ---------- */ .team-link { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-width: 0; } /* Puan durumu / grup / eleme takım adları tıklanabilir (takım popup'ı) — display değişmez, ellipsis korunur */ .tn-link { cursor: pointer; } @media (hover: hover) { .tn-link:hover { text-decoration: underline; } } .team-link:hover b { text-decoration: underline; } .team-link img { width: 24px; height: 16px; object-fit: cover; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); } .team-link b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-card { width: min(94vw, 480px); max-height: 86vh; overflow-y: auto; position: relative; } .tm-close { position: sticky; /* kart içinde kaydırılsa da hep görünür (üst-sağ) */ top: -6px; z-index: 5; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; /* float DEĞİL: float:right içeriği sağdan daraltıp ortalamayı bozuyordu. Blok + margin-left:auto ile X sağa yaslanır, içerik tam genişlikte ortalı kalır; negatif alt margin ile aşağıdaki içerik X'in altından başlar (X üst-sağ köşede içeriğin üstüne biner, kaydırmada sabit kalır). */ margin: -10px -8px -32px auto; background: var(--panel2); border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 19px; cursor: pointer; line-height: 1; } .tm-close:hover { color: var(--text); border-color: var(--accent); } .tm-head { display: flex; align-items: center; gap: 12px; margin: 2px 0 14px; } .tm-head img { width: 46px; height: 31px; object-fit: cover; border-radius: 4px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); } .tm-name { font-size: 20px; font-weight: 900; line-height: 1.1; } .tm-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .tm-body { display: flex; flex-direction: column; gap: 6px; } .tm-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); } .tm-stage { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; } .tm-opp { display: flex; align-items: center; gap: 7px; min-width: 0; } .tm-opp img { width: 22px; height: 15px; object-fit: cover; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); } .tm-opp span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 13px; } .tm-right { text-align: right; white-space: nowrap; } .tm-when { font-size: 10px; color: var(--muted); margin-right: 8px; } .tm-score { font-weight: 900; font-size: 15px; } .tm-score.win { color: var(--green); } .tm-score.loss { color: var(--red); } .tm-score.draw { color: var(--gold); } /* Sonuç harf rozeti: G/B/M (W/D/L) — renge ek net gösterge */ .tm-res { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; font-size: 11px; font-weight: 900; color: #fff; margin-right: 7px; flex: none; } .tm-res.win { background: var(--green); } .tm-res.loss { background: var(--red); } .tm-res.draw { background: var(--gold); color: #1a1206; } .tm-time { font-size: 11px; color: var(--muted); } .tm-tbd { color: var(--muted); font-style: italic; font-size: 13px; } /* ---------- Maç detayı (gol/kart) popup'ı + işaretler ---------- */ .dt-i { cursor: pointer; color: var(--accent); font-size: 11px; margin-left: 3px; opacity: 0.8; } .dt-i:hover { opacity: 1; } .gmatch.has-detail, .tie.has-detail, .live-card.has-detail { cursor: pointer; } .has-detail .team-link, .has-detail .wstar { cursor: pointer; } /* kendi tıklanabilirlikleri */ /* Kırmızı kart işareti: bayrağın altında küçük kart + ×N rozeti */ .flag-wrap { position: relative; display: inline-flex; flex: none; line-height: 0; } /* Bayrağın tam ÜSTÜNDE, opak zeminli okunaklı rozet — bayrağı kapatmaz */ .rc-badge { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: -4px; /* logonun üst kısmına birkaç px binsin (kullanıcı isteği) */ display: inline-flex; align-items: center; gap: 2px; background: #0e1626; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 0 3px 0 2px; font-size: 9px; font-weight: 800; color: #fff; line-height: 1.4; white-space: nowrap; pointer-events: none; z-index: 3; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); } .rc-badge .rc { width: 5px; height: 8px; border-radius: 1.5px; background: #e0322f; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5); display: inline-block; } /* Task306 (kullanıcı) — compact satırda kırmızı kart ADIN YANINDA: normal görünümde arma üstü rozet kalır (lc-rc gizli), compact'ta tersine döner. Tek kartta sayı yok. */ .lc-rc { display: none; align-items: center; gap: 1px; font-size: 9px; font-weight: 800; color: var(--muted); white-space: nowrap; flex: none; } .lc-rc .rc { width: 6px; height: 9px; border-radius: 1.5px; background: #e0322f; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5); display: inline-block; } .cd-compact .live-card .lc-rc { display: inline-flex; } .cd-compact .live-card .rc-badge { display: none; } /* ---------- Canlı skor vurgusu (WC deseni, 15 sn) — gol olan maç yeşil ince çizgi ----- */ .gmatch.just-updated, .tie.just-updated, .live-card.just-updated { border-radius: 10px; box-shadow: 0 0 0 2px rgba(25, 224, 138, 0.55), 0 0 16px rgba(25, 224, 138, 0.35); animation: upd-pulse 1.1s ease-in-out 2; } /* Task309 (kullanıcı) — gol vurgusunda SKORUN KENDİSİ de renklenir: canlı maç gösterimi olan her yerde (kart, kompakt satır, fikstür satırı, canlı bant, takvim) 15 sn'lik vurgu penceresi boyunca rakamlar aksan renginde parlar. */ .gmatch.just-updated .gscore b, .gmatch.just-updated .gscore .colon, .live-card.just-updated .score-box b, .live-card.just-updated .lc-x, .tie.just-updated .score b { color: var(--accent); text-shadow: 0 0 10px rgba(25, 224, 138, 0.45); /* Task319 (kullanıcı) — rakamlar kenar çizgisiyle AYNI ritimde yanıp söner (upd-pulse ile eş süre/sayı); nabızlar bitince renk vurgusu 15 sn sürer. */ animation: skor-pulse 1.1s ease-in-out 2; } @keyframes skor-pulse { 0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(25, 224, 138, 0.35); } 50% { opacity: 0.45; text-shadow: 0 0 18px rgba(25, 224, 138, 0.95); } } @media (prefers-reduced-motion: reduce) { .gmatch.just-updated .gscore b, .gmatch.just-updated .gscore .colon, .live-card.just-updated .score-box b, .live-card.just-updated .lc-x, .tie.just-updated .score b { animation: none; } } @keyframes upd-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(25, 224, 138, 0.5), 0 0 14px rgba(25, 224, 138, 0.3); } 50% { box-shadow: 0 0 0 3px rgba(25, 224, 138, 0.95), 0 0 28px rgba(25, 224, 138, 0.75); } } /* Puan durumu satır vurgusu (içe parıltı; mevcut zemini bozmaz) */ tr.just-updated-row td { box-shadow: inset 0 0 12px rgba(25, 224, 138, 0.25); animation: row-pulse 1.1s ease-in-out 2; } tr.just-updated-row td:first-child { box-shadow: inset 3px 0 0 var(--accent), inset 0 0 12px rgba(25, 224, 138, 0.25); } @keyframes row-pulse { 0%, 100% { box-shadow: inset 0 0 12px rgba(25, 224, 138, 0.25); } 50% { box-shadow: inset 0 0 26px rgba(25, 224, 138, 0.6); } } @media (prefers-reduced-motion: reduce) { .gmatch.just-updated, .tie.just-updated, .live-card.just-updated, tr.just-updated-row td { animation: none; } } /* Salt-okunur skor input'u dokunuşu yutmasın -> kart dokunma hedefi güvenilir olsun */ .stepper.ro input { pointer-events: none; } .dt-head { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 20px; } /* ✕'e yapışmasın */ /* Skor satırı, sağ-üstteki mutlak ✕ ile 2. takım logosu çakışmasın diye içeri alınır (simetrik boşluk → ortalama korunur; skorio-head ayrı, etkilenmez). */ .dt-head .dt-score { padding: 0 34px; } .dt-score { display: flex; align-items: center; justify-content: center; gap: 12px; } .dt-score b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; flex: none; } .dt-tm { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; min-width: 0; flex: 1; } .dt-tm.away { justify-content: flex-end; } .dt-tm img { width: 26px; height: 18px; object-fit: cover; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); } .dt-tm span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Task062: yukarıdaki kural takım ADINI kısaltmak için; ama .flag-wrap de bir olduğundan kırmızı kart rozetinin logo üstüne taşan kısmını da kırpıyordu (özgüllüğü .flag-wrap'ten yüksek). Rozet maç kartlarındakiyle aynı şekilde tam görünsün. */ .dt-tm .flag-wrap { overflow: visible; } .dt-head .tm-sub { text-align: center; } .dt-row { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-bottom: 1px solid var(--line); font-size: 14px; } .dt-row:last-child { border-bottom: none; } .dt-row.a { flex-direction: row-reverse; text-align: right; } .dt-ic { flex: none; width: 20px; text-align: center; } .dt-min { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 38px; flex: none; } .dt-row.a .dt-min { text-align: right; } .dt-pl { flex: 1; min-width: 0; } /* Değişiklik satırı: giren/çıkan alt alta (taşmaz), biraz küçük font */ .dt-subwrap { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.18; font-size: 13px; } .dt-row.a .dt-subwrap { align-items: flex-end; } .dt-subin { color: #2ecc71; white-space: nowrap; } .dt-subout { color: #e0584f; white-space: nowrap; } /* ---------- Kadro / diziliş (Detaylar | Kadro sekmeleri) ---------- */ /* Task064: zemin/kenarlık sabit yeşil yazılmıştı ama renk `--green` token'ından geliyordu; takım-renkleri temasında token maviye döndüğü için MAVİ ikon + YEŞİL hap çıkıyordu. Üçü de aynı token'dan türetiliyor → her temada tutarlı. */ .lu-sign { cursor: pointer; color: var(--green); font-size: 11px; font-weight: 700; margin-left: 5px; background: color-mix(in srgb, var(--green) 14%, transparent); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); border-radius: 999px; padding: 1px 7px; white-space: nowrap; } .lu-sign:hover { background: color-mix(in srgb, var(--green) 24%, transparent); } /* Task064 — WC'de bu işaret 👥 emojisiydi; CupDaily'de tema-uyumlu SVG (CLAUDE.md ilke 3). Hap tasarımı korunuyor, yalnız SVG'nin hizası/boyutu ayarlanıyor. */ .lu-sign svg { width: 13px; height: 13px; vertical-align: -2px; } .dt-tabs { display: flex; gap: 6px; margin-bottom: 10px; } .dt-tab { flex: 1; cursor: pointer; background: var(--card-2, rgba(255, 255, 255, 0.04)); color: var(--muted); border: 1px solid var(--line); border-radius: 9px; padding: 8px; font-weight: 700; font-size: 13px; white-space: nowrap; /* etiket ikinci satıra sarkmasın (Skorinho: Puan Durumu/Tahminlerim…) */ transition: 0.15s; } @media (max-width: 460px) { .dt-tab { font-size: 11.5px; padding: 8px 4px; } } .dt-tab.active { background: var(--accent-fill); color: var(--on-accent); border-color: var(--green-d); } .dt-pane.hidden { display: none; } /* Sekmeli detay popup'ı: panel sabit yükseklik + iç kaydırma -> boyut sabit kalır */ .modal-card.dt-fixed .dt-pane { height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Maç istatistikleri: ev–deplasman karşılaştırmalı çubuklar */ .ms-row { padding: 8px 2px; } .ms-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; } .ms-label { font-size: 12px; color: var(--muted); font-weight: 700; text-align: center; flex: 1; } .ms-h, .ms-a { font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; min-width: 40px; } .ms-h { text-align: left; } .ms-a { text-align: right; } .ms-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--line); } /* Ev/deplasman için tema-bağımsız kontrast renkler (navy'de --green ve --accent ikisi de mavi) */ .ms-bh { background: #2ecc71; height: 100%; } .ms-ba { background: #f5a524; height: 100%; } .ms-h { color: #2ecc71; } .ms-a { color: #f5a524; } /* Oyuncu değişiklikleri */ .ms-subs-h { margin: 14px 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); } .ms-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; } .ms-sub { display: flex; gap: 6px; font-size: 12px; padding: 3px 0; align-items: baseline; } .ms-min { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 28px; flex: none; } .ms-io { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ms-in { color: #2ecc71; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ms-out { color: #e0584f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lu-switch { display: flex; gap: 6px; margin-bottom: 12px; } .lu-team-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; background: var(--card-2, rgba(255, 255, 255, 0.04)); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 7px 8px; font-weight: 700; font-size: 12px; min-width: 0; } /* Task154 — Kullanıcı: "diziliş yanındaki takım logoları bazen taşıyor, logo yüksekliğe göre ayarlanmalı." Kutu 22x15 (bayrak/lig logosu ölçüsü) ve `cover` idi: kare armalar KIRPILIYOR, geniş olanlar kutuyu zorluyordu. Artık YÜKSEKLİK sabit, genişlik oranla gelir ve `contain` ile hiçbir arma kırpılmaz. */ .lu-team-btn img { width: auto; height: 18px; max-width: 26px; object-fit: contain; border-radius: 0; flex: none; box-shadow: none; } .lu-team-btn.active { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; } .lu-form { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; white-space: nowrap; /* "4-2-3-1*" düğme içinde satır atlıyordu */ } /* Task116 — Diziliş bu maçtan DEĞİL (en yakın maçtan ya da varsayılan): yıldızlı ve kesikli altı çizili; açıklaması ipucunda. Türetilmiş bilgi kaynak veri gibi durmaz. */ .lu-form-approx { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; } /* Task317 (kullanıcı) — saha sağ üstünde paylaş: zemin her temada YEŞİL olduğundan düğme yarı saydam koyu daire + beyaz ikondur (tema değişkenine bağlanmaz). */ .lu-share { position: absolute; top: 8px; right: 8px; z-index: 6; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.35); color: #fff; cursor: pointer; padding: 0; } .lu-share:hover { background: rgba(0, 0, 0, 0.55); } /* Paylaşım penceresi: yalnız saha görseli — klon ETKİLEŞİMSİZ (oyuncu tıklanmaz) */ .lushare-card { max-width: 440px; } #lushare-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; } #lushare-head { display: flex; flex-direction: column; gap: 2px; padding-right: 44px; /* ✕ ile çakışmasın (ilke 4) */ } .lushare-pitch { pointer-events: none; } .lushare-pitch .lu-pitch { margin: 0; } .lushare-btn { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px auto 2px; } .lu-pitch { position: relative; background: repeating-linear-gradient(0deg, #1f8a4c 0 38px, #1c7f46 38px 76px); border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 12px; padding: 14px 8px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 460px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); overflow: hidden; } .lu-pitch::before { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; border-top: 2px solid rgba(255, 255, 255, 0.22); } .lu-pitch::after { content: ''; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border: 2px solid rgba(255, 255, 255, 0.22); border-radius: 50%; } .lu-line { display: flex; justify-content: center; align-items: flex-start; position: relative; z-index: 1; } .lu-pl { width: calc(100% / var(--cols, 4)); box-sizing: border-box; /* Task405 rev — oyuncu (ve reyting rozeti) saha üstündeki anahtarın ÜSTÜNDE kalır */ position: relative; z-index: 2; padding: 0 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; } /* eşit slot -> dar satırlar geniş satırın orta slotlarıyla hizalanır */ .lu-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: #06120b; font-weight: 800; font-size: 12px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); } .lu-nm { font-size: 10px; font-weight: 700; color: #fff; text-align: center; line-height: 1.1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 76px; } /* Task434 (kullanıcı: "ortalama yaş yazıları bile okunamıyor") — hazırlık maçlarında bir hat BEŞ kişiye çıkabiliyor; slot daralınca isim ve nitelik rozeti okunmaz oluyordu. Geniş satırda yazı küçülür ve rozet oyuncunun altına toplanır. */ .lu-pitch[style*='--cols:5'] .lu-nm, .lu-pitch[style*='--cols:6'] .lu-nm, .lu-pitch[style*='--cols:7'] .lu-nm { font-size: 9px; max-width: 100%; } .lu-pitch[style*='--cols:5'] .lu-av-meta, .lu-pitch[style*='--cols:6'] .lu-av-meta, .lu-pitch[style*='--cols:7'] .lu-av-meta { left: 50%; transform: translateX(-50%); max-width: 100%; font-size: 8px; } .lu-bench { margin-top: 12px; } .lu-bench-h { font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; } .lu-bench-list { display: flex; flex-wrap: wrap; gap: 6px; } .lu-bp { font-size: 11px; background: var(--card-2, rgba(255, 255, 255, 0.05)); border: 1px solid var(--line); border-radius: 7px; padding: 3px 8px; white-space: nowrap; } .lu-bp b { color: var(--green); } /* ---------- Sol alt: Paylaş / Yükle ---------- */ .fab-stack { position: fixed; left: 14px; /* Task416 — alta yapışan yüzen öğeler görünür alanın dibinden ölçülür (uygulama-içi tarayıcıda düzen alanı daha yüksek; normal tarayıcıda --vvb sıfırdır). */ bottom: calc(14px + var(--vvb, 0px)); z-index: 56; display: flex; flex-direction: column; gap: 8px; } .fab-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: var(--accent-fill); color: var(--on-accent); border: 1px solid var(--green-d); border-radius: 999px; padding: 9px 15px; font-weight: 800; font-size: 13px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); transition: 0.15s; } .fab-btn:hover { transform: translateY(-2px); } .fab-btn.hidden { display: none; } .fab-lbl { font-size: 13px; } @media (max-width: 520px) { .fab-lbl { display: none; } .fab-btn { padding: 11px; font-size: 16px; } } /* ---------- iPhone kurulum ipucu ---------- */ .ios-install { position: fixed; right: 10px; left: auto; /* Task416 — alta yapışan yüzen öğeler görünür alanın dibinden ölçülür (uygulama-içi tarayıcıda düzen alanı daha yüksek; normal tarayıcıda --vvb sıfırdır). */ bottom: calc(37px + var(--vvb, 0px)); z-index: 60; max-width: min(92vw, 440px); display: flex; align-items: center; gap: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--accent); border-radius: 14px; padding: 12px 34px 12px 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); font-size: 13px; font-weight: 600; line-height: 1.35; animation: cdIn 0.5s ease; } .ios-install.hidden { display: none; } .ios-x { position: absolute; top: 5px; right: 8px; background: transparent; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; line-height: 1; } .ios-share-ico { color: var(--accent); flex: none; display: inline-flex; align-items: center; } /* Aşağı bakan zıplayan ok — Safari Paylaş düğmesini gösterir (ekranın sağ-altı, ~7/8 genişlik) */ .ios-arrow { position: fixed; left: 84.4%; bottom: 6px; transform: translateX(-50%); color: var(--accent); font-size: 42px; line-height: 1; font-weight: 900; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); pointer-events: none; animation: iosBounce 1.2s ease-in-out infinite; } @keyframes iosBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } /* ---------- Haberler: ikon + sağ çekmece ---------- */ .news-btn { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 55; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--accent-fill); color: var(--on-accent); border: 1px solid var(--green-d); border-right: none; border-radius: 12px 0 0 12px; padding: 12px 8px; cursor: pointer; box-shadow: -4px 4px 18px rgba(0, 0, 0, 0.4); font-weight: 800; } .news-btn { transition: opacity 0.25s ease; } body.detail-open .news-btn { opacity: 0; pointer-events: none; } /* maç detayı açıkken Haberler butonu gizli (X'i kapatmasın) */ .news-btn:hover { padding-right: 12px; } .news-ico { font-size: 20px; } .news-lbl { font-size: 11px; writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 1px; } .news-overlay { position: fixed; inset: 0; z-index: 73; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s; } .news-overlay.show { opacity: 1; pointer-events: auto; } .news-drawer { position: fixed; top: 0; right: 0; z-index: 74; height: 100%; width: min(380px, 92vw); background: linear-gradient(180deg, var(--panel), var(--bg)); border-left: 1px solid var(--line2); box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5); transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.3, 1, 0.4, 1); display: flex; flex-direction: column; } .news-drawer.open { transform: translateX(0); } .nd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); } .nd-title { font-size: 17px; font-weight: 800; } .nd-close { background: transparent; border: 1px solid var(--line2); color: var(--text); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px; } .nd-close:hover { border-color: var(--green); } .nd-body { flex: 1; overflow-y: auto; padding: 8px 14px 14px; } .nd-foot { padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; } .nd-sec { border-bottom: 1px solid var(--line); } .nd-sec > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; font-size: 15px; font-weight: 800; } .nd-sec > summary::-webkit-details-marker { display: none; } .nd-sec > summary::before { content: '▸'; margin-right: 8px; color: var(--accent); transition: transform 0.2s; } .nd-sec[open] > summary::before { transform: rotate(90deg); } .nd-count { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--panel2); border: 1px solid var(--line2); border-radius: 999px; padding: 2px 9px; } .nd-list { padding-bottom: 10px; } .nd-empty { color: var(--muted); font-size: 13px; padding: 6px 6px 14px; } .news-match { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } .nm-teams { display: flex; align-items: center; gap: 7px; font-size: 14px; flex-wrap: wrap; } .nm-teams img { width: 22px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); } .nm-vs { color: var(--muted); } .nm-meta { font-size: 11px; color: var(--muted); margin: 4px 0 8px; } .nm-links { display: flex; flex-direction: column; gap: 6px; } .nm-links a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); background: var(--input-bg); border: 1px solid var(--line2); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-weight: 600; } .nm-links a:hover { border-color: var(--green); background: #0a2016; } .lang { font-size: 10px; font-weight: 900; color: #fff; padding: 1px 6px; border-radius: 4px; flex: none; } .lang.tr { background: var(--tr); } .lang.en { background: #2f6fed; } .lang.local { background: var(--green-d); } /* ---------- Tur kutlaması overlay'i ---------- */ .stage-overlay { position: fixed; inset: 0; z-index: 78; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, rgba(15, 58, 42, 0.97), rgba(5, 16, 11, 0.98)); padding: 16px; } .stage-overlay.hidden { display: none; } #confetti2 { position: absolute; inset: 0; width: 100%; height: 100%; } .stage-card { position: relative; text-align: center; width: min(720px, 96vw); max-height: 90vh; display: flex; flex-direction: column; animation: pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); } .stage-emoji { font-size: clamp(44px, 9vw, 72px); filter: drop-shadow(0 6px 20px rgba(244, 197, 66, 0.4)); } .stage-title { font-size: clamp(22px, 5vw, 38px); font-weight: 900; letter-spacing: 1px; margin-top: 6px; background: linear-gradient(90deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stage-sub { color: var(--accent); font-weight: 700; font-size: clamp(13px, 2.4vw, 16px); margin: 4px 0 14px; } .stage-list { overflow-y: auto; padding: 4px 6px; } .qsec-title { text-align: left; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 12px 0 8px; } .qgrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .qchip { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; padding: 7px 10px; } .qchip img { width: 26px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); flex: none; } .qchip .qg { font-size: 10px; font-weight: 900; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--chip-bg); color: var(--muted); border: 1px solid var(--line); flex: none; } .qchip .qn { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: left; } .qchip .qr { font-size: 11px; font-weight: 900; flex: none; } .qchip.r1 { border-color: var(--green); } .qchip.r1 .qr { color: var(--green); } .qchip.r2 { border-color: var(--green-d); } .qchip.r2 .qr { color: var(--green); } .qchip.r3 { border-color: var(--gold-d); } .qchip.r3 .qr { color: var(--gold); } .qpairs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .qpair { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; flex: 1 1 280px; max-width: 460px; } .qpair .qside { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .qpair .qside:first-child { justify-content: flex-end; } .qpair .qside img { width: 28px; height: 20px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); flex: none; } .qpair .qside b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qpair .qvs { color: var(--muted); font-weight: 800; flex: none; } /* ---------- Çeşitli ---------- */ /* Task211 — Kullanıcı: "𝕏 / İletişim / Bilgi'nin altındaki boşluğu biraz daralt." Ölçüldü: bağlantıların altında 32px (20px dolgu + kutu), mobilde ayrıca 60px kenar boşluğu vardı; alt gezinme çubuğuyla arası 39px'ti. Dolgu 20 → 10px. */ .foot { text-align: center; color: var(--muted); font-size: 12px; padding: 30px 12px 10px; } .disclaimer-btn { display: inline-block; margin: 0 auto 12px; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 700; opacity: 0.8; } .disclaimer-btn:hover { opacity: 1; border-color: var(--accent); color: var(--accent); } .disclaimer-bar { margin: 0 auto 16px; padding: 0 16px; max-width: 620px; text-align: center; font-size: 11px; line-height: 1.4; color: var(--muted); opacity: 0.7; text-wrap: pretty; } .disclaimer-bar.hidden { display: none; } .hitstats { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 999px; padding: 6px 14px; } .hit-item { font-size: 12px; color: var(--muted); } .hit-item b { color: var(--accent); font-weight: 800; } .hit-sep { color: var(--line2); } .foot-contact { margin-bottom: 8px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .contact-link, .x-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); background: var(--panel2); border: 1px solid var(--line2); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; } .contact-link:hover, .x-link:hover { border-color: var(--green); color: var(--accent); } .toast { position: fixed; /* Task416 — alta yapışan yüzen öğeler görünür alanın dibinden ölçülür (uygulama-içi tarayıcıda düzen alanı daha yüksek; normal tarayıcıda --vvb sıfırdır). */ bottom: calc(18px + var(--vvb, 0px)); left: 50%; transform: translateX(-50%); z-index: 70; background: var(--panel2); border: 1px solid var(--line2); color: var(--text); padding: 10px 16px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow); transition: opacity 0.2s; } .hidden { display: none !important; } /* Yerel depolama bilgilendirme çubuğu (alt) */ .consent-bar { position: fixed; left: 50%; /* Task416 — alta yapışan yüzen öğeler görünür alanın dibinden ölçülür (uygulama-içi tarayıcıda düzen alanı daha yüksek; normal tarayıcıda --vvb sıfırdır). */ bottom: calc(12px + var(--vvb, 0px)); transform: translateX(-50%); z-index: 85; width: min(680px, 94vw); display: flex; align-items: center; gap: 12px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); } .consent-txt { font-size: 12px; color: var(--text); line-height: 1.4; } .consent-ok { flex: none; cursor: pointer; border: 1px solid var(--green-d); border-radius: 8px; background: var(--accent-fill); color: var(--on-accent); font-weight: 800; font-size: 13px; padding: 7px 16px; } .consent-ok:hover { transform: translateY(-1px); } @media (max-width: 560px) { .consent-bar { flex-direction: column; align-items: stretch; text-align: center; bottom: 8px; } } /* ---------- Skor kutusu (rakam-only + spinner) ---------- */ .stepper { display: inline-flex; align-items: center; gap: 3px; } .stepper input { width: 34px; height: 30px; text-align: center; border-radius: 7px; border: 1px solid var(--line2); background: var(--input-bg); color: var(--input-text); font-size: 15px; font-weight: 800; padding: 0; } .stepper input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(25, 224, 138, 0.25); } .stepper input:disabled { opacity: 0.9; } .stepper.ro input { width: 26px; border-color: transparent; background: transparent; } .spin { display: flex; flex-direction: column; gap: 2px; } .spin button { width: 18px; height: 14px; display: flex; align-items: center; justify-content: center; font-size: 8px; line-height: 1; border: 1px solid var(--line2); background: var(--panel2); color: var(--muted); border-radius: 4px; cursor: pointer; padding: 0; user-select: none; -webkit-tap-highlight-color: transparent; } .spin button:hover { border-color: var(--green); color: var(--text); } .spin button:active { background: var(--green); color: var(--on-accent); } .tie .stepper input { width: 32px; height: 28px; } /* ---------- Favori takım vurgusu (ziyaretçiye özel, ⭐) ---------- */ :root { --tr: #e30a17; } .gmatch.fav-match { position: relative; border-radius: 9px; background: linear-gradient(90deg, var(--fav-bg), transparent); box-shadow: inset 4px 0 0 var(--fav); } /* Task229 — İzleme listesindeki maç fikstür satırında da belli olur (mor şerit). */ .gmatch.watch-match { position: relative; border-radius: 9px; box-shadow: inset 4px 0 0 var(--watch, #a06cf0); } .gmatch.fav-match.watch-match { box-shadow: inset 4px 0 0 var(--fav); /* favori kazanır */ } .fav-tag { position: absolute; top: 2px; right: 4px; font-size: 12px; line-height: 1; color: var(--gold); text-shadow: 0 0 6px rgba(244, 197, 66, 0.7); } .fav-row td { background: linear-gradient(90deg, var(--fav-bg), transparent) !important; } .fav-row .tn { color: var(--fav-name); } .tie.fav-match { border-color: var(--fav); box-shadow: 0 0 0 1px var(--fav), 0 0 18px var(--fav-glow); } /* Puan cetvelindeki favori yıldız düğmesi */ .fav-star { margin-left: auto; background: none; border: none; cursor: pointer; padding: 0 2px; font-size: 15px; line-height: 1; color: var(--line2); transition: transform 0.1s, color 0.15s; flex: none; } .fav-star:hover { color: var(--gold); transform: scale(1.2); } .fav-star.on { color: var(--gold); text-shadow: 0 0 8px rgba(244, 197, 66, 0.65); } .live-card.fav-match { position: relative; } /* ---------- İzleme listesi göz ikonu (tek renk: kapalı soluk, açık altın) ---------- */ .wstar { background: transparent; border: 0; cursor: pointer; color: var(--line2); padding: 2px; display: inline-flex; align-items: center; line-height: 0; transition: color 0.12s, transform 0.1s; flex: none; touch-action: manipulation; } /* Hover rengi yalnızca gerçek hover (fare) cihazlarda — mobilde "yapışkan hover" rengi kalmasın */ @media (hover: hover) { .wstar:hover { color: var(--gold); transform: scale(1.12); } } .wstar.on { color: var(--gold); } .wstar.on svg circle { fill: currentColor; } /* eklendiğinde göz "dolu" */ .wstar.on svg path { fill: currentColor; fill-opacity: 0.18; } :root[data-theme='light'] .wstar.on { color: var(--gold-d); } /* light'ta daha belirgin koyu altın */ .tie > .wstar { position: absolute; top: 5px; right: 6px; z-index: 3; } /* Maç satırı aksiyon kümesi (zil + göz/haber + paylaş) — kompakt; grup gridinde dar sütun, eleme kartında sağ üst */ .m-acts { display: inline-flex; align-items: center; gap: 0; } .m-acts .follow-bell, .m-acts .share-mini, .m-acts .wstar, .m-acts .news-ico, .m-acts .cal-mini { padding: 2px 3px; } /* Tahmin butonu da kardeş ikonlar gibi kompakt/çerçevesiz olsun — büyük .btn kutusu fikstürde (sağ üstte absolute) altındaki deplasman takım adına değiyordu. */ .m-acts .pick-btn { padding: 2px 3px; border: 0; background: none; min-width: 0; min-height: 0; /* kardeş ikonlarla (wstar/share-mini) AYNI kutu metriği → SVG'ler tam hizalı (2px kayma yoktu) */ display: inline-flex; align-items: center; line-height: 0; vertical-align: middle; } .m-acts .follow-bell svg, .m-acts .share-mini svg, .m-acts .wstar svg, .m-acts .pick-btn svg, .m-acts .cal-mini svg { width: 17px; height: 17px; } /* Task092 — İzleme/paylaşım/takvim ikonları Skorinho ikonuyla AYNI açık renkte. Eskiden `--line2` (çizgi rengi) ile çiziliyorlardı ve koyu temada zor seçiliyorlardı (kullanıcı bildirdi). Dokunma kutusu da büyütüldü: mobilde parmakla ıskalanıyordu. */ .m-acts { display: inline-flex; align-items: center; gap: 2px; } /* DİKKAT: `:not(.on)` — işaretli durumun kendi rengi var (izleme listesi ALTIN, takvim YEŞİL). Bu kural onları ezince kullanıcı bildirdi: "işaretlendiğindeki rengi de değişti, önceden sarı oluyordu". */ .m-acts .share-mini:not(.on), .m-acts .wstar:not(.on), .m-acts .cal-mini:not(.on), .m-acts .news-ico:not(.on), .m-acts .follow-bell:not(.on) { color: color-mix(in srgb, var(--text) 74%, transparent); } @media (hover: hover) { .m-acts .wstar:hover, .m-acts .cal-mini:hover, .m-acts .news-ico:hover, .m-acts .follow-bell:hover { color: var(--gold); } } /* Dokunmatikte ≥40 px kutu: yükseklik satırı büyütmesin diye dikey padding kadar negatif dış boşluk verilir (ikonun kapladığı yer aynı kalır, dokunma alanı büyür). Task102 — Kutu YUKARI büyür, aşağı neredeyse hiç taşmaz. Simetrik 11px'te görünmez kutunun alt kenarı DEPLASMAN takım adının 5px üstünde bitiyordu: kullanıcı adı hedefleyip biraz yukarı dokununca izleme listesi/paylaşım/haber tetikleniyordu (kullanıcı bildirdi: "deplasman takımına tıkladığımdan eminim"). Ev sahibi solda olduğu için hiç etkilenmiyordu — belirtinin tek tarafta çıkması da bunu söylüyordu. İkonların ÜSTÜ kart boşluğu; orada tıklanacak nesne yok, kutu oraya büyüyebilir. */ @media (max-width: 860px) { .m-acts { gap: 6px; } .m-acts .share-mini, .m-acts .wstar, .m-acts .cal-mini, .m-acts .news-ico, .m-acts .follow-bell, .m-acts .pick-btn { /* 19 + 17 (ikon) + 4 = 40px dokunma yüksekliği; büyüme YUKARI, taşma aşağı 4px */ padding: 19px 9px 4px; margin: -19px 0 -4px; } /* FİKSTÜR SATIRI istisnası: burada ikonlar satırın üst-sağında `absolute` duruyor ve YUKARISI ÖNCEKİ SATIR (satırlar bitişik, ölçüm: aralık 0px). Yukarı büyüyen kutu bu kez üstteki maçın takım adının dokunuşunu çalıyordu (ölçüldü: 13px taşma). Satırın üst boşluğu (40px) zaten ayrılmış olduğu için burada kutu AŞAĞI büyür. */ main#content .gmatch .m-acts .share-mini, main#content .gmatch .m-acts .wstar, main#content .gmatch .m-acts .cal-mini, main#content .gmatch .m-acts .news-ico, main#content .gmatch .m-acts .follow-bell, main#content .gmatch .m-acts .pick-btn { /* Ölçüm: 15px aşağı büyüyen kutu (0-38px) takım adının dokunma alanıyla çakışıyordu. 8px'e indirildi: ikon kutusu 0-31px, ada 35px'ten sonrası kaldı. */ padding: 6px 9px 8px; margin: -6px 0 -8px; } } /* Task102 — Hale yalnız logoda (yazının etrafında ışık istenmedi) */ .m-acts .pick-btn.on { background: none; } .m-acts .pick-btn.on .skorio-logo { border-radius: 50%; background: radial-gradient( circle, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70% ); } .tie > .m-acts { position: absolute; top: 5px; right: 6px; z-index: 3; } /* Grup satırı: ikonlar tarihin üstünde yatay; kompakt */ .g-lead .m-acts .follow-bell, .g-lead .m-acts .share-mini, .g-lead .m-acts .wstar, .g-lead .m-acts .news-ico { padding: 1px 3px; } .g-lead .m-acts .follow-bell svg, .g-lead .m-acts .share-mini svg, .g-lead .m-acts .wstar svg { width: 14px; height: 14px; } .live-card .lc-meta { margin-left: auto; } /* meta sağa, göz en sağa */ /* Haber ikonu (tamamlanan maçta) — Google News yeni sekmede */ .news-ico { color: var(--line2); display: inline-flex; align-items: center; justify-content: center; padding: 2px; cursor: pointer; text-decoration: none; line-height: 0; flex: none; touch-action: manipulation; transition: color 0.12s, transform 0.1s; } @media (hover: hover) { .news-ico:hover { color: var(--accent); transform: scale(1.12); } } .tie > .news-ico { position: absolute; top: 5px; right: 6px; z-index: 3; } /* gözle aynı yer (biri veya öteki) */ /* Haberler butonundaki 📰 emoji: maç-haber .news-ico kuralının line-height:0/padding'inden etkilenmesin */ .news-btn .news-ico { font-size: 20px; line-height: 1; padding: 0; color: inherit; display: block; } .fb-vs { color: var(--muted); margin: 0 5px; font-weight: 700; } /* Favori takım ismi yanı ★ göstergesi (grup + eleme) */ .fav-mark { color: var(--gold); font-size: 0.82em; margin-left: 3px; flex: none; text-shadow: 0 0 6px rgba(244, 197, 66, 0.5); } /* ---------- Canlı güncelleme vurguları (15 sn) ---------- */ .gmatch.just-updated, .tie.just-updated, .live-card.just-updated { background: linear-gradient(90deg, rgba(25, 224, 138, 0.22), rgba(25, 224, 138, 0.04)); border-radius: 10px; box-shadow: 0 0 0 2px rgba(25, 224, 138, 0.55), 0 0 16px rgba(25, 224, 138, 0.35); animation: upd-pulse 1.1s ease-in-out 2; } @keyframes upd-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(25, 224, 138, 0.5), 0 0 14px rgba(25, 224, 138, 0.3); } 50% { box-shadow: 0 0 0 3px rgba(25, 224, 138, 0.95), 0 0 28px rgba(25, 224, 138, 0.75); } } /* Cetvel satırı vurgusu (içe parıltı; mevcut arka planı bozmaz) */ tr.just-updated-row td { box-shadow: inset 0 0 12px rgba(25, 224, 138, 0.25); animation: row-pulse 1.1s ease-in-out 2; } tr.just-updated-row td:first-child { box-shadow: inset 3px 0 0 var(--accent), inset 0 0 12px rgba(25, 224, 138, 0.25); } @keyframes row-pulse { 0%, 100% { box-shadow: inset 0 0 12px rgba(25, 224, 138, 0.25); } 50% { box-shadow: inset 0 0 26px rgba(25, 224, 138, 0.6); } } /* ---------- Üstten çıkan floating bildirim ---------- */ .livebar { position: fixed; top: 0; left: 50%; transform: translate(-50%, -150%); z-index: 39; padding: 10px 18px; border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #0f3a2a, #0b2a1e); color: #eafff5; border: 1px solid var(--line2); border-top: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(25, 224, 138, 0.25); transition: transform 0.4s cubic-bezier(0.2, 1.3, 0.3, 1); display: flex; flex-direction: column; gap: 6px; max-width: 94vw; } .livebar.show { transform: translate(-50%, 0); } /* Açılışta bir kez: X takip çağrısı bandı (link + kapat) */ .follow-bar { position: fixed; top: 0; left: 50%; transform: translate(-50%, -150%); z-index: 41; padding: 9px 12px 9px 16px; border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #0e1626, #0a1018); border: 1px solid var(--line2); border-top: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(29, 155, 240, 0.25); transition: transform 0.4s cubic-bezier(0.2, 1.3, 0.3, 1); display: flex; align-items: center; gap: 8px; max-width: 94vw; } .follow-bar.show { transform: translate(-50%, 0); } /* Task019 — e-posta doğrulama nazik bandı (#content grid item → tam genişlik) */ .verify-bar { justify-self: stretch; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--gold, #eab308) 12%, var(--panel2)); border: 1px solid color-mix(in srgb, var(--gold, #eab308) 35%, var(--line)); color: var(--text); font-size: 13.5px; } .verify-bar[hidden] { display: none; } .vb-msg { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; flex: 1 1 200px; } .vb-msg svg { width: 16px; height: 16px; vertical-align: -3px; } .vb-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .vb-code { width: 96px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 15px; letter-spacing: 2px; text-align: center; font-variant-numeric: tabular-nums; } .vb-verify, .vb-resend { padding: 6px 12px; font-size: 13px; } .vb-close { background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; padding: 2px 6px; flex: none; } .vb-close:hover { color: var(--text); } .contact-textarea { resize: vertical; min-height: 100px; font-family: inherit; } /* Standart iletişim formu — etiketli alanlar */ .cf-intro { margin: 0 0 14px; } .cf-field { display: block; margin-bottom: 12px; } .cf-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 5px; } .cf-field .auth-input { margin: 0; width: 100%; } .auth-forgot { font-size: 13px; color: var(--muted); } .auth-forgot:hover { color: var(--accent); } .fbar-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } /* Doğal metin akışı: logo + cümle + handle birlikte sarar (handle yer yoksa alt satıra iner) */ .fbar-link { display: block; text-decoration: none; color: #e7e9ea; font-size: 13px; font-weight: 700; line-height: 1.4; } .x-logo { vertical-align: -2px; margin: 0 1px; } .fbar-handle { color: #1d9bf0; font-weight: 800; white-space: nowrap; margin-left: 6px; } .fbar-bell { font-size: 11px; color: #9fb3ad; line-height: 1.2; } /* Mobil: bar tam genişlik; @handle kendi alt satırına insin (taşmasın) */ @media (max-width: 560px) { .follow-bar { width: 92vw; } .fbar-handle { display: block; margin-left: 0; } } .fbar-close { flex: none; background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; padding: 2px 4px; line-height: 1; } .fbar-close:hover { color: #e7e9ea; } .lb-row { display: flex; align-items: center; gap: 7px; font-size: 14px; white-space: nowrap; } .lb-ball { font-size: 16px; animation: spin 4s linear infinite; } .lb-flag { width: 24px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); flex: none; } .lb-name { font-weight: 800; } .lb-score { font-weight: 900; font-size: 16px; color: var(--accent); padding: 0 4px; background: rgba(25, 224, 138, 0.14); border-radius: 6px; } .lb-dash { margin: 0 3px; color: #bfe; } .lb-more { font-size: 12px; color: var(--muted); text-align: center; } @media (max-width: 560px) { .lb-name { max-width: 26vw; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 560px) { .groups-grid { grid-template-columns: 1fr; } /* Mobil banner TEK SATIR (kullanıcı kararı): marka solda, ⚙️ + hesap sağda. Ayarlar artık ⚙️ menüsünde olduğu için tek satıra sığar. */ .topbar.banner { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; gap: 8px; padding: 8px 12px; flex-wrap: nowrap; } .topbar.banner .brand { font-size: 17px; } .topbar.banner .top-actions { gap: 6px; flex-wrap: nowrap; } .topbar { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px 12px; } .tb-brand { align-items: center; } .tb-row { justify-content: center; } .tb-auth { margin-top: 2px; } .brand-ball { font-size: 22px; } .tb-title h1 { white-space: normal; } .tb-sub .brand-sub { font-size: 11px; line-height: 1.3; } .mode-badge { padding: 5px 9px; font-size: 11px; } /* Haberler ikonu mobilde sağ ÜST köşede; sağ boşluk yok -> simetri korunur */ #app { padding-right: 0; } .news-lbl { display: none; } .news-btn { top: 9px; right: 9px; bottom: auto; transform: none; flex-direction: row; border-radius: 10px; border: 1px solid var(--green-d); padding: 7px 9px; z-index: 60; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } .news-ico { font-size: 18px; } /* Üst bar kalabalığını azalt: tema seçici + timezone + dil daha küçük */ .tb-auth.tb-row { gap: 6px; } /* Tema seçici artık ⚙️ menüsünde — eski mobil collapse kaldırıldı; 4 buton inline */ .lang-select { padding: 4px 5px; font-size: 11px; } .tz-select { max-width: none; font-size: 11px; padding: 4px 4px; } /* genişliği JS (fitTzWidth) ayarlar */ .online-pill { padding: 4px 8px; font-size: 11px; } /* Takvime ekle: mobilde sadece 📅 ikon */ .fb-ics span { display: none; } .fb-ics { padding: 7px 11px; font-size: 17px; } .fav-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } /* Favori bandı mobilde 2 satır: 1) ⭐ takım + 📅 2) sıradaki maç bilgisi */ .fav-band { gap: 7px; padding: 9px 12px; } .fb-row { gap: 6px 8px; } .fb-star { order: 0; } .fb-team { order: 1; font-size: 14px; } .fb-ics { order: 2; } .fb-info { order: 3; flex-basis: 100%; font-size: 11.5px; line-height: 1.3; } /* "Bugün" kartı rozet/meta mobilde taşmasın */ .lc-top { gap: 6px; /* Task102 — İkon şeridi ile takım satırı arasında GERÇEK boşluk: ikonun büyütülmüş dokunma kutusu (yukarı doğru) takım adına komşu kalmasın. */ margin-bottom: 14px; } .lc-badge { font-size: 10px; padding: 3px 7px; letter-spacing: 0.3px; } .lc-meta { font-size: 10px; } } /* ---------- Dokunmatik cihazlarda büyük skor kutusu + spinner ---------- */ @media (pointer: coarse) { .stepper input, .spin button { touch-action: manipulation; } .stepper input { width: 40px; height: 46px; font-size: 19px; } .tie .stepper input { width: 38px; height: 44px; } .spin { gap: 4px; } .spin button { width: 28px; height: 21px; font-size: 13px; border-radius: 6px; } .tie .spin button { height: 20px; } /* Grup maçı satırında skora daha çok yer ver */ .gmatch { grid-template-columns: auto 1fr auto 1fr; gap: 4px; } .side .sn { font-size: 12px; } } /* Mobil fikstür: maçı 2 satıra böl — üstte tarih + aksiyon butonları, altta takımlar (adlara çok daha fazla yer). (pointer:coarse bloğundan SONRA gelir → kazanır) */ @media (max-width: 560px) { /* main#content ile specificity artırıldı: base .gmatch (kaynakta daha sonra gelen) kuralını yenmek için — aksi halde tek-kolon grid geri gelir. */ main#content .gmatch { /* Tarih + aksiyonlar ABSOLUTE (üst satır) → grid kolonlarını ETKİLEMEZ; teams satırı yalnız 3 eşit kolondan oluşur, skor tüm satırlarda AYNI x'te (WC hizası). padding-top üst şeride yeterli yükseklik verir → aksiyonlar isimle çakışmaz. */ position: relative; /* `1fr` (asgarisi içerik): sütunlar eşit → orta küme tam ortada; hücre içeriğinden dar olamadığı için düğmeler ÜST ÜSTE BİNEMEZ. */ grid-template-columns: 1fr auto 1fr; /* Task362 — dar ekranda ad alanı kıymetli: kolon boşluğu 8 → 6px (skor hücresinin kendi iç boşluğu zaten var, iki ölçü üst üste binince araya 26px giriyordu). */ column-gap: 6px; padding: 40px 10px 10px 12px; } main#content .gmatch .g-lead { position: absolute; top: 10px; left: 12px; } main#content .gmatch .m-acts { position: absolute; top: 6px; right: 10px; } main#content .gmatch .side.home { grid-column: 1; justify-content: flex-end; min-width: 0; } main#content .gmatch .gscore { grid-column: 2; justify-self: center; } main#content .gmatch .side.away { grid-column: 3; justify-content: flex-start; min-width: 0; } /* Alt satırda yer açıldı → takım adları büyür ama TEK SATIR (ellipsis) kalır ki satırlar tek tipli olsun ve logo/skor hizası bozulmasın (WC grup maçı deseni) */ main#content .gmatch .side .sn { font-size: 13.5px; white-space: nowrap; } main#content .gmatch .side.home .sn { text-align: right; } /* Kare takım logoları landscape'e sıkışmasın (fikstür satırında) */ main#content .gmatch .side img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; } main#content .gmatch .gdate { font-size: 12px; } } /* ===== X otomatik paylaşım ayarları paneli (edit mode) ===== */ .xset-note { font-size: 13px; color: var(--muted, #93a4bd); margin: 0 0 12px; line-height: 1.45; } .xset-list { display: flex; flex-direction: column; gap: 0; max-height: 56vh; overflow-y: auto; margin-bottom: 14px; } .xset-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; cursor: pointer; border-bottom: 1px solid rgba(127, 127, 127, 0.12); } .xset-row .xset-lbl { flex: 1; font-size: 14px; } .xset-row.master { font-weight: 700; border-bottom: 2px solid rgba(127, 127, 127, 0.28); margin-bottom: 4px; } .xset-row.round .xset-lbl { padding-left: 14px; font-size: 13px; opacity: 0.9; } .xset-cb { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .xset-sw { width: 40px; height: 23px; border-radius: 12px; background: #5a6273; position: relative; transition: background 0.15s; flex: none; } .xset-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform 0.15s; } .xset-cb:checked + .xset-sw { background: #2bb24c; } .xset-cb:checked + .xset-sw::after { transform: translateX(17px); } .xset-cb:disabled + .xset-sw { opacity: 0.5; } .xset-msg { padding: 16px; text-align: center; color: var(--muted, #93a4bd); font-size: 14px; } .xset-msg.warn { color: #e88; } /* ===================== CupDaily eklentisi (Task009) ===================== WC styles.css'e dokunulmaz; CupDaily'ye özgü kurallar yalnız bu bölümde. */ /* Kare takım logosu (WC bayrak stilinden bağımsız — yalnız .crest) */ .side img.crest, .team-col img.crest { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; box-shadow: none; background: transparent; flex: none; vertical-align: -4px; } /* Maç satırı orta küme: saat ya da skor */ .gmatch .gscore { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 56px; font-size: 13px; font-weight: 700; } /* Topbar sağ küme (arşiv linki + dil + tema) */ .top-actions { display: flex; align-items: center; gap: 8px; flex: none; } /* Task298 — cetvel altı bölge lejantı: renk noktaları satır rozetleriyle aynı dil */ .st-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px 4px; font-size: 11.5px; color: var(--muted); } .st-lg { display: inline-flex; align-items: center; gap: 6px; } .st-legend .lg-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .st-legend .lg-ucl, .st-legend .lg-r16_direct { background: var(--green); } .st-legend .lg-uel { background: var(--gold); } .st-legend .lg-uecl { background: var(--accent); } .st-legend .lg-playoff { background: var(--gold-d); } .st-legend .lg-relegation, .st-legend .lg-eliminated { background: var(--red); } /* Task300 — lejantın altında eşitlik kuralları satırı */ .st-tiebreak { margin: 2px 0 0; padding: 0 12px 8px; font-size: 11.5px; color: var(--muted); } /* Puan durumu zone satırları (rules.zones -> tr.zone-*) — sunum, veri değil */ tr.zone-ucl, tr.zone-r16_direct { background: linear-gradient(90deg, rgba(24, 192, 122, 0.16), transparent); } tr.zone-ucl .rank-badge, tr.zone-r16_direct .rank-badge { background: var(--green); color: var(--on-accent); border-color: var(--green); } tr.zone-uel { background: linear-gradient(90deg, rgba(244, 197, 66, 0.14), transparent); } tr.zone-uel .rank-badge { background: var(--gold); color: var(--on-gold); border-color: var(--gold); } tr.zone-uecl { background: linear-gradient(90deg, rgba(25, 224, 138, 0.1), transparent); } tr.zone-uecl .rank-badge { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } tr.zone-playoff { background: linear-gradient(90deg, rgba(201, 154, 30, 0.12), transparent); } tr.zone-playoff .rank-badge { background: var(--gold-d); color: #fff; border-color: var(--gold-d); } tr.zone-relegation, tr.zone-eliminated { background: linear-gradient(90deg, rgba(255, 90, 95, 0.14), transparent); } tr.zone-relegation .rank-badge, tr.zone-eliminated .rank-badge { background: var(--red); color: #fff; border-color: var(--red); } /* Marka logosu (kullanıcı tasarımı — emoji yerine gerçek logo, Task010) */ .brand-logo { width: 28px; height: 28px; border-radius: 6px; vertical-align: -7px; margin-right: 2px; } /* Task010: yıldız sütunu, hafta gezinme, yan yana yerleşim, bant turnuva etiketi Task322 — şablon ÜSTTEKİ kuralla birebir aynı tutulur (bu geç kural kazanıyor): sol/skor sütunları sabit tabanlı ki canlı rozet genişleyince satırlar kaymasın. */ .gmatch { grid-template-columns: minmax(84px, auto) 1fr minmax(56px, auto) 1fr auto; } .star { background: none; border: none; color: var(--muted); font-size: 17px; /* Task601 rev-3 — bir tık büyük (15 → 17) */ cursor: pointer; padding: 2px 0; line-height: 1; /* ★ ve ☆ AYNI yeri kaplasın — favori satırında yazı sağa kaymaz (hiza korunur) */ display: inline-flex; align-items: center; justify-content: center; width: 22px; text-align: center; font-variant-emoji: text; } .star.on { color: var(--gold); } .star:hover { color: var(--gold); } .week-nav { display: flex; align-items: center; gap: 8px; font-weight: 800; } .week-nav .btn { padding: 2px 10px; } .week-nav .btn:disabled { opacity: 0.35; cursor: default; } .comp-tag { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; } /* Task304 (kullanıcı) — Takım kartı maç listesi: turnuva adının genişliği satırdan satıra değişince ilk sütun (her .gmatch kendi grid'i) farklı genişliyor ve skorlar alt alta hizalanmıyordu (Red Star örneği). Turnuvalı satırlarda öncü sütun SABİT genişliktedir, uzun turnuva adı tek satırda kısaltılır. */ .g-lead-comp { width: 92px; min-width: 92px; } .g-lead-comp .comp-tag { display: block; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .league-grid { display: grid; gap: 16px; } @media (min-width: 980px) { .league-grid { grid-template-columns: minmax(360px, 5fr) 4fr; align-items: start; } } /* Task010 — Açık tema CupDaily yorumu (kullanıcı kararı): yeşil değil, logoya uygun ÇOK AÇIK MAVİ yüzeyler. WC'nin light değişkenleri burada ezilir. */ :root[data-theme='light'] { --bg: #eef5fc; --bg2: #f6fafe; --panel: #ffffff; --panel2: #eaf2fb; --line: #d3e2f2; --line2: #b9d0e8; --text: #12263a; --muted: #5b7590; --green: #2e6fe0; /* aksan mavisi (zone-ucl da UCL mavisine döner) */ --green-d: #1f56b8; --accent: #3b82f6; --on-accent: var(--bg); /* Task514 — açık temada vurgu üstü yazı AÇIK renktir */ --accent-fill: var(--accent); /* Task514 rev — açık temada tek ton mavi */ --accent-fill-h: var(--accent); --topbar-bg: rgba(238, 245, 252, 0.92); --input-bg: #ffffff; --input-text: #12263a; --title-a: #12263a; --title-b: #2e6fe0; --pts: #12263a; --head-a: #dcebfa; --head-b: #eef5fc; --chip-bg: #e3eefa; --glow1: #dcebfa; --glow2: #eef5fc; --shadow: 0 10px 30px rgba(30, 64, 120, 0.12); } /* Yuvarlatılmış köşeler ve hizalama incelikleri */ .brand-logo { border-radius: 8px; } .side img.crest, .team-col img.crest { border-radius: 6px; } .gmatch .gdate { min-width: 44px; } .table td, .table th { vertical-align: middle; } .team-col .star { vertical-align: -1px; } /* Task011: kapsayıcı ve panel genişlikleri — hiçbir kart tam ekrana YAYILMAZ (kullanıcı kararı: en makul görünümde sınırlı) */ main#content { max-width: 1400px; margin: 0 auto; padding: clamp(10px, 1.6vw, 16px) clamp(12px, 3vw, 28px) 40px; display: grid; /* Task545 — SÜTUN İÇERİĞE GÖRE BÜYÜMEZ. Izgara sütununun varsayılan alt sınırı `min-content`: içerideki tek bir geniş satır (ölçüldü: İtalyanca ana sayfada 420 px) sütunu şişiriyor, TÜM kardeşler o genişliğe uzuyordu — sağa yaslı "Sade" düğmesi ekranın dışında (406 px) kalıyordu. `minmax(0, 1fr)` ile sütun görünür genişliği aşmaz; geniş içerik kendi kutusunda kırpılır/sarar. */ grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; } main#content > section, main#content > .league-grid { width: 100%; } /* Bantlar (bugün/favori/izleme/canlı): dar ve ortalı — Task308 rev: canlı bant diğer bantlarla BİREBİR aynı dilde (kullanıcı) */ #today-section, #fav-section, #watch-section, #live-section, #home-calendar { max-width: 860px; } /* Tablo + fikstür: sınırlı sütunlar, ortalanmış */ .league-grid { justify-content: center; } .league-grid > section { width: 100%; max-width: 720px; justify-self: center; } @media (min-width: 980px) { .league-grid { grid-template-columns: minmax(360px, 700px) minmax(320px, 600px); } } /* Task011: banner + ayrı gezinme şeridi */ .topbar.banner { padding-top: 14px; padding-bottom: 14px; } .topbar.banner .brand { font-size: clamp(20px, 3vw, 26px); font-weight: 900; } .subnav { position: sticky; top: 0; z-index: 30; display: flex; gap: 8px; overflow-x: auto; padding: 10px clamp(12px, 3vw, 28px); background: var(--topbar-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); } .subnav .day-btn { flex: none; } /* hidden özniteliği her zaman kazanır (display:grid'li kapsayıcılar dahil) */ .league-grid[hidden], main#content [hidden] { display: none !important; } /* Task011: logo taşması düzeltmesi + logosuz takım için baş harf rozeti */ .flag-wrap .crest, .lc-half .crest { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; box-shadow: none; background: transparent; } .crest-ph { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--chip-bg); border: 1px solid var(--line2); color: var(--muted); font-size: 9px; font-weight: 800; flex: none; vertical-align: -5px; } .flag-wrap { overflow: visible; } /* Task080 — Banner WEB'DE DE YAPIŞKAN (kullanıcı isteği: "mobildeki gibi sabit kalsın"). Task011'de bilinçli olarak `relative` yapılmıştı; karar değişti. z-index 90 korunuyor: açılan menüler lig şeridinin (z-80) üstünde kalmalı. */ .topbar.banner { position: -webkit-sticky; position: sticky; top: 0; z-index: 90; } /* Task011: maç kartında lig adı öne çıkar (kullanıcı geri bildirimi) */ .lc-comp { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--line2); color: var(--accent); font-weight: 800; font-size: 11px; letter-spacing: 0.3px; } /* Task011: banner ile gezinme şeridi GÖRSEL olarak ayrışsın (kullanıcı testi) */ .topbar.banner { border-bottom: 1px solid var(--line2); background: linear-gradient(180deg, var(--glow1), var(--topbar-bg)); } .subnav { background: var(--bg2); border-bottom: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); padding-top: 8px; padding-bottom: 8px; } /* Task011: panel başlıkları kompakt ve zarif (kullanıcı geri bildirimi) */ main#content .group-head { padding: 6px 4px 8px; margin-bottom: 6px; background: none; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } main#content .group-head h2 { margin: 0; font-size: 14px; /* Task551 rev (kullanıcı: "başlıklar kayarak geldikten sonra 1-2 piksel aşağı kayıyor") — `normal` satır yüksekliği 14 px puntoda 16,94 px veriyor; başlığın kutusu ve METİN TABANI kesirli kalıyor. Giriş animasyonu composite katmanda çalışıp bittiğinde metin yeniden rasterize ediliyor ve bu kesir görünür bir "oturma" olarak okunuyor. Tam sayı satır yüksekliği zinciri kırar. */ line-height: 18px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); } /* Bant başlıkları ortalı (kullanıcı isteği) */ #today-section .group-head, #fav-section .group-head, #watch-section .group-head, #live-section .group-head { justify-content: center; } /* Gün değiştirici (Bugün kartı, WC deseni) */ .lc-days { justify-content: center; margin: 0 auto 4px; } /* Gezinme şeridi ortalı (kullanıcı isteği); dar ekranda kaydırma bozulmaz */ .subnav { justify-content: safe center; } /* Lig logoları: gezinme butonları ve rozetlerde */ .day-btn .comp-logo { width: auto; height: 20px; max-width: 44px; object-fit: contain; vertical-align: -3px; margin-right: 5px; border-radius: 3px; } /* Panel başlıkları her yerde ortalı (kullanıcı isteği — güçlü kural) */ main#content .group-head { justify-content: center; text-align: center; position: relative; } main#content .group-head h2 { margin: 0 auto; } /* Fikstürde hafta gezinme sağda kalır, başlık yine ortada */ #fixtures-section .group-head .week-nav { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); } /* Mobilde: absolute week-nav (sezon combo) ortalı başlığa biner → akışa al, başlık sola; sığmazsa week-nav alt satıra sarar (ID specificity ile merkez kuralını yener) */ @media (max-width: 560px) { #fixtures-section .group-head { flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; text-align: left; } #fixtures-section .group-head h2 { margin: 0; } #fixtures-section .group-head .week-nav { position: static; transform: none; } } /* Logolar her temada görünür: beyaz mini rozet zemini (koyu armalar kaybolmaz) */ .side img.crest, .team-col img.crest, .lc-half .crest, .flag-wrap .crest, .day-btn .comp-logo { /* Zemin/halka yok; koyu detaylar için silüeti izleyen hafif ışık gölgesi */ padding: 0; background: none; box-shadow: none; backdrop-filter: none; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.5)); } /* Task514 rev (kullanıcı: "açık temada ligler menüsünde seçili lig logosu çok karanlıkta kalıyor, seçili durumu çok silik olmalı") — LOGOLU şeritlerde seçili hap açık temada DOLU mavi değil, hafif tonlu zemin + aksan halkası: arma kendi renkleriyle okunur. Yazılı şeritler (gün, kapsam) dolu vurgulu kalır — orada beyaz yazı zaten iyi. */ :root[data-theme='light'] #competition-nav .day-btn.active, :root[data-theme='light'] .day-btn.scope-comp.active { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--title-b); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); } :root[data-theme='light'] .side img.crest, :root[data-theme='light'] .team-col img.crest, :root[data-theme='light'] .lc-half .crest, :root[data-theme='light'] .flag-wrap .crest, :root[data-theme='light'] .day-btn .comp-logo { background: none; box-shadow: none; filter: drop-shadow(0 0 1.5px rgba(18, 38, 58, 0.35)); } .crest-ph { background: rgba(255, 255, 255, 0.18); color: var(--muted); } /* Maç kartındaki lig rozetinde logo */ .lc-comp .comp-logo { width: auto; height: 16px; max-width: 36px; object-fit: contain; vertical-align: -3px; margin-right: 4px; border-radius: 3px; } /* Satır-içi maç detayı (lig görünümü, geniş ekran) */ .dt-inline { position: relative; margin-top: 12px; padding: 12px; border: 1px solid var(--line2); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), var(--bg2)); } /* Task062: taban .tm-close kuralı akış içinde konumlanmak için negatif margin kullanıyor (margin: -10px -8px -32px auto). Satır-içi panelde konum `absolute`'a çevrildiğinde bu negatif değerler top/right offset'ini birebir yiyordu → buton panel çizgisine değiyor, hatta üst kenardan dışarı taşıyordu (ölçüm: sağ 1px, üst -1px). Margin sıfırlanır ki offset gerçekten uygulansın (CLAUDE.md ilke 4: hiçbir nesne panel kenarına teğet olmaz). */ /* `.group-card` yuvarlak köşeleri kırpmak için `overflow: hidden` taşıyor; bu, içindeki `position: sticky` ✕ butonunu ölü hâle getiriyor (hidden bir kaydırma bağlamı yaratır). `clip` aynı kırpmayı yapar ama kaydırma bağlamı YARATMAZ → sticky yaşar. Desteklemeyen tarayıcıda bildirim yok sayılır, buton eski (yapışmayan) davranışına döner. */ #fixtures-section { overflow: clip; } /* Task102 — AYNI tuzak takım/oyuncu/profil kartında: `.group-card`'ın `overflow: hidden`i yapışkan geri şeridini (`.pv-bar`) ölü hâle getiriyordu (ölçüldü: 800px kaydırınca şerit -582px'e gidiyor, yani hiç yapışmıyor). `clip` kırpar ama kaydırma bağlamı yaratmaz. */ #team-page, #player-page, #profile-page { overflow: clip; } .dt-inline .tm-close { /* Task073 — `absolute` iken uzun detayda ✕ panelin tepesinde kalıyor, kullanıcı kapatmak için yukarı kaydırmak zorundaydı. `sticky` ile panel okunurken de ekranda kalır; yapışma noktası yapışkan üst başlığın altı (`--sticky-top` JS'ten gelir, sabit değil). */ position: sticky; top: calc(var(--sticky-top, 114px) + 10px); /* sağa yaslanır (blok + auto sol marj); negatif alt marj ile altındaki başlık ✕'in altından değil, aynı hizadan başlar — panel kenarına değmez (ilke 4) */ margin: 0 0 -36px auto; z-index: 6; } /* Tema düğmeleri: emoji yerine gerçek tema renkleri */ .tdot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); vertical-align: -2px; } .tdot-green { background: #18c07a; } .tdot-navy { background: #274b8f; } .tdot-light { background: #eef5fc; } /* Nav butonlarında logo + lig adı dikey ortalı */ .subnav .day-btn { display: inline-flex; align-items: center; gap: 6px; line-height: 1; } .subnav .day-btn .comp-logo { vertical-align: middle; margin-right: 0; } .lc-comp { display: inline-flex; align-items: center; gap: 4px; } .lc-comp .comp-logo { vertical-align: middle; margin-right: 0; } /* Dar ekranda üst menü kaydırma yerine satır sarar, kendini genişliğe uydurur */ .subnav { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; } @media (max-width: 640px) { .subnav .day-btn { padding: 4px 9px; font-size: 11px; } .subnav .day-btn .comp-logo { height: 16px; max-width: 34px; } } /* Üst menü: sarma yerine tek satır, GÖRÜNMEZ kaydırma çubuğu (dar ekranda kaydır) */ .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .subnav::-webkit-scrollbar { display: none; } /* WC 2026 linki: alt çizgi yok */ .top-actions a.btn, #wc-link { text-decoration: none; } /* Takım kartı: tn-link imleci */ .tn-link { cursor: pointer; } .tn-link:hover { text-decoration: underline; } /* Kart üst satırı: lig rozeti + tarih dikey hizalı */ .lc-meta { display: inline-flex; align-items: center; gap: 6px; } /* Favori şeridi (4px) tarihe binmesin */ /* (fav-match ekstra sol padding kaldırıldı — base .gmatch zaten 12px; hiza korunur) */ /* Task014: sayfa görünümleri + tema uyumlu satırlar (takım kartı ilk 2 sekme düzeltmesi) */ .page-view { position: relative; max-width: 860px; margin: 0 auto; width: 100%; /* Izgara öğesinin otomatik en küçük boyu (`min-width: auto`) İÇERİĞİN min-content'i kadardır: uzun bir stadyum adı sayfayı 390px ekranda 597px'e çıkarıyordu (ölçüldü). 0 verilince uzun metin kısalır, sayfa taşmaz. */ min-width: 0; } /* Task102 — Kart sayfalarının (takım/oyuncu/profil) kapatma butonu. DÖRT kural birlikte sağlanmalı; önceki denemeler hep birini bozuyordu: (1) aşağı kaydırınca kaybolmasın, (2) hiçbir görselin üstünü örtmesin, (3) yapışkan banner'ın altında kalmasın, (4) kendine bir SATIR ayırmasın. `absolute` → logonun üstüne biniyordu. `fixed` (Task094) → banner (z-90) butonu (z-70) örtüyordu; mobilde buton "yok olmuş" görünüyordu (ölçüldü: elementFromPoint banner logosunu döndürüyor). Akış içinde yapışkan ŞERİT → bu kez bir satır yer kaplıyordu (kullanıcı bildirdi: "bir satırı kapatıyor gibi"). Son hâl maç detayı popup'ındaki ✕ deseninin aynısı: yapışkan + negatif alt boşluk. */ .page-back { /* Maç detayı/profil popup'ındaki ✕ ile AYNI desen (kullanıcı isteği): yapışkan ama SATIR KAPLAMAZ — negatif alt boşluk kadar aşağıdaki içerik yukarı gelir, buton üst köşeye biner. Başlık kendi iç boşluğuyla butona yer açtığı için ilk açılışta hiçbir görselin üstünde durmaz. */ position: sticky; /* Banner + (varsa) lig şeridi: `--sticky-top` ikisinin toplamı. Yalnız `--banner-h` kullanılınca webde buton kaydırmada lig şeridinin ALTINDA kalıyordu (ölçüldü: elementFromPoint "day-btn skorio-btn" döndürdü). */ top: var(--sticky-top, 66px); z-index: 40; /* Task208 — Kullanıcı: "✕ bütün ekranlarda sağda, sadece takım ve oyuncu kartında solda; mobilde sağ daha avantajlı." Buton sağa alınır; `margin-left: auto` onu satırın sonuna iter, yapışkan davranış (kaydırınca hep aynı yerde) AYNEN korunur. */ margin: 0 8px -34px auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; font-size: 15px; line-height: 1; border-radius: 50%; border: 1px solid var(--line2); background: var(--panel2); color: var(--muted); cursor: pointer; } .page-back:hover, .page-back:focus-visible { color: var(--text); border-color: var(--accent); } .page-view { position: relative; } .pl-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px dashed var(--line); color: var(--text); font-size: 13px; } .pl-row:last-child { border-bottom: none; } .pl-min { flex: none; min-width: 34px; text-align: center; font-weight: 800; color: var(--muted); background: var(--chip-bg); border-radius: 8px; padding: 2px 6px; font-size: 11px; } .pl-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-side { flex: none; color: var(--muted); font-size: 12px; } .pl-season { cursor: pointer; } .pl-detail td { font-size: 11px; color: var(--muted); } .pl-cat { padding: 3px 0; border-bottom: 1px dotted var(--line); white-space: normal; } .pl-seasons td, .pl-seasons th { text-align: center; } /* Mobil: üst menü yalnız lig logoları (daha büyük); metin gizli (kullanıcı kararı) */ @media (max-width: 640px) { .subnav .day-btn { font-size: 0; gap: 0; padding: 6px 8px; } /* Task329 — ad SPAN'ı yapısal gizlenir: font-size:0 iOS Safari'de birkaç px hayalet genişlik bırakıp logoyu aktif hapta SOLA itiyordu (ekran görüntüsüyle ölçüldü). */ .subnav .day-btn .comp-name { display: none; } .subnav .day-btn .comp-logo { height: 26px; max-width: 48px; } .subnav .day-btn svg { width: 20px; height: 20px; } } /* Marka tıklanabilir: ana sayfaya döner */ #brand-home { cursor: pointer; } /* Oyuncu/takım sayfası ince ayarları (kullanıcı geri bildirimi) */ .page-view { padding-top: 16px; } .page-view .tm-head { margin-top: 6px; border-top: none; } .tm-body .pl-row, .tm-body .pl-main { color: var(--text); } .tm-body .pl-row .sn { color: var(--text); } /* Sekme geçişinde panel boyu OYNAMAZ */ .page-view .dt-pane { min-height: 340px; } .pl-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--chip-bg); flex: none; } /* Takım sayfası Durum: tam tablo, takım satırı vurgulu */ tr.me-row { outline: 2px solid var(--accent); outline-offset: -2px; } .team-standing { margin-bottom: 14px; } /* Oyuncu sayfası başlığı: kendi temiz düzeni (WC modal sınıflarından bağımsız) */ .pp-head { display: flex; align-items: center; gap: 16px; padding: 6px 2px 14px; border-bottom: 1px solid var(--line); } /* Task503 (kullanıcı: "oyuncu kartında oyuncu adı ve fotosu biraz daha aşağıdan başlayabilir, bu sayede ikonlarla çakışma engellenir") — yapışkan yıldız/paylaş/✕ sırası başlığın ÜSTÜNE biniyordu: ölçüldü (390 px) "Metehan Altunbas" yazısı yıldızla 300 px² çakışıyordu (360 px'te "Romelu Lukaku" da). Telefonda başlık ikon sırasının altından başlar; geniş ekranda ad zaten ikonlara ulaşmıyor, orada boşluk eklenmez. */ @media (max-width: 759px) { .pp-head { padding-top: 30px; } } /* Task502 rev (kullanıcı: "karşılaştır butonu fotonun altında, foto genişliğinde olsun") */ .pp-photo-col { display: flex; flex: none; flex-direction: column; align-items: center; gap: 6px; } .pp-cmp { width: 100%; gap: 4px; padding: 4px 6px; font-size: 11px; line-height: 1.2; } .pp-cmp svg { width: 13px; height: 13px; } /* Oyuncu kartındaki fotoğraf belirgin/büyük görünsün */ .pp-head .pl-photo { width: 88px; height: 88px; box-shadow: 0 0 0 1px var(--line); } .pp-head .pl-photo-ph { font-size: 40px; } .pp-head .pl-photo-ph .ic { width: 46px; height: 46px; } .pp-name { font-size: 20px; font-weight: 900; color: var(--text); line-height: 1.2; padding-right: 34px; /* sağ üstteki favori yıldızının yeri */ } /* Favori yıldızı başlığın SAĞ ÜSTÜNDE sabit (uzun adda satır atlamaz) */ .pp-head { position: relative; } /* Task492 (kullanıcı: "web görünümünde oyuncu kartında favori yıldızı ile paylaş ikonu üst üste biniyor") — ölçüldü: paylaş düğmesi 640 px'in üstünde başlığın YANINA geçiyor (390/560'ta üstte, ayrı satırda) ve yıldızla 15×30 px çakışıyordu. Geniş ekranda yıldız paylaş düğmesinin SOLUNA alınır; dar ekranda eski yeri korunur. */ /* Task492 rev (kullanıcı: "favori, paylaş ve kapatma butonu aynı hizada görünmüyor") — ölçüldü: yıldız başlığın içinde MUTLAK konumluydu, paylaş/✕ ise yapışkan satırda; hizası ve boşluğu genişliğe göre kayıyordu (1280'de merkez 234'e 230, 700'de yıldız paylaşın 13 px ÜSTÜNE biniyordu). Yıldız artık AYNI SATIRDA ve aynı desende: sağdan 96 px (paylaşın 52 + düğme 34 + boşluk 10). Tek kaynak = tek hiza, her genişlikte. */ .page-fav { position: sticky; top: var(--sticky-top, 66px); z-index: 40; margin: 0 96px -34px auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; } .page-fav .fav-star { margin: 0; padding: 0; } .pp-bio { color: var(--muted); font-size: 12px; margin-top: 3px; } .pp-club { margin-top: 5px; font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; } .pl-photo-ph { display: inline-flex; align-items: center; justify-content: center; font-size: 24px; color: var(--muted); } /* Takım sayfası başlık logosu: kırpılmadan sığdır */ .tm-head img.crest, .dt-tm img.crest { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; } /* Oyuncu sezon tablosu: sezon sütunu net ve okunur genişlikte */ .pl-seasons th.season-col, .pl-seasons td.season-col { width: 74px; white-space: nowrap; } /* Task015: istatistik blokları */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 8px 0; } .stat-cat h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 4px; } .stat-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text); padding: 2px 0; } .ts-year { margin: 8px 0 4px; } /* Kupalarda (tablo gizliyken) fikstür paneli ortalanır */ @media (min-width: 980px) { .league-grid:has(#standings-section[hidden]) { grid-template-columns: minmax(360px, 720px); } } /* Sezon seçici (Task016; yeri Task073) — lig sayfasının genel tercihi. Web'de fikstür panelinin SOL BAŞINDA, mobilde lig adının sağında (sekmelerin üstünde) durur; eleman JS ile taşınır, kopyalanmaz. */ .season-select { max-width: 96px; } /* Web: seçici solda, başlık onun yanında, hafta gezinme sağda kalsın */ #fixtures-section .group-head > .season-select { margin-right: 10px; } /* Not: panel başlığı ortalı kalır ("başlıklar her yerde ortalı" güçlü kuralı); seçici akışta ilk öğe olduğu ve başlık `margin: 0 auto` taşıdığı için sola yaslanır. */ /* Mobil: lig adı solda, seçici satırın sağ ucunda */ .league-name > .season-select { margin-left: auto; flex: none; } .league-name .ln-text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Mobil banner: TEK SATIR + native gibi SABİT (fixed) üstte (kullanıcı kararı). (Ayarlar/dil/TZ artık ⚙️ menüsünde olduğu için ikinci satıra gerek yok.) */ @media (max-width: 640px) { .topbar.banner { position: fixed; top: 0; left: 0; right: 0; flex-wrap: nowrap; z-index: 200; padding-top: max(8px, var(--sat)); } .topbar.banner .top-actions { width: auto; justify-content: flex-end; flex-wrap: nowrap; } /* Sabit banner + hemen altında lig şeridi: içerik onların altından başlasın */ /* Task225 (kullanıcı düzeltmesi: "sayfaların üst kısmı banner'ın altında kalmış gibi") — ÜST BAR çentik payı kadar UZUYOR; sabit 54/56px değerleri o uzamayı hesaba katmıyordu ve içerik barın altına giriyordu. Paylar artık payı da içeriyor. */ #competition-nav { position: sticky; top: calc(54px + var(--sat)); } body { padding-top: calc(56px + var(--sat)); } } /* Oyuncu Sezonlar: tablo yerine dengeli satır düzeni (kullanıcı geri bildirimi) */ .ps-head, .ps-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; } .ps-head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); border-bottom: 1px solid var(--line); } .ps-row { border-bottom: 1px dashed var(--line); cursor: pointer; font-size: 13px; color: var(--text); } .ps-row:hover { background: var(--panel2); } .ps-year { flex: none; /* Task328 rev — madalya+ok için 44px yeter; 72px sıra-oyuncu arasında boşluk okunuyordu */ width: 44px; font-weight: 800; font-size: 12px; color: var(--muted); } .ps-team { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; } .ps-team b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ps-nums { flex: none; font-variant-numeric: tabular-nums; color: var(--text); font-size: 12.5px; min-width: 86px; text-align: right; } .ps-detail { padding: 10px 8px 14px; background: var(--panel2); border-radius: 10px; margin: 4px 0 10px; } .ps-detail .stat-row { font-size: 12.5px; padding: 3px 0; border-bottom: 1px dotted var(--line); } /* Kupa görünümünde fikstür paneli her koşulda ortalı (sola dayanmaz) */ .league-grid > section { margin-left: auto; margin-right: auto; } /* Üst menü kaydırmada da yukarıda SABİT (yapışkanlık güçlendirildi) */ nav.subnav { position: -webkit-sticky; position: sticky; /* Banner artık yapışkan → şerit onun ALTINA yapışır, üstüne binmez. Yükseklik JS'ten gelir (`--banner-h`); yedek değer ölçülen masaüstü yüksekliğidir. */ top: var(--banner-h, 66px); z-index: 80; } /* Kart üst satırı TEK YERDE tanımlıdır (yukarıdaki `.lc-top` grid kuralı). Burada ikinci bir `display: flex` kopyası vardı ve daha sonra geldiği için grid'i eziyordu: tarih ortalanmıyordu (ölçüm: webde 305px sağa kaçık). Kopya kaldırıldı. */ .build-line { text-align: center; /* Task170 — Kullanıcı: "En alttaki sürüm bilgisi sayfa arka planıyla aynı renk olsun, kullanıcı göremesin." Yazı SİLİNMEZ: hata ayıklarken (ve JS hata mesajı bu etikete yazıldığı için) gerekiyor; yalnız zeminle aynı renge alınır ve seçilebilir kalır. */ color: var(--bg); font-size: 10px; /* Task171 — Etiket görünmez olduğu için DİKEY YER de kaplamamalı: alt bilgi bağlantıları sayfanın dibinden 26px yukarıda kalıyordu (ölçüldü). Kutu sıfırlanır ama düğüm DOM'da durur — JS hata mesajı hâlâ buraya yazılıyor. */ height: 0; overflow: hidden; padding: 0; opacity: 1; } /* Boş bant ipucu (favori/izleme nasıl eklenir) */ .band-hint { margin: 4px 0; padding: 12px 14px; border: 1px dashed var(--line2); border-radius: 12px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; } /* Task285 — boş favori bandındaki "favori ekle" düğmesi: ipucu metninin altında ortalı, kenarlara teğet değil (panel ilkesi). */ .band-hint .band-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 1px solid var(--line2); border-radius: 10px; padding: 7px 14px; color: var(--accent); font-weight: 700; } /* Task285 (revizyon) — bant içi takım arama: kutu + sonuç listesi. Kenarlardan payla durur (panel ilkesi), sonuçlar kendi içinde kayar. */ .fav-search { padding: 2px; } .fs-row { display: flex; gap: 8px; } .fs-row input { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 12px; color: var(--text); font-size: 14px; } .fs-close { flex: none; } .fs-results { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 262px; overflow-y: auto; } .fs-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: transparent; border: 1px solid var(--line2); border-radius: 10px; color: var(--text); cursor: pointer; text-align: left; } .fs-item img { width: 20px; height: 20px; flex: none; } .fs-item .fs-name { font-weight: 700; } .fs-item .fs-comp { color: var(--muted); font-size: 12px; } .fs-item .fs-star { margin-left: auto; color: var(--line2); font-size: 16px; flex: none; } .fs-item.on .fs-star { color: var(--gold); } .hint-eye { display: inline-block; vertical-align: -3px; /* Favori ipucundaki ☆ ile AYNI renk = çevresindeki metin rengi (kullanıcı: "yıldızın rengi daha iyi, göz de aynı olsun"). Altın değil — altın "izleniyor" demek. */ color: inherit; } /* Not: Eski basit .lu-grid/.ms-head/.ms-row (Task017) kaldırıldı — maç detayı artık WC pitch dizilişi + karşılaştırmalı çubuk istatistiği kullanıyor (üstteki .lu-pitch / .ms-bar blokları). */ /* (Eski tema-collapse z-index kuralı kaldırıldı — tema artık ⚙️ menüsünde; mobil banner position:fixed ile native gibi sabit, kendi z-index'ini taşır.) */ /* Puan durumu: uzun takım adı alt satıra İNMEZ — tek satır + "…" (mobil dahil) */ .table td.team-col, .table th.team-col { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; /* fixed layout'ta esnek sütunun taşmasını kırpar */ } .table td.team-col .sn { display: inline; white-space: nowrap; } /* Açılan tema listesi kendi kapsayıcısına tutunur (kayma düzeltmesi) */ .theme-switch { position: relative; } /* Yeni sürüm çubuğu */ .update-bar { position: fixed; /* Task416 — alta yapışan yüzen öğeler görünür alanın dibinden ölçülür. Task427 — mobilde alt gezinme çubuğunun ÜSTÜNDE durur: eskiden onun üzerine biniyordu. */ bottom: calc(14px + var(--vvb, 0px)); left: 50%; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 24px)); padding: 10px 10px 10px 14px; border-radius: 14px; /* Task427 — UYARI değil bilgi: vurgu çerçevesi yerine panelin kendi dili. */ background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: 13.5px; box-shadow: var(--shadow); animation: updIn 0.22s ease-out; } @media (prefers-reduced-motion: reduce) { .update-bar { animation: none; } } @keyframes updIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (max-width: 640px) { .update-bar { bottom: calc(72px + var(--sab) + var(--vvb, 0px)); } } .upd-ico { display: inline-flex; color: var(--accent); flex: none; } .upd-ico svg { width: 17px; height: 17px; } .upd-txt { /* Tek satırda kalır: iki kelimelik cümle kırılınca çubuk "bozuk" görünüyordu (ölçüldü). */ flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .update-bar .upd-go { flex: none; font-size: 12.5px; padding: 7px 13px; } .upd-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; } .upd-x:hover { color: var(--text); background: var(--panel2); } .upd-x svg { width: 15px; height: 15px; } /* Mobil: liste açılınca kap KAPALI boyutunu korur — ikon yerinden oynamaz */ @media (max-width: 560px) { .theme-switch { height: 29px; box-sizing: border-box; } .theme-switch.open { height: 29px; width: 40px; } .theme-switch.open .theme-btn:nth-child(1) { top: -3px; } .theme-switch.open .theme-btn:nth-child(2) { top: 35px; } .theme-switch.open .theme-btn:nth-child(3) { top: 73px; } } /* Mobil: liste açıkken kapalı pill zemini tamamen gizlenir (taşma görünmez) */ @media (max-width: 560px) { .theme-switch.open { background: transparent !important; border-color: transparent !important; } .theme-switch.open .theme-btn:nth-child(1) { top: -2px; } } /* Task294 — üst şeridin MASAÜSTÜ ok düğmeleri: sıfır genişlikli yapışkan tutucular kaydırma kabının içinde kenara yapışır (yer kaplamaz, düzen kaymaz); yalnız fare/imleçli cihazlarda ve o yönde taşma varken görünürler. */ .nav-ar-hold { position: sticky; flex: 0 0 0; width: 0; align-self: center; z-index: 6; display: none; } .nav-ar-hold-l { left: 0; } .nav-ar-hold-r { right: 0; } @media (hover: hover) and (pointer: fine) { #competition-nav.can-left .nav-ar-hold-l, #competition-nav.can-right .nav-ar-hold-r { display: block; } } .nav-ar { position: absolute; top: 50%; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line2); background: var(--panel); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgb(0 0 0 / 25%); } /* chev aşağı bakar: sağ ok -90°, sol ok 90° döner */ .nav-ar-hold-l .nav-ar { left: 4px; transform: translateY(-50%) rotate(90deg); } .nav-ar-hold-r .nav-ar { right: 4px; transform: translateY(-50%) rotate(-90deg); } .nav-ar svg { width: 15px; height: 15px; } .nav-ar:hover { color: var(--accent); border-color: var(--accent); } /* Kaydırılabilir menü ipucu: kenarlarda içerik solması (devamı var sinyali) */ .subnav.can-right { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent); } .subnav.can-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 100%); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 100%); } .subnav.can-left.can-right { -webkit-mask-image: linear-gradient( 90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent ); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); } /* (kaldırıldı: 3-ikon-yan-yana denemesi — WC katlanır tasarım geri, v76) */ /* Mobil: menü ikon/logoları vurgulu butonun TAM ortasında */ @media (max-width: 640px) { .subnav .day-btn svg, .subnav .day-btn .comp-logo { margin: 0 !important; } .subnav .day-btn { justify-content: center; } } /* Mobil kapalı tema seçici: TEK çember (dış pill yok, ikonun kendi yuvarlağı var) */ @media (max-width: 560px) { .theme-switch:not(.open) { background: transparent !important; border-color: transparent !important; padding: 0 !important; } .theme-switch:not(.open) .theme-btn.active { background: var(--panel2) !important; box-shadow: inset 0 0 0 1px var(--line2) !important; border-radius: 999px; opacity: 1; filter: none; } /* Task580 — kapalı tema anahtarındaki seçili düğme camda da cam kabuk taşır (kural `!important` yazdığı için aynı bağlamda ezilir). */ [data-theme='glass'] .theme-switch:not(.open) .theme-btn.active { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04) ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } } /* Giriş/kayıt formu (Task018) */ .auth-card { max-width: 380px; } .auth-input { display: block; width: 100%; margin: 8px 0; padding: 10px 12px; font-size: 14px; border-radius: 10px; box-sizing: border-box; } #auth-form .btn { width: 100%; margin-top: 8px; } /* Tarayıcı autofill'i (kayıtlı e-posta/şifre) zemini beyaz/sarı yapıyordu — tema zeminini inset box-shadow ile zorla; metin rengi de tema. Tüm form input'larında. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--panel2) inset; box-shadow: 0 0 0 1000px var(--panel2) inset; caret-color: var(--text); transition: background-color 9999s ease-out 0s; } /* Bant kartlarının çizgileri panel çizgisine binmesin (iç boşluk) */ main#content .live-cards { padding: 4px 6px 10px; } /* Geri butonu hafif sağa (kullanıcı isteği) — şerit içinde de aynı boşluk korunur */ /* Task208 — ✕ SAĞA alındı: bu geç kural eskiden sol kenarı zorluyordu (ölçüldü: buton sağa gitmedi, takım logosunun üstünde kaldı). */ .page-back { margin-left: auto; margin-right: 8px; } /* Hesap mini menüsü */ .auth-wrap { position: relative; display: inline-flex; } .auth-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 320; display: flex; flex-direction: column; gap: 8px; padding: 12px; min-width: 200px; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow); } /* Menü öğeleri aynı hizada ortalı (admin de