:root { /* surfaces */ --bg: #0a1510; --bg-glow: #0e1f16; --surface: #12241b; --surface-2: #172d21; --border: #24402f; --border-soft: rgba(233, 246, 237, 0.07); /* text */ --text: #eef6f0; --text-dim: #93ab9d; --text-faint: #5d7368; /* brand accent — used only for interactive/UI chrome, never for category meaning */ --accent: #c6f24e; --accent-ink: #10230d; /* semantic category colors */ --red: #ea5a5a; --yellow: #e8b64a; --green: #35c98a; --blue: #5b9df5; --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --shadow: none; --font-display: "Oswald", "Arial Narrow", Arial, sans-serif; --font-body: "Inter", -apple-system, sans-serif; --font-mono: "Oswald", "Arial Narrow", Arial, sans-serif; /* Header "çim zemin" (onaylanan B mock'u): gerçek çim + tebeşir. Bu token'lar palet değiştiriciye BAĞLI DEĞİL — çim her palette yeşildir; palet yalnızca accent/kicker gibi UI vurgularını boyar. Tema (koyu/açık) ile değişirler: koyu temada koyu çim + koyu scrim + açık metin; açık temada açık çim + beyazımsı scrim + normal metin. */ --pitch-grass: #1f5233; --pitch-grass-2: #24603a; --pitch-chalk: #e8f1e6; --pitch-scrim-strong: rgba(6, 16, 10, 0.78); --pitch-scrim-soft: rgba(6, 16, 10, 0.52); --pitch-ink: #eef6f0; --pitch-ink-dim: #c5d4c6; --pitch-line-soft: rgba(232, 241, 230, 0.22); --pitch-badge-ring: rgba(6, 16, 10, 0.6); --pitch-to-page: rgba(10, 21, 16, 0.96); --chalk-mark: rgba(232, 241, 230, 0.76); --chalk-rule: rgba(232, 241, 230, 0.16); --chalk-rule-strong: rgba(232, 241, 230, 0.24); /* Gövde zemini (onaylanan E fikri): header'daki çimin DEVAMI. Tonlar keyfi değil — header'ın alt kenarında scrim'in altından fiilen görünen renkler (scrim-strong ⊗ pitch-grass / pitch-grass-2) hesaplanıp buraya yazıldı; izler de aynı 90px hizada. Böylece sınır çizgisinin altında zemin gerçekten "aynı çim" olarak sürer. */ --body-grass: #0c1f13; --body-grass-2: #0d2215; } /* Açık tema — koyu temanın alternatifi. data-theme="light" ile üzerinden açılır/kapanır (bkz. app.js initTheme); tercih localStorage'da tutulur. */ :root[data-theme="light"] { --bg: #f6f8f4; --bg-glow: #eef3ea; --surface: #ffffff; --surface-2: #eef3ea; --border: #dbe4d9; --border-soft: rgba(16, 35, 24, 0.08); --text: #142018; --text-dim: #52685a; --text-faint: #8a9c8e; --accent: #4c7a17; --accent-ink: #ffffff; --red: #c8393f; --yellow: #9c6f0f; --green: #1f8f5e; --blue: #2f6fd6; --pitch-grass: #66b27c; --pitch-grass-2: #6ebc84; --pitch-chalk: #ffffff; --pitch-scrim-strong: rgba(246, 248, 244, 0.86); --pitch-scrim-soft: rgba(246, 248, 244, 0.62); --pitch-ink: var(--text); --pitch-ink-dim: var(--text-dim); --pitch-line-soft: rgba(16, 35, 24, 0.18); --pitch-badge-ring: rgba(255, 255, 255, 0.75); --pitch-to-page: rgba(246, 248, 244, 0.96); --chalk-mark: rgba(20, 32, 24, 0.62); --chalk-rule: rgba(20, 32, 24, 0.14); --chalk-rule-strong: rgba(20, 32, 24, 0.22); --body-grass: #e2eee3; --body-grass-2: #e3f0e4; } * { box-sizing: border-box; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body { margin: 0; font-family: var(--font-body); /* Önce DÜZ, garanti taban (gradient desteklenmezse bile zemin boş kalmaz). */ background: var(--body-grass); /* Koyu çim zemin (onaylanan E fikri): header'daki biçme izlerinin çok kısılmış devamı — aynı yön, aynı 90px ritim, yeşil tonda. Sayfa header'la tek malzemeden okunur. */ background: repeating-linear-gradient( 90deg, var(--body-grass) 0px, var(--body-grass) 90px, var(--body-grass-2) 90px, var(--body-grass-2) 180px ), var(--body-grass); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background-color 0.2s, color 0.2s; } /* Tebeşir çizgileri (onaylanan B mock'u): saha 105×68 GERÇEK ölçekte çiziliyor (bkz. index.html viewBox="0 0 105 68") ve "slice" ile kadrajlanıyor. Geniş bir header'da bu, sahanın ortasından yatay bir TV-kamerası kesiti demek: çizgiler asla EZİLMEZ, sadece kırpılır; header uzayınca kesit dikeyde büyür, daralınca santraya zoom'lanır — her durumda oran doğru kalır. Çizgiler scrim'in ALTINDA kaldığı için metinle kontrast yarışına girmez. */ .header-pitch { position: absolute; inset: 0; /* Negatif z-index: header'ın OPAK arka planının üstünde ama header'ın diğer (konumlandırılmamış, normal akıştaki) çocuklarının ALTINDA boyanır — sadece bu iki katman arasına "sıkıştırmak" için başka hiçbir header çocuğuna position/z-index dokunmaya gerek kalmıyor (öncekinden farklı olarak, bu yaklaşım theme-toggle/palette-picker'ın kendi position:absolute'ünü ezme riski taşımıyor). */ z-index: -1; pointer-events: none; } /* Saha çizimi tam genişlikte: kenarlara (pencerenin gerçek kenarına) yapışık kalsın diye artık bir üst sınırla ortalanmıyor. */ .header-pitch svg { width: 100%; height: 100%; display: block; margin: 0 auto; opacity: 0.6; } .header-pitch .field-line, .pitch-rest .field-line, .pitch-close .field-line { fill: none; stroke: var(--pitch-chalk); /* viewBox birimi cinsinden (metre gibi düşün): non-scaling-stroke YOK, çizgi sahayla birlikte ölçeklenir — tebeşir kalınlığı orana sadık. */ stroke-width: 0.35; /* En uzun yol (dış sınır) 2×(105+68)=346 birim; 400 payı Firefox'un yol başlangıcındaki anti-aliasing artığına da yer bırakır (eski 1200×360 çizimdeki 6000/2953 oranıyla aynı mantık). */ stroke-dasharray: 400; stroke-dashoffset: 400; animation: field-draw 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards; } @keyframes field-draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .header-pitch .field-line, .pitch-rest .field-line, .pitch-close .field-line { animation: none; stroke-dashoffset: 0; } } /* Sahanın header'dan taşan alt kesiti: top:auto → statik konum (header'ın hemen altı); yükseklik/viewBox JS'te (positionPitchRest). Dikiş sürekliliği: header'da çizgiler 0.6 katman opaklığıyla çizilip scrim-strong (α=0.78) altında kalıyor → dikişteki efektif kontrast 0.6×(1−0.78)=0.132; alt kesit buna eşitlenir, yuvarlak/dikeyler dikişten ton atlamadan geçer. */ .pitch-rest { position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0.132; } .pitch-rest svg { width: 100%; height: 100%; display: block; margin: 0 auto; } /* Saha uzatma dikeyleri + kapanış şeridi: konum/boyut JS'te (positionPitchRest). Opaklık .pitch-rest ile aynı — üç katman tek parça saha gibi okunur. */ .pitch-stretch { position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0.132; } .pitch-stretch i { position: absolute; top: 0; bottom: 0; background: var(--pitch-chalk); } .pitch-close { position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0.132; } .pitch-close svg { width: 100%; height: 100%; display: block; margin: 0 auto; } /* Div/span tabanlı etkileşimli öğeler (role="button") tarayıcının varsayılan imlecini almaz, bu yüzden burada elle veriliyor. */ [role="button"], .filter-btn, .theme-toggle, .palette-btn, .case-summary, .sort-select, .select-control, .query-submit, .precedent-download, .precedent-copy, .precedent-find-btn, .team-badge, summary { cursor: pointer; } header { position: relative; /* z-index (herhangi bir değer, "auto" değil) header'ın KENDİ yerel stacking context'ini oluşturmasını sağlıyor — bu olmadan .header-pitch'in z-index:-1'i header'ın ARKASINDAKİ (body seviyesi) başka bir şeyin arkasına düşebiliyordu, header'ın kendi arka planının üstünde değil (negatif z-index'in "yereldeki" davranışı, en yakın pozisyonlanmış ATA'nın kendi bir stacking context OLUŞTURMASINA bağlı). */ z-index: 0; overflow: hidden; /* Dikişte ayraç yok (deneme): tebeşir sınır çizgisi de yeşil accent vurgusu da kaldırıldı — bölünmeyi artık gövdeye devam eden saha çizgileri veriyor. Geri almak istersen: border-bottom: 1px solid var(--pitch-line-soft); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 48%, transparent); */ padding: 40px 20px 42px; text-align: center; /* Çim zemin (onaylanan B mock'u): önce DÜZ, garanti çim rengi; sonra dikey biçme izleri (mowing stripes). Saha artık çizgi değil ZEMİN. */ background: var(--pitch-grass); background: repeating-linear-gradient(90deg, var(--pitch-grass) 0px, var(--pitch-grass) 90px, var(--pitch-grass-2) 90px, var(--pitch-grass-2) 180px); } /* (header::after "sayfaya karışma" degradesi kaldırıldı: gövde zemini artık header'ın alt kenar tonlarıyla birebir aynı — degrade araya yabancı bir koyuluk sokup devamlılığı bozuyordu.) */ /* Metin okunabilirliği: çim + tebeşir üstüne koyu (açık temada açık) bir degrade scrim — üst/alt daha koyu, orta daha açık. Panel yok. */ .header-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--pitch-scrim-strong) 0%, var(--pitch-scrim-soft) 45%, var(--pitch-scrim-strong) 100%); pointer-events: none; } .theme-toggle { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); cursor: pointer; transition: border-color 0.15s, color 0.15s, transform 0.1s ease; } .theme-toggle:hover { border-color: var(--accent); color: var(--text); } .theme-toggle:active { transform: scale(0.9); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* Saha çizgisi sağ üst köşede tam da paletin noktalarının ARASINDAN geçiyordu (noktalar dolu daireler, ama aralarındaki boşluktan çizgi sızıyordu). Kümeye kendi zemini verilince çizgi kümenin arkasında kalıyor — .header-content'teki aynı yaklaşım. */ .palette-picker { position: absolute; top: 16px; right: 60px; display: inline-flex; gap: 6px; padding: 4px 6px; border-radius: 999px; background: var(--surface); background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .palette-btn { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.15s, transform 0.15s; } .palette-btn:hover { transform: translateY(-1px); } .palette-btn.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .palette-swatch { width: 12px; height: 12px; border-radius: 50%; display: block; } @media (max-width: 480px) { .palette-picker { right: 54px; top: 14px; } } /* Çim zeminde buzlu panel YOK (onaylanan B mock'u) — okunabilirliği .header-scrim sağlıyor. Bu artık sadece içeriği ortalayan bir kap. */ .header-content { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); } .brand { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 14px; } .brand-logo { width: 44px; height: 44px; flex-shrink: 0; } .brand-name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: 0.01em; text-transform: uppercase; /* Çim+scrim üstünde tema metnine değil, sabit "saha mürekkebine" bağlı (koyu temada açık, açık temada normal metin — bkz. --pitch-ink). */ color: var(--pitch-ink); } .kicker { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); border-radius: 2px; padding: 4px 10px; margin-bottom: 18px; } header p { margin: 0 auto; max-width: 520px; color: var(--pitch-ink-dim); font-size: 0.98rem; line-height: 1.5; } .stats-bar { display: flex; flex-wrap: wrap; justify-content: center; margin: 28px auto 0; max-width: 720px; border-top: 1px solid var(--pitch-line-soft); } .stats-bar:empty { display: none; } .stat-pill { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1 1 130px; padding: 14px 16px; border-right: 1px solid var(--pitch-line-soft); } .stat-pill:last-child { border-right: none; } .stat-pill strong { font-family: var(--font-display); color: var(--accent); font-size: 1.5rem; font-weight: 700; line-height: 1; } .stat-pill span { color: var(--pitch-ink-dim); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } .club-strip { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0 auto; padding: 20px 0 28px; max-width: 760px; } .club-strip:empty { display: none; } .club-strip-row { display: flex; flex-wrap: wrap; justify-content: center; } .club-strip .team-badge { width: 38px; height: 38px; margin-left: -11px; border: 2px solid var(--pitch-badge-ring); cursor: pointer; transition: transform 0.15s, z-index 0.15s, box-shadow 0.15s; } .club-strip-row .team-badge:first-child { margin-left: 0; } .club-strip .team-badge:hover { transform: translateY(-3px) scale(1.08); z-index: 2; } .club-strip .team-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 3; } .club-strip .team-badge.active { transform: translateY(-3px) scale(1.12); box-shadow: 0 0 0 2px var(--accent); z-index: 3; } .club-strip .team-initials { font-size: 12px; } .query-section, .controls, .body-section-heading, main { max-width: 880px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } .ifab-ref-grid { margin-top: 0; } .ifab-ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 14px; } .ifab-ref-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; transition: border-color 0.15s, transform 0.15s; } .ifab-ref-card:hover { border-color: var(--blue); transform: translateY(-1px); } .ifab-ref-card a { font-family: var(--font-display); color: var(--text); font-weight: 600; font-size: 0.92rem; text-decoration: none; } .ifab-ref-card a:hover { color: var(--blue); } .ifab-ref-card p { margin: 7px 0 0; color: var(--text-dim); font-size: 0.81rem; line-height: 1.45; } .ifab-ref-subgrid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .ifab-ref-subcard { display: inline-block; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-size: 0.74rem; text-decoration: none; transition: color 0.15s, border-color 0.15s; } .ifab-ref-subcard:hover { color: var(--blue); border-color: var(--blue); } .ifab-ref-subcount { opacity: 0.65; font-size: 0.9em; } /* Kriteri, veri setimizdeki somut vaka sayısına bağlayan rozet-buton: dış UEFA linkinden BİLEREK AYRI (kendi 'sının dışında) — tıklanınca UEFA'ya değil, o kritere giren pozisyon listemize gider. */ .ifab-ref-count { display: inline-flex; align-items: center; gap: 4px; margin: 8px 0 0; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--accent); font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .ifab-ref-count:hover { background: var(--surface-2); border-color: var(--accent); } .karne-hint { margin: 0; color: var(--text-faint); font-size: 0.78rem; line-height: 1.5; max-width: 70ch; } .karne-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 16px; } .karne-title { margin: 0 0 10px; font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .karne-table-wrap { max-height: 420px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); } .karne-table-wrap .karne-title { position: sticky; top: 0; margin: 0; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); z-index: 1; } .karne-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .karne-table th, .karne-table td { padding: 7px 12px; text-align: right; white-space: nowrap; } .karne-table th { position: sticky; top: 33px; background: var(--surface); color: var(--text-faint); font-family: var(--font-display); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid var(--border); z-index: 1; } .karne-table tbody tr:nth-child(even) { background: var(--surface-2); } .karne-table td.karne-th-name, .karne-table th.karne-th-name { text-align: left; font-family: var(--font-display); color: var(--text); font-weight: 600; } .karne-table td:not(.karne-th-name) { color: var(--text-dim); font-variant-numeric: tabular-nums; } .karne-table .num-hemfikir, .karne-table .num-lehine { color: var(--green); } .karne-table .num-karsi, .karne-table .num-aleyhine { color: var(--red); } .karne-table .num-bolundu { color: var(--yellow); } .karne-skor-good, .karne-skor-mid, .karne-skor-bad { font-weight: 700; } .karne-skor-good { color: var(--green); } .karne-skor-mid { color: var(--yellow); } .karne-skor-bad { color: var(--red); } .karne-empty { color: var(--text-faint); font-size: 0.82rem; text-align: left !important; } /* Kenar sekmesi + kayan panel: Hakem & Takım Karnesi / UEFA Kriterleri artık sayfa altında
yerine, sol/sağ kenara sabit bir sekmeden açılıyor (kullanıcı isteği: sayfanın ortasında/altında alakasız durmasın). */ .edge-tab { position: fixed; top: 50%; transform: translateY(-50%); z-index: 220; display: flex; align-items: center; justify-content: center; text-align: center; width: 92px; padding: 12px 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; line-height: 1.3; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s, width 0.15s; box-shadow: 0 4px 18px rgba(0,0,0,0.28); } .edge-tab:hover { color: var(--text); border-color: var(--accent); width: 100px; } .edge-tab.left { left: 0; border-left: none; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } .edge-tab.right { right: 0; border-right: none; border-radius: var(--radius-lg) 0 0 var(--radius-lg); } .edge-tab.active { color: var(--accent); border-color: var(--accent); } .edge-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .edge-scrim { position: fixed; inset: 0; background: rgba(6,16,10,0.6); backdrop-filter: blur(2px); z-index: 210; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .edge-scrim.open { opacity: 1; pointer-events: auto; } .edge-panel { position: fixed; top: 0; bottom: 0; width: min(820px, 94vw); background: var(--bg); border-left: 1px solid var(--border); border-right: 1px solid var(--border); z-index: 211; display: flex; flex-direction: column; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 60px rgba(0,0,0,0.5); } .edge-panel.left-panel { left: 0; transform: translateX(-100%); } .edge-panel.right-panel { right: 0; transform: translateX(100%); } .edge-panel.open { transform: translateX(0); } .edge-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .edge-panel-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.01em; } .edge-panel-close { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-size: 1rem; line-height: 1; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .edge-panel-close:hover { border-color: var(--accent); color: var(--text); } .edge-panel-body { flex: 1; overflow-y: auto; padding: 18px 24px 32px; } .edge-panel-body .ifab-ref-grid { margin-top: 0; } .edge-panel-body .karne-columns { grid-template-columns: 1fr; gap: 26px; } .edge-panel-body .karne-table-wrap { max-height: 50vh; overflow-x: auto; } @media (max-width: 640px) { .edge-tab { font-size: 0.66rem; width: 74px; padding: 10px 6px; } } /* Sıralanabilir başlıklar: tıklanabilir olduğu ok işaretiyle + hover'la belli olsun. Aktif sütun accent renkte, yön oku CSS ile çizilir (görüntü isteği yok, ::after içeriği). */ .karne-table th[data-sort] { cursor: pointer; user-select: none; position: sticky; } .karne-table th[data-sort]:hover { color: var(--text); } .karne-table th[data-sort]::after { content: ""; display: inline-block; margin-left: 4px; opacity: 0.35; } .karne-table th.karne-sorted { color: var(--accent); } .karne-table th.karne-sorted::after { content: "▾"; opacity: 1; } .karne-table th.karne-sorted.karne-sorted-asc::after { content: "▴"; } /* Karne satırı: hakem/takım karnesinde bir satıra tıklamak pozisyon listesini filtreler (bkz. app.js bindKarneRowClicks) — bunun mümkün olduğunu satırın kendisi de göstersin. */ .karne-table tbody tr.karne-row { cursor: pointer; transition: background 0.12s; } .karne-table tbody tr.karne-row:hover { background: var(--border-soft); } .karne-table tbody tr.karne-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Panel "biraz yukarı" (kullanıcı isteği): 28 → 12px. */ .query-section { margin-top: 12px; } .query-panel { background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--chalk-rule); border-radius: var(--radius-lg); padding: 26px 28px; } .query-panel h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; } .query-hint { margin: 0 0 18px; color: var(--text-dim); font-size: 0.87rem; line-height: 1.55; max-width: 60ch; } .query-step { margin-bottom: 18px; } .query-step-q { margin: 0 0 9px; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.01em; } .query-step-opt { color: var(--text-faint); font-weight: 500; text-transform: none; letter-spacing: 0; } .query-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .query-step-placeholder { margin: 0; color: var(--text-faint); font-size: 0.85rem; } .query-optional-row { margin: 4px 0 4px; padding-top: 14px; border-top: 1px dashed var(--border); } .query-optional-label { margin: 0; color: var(--text-dim); font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0; } .query-optional-toggle { background: none; border: none; color: var(--text-faint); font-family: var(--font-body); font-size: 0.82rem; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; padding: 0; } .query-optional-toggle:hover { color: var(--accent); } .query-optional-panel { margin-top: 10px; } .query-optional-hint { margin: 0 0 10px; color: var(--text-faint); font-size: 0.8rem; line-height: 1.5; } .query-upload-box { border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 16px; text-align: center; cursor: pointer; margin-bottom: 14px; color: var(--text-faint); font-size: 0.85rem; transition: border-color 0.15s, background 0.15s; } .query-upload-box:hover { border-color: var(--accent); background: rgba(198,242,78,0.04); } .query-upload-box img { max-width: 100%; max-height: 220px; border-radius: var(--radius-sm); display: block; margin: 0 auto; } .query-textarea { width: 100%; min-height: 84px; padding: 12px 15px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.93rem; font-family: var(--font-body); resize: vertical; margin-bottom: 14px; transition: border-color 0.15s; } .query-textarea:focus { outline: none; border-color: var(--accent); } .query-textarea::placeholder { color: var(--text-faint); } .query-submit { width: 100%; padding: 12px 24px; margin-top: 22px; border-radius: var(--radius-sm); border: none; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: transform 0.12s, box-shadow 0.15s, opacity 0.15s; } .query-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 20px -6px rgba(198,242,78,0.5); } .query-submit:active { transform: translateY(0); } .query-submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } .query-results { margin-top: 10px; display: flex; flex-direction: column; gap: 14px; } .query-results-label { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 8px 0 -2px; } /* Veri setine öner: sadece link kabul eden, fotoğraf yok (telif). */ .query-suggest-row { margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--border); text-align: center; } .query-suggest-toggle { background: none; border: none; color: var(--text-faint); font-family: var(--font-body); font-size: 0.82rem; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; padding: 0; } .query-suggest-toggle:hover { color: var(--accent); } .query-suggest-panel { margin-top: 14px; } .query-suggest-panel[hidden] { display: none; } .query-suggest-hint { margin: 0 0 12px; color: var(--text-faint); font-size: 0.8rem; line-height: 1.5; } .suggest-url-input { min-height: unset; height: 42px; margin-bottom: 10px; } .suggest-consent { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 16px; color: var(--text-dim); font-size: 0.8rem; line-height: 1.45; cursor: pointer; } .suggest-consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); } .suggest-consent a { color: var(--text-dim); text-decoration: underline; } .suggest-consent a:hover { color: var(--accent); } .suggest-submit-btn { margin-top: 0; } .suggest-submit-btn:disabled { opacity: 0.45; cursor: not-allowed; } .suggest-status { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.85rem; text-align: center; } .suggest-status[hidden] { display: none; } .suggest-status.ok { background: rgba(53,201,138,0.12); color: var(--green); border: 1px solid rgba(53,201,138,0.3); } .suggest-status.err { background: rgba(234,90,90,0.12); color: var(--red); border: 1px solid rgba(234,90,90,0.3); } .controls { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; position: sticky; top: 0; z-index: 20; /* Zemin artık koyu çim (bkz. body) — sticky çubuk kayarken zeminle aynı malzemeden görünsün diye düz --bg yerine çim tabanı kullanır. */ background: var(--body-grass); padding: 14px 20px; border-bottom: 1px solid var(--chalk-rule-strong); } .search-box { flex: 1 1 260px; padding: 11px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font-body); font-size: 0.94rem; transition: border-color 0.15s; } .search-box:focus { outline: none; border-color: var(--accent); } .search-box::placeholder { color: var(--text-faint); } .filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .filter-btn { padding: 8px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s ease; } .filter-btn:hover { border-color: var(--text-dim); color: var(--text); } .filter-btn:active { transform: scale(0.95); } .filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; } .filter-btn.disabled, .filter-btn:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; } .filter-btn.disabled:hover, .filter-btn:disabled:hover { border-color: var(--border); color: var(--text-dim); } .sort-select, .select-control { padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font-family: var(--font-display); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; max-width: 180px; transition: border-color 0.15s, box-shadow 0.15s, color 0.15s; } .select-control { max-width: 220px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .sort-select:hover, .select-control:hover { border-color: var(--text-dim); } .sort-select:focus, .select-control:focus { outline: none; border-color: var(--accent); } .select-control.is-active { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px var(--accent); } /* --- Özel filtre menüleri (onaylanan Varyant 1, bkz. app.js initFilterMenus). Native select gizli durur (durum kaynağı); görünen, etiket + güncel değer gösteren tetikleyici ve hap/satır seçenekli açılır panel. --- */ .fwrap { position: relative; display: inline-block; } .fwrap select { display: none; } .ftrig { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; max-width: 250px; transition: border-color 0.15s, color 0.15s, box-shadow 0.15s; } .ftrig:hover { border-color: var(--text-dim); color: var(--text); } .ftrig-val { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; } .ftrig.set { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .ftrig-chev { width: 11px; height: 11px; flex-shrink: 0; transition: transform 0.15s; } .ftrig[aria-expanded="true"] { border-color: var(--accent); color: var(--text); } .ftrig[aria-expanded="true"] .ftrig-chev { transform: rotate(180deg); } .fpanel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 250px; max-width: min(340px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); padding: 12px; text-align: left; animation: fpanelPop 0.14s ease both; } .fpanel[hidden] { display: none; } @keyframes fpanelPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .fpanel { animation: none; } } .fsearch { width: 100%; margin-bottom: 10px; padding: 8px 11px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 0.86rem; } .fsearch:focus { outline: none; border-color: var(--accent); } .fopt-pills { display: flex; flex-wrap: wrap; gap: 6px; } .fopt-pills .fopt { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-family: var(--font-body); font-size: 0.82rem; cursor: pointer; transition: border-color 0.12s, background 0.12s, color 0.12s; } .fopt-pills .fopt:hover { border-color: var(--text-dim); color: var(--text); } .fopt-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .fopt-list .fopt { padding: 7px 10px; border-radius: 5px; border: none; background: none; color: var(--text-dim); font-family: var(--font-body); font-size: 0.86rem; text-align: left; cursor: pointer; } .fopt-list .fopt:hover { background: var(--surface-2); color: var(--text); } .fopt.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .fopt-list .fopt.on:hover { background: var(--accent); color: var(--accent-ink); } .fopt[hidden] { display: none; } .fgroup-label { font-family: var(--font-display); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin: 10px 0 4px; padding: 0 10px; } .fgroup-label:first-child { margin-top: 0; } .fgroup-label[hidden] { display: none; } .body-section-heading { display: flex; align-items: center; gap: 10px; margin-top: 26px; margin-bottom: 0; color: var(--text); font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1.2; text-transform: uppercase; } .section-mark { width: 22px; height: 22px; flex-shrink: 0; color: var(--chalk-mark); } .section-mark path { fill: none; stroke: currentColor; stroke-width: 1.6; } .section-mark circle { fill: currentColor; } main { margin-top: 22px; margin-bottom: 60px; display: flex; flex-direction: column; gap: 12px; } .empty-state { text-align: center; color: var(--text-dim); padding: 48px 0; font-size: 0.92rem; } .empty-state.error { color: var(--red); } .empty-state .spinner { width: 22px; height: 22px; margin: 0 auto 14px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes cardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .case-card { position: relative; background: var(--surface); border: 1px solid var(--chalk-rule); border-radius: var(--radius); border-left: 3px solid var(--yellow); box-shadow: var(--shadow); overflow: hidden; transition: border-color 0.15s, transform 0.15s; animation: cardIn 0.3s ease both; animation-delay: var(--stagger, 0s); } @media (prefers-reduced-motion: reduce) { .case-card { animation: none; } } .case-card:hover { transform: translateY(-1px); } .case-card.kat-kirmizi_kart { border-left-color: var(--red); } .case-card.kat-kart_tartismasi { border-left-color: var(--yellow); } .case-card.kat-penalti_tartismasi { border-left-color: var(--green); } .case-card.kat-gol_var_tartismasi { border-left-color: var(--blue); } /* Floodlight parıltısı: imleci kart üzerinde takip eden, çok hafif bir ışık lekesi — bir stadyum projektörünün kartın üzerinde gezinmesi gibi. app.js'teki mousemove dinleyicisi --mx/--my'yi günceller. */ .case-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 0; } .case-card:hover::before { opacity: 0.8; } .case-card > * { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .case-card::before { display: none; } } /* Mini saha diyagramı (bkz. app.js renderMiniPitch): özet satırının sağında, saha_bolgesi faceti dolu vakalarda. Dar ekranda gizlenir. */ .case-split { display: flex; gap: 18px; align-items: stretch; } .case-main { flex: 1; min-width: 0; } .minipitch { flex: 0 0 132px; align-self: center; margin: 0; } .minipitch svg { width: 132px; height: 86px; display: block; background: repeating-linear-gradient(90deg, var(--pitch-grass) 0 15px, var(--pitch-grass-2) 15px 30px); border-radius: 4px; border: 1px solid var(--chalk-rule); } .minipitch .mp-l { fill: none; stroke: var(--pitch-chalk); stroke-width: 1.1; opacity: 0.55; } .minipitch .mp-zone { stroke: none; opacity: 0.4; } .minipitch .mp-spot { stroke: rgba(6, 16, 10, 0.7); stroke-width: 1; } .minipitch figcaption { font-size: 0.64rem; color: var(--text-faint); text-align: center; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-display); } @media (max-width: 640px) { .minipitch { display: none; } } /* Aksiyon satırı + paylaşım butonları (bkz. app.js paylaşım bölümü). */ .case-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .case-action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-family: var(--font-display); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .case-action-btn:hover { border-color: var(--accent); color: var(--text); } .case-action-btn:disabled { cursor: wait; opacity: 0.7; } .media-badge { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); color: var(--accent); } .case-media-block { margin: 12px 0 14px; } .case-media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; margin-top: 8px; max-width: 680px; } .case-media-tile { margin: 0; min-width: 0; } .case-media-tile figcaption { margin-bottom: 5px; color: var(--text-faint); font-family: var(--font-display); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .case-media-item { width: 100%; height: clamp(132px, 22vw, 210px); object-fit: contain; display: block; box-sizing: border-box; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #050805; } .case-media-item.is-missing, .case-media-tile.is-missing { display: none; } .case-media-credit { margin: 8px 0 0; color: var(--text-faint); font-size: 0.72rem; line-height: 1.5; } .case-media-credit a { color: var(--text-dim); } .case-media-credit a:hover { color: var(--accent); } @media (max-width: 640px) { .case-media-grid { grid-template-columns: 1fr; max-width: none; } .case-media-item { height: clamp(150px, 54vw, 240px); } } .shared-case { max-width: 880px; margin: 0 auto; padding: 0 20px; } .shared-case .case-card { margin-top: 10px; } /* Tweet embed (bkz. app.js loadTwitterWidgets): tık-üzerine yüklenen resmî X widget'ı. */ .tweet-embed-wrap { margin-top: 12px; } .tweet-embed-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-family: var(--font-display); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .tweet-embed-btn:hover { border-color: var(--accent); color: var(--text); } .tweet-embed-btn:disabled { cursor: wait; opacity: 0.7; } .tweet-embed { max-width: 500px; } .tweet-embed[hidden] { display: none; } .case-summary { padding: 18px 20px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; } .case-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .case-summary .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .case-summary .mac { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.005em; } .case-summary .tarih { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.76rem; white-space: nowrap; } .case-summary .tarih::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--chalk-mark); opacity: 0.66; vertical-align: 1px; } .case-summary .oyuncular { color: var(--text-dim); font-size: 0.89rem; } .team-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.005em; } .team-chip { display: inline-flex; align-items: center; gap: 7px; } .team-badge { position: relative; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; background: var(--badge-color, var(--surface-2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); } .team-badge img { width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #fff; } .team-badge.show-fallback img { display: none; } .team-initials { display: none; font-size: 8px; font-weight: 700; color: #fff; letter-spacing: 0.02em; } .team-badge.show-fallback .team-initials { display: block; } .vs-sep { color: var(--text-faint); font-family: var(--font-mono); font-weight: 500; font-size: 0.74rem; text-transform: uppercase; } .badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; align-items: center; } .badge { font-size: 0.73rem; color: var(--text-dim); padding-right: 8px; border-right: 1px solid var(--chalk-rule); } .badge:last-of-type { border-right: none; } .badge.karar { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 11px; color: var(--text); font-weight: 600; } .case-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .case-detail.open { grid-template-rows: 1fr; } .case-detail-inner { overflow: hidden; } .case-detail-inner-pad { padding: 0 20px 22px; border-top: 1px solid var(--chalk-rule); } .detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 22px; margin: 16px 0; font-size: 0.87rem; } .detail-grid .label { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 3px; } .aciklama { font-size: 0.94rem; line-height: 1.6; margin: 16px 0; color: var(--text); } .uzman-list { margin: 16px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .uzman-list li { background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 0.87rem; line-height: 1.5; } .uzman-list .kisi { font-family: var(--font-display); font-weight: 600; display: block; margin-bottom: 4px; color: var(--accent); font-size: 0.85rem; } .uzman-empty { color: var(--text-faint); font-size: 0.85rem; font-style: italic; } .kaynak-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; margin-right: 16px; padding: 5px 12px; border-radius: 6px; background: var(--yellow); color: #1a1a1a; font-size: 0.85rem; font-weight: 600; text-decoration: none; } .kaynak-link:hover { filter: brightness(1.08); text-decoration: none; } /* clear-line-link kasıtlı olarak .kaynak-link'ten tamamen farklı görünüyor (buton değil, düz metin link + kendi satırında) — ikisi de "→" ile bitip yan yana durunca kullanıcı hangi okun kaynağa gittiğini karıştırıyordu (bkz. kullanıcı geri bildirimi). */ .clear-line-link { display: flex; align-items: center; gap: 4px; margin-top: 10px; color: var(--blue); font-size: 0.8rem; text-decoration: none; } .clear-line-link:hover { text-decoration: underline; } .clear-line-ozet { margin: 5px 0 0; color: var(--text-dim); font-size: 0.78rem; line-height: 1.5; max-width: 560px; } .todo { color: var(--yellow); opacity: 0.85; } /* "dakika" alanı için: null burada eksik veri değil, kaynak tweet'in dakikayı hiç belirtmediği anlamına geliyor (bkz. LABELING.md kural 14, "UYDURMA" — tahmini dakika yazmak yerine null bırakılıyor). .todo'nun sarı "dikkat" tonu bunu yanlışlıkla "eksik/tamamlanmamış" gibi gösteriyordu; nötr, düşük vurgulu bir stil kullanılıyor. */ .belirtilmemis { color: var(--text-dim); opacity: 0.85; font-style: italic; } .precedent-block { margin-top: 16px; } .precedent-find-btn { padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.02em; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .precedent-find-btn:hover { border-color: var(--accent); } .precedent-find-btn:disabled { opacity: 0.6; cursor: default; } .precedent-status { margin-top: 10px; color: var(--text-dim); font-size: 0.85rem; } .precedent-result { margin-top: 14px; max-width: 600px; } .precedent-canvas { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--border); } .precedent-actions { display: flex; gap: 10px; margin-top: 10px; } .precedent-download, .precedent-copy { padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color 0.15s; } .precedent-download:hover, .precedent-copy:hover { border-color: var(--accent); } footer { text-align: center; color: var(--text-faint); font-size: 0.78rem; padding: 28px 20px; border-top: 1px solid var(--border-soft); margin-top: 20px; } .legal-note { margin-top: 10px; line-height: 1.6; } .legal-note a { color: var(--text-dim); text-decoration: underline; } .legal-note a:hover { color: var(--accent); } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 14px; } .footer-links a { color: var(--text-dim); text-decoration: none; } .footer-links a:hover { color: var(--accent); } .pagination { max-width: 880px; margin: 24px auto 40px; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 16px; } .page-btn { padding: 9px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.1s ease; } .page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .page-btn:active:not(:disabled) { transform: scale(0.95); } .page-btn:disabled { opacity: 0.35; cursor: default; } .page-info { color: var(--text-faint); font-size: 0.8rem; white-space: nowrap; } .back-to-top { position: fixed; right: 20px; bottom: 20px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font-size: 1.1rem; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s, border-color 0.15s, color 0.15s; z-index: 30; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { border-color: var(--accent); color: var(--accent); } /* --- Statik bilgi sayfaları (kvkk.html, yontem.html): app.js/matching-core.js yüklenmez, sadece tema token'ları + tipografi paylaşılır. Basit, okunur bir sütun — ana aracın saha/kart tasarımından kasıtlı olarak sade. --- */ .legal-page { background: var(--bg); color: var(--text); min-height: 100vh; } .legal-topbar { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .legal-topbar a.legal-home { color: var(--text); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.01em; } .legal-topbar a.legal-home:hover { color: var(--accent); } .legal-topbar .legal-crumb { color: var(--text-faint); font-size: 0.9rem; } .legal-content { max-width: 720px; margin: 0 auto; padding: 36px 20px 80px; font-family: var(--font-body); line-height: 1.65; } .legal-content h1 { font-family: var(--font-display); font-size: 1.7rem; margin: 0 0 6px; } .legal-content .legal-updated { color: var(--text-faint); font-size: 0.85rem; margin: 0 0 32px; } .legal-content h2 { font-family: var(--font-display); font-size: 1.15rem; color: var(--accent); margin: 36px 0 10px; padding-top: 4px; } .legal-content h2:first-of-type { margin-top: 0; } .legal-content h3 { font-size: 1rem; margin: 20px 0 8px; color: var(--text); } .legal-content p { margin: 0 0 14px; color: var(--text-dim); } .legal-content strong { color: var(--text); } .legal-content ul, .legal-content ol { margin: 0 0 14px; padding-left: 22px; color: var(--text-dim); } .legal-content li { margin-bottom: 6px; } .legal-content a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(198,242,78,0.35); } .legal-content a:hover { text-decoration-color: var(--accent); } .legal-content code { font-family: var(--font-mono); background: var(--surface-2); padding: 1px 5px; border-radius: 3px; font-size: 0.88em; } .legal-content table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 0.92rem; } .legal-content th, .legal-content td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-dim); vertical-align: top; } .legal-content th { color: var(--text); font-weight: 600; } .legal-callout { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 20px; font-size: 0.92rem; } .legal-callout p:last-child { margin-bottom: 0; } .legal-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 20px; } .legal-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; } .legal-stat .n { font-family: var(--font-display); font-size: 1.3rem; color: var(--accent); display: block; } .legal-stat .l { color: var(--text-faint); font-size: 0.78rem; }