/* ============================================================ * Tournament Public Pages — sayfa-özel stiller (.tp-* / .tournament-* layer) * Pattern: Café index.css birebir referans alındı (cf-* → tp-*) * Tokens: wwwroot/css/shared/binderim-tokens.css (tüketir, tanımlamaz) * Dark theme: .theme-dark on * ============================================================ */ /* ---------- Sayfa kapsayıcı ---------- */ .tournament-public-page { padding-top: 16px; padding-bottom: 40px; } /* ---------- Hero strip ---------- */ .tournament-hero { margin: 4px 0 22px; padding: 22px 26px; border-radius: 20px; background: var(--bg-canvas); border: 1px solid var(--border-1); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 22px; position: relative; overflow: hidden; } .tournament-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 90% at 0% 0%, color-mix(in oklch, var(--color-brand) 14%, transparent), transparent 60%), radial-gradient(60% 80% at 100% 100%, color-mix(in oklch, var(--violet-600) 12%, transparent), transparent 65%), repeating-radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--fg-1) 6%, transparent) 0 1px, transparent 1px 24px); opacity: 0.5; pointer-events: none; } .tournament-hero > * { position: relative; } .tournament-hero-icon { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--grad-feature); color: #fff; font-size: 26px; box-shadow: var(--shadow-lg); flex-shrink: 0; } .tournament-hero-content { flex: 1; min-width: 0; } .tournament-hero-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--color-brand); text-transform: uppercase; } .tournament-hero h1 { margin: 4px 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -0.6px; color: var(--fg-1); } .tournament-hero p { margin: 0; font-size: 14px; color: var(--fg-3); line-height: 1.5; max-width: 720px; } /* ---------- Filtre kartı ---------- */ .tp-filter-card { background: var(--bg-canvas); border: 1px solid var(--border-1); border-radius: 16px; box-shadow: var(--shadow-xs); padding: 16px 18px; margin-bottom: 22px; } .tp-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; } .tp-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--fg-3); margin-bottom: 4px; } .tp-input, .tp-select { width: 100%; padding: 8px 10px; border: 1px solid var(--border-2); border-radius: 8px; background: var(--bg-canvas); color: var(--fg-1); font: 13px/1.4 var(--font-sans); outline: none; transition: border-color 150ms, box-shadow 150ms; -webkit-appearance: none; appearance: none; } .tp-input::placeholder { color: var(--fg-4); } .tp-input:focus, .tp-select:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-brand) 14%, transparent); } .tp-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } /* ---------- Butonlar ---------- */ .tp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; min-height: 44px; border-radius: 10px; font: 600 13px/1 var(--font-sans); cursor: pointer; text-decoration: none; transition: all 180ms var(--ease-standard); border: 1px solid transparent; white-space: nowrap; } .tp-btn-primary { background: var(--color-brand); border-color: var(--color-brand); color: #fff; box-shadow: var(--shadow-sm); } .tp-btn-primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); } .tp-btn-ghost { background: transparent; border-color: var(--border-1); color: var(--fg-1); } .tp-btn-ghost:hover { border-color: var(--color-brand); color: var(--color-brand); } .tp-btn-warn { background: transparent; border-color: var(--color-warning); color: var(--color-warning); } .tp-btn-warn:hover { background: var(--color-warning-soft); } .tp-btn-sm { padding: 7px 12px; min-height: 36px; font-size: 12px; } .tp-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Tam genişlik buton (kayıt paneli) */ .tp-btn-block { width: 100%; } /* ---------- Alert / hata bandı ---------- */ .tp-alert { padding: 12px 14px; border-radius: 10px; font-size: 13.5px; border: 1px solid transparent; margin-bottom: 14px; } .tp-alert-danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: color-mix(in oklch, var(--color-danger) 30%, transparent); } /* ---------- Boş durum (empty state) ---------- */ .tp-empty { text-align: center; color: var(--fg-3); padding: 48px 16px; background: var(--bg-canvas); border: 1px solid var(--border-1); border-radius: 16px; margin-bottom: 14px; } .tp-empty .bi { font-size: 32px; color: var(--fg-4); display: block; margin-bottom: 12px; } .tp-empty p { margin: 0; font-size: 14px; } /* ---------- Yükleme iskeleti (skeleton) ---------- */ .tp-skel-card { background: var(--bg-canvas); border: 1px solid var(--border-1); border-radius: 16px; box-shadow: var(--shadow-xs); padding: 16px; margin-bottom: 14px; } .tp-skel-line { height: 14px; border-radius: 6px; background: color-mix(in oklch, var(--fg-1) 8%, transparent); animation: tp-shimmer 1.4s ease-in-out infinite; margin-bottom: 10px; } .tp-skel-line-title { height: 20px; width: 55%; } .tp-skel-line-sub { width: 75%; } .tp-skel-line-body { width: 90%; } .tp-skel-line-body2 { width: 80%; } .tp-skel-line-body3 { width: 72%; } @keyframes tp-shimmer { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } } /* ---------- Sonuç bilgisi + liste başlık satırı ---------- */ .tp-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .tp-list-title { font-size: 17px; font-weight: 800; color: var(--fg-1); letter-spacing: -0.2px; margin: 0; } .tp-muted { font-size: 12px; color: var(--fg-3); } /* ---------- Kart grid ---------- */ .tp-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; } /* ---------- Turnuva kartı (.tournament-card) ---------- */ .tournament-card { background: var(--bg-canvas); border: 1px solid var(--border-1); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-xs); display: flex; flex-direction: column; transition: border-color 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard), transform 180ms var(--ease-standard); } .tournament-card:hover { border-color: color-mix(in oklch, var(--color-brand) 50%, var(--border-1)); box-shadow: var(--shadow-md); transform: translateY(-2px); } .tournament-card-cover { height: 152px; background-size: cover; background-position: center; position: relative; background-color: var(--bg-sunken); } /* Dekoratif scrim (görsel okunabilirliği) — tema bağımsız overlay */ .tournament-card-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.66) 100%); } .tournament-card-logo { position: absolute; bottom: 10px; left: 10px; width: 52px; height: 52px; object-fit: cover; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.85); z-index: 1; background: #fff; } .tournament-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .tp-card-titlerow { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .tournament-card-title { color: var(--fg-1); font-size: 15px; font-weight: 700; margin: 0; flex: 1; min-width: 0; } .tournament-card-meta { color: var(--fg-3); font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; } .tournament-card-meta .bi { color: var(--color-brand); font-size: 11px; } .tournament-card-summary { color: var(--fg-2); font-size: 12.5px; margin: 0; } .tournament-card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border-1); } /* ---------- Status pill (liste kartları) ---------- */ .tp-status { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; border: 1px solid transparent; white-space: nowrap; flex-shrink: 0; } .tp-status--published, .tp-status--registrationclosed, .tp-status--checkin, .tp-status--inprogress { color: var(--color-brand-fg); background: var(--color-brand-soft); border-color: color-mix(in oklch, var(--color-brand) 25%, transparent); } .tp-status--completed { color: var(--color-success); background: var(--color-success-soft); border-color: color-mix(in oklch, var(--color-success) 25%, transparent); } .tp-status--cancelled { color: var(--color-danger); background: var(--color-danger-soft); border-color: color-mix(in oklch, var(--color-danger) 25%, transparent); } /* Status badge (detay sayfası — JS className ataması) */ .tp-status--ok { color: var(--color-success); background: var(--color-success-soft); border-color: color-mix(in oklch, var(--color-success) 25%, transparent); } .tp-status--danger { color: var(--color-danger); background: var(--color-danger-soft); border-color: color-mix(in oklch, var(--color-danger) 25%, transparent); } .tp-status--warn { color: var(--color-warning); background: var(--color-warning-soft); border-color: color-mix(in oklch, var(--color-warning) 25%, transparent); } .tp-status--info { color: var(--color-brand-fg); background: var(--color-brand-soft); border-color: color-mix(in oklch, var(--color-brand) 25%, transparent); } /* ---------- Load more ---------- */ .tp-loadmore-wrap { display: flex; justify-content: center; padding: 12px 0; } .tp-loadmore-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; min-height: 44px; border-radius: 999px; background: var(--bg-canvas); border: 1px solid var(--border-1); color: var(--fg-1); font: 700 13px/1 var(--font-sans); cursor: pointer; transition: all 150ms var(--ease-standard); box-shadow: var(--shadow-xs); } .tp-loadmore-btn:hover { border-color: var(--color-brand); color: var(--color-brand); } .tp-loadmore-btn:disabled { opacity: 0.6; cursor: default; } /* ============================================================ * DETAY SAYFASI * ============================================================ */ /* ---------- Kapak görseli wrap ---------- */ .tp-cover-wrap { background: var(--bg-canvas); border: 1px solid var(--border-1); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 22px; } .tournament-cover-image { min-height: 240px; background-color: var(--bg-sunken); background-size: cover; background-position: center; position: relative; } /* Dekoratif scrim — koyu zemin üstü beyaz metin → tema bağımsız, kasıtlı */ .tournament-cover-overlay { margin-top: -112px; position: relative; z-index: 1; color: #f8fafc; background: linear-gradient(180deg, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.86)); padding: 16px; } .tournament-cover-overlay-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .tournament-logo { width: 92px; height: 92px; object-fit: cover; border-radius: 14px; border: 3px solid rgba(255, 255, 255, 0.82); background: #fff; flex-shrink: 0; } .tournament-cover-info { flex: 1; min-width: 0; } /* detailSubtitle — overlay üstünde, hafif beyaz */ #detailSubtitle { color: rgba(226, 232, 240, 0.95); font-size: 13.5px; margin: 0; } #detailTitle { font-size: 22px; font-weight: 800; color: #fff; margin: 6px 0 4px; } /* ---------- İki kolonlu detay layout ---------- */ .tp-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; } /* ---------- Genel kart (detay panelleri) ---------- */ .tp-card { background: var(--bg-canvas); border: 1px solid var(--border-1); border-radius: 14px; box-shadow: var(--shadow-xs); overflow: hidden; margin-bottom: 16px; } .tp-card-body { padding: 16px 18px; } .tp-card-title { font-size: 16px; font-weight: 800; color: var(--fg-1); margin: 0 0 14px; } .tp-card-title-sm { font-size: 13px; font-weight: 800; color: var(--fg-1); margin: 0 0 12px; } .tp-card-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } /* ---------- Bilgi grid (tournament-info-grid) ---------- */ .tournament-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tournament-info-item { border: 1px solid var(--border-1); background: var(--bg-sunken); border-radius: 10px; padding: 10px 12px; min-height: 60px; } .tournament-info-label { font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .tournament-info-item > div:last-child { font-size: 13.5px; color: var(--fg-1); font-weight: 600; } /* Tam genişlik bilgi satırı */ .tournament-info-item--full { grid-column: 1 / -1; } /* ---------- Ödül öğesi ---------- */ .prize-item { border: 1px solid var(--border-1); border-radius: 10px; background: var(--bg-sunken); padding: 10px 12px; display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .prize-item:last-child { margin-bottom: 0; } .prize-item img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-1); flex-shrink: 0; } .prize-item-rank { min-width: 48px; font-weight: 800; color: var(--fg-1); font-size: 13px; } .prize-item-title { color: var(--fg-1); font-weight: 600; font-size: 13.5px; } .tp-link { font-size: 12px; color: var(--color-brand); text-decoration: none; } .tp-link:hover { text-decoration: underline; color: var(--color-brand-hover); } /* ---------- Standings tablosu ---------- */ .tp-table-wrap { overflow-x: auto; } .tp-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--fg-2); } .tp-table thead th { font-size: 11px; font-weight: 700; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 8px; border-bottom: 2px solid var(--border-1); text-align: left; white-space: nowrap; } .tp-table tbody tr { border-bottom: 1px solid var(--border-1); transition: background 120ms; } .tp-table tbody tr:last-child { border-bottom: 0; } .tp-table tbody tr:hover { background: var(--bg-sunken); } .tp-table tbody td { padding: 7px 8px; color: var(--fg-2); } .theme-dark .tp-table thead th, .theme-dark .tp-table tbody tr { border-color: var(--border-1); } /* ---------- Kayıt paneli ---------- */ .tp-reg-info { font-size: 13px; color: var(--fg-3); margin-bottom: 14px; line-height: 1.5; } .tp-reg-actions { display: flex; flex-direction: column; gap: 8px; } /* ---------- Organizatör paneli ---------- */ .tp-org-row { margin-bottom: 10px; } .tp-org-label { font-size: 11px; color: var(--fg-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; } .tp-org-value { font-size: 13.5px; color: var(--fg-1); } .tp-org-links { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } /* ---------- Ek bilgiler paneli ---------- */ .tp-extra-block { margin-bottom: 12px; } .tp-extra-block:last-child { margin-bottom: 0; } .tp-extra-label { font-size: 11px; color: var(--fg-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .tp-extra-text { font-size: 12.5px; color: var(--fg-2); line-height: 1.5; } /* ============================================================ * RESPONSIVE * ============================================================ */ @media (max-width: 991.98px) { .tp-detail-grid { grid-template-columns: 1fr; } .tournament-cover-overlay { margin-top: -98px; } } @media (max-width: 767.98px) { .tournament-hero { flex-direction: column; align-items: flex-start; padding: 16px; } .tournament-hero h1 { font-size: 22px; } .tp-filter-grid { grid-template-columns: 1fr 1fr; } .tp-card-grid { grid-template-columns: 1fr; } .tournament-card-cover { height: 132px; } .tournament-info-grid { grid-template-columns: 1fr; } .tournament-cover-image { min-height: 184px; } .tournament-logo { width: 74px; height: 74px; } .tp-btn { min-height: 44px; } } @media (max-width: 479.98px) { .tp-filter-grid { grid-template-columns: 1fr; } }