/* ============================================================ LOTUS PRIVATE — Premium rewards community Black & white canvas · strategic rose-red accents ============================================================ */ :root { /* Sayfa genişliği — sidebar eklenince içerik daralmıştı; kabuk genişletildi ki İÇERİK sütunu sidebar öncesiyle aynı ferahlıkta kalsın. içerik ≈ --shell-w − --sidebar-w (1520 − 224 ≈ 1296px) */ --shell-w: 1520px; --sidebar-w: 224px; --bg: #070707; --bg-2: #0b0b0d; --panel: #0f0f12; --panel-2: #141418; --panel-3: #1a1a1f; --line: rgba(255, 255, 255, 0.07); --line-2: rgba(255, 255, 255, 0.13); --text: #f6f6f8; /* Kontrast yükseltildi: küçük punto etiketler siyah zeminde zor okunuyordu. muted 8b8b94→a3a3ac, muted-2 62626b→7e7e88 (WCAG AA'ya yaklaştı). */ --muted: #a3a3ac; --muted-2: #7e7e88; /* Ana tema rengi: BEYAZ (Lotus Private kimliği — siyah zemin + beyaz vurgu, kırmızı sadece semantik anlamlarda: hata, canlı vb. Değişken adı "rose" kaldı — tüm kart glow/border/badge tint'leri buradan türediği için adı değiştirmek çok yer bozar; sadece DEĞERLERİ beyaza çekildi. */ --rose: #f5f5f7; /* ana vurgu (beyaz) */ --rose-2: #e4e4e7; /* koyu uç (gradyan/hover) */ --rose-3: #ffffff; /* açık vurgu (aktif metin/ikon) */ /* Tüm rose tint'lerinin TEK kaynağı (RGB üçlüsü). Panel themeColor değişince site-loader yalnız --rose-rgb'yi günceller; aşağıdaki soft/line/shadow + tüm kart glow/border tint'leri otomatik uyumlanır. */ --rose-rgb: 255, 255, 255; --rose-soft: rgba(var(--rose-rgb), 0.14); --rose-line: rgba(var(--rose-rgb), 0.35); --rose-grad: linear-gradient(135deg, #ffffff, #f5f5f7 60%, #d4d4d8); /* Beyaz zemin üzerinde okunur metin rengi (koyu). Panel bağlanınca site-loader.js bunu tema rengine göre otomatik hesaplar; panelsiz çalışırken (Lotus henüz backend'siz) statik varsayılan budur. */ --on-rose: #0b0b0d; --gold: #f0b53d; --green: #34d399; --radius: 18px; --radius-sm: 13px; --radius-lg: 24px; --shadow: 0 24px 60px rgba(0, 0, 0, 0.55); --shadow-rose: 0 14px 34px rgba(var(--rose-rgb), 0.22); --font-display: 'Sora', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; display: block; } button { font-family: inherit; } /* KRİTİK — hidden HER ZAMAN gizlesin. Tarayıcının varsayılanı `[hidden]{display:none}` ama sınıf seçicileri (display:flex/grid/block) bunu eziyor. Bu yüzden "gizli" olması gereken öğeler ekranda kalıyordu (destek butonları, sosyal ikonlar, hero rozeti…). Tek tek `.x[hidden]{display:none!important}` yazmak yerine tek kural — panel tarafında (panel.css) zaten böyle. */ [hidden] { display: none !important; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .rose { background: linear-gradient(135deg, var(--rose-3), var(--rose)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Puan nokta işaretçisi */ .kp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rose-grad); box-shadow: 0 0 0 3px var(--rose-soft); flex-shrink: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.62rem 1.2rem; border: 1px solid transparent; border-radius: 999px; font-weight: 600; font-size: 0.88rem; cursor: pointer; white-space: nowrap; transition: transform 0.14s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; } .btn:active { transform: scale(0.96); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-block { width: 100%; } .btn-lg { padding: 0.85rem 1.6rem; font-size: 0.96rem; } .btn-sm { padding: 0.45rem 0.9rem; font-size: 0.8rem; } .btn-rose { background: var(--rose-grad); color: var(--on-rose, #fff); box-shadow: var(--shadow-rose); } .btn-rose:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(var(--rose-rgb),0.45); } /* Aurora CTA — paneldeki "Site Yönetimi" butonu gibi yavaş kayan, renk geçişli gradient çerçeve + koyu merkez. Pill formu korunur. */ .btn-aurora { color: #fff; border: 2px solid transparent; background: linear-gradient(#0a0a0e, #0a0a0e) padding-box, linear-gradient(90deg, #ef4444, #fb7185, #8b5cf6, #3b82f6, #ef4444) border-box; background-size: 100% 100%, 200% 100%; background-position: 0 0, 0% 50%; animation: btnAuroraPan 6s linear infinite; box-shadow: 0 8px 26px -10px rgba(139, 92, 246, 0.55); } @keyframes btnAuroraPan { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 200% 50%; } } .btn-aurora:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 42px -8px rgba(139, 92, 246, 0.7); } @media (prefers-reduced-motion: reduce) { .btn-aurora { animation: none; } } .btn-ghost { background: rgba(255, 255, 255, 0.05); color: var(--text); border-color: var(--line-2); } .btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--rose-3); border-color: var(--rose-line); } .btn-outline:hover:not(:disabled) { background: var(--rose-soft); } /* ---------- Logo ---------- */ .logo { display: flex; align-items: center; gap: 0.6rem; } .logo-chip { display: grid; place-items: center; width: 38px; height: 38px; background: var(--rose-grad); color: var(--on-rose); border-radius: 11px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; box-shadow: var(--shadow-rose); flex-shrink: 0; } .logo-text { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: 0.01em; white-space: nowrap; } /* Panelden logo görseli yüklenince — harf monogramı yerine görseli oturt. */ .logo-chip.logo-chip-img { background: none; box-shadow: none; padding: 0; overflow: visible; } /* Şeffaf PNG logo "çıkartma" gibi durmasın → şeklini takip eden BELİRGİN drop-shadow (kutu değil). Her logonun bulunduğu yere düşer (sidebar, mobil üst bar, auth kartı — hepsi .logo-chip). */ .logo-chip.logo-chip-img, .logo-chip.logo-chip-img img { overflow: visible; } .logo-chip.logo-chip-img img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.7)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(139, 92, 246, 0.35)); } /* Auth kartındaki logo daha büyük → gölge de biraz daha derin. */ .auth-chip.logo-chip-img img { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 18px rgba(139, 92, 246, 0.45)); } /* ---------- Tags ---------- */ .tag { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.24rem 0.6rem; border-radius: 999px; } .tag-hot { background: var(--rose-soft); color: var(--rose-3); } .tag-new { background: rgba(52, 211, 153, 0.14); color: var(--green); } .tag-vip { background: rgba(240, 181, 61, 0.14); color: var(--gold); } .tag-soft { background: rgba(255, 255, 255, 0.06); color: var(--muted); } /* ============================================================ APP SHELL ============================================================ */ /* ============================================================ SAYFA ATMOSFERİ — banner'daki lotus morundan yumuşak ışık Renk görselden ölçüldü (#401258 ailesi), parlatılıp ambiyansa çevrildi. Sabit katman, içeriğin ARKASINDA, çok yavaş nefes alır. Kaldırmak istersen: bu bloğu sil, başka hiçbir yeri etkilemez. ============================================================ */ :root { /* Panelden yönetilir (Görünüm → Sayfa Işığı). JS bu iki değişkeni yazar. */ --glow-rgb: 124, 47, 176; --glow-a: 0.22; } body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58rem 40rem at 76% 8%, rgba(var(--glow-rgb), var(--glow-a)), transparent 62%), radial-gradient(46rem 34rem at 10% 78%, rgba(var(--glow-rgb), calc(var(--glow-a) * 0.6)), transparent 64%), radial-gradient(34rem 26rem at 92% 62%, rgba(var(--glow-rgb), calc(var(--glow-a) * 0.5)), transparent 66%); animation: pageGlow 26s ease-in-out infinite alternate; will-change: transform, opacity; } @keyframes pageGlow { from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; } to { transform: translate3d(0, -2.5%, 0) scale(1.07); opacity: 1; } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } /* Panelden kapatıldığında */ body.no-glow::before { display: none; } /* İskelet: SOL SIDEBAR + içerik. */ .shell { max-width: var(--shell-w); margin-inline: auto; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; } /* ---------- SOL SIDEBAR ---------- */ .sidebar { position: sticky; top: 0; height: 100vh; z-index: 50; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.3rem 0.85rem 1.1rem; border-right: 1px solid var(--line); /* OPAK zemin: yarı saydamken arkadaki mor ışık sızıp menüyü soldurdu. Kendi katı zemini var → yazılar hep net, ışık yalnız içerikte hissedilir. */ background: linear-gradient(180deg, #0a0a0d, #08080a); overflow-y: auto; scrollbar-width: thin; } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; } /* Alçak ekran (1280×720, 1366×768 tarayıcı çubuğuyla): menü 753px istiyor, 720 var → "Kayıt Ol" alt kenardan taşıyor ve kaydırma ipucu yok (ölçüldü, 11 Eyl 2026). Boşlukları sıkarak sığdır; daha da alçaksa kaydırma zaten var. */ @media (max-height: 800px) { .sidebar { gap: 0.75rem; padding: 1rem 0.85rem 0.9rem; } .sidebar-logo { padding: 0.3rem 0.55rem 0.15rem; } .side-nav { gap: 0.1rem; } .side-nav .top-link { padding: 0.5rem 0.65rem; } .side-live-btn { padding: 0.6rem 0.9rem; } } /* Marka: orijinal Lotus Private yazı markası (beyaz serif PNG). Genişliğe göre ölçeklenir, asla büyütülmez. */ .sidebar-logo { display: block; padding: 0.5rem 0.55rem 0.3rem; } .logo-img { width: 100%; max-width: 178px; height: auto; display: block; } .mobile-bar .logo-img { max-width: 132px; } .side-nav { display: flex; flex-direction: column; gap: 0.15rem; } .side-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); padding: 0.2rem 0.6rem 0.5rem; } /* Sosyal butonlar: büyük, tam genişlik, ikonlu. */ .side-live { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.3rem; } .side-live:empty { display: none; } .side-live-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.72rem 0.9rem; font-size: 0.85rem; font-weight: 700; } .side-live-btn[hidden] { display: none !important; } /* ÖNİZLEME: bağlantı girilmemiş buton TAM görünür (soluklaştırma yok) — sadece tıklanamaz. Böylece panelde link yokken de gerçek hâli görülür. Yayına alırken gizlemek için: config.launch.showEmptySocial = false */ .side-live-btn.is-empty { pointer-events: none; cursor: default; } .slb-ic { width: 1.05rem; height: 1.05rem; flex-shrink: 0; } .btn-block { width: 100%; } /* Alt blok (puan · kullanıcı · butonlar) en dibe yaslanır. */ .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; } .side-foot .topbar-points { justify-content: center; } .side-foot .usercard { width: 100%; } .side-btn { width: 100%; justify-content: center; } /* Mobil üst bar — yalnız dar ekranda görünür (aşağıdaki medya sorgusu açar). */ .mobile-bar { display: none; } .logo-serif { font-family: 'Cormorant Garamond', var(--font-display), serif; font-style: italic; font-weight: 600; font-size: 1.55rem; letter-spacing: 0.02em; color: #fff; white-space: nowrap; } /* Gezinme bağlantısı — sidebar'da dikey satır. Sınıf adı .top-link kaldı: shell.js aktif sekmeyi bu sınıfla işaretliyor. */ .top-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.65rem; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 0.86rem; white-space: nowrap; position: relative; border: none; background: none; cursor: pointer; font-family: inherit; text-align: left; transition: background 0.16s ease, color 0.16s ease; } .top-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); } .top-link.active { color: #fff; background: rgba(255, 255, 255, 0.06); } /* Aktif satırın SOLUNDA ince vurgu çubuğu (üstteki alt-çizgi yerine). */ .top-link.active::after { content: ''; position: absolute; left: 0; top: 0.42rem; bottom: 0.42rem; width: 2px; border-radius: 2px; background: var(--rose-grad); } .top-link .badge-pill { margin-left: auto; } .top-link-ic { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--muted-2); transition: color 0.16s ease; } .top-link-ic svg { width: 100%; height: 100%; } .top-link.active .top-link-ic { color: var(--rose-3); } .badge-pill { min-width: 20px; height: 20px; padding: 0 0.4rem; display: grid; place-items: center; background: var(--rose-grad); color: var(--on-rose); font-size: 0.68rem; font-weight: 700; border-radius: 999px; } .badge-pill:empty, .badge-pill[data-empty="1"] { display: none; } .badge-live { background: rgba(52, 211, 153, 0.16); color: var(--green); display: inline-flex; gap: 0.3rem; } .badge-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); align-self: center; animation: blink 1.4s ease infinite; } @keyframes blink { 50% { opacity: 0.3; } } .btn-solid-light { background: #fff; color: #0b0b0d; } .btn-solid-light:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 26px -6px rgba(255, 255, 255, 0.25); } .usercard { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.8rem 0.35rem 0.35rem; border-radius: 999px; background: linear-gradient(150deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); transition: border-color 0.2s ease, transform 0.2s ease; } .usercard:hover { border-color: var(--rose-line); transform: translateY(-1px); } .usercard-av { width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); } .usercard-info { display: flex; flex-direction: column; min-width: 0; } .usercard-info b { font-size: 0.8rem; font-family: var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9rem; } .usercard-info small { display: flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; color: var(--muted); } .lvl-dot { width: 7px; height: 7px; border-radius: 50%; background: #cd7f32; flex-shrink: 0; } .scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(3px); } /* ---------- Main ---------- */ .main { padding: 0 1.6rem 5rem; min-width: 0; } /* App bar */ .appbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0 1.1rem; margin-bottom: 0.4rem; } .appbar-title h1 { font-size: 1.5rem; } .appbar-title p { font-size: 0.84rem; color: var(--muted); margin-top: 0.15rem; } .appbar-right { display: flex; align-items: center; gap: 0.7rem; } /* STEP: sağ üst sosyal/bağlantı ikonları */ .appbar-social { gap: 0.45rem; } /* Bağlantı ikonları — TEMAYA bağlı sade tasarım. Dinlenmede nötr koyu kutu + beyaz ikon; hover'da tema (rose) vurgusu (panelden tema değişince otomatik uyar). Eski çok-renkli marka glow'u kaldırıldı — temaya uymuyor + ikonların üstünde buglı renk şeridi/halo yapıyordu. */ .social-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: #eef1f4; text-decoration: none; transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; } .social-ic:hover { color: #fff; border-color: rgba(var(--rose-rgb), 0.6); background: rgba(var(--rose-rgb), 0.14); box-shadow: 0 5px 16px -5px rgba(var(--rose-rgb), 0.5); transform: translateY(-1px); } .social-ic svg { width: 17px; height: 17px; display: block; } /* KRİTİK: .social-ic display:grid, [hidden]'ı eziyordu → gizleme çalışmıyordu. Daha yüksek özgüllükle gerçekten gizle (panelden gizlenen ikon sitede görünmez). */ .social-ic[hidden] { display: none !important; } @media (max-width: 560px) { .social-ic { width: 34px; height: 34px; } .social-ic svg { width: 16px; height: 16px; } } .kp-pill { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); cursor: pointer; transition: border-color 0.2s ease, transform 0.15s ease; } .kp-pill:hover { border-color: var(--rose-line); transform: translateY(-1px); } .kp-pill b { font-family: var(--font-display); font-size: 0.95rem; } .kp-pill small { color: var(--muted); font-size: 0.7rem; font-weight: 600; } .appbar-av { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.35rem; background: var(--panel-2); border: 1px solid var(--line-2); transition: border-color 0.2s ease; } .appbar-av:hover { border-color: var(--rose-line); } /* ---------- Views ---------- */ .view { animation: fadeUp 0.4s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .block-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; } .block-head h3 { font-size: 1.18rem; } /* Bölüm açıklaması (i18n ile doldurulur; boşsa hidden kalır). */ .block-sub { margin: -0.4rem 0 1rem; color: var(--muted); font-size: 0.86rem; max-width: 60ch; } .link-more { color: var(--rose-3); font-size: 0.82rem; font-weight: 600; cursor: pointer; } .link-more:hover { color: var(--rose-2); } /* ============================================================ HOME — HERO ============================================================ */ .hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; background: linear-gradient(150deg, var(--panel-2), var(--panel) 65%); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.2rem; margin-bottom: 1.4rem; } .hero-glow { position: absolute; top: -40%; right: -10%; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--rose-rgb),0.28), transparent 65%); pointer-events: none; } .hero-body { position: relative; z-index: 2; } .hero-tag { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rose-3); background: var(--rose-soft); border: 1px solid var(--rose-line); padding: 0.35rem 0.8rem; border-radius: 999px; } .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--rose-2); box-shadow: 0 0 0 0 rgba(var(--rose-rgb),0.6); animation: pulse 1.8s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(var(--rose-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--rose-rgb),0); } } .hero-title { font-size: 2.6rem; font-weight: 800; margin: 1rem 0 0.7rem; } .hero-lead { color: var(--muted); font-size: 1rem; max-width: 30rem; margin-bottom: 1.5rem; } .hero-lead b { color: var(--text); } .hero-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .hero-trust { display: flex; align-items: center; gap: 0.8rem; color: var(--muted); font-size: 0.84rem; } /* hidden iken display:flex eziyordu — sahte üye/KC sayıları gizli kalsın. */ .hero-trust[hidden] { display: none !important; } .hero-trust b { color: var(--text); font-family: var(--font-display); } .dot-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-2); } .hero-pool { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0.55rem; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--rose-line); border-radius: var(--radius); padding: 1.4rem; } .pool-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .pool-value { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; } .pool-meta { font-size: 0.82rem; color: var(--muted); } .pool-meta b { color: var(--rose-3); font-family: var(--font-display); } .pool-bar { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin: 0.4rem 0 0.6rem; } .pool-bar i { display: block; height: 100%; background: var(--rose-grad); border-radius: 999px; transition: width 1s ease; } /* ---------- Hero yan banner'ları (sol/sağ, dikey reklam alanı) ---------- */ /* Sayfa kenarı banner'ları — hero'ya değil TÜM SAYFAYA bağlı; viewport'a sabit (kaydırınca yerinde kalır), yalnızca içeriğin sığamayacağı kadar geniş ekranlarda görünür. İçerik alanı ile ÇAKIŞMASIN diye yalnızca çok geniş viewport'ta gösterilir; güncel eşik aşağıdaki medya sorgusunda (1870px). */ .page-side-banner { /* Esnek yan reklam alanı: genişlik = içerik dışında kalan boşluk. Görsel KENDİ ORANINDA durur, dikeyde ortalanır, sayfayı itmez. */ position: fixed; top: 50%; transform: translateY(-50%); z-index: 10; width: var(--yan-afis-w); max-height: calc(100vh - 120px); display: none; align-items: center; justify-content: center; background: none; border: 0; } .page-side-banner-left { left: 12px; } .page-side-banner-right { right: 12px; } .page-side-banner img { width: 100%; height: auto; max-height: calc(100vh - 120px); object-fit: contain; display: block; border-radius: 14px; } /* Yalnızca görsel varsa göster — yer açmak gerekiyorsa YALNIZ AFİŞİN OLDUĞU TARAFTA ve YALNIZ AFİŞ KADAR aç. Geçmiş (üç tur, hepsi müşteri geri bildirimi): · 13 Eyl: afiş varken kabuk İKİ YANDAN daraltıldı (her yana 324px). 1440 ekranda içerik 1216 → 736px (%40 kayıp). Müşteri: "iki yandan küçülüyor, çok alan kaplıyor". · 26 Eyl sabah: daraltma kaldırıldı, afiş yalnız ≥1870px'te çıktı. Müşterinin ekranı ~1440-1470px çıktı (Retina; ekran görüntüsünün 2560px olması YANILTTI) → afiş ancak %75 uzaklaştırmada görünüyordu. · 26 Eyl akşam: tek taraflı yer açma. Afiş yalnız sağdaysa yalnız sağda, afiş genişliği + 24px kadar yer açılır. Geniş ekranda doğal kenar boşluğu yetiyorsa hiç açılmaz, içerik ortada kalır. Hesap (tek taraf, A = afiş genişliği, P = açılan yer): kabuk 1520'de duruyorsa sağ boşluk = (100vw + P − 1520)/2, kabuk kutuyu dolduruyorsa sağ boşluk = P. Afişe A+24 bırakan en küçük P = clamp(0, 2(A+24) + kabuk − 100vw, A+24). +20px: Windows'ta 100vw dikey kaydırma çubuğunu (~17px) İÇERİR, fixed afiş ise çubuğun solundan ölçülür; pay olmadan ara bölgede boşluk 12→~4px'e iniyordu (Codex denetimi). Pay ile boşluk ≥12px kalır. İki yanda da afiş varsa her yana A+24 (simetrik; geniş ekranda kabuk yine 1520 kalır, kayıp olmaz). */ :root { --yan-afis-w: clamp(140px, 12vw, 300px); } @media (min-width: 1280px) { .page-side-banner.has-img { display: flex; } body.yan-afis-sag { padding-right: clamp(0px, calc(2 * (var(--yan-afis-w) + 24px) + var(--shell-w) - 100vw + 20px), calc(var(--yan-afis-w) + 24px)); } body.yan-afis-sol { padding-left: clamp(0px, calc(2 * (var(--yan-afis-w) + 24px) + var(--shell-w) - 100vw + 20px), calc(var(--yan-afis-w) + 24px)); } body.yan-afis-sol.yan-afis-sag { padding-left: calc(var(--yan-afis-w) + 24px); padding-right: calc(var(--yan-afis-w) + 24px); } } /* ---------- Sponsor kademeleri (Global / Önerilen / Diğer) ---------- Kartlar SPONSORLAR sayfasıyla AYNI bileşen (.sponsor); boyut farkı yalnızca grid sütun sayısından gelir — Global 2 sütun (büyük), Önerilen/Diğer 3 sütun (küçük). İçerik/kart tasarımı sonradan ayrıca düzenlenecek. */ /* ---- GLOBAL SPONSORLAR — sayıya göre kendini düzenleyen ızgara ---- Kural: kartlar İKİŞERLİ dizilir; toplam sayı TEKse ilk kart tam genişlik olur. 1 → tek büyük kart 2 → yan yana iki (boşluk kalmaz) 3 → üstte 1 tam + altta 2 4 → 2 + 2 5 → 1 tam + 2 + 2 … Saf CSS: :first-child:nth-last-child(odd) → "toplam sayı tek" demek. */ .sponsor-tier-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-bottom: 1rem; } .sponsor-tier-row > .sponsor:first-child:nth-last-child(odd) { grid-column: 1 / -1; } /* Panelden zorlama (Otomatik dışı seçenekler bu kuralı ezer) */ .sponsor-tier-row.lay-2 { grid-template-columns: repeat(2, 1fr); } .sponsor-tier-row.lay-3 { grid-template-columns: repeat(3, 1fr); } .sponsor-tier-row.lay-4 { grid-template-columns: repeat(4, 1fr); } .sponsor-tier-row.lay-2 > .sponsor:first-child:nth-last-child(odd), .sponsor-tier-row.lay-3 > .sponsor:first-child:nth-last-child(odd), .sponsor-tier-row.lay-4 > .sponsor:first-child:nth-last-child(odd) { grid-column: auto; } /* ============================================================ GLOBAL SPONSOR — SALT GÖRSEL KART (.sponsor-tile) İsim / bonus / buton yok: kartın tamamı tek bir tıklanabilir afiş. Arka plan sponsorun bgImage'i, üstünde logo ortalı. Kartlar farklı genişlikte olabildiği için YÜKSEKLİK sabit — 1 tam + 2 yarım dizilse bile sıra hizalı görünür. ============================================================ */ .sponsor-tile-row > .sponsor-tile { position: relative; display: flex; align-items: center; justify-content: center; height: clamp(104px, 11vw, 168px); padding: 1rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; /* Arka plan: marka rengi varsa ondan yumuşak degrade, yoksa nötr koyu. */ background: radial-gradient(120% 140% at 50% 0%, rgba(var(--sb, 255, 255, 255), 0.16), transparent 68%), linear-gradient(180deg, #111116, #0b0b0e); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } /* Panelden yüklenen kart görseli — logonun ALTINDA durur. Boyut ve konum PANELDEN gelir (Sponsorlar → Arka plan yerleşimi): aynı görsel hem geniş hem yarım kartta kullanıldığı için hangi bölgenin görüneceğini yönetici seçebilmeli. */ .sponsor-tile.has-bg::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: var(--sp-bg); background-size: var(--sp-bg-size, cover); background-position: var(--sp-bg-pos, 50% 50%); background-repeat: no-repeat; } /* "Sığdır" modunda görselin tamamı görünür; yanlarda kalan boşluk siyah şerit gibi durmasın diye kart zemini marka renginden bir tık daha belirgin. */ .sponsor-tile.bg-contain { background: radial-gradient(120% 140% at 50% 0%, rgba(var(--sb, 255, 255, 255), 0.22), transparent 70%), linear-gradient(180deg, #131318, #0b0b0e); } .sponsor-tile.bg-contain.has-bg::after { background: none; } /* perde gereksiz */ /* Görsel çok parlaksa logo kaybolmasın diye ince perde. */ .sponsor-tile.has-bg::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42)); } .sponsor-tile:hover { transform: translateY(-3px); border-color: rgba(var(--sb, 255, 255, 255), 0.45); /* Marka rengi görselle aynıysa (GOATED: #d7ff00 üstüne #d7ff00 çerçeve) hover hiç görünmüyordu — ölçüldü, fotoğraflandı (11 Eyl 2026). Nötr beyaz halka her renkte okunur; marka ışıması yine durur. */ outline: 2px solid rgba(255, 255, 255, 0.32); outline-offset: 2px; box-shadow: 0 18px 44px -14px rgba(var(--sb, 0, 0, 0), 0.55), 0 0 0 6px rgba(var(--sb, 255, 255, 255), 0.10); filter: brightness(1.06); } .sponsor-tile-logo { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .sponsor-tile-logo img { max-width: min(78%, 340px); max-height: 76%; object-fit: contain; display: block; } .sponsor-tile-logo .sponsor-mono { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2.4rem); color: #fff; letter-spacing: 0.04em; } @media (max-width: 720px) { .sponsor-tile-row > .sponsor-tile { height: clamp(76px, 20vw, 120px); padding: 0.7rem 0.9rem; } .sponsor-tile-logo img { max-width: 82%; max-height: 80%; } } .sponsor-tier-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.7rem; margin-bottom: 1rem; } /* Kart bileşeni sponsor kartıyla aynı — burada SADECE grid sütunları belirlenir, kart içine hiç karışılmaz. Sponsor grid'inde açıklama/etiket/rozet gizli; aynısını uyguluyoruz. */ .sponsor-tier-row .sponsor-desc, .sponsor-tier-grid .sponsor-desc, .sponsor-tier-row .sponsor-tags, .sponsor-tier-grid .sponsor-tags { display: none; } @media (max-width: 1280px) { .sponsor-tier-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1100px) { .sponsor-tier-grid { grid-template-columns: repeat(3, 1fr); } .sponsor-tier-row, .sponsor-tier-row.lay-3, .sponsor-tier-row.lay-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .sponsor-tier-grid { grid-template-columns: repeat(2, 1fr); } } /* "Diğer" kademesi (ana sayfa bloğu + Sponsorlar sayfası): telefonda 3 yan yana, kart kompakt — müşteri (12 Eyl 2026): "önerilen ile diğer önerilen aynı boyutta; diğerlerini küçültüp 3'lü yapın". Masaüstünde 6 sütun, sayfadaki .sponsor-grid--sm zaten dar (170px). */ .sponsor-tier-grid--sm { grid-template-columns: repeat(6, 1fr); gap: 0.6rem; } .sponsor-tier-grid--sm .sponsor .sponsor-head { height: 92px; } .sponsor-tier-grid--sm .sponsor .sponsor-body { padding: 0.7rem 0.75rem 0.75rem; gap: 0.4rem; } .sponsor-tier-grid--sm .sponsor .sponsor-name { font-size: 0.8rem; } .sponsor-tier-grid--sm .sponsor .sponsor-bonus { font-size: 0.72rem; padding: 0.4rem 0.5rem; } .sponsor-tier-grid--sm .sponsor .btn { padding: 0.5rem 0.6rem; font-size: 0.76rem; } @media (max-width: 1280px) { .sponsor-tier-grid--sm { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 1100px) { .sponsor-tier-grid--sm { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 720px) { .sponsor-tier-grid--sm, .sponsor-grid.sponsor-grid--sm { grid-template-columns: repeat(3, 1fr); gap: 0.45rem; } .sponsor-tier-grid--sm .sponsor .sponsor-head, .sponsor-grid--sm .sponsor .sponsor-head { height: 64px; } .sponsor-tier-grid--sm .sponsor .sponsor-logo-tile, .sponsor-grid--sm .sponsor .sponsor-logo-tile { padding: 0.45rem 0.55rem; font-size: 1.1rem; } .sponsor-tier-grid--sm .sponsor .sponsor-body, .sponsor-grid--sm .sponsor .sponsor-body { padding: 0.45rem 0.4rem 0.5rem; gap: 0.3rem; } .sponsor-tier-grid--sm .sponsor .sponsor-name, .sponsor-grid--sm .sponsor .sponsor-name { font-size: 0.66rem; text-align: center; margin-bottom: 0.25rem; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sponsor-tier-grid--sm .sponsor .sponsor-bonus, .sponsor-grid--sm .sponsor .sponsor-bonus { font-size: 0.6rem; line-height: 1.25; padding: 0.3rem 0.35rem; margin-bottom: 0.3rem; text-align: center; justify-content: center; gap: 0.3rem; } .sponsor-tier-grid--sm .sponsor .sponsor-task, .sponsor-grid--sm .sponsor .sponsor-task { font-size: 0.6rem; margin-bottom: 0.3rem; } .sponsor-tier-grid--sm .sponsor .btn, .sponsor-grid--sm .sponsor .btn, .sponsor-tier-grid--sm .sponsor .sponsor-cta, .sponsor-grid--sm .sponsor .sponsor-cta { padding: 0.4rem 0.3rem; font-size: 0.66rem; } } @media (max-width: 420px) { .sponsor-tier-grid { grid-template-columns: 1fr; } .sponsor-tier-grid.sponsor-tier-grid--sm { grid-template-columns: repeat(3, 1fr); } /* Telefonda hepsi tek sütun — tam genişlik kuralı da devre dışı. */ .sponsor-tier-row, .sponsor-tier-row.lay-2, .sponsor-tier-row.lay-3, .sponsor-tier-row.lay-4 { grid-template-columns: 1fr; } .sponsor-tier-row > .sponsor:first-child:nth-last-child(odd) { grid-column: auto; } } /* ---------- Sosyal Medya Puanları + Kod alanı ---------- Üç kart eşit genişlikte tek sırada: Telegram · Instagram · Kod Gir. Kartlar bir tık küçültüldü; kod kartı AYNI kabuğu kullanır. */ .social-reward-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin-bottom: 0.9rem; } .social-reward-card { display: flex; align-items: center; gap: 0.6rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; min-height: 56px; } .social-reward-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); } .social-reward-ic svg { width: 15px; height: 15px; } .social-reward-info { flex: 1; min-width: 0; } .social-reward-info b { display: block; font-size: 0.82rem; } .social-reward-info small { color: var(--muted); font-size: 0.72rem; } .social-reward-card .btn { flex-shrink: 0; } /* --- Kod girme kartı --- */ .promo-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; } .promo-input { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); border-radius: 8px; padding: 0.34rem 0.55rem; color: var(--text); font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: border-color 0.16s ease, background 0.16s ease; } .promo-input::placeholder { font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--muted-2); } .promo-input:focus { outline: none; border-color: var(--rose-line); background: rgba(255, 255, 255, 0.07); } /* Mesaj satırı BOŞKEN yer kaplamamalı — kapladığı için input yukarı kayıyor ve ikon/butonla aynı hizada durmuyordu (7px yukarıdaydı). Kartın min-height'ı mesajlı hâli de kapsıyor, o yüzden mesaj çıkınca kart BÜYÜMEZ (zıplama yok). */ .promo-msg { font-size: 0.66rem; line-height: 1.2; } .promo-msg:empty { display: none; } .promo-card { min-height: 64px; } .promo-msg.is-ok { color: var(--green, #34d399); } .promo-msg.is-err { color: #ef4444; } @media (max-width: 900px) { .social-reward-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .social-reward-row { grid-template-columns: 1fr; } } /* Ana sayfada bölüm başlıkları arası boşluk sıkılaştırılır — çok fazla kaydırma gerekmesin diye (Sponsorlar/Modeller/Sosyal/Takvim art arda). */ [data-view="home"] .block-head { margin: 1.3rem 0 0.6rem; } /* Stat grid */ .statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-bottom: 0.5rem; } /* hidden iken display:grid eziyordu — ikincil stat şeridi gizli kalsın (v1). */ .statgrid[hidden] { display: none !important; } .stat { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; } .stat-ic { font-size: 1.1rem; margin-bottom: 0.5rem; } .stat-val { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1; } .stat-lab { color: var(--muted); font-size: 0.8rem; margin-top: 0.25rem; } .stat-trend { font-size: 0.74rem; font-weight: 700; color: var(--green); margin-top: 0.4rem; } /* ============================================================ TASKS ============================================================ */ .task-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; } .task-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; } .task { display: flex; align-items: center; gap: 0.9rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; transition: border-color 0.2s ease, transform 0.2s ease; } .task:hover { border-color: var(--line-2); transform: translateY(-2px); } .task.done { opacity: 0.62; } .task-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); } .task-main { flex: 1; min-width: 0; } .task-main b { font-size: 0.92rem; display: block; } .task-main small { color: var(--muted); font-size: 0.78rem; } .task-reward { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--rose-3); font-weight: 700; font-size: 0.8rem; margin-top: 0.2rem; } .task-act { flex-shrink: 0; } .task-check { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; background: rgba(52, 211, 153, 0.15); color: var(--green); border: 1px solid rgba(52, 211, 153, 0.3); } .panel-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: linear-gradient(150deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; margin-bottom: 1.2rem; } .panel-banner h3 { font-size: 1.2rem; } .panel-banner p { color: var(--muted); font-size: 0.86rem; margin-top: 0.2rem; } .streak-box { display: flex; align-items: center; gap: 0.5rem; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.88rem; } .streak-box b { font-family: var(--font-display); } .streak-flame { font-size: 1.1rem; } .progress-card { background: linear-gradient(150deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; } .progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.7rem; } .progress-top b { font-family: var(--font-display); font-size: 1.05rem; } .progress-top span { color: var(--muted); font-size: 0.84rem; } .progress-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } .progress-bar i { display: block; height: 100%; background: var(--rose-grad); border-radius: 999px; transition: width 0.6s ease; } .progress-reward { margin-top: 0.7rem; font-size: 0.82rem; color: var(--muted); } .progress-reward b { color: var(--rose-3); } /* ============================================================ LEADERBOARD ============================================================ */ .seg { display: inline-flex; gap: 0.25rem; padding: 0.3rem; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; margin-bottom: 1.3rem; } .seg-btn { border: none; background: transparent; color: var(--muted); font-weight: 600; font-size: 0.84rem; padding: 0.45rem 1.1rem; border-radius: 999px; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .seg-btn:hover { color: var(--text); } .seg-btn.active { background: var(--rose-grad); color: var(--on-rose); } .podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 0.9rem; align-items: end; margin-bottom: 1.3rem; } .pod { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1rem; text-align: center; position: relative; } .pod-1 { border-color: var(--rose-line); background: linear-gradient(160deg, rgba(var(--rose-rgb),0.14), var(--panel)); } .pod-medal { font-size: 1.5rem; } .pod-1 .pod-medal { font-size: 1.9rem; } .pod-av { width: 54px; height: 54px; margin: 0.5rem auto 0.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; background: rgba(255, 255, 255, 0.05); border: 2px solid var(--line-2); } .pod-1 .pod-av { border-color: var(--rose-2); width: 64px; height: 64px; font-size: 1.9rem; } .pod-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pod-kp { color: var(--rose-3); font-weight: 700; font-size: 0.86rem; margin-top: 0.2rem; } .pod-lvl { color: var(--muted); font-size: 0.74rem; margin-top: 0.15rem; } .lb-table { display: flex; flex-direction: column; gap: 0.45rem; } .lb-row { display: grid; grid-template-columns: 38px 44px 1fr auto; align-items: center; gap: 0.8rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 1rem; transition: border-color 0.2s ease; } .lb-row:hover { border-color: var(--line-2); } .lb-row.me { border-color: var(--rose-line); background: linear-gradient(160deg, rgba(var(--rose-rgb),0.13), var(--panel)); } .lb-rank { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--muted); text-align: center; } .lb-row.me .lb-rank, .lb-top .lb-rank { color: var(--rose-3); } .lb-av { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 1.25rem; background: rgba(255,255,255,0.04); border: 1px solid var(--line); } .lb-id b { font-size: 0.9rem; font-family: var(--font-display); display: block; } .lb-id small { color: var(--muted); font-size: 0.74rem; display: flex; align-items: center; gap: 0.3rem; } .lb-pts { text-align: right; } .lb-pts b { font-family: var(--font-display); font-size: 1rem; } .lb-pts small { display: block; color: var(--muted); font-size: 0.7rem; } .lb-mini { display: flex; flex-direction: column; gap: 0.4rem; } .lb-mini .lb-row { grid-template-columns: 30px 36px 1fr auto; padding: 0.55rem 0.8rem; } .lb-mini .lb-av { width: 34px; height: 34px; font-size: 1.05rem; } /* Rank rozeti (👑🥈🥉⭐) ad satırında */ .lb-badge { margin-right: 0.3rem; } /* ---------- "Senin Durumun" kişisel özet kartı ---------- */ .standing { position: relative; overflow: hidden; background: linear-gradient(150deg, rgba(var(--rose-rgb),0.12), var(--panel) 60%); border: 1px solid var(--rose-line); border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; margin-bottom: 1.2rem; } .standing-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; } .standing-av { width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.5rem; background: rgba(255,255,255,0.05); border: 1px solid var(--rose-line); } .standing-id { display: flex; flex-direction: column; min-width: 0; } .standing-id small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: var(--rose-3); } .standing-id b { font-family: var(--font-display); font-size: 1.1rem; } .standing-season { margin-left: auto; font-size: 0.76rem; font-weight: 600; color: var(--muted); background: rgba(0,0,0,0.3); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.35rem 0.8rem; white-space: nowrap; } .standing-ranks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 0.7rem; } .rank-tile { background: rgba(0,0,0,0.28); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.8rem 0.9rem; } .rank-tile.reward { border-color: var(--rose-line); background: rgba(var(--rose-rgb),0.1); } .rank-tile small { display: block; color: var(--muted); font-size: 0.74rem; } .rank-tile b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; } .rank-of { font-size: 0.85rem; color: var(--muted); font-weight: 600; } .rank-next { display: block; margin-top: 0.35rem; font-size: 0.74rem; color: var(--muted); } .rank-next b { font-family: var(--font-body); font-size: 0.74rem; color: var(--rose-3); } .standing-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; } .standing-stat { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.65rem 0.8rem; } .standing-stat small { display: block; color: var(--muted); font-size: 0.72rem; margin-bottom: 0.15rem; } .standing-stat b { font-family: var(--font-display); font-size: 0.95rem; } @media (max-width: 720px) { .standing-ranks { grid-template-columns: 1fr; } .standing-stats { grid-template-columns: 1fr 1fr; } .standing-season { display: none; } } /* Sezon başlığı — mevcut panel-banner stilini kullanır */ .season-banner { margin-bottom: 1rem; } .season-banner .panel-banner { margin-bottom: 0; } /* Onur Listesi (Hall of Fame) */ .hof-list { display: flex; flex-direction: column; gap: 0.5rem; } /* STEP 44 — Onur Listesi: sezon kartları + detay (ilk 10) */ .hof-card { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.85rem 1rem; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; } .hof-card:hover { transform: translateY(-2px); border-color: var(--line-2); } .hof-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .hof-type { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rose, #f43f5e); } .hof-date { color: var(--muted); font-size: 0.74rem; } .hof-champ-line { display: flex; align-items: center; gap: 0.45rem; margin: 0.4rem 0 0.3rem; } .hof-champ-line b { font-family: var(--font-display); font-size: 1.02rem; } .hof-trophy { font-size: 1.05rem; } .hof-card-meta { display: flex; gap: 1rem; color: var(--muted); font-size: 0.82rem; } .hof-card-cta { margin-top: 0.5rem; font-size: 0.78rem; color: var(--rose, #f43f5e); font-weight: 600; } .hof-back { margin-bottom: 0.7rem; } .hof-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; } .hof-detail-head b { font-family: var(--font-display); font-size: 1rem; } .hof-detail-list { display: flex; flex-direction: column; gap: 0.4rem; } .hof-detail-row { display: grid; grid-template-columns: 3rem 1fr auto auto; align-items: center; gap: 0.7rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.55rem 0.85rem; font-size: 0.86rem; } .hof-detail-row.top { border-color: var(--line-2); } .hof-detail-row .hof-rank { font-family: var(--font-display); font-weight: 700; color: var(--muted); } .hof-detail-row .hof-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hof-detail-row .hof-reward { color: var(--muted); } /* STEP 45 — Sezon Geçmişim (profil) */ .season-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-bottom: 0.8rem; } .ssum { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; text-align: center; } .ssum small { display: block; color: var(--muted); font-size: 0.7rem; margin-bottom: 0.2rem; } .ssum b { font-family: var(--font-display); font-size: 1rem; } .season-list { display: flex; flex-direction: column; gap: 0.45rem; } .season-row { display: grid; grid-template-columns: 1.4fr auto 1fr auto; align-items: center; gap: 0.7rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; font-size: 0.86rem; } .season-when b { display: block; font-family: var(--font-display); } .season-when small { color: var(--muted); font-size: 0.72rem; } .season-rank { font-family: var(--font-display); font-weight: 700; } .season-score { color: var(--muted); } .season-reward { color: var(--muted); white-space: nowrap; } @media (max-width: 560px) { .season-summary { grid-template-columns: repeat(2, 1fr); } .season-row { grid-template-columns: 1fr auto; row-gap: 0.3rem; } } .hof-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 1rem; } .hof-season { display: flex; align-items: center; gap: 0.5rem; } .hof-season b { font-family: var(--font-display); font-size: 0.92rem; } .hof-season small { color: var(--muted); font-size: 0.74rem; } .hof-crown { font-size: 1.1rem; } .hof-champ { display: flex; align-items: center; gap: 0.5rem; } .hof-av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 1.05rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); } .hof-champ b { font-family: var(--font-display); font-size: 0.88rem; } .hof-val { color: var(--rose-3); font-weight: 700; font-size: 0.8rem; } /* ============================================================ GIVEAWAYS ============================================================ */ .give-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .give-list { display: flex; flex-direction: column; gap: 0.8rem; } .give { display: flex; flex-direction: column; background: linear-gradient(165deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .give:hover { transform: translateY(-4px); border-color: var(--rose-line); box-shadow: var(--shadow); } .give-art { height: 120px; position: relative; overflow: hidden; display: grid; place-items: center; font-size: 3rem; } .give-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(255,255,255,0.12), transparent 60%); } /* Çekiliş görseli (panelden imageUrl) — sanat alanını kaplar, sayaç rozetinin altında. */ .give-art .give-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Dürüst "yakında" boş durumu (liderlik/market vb. henüz gerçek veriye bağlı değilken). */ .coming-soon { display: grid; place-items: center; text-align: center; gap: 0.5rem; min-height: 240px; padding: 2.5rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .coming-soon h3 { font-size: 1.05rem; color: var(--text); } .coming-soon p { font-size: 0.86rem; color: var(--muted); max-width: 420px; } .give-time { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.3rem; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.28rem 0.65rem; font-size: 0.72rem; font-weight: 700; } .give-time.urgent { color: var(--rose-3); border-color: var(--rose-line); } .give-body { padding: 1rem 1.1rem 0; flex: 1; } .give-prize { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } .give-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0.2rem 0 0.7rem; } .give-stats { display: flex; gap: 1.2rem; margin-bottom: 0.7rem; } .give-stat small { color: var(--muted); font-size: 0.72rem; display: block; } .give-stat b { font-family: var(--font-display); font-size: 0.95rem; } .give-prog { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; margin-bottom: 0.9rem; } .give-prog i { display: block; height: 100%; background: var(--rose-grad); } .give-foot { padding: 0 1.1rem 1.1rem; } .give-cost { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; font-size: 0.84rem; } .give-cost b { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-display); } /* STEP 37 — kullanıcının çekiliş katılım sayısı + ikincil Telegram butonu */ .give-mine { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.5rem; } .give-mine small { color: var(--muted); font-size: 0.72rem; } .give-mine b { font-family: var(--font-display); font-size: 0.95rem; color: var(--lace, #efeae6); } .give-tg { margin-top: 0.5rem; } .give.ended { opacity: 0.7; } .give-entered { color: var(--green); font-weight: 600; font-size: 0.8rem; } /* ============================================================ MARKETPLACE ============================================================ */ .shop-filters { margin-bottom: 1.2rem; } .shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 1200px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } } /* Telefonda market kartları KÜÇÜK: 2 sütun (müşteri isteği, 11 Eyl 2026). Tek sütunda kart 660px oluyordu, yarısı boş 3:4 alan. Görseli olmayan ürünlerde (ikon) medya alanı da kısalır. */ @media (max-width: 520px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .shop-media:has(.shop-emoji) { aspect-ratio: 4 / 3; } .shop-body { padding: 0.65rem 0.7rem 0.75rem; gap: 0.3rem; } .shop-body h4 { font-size: 0.92rem; } .shop-body p { font-size: 0.78rem; } /* Dar kartta fiyat + buton yan yana sığmıyordu (buton 19-34px taşıyordu, canlıda ölçüldü): fiyat üstte, buton altta tam genişlik. */ .shop-foot { flex-direction: column; align-items: stretch; gap: 0.4rem; } .shop-body .btn { padding: 0.45rem 0.5rem; font-size: 0.76rem; width: 100%; white-space: normal; line-height: 1.2; } .shop-warn { font-size: 0.7rem; } } .shop { display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(165deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); transition: transform 0.2s ease, border-color 0.2s ease; } .shop:hover { transform: translateY(-3px); border-color: var(--line-2); } /* Model kartlarıyla birebir: dik (3:4) medya, foto içine sığar (contain, üstten). */ .shop-media { position: relative; aspect-ratio: var(--shop-oran, 3 / 4); background: transparent; display: grid; place-items: center; overflow: hidden; } /* oran: Site Ayarları → Market */ .shop-img { width: 100%; height: 100%; object-fit: contain; object-position: top; } /* "Görsele uy": kutu görselin kendi yüksekliğini alır (yatay afişte boşluk kalmaz). Görseli olmayan ürün 4:3 ikon kutusu. */ html.market-gorsele-uy .shop-media:has(.shop-img) { aspect-ratio: auto; display: block; } html.market-gorsele-uy .shop-media .shop-img { height: auto; display: block; } html.market-gorsele-uy .shop-media:has(.shop-emoji) { aspect-ratio: 4 / 3; } /* Ürün görseli yoksa ikon gösterilir (emoji değil — bkz. C.iconMarkup). */ .shop-emoji { font-size: 4.5rem; display: grid; place-items: center; color: var(--muted-2); } .shop-emoji svg { width: 64px; height: 64px; stroke-width: 1.2; } .shop-body { display: flex; flex-direction: column; flex: 1; padding: 0.9rem 1rem 1rem; } .shop-cat { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .shop h4 { font-size: 1.02rem; margin: 0.25rem 0 0.4rem; } .shop p { color: var(--muted); font-size: 0.82rem; flex: 1; margin-bottom: 0.9rem; } .shop-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; } .shop-price { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; } /* STEP 33 — bakiye yetersizken ürün kartı kilitli görünür. */ .shop-locked { opacity: 0.72; } .shop-locked:hover { transform: none; border-color: var(--line); } .shop-warn { display: block; margin-top: 0.55rem; color: var(--muted); font-size: 0.74rem; font-weight: 600; } /* Limit rozetleri (16 Eyl 2026): kategori satırının sağında — "Kalan 3", "7 günde 1 kez". */ .shop-cat { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } .shop-chips { display: inline-flex; gap: 0.3rem; } .shop-chip { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; } .shop-chip-soft { background: transparent; border: 1px solid var(--line-2); color: var(--muted); } .shop-tukendi .shop-media { filter: grayscale(1) brightness(0.6); } .shop-tukendi .shop-media::after { content: "T\00DC KEND\0130"; position: absolute; inset: auto 0 12px; text-align: center; font-family: var(--font-display); font-weight: 800; letter-spacing: 0.18em; font-size: 0.8rem; color: #fff; } /* Ödül talepleri / siparişler listesi */ .req-list { display: flex; flex-direction: column; gap: 0.5rem; } .req-empty { color: var(--muted); font-size: 0.86rem; padding: 0.5rem 0; } .req-row { display: flex; align-items: center; gap: 0.8rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 1rem; } .req-ic { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.2rem; background: rgba(255,255,255,0.04); border: 1px solid var(--line); } .req-main { flex: 1; min-width: 0; } .req-main b { font-size: 0.9rem; font-family: var(--font-display); display: block; } .req-main small { color: var(--muted); font-size: 0.76rem; } .req-status { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 999px; white-space: nowrap; } .req-pending { background: rgba(240,181,61,0.15); color: var(--gold); } .req-approved { background: rgba(56,189,248,0.15); color: #7dd3fc; } .req-delivered { background: rgba(52,211,153,0.15); color: var(--green); } .req-rejected { background: var(--rose-soft); color: var(--rose-3); } /* ---------- Ödül talepleri yönetimi (admin) ---------- */ .req-stats { grid-template-columns: repeat(5, 1fr); } .req-scale { color: var(--muted); font-size: 0.8rem; margin: 0.1rem 0 1.1rem; } .req-toolbar { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.1rem; } .req-toolbar .seg { margin-bottom: 0; flex-wrap: wrap; } .req-input, .req-select { background: var(--panel); border: 1px solid var(--line-2); color: var(--text); border-radius: 999px; padding: 0.5rem 0.95rem; font-size: 0.84rem; font-family: inherit; } .req-input { min-width: 200px; flex: 1; } .req-input:focus, .req-select:focus { outline: none; border-color: var(--rose-line); } .req-table { display: flex; flex-direction: column; gap: 0.5rem; } .areq-group { display: flex; align-items: center; gap: 0.6rem; margin: 1.2rem 0 0.3rem; } .areq-group span:last-child { color: var(--muted); font-size: 0.78rem; } .areq { display: grid; grid-template-columns: 1.7fr 1.4fr auto 88px auto auto; gap: 0.9rem; align-items: center; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 1rem; } .areq-user { display: flex; align-items: center; gap: 0.6rem; min-width: 0; } .areq-av { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-size: 0.9rem; background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); font-family: var(--font-display); font-weight: 800; color: var(--rose-3); } .areq-id { min-width: 0; } .areq-id b { font-size: 0.86rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .areq-id small, .areq-prod small { color: var(--muted); font-size: 0.72rem; } .areq-prod { min-width: 0; } .areq-prod b { font-size: 0.84rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .areq-cost { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; white-space: nowrap; } .areq-date { color: var(--muted); font-size: 0.78rem; white-space: nowrap; } .areq-actions { display: flex; gap: 0.4rem; justify-content: flex-end; } .req-done { color: var(--muted-2); } @media (max-width: 1080px) { .req-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 960px) { .areq { grid-template-columns: 1.4fr 1fr auto auto; } .areq-date { display: none; } } @media (max-width: 720px) { .req-stats { grid-template-columns: repeat(2, 1fr); } .areq { grid-template-columns: 1fr 1fr; row-gap: 0.6rem; } .areq-actions { grid-column: 1 / -1; justify-content: flex-start; } } @media (max-width: 420px) { .req-stats { grid-template-columns: 1fr; } } /* ============================================================ SPONSORS (logo tabanlı, profesyonel kartlar) ============================================================ */ /* 11+ sponsor için kompakt, otomatik sığan grid. */ .sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 0.8rem; } .sponsor-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } /* Sponsor araç çubuğu: kategori filtresi + arama (kalabalığı önler) */ .sponsor-toolbar { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .sponsor-cats { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; margin-bottom: 0; } .sponsor-search { flex-shrink: 0; min-width: 180px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); border-radius: 999px; padding: 0.5rem 0.95rem; font-size: 0.85rem; } .sponsor-search::placeholder { color: var(--muted-2); } .sponsor-search:focus { outline: none; border-color: var(--rose-line); } @media (max-width: 560px) { .sponsor-toolbar { flex-direction: column; align-items: stretch; } .sponsor-search { width: 100%; } } /* --- Logo karoları (emoji yok: görsel veya baş harf monogramı) --- */ .sponsor-logo-tile, .sf-logo-tile { display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, #1c1c22, #101014); border: 1px solid var(--line-2); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); font-family: var(--font-display); font-weight: 800; letter-spacing: 0.02em; } .sponsor-logo-tile { width: 64px; height: 64px; border-radius: 16px; font-size: 1.3rem; } .sf-logo-tile { width: 112px; height: 112px; border-radius: 24px; font-size: 2.2rem; } .sponsor-logo-tile.has-img, .sf-logo-tile.has-img { background: #fff; } .sponsor-logo-tile img, .sf-logo-tile img { width: 100%; height: 100%; object-fit: contain; } .sponsor-mono { background: linear-gradient(135deg, var(--rose-3), var(--rose)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* --- Standart sponsor kartı --- */ .sponsor { display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .sponsor:hover { transform: translateY(-4px); border-color: var(--rose-line); box-shadow: var(--shadow); } .sponsor-head { position: relative; height: 96px; display: grid; place-items: center; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 50% 130%, rgba(var(--rose-rgb),0.20), transparent 70%), linear-gradient(160deg, #141418, #0c0c0e); } .sponsor-flag { position: absolute; top: 0.6rem; right: 0.6rem; } /* Öne çıkan rozeti → beyaz yuvarlak rozet + üstünde fade-gradient yıldız. Rozet = elemanın kendi (#fff) zemini; ikon ::before'da (gradient, clip:text) → ikon GARANTİ üstte (negatif z-index / stacking sorunu yok). */ /* Öne çıkan rozeti → SADECE beyaz yıldız (SVG mask), daire yok, büyük. Hafif gloss gradyanı + gölge ile dolgun/modern görünüm. */ .sponsor-star { display: inline-block; font-size: 0; vertical-align: middle; background: linear-gradient(225deg, rgba(246, 246, 250, 0.97) 26%, rgba(200, 202, 216, 0.42) 100%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); } .sponsor-head .sponsor-star { display: inline-block !important; position: absolute; top: 0.6rem; right: 0.65rem; z-index: 3; width: 1.05rem; height: 1.05rem; } /* "Tüm Sponsorlar" yanı: sade beyaz tik (daire yok). */ .fx-tick { display: inline-grid; place-items: center; font-size: 0; width: 1.7rem; height: 1.7rem; vertical-align: middle; } .fx-tick::before { content: "✔"; color: #fff; font-weight: 900; font-size: 1.25rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); } .bh-title { display: inline-flex; align-items: center; gap: 0.5rem; } .sponsor-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.1rem 1.2rem; } .sponsor-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 0.5rem; } .sponsor-bonus { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--text); background: var(--rose-soft); border: 1px dashed var(--rose-line); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; margin-bottom: 0.6rem; } /* Bonus metni — KALIN ve belirgin. */ .bonus-txt { font-weight: 800; letter-spacing: 0.01em; } /* Duyuru topu — sponsorun buton/marka renginde (--sbc; yoksa tema rose), hafif nabız (ping) halkası. em → bonus fontuyla orantılı ölçeklenir. */ .bonus-ping { flex-shrink: 0; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--sbc, var(--rose)); animation: bonusPing 1.8s ease-out infinite; } @keyframes bonusPing { 0% { box-shadow: 0 0 0 0 var(--sbc, var(--rose)); } 70% { box-shadow: 0 0 0 0.7em transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .bonus-ping { animation: none; } } .sponsor-desc { color: var(--muted); font-size: 0.82rem; margin-bottom: 0.7rem; flex: 1; } .sponsor-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; } .sponsor-task { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--rose-3); font-weight: 600; margin-bottom: 0.8rem; } .sponsor-cta { margin-top: auto; } /* STEP 48 — Sponsor sayfası yeni düzen: 3 öne çıkan kart + 2 banner + marka butonu */ /* Sponsorlar sayfasındaki öne çıkan sıra da ANA SAYFA ile aynı kurala uyar: ikişerli dizilir, sayı tekse ilk kart tam genişlik (bkz. .sponsor-tier-row). */ .sponsor-featured-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.2rem; } .sponsor-featured-row > .sponsor:first-child:nth-last-child(odd) { grid-column: 1 / -1; } .sponsor-feat .sponsor-flag { display: inline-flex; z-index: 3; } /* öne çıkan kartta rozet görünsün (logonun üstünde) */ /* TÜM sponsor kartları (öne çıkan + genel) — logo küçük kutu/beyaz bg yerine kartın üst alanını doldurur, TAM ORTALANMIŞ (yatay+dikey), doğrudan koyu zeminde. Logosuz ise baş harf monogramı büyük. img intrinsic boyutunda flex ile ortalanır (object-fit'e bağlı kalmadan kesin ortalama). */ .sponsor .sponsor-head { height: 116px; } .sponsor .sponsor-logo-tile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: auto; height: auto; padding: 1.1rem 1.4rem; border: 0; border-radius: 0; box-shadow: none; background: transparent; font-size: 2.4rem; } .sponsor .sponsor-logo-tile.has-img { background: transparent; } .sponsor .sponsor-logo-tile img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; } /* Banner alanı (1000x100 mantığı) — tam genişlik, responsive */ /* Banner alanı — oran (10:1) korunur ama kapladığı dikey yer azaltıldı: genişlik sınırlanıp ortalanır (yükseklik orantılı düşer), boşluklar daraltıldı. Böylece altındaki "Tüm Sponsorlar" daha erken görünür. */ /* Banner alanı — 2 sütunlu ızgara (yan yana 2, alt satırda 2 = 4 alan). Yanlardaki boşluk dolar; her banner yarım genişlikte (10:1 oran korunur). */ /* ---- Sponsorlar sayfası banner alanı (1000×100 yatay) ---- Global sponsor kartlarıyla AYNI kural: ikişerli dizilir, sayı TEKse ilk banner tam genişlik → 1 tam · 2 yan yana · 3 = 1 tam + 2 · 4 = 2+2. En fazla 4 (views.js SPONSOR_BANNER_SLOTS). Hiç banner yoksa kap `hidden` olur — ziyaretçi boş yer tutucu GÖRMEZ. */ .sponsor-banners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 0; /* alt boşluk #tierSponsorsGrid'den gelir */ } .sponsor-banners[hidden] { display: none; } /* TEK sayıda banner → ilk banner tam genişlik (1 → tek büyük, 3 → 1 tam + 2). */ .sponsor-banners > .sponsor-banner:first-child:nth-last-child(odd) { grid-column: 1 / -1; } .sponsor-banner { width: 100%; /* Oran KORUNUR (1000×100) — banner tasarımı kırpılmasın; tam genişlikte daha yüksek, yarım genişlikte daha alçak görünür. */ aspect-ratio: 1000 / 100; min-height: 38px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, #141418, #0c0c0e); border: 1px solid var(--line); border-radius: var(--radius-sm); } @media (max-width: 720px) { .sponsor-banners { grid-template-columns: 1fr; } .sponsor-banners > .sponsor-banner:first-child:nth-last-child(odd) { grid-column: auto; } } .sponsor-banner a, .sponsor-banner img { display: block; width: 100%; height: 100%; } .sponsor-banner img { object-fit: cover; } /* Tıklanabilir banner: imleç + hafif kalkma/parlama — "ölü görsel" hissi vermesin, tıklanacağı belli olsun. */ .sponsor-banner { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .sponsor-banner.is-link { cursor: pointer; } .sponsor-banner.is-link:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.7); } .sponsor-banner.is-link:hover img { filter: brightness(1.06); } /* Marka renkli buton — bg/border/color + --sb (rgb) inline style ile gelir. STEP 51: marka renginden glow (box-shadow) CSS değişkeni --sb ile; hover'da artar. */ .btn-brand { font-weight: 700; --sb: 176, 18, 23; /* fallback (tema blood) */ background: var(--sbc, var(--rose)); border-color: var(--sbc, var(--rose)); color: var(--sbt, #fff); box-shadow: 0 10px 30px rgba(var(--sb), 0.28); transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .btn-brand:hover { filter: brightness(1.06); box-shadow: 0 14px 40px rgba(var(--sb), 0.40); } @media (max-width: 720px) { /* OPSİYON B (sabit karar) — 3 kart YAN YANA ama küçük. Hepsi tek bakışta görünür, dikeyde en az yer. (Yalnız mobil — masaüstü 3'lü grid korunur.) */ .sponsor-featured-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; margin-bottom: 1rem; } /* Mobilde 3 yan yana — tam genişlik kuralı burada geçersiz. */ .sponsor-featured-row > .sponsor:first-child:nth-last-child(odd) { grid-column: auto; } .sponsor-featured-row .sponsor-feat .sponsor-head { height: 58px; } .sponsor-featured-row .sponsor-feat .sponsor-body { padding: 0.5rem 0.4rem; gap: 0.35rem; } .sponsor-featured-row .sponsor-feat .sponsor-name { font-size: 0.7rem; } .sponsor-featured-row .sponsor-feat .sponsor-bonus { font-size: 0.6rem; padding: 0.25rem 0.3rem; gap: 0.3rem; justify-content: center; line-height: 1.2; } .sponsor-featured-row .sponsor-feat .btn { width: 100%; padding: 0.4rem 0.15rem; font-size: 0.66rem; } .sponsor-featured-row .sponsor-star { width: 0.95rem; height: 0.95rem; top: 0.3rem; right: 0.3rem; } } /* ------------------------------------------------------------ SPONSORLAR SAYFASI — affiliate temizliği (MASAÜSTÜ + MOBİL) Kartlarda yalnızca: Logo · Sponsor adı · Bonus · KC ödülü · Siteye Git. Açıklama, etiketler (VIP/Premium/Slot/Bonus/Canlı Casino/Masa Oyunları/ Günlük/Jackpot…) ve "Öne Çıkan" rozeti her ekranda GİZLİ. ÖNEMLİ: Bu yalnızca kart İÇİndeki .sponsor-tags'i gizler; üstteki kategori filtre çipleri (.sponsor-cats / #sponsorCatSeg) ETKİLENMEZ. Öne çıkan hero da kompakt: açıklama + etiket gizli. (Yalnızca UI.) */ .sponsor-grid .sponsor-desc, .sponsor-grid .sponsor-tags, .sponsor-grid .sponsor-flag { display: none; } .sponsor-featured .sf-desc, .sponsor-featured .sponsor-tags { display: none; } /* --- Öne çıkan sponsor (büyük yatay kart) --- */ .sponsor-featured { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center; background: linear-gradient(150deg, rgba(var(--rose-rgb),0.13), var(--panel) 62%); border: 1px solid var(--rose-line); border-radius: var(--radius-lg); padding: 1.7rem; margin-bottom: 1.4rem; } .sf-glow { position: absolute; top: -45%; left: -5%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--rose-rgb),0.22), transparent 65%); pointer-events: none; } .sf-logo { position: relative; z-index: 1; } .sf-info { position: relative; z-index: 1; min-width: 0; } .sf-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose-3); background: var(--rose-soft); border: 1px solid var(--rose-line); border-radius: 999px; padding: 0.3rem 0.8rem; margin-bottom: 0.6rem; } .sf-name { font-size: 1.9rem; font-weight: 800; margin-bottom: 0.6rem; } .sf-bonus { display: inline-block; font-size: 0.92rem; margin-bottom: 0.7rem; } .sf-desc { color: var(--muted); font-size: 0.92rem; max-width: 46rem; margin-bottom: 0.8rem; } .sf-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.9rem; } .sf-task { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--rose-3); font-weight: 600; } @media (max-width: 1080px) { .sponsor-grid, .sponsor-rail { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ SPONSORLAR — MOBİL (affiliate-odaklı dizin) ------------------------------------------------------------ Mobilde kart yalnızca affiliate önceliğini gösterir: 1) Logo 2) Bonus 3) KC ödülü 4) Siteye Git Açıklama / etiket / VIP-Premium-Slot rozetleri TAMAMEN gizlenir. 2 sütunlu kompakt grid → ekranda 4–6 sponsor görünür. Veri/komponent yapısı değişmez; yalnızca CSS yoğunluğu. Masaüstü düzeni etkilenmez (yalnızca ≤720px). ============================================================ */ @media (max-width: 720px) { /* 2 sütunlu kompakt grid (yalnızca Sponsorlar SAYFASI; ana sayfa önizleme rail'i .sponsor-rail etkilenmez). Açıklama/etiket/rozet zaten global olarak gizli; mobilde yalnızca yoğunluk ayarlanır. Kart: logo · ad · bonus · KC · CTA. */ .sponsor-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } /* Kompakt kart: kısa logo başlığı + sıkı gövde (sayfa grid'ine özel) */ .sponsor-grid .sponsor-head { height: 92px; } .sponsor-grid .sponsor-logo-tile { padding: 0.6rem 0.8rem; font-size: 1.4rem; } .sponsor-grid .sponsor-body { padding: 0.65rem 0.65rem 0.7rem; } .sponsor-grid .sponsor-name { font-size: 0.9rem; text-align: center; margin-bottom: 0.4rem; } .sponsor-grid .sponsor-bonus { font-size: 0.74rem; line-height: 1.3; text-align: center; padding: 0.4rem 0.5rem; margin-bottom: 0.5rem; } .sponsor-grid .sponsor-task { justify-content: center; font-size: 0.72rem; font-weight: 700; margin-bottom: 0.55rem; } .sponsor-grid .sponsor-cta { font-size: 0.8rem; padding: 0.55rem 0.6rem; } /* Ana sayfa önizleme rail'i (yatay swipe) — değişmeden */ .sponsor-rail { grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; margin-inline: -0.9rem; padding-inline: 0.9rem; } .sponsor-rail > * { scroll-snap-align: start; } /* Öne çıkan hero: mobilde sıkıştır → logo yanında ad/bonus/KC/CTA (açıklama + etiket zaten global olarak gizli) */ .sponsor-featured { grid-template-columns: auto 1fr; text-align: left; gap: 0.9rem; padding: 1rem; align-items: center; } .sf-logo-tile { width: 64px; height: 64px; border-radius: 16px; font-size: 1.3rem; } .sf-eyebrow { margin-bottom: 0.4rem; padding: 0.22rem 0.6rem; font-size: 0.66rem; } .sf-name { font-size: 1.3rem; margin-bottom: 0.4rem; } .sf-bonus { font-size: 0.86rem; margin-bottom: 0.5rem; } .sf-cta { gap: 0.7rem; margin-top: 0.5rem; } } /* ============================================================ EVENT ECOSYSTEM — Etkinlik Merkezi ============================================================ */ .event-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-bottom: 0.4rem; } .event-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } /* "Canlı Etkinlikler" başlık nabzı */ .ev-pulse { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rose-2); margin-right: 0.2rem; vertical-align: middle; box-shadow: 0 0 0 0 rgba(var(--rose-rgb),0.6); animation: pulse 1.8s infinite; } /* ---------- Etkinlik kartı ---------- */ .event-card { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .event-card:hover { transform: translateY(-4px); border-color: var(--rose-line); box-shadow: var(--shadow); } .event-card.ev-done { opacity: 0.82; } .event-card.joined { border-color: var(--rose-line); } /* ---------- Parti kartı (.cal-card) — artık YALNIZ ana sayfa önizlemesi ---------- 26 Ağu 2026: Takvim SAYFASI dik kart ızgarasından yatay banner yığınına geçti (bkz. "PARTİ BANNER" bloğu, dosyanın altında). Aşağıdaki .cal-card kuralları SİLİNMEDİ çünkü ana sayfadaki `#homeCalendar` önizlemesi hâlâ kart çiziyor — sayfanın kendisi ile önizlemesi arasındaki fark bilinçli. */ /* Takvim sayfası: tek sütun yığın. Kartlar arası boşluk `gap` ile değil `.eh2--parti { margin-bottom }` ile veriliyor — "Geçmiş partiler" başlığı ve "tamamını göster" tuşu da bu kabın çocuğu, gap onlara da uygulanırdı. */ #calendarList { grid-template-columns: 1fr; gap: 0; } .cal-card .ev-body { padding: 0.85rem 0.95rem 0.95rem; } .cal-card .ev-title { font-size: 1.02rem; margin: 0 0 0.3rem; } .cal-card .cal-date { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.35rem; } .cal-card .cal-text { font-size: 0.8rem; margin-bottom: 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cal-ticket { margin-top: auto; width: 100%; font-weight: 700; } /* Bilet renk paletinin TEK KAYNAĞI burasi kalsin diye banner tusuna ayri kural yazilmiyor, seciciye `.eh2-cta` ekleniyor. ⚠Cıplak `.cal-ticket` KULLANILAMAZ: yukaridaki 1406 satirindaki width:100% + margin-top:auto tusu `.eh2-foot` satirinda tam genislige sisirir ve alt satiri bozar. */ .cal-ticket.cal-available, .eh2-cta.cal-available { background: var(--rose-grad); color: var(--on-rose); border-color: transparent; } .cal-ticket.cal-limited, .eh2-cta.cal-limited { background: var(--gold); color: #211a06; border-color: transparent; } .cal-ticket.cal-soldout, .eh2-cta.cal-soldout { background: rgba(255,255,255,0.05); color: var(--muted); border: 1px solid var(--line); cursor: default; } /* ============================================================ PARTİ TAKVİMİ KARTI — yeniden düzenlendi Sorun: poster alanı 116px sabitti, görsel EZİLİYORDU; görselsiz kartlar da düz renk bandı olarak "neyin nesi belirsiz" duruyordu. Çözüm: 3:2 poster oranı + üstte TARİH ROZETİ + konum satırı. ============================================================ */ .cal-card .ev-art { height: auto; aspect-ratio: 3 / 2; min-height: 0; border-bottom: 1px solid var(--line); } .cal-card .ev-img { object-fit: cover; } /* Tarih rozeti — posterin sol üstünde */ .cal-chip { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 3; display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 0.4rem 0.55rem 0.35rem; border-radius: 10px; background: rgba(8, 8, 10, 0.78); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(6px); } .cal-chip b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: #fff; } .cal-chip i { font-style: normal; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 0.18rem; } /* Durum bayrağı — sağ üst (yalnız son biletler / tükendi) */ .cal-flag { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; padding: 0.26rem 0.55rem; border-radius: 999px; backdrop-filter: blur(6px); } .cal-flag-limited { background: rgba(245, 180, 0, 0.9); color: #211a06; } .cal-flag-soldout { background: rgba(8, 8, 10, 0.8); color: var(--muted); border: 1px solid rgba(255, 255, 255, 0.18); } /* GEÇMİŞ ETKİNLİK — hata değil, bu yüzden kırmızı/uyarı rengi YOK. Nötr ve sönük: "olmuş bitmiş" demek yeterli, dikkat çekmesi gerekmiyor. */ .cal-flag-gecti { background: rgba(8, 8, 10, 0.82); color: var(--muted-2); border: 1px solid rgba(255, 255, 255, 0.14); } .cal-ticket.cal-gecti { background: rgba(255,255,255,0.04); color: var(--muted-2); border: 1px solid var(--line); cursor: default; } /* Poster soluklaşır ama okunur kalır — arşiv, silinmiş içerik değil. */ .cal-card.cal-gecti .ev-art { filter: grayscale(0.55) brightness(0.72); } .cal-card.cal-gecti .ev-title { color: var(--muted); } /* Takvim sayfasında geçmişleri ayıran başlık. Izgaranın tam genişliğini kaplar, yoksa kart sütununa sıkışıp başlık gibi durmaz. */ .cal-gecmis-baslik { grid-column: 1 / -1; margin: 1.6rem 0 0.2rem; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; border-top: 1px solid var(--line); padding-top: 1.1rem; } /* Gövde — tarih, konum, açıklama net katmanlar */ .cal-card .cal-meta { font-size: 0.74rem; color: var(--muted); margin: 0 0 0.3rem; } .cal-card .cal-loc { display: flex; align-items: center; gap: 0.32rem; font-size: 0.74rem; color: var(--muted-2); margin: 0 0 0.5rem; } .cal-card .cal-loc svg { width: 0.85rem; height: 0.85rem; flex-shrink: 0; } /* Ana sayfa önizlemesinde bilet butonu gizli — takvim sayfasına özel. */ #homeCalendar .cal-ticket { display: none; } /* ANA SAYFA = TAKVİM SAYFASI ile AYNI yatay banner (26 Ağu 2026). Önce burada "kart" duruyordu ve iki yer iki ayrı görünüm gösteriyordu. Kap artık tek sütun — banner'ın kendi aralığı `.eh2--parti`den geliyor. */ #homeCalendar { display: block; } /* #calendarList için kırılım eşiği YOK — tek sütun her genişlikte tek sütun. Banner'ın kendi dar ekran davranışı `.eh2` @media 860'tan geliyor. */ /* ---------- Bildirimler (15 Eyl 2026) ---------- Zil: masaüstünde sağ üst sosyal ikon sırasının başında, mobilde üst barda puan rozetinin solunda. Açılır liste tek (#bellPop), sabit konum. */ .bell { position: relative; display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: calc(10px * var(--radius-olcek, 1)); border: 1px solid var(--line); background: var(--panel-2); color: #eef1f4; cursor: pointer; transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease; } .bell svg { width: 18px; height: 18px; } .bell:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); } .bell.has-new svg { animation: bell-salla 1.6s ease 0.4s 1; transform-origin: 50% 8%; } @keyframes bell-salla { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } } .bell-n { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #fff; color: #0b0b0d; font-size: 0.64rem; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--bg, #0a0a0c); } .mobile-right { display: flex; align-items: center; gap: 0.45rem; } .mobile-right .bell { width: 36px; height: 36px; } .bell-pop { position: fixed; top: 66px; right: 16px; z-index: 9400; width: min(360px, calc(100vw - 32px)); background: linear-gradient(165deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9); overflow: hidden; } .bell-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem 0.6rem; } .bell-pop-head b { font-size: 0.95rem; } .bell-pop-x { border: 0; background: transparent; color: var(--muted); font-size: 0.9rem; cursor: pointer; padding: 0.2rem 0.4rem; } .bell-pop-x:hover { color: #fff; } .bell-pop .bl-list { max-height: min(60vh, 420px); overflow-y: auto; } .bell-pop-all { display: block; text-align: center; padding: 0.7rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); border-top: 1px solid var(--line); text-decoration: none; } .bell-pop-all:hover { color: #fff; background: rgba(255, 255, 255, 0.04); } .bl-item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 1rem; text-decoration: none; color: var(--text); border-top: 1px solid var(--line); transition: background 0.14s ease; } .bl-item:hover { background: rgba(255, 255, 255, 0.04); } .bl-item.is-new { background: rgba(255, 255, 255, 0.035); } .bl-item.is-new .bl-body b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-left: 0.45rem; vertical-align: middle; } .bl-ic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2); color: #e9ecf1; } .bl-ic svg { width: 15px; height: 15px; } .bl-body { min-width: 0; display: grid; gap: 0.12rem; } .bl-body b { font-size: 0.86rem; } .bl-body > span { font-size: 0.8rem; color: var(--muted); line-height: 1.45; } .bl-body small { font-size: 0.72rem; color: var(--muted-2); } .bl-empty { margin: 0; padding: 1.1rem 1rem; color: var(--muted); font-size: 0.84rem; text-align: center; } .bl-list-full { border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(160deg, var(--panel-2), var(--panel)); overflow: hidden; } .bl-list-full .bl-item:first-child { border-top: 0; } .bl-list-full .bl-item { padding: 0.9rem 1.1rem; } @media (max-width: 560px) { .bell-pop { top: 60px; right: 12px; } } /* ---------- Sponsor Şikayet (14 Eyl 2026 — yeniden) ---------- Solda adımlı form, sağda süreç/ipucu/destek. Sponsor kartları logolu; seçilince marka rengi (--marka) kenarlığa. 980 altında tek sütun. */ .cmp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.1rem; align-items: start; } .cmp-card { background: linear-gradient(165deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem 1.6rem 1.6rem; } .cmp-step { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 0.9rem; } .cmp-step + .cmp-step, .cmp-sponsors + .cmp-step, .cmp-grid2 + .cmp-step { margin-top: 1.6rem; } .cmp-step > div { min-width: 0; flex: 1; } .cmp-step b { display: block; font-size: 1rem; } .cmp-step small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.1rem; line-height: 1.45; } .cmp-num { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 0.86rem; font-weight: 800; color: #0b0b0d; background: #fff; } .cmp-picked { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.06); white-space: nowrap; } .cmp-req { color: #ff9b9b; font-style: normal; } .cmp-sponsors { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 0.6rem; } .cmp-sponsor { --marka: #fff; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; min-height: 92px; padding: 0.7rem 0.7rem 0.6rem; cursor: pointer; text-align: center; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); color: var(--text); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .cmp-sponsor:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.06); transform: translateY(-2px); } .cmp-sponsor.on { border-color: var(--marka); background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 1px var(--marka), 0 12px 28px -16px var(--marka); } /* Logo genişliği = kutu × logoScale (satır içi), yükseklik 40 px'te kapanır. */ .cmp-sponsor-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; } .cmp-sponsor-logo img { width: 100%; max-width: 100%; height: auto; max-height: 40px; object-fit: contain; } .cmp-sponsor-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmp-sponsor:has(.cmp-sponsor-logo) .cmp-sponsor-name { font-size: 0.68rem; color: var(--muted); font-weight: 600; } .cmp-sponsor-check { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--marka); color: #0b0b0d; opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease; } .cmp-sponsor-check svg { width: 12px; height: 12px; stroke-width: 2.4; } .cmp-sponsor.on .cmp-sponsor-check { opacity: 1; transform: scale(1); } .cmp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } .cmp-field { display: block; } .cmp-field > span { display: block; font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-bottom: 0.4rem; } #complaintForm .auth-input { width: 100%; margin: 0; } .cmp-textarea { min-height: 9.5rem; resize: vertical; font-family: inherit; line-height: 1.5; } .cmp-error { color: #ff9b9b; font-size: 0.84rem; margin: 0.8rem 0 0; } .cmp-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 1.1rem; } .cmp-count { font-size: 0.76rem; color: var(--muted-2); } .cmp-count b { color: var(--muted); font-weight: 600; } .cmp-success { text-align: center; padding: 1.2rem 0 0.4rem; } .cmp-success-ic { width: 56px; height: 56px; margin: 0 auto 0.9rem; border-radius: 50%; display: grid; place-items: center; background: rgba(63, 185, 80, 0.14); border: 1px solid rgba(63, 185, 80, 0.4); color: #7ee787; font-size: 1.6rem; } .cmp-success h4 { font-size: 1.15rem; margin-bottom: 0.9rem; } .cmp-success p { color: var(--muted); font-size: 0.86rem; margin: 0; } .cmp-ticket { display: inline-block; margin: 0.35rem 0 0.9rem; padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px dashed var(--line-2); background: rgba(255, 255, 255, 0.04); font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.08em; font-weight: 800; } .cmp-success-note { max-width: 460px; margin: 0 auto 1.1rem !important; font-size: 0.82rem !important; line-height: 1.55; } .cmp-success-note b { color: var(--text); } /* Yan sütun: tek kart, formla aynı boy (grid stretch). Süreç ortada, destek dipte. */ .cmp-wrap { align-items: stretch; } .cmp-side { display: flex; } .cmp-side-card { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(165deg, var(--panel-2), var(--panel)); padding: 1.4rem 1.3rem 1.3rem; } .cmp-side-head { display: flex; align-items: center; gap: 0.8rem; } .cmp-side-head > div { min-width: 0; } .cmp-side-head b { display: block; font-size: 1rem; } .cmp-side-head small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.1rem; } /* Monokrom ikon kutusu — sitenin siyah/beyaz dili (renkli kutu yok). */ .cmp-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 26px -16px rgba(255, 255, 255, 0.55); } .cmp-ic svg { width: 20px; height: 20px; } /* Adımlar kartın boyuna eşit dağılır (grid 1fr satırlar); bağlantı çizgisi bir sonraki daireye kadar iner. */ .cmp-flow { list-style: none; margin: 0; padding: 1.2rem 0 0.6rem; counter-reset: adim; flex: 1; display: grid; grid-auto-rows: 1fr; align-content: stretch; } .cmp-flow li { position: relative; display: grid; align-content: start; gap: 0.15rem; padding: 0.55rem 0 0.55rem 2.3rem; counter-increment: adim; } .cmp-flow li::before { content: counter(adim); position: absolute; left: 0; top: 0.55rem; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.76rem; font-weight: 800; color: #0b0b0d; background: #fff; } .cmp-flow li:not(:last-child)::after { content: ""; position: absolute; left: 12.5px; top: 2.35rem; bottom: -0.55rem; width: 1px; background: var(--line-2); } .cmp-flow b { font-size: 0.92rem; } .cmp-flow span { color: var(--muted); font-size: 0.81rem; line-height: 1.5; } .cmp-help { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: auto; } .cmp-help > small { display: block; color: var(--muted); font-size: 0.78rem; margin-bottom: 0.6rem; } .cmp-help-links { display: flex; flex-wrap: wrap; gap: 0.5rem; } .cmp-help-links .btn { flex: 1 1 auto; justify-content: center; } @media (max-width: 980px) { .cmp-flow { padding: 1rem 0 0.4rem; grid-auto-rows: auto; } } @media (max-width: 980px) { .cmp-wrap { grid-template-columns: 1fr; } } @media (max-width: 560px) { .cmp-card { padding: 1.1rem 1rem 1.2rem; } .cmp-sponsors { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cmp-grid2 { grid-template-columns: 1fr; } .cmp-foot { flex-direction: column; align-items: stretch; } .cmp-foot .btn { width: 100%; } .cmp-picked { display: none; } } /* ---------- Hero slaytı ---------- Sağdaki görsel yatay kayar (yeni sağdan girer, eski sola çıkar), kenarlarda mask ile soft fade var. Soldaki metin aynı anda yukarıdan aşağı süzülür (aynı zamanlama). */ .hero-media { position: relative; z-index: 2; align-self: center; overflow: hidden; border-radius: var(--radius); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); } .hero-slide { display: block; } .hero-slide.active { animation: heroSlideIn 1s cubic-bezier(0.45, 0, 0.25, 1); } .hero-slide.leaving { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; animation: heroSlideOut 1s cubic-bezier(0.45, 0, 0.25, 1) forwards; } @keyframes heroSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes heroSlideOut { from { transform: translateX(0); } to { transform: translateX(-100%); } } .hero-slide img { display: block; width: 100%; height: auto; border-radius: var(--radius); } /* Soldaki metin: görselle aynı anda yukarıdan aşağı iner */ .hero-drop > * { animation: heroDrop 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; } .hero-drop > *:nth-child(1) { animation-delay: 0.00s; } .hero-drop > *:nth-child(2) { animation-delay: 0.06s; } .hero-drop > *:nth-child(3) { animation-delay: 0.12s; } .hero-drop > *:nth-child(4) { animation-delay: 0.18s; } @keyframes heroDrop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } } .hero-dots { display: flex; justify-content: center; gap: 0.4rem; margin: 0.7rem 0 0.2rem; } .hero-dot { width: 8px; height: 8px; border-radius: 50%; cursor: pointer; padding: 0; background: rgba(255, 255, 255, 0.24); border: 0; transition: all 0.2s ease; } .hero-dot:hover { background: rgba(255, 255, 255, 0.45); } .hero-dot.on { width: 22px; border-radius: 999px; background: #fff; } @media (max-width: 860px) { .hero-media { margin-top: 0.6rem; } } /* ---------- Pop-up (panelden yönetilir, sırayla gösterilir) ---------- */ .popup-overlay { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(6px); padding: 1.2rem; animation: popupIn 0.18s ease; } @keyframes popupIn { from { opacity: 0; } to { opacity: 1; } } .popup-box { position: relative; width: min(420px, 100%); max-height: 88vh; overflow: auto; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } .popup-close { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 0.9rem; line-height: 1; color: #fff; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(4px); transition: background 0.15s ease; } .popup-close:hover { background: rgba(0, 0, 0, 0.8); } .popup-img { display: block; width: 100%; height: auto; } .popup-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.55rem; } .popup-title { font-size: 1.15rem; } .popup-text { color: rgba(255, 255, 255, 0.78); font-size: 0.88rem; line-height: 1.55; } .popup-cta { margin-top: 0.3rem; text-align: center; } /* ---------- Etkinlikler — poster + açıklama + katılım butonu ---------- Parti Takvimi/Modeller ile aynı ızgara ve kart ölçüsü. */ .event-simple-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 0.4rem; align-items: start; } .ev-simple { display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .ev-simple:hover { transform: translateY(-4px); border-color: var(--rose-line); box-shadow: var(--shadow); } /* Poster kendi oranında oturur → altında boşluk kalmaz. Tüm etkinlik görselleri aynı ölçüde hazırlandığı için kartlar da eşit boyda çıkar. Görsel yoksa 3:4 gradyan yer tutucu. */ .evs-media { position: relative; overflow: hidden; } .evs-media--empty { aspect-ratio: 1 / 1; } .evs-img { width: 100%; height: auto; display: block; } .evs-body { padding: 1.05rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; gap: 0.55rem; } .evs-title { font-size: 1.02rem; line-height: 1.3; } .evs-desc { color: var(--rose-3); font-size: 0.8rem; font-weight: 600; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .evs-body .btn { margin-top: auto; padding-top: 0.62rem; padding-bottom: 0.62rem; } @media (max-width: 1200px) { .event-simple-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .event-simple-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .event-simple-grid { grid-template-columns: 1fr; } } /* ---------- Modeller — Parti Takvimi ile aynı dik (3:4) kart ---------- */ .model-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 0.4rem; } .model-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .model-card:hover { transform: translateY(-4px); border-color: var(--rose-line); box-shadow: var(--shadow); } /* Kartlar EŞİT (sabit 3:4). Foto KIRPILMAZ + BÜYÜTÜLMEZ: içine sığar (contain). Kalan boşluk SİYAH DEĞİL → arka plan şeffaf, kartın rengi görünür. */ .model-media { position: relative; aspect-ratio: 3 / 4; background: transparent; display: grid; place-items: center; overflow: hidden; } .model-img { width: 100%; height: 100%; object-fit: contain; object-position: top; } .model-media--mono { aspect-ratio: 3 / 4; display: grid; place-items: center; } /* KARE (1:1) seçeneği — panelden gelir. Müşteri fotoğrafları kare kaydettiği için 3:4 kutuda üstte-altta boşluk kalıyordu. object-position dik afişte "top" (yüz üstte kalsın); karede kadraj zaten doğru olduğu için MERKEZ doğrusu. */ .model-media--kare, .model-media--kare.model-media--mono { aspect-ratio: 1 / 1; } .model-media--kare .model-img { object-position: center; } .model-mono { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; color: rgba(255, 255, 255, 0.42); } .model-star { position: absolute; top: 0.6rem; left: 0.6rem; color: var(--gold); font-size: 1rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); } .model-body { padding: 0.85rem 0.95rem 0.95rem; display: flex; flex-direction: column; flex: 1; gap: 0.45rem; } .model-name { font-size: 1.05rem; } .model-desc { color: rgba(255, 255, 255, 0.72); font-size: 0.82rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .model-body .btn { margin-top: auto; } @media (max-width: 1200px) { .model-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .model-grid { grid-template-columns: repeat(2, 1fr); } } /* Telefonda YATAY kart: solda foto, sağda bilgi (müşteri isteği, 11 Eyl 2026). Tek sütun dik kart tam ekran portre oluyordu; listede 1 model görünüyordu. */ @media (max-width: 520px) { .model-grid { grid-template-columns: 1fr; gap: 0.7rem; } .model-card { flex-direction: row; align-items: stretch; } .model-media, .model-media--mono { flex: 0 0 38%; width: 38%; aspect-ratio: 3 / 4; } .model-media--kare, .model-media--kare.model-media--mono { aspect-ratio: 1 / 1; align-self: center; } .model-img { object-position: center; } .model-body { padding: 0.75rem 0.85rem 0.8rem; gap: 0.35rem; min-width: 0; } .model-name { font-size: 1rem; } .model-desc { -webkit-line-clamp: 3; } .model-body .btn { align-self: flex-start; padding: 0.5rem 0.95rem; font-size: 0.82rem; } .model-mono { font-size: 2rem; } } .ev-art { position: relative; height: 116px; overflow: hidden; display: grid; place-items: center; } .ev-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 72% 18%, rgba(255,255,255,0.14), transparent 60%); } .ev-glyph { font-size: 3rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); position: relative; z-index: 1; } /* Etkinlik görseli (panelden imageUrl) — sanat alanını kaplar, rozetlerin altında kalır. */ .ev-art .ev-img, .eh-art .eh-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .ev-status { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.28rem 0.62rem; border-radius: 999px; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); border: 1px solid var(--line-2); } .ev-status.ev-live { color: var(--on-rose); background: var(--rose-grad); border-color: transparent; } .ev-status.ev-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.4s ease infinite; } .ev-status.ev-soon { color: var(--gold); } .ev-status.ev-done { color: var(--muted); } .ev-flag { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; padding: 0.26rem 0.6rem; border-radius: 999px; background: rgba(240, 181, 61, 0.16); color: var(--gold); border: 1px solid rgba(240, 181, 61, 0.4); } .ev-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex: 1; } .ev-type { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose-3); } .ev-title { font-size: 1.18rem; margin: 0.25rem 0 0.35rem; } .ev-desc { color: rgba(255,255,255,0.74); font-size: 0.84rem; margin-bottom: 0.8rem; } /* Sponsor rozeti (sponsorId varsa otomatik) */ .ev-sponsor { display: flex; align-items: center; gap: 0.6rem; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; margin-bottom: 0.8rem; } .ev-sponsor-logo, .eh-body .ev-sponsor-logo { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; background: var(--panel-3); border: 1px solid var(--line-2); } .ev-sponsor-logo img { width: 100%; height: 100%; object-fit: cover; } .ev-sponsor-logo .sponsor-mono { font-family: var(--font-display); font-weight: 800; font-size: 0.82rem; color: var(--rose-3); } .ev-sponsor-id { display: flex; flex-direction: column; line-height: 1.2; } .ev-sponsor-id small { color: var(--muted); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; } .ev-sponsor-id b { font-size: 0.9rem; } .ev-meta { display: flex; gap: 1.4rem; margin-bottom: 0.8rem; } .ev-metric small { color: var(--muted); font-size: 0.7rem; display: block; margin-bottom: 0.1rem; } .ev-metric b { font-family: var(--font-display); font-size: 0.98rem; display: inline-flex; align-items: center; gap: 0.35rem; } .ev-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.9rem; } .ev-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: auto; } .ev-clock { display: flex; flex-direction: column; line-height: 1.25; } .ev-clock small { color: var(--muted); font-size: 0.68rem; } .ev-clock b { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; } .ev-clock.ended b { color: var(--muted); } .ev-act { flex-shrink: 0; } /* ---------- Öne çıkan etkinlik hero ---------- */ .event-hero { display: grid; grid-template-columns: 300px 1fr; gap: 0; background: linear-gradient(150deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 0.6rem; } .event-hero.ev-live { border-color: var(--rose-line); box-shadow: var(--shadow-rose); } .eh-art { position: relative; display: grid; place-items: center; min-height: 220px; overflow: hidden; } .eh-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(255,255,255,0.16), transparent 60%); } .eh-glyph { font-size: 5rem; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5)); position: relative; z-index: 1; } .eh-body { padding: 1.6rem 1.8rem; display: flex; flex-direction: column; } .eh-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; } .eh-badges .ev-status { position: static; } .eh-eyebrow { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; color: var(--gold); } .eh-badges .ev-type { color: var(--muted); } .eh-title { font-size: 1.8rem; margin-bottom: 0.4rem; } .eh-desc { color: rgba(255,255,255,0.8); font-size: 0.92rem; margin-bottom: 0.9rem; max-width: 60ch; } .eh-body .ev-sponsor { max-width: 280px; } .eh-stats { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-bottom: 0.9rem; } .eh-stat small { color: var(--muted); font-size: 0.72rem; display: block; margin-bottom: 0.15rem; } .eh-stat b { font-family: var(--font-display); font-size: 1.15rem; display: inline-flex; align-items: center; gap: 0.4rem; } .eh-cta { margin-top: auto; padding-top: 0.4rem; } .eh-cta .btn { min-width: 180px; } @media (max-width: 860px) { .event-hero { grid-template-columns: 1fr; } .eh-art { min-height: 150px; } .eh-title { font-size: 1.5rem; } } /* ============================================================ LEVELS ============================================================ */ .level-hero { background: linear-gradient(150deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 0.5rem; } .lh-top { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.4rem; flex-wrap: wrap; } .lh-badge { width: 84px; height: 84px; border-radius: 22px; flex-shrink: 0; display: grid; place-items: center; font-size: 2.6rem; border: 1px solid var(--line-2); } .lh-meta h2 { font-size: 1.8rem; } .lh-meta p { color: var(--muted); font-size: 0.9rem; } .lh-next { color: var(--muted); font-size: 0.86rem; margin-bottom: 0.6rem; } .lh-next b { color: var(--rose-3); font-family: var(--font-display); } .lh-bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; } .lh-bar i { display: block; height: 100%; background: var(--rose-grad); border-radius: 999px; transition: width 0.8s ease; } .ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; } .rung { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; position: relative; } .rung.reached { border-color: var(--rose-line); } .rung.current { border-color: var(--rose-2); box-shadow: var(--shadow-rose); } .rung-ic { font-size: 1.8rem; } .rung h4 { font-size: 1.05rem; margin: 0.5rem 0 0.2rem; } .rung-req { color: var(--muted); font-size: 0.8rem; } .rung-perks { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; } .rung-perks span { font-size: 0.78rem; color: var(--muted); display: flex; gap: 0.4rem; } .rung-perks span::before { content: '✓'; color: var(--rose-3); } .rung-state { position: absolute; top: 1.2rem; right: 1.2rem; font-size: 0.72rem; font-weight: 700; } .rung.reached .rung-state { color: var(--green); } .rung.current .rung-state { color: var(--rose-3); } .rung.locked { opacity: 0.55; } .rung.locked .rung-state { color: var(--muted); } /* ============================================================ PROFILE ============================================================ */ .profile-head { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 1.1rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .ph-glow { position: absolute; top: -50%; left: 20%; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--rose-rgb),0.22), transparent 65%); pointer-events: none; } .ph-av { width: 92px; height: 92px; border-radius: 24px; flex-shrink: 0; position: relative; z-index: 1; display: grid; place-items: center; font-size: 3rem; background: rgba(255,255,255,0.05); border: 2px solid var(--rose-line); } .ph-info { position: relative; z-index: 1; flex: 1; min-width: 200px; } .ph-info h2 { font-size: 1.8rem; } .ph-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; } .ph-rank { position: relative; z-index: 1; text-align: center; } .ph-rank .big { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--rose-3); } .ph-rank small { color: var(--muted); font-size: 0.78rem; } .profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-bottom: 0.5rem; } .ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; } .ach { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; text-align: center; } .ach.locked { opacity: 0.45; } .ach-ic { font-size: 1.8rem; } .ach b { display: block; font-size: 0.86rem; margin: 0.4rem 0 0.15rem; font-family: var(--font-display); } .ach small { color: var(--muted); font-size: 0.74rem; } /* ============================================================ PROFİL 2.0 — kariyer sayfası (oyuncu karargâhı) ============================================================ */ /* Hero seviye ilerleme çubuğu */ .ph-prog { margin-top: 0.9rem; max-width: 360px; } .ph-prog-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; } .ph-prog-bar i { display: block; height: 100%; background: var(--rose-grad); border-radius: 999px; transition: width 0.8s ease; } .ph-prog small { color: var(--muted); font-size: 0.74rem; display: block; margin-top: 0.35rem; } /* Kariyer istatistikleri: 9 kart akıcı sığsın */ #careerStats { grid-template-columns: repeat(4, 1fr); } /* İlerleme + rekorlar yan yana — masaüstünde iki sütun, mobilde alt alta (mobil yığma, .split medya kuralı tarafından sağlanır). */ .profile-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; margin-bottom: 0.5rem; } .profile-split .split-col { min-width: 0; } /* İlerleme kartı */ .prog-card { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 1.3rem; } .prog-row { display: flex; flex-direction: column; gap: 0.5rem; } .prog-top { display: flex; align-items: baseline; gap: 0.5rem; } .prog-top b { font-family: var(--font-display); font-size: 1.05rem; } .prog-ic { font-size: 1.05rem; } .prog-meta { color: var(--muted); font-size: 0.78rem; margin-left: auto; } .prog-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; } .prog-bar i { display: block; height: 100%; background: var(--rose-grad); border-radius: 999px; transition: width 0.8s ease; } .prog-sub { color: var(--muted); font-size: 0.8rem; } .prog-sub b { color: var(--rose-3); font-family: var(--font-display); } /* Kişisel rekorlar */ .records-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.7rem; margin-bottom: 0.5rem; } .record-empty { border-style: dashed; opacity: 0.85; } .record-empty .record-ic { background: rgba(255,255,255,0.04); border-color: var(--line-2); } .record-empty .record-body b { color: var(--muted); font-size: 0.92rem; } .record { display: flex; align-items: center; gap: 0.9rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1.1rem; } .record-ic { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.25rem; background: var(--rose-soft); border: 1px solid var(--rose-line); } .record-body b { font-family: var(--font-display); font-size: 1.02rem; display: block; } .record-body small { color: var(--muted); font-size: 0.76rem; } /* Aktivite zaman çizelgesi */ .timeline { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem 0.4rem; margin-bottom: 0.5rem; } .tl-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line); } .tl-row:last-child { border-bottom: 0; } .tl-ic { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.1rem; background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); } .tl-body { flex: 1; min-width: 0; } .tl-body b { font-size: 0.9rem; display: block; } .tl-body small { color: var(--muted); font-size: 0.76rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-meta { text-align: right; flex-shrink: 0; } .tl-amt { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; } .tl-amt.pos { color: var(--green); } .tl-amt.neg { color: var(--rose-3); } .tl-time { color: var(--muted-2); font-size: 0.72rem; } /* Başarım vitrini */ .ach-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .ach-count { font-size: 0.72rem; font-weight: 700; padding: 0.32rem 0.7rem; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); color: var(--muted); } .ach-count.earned { background: rgba(52,211,153,0.14); color: var(--green); border-color: transparent; } .ach-count.prog { background: var(--rose-soft); color: var(--rose-3); border-color: transparent; } .ach-count.total { margin-left: auto; } .ach-group { margin-bottom: 1.1rem; } .ach-gh { font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6rem; } .ach-earned { border-color: var(--rose-line); } .ach-inProgress { opacity: 1; } .ach-locked { opacity: 0.5; } /* STEP 46 — başarım özeti (X / N açıldı) */ .ach-summary { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.8rem; color: var(--lace, #efeae6); } .ach-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 0.6rem 0 0.3rem; } .ach-bar i { display: block; height: 100%; background: var(--rose-grad); border-radius: 999px; } .ach-pct { font-size: 0.7rem; color: var(--rose-3); font-weight: 700; } .ach-flag { display: inline-block; margin-top: 0.5rem; font-size: 0.68rem; font-weight: 800; color: var(--green); } /* Üyelik */ .member-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; } .member-cell { display: flex; align-items: center; gap: 0.8rem; } .member-ic { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.2rem; background: var(--rose-soft); border: 1px solid var(--rose-line); } .member-cell small { color: var(--muted); font-size: 0.74rem; display: block; } .member-cell b { font-family: var(--font-display); font-size: 0.95rem; } @media (max-width: 920px) { #careerStats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { #careerStats { grid-template-columns: repeat(2, 1fr); } .member-card { grid-template-columns: 1fr; gap: 0.8rem; } .ach-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ 🎯 SONRAKI HEDEFLER (goal-driven) + boş-durum ============================================================ */ .goals { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--rose-line); border-radius: var(--radius); padding: 1.2rem 1.3rem; margin-bottom: 0.5rem; } .goals-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .goals-ring { --pct: 0; width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(var(--rose-2) calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0); display: grid; place-items: center; position: relative; } .goals-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--panel); } .goals-ring span { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; color: var(--rose-3); } .goals-head-text { flex: 1; min-width: 0; } .goals-head-text small { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; } .goals-motivation { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.35; margin-top: 0.15rem; } .goals-list { display: flex; flex-direction: column; gap: 0.6rem; } .goal { display: flex; align-items: center; gap: 0.8rem; color: inherit; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; transition: border-color 0.2s ease, transform 0.14s ease, background 0.2s ease; } .goal-link { cursor: pointer; } .goal-link:hover { border-color: var(--rose-line); background: var(--rose-soft); transform: translateX(2px); } .goal-ic { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.05rem; background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); } .goal-body { flex: 1; min-width: 0; } .goal-body b { font-size: 0.9rem; display: block; } .goal-body small { color: var(--muted); font-size: 0.76rem; display: block; } .goal-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 0.45rem; } .goal-bar i { display: block; height: 100%; background: var(--rose-grad); border-radius: 999px; } .goal-pct { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--rose-3); flex-shrink: 0; } .goal-go { color: var(--rose-3); font-size: 1.2rem; flex-shrink: 0; } .goal-done { border-color: var(--rose-line); } /* Boş-durum: anlamsız sıfır yerine yönlendirici metin */ .stat-empty { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; color: var(--rose-3); line-height: 1.3; display: inline-block; } /* ---------- Support ---------- */ .support-card { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; text-align: center; } .support-card h3 { font-size: 1.5rem; margin-bottom: 0.4rem; } .support-card > p { color: var(--muted); margin-bottom: 1.3rem; } .support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; max-width: 560px; margin-inline: auto; } .support-item { display: flex; align-items: center; gap: 0.6rem; justify-content: center; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.8rem; font-size: 0.85rem; font-weight: 600; transition: border-color 0.18s ease; } .support-item:hover { border-color: var(--rose-line); } /* ---------- Duyuru Bandı ---------- */ .announce-bar { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.1rem; padding: 0.6rem 0.9rem; border: 2px solid transparent; border-radius: var(--radius-sm); /* Aurora şablonu: siyah merkez + kayan renkli gradient çerçeve. */ background: linear-gradient(#0a0a0b, #0a0a0b) padding-box, linear-gradient(90deg, #ef4444, #fb7185, #8b5cf6, #3b82f6, #ef4444) border-box; background-size: 100% 100%, 200% 100%; background-position: 0 0, 0% 50%; animation: btnAuroraPan 6s linear infinite; box-shadow: 0 8px 28px -16px rgba(139, 92, 246, 0.5); } @media (prefers-reduced-motion: reduce) { .announce-bar { animation: none; } } .announce-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #f4f4f6; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); } .announce-tag { flex-shrink: 0; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: #f4f4f6; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); padding: 0.2rem 0.55rem; border-radius: 999px; } /* Ticker penceresi — taşan metni kırpar; kenarlarda yumuşak solma maskesi. */ .announce-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } /* Akan şerit: duyuru metni + sponsor logoları AYNI track'te, 2 kez art arda basılır (renderAnnounceTrack) → dikişsiz döngü (%50 noktasında sıfırlanır). */ .announce-track { display: flex; align-items: center; gap: 2.2rem; width: max-content; animation: announce-marquee 30s linear infinite; } .announce-bar:hover .announce-track { animation-play-state: paused; } @keyframes announce-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .announce-text-item { display: inline-block; white-space: nowrap; flex-shrink: 0; font-size: 0.84rem; font-weight: 600; color: #f4f4f6; } .announce-sponsor-item { flex-shrink: 0; height: 20px; display: flex; align-items: center; opacity: 0.75; transition: opacity 0.2s ease; } .announce-sponsor-item:hover { opacity: 1; } .announce-sponsor-item img { height: 100%; width: auto; object-fit: contain; } .announce-sponsor-item .sponsor-mono { font-family: var(--font-display); font-weight: 800; font-size: 0.82rem; color: #f4f4f6; white-space: nowrap; } .announce-btn { flex-shrink: 0; font-size: 0.76rem; font-weight: 700; color: var(--on-rose, #fff); background: var(--rose-grad); border-radius: 999px; padding: 0.34rem 0.85rem; box-shadow: var(--shadow-rose); transition: filter 0.18s ease; } .announce-btn:hover { filter: brightness(1.06); } /* ---------- Footer ---------- */ /* IKI SUTUN: solda marka/yasal/sayfalar, sagda iletisim/baglanti/sosyal. Sag sutun icerigi kadar yer alir (auto), sol kalani doldurur - sag bombossa sol tum genisligi kullanir, ortada bosluk kalmaz. */ .foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1.2rem 2.4rem; border-top: 1px solid var(--line); padding-top: 1.4rem; margin-top: 2.5rem; } .foot-sol { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; } .foot-marka { display: flex; align-items: center; gap: 0.9rem; } .foot-sag { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; max-width: 360px; } .foot p { font-size: 0.74rem; color: var(--muted-2); } .foot-baslik { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 0.4rem; } .foot-metin { font-size: 0.78rem; color: var(--muted); line-height: 1.55; } /* Gomulu baglanti: metnin icinde durur, tiklanabilir oldugu bell olsun. */ .foot-metin a { color: var(--text); border-bottom: 1px solid var(--rose-line); } .foot-metin a:hover { color: var(--rose-3); border-bottom-color: var(--rose-3); } .foot-links { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; } .foot-link { font-size: 0.78rem; font-weight: 600; color: var(--muted); transition: color 0.18s ease; } .foot-link:hover { color: var(--text); } .foot-social { display: flex; flex-wrap: wrap; gap: 0.5rem; } .foot-social-link { font-size: 0.74rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.32rem 0.72rem; transition: border-color 0.18s ease, color 0.18s ease; } .foot-social-link:hover { border-color: var(--rose-line); color: var(--text); } .age-badge { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border: 2px solid var(--rose); color: var(--rose-3); border-radius: 50%; font-weight: 700; font-size: 0.8rem; } /* Footer içerik sayfası linkleri (panelde aktif olanlar) */ .foot-pages { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; } /* Dar ekranda iki sutun alt alta - sag sutun genislik sinirini birakir. */ @media (max-width: 760px) { .foot { grid-template-columns: minmax(0, 1fr); } .foot-sag { max-width: none; } } .foot-page-link { font-size: 0.78rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: color 0.18s ease; } .foot-page-link:hover { color: var(--rose-3); } /* İçerik sayfası görünümü (Hakkımızda/Kurallar/…) — tema renkleri, mobil uyumlu */ .page-doc { max-width: 760px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.2rem, 4vw, 2.4rem); } /* SAYFA KURUCU ile kurulmuş sayfa: kart kabuğu YOK. Neden: kurucudaki tuval sayfanın tam genişliği kadar; burada 760px'lik dar bir kartın içine sokulunca banner/kart ızgarası küçülüyor ve "panelde gördüğün = sitede çıkan" sözü bozuluyordu. Blok sayfası ana sayfayla AYNI genişlikte akar; kutulanma ihtiyacı olan blok (kart, uyarı, SSS) kendi kutusunu zaten çiziyor. */ .page-doc--blocks { max-width: none; margin: 0; background: none; border: 0; border-radius: 0; padding: 0; } /* Sayfa adı üst barda (#pageTitle) zaten yazıyor — kartın içinde ikinci kez tekrar ediyordu. Tek başlık kalsın. */ .page-doc-title { display: none; } .page-doc-body { color: var(--muted); font-size: 0.95rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; } /* ============================================================ REWARD POPUP ============================================================ */ .reward-pop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); animation: fadeIn 0.25s ease; } /* [hidden] must win over display:grid — otherwise the modal stays open */ .reward-pop[hidden] { display: none !important; } @keyframes fadeIn { from { opacity: 0; } } /* Close (X) button — top-right of the card */ .reward-x { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; line-height: 1; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2); color: var(--muted); cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .reward-x:hover { background: var(--rose-soft); color: var(--rose-3); border-color: var(--rose-line); } .reward-card { position: relative; text-align: center; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--rose-line); border-radius: var(--radius-lg); padding: 2.2rem 2.4rem; max-width: 90%; width: 340px; box-shadow: var(--shadow); animation: popIn 0.4s cubic-bezier(0.18, 0.9, 0.3, 1.4); } @keyframes popIn { from { transform: scale(0.8); opacity: 0; } } .reward-burst { position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden; pointer-events: none; background: radial-gradient(circle at 50% 30%, rgba(var(--rose-rgb),0.3), transparent 60%); } .reward-emoji { font-size: 3.4rem; display: block; animation: bounce 0.6s ease; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } } .reward-card h4 { font-size: 1.3rem; margin: 0.6rem 0 0.3rem; } .reward-card p { color: var(--rose-3); font-weight: 700; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 1.3rem; } /* ---------- Bakiye etkinliği: sponsor kullanıcı adı penceresi ---------- */ .spid-card { text-align: left; width: 380px; padding: 2rem 1.8rem 1.6rem; } .spid-card h4 { margin: 0.6rem 0 0.35rem; font-size: 1.15rem; } .spid-pop-logo { display: flex; align-items: center; height: 34px; } .spid-pop-logo img { max-height: 34px; max-width: 150px; object-fit: contain; } .spid-pop-logo .ev-mono { font-size: 0.9rem; font-weight: 800; letter-spacing: .04em; color: var(--rose-3); } .spid-card .spid-pop-text { color: var(--muted); font-weight: 500; font-family: inherit; font-size: 0.92rem; line-height: 1.55; margin: 0 0 0.9rem; } .spid-card .spid-pop-text b { color: var(--text); } .spid-card .auth-input { width: 100%; margin: 0 0 0.5rem; } .spid-pop-hint { display: block; color: var(--muted); font-size: 0.78rem; line-height: 1.45; margin-bottom: 1rem; } .spid-card .btn { width: 100%; } /* ---------- Toast ---------- */ #toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(20px); background: var(--panel-3); border: 1px solid var(--rose-line); color: var(--text); padding: 0.75rem 1.2rem; border-radius: 12px; font-size: 0.86rem; font-weight: 600; box-shadow: var(--shadow); z-index: 400; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; max-width: 90%; text-align: center; } /* ============================================================ KİMLİK KAPISI (Telegram giriş ekranı) + durum görünürlüğü ============================================================ */ .auth-gate { /* 14 Eyl 2026: pop-up (z 9000) giriş penceresinin üstüne biniyordu, Telegram düğmesi tıklanamıyordu. Giriş penceresi pop-up'ın da üstünde durur. */ position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 1.5rem; /* Modal: arkadaki site görünsün (yarı-saydam + blur) — daha modern. */ background: rgba(6, 5, 12, 0.72); backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1); animation: fadeIn 0.25s ease; } .auth-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% -5%, rgba(139,92,246,0.20), transparent 55%), radial-gradient(circle at 85% 95%, rgba(59,130,246,0.12), transparent 50%); } .auth-card { position: relative; z-index: 1; text-align: center; width: 100%; max-width: 420px; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.4rem 2rem; box-shadow: var(--shadow); } .auth-chip { width: 58px; height: 58px; font-size: 1.7rem; border-radius: 17px; margin: 0 auto 1rem; } .auth-title { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.02em; } .auth-lead { color: var(--muted); font-size: 0.92rem; margin: 0.7rem 0 1.6rem; line-height: 1.6; } .auth-lead b { color: var(--text); } /* Giriş düğmeleri — Google birincil (rose), Telegram ikincil (ghost). */ .auth-btn { width: 100%; gap: 0.6rem; } .auth-btn + .auth-btn { margin-top: 0.7rem; } .g-ic, .tg-ic { flex-shrink: 0; } .auth-note { display: block; color: var(--muted-2); font-size: 0.72rem; margin-top: 1.1rem; line-height: 1.5; } /* E-posta/şifre giriş-kayıt formu (STEP 27 Adım 4) */ .auth-form { display: flex; flex-direction: column; gap: 0.6rem; text-align: left; } .auth-input { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 0.8rem 0.95rem; color: var(--text); font-size: 0.92rem; transition: border-color 0.18s ease; } .auth-input::placeholder { color: var(--muted-2); } .auth-input:focus { outline: none; border-color: var(--rose-line); } .auth-error { color: var(--rose-3); font-size: 0.8rem; margin: 0.1rem 0 0; } .auth-form .auth-btn { margin-top: 0.3rem; } .auth-switch { font-size: 0.84rem; color: var(--muted); margin: 0.9rem 0 0; } .auth-link { color: var(--rose-3); font-weight: 700; background: none; border: none; cursor: pointer; padding: 0; font-size: inherit; } .auth-link:hover { text-decoration: underline; } .auth-divider { display: flex; align-items: center; gap: 0.7rem; margin: 1.2rem 0 0.9rem; color: var(--muted-2); font-size: 0.74rem; } .auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); } .auth-soon { opacity: 0.6; } .auth-soon-tag { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-left: 0.3rem; } /* ============================================================ BAĞLI HESAPLAR (connected accounts) — profil ============================================================ */ .connected-accounts { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.5rem; } .conn-row { display: flex; align-items: center; gap: 0.9rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1.1rem; } .conn-row.on { border-color: var(--rose-line); } .conn-ic { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #fff; border: 1px solid var(--line-2); } .conn-ic.conn-google { background: linear-gradient(135deg, #4285f4, #34a853 60%, #ea4335); } .conn-ic.conn-telegram { background: linear-gradient(135deg, #2aabee, #229ed9); } /* Sağlayıcı ikonu artık emoji değil çizgi SVG (bkz. C.icon) — kutunun içinde ortalanıp beyaz kalsın. */ .conn-ic svg { width: 21px; height: 21px; color: #fff; } .conn-info { flex: 1; min-width: 0; } .conn-info b { font-size: 0.95rem; display: block; } .conn-info small { color: var(--muted); font-size: 0.78rem; } .conn-status { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.24rem 0.6rem; border-radius: 999px; } .conn-status.on { background: rgba(52, 211, 153, 0.14); color: var(--green); } .conn-status.off { background: rgba(255, 255, 255, 0.06); color: var(--muted); } .conn-act { flex-shrink: 0; } @media (max-width: 560px) { .conn-status { display: none; } } /* Kilitli görev (sağlayıcı gerektiren) görünümü */ .task.locked { opacity: 0.9; border-color: var(--rose-line); } .task.locked .task-ic { filter: grayscale(0.2); } /* Avatar görseli (Telegram fotoğrafı) */ .av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .usercard-av, .appbar-av, .ph-av { overflow: hidden; font-family: var(--font-display); font-weight: 800; } /* Durum kontrolü: bekleme / oturum kapalı / oturum açık */ /* ---- AÇILIŞ ZIPLAMASI (2026-08-24, ölçüldü) ---- Buradaki kural KİRİKTI: iki auth-pending seçicisi ile .auth-card tek bildirim bloğuna yapışmıştı, yani auth-pending süresince .shell'e niyet edilmeyen bir position:relative veriliyordu (yerleşmiş hale geçince kayboluyordu — iki durum arasında tutarsızlık). Bekleme hali GÖRSEL OLARAK İYİ (hero + menü + duyuru hazır), o yüzden kabuk gizlenmiyor. Sadece iki şey bastırılıyor: footer — içerik gelmeden 721px'te duruyor, sonra 1863px'e uçuyordu oturum öğeleri — girişsizken bir an "Misafir / Çıkış Yap" görünüyordu */ body.auth-pending .foot { display: none; } body.auth-pending #userCard, body.auth-pending #topbarPoints, body.auth-pending #topbarPointsMobile, body.auth-pending #logoutBtn, body.auth-pending #navLoginBtn, body.auth-pending #navRegisterBtn { display: none; } /* Auth modal ek öğeleri (açık gezinme geçişi) */ .auth-card { position: relative; } .auth-x { position: absolute; top: .7rem; right: .8rem; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid var(--line-2); font-size: .9rem; transition: background .15s, color .15s; } .auth-x:hover { background: rgba(255,255,255,.1); color: var(--text); } .auth-tg { display: flex; flex-direction: column; align-items: center; gap: .5rem; min-height: 44px; margin-bottom: .3rem; } .auth-tg-hint { font-size: .72rem; color: var(--muted-2, var(--muted)); text-align: center; margin: 0; } #navLoginBtn { justify-content: center; } body.auth-pending .auth-gate { display: none !important; } /* AÇIK GEZİNME: giriş olmasa da site (shell/topbar/nav) GÖRÜNÜR. Auth kartı artık bir MODAL — sadece .open iken açılır (Giriş Yap / kazanç aksiyonu). */ .auth-gate { display: none; } /* Açık: grid + place-items:center (base kuralla aynı) → TAM ORTALANIR. */ .auth-gate.open { display: grid; } /* Girişsizken kişisel chrome öğeleri gizli (bakiye/çıkış); "Giriş Yap" görünür. */ body.logged-out #userCard, body.logged-out #topbarPoints, body.logged-out #topbarPointsMobile, /* 15 Eyl 2026: mobil rozet misafirde "0" gösteriyordu (müşteri) */ body.logged-out #logoutBtn { display: none !important; } body:not(.logged-out) #navLoginBtn, body:not(.logged-out) #navRegisterBtn { display: none !important; } /* ============================================================ MOBILE CHROME ============================================================ */ /* Burger yalnızca dar ekranda görünür (bkz. @media max-width:900px altta) */ .burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; padding: 0; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--text); cursor: pointer; } .burger span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: 0.25s; } .burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .topbar-points { display: flex; align-items: center; gap: 0.4rem; background: var(--panel-2); border: 1px solid var(--rose-line); border-radius: 999px; padding: 0.45rem 0.85rem; } .topbar-points b { font-family: var(--font-display); font-size: 0.9rem; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1080px) { .statgrid, .profile-stats { grid-template-columns: repeat(2, 1fr); } .give-grid, .shop-grid, .event-rail, .task-rail, .ladder { grid-template-columns: repeat(2, 1fr); } .ach-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding: 1.8rem; } .hero-title { font-size: 2.1rem; } .split { display: grid; grid-template-columns: 1fr; gap: 0; } } /* Mobile */ /* Dar ekran: sidebar sola açılan ÇEKMECEye döner, üstte ince mobil bar kalır. shell.js #navPanel'e .open ekliyor — sınıf/ID aynı kaldığı için JS değişmedi. */ @media (max-width: 900px) { .shell { display: block; } .mobile-bar { position: sticky; top: 0; z-index: 60; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem; padding: 0.6rem 0.9rem; background: rgba(7, 7, 7, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .mobile-bar .logo { justify-self: center; } .mobile-bar .logo-text { font-size: 1.05rem; } .burger { display: inline-flex; } .sidebar { position: fixed; top: 0; left: 0; z-index: 65; width: min(84%, 320px); height: 100vh; padding: 1.2rem 1rem 1.5rem; background: var(--bg-2); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform 0.3s ease; } .sidebar.open { transform: translateX(0); } .top-link { padding: 0.7rem 0.8rem; font-size: 0.92rem; } } @media (max-width: 720px) { .main { padding: 0 0.9rem 6rem; } .view { padding-top: 1rem; } .statgrid, .profile-stats, .ach-grid, .task-rail, .task-grid, .give-grid, .give-list, .event-grid, .event-rail, .ladder { grid-template-columns: 1fr; } /* .shop-grid bilinçli olarak yok: telefonda market 2 sütun (yukarıda, 520px kuralı). */ /* Yalnızca ana sayfa ÖNİZLEME rail'leri yatay kaydırılır (swipe). Tam sayfalar (Çekilişler, Market, Etkinlikler, Sponsorlar) DİKEY listelenir → keşfedilebilirlik + ekran başına daha çok içerik. */ .task-rail, .event-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; margin-inline: -0.9rem; padding-inline: 0.9rem; } .task-rail > *, .event-rail > * { scroll-snap-align: start; } .statgrid { grid-template-columns: repeat(2, 1fr); } .ach-grid { grid-template-columns: repeat(2, 1fr); } .podium { gap: 0.5rem; } .pod { padding: 0.9rem 0.5rem; } .pod-av { width: 44px; height: 44px; font-size: 1.3rem; } .pod-1 .pod-av { width: 52px; height: 52px; } .pod-name { font-size: 0.8rem; } .hero-title { font-size: 1.9rem; } .pool-value { font-size: 2.1rem; } } /* ============================================================ MOBİL UX İNCE AYAR — yoğunluk, dokunma hedefleri, sayfa odaklı (tasarım dili korunur: siyah zemin · beyaz tipografi · gül vurgu) ============================================================ */ @media (max-width: 720px) { /* Home hero: aşırı dikey alanı kıs → ekran başına daha çok içerik */ .hero { padding: 1.4rem; gap: 1rem; margin-bottom: 1rem; } .hero-title { font-size: 1.7rem; margin: 0.7rem 0 0.5rem; } .hero-lead { font-size: 0.92rem; margin-bottom: 1rem; } .hero-cta { margin-bottom: 1rem; } .hero-cta .btn { flex: 1 1 auto; } /* CTA'lar tam genişliğe yayılır (başparmak) */ .hero-pool { padding: 1.1rem; } .pool-value { font-size: 1.9rem; } /* Dokunma hedefleri: küçük buton / sekme / çip ≥ ~40px yükseklik */ .btn-sm { padding: 0.55rem 1rem; } .seg { flex-wrap: wrap; } .seg-btn { padding: 0.55rem 1.05rem; } /* Leaderboard "Senin Durumun": 4'lü istatistik dar ekranda 2'li, sıralama kutusu rakamı taşmasın */ .standing-stats { grid-template-columns: repeat(2, 1fr); } .rank-tile b { font-size: 1.4rem; } /* Sponsor mobil kompaktlığı için ayrı "SPONSORLAR — MOBİL" bloğuna bak. */ /* Profil hedef satırları: rahat dokunma yüksekliği */ .goal { padding: 0.8rem 0.9rem; } } /* Küçük telefonlar: istatistik/başarım/rekor kartları 1'li yerine 2'li kalsın (ekran başına daha çok bilgi, daha az kaydırma). */ @media (max-width: 420px) { .statgrid, .ach-grid { grid-template-columns: repeat(2, 1fr); } } /* Az-hareket tercihi açık ziyaretçi — SAKİN ama CANLI bir site görmeli. Eskiden burada şu vardı: *, *::before, *::after { animation: none !important; transition: none !important; } Niyeti doğruydu, sonucu ölü bir siteydi: hiçbir geçiş yok, hero slaytları ışınlanıyor, ziyaretçi "site bozuk" sanıyor. Gerçek bir tarayıcıda ölçüldü (2026-08-21): 0 animasyon, 0 geçiş. Erişilebilirlik kılavuzu "hiç hareket olmasın" demez; RAHATSIZ EDİCİ hareket olmasın der. Ayrım: döngüye giren/dikkat çeken hareket kapanır, yön gösteren kısa geçiş kalır. */ @media (prefers-reduced-motion: reduce) { /* 1) Hiçbir şey DÖNGÜYE girmesin. */ *, *::before, *::after { animation-iteration-count: 1 !important; scroll-behavior: auto !important; } /* 2) Amacı zaten "sürekli hareket" olanlar tamamen dursun. */ body::before, .announce-bar, .announce-track, .btn-aurora, .bonus-ping, .logo-track, .eh2, .eh2-pill { animation: none !important; } /* Şerit durunca baştan görünsün, kenar maskesi metni kırpmasın. */ .announce-track { transform: none !important; } .announce-viewport { -webkit-mask-image: none; mask-image: none; } /* 3) Slaytlar IŞINLANMASIN: yandan kayma yerine yumuşak solma. Kayma = yön değiştiren büyük hareket (rahatsız eder). Solma = yerinde opaklık değişimi (rahatsız etmez, kopukluk olmaz). */ .hero-slide.active, .showcase-slide.active { animation: solmaGiris 260ms ease both !important; } .hero-slide.leaving, .showcase-slide.leaving { display: none !important; } /* 4) `transition`a DOKUNULMUYOR — kapatılınca buton/kart geçişleri de ölüyordu; bu geçişler kısa ve yön değiştirmiyor. */ } @keyframes solmaGiris { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ v1 HIZLI ÇIKIŞ — ekonomi modülleri gizli (config.js → launch.economyEnabled = false; body'ye economy-off eklenir). GERİ AÇMAK: launch.economyEnabled = true yap → body'de economy-off olmaz, bu kuralların hiçbiri uygulanmaz, tüm modüller aynen geri gelir. Yalnızca GÖRSEL gizleme; markup/JS silinmedi. ============================================================ */ body.economy-off .side-nav [data-link="tasks"], body.economy-off .side-nav [data-link="leaderboard"], body.economy-off .side-nav [data-link="giveaways"], body.economy-off .side-nav [data-link="marketplace"], body.economy-off .side-nav [data-link="events"], body.economy-off .side-nav [data-link="profile"], body.economy-off .side-nav [data-link="levels"], body.economy-off [data-economy-home], /* v1 girişsiz mod: giriş ekranı + kullanıcı (bakiye/seviye) kartı + çıkış gizli */ body.economy-off #authGate, body.economy-off #userCard, body.economy-off #topbarPoints, body.economy-off #topbarPointsMobile, body.economy-off #logoutBtn, /* v1: hero'daki ödül havuzu kutusu (€0 + ölü "Çekilişe Katıl") gizli */ body.economy-off .hero-pool { display: none !important; } /* Ödül havuzu gizlenince hero tek sütuna insin (metin tam genişlik). */ body.economy-off .hero { grid-template-columns: 1fr; } /* Vitrin slaytı varsa hero 2 sütun; sağ sütun büyük (görsele geniş alan). */ body.economy-off .hero.has-showcase { grid-template-columns: 1fr 1fr; } /* ============================================================ HOMEPAGE = mevcut tasarım (ekonomi AÇIK olsa da). Ekonomi açılınca beliren ana sayfa önizlemeleri (prize-pool + görev/ çekiliş/oyuncu/etkinlik önizleme blokları) ana sayfada GİZLİ tutulur — bu içerikler zaten nav'daki kendi sayfalarında (Görevler/Liderlik/Market/ Çekilişler). Böylece ana sayfa her durumda cilalı haliyle aynı görünür. (Sonradan redesign edilip geri getirilebilir — yalnız görsel gizleme.) ============================================================ */ .hero-pool { display: none !important; } [data-economy-home] { display: none !important; } .hero { grid-template-columns: 1fr; } .hero.has-showcase { grid-template-columns: 1fr 1fr; } /* STEP 57 — Vitrin (hero carousel): öne çıkan bonus görselleri 3 sn'de bir döner. */ /* FLEXİBLE: sabit kutu YOK — görselin TAM hali gösterilir (kırpma/bar yok), yükseklik görsele göre uzar. Boyut panelden ayarlanır (--sc → görsel genişliği, %100 = sütun genişliği). Yalnız AKTİF slayt akışta + tıklanabilir → link doğru slayta gider (görünmeyen slaytlar display:none, tıklanamaz). */ .hero-showcase { position: relative; align-self: center; overflow: hidden; /* Kenar fade'i HER ZAMAN açık: görsel hem dururken hem kayarken aynı yumuşak sağ/sol kenara sahip olur → tutarlı, kesim hissi yok. */ -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%); } .showcase-track { position: relative; } .showcase-slide { display: none; } .showcase-slide.active { display: block; animation: scSlideIn 1s cubic-bezier(0.45, 0, 0.25, 1); } /* Çıkan slayt: aktifin üzerine bindirilir, yeni slaytla bitişik şerit gibi tam genişlik boyunca sola kayar (overflow kırpar, fade yok). */ .showcase-slide.leaving { display: block; position: absolute; top: 0; left: 0; right: 0; pointer-events: none; animation: scSlideOut 1s cubic-bezier(0.45, 0, 0.25, 1) forwards; } @keyframes scSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes scSlideOut { from { transform: translateX(0); } to { transform: translateX(-100%); } } .showcase-slide a { display: block; } .showcase-slide img { display: block; height: auto; width: calc(var(--sc, 1) * 100%); max-width: 100%; margin: 0 auto; border-radius: var(--radius-lg); } @media (max-width: 720px) { body.economy-off .hero.has-showcase { grid-template-columns: 1fr; } .hero-showcase { margin: 0.5rem 0 0; } } /* Ham foto: görselin üstündeki bonus yazı şeridi (caption) gizli — alttaki "black bar" buydu. Görselde zaten yazı baskılı olduğundan gerek yok. */ .showcase-cap { display: none; } .showcase-dots { position: absolute; bottom: 0.7rem; right: 0.85rem; display: flex; gap: 0.35rem; z-index: 2; } .showcase-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .showcase-dot.active { background: var(--rose); transform: scale(1.25); } /* ============================================================ ÇARKI — ücretsiz günlük çark ============================================================ */ /* Dış aura halkası — sitenin aurora dilinde yumuşak glow */ @keyframes wheelAura { to { transform: rotate(360deg); } } /* İnce dilim ayraç çizgileri (radial) */ /* İç yazı — diskle AYNI süre/eğride ters döner → dönerken bile hep dik durur. */ .wsl-txt { display: inline-block; transition: transform 5s cubic-bezier(.12,.7,.15,1); will-change: transform; } /* ============================================================ OYUNLARI — bahisli çark + zar ============================================================ */ .bet-quick { display: flex; gap: .35rem; } .bet-quick .btn { min-width: 42px; padding: .45rem .6rem; } /* Bahis çarkı — serbest çarkla aynı görsel dil, multiplier renkli */ /* Zar */ /* ============================================================ OYUNLAR — PREMIUM cila (gloss + metalik rim + chip bahis) ============================================================ */ /* Bahis chip'leri — altın jeton hissi */ .bet-chips { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; max-width: 520px; margin: 1.4rem auto 0; } .bet-chip { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; padding: .6rem 1.1rem; border-radius: 999px; font-weight: 800; font-size: .95rem; color: #f4e4b8; background: radial-gradient(circle at 35% 30%, #3a3252, #1a1730); border: 2px solid rgba(244,200,105,.35); box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.12); transition: transform .12s, border-color .15s, box-shadow .15s; } .bet-chip:hover { transform: translateY(-2px); border-color: rgba(244,200,105,.6); } .bet-chip.active { color: #1a1408; border-color: #f4c869; background: radial-gradient(circle at 35% 30%, #ffe9a8, #f4c869); box-shadow: 0 6px 18px -4px rgba(244,200,105,.6), inset 0 1px 2px rgba(255,255,255,.5); } .bet-chip .kp-dot { width: 8px; height: 8px; } /* Bahis çarkı — gloss + metalik çok-katlı rim */ /* Cam parlaması — üst-sol beyaz highlight (3D his) */ /* Cıvata halkası — rim çevresine eşit aralıklı ışık noktaları */ /* Spin butonu — daha büyük, parlak */ #wheelPlayBtn, #dicePlayBtn { font-size: 1.05rem; padding: .95rem 2.2rem; letter-spacing: .04em; box-shadow: 0 12px 30px -8px rgba(244,63,94,.5); } /* Oyun lobisi — 2 kart (seç-oyna) */ /* Stake tarzı kompakt kart ızgarası — küçük, dik, yoğun. */ @media (max-width: 560px) { .games-lobby { grid-template-columns: repeat(2, 1fr); gap: .8rem; } } /* İllüstrasyon arkası yumuşak koyu spot → her renkte kontrast (çark/zar kaybolmasın) */ /* Oyun temaları */ /* EVRENSEL hover: her oyunun illüstrasyonu büyür + kalkar + gölge derinleşir */ /* Oyuna özel hover hareketleri (illüstrasyonun karakterine göre) */ /* Zar hover'da hafif sallanır, Yazı-Tura döner, Crash roketi kalkar, Slot çevrilir */ @keyframes gcWobble { 0%,100% { transform: scale(1.08) rotate(0); } 25% { transform: scale(1.1) rotate(-7deg); } 75% { transform: scale(1.1) rotate(7deg); } } @keyframes gcNudge { 0% { transform: scale(1.05) translateY(-6px); } 60% { transform: scale(1.12) translateY(2px); } 100% { transform: scale(1.1) translateY(-3px); } } @keyframes gcPulse { 0%,100% { transform: scale(1.08); } 50% { transform: scale(1.16); filter: drop-shadow(0 0 14px rgba(79,240,208,.7)); } } #gamesPlay { display: flex; flex-direction: column; align-items: center; } #gamesPlay[hidden] { display: none !important; } /* ============ YENİ OYUNLAR ============ */ /* Kart temaları */ /* KRİTİK: .btn display'i [hidden]'ı eziyordu → Başlat/Çek gizlenmiyordu. */ .btn[hidden] { display: none !important; } /* Ortak aksiyon + çek butonu */ .btn-cash { background: linear-gradient(135deg, #22c55e, #15803d); color: #eafff1; border: none; box-shadow: 0 8px 22px -8px rgba(34,197,94,.6); } .btn-cash:hover { filter: brightness(1.08); } .btn-cash:disabled { opacity: .5; cursor: default; filter: none; } /* PLINKO */ /* MINES */ .mine-tile { aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--line-2); background: linear-gradient(160deg, #1a2130, #12161f); cursor: pointer; font-size: 1.7rem; display: grid; place-items: center; transition: transform .12s, background .15s, border-color .15s; } .mine-tile:not(.idle):not(.locked):hover { transform: translateY(-2px); border-color: rgba(34,197,94,.5); background: linear-gradient(160deg, #22303f, #161d29); } .mine-tile.idle { cursor: default; opacity: .5; } .mine-tile.open { background: radial-gradient(circle at 40% 30%, rgba(34,197,94,.28), rgba(34,197,94,.1)); border-color: rgba(34,197,94,.5); animation: minePop .25s ease; } .mine-tile.mine { background: radial-gradient(circle at 40% 30%, rgba(244,63,94,.32), rgba(244,63,94,.12)); border-color: rgba(244,63,94,.55); } .mine-tile.boom { animation: mineBoom .45s ease; } .mine-tile.locked { cursor: default; } @keyframes minePop { 0% { transform: scale(.7); } 100% { transform: scale(1); } } @keyframes mineBoom { 0%,100% { transform: scale(1); } 40% { transform: scale(1.28); } } /* CRASH */ /* ---- 5 yeni oyun kart temaları ---- */ /* LIMBO */ /* FLIP */ .flip-coin { width: 120px; height: 120px; border-radius: 50%; margin: 1rem auto; display: grid; place-items: center; font-size: 3rem; font-weight: 900; color: #8a5a12; background: radial-gradient(circle at 35% 30%, #fff7d6, #f4c869 60%, #b8862f); box-shadow: 0 12px 30px -8px rgba(244,200,105,.6), inset 0 2px 4px rgba(255,255,255,.5); transition: box-shadow .2s; } .flip-coin.spinning { animation: flipSpin .28s linear infinite; } .flip-coin.win { box-shadow: 0 0 0 4px rgba(34,197,94,.55), 0 12px 30px -8px rgba(34,197,94,.5); } .flip-coin.boom { box-shadow: 0 0 0 4px rgba(244,63,94,.5); filter: grayscale(.35); } @keyframes flipSpin { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } .flip-choose { display: flex; gap: .7rem; justify-content: center; margin-bottom: .5rem; } .flip-side { padding: .6rem 1.4rem; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); font-weight: 800; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .flip-side.active { border-color: #f4c869; background: rgba(244,200,105,.15); color: #f4c869; } /* KENO */ /* RULET */ @keyframes rSpin { 0%,100% { transform: scale(1); } 50% { transform: scale(.9); } } .rbet { padding: .55rem; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); font-weight: 800; font-size: .76rem; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .rbet.active { border-color: #22c55e; background: rgba(34,197,94,.16); color: #fff; } /* DRAGON TOWER */ /* ===== YENİ OYUNLAR — kart gradientleri ===== */ /* SLOT */ @keyframes slotSpin { 0% { transform: translateY(-45%); opacity: .35; } 50% { opacity: 1; } 100% { transform: translateY(45%); opacity: .35; } } /* DIAMONDS */ .diamonds-row { display: flex; gap: .55rem; justify-content: center; margin: 1.5rem auto .9rem; } .gem { font-size: 2.7rem; line-height: 1; color: #fff; transition: transform .2s, color .2s, opacity .2s; } @keyframes gemPop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } } /* BACCARAT */ .bbet { padding: .55rem 1rem; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); font-weight: 800; cursor: pointer; font-size: .85rem; transition: border-color .15s, background .15s, color .15s; } .bbet.active { border-color: #818cf8; background: rgba(129,140,248,.16); color: #c7d2fe; } /* HI-LO */ /* BLACKJACK */ /* ===== STAKE-TARZI OYUN LAYOUT — sol kontrol rayı + sağ büyük sahne ===== */ #gamesPlay { display: block !important; width: 100%; max-width: 1120px; margin: 0 auto; } .gp-shell { display: grid; grid-template-columns: 300px 1fr; gap: 1.1rem; width: 100%; align-items: stretch; } .gp-rail { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.14)); border: 1px solid var(--line-2); border-radius: 18px; padding: 1.1rem; display: flex; flex-direction: column; gap: .85rem; align-self: start; } .gp-rail-title { font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .gp-rail .bet-chips { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin: 0 !important; } .gp-stage-wrap { position: relative; border: 1px solid var(--line-2); border-radius: 18px; background: radial-gradient(130% 90% at 50% -10%, rgba(255,255,255,.04), transparent 55%), linear-gradient(180deg, #0d1017, #0a0c12); min-height: 520px; padding: 1.8rem 1.4rem; display: grid; place-items: center; overflow: hidden; } .gp-stage-wrap .btn-lg { min-width: 220px; font-size: 1.05rem; padding: .95rem 1.6rem; } /* kartları/taşları Stake gibi büyüt */ .gp-stage-wrap .gem { font-size: 3.8rem; } .gp-stage-wrap .diamonds-row { gap: .9rem; } .gp-stage-wrap .flip-coin { width: 150px; height: 150px; font-size: 3.8rem; } @media (max-width: 760px) { .gp-shell { grid-template-columns: 1fr; } .gp-stage-wrap { min-height: 400px; padding: 1.1rem; } } /* ===== ANA SAYFA CANLI ÖNİZLEMELER (nakit ödül / oyun / liderlik) ===== */ .home-previews { margin-top: 1.6rem; } .hp-cash { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .7rem; margin-bottom: 1.5rem; } .hp-cash-card { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: 1rem .7rem; border-radius: 14px; border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(0,0,0,.14)); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; } .hp-cash-card:hover { transform: translateY(-3px); border-color: rgba(244,200,105,.55); box-shadow: 0 14px 30px -14px rgba(244,200,105,.35); } .hp-cash-ic { font-size: 2rem; line-height: 1; } .hp-cash-name { font-weight: 800; font-size: .92rem; color: var(--text); } .hp-cash-price { font-size: .82rem; font-weight: 800; color: #f4c869; } @media (max-width: 560px) { .hp-games { gap: .5rem; } } /* Hero slaytında görsel varsa: solda metin, sağda görsel (2 sütun). (Üstteki tek-sütun kuralını ezmek için dosya sonunda tanımlı.) */ .hero.has-media { grid-template-columns: 1.4fr 1fr; align-items: center; } @media (max-width: 860px) { .hero.has-media { grid-template-columns: 1fr; } } /* Hero yüksekliği sabit — slaytta metin az olsa da kutu küçülmez. Görsel de kutuya tam oturur (kenar boşluğu kalmaz). */ .hero { min-height: 380px; align-content: center; } .hero-media { width: 100%; } .hero-slide img { width: 100%; height: auto; object-fit: cover; } @media (max-width: 860px) { .hero { min-height: 0; } } /* Hero görsel alanı SABİT boyutta — slayttan slayta zıplama olmaz, görsel kutuya tam oturur (kenarda boşluk kalmaz). */ .hero-media { height: 260px; } .hero-slide, .hero-slide img { height: 100%; } .hero-slide img { object-fit: cover; border-radius: var(--radius); } @media (max-width: 860px) { .hero-media { height: 190px; } } /* ---------- Sponsor kartı arka plan görseli (panelden) ---------- 14 Eyl 2026: alt kademelerde görsel görünmüyordu — .sponsor-head'in kendi opak zemini örtüyor, altta kalan kısım %50 + ağır perdeyle siliniyordu. Şimdi görsel tam kartı kaplar (yerleşim panelden: --sp-bg-size/--sp-bg-pos), baş kısımda net, gövdeye inince yazı okunsun diye koyulaşır. */ .sponsor.has-bg { position: relative; isolation: isolate; } .sponsor.has-bg::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--sp-bg); background-size: var(--sp-bg-size, cover); background-position: var(--sp-bg-pos, 50% 50%); background-repeat: no-repeat; } .sponsor.has-bg::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.30) 96px, rgba(9, 9, 12, 0.86) 150px, rgba(9, 9, 12, 0.94) 100%); } /* Çizgi yok: görselin ortasından geçen ayırıcı resmi bölüyordu (müşteri, 14 Eyl). */ .sponsor.has-bg .sponsor-head { background: transparent; border-bottom: 0; } /* "Sığdır" modunda görselin tamamı görünsün; yan boşluklar kart zemininde kalır. */ .sponsor.bg-contain.has-bg::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 96px, rgba(9, 9, 12, 0.86) 150px, rgba(9, 9, 12, 0.94) 100%); } /* ---------- Sponsor rozeti (etkinlik / parti kartı köşesi) ---------- */ .sp-badge { position: absolute; right: 0.55rem; bottom: 0.55rem; z-index: 3; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: rgba(0, 0, 0, 0.62); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(4px); } .sp-badge img { width: 100%; height: 100%; object-fit: contain; padding: 3px; } .sp-badge span { font-family: var(--font-display); font-weight: 800; font-size: 0.7rem; color: #fff; } /* Hero görseli: kırpma YOK — kutuya sığar ve ORTALANIR. */ .hero-media { display: grid; place-items: center; } .hero-slide { width: 100%; height: 100%; display: grid; place-items: center; } .hero-slide img { width: 100%; height: 100%; object-fit: contain; object-position: center; } /* ============================================================ İKİ ŞERİT 1) .announce-bar (aurora) → hero'nun ÜSTÜNDE, içinde YALNIZ metin 2) .logo-bar (beyaz) → hero'nun ALTINDA, içinde YALNIZ logolar Renkli logolar aurora çerçevenin içinde kirli duruyordu; ayrıldılar. ============================================================ */ .announce-bar { padding-left: 0.9rem; margin-bottom: 1.1rem; } /* --- Sponsor logo şeridi (konsept tasarımdan alındı) --- Kutu/kontür YOK: üstte-altta ince çizgi, çok hafif zemin tonu. Logolar gri ve sönük durur; üstüne gelince kendi rengine döner ve hafifçe yükselir. Kenarlarda yumuşak solma maskesi. */ .logo-bar { margin: 1.4rem 0 1.6rem; padding: 1.9rem 0; background: var(--bg); /* sayfanın kendi siyahı — gri ton yok */ border-block: 1px solid var(--line); } .logo-bar[hidden] { display: none !important; } .logo-bar-label { text-align: center; margin: 0 0 1.35rem; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted-2); } .logo-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .logo-track { display: flex; align-items: center; gap: 4.2rem; width: max-content; animation: announce-marquee 42s linear infinite; } .logo-viewport:hover .logo-track { animation-play-state: paused; } /* Logolar: gri değil PARLAK BEYAZ. brightness yükseltilip contrast düşürülünce koyu detaylar da beyaza çıkıyor → tek renk, temiz beyaz silüet. */ /* Yukseklik PANELDEN gelir (--serit-yuk). Degisken yoksa 26px. ⚠Esit yukseklik ESIT GORSEL AGIRLIK DEMEK DEGIL: olculdu, 12 logonun kapladigi alan 3.6 kat degisiyor (ZLOT 1217px2, FESTWIN 4422px2). Onun icin logo basina `marqueeScale` da var - panelde tek tek ayarlanir. */ .logo-item { flex-shrink: 0; height: var(--serit-yuk, 26px); display: flex; align-items: center; filter: grayscale(1) brightness(3.4) contrast(0.72); opacity: 0.9; transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .logo-item:hover { filter: none; opacity: 1; transform: translateY(-2px); } .logo-item img { height: 100%; width: auto; object-fit: contain; } .logo-item .sponsor-mono { font-family: var(--font-display); font-weight: 800; font-size: 0.86rem; color: #f4f4f6; white-space: nowrap; -webkit-text-fill-color: #f4f4f6; background: none; } @media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } } @media (max-width: 720px) { .logo-bar { padding: 1.3rem 0; } /* Dar ekranda panelden gelen yukseklik %77'ye iner (26 -> 20 orani). */ .logo-item { height: calc(var(--serit-yuk, 26px) * 0.77); } .logo-track { gap: 2.4rem; } } /* Hero görsel alanı BÜYÜK: sağ sütun genişler, görsel kutuyu doldurur. (Banner hero'nun sağ yarısını baştan aşağı kaplasın.) */ .hero.has-media { grid-template-columns: 1fr 1.15fr; gap: 1.2rem; } .hero-media { height: 300px; } .hero-slide img { width: 100%; height: 100%; object-fit: contain; } @media (max-width: 860px) { .hero.has-media { grid-template-columns: 1fr; } .hero-media { height: 200px; } } /* ---------- Hero banner: BÜYÜK + ORTALI + OVAL KÖŞELER ---------- */ /* Sağ sütun genişledi; banner alanı hero'nun içinde dikeyde ortalanır. */ .hero.has-media { grid-template-columns: 0.95fr 1.45fr; gap: 1.4rem; align-items: center; } .hero-media { height: auto; min-height: 0; width: 100%; align-self: center; border-radius: var(--radius-lg); overflow: hidden; /* Kenar maskesi kapalı — oval köşeler net görünsün. */ -webkit-mask-image: none; mask-image: none; } .hero-slide { width: 100%; height: auto; } .hero-slide img { width: 100%; height: auto; max-height: 330px; object-fit: contain; display: block; border-radius: var(--radius-lg); } @media (max-width: 860px) { .hero.has-media { grid-template-columns: 1fr; } .hero-slide img { max-height: 210px; } } /* Görsel kutusu = görselin kendisi olsun ki oval köşeler görselin kenarına otursun (kutuya değil). Ortalanır. */ .hero-media { display: grid; place-items: center; } .hero-slide { display: grid; place-items: center; } .hero-slide img { width: auto; max-width: 100%; height: auto; max-height: 330px; border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); } @media (max-width: 860px) { .hero-slide img { max-height: 210px; } } /* ---------- Hero banner: kenar fade ayarları + daha büyük ---------- .hero-showcase maskesinin birebir aynısı: sağ/sol kenarda yumuşak geçiş. Oval köşeler ve gölge korunur. */ .hero.has-media { grid-template-columns: 0.85fr 1.6fr; gap: 1.3rem; } .hero-media { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%); overflow: visible; } .hero-slide img { max-height: 380px; border-radius: 22px; } @media (max-width: 860px) { .hero.has-media { grid-template-columns: 1fr; } .hero-slide img { max-height: 220px; } } /* ============================================================ GÖRSELLER ASLA BÜYÜTÜLMEZ (upscale yok) Görsel kendi ORİJİNAL boyutunda durur; yalnızca alana sığmıyorsa küçülür. Böylece hiçbir yerde kalite kaybı/bulanıklık olmaz. ============================================================ */ .hero-slide img { width: auto !important; height: auto !important; max-width: 100%; max-height: 380px; object-fit: contain; /* taşma/kırpma olmasın */ border-radius: 22px; } .page-side-banner img { width: auto !important; height: auto !important; max-width: 100%; max-height: calc(100vh - 120px); border-radius: 14px; } @media (max-width: 860px) { .hero-slide img { max-height: 220px; } } /* ============================================================ Slayt göstergesi (hero dots) — kutunun İÇİNDE, sağ altta. `bottom: 1rem` iken görselin sağ alt köşesine biniyordu; sadece AŞAĞI alındı, görselin yerine dokunulmadı. (Izgaraya taşıma denendi → görsel yukarı kayıp altında boş bant bıraktı, geri alındı. Gerek yok, tek satır yeter.) ============================================================ */ .hero-dots { position: absolute; right: 1.1rem; bottom: 0.35rem; z-index: 4; display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; margin: 0; padding: 0.3rem 0.5rem; background: rgba(0, 0, 0, 0.42); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; backdrop-filter: blur(6px); } .hero-dots[hidden] { display: none !important; } @media (max-width: 860px) { .hero-dots { right: 0.7rem; bottom: 0.35rem; } } /* ============================================================ ANA ETKİNLİK KARTI (.eh2) — Etkinlikler sayfasının tepesi Hero'nun yatay/compact hâli: solda görsel, sağda sponsor + başlık + canlı geri sayım + ödül + buton. Yükseklik SABİT değil; içerik kadar büyür ama görsel oranı sabit kalır. ============================================================ */ /* AURORA ÇERÇEVE — .announce-bar / .btn-aurora ile BİREBİR aynı şablon. Eskiden burada sahte bir aurora vardı: yalnız üst kenarda 2px'lik SABİT bir çizgi, ucu transparent'a düşüyordu ve animasyonu yoktu. Artık kartın DÖRT kenarı gerçek aurora ve renkler akıyor (btnAuroraPan, 6s). Şablon: siyah merkez padding-box + renk döngüsü border-box. Renk sırası tek kaynak: #ef4444 → #fb7185 → #8b5cf6 → #3b82f6 → #ef4444 (son durak başlangıçla aynı, yoksa döngü başa dönerken zıplar). */ .eh2 { position: relative; display: grid; /* 50/50 (eskiden 0.82/1.18): medya sutunu genisledikce 2:1 yuksekligi de buyuyor ve govdeye yetisiyor. Olculdu - 0.82fr ile govde 1440'ta bile medyayi asiyordu. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-bottom: 1.5rem; border: 2px solid transparent; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #101014 0%, #0c0c0f 55%, #0a0a0c 100%) padding-box, linear-gradient(90deg, #ef4444, #fb7185, #8b5cf6, #3b82f6, #ef4444) border-box; background-size: 100% 100%, 200% 100%; background-position: 0 0, 0% 50%; animation: btnAuroraPan 6s linear infinite; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 10px 38px -20px rgba(139, 92, 246, 0.6); } @media (prefers-reduced-motion: reduce) { .eh2 { animation: none; } } /* ---- Sol: görsel ---- */ /* ORAN BURADA, BIR KEZ (26 Agu 2026 - olculdu). Eskiden `min-height: 240px` vardi ve yukseklik YAN SUTUNDAKI METINDEN geliyordu: ekran daraldikca kutu orani bozuluyor, 2:1 afis yandan kirpiliyordu. Olculen kirpma: 1920'de %8.9 · 1366'da %20.2 · 901'de %63.8. Gozle: "GOATED" -> "OATED", "50.000$" -> "0.000$". Artik kutu orani = gorsel orani, kirpma sifir. ⚠`align-self: center` SUS DEGIL, ZORUNLU: varsayilan `stretch` yuksekligi satirdan kesinlestirir, `aspect-ratio` de GENISLIGI ondan turetir ve kutu sutunu tasar (1366'da +112.7px - olculdu). */ /* Bildirim (26 Agu 2026): banner tam oturmuyor, alttan ustten bosluk var. Dogruydu. `align-self: center` medyayi ortaliyordu; govde medyadan uzun oldugunda (Etkinlikler hero'sunda basliktan+aciklamadan oturu oyle) alta ve uste ~15'er px OLU KOYU SERIT kaliyordu. Simdi medya karti bastan sona dolduruyor. Artan yeri `.eh2-bg` bulanik kopyasi kapatiyor - zaten onun icin var. Gorsel yine `contain`, yani KIRPILMIYOR. ⚠`aspect-ratio` KULLANILAMAZ: `stretch` ile birlikte genisligi YUKSEKLIKTEN turetip sutunu tasiriyor (olculdu, 1366'da +112.7px). `::before` ile `padding-top: 50%` ayni 2:1 TABANI verir ama genislige hic dokunmaz. Govde daha uzunsa satir buyur, medya onunla uzar. */ /* MEDYA SOZLESMESI (26 Agu 2026 - olculdu, kural degisti): Medya kutusu HER ZAMAN tam 2:1. Ne uzar ne kisalir. Eskiden `align-self: stretch` + `::before{padding-top:50%}` vardi. O ikisi bir 2:1 ALT SINIR kuruyor, sabit oran kurmuyordu: satir govde yuzunden buyuyunce medya da buyuyor, ondeki `contain` gorsel 2:1 kaldigi icin fark koyu banda donusuyordu. Olculen bant: 1920'de 25px · 1366'da 56px · 1200'de 119px · 1000'de 170px. Yani en yaygin dizustu genisliklerinde kutunun yarisi bostu. ⚠️ `aspect-ratio` + `align-self: stretch` HALA BERABER KULLANILAMAZ (genisligi yukseklikten turetip sutunu tasiriyor - olculmustu). Burada `stretch` KALDIRILDI, o yuzden `aspect-ratio` guvenli: genislik sutundan gelir, yukseklik ondan turer. */ .eh2-media { position: relative; overflow: hidden; align-self: start; aspect-ratio: 2 / 1; background: radial-gradient(120% 90% at 20% 20%, rgba(139, 92, 246, 0.16), transparent 62%), #0d0d11; } /* Ana etkinlik gorseli — HER ORANDAN gelebilir (musteri ne yuklerse). Once `cover` vardi: 900x900 kare bir afis 476x240'lik alana basilinca ustu ve alti kirpiliyordu, afisteki "50.000$" yazisi kesiliyordu (olculdu). Simdi gorsel TAM gosteriliyor (`contain`), artan bosluk da ayni gorselin bulanik kopyasiyla doluyor — siyah bar cikmiyor. Onerilen 2:1 oranda gelen gorsellerde contain == cover, yani dogru boyutta yuklenen gorsel hicbir sey kaybetmiyor, arka katman gorunmuyor. Onerilen olcu panelde yazili: 1200 x 600 px. */ /* ÖLÇÜLDÜ 2026-08-23 — bağımsız incelemede iki şüphe soruldu, ikisi de ölçüldü ve doğrulanmadı. Tekrar araştırmaya gerek yok: "Aynı görsel iki kez iniyor mu?" HAYIR. DOM'da iki var ama ağa TEK istek gidiyor (174 KB, bir kez). Tarayıcı aynı URL'i birleştiriyor. "Mobilde kare düşürür mü?" Ölçümde HAYIR. CPU 6 kat yavaşlatılmış 390px ekranda 85 kare boyunca kaydırıldı: 0 takılan kare, ortalama ek maliyet 0,1 ms (en kötü kare 11 ms — 60 fps bütçesi 16,7 ms). Yapısal sebebi de var: `filter: blur()` DURAĞAN bir üzerinde bir kez rasterize edilir, sonra yalnız kompozit edilir. Her karede yeniden örnekleyen `backdrop-filter` DEĞİL — pahalı olan odur. Uyarı: CPU kısma GPU'yu kısmaz, yani çok zayıf GPU'lu bir telefonda ölçüm birebir geçerli olmayabilir. Yine de yukarıdaki yapısal sebeple risk düşük görülüyor. */ .eh2-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); /* blur kenari iceri girmesin */ filter: blur(22px) brightness(0.45) saturate(1.2); } .eh2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* BIZIM cizdigimiz vektor banner alani DOLDURUR. Neden ayrim: `contain` fotograflari kirpilmaktan kurtariyor (musteri ne yuklerse yuklesin bir sey kaybolmasin) ama tam oturmayan oranda kenarda bosluk birakiyor - olculdu: 1920px'de iki yanda 14'er px, 1366'da alt/ustte 9'ar px. Banner'in sert kenari oldugu icin bu bosluk "yapismamis" gibi goruniyordu. Kendi cizdigimiz SVG'lerde kenarlarda guvenli bosluk var, kirpilinca hicbir sey kaybolmuyor - o yuzden onlar `cover`. Musterinin fotografi (jpg/png) `contain` kalmaya devam ediyor. */ /* `cover` ISTISNASI KALDIRILDI (26 Agu 2026). Kutu artik 2:1 (yukari bak). Dogru orandaki gorselde contain == cover, yani istisna hicbir sey kazandirmiyordu; YANLIS orandaki gorselde ise kirpiyordu - hatanin ta kendisi buydu. `.eh2-img` her zaman `contain`, artan yer `.eh2-bg` bulanigiyla doluyor. */ /* ---- Görsel YOKSA: kart tek sütuna düşer, logo sağda dev filigran ---- İki sütunda bırakmak sol yarıyı bomboş gösteriyordu. */ .eh2--noimg { grid-template-columns: 1fr; min-height: 210px; } .eh2--noimg .eh2-body { padding: 1.5rem 1.6rem; } .eh2-ghost { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; display: flex; align-items: center; justify-content: center; opacity: 0.15; filter: grayscale(1) brightness(1.8); pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); } .eh2-ghost img { width: 68%; max-height: 58%; object-fit: contain; } .eh2-ghost .ev-mono { font-family: var(--font-display); font-weight: 800; font-size: 4rem; color: #fff; } @media (max-width: 860px) { .eh2-ghost { display: none; } } /* Görselden gövdeye yumuşak geçiş — dikey kesik çizgi görünmesin. */ .eh2-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 45%, rgba(12, 12, 15, 0.72) 82%, #0c0c0f 100%); } /* ---- Sağ: gövde ---- */ .eh2-body { position: relative; z-index: 2; padding: 1.4rem 1.5rem 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; } .eh2-top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } /* "ANA ETKİNLİK" rozeti — bu da sabit gradyandı (yalancı aurora). Artık aynı renk döngüsü, aynı 6 saniye, akıyor. NOT: btnAuroraPan İKİ katmanlı arka plan için yazılmış (padding-box + border-box); tek katmanlı dolguda iki konum değeri geçersiz sayılıp animasyon hiç çalışmaz. Tek katman için ayrı kare: auroraPan1. */ .eh2-pill { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; padding: 0.3rem 0.6rem; border-radius: 999px; background: linear-gradient(90deg, #ef4444, #fb7185, #8b5cf6, #3b82f6, #ef4444); background-size: 200% 100%; animation: auroraPan1 6s linear infinite; } @keyframes auroraPan1 { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @media (prefers-reduced-motion: reduce) { .eh2-pill { animation: none; } } .eh2-sponsor { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--muted); font-weight: 600; } .eh2-splogo { width: 20px; height: 20px; border-radius: 5px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); } .eh2-splogo img { width: 100%; height: 100%; object-fit: contain; } .eh2-splogo .ev-mono { font-size: 0.56rem; font-weight: 800; color: #fff; } .eh2-title { font-size: 1.55rem; line-height: 1.15; margin: 0.1rem 0 0; } .eh2-desc { color: var(--muted); font-size: 0.86rem; margin: 0; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ---- Geri sayım ---- */ .eh2-count { display: flex; gap: 0.45rem; margin-top: 0.35rem; } .eh2-unit { min-width: 62px; padding: 0.5rem 0.3rem 0.42rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.035); display: flex; flex-direction: column; align-items: center; gap: 0.1rem; } .eh2-unit b { font-family: var(--font-display); font-size: 1.32rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; /* rakam zıplamasın */ } .eh2-unit i { font-style: normal; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); } /* Son 24 saat: sayılar kırmızıya döner (kırmızı = aciliyet, semantik). */ /* .ev-time.is-urgent ile ayni kirmizi. */ .eh2-count.is-soon .eh2-unit b { color: #ef4444; } .eh2-count.is-soon .eh2-unit { border-color: rgba(239, 68, 68, 0.35); } /* Süre dolduysa kutular gider, tek etiket kalır. */ .eh2-over { display: none; align-items: center; font-size: 0.85rem; font-weight: 700; color: var(--muted-2); padding: 0.5rem 0.9rem; border: 1px dashed var(--line); border-radius: 12px; } .eh2-count.is-over .eh2-unit { display: none; } .eh2-count.is-over .eh2-over { display: inline-flex; } /* Bitiş tarihi girilmemiş etkinlik: geri sayım yerine sade etiket. */ .eh2-endless { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); padding: 0.45rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.035); } .eh2-endless::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16); } /* ---- Alt: ödül + buton ---- */ .eh2-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; flex-wrap: wrap; } .eh2-prize { display: flex; flex-direction: column; line-height: 1.15; } .eh2-prize small { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); } .eh2-prize b { font-family: var(--font-display); font-size: 1.5rem; color: #fff; } .eh2-prize i { font-style: normal; font-size: 0.95rem; margin-left: 0.1rem; color: var(--muted); } .eh2-cta { flex-shrink: 0; } /* ---- IKI SUTUN NEREYE KADAR? OLCUMLE KONDU ---- Once esik 860'ti ve 900-1440 araligi tamamen aciktaydi: medya govdeyle birlikte uzuyor, gorsel 2:1 kaldigi icin fark koyu banda donusuyordu (1366'da 56px, 1200'de 119px, 1000'de 170px olculdu). Ilk duzeltmede esik 1440 yapildi. OLCUM yesildi ama GORUNTU kotuydu: 1366'da yigilmis banner tek basina ekranin tamamini kapliyordu. Gozle bakilmasaydi "olculer temiz" diye gecilecekti. Simdi kademeli: >=1441 iki sutun, varsayilan govde (acik 4px) 1301-1440 iki sutun, govde sikilastirilmis (acik 4px) <=1300 tek sutun (acik 0) */ /* 1301-1440: iki sutun KALIR, govde sikilastirilir. Olculdu: dolgu ve baslik kucultulunce 1366'daki 40px'lik acik 4px'e iniyor, yani medya tam oturuyor. Bu genisliklerde yazi hala rahat okunuyor - kucultme yalniz DIKEY yer kazandiriyor. */ @media (min-width: 1301px) and (max-width: 1440px) { .eh2-body { padding: 1rem 1.1rem 1.05rem; } .eh2-title { font-size: 1.24rem; margin: 0.05rem 0 0; } } /* 1300 ve alti: tek sutun. Bu esik de OLCUMLE kondu. 1280'de en iyi aday bile 15px acik biraktı, 1200'de 81px. Yani iki sutun burada calismiyor; medyayi uzatmak (koyu bant) ya da govdeyi kirpmak (bilgi kaybi) yerine bilesen alt alta geciyor: medya tam genislikte, 2:1, letterbox 0. */ /* 1101-1300: iki sutun KALIR, govde AGRESIF sikistirilir. Bu bant kritik: tarayici yakinlastirmasi kullanicilarin cogunu buraya dusuruyor (%125 zoom -> 1920 ekran CSS'te ~1536, %150 -> ~1280). Tek sutuna dusurmek orada dev poster demek. Olculdu: bu ayarlarla acik 1300/1200/1100'de 4px, yani medya tam oturuyor - letterbox yok, kart 340px. */ @media (min-width: 1101px) and (max-width: 1300px) { .eh2-body { padding: 0.8rem 0.95rem; gap: 0.3rem; } .eh2-title { font-size: 1.1rem; margin: 0; } /* Aciklama bu bantta gizlenir. Bilgi kaybi, ama alternatifi ekrani kaplayan bir poster. Metin Etkinlikler/Takvim sayfalarinda tam duruyor - kaybolmuyor, yalniz ana sayfa ozetinde yok. */ .eh2-desc { display: none; } .eh2-count { transform: scale(0.85); transform-origin: right center; } .eh2-cta { padding: 0.4rem 0.8rem; font-size: 0.8rem; } } /* 1100 ve alti: tek sutun. Burada ekran gercekten dar, tam genislikte 2:1 poster dogru desen (mobilde de oyle). */ @media (max-width: 1100px) { .eh2 { grid-template-columns: 1fr; } /* Tek sutunda perde SAGI degil ALTI karartir. */ .eh2-fade { background: linear-gradient(180deg, transparent 40%, rgba(12, 12, 15, 0.8) 85%, #0c0c0f 100%); } } /* Telefona ozgu kucultmeler ESKI esikte kalir: 1366'da yazi kucultmeye gerek yok, orada yalniz duzen degisiyor. */ @media (max-width: 860px) { .eh2-body { padding: 1.1rem 1.1rem 1.2rem; } .eh2-title { font-size: 1.3rem; } .eh2-unit { min-width: 0; flex: 1; } .eh2-cta { width: 100%; justify-content: center; } } /* ============================================================ PARTİ BANNER (.eh2--parti) — Parti Takvimi sayfası ------------------------------------------------------------ Yeni bileşen DEĞİL: `.eh2`'nin takvim kılığı. Kabuk, 2:1 oran, geri sayım ve alt satır yukarıdaki `.eh2` sınıflarından geliyor; burada yalnız partiye özgü olan var. ⚠`.eh2` adı NEDEN korunuyor: az-hareket listesi (bu dosyada `prefers-reduced-motion` bloğu) `.logo-track, .eh2, .eh2-pill` diye isim isim sayıyor ve `!important` taşıyor. Sınıf korununca o koruma bedava geliyor — yeniden adlandırmada unutulacak tek satır buydu. ============================================================ */ /* Ana sayfada BANNER gorunumu secilirse etkinlikler ust uste dizilir. Kart bileseni ayni (.eh2) - yalnizca aralik veriliyor. */ .ev-banner-yigin { display: grid; grid-template-columns: 1fr; gap: 0; } .ev-banner-tek { margin-bottom: 1rem; } .ev-banner-tek:last-child { margin-bottom: 0; } .eh2--parti { margin-bottom: 1rem; } .eh2--parti .eh2-title { font-size: 1.35rem; } /* AURORA YALNIZ SIRADAKİ PARTİDE. Aurora, `.announce-bar` ve `.btn-aurora` ile aynı "bu özel" şablonu. 6 banner'da birden dönerse Etkinlikler'deki "Ana Etkinlik" kartı artık ana olmaz — vurgu her yerdeyse hiçbir yerdedir. Sıradaki olmayan partilerde renk döngüsü durur, çerçeve nötrleşir. */ /* AURORA YERI (26 Agu 2026, aksam - degisti). Onceki hal: ana sayfada aurora PARTI banner'indaydi, etkinlik yigininda hic yoktu. Bildirim aynen: "bu parti takviminin disinda aurora olmasin, ana sayfada sadece etkinlik banner'inda olsun aurora, ana sayfada cirkin duruyor; onun yerine parti takviminin yukaridaki banner'inin disi beyaz olsun, daha canli." Yeni kural, ana sayfa: etkinlik yigini -> AURORA (yalniz ILK banner; asagi bak) parti takvimi -> BEYAZ cerceve otekiler -> notr Etkinlikler sayfasinin hero'su ve Parti Takvimi sayfasi DEGISMEDI: bu kural yalniz ana sayfanin kaplarina bagli. ⚠️ "Yalniz ilk banner" onemli: yigin `limit` kadar banner cizer (tohumda 2). Hepsi birden yanip sonerse eski gerekce geri gelir - vurgu her yerdeyse hicbir yerdedir. Aurora tek bir yerde durur. */ .eh2--parti:not(.is-siradaki), .ev-banner-yigin > .ev-banner-tek:not(:first-child) > .eh2 { animation: none; background: linear-gradient(120deg, #101014 0%, #0c0c0f 55%, #0a0a0c 100%) padding-box, linear-gradient(90deg, rgba(255,255,255,0.13), rgba(255,255,255,0.13)) border-box; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); } .eh2--parti:not(.is-siradaki) .eh2-pill, .ev-banner-yigin > .ev-banner-tek:not(:first-child) > .eh2 .eh2-pill { background: rgba(255,255,255,0.08); color: var(--muted); animation: none; } /* --- ANA SAYFA PARTI BANNER'I: BEYAZ CERCEVE --- Aurora yerine duz beyaz. "Daha canli" istegi: kenarlik tam beyaza yakin ve disinda yumusak bir beyaz isik var; renk dongusu yok. ⚠️ Ozgulluk: `.eh2` (0,1,0) ve `.eh2--parti.is-siradaki` (0,2,0) kurallarini yenmesi gerekiyor - `#homeCalendar` (1,0,0) ile fazlasiyla yeniyor. Bugun ozgulluk bir kez atlandi ve duzeltme hic uygulanmadi; bu yuzden burada aciktan yaziliyor. */ #homeCalendar > .eh2--parti.is-siradaki { animation: none; background: linear-gradient(120deg, #101014 0%, #0c0c0f 55%, #0a0a0c 100%) padding-box, linear-gradient(90deg, #ffffff, #ffffff) border-box; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 30px -6px rgba(255, 255, 255, 0.28); } @media (prefers-reduced-motion: reduce) { #homeCalendar > .eh2--parti.is-siradaki { animation: none; } } /* Bilet durumu rozeti — AFİŞİN ÜSTÜNE basılmaz, gövdede durur. Müşterinin 2:1 afişinde tarih/şehir zaten yazılı; üstüne rozet basmak hem onu örter hem afişe "şu köşeyi boş bırak" kısıtı dayatır. Kelimeler panelin sözlüğüyle BİREBİR aynı (js/panel/calendar.js): Satışta / Son Biletler / Tükendi. Eskiden panel rozet gösteriyor, site hiçbir işaret basmıyordu. */ .eh2-durum { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.22rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.07); color: var(--muted-2); } .eh2-durum.d-available { background: rgba(52,211,153,0.14); color: #7fe3c0; border-color: rgba(52,211,153,0.28); } .eh2-durum.d-limited { background: rgba(240,181,61,0.92); color: #211a06; border-color: transparent; } /* d-soldout: taban nötr yeterli. Geçmiş partide rozet HİÇ basılmaz — pill "Geçmiş parti" + "Bu parti gerçekleşti" zaten iki işaret. */ /* GEÇMİŞ PARTİ — hata değil, o yüzden kırmızı YOK. Değerler geçmiş kartındaki (.cal-gecti) sönükleştirmeyle aynı. */ .eh2--gecti .eh2-media { filter: grayscale(0.55) brightness(0.72); } .eh2--gecti .eh2-title { color: var(--muted); } /* Tükendi tuşu iki kez sönüklenmesin: kendi sönük paleti (.cal-soldout) + `.btn:disabled` opacity .45 üst üste biniyordu. */ .eh2-cta.cal-soldout:disabled { opacity: 1; } /* Geçmiş partilerin kalanını açan tuş. */ .cal-daha { display: block; width: 100%; margin: 0.2rem 0 1rem; } /* Dar ekranda gövdeyi kısalt: sayaç ve tuş alt satıra iniyor, açıklama 2 satır kalırsa medya kutusunun altında ölü şerit büyür. */ @media (max-width: 1199px) { .eh2--parti .eh2-desc { -webkit-line-clamp: 1; } } /* ============================================================ ETKİNLİKLER — sponsor bağlantılı ödül listesi (3 sütun) Satır: [logo] [tür + ödül] [kalan süre] [›] Logo/link sponsordan gelir; burada yalnız görünüm var. ============================================================ */ .ev-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0.4rem 0 1rem; } .ev-toolbar-title { display: flex; align-items: baseline; gap: 0.55rem; } .ev-toolbar-title h3 { font-size: 1.15rem; margin: 0; } .ev-count { font-size: 0.9rem; color: var(--muted-2); font-family: var(--font-display); } .ev-sort { display: flex; gap: 0.35rem; flex-wrap: wrap; } .ev-sort button { font-size: 0.8rem; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem 0.9rem; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .ev-sort button:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); } .ev-sort button.active { background: var(--rose); border-color: var(--rose); color: var(--on-rose, #fff); } .ev-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; } .ev-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 14px; align-items: center; gap: 0.85rem; padding: 0.6rem 0.85rem 0.6rem 0.6rem; background: var(--panel-2); border: 1px solid transparent; border-radius: 12px; text-decoration: none; color: inherit; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .ev-row:hover { background: #17171c; border-color: var(--line-2); transform: translateY(-1px); } /* Logo kutusu — koyu zemin, logo içine sığar (kırpma yok) */ /* Etkinlik satırındaki marka kutusu — SADECE SPONSOR LOGOSU. Arkası boş: arka plan görseli / koyu perde / marka rengi yıkaması denendi, logonun arkası kalabalıklaştı. Şeffaf PNG kendi başına dursun. */ .ev-logo { width: 96px; height: 46px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; background: #0b0b0e; border: 1px solid var(--line); border-radius: 8px; } .ev-logo img { max-width: 84%; max-height: 74%; width: auto; height: auto; object-fit: contain; } .ev-mono { font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; color: var(--muted); } .ev-main { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } .ev-kind { font-size: 0.82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev-prize { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: 0.02em; color: var(--text); white-space: nowrap; } .ev-prize i { font-style: normal; font-size: 0.82em; margin-left: 0.12em; opacity: 0.85; } .ev-time { font-size: 0.82rem; color: var(--muted-2); white-space: nowrap; } .ev-time.is-urgent { color: #ef4444; font-weight: 600; } /* 16 Eyl 2026: süresi dolan / kazananları açıklanan etkinlik */ .ev-time.is-over { color: var(--muted); font-weight: 600; } .ev-time.is-winners { color: #0b0b0d; background: linear-gradient(135deg, #fde68a, #f59e0b); padding: 0.22rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; } .ev-row.is-over:not(.has-winners) { opacity: 0.72; } .ev-row.has-winners { cursor: pointer; flex-wrap: wrap; } .ev-row .ev-winners { grid-column: 1 / -1; padding: 0.5rem 0.4rem 0.2rem; border-top: 1px solid var(--line); margin-top: 0.3rem; } .ev-row .ev-winners b { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: #fbbf24; margin-bottom: 0.35rem; } .ev-row .ev-winners b svg { width: 14px; height: 14px; } .ev-row .ev-winners ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.15rem; font-size: 0.84rem; color: var(--text); } .ev-row.is-open .ev-go { transform: rotate(180deg); } .ev-go { color: var(--muted-2); font-size: 1.1rem; line-height: 1; transition: transform 0.18s ease, color 0.18s ease; } .ev-row:hover .ev-go { color: var(--text); transform: translateX(2px); } @media (max-width: 1280px) { .ev-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .ev-list { grid-template-columns: 1fr; } .ev-row { grid-template-columns: 76px minmax(0, 1fr) auto 12px; gap: 0.65rem; } .ev-logo { width: 76px; height: 40px; } .ev-prize { font-size: 1rem; } } /* ============================================================ İÇERİK SAYFASI — zengin metin (panel editöründen gelen HTML) İçerik K.sanitize'dan geçtikten sonra basılır; burada yalnız tipografi. ============================================================ */ .page-doc-body.doc-rich { white-space: normal; max-width: 74ch; font-size: 0.96rem; line-height: 1.75; color: var(--text); } .doc-rich > *:first-child { margin-top: 0; } .doc-rich p { margin: 0 0 0.9rem; color: var(--muted); } .doc-rich strong, .doc-rich b { color: var(--text); font-weight: 700; } .doc-rich h2 { font-size: 1.45rem; margin: 1.9rem 0 0.7rem; } .doc-rich h3 { font-size: 1.15rem; margin: 1.5rem 0 0.55rem; } .doc-rich h4 { font-size: 1rem; margin: 1.2rem 0 0.45rem; } /* Global reset ul'lerde list-style'ı kapatıyor — içerik sayfasında geri aç. */ .doc-rich ul { list-style: disc outside; } .doc-rich ol { list-style: decimal outside; } .doc-rich ul, .doc-rich ol { margin: 0 0 1rem 1.35rem; padding-left: 0.4rem; color: var(--muted); } .doc-rich li { margin-bottom: 0.35rem; } .doc-rich li::marker { color: var(--muted-2); } .doc-rich a { color: var(--rose-3); text-decoration: underline; text-underline-offset: 2px; } .doc-rich a:hover { color: var(--text); } .doc-rich blockquote { margin: 1.1rem 0; padding: 0.7rem 1.1rem; border-left: 3px solid var(--rose-line); border-radius: 0 8px 8px 0; background: rgba(255, 255, 255, 0.03); color: var(--muted); font-style: italic; } .doc-rich hr { border: 0; border-top: 1px solid var(--line); margin: 1.6rem 0; } .doc-rich img { max-width: 100%; height: auto; border-radius: 12px; margin: 0.6rem 0; } /* ============================================================ Bölüm başlıkları arasına nefes ============================================================ */ .view[data-view="home"] .block-head { margin-top: 2.4rem; margin-bottom: 0.9rem; } .view[data-view="home"] .block-head:first-of-type { margin-top: 1.6rem; } .sponsor-tier-row, .sponsor-tier-grid { margin-bottom: 0; } @media (max-width: 720px) { .view[data-view="home"] .block-head { margin-top: 1.6rem; } } /* ============================================================ GLOBAL SPONSOR SIRASI — TEK DÜZEN KURALI ------------------------------------------------------------ Ana sayfa (.sponsor-tier-row) ve Sponsorlar sayfası (.sponsor-featured-row) eskiden ayrı kurallara tabiydi ve mobilde farklı sütun sayısına düşüyorlardı. Artık ikisi de .sponsor-tile-row alıyor; bu blok dosyanın SONUNDA olduğu için eski kuralları ezer ve iki sayfa asla ayrışmaz. Sayıya göre: 1→tek tam · 2→yan yana · 3→1 tam+2 · 4→2+2 (tek sayıda ilk kart tam genişlik). lay-N ile panelden zorlanır. ============================================================ */ .sponsor-tile-row { display: grid; grid-template-columns: repeat(2, 1fr); /* Kartlar arası ve bloklar arası nefes — yapışık durmasınlar. */ gap: 0.9rem; margin-bottom: 2.4rem; } .sponsor-tile-row > .sponsor-tile:first-child:nth-last-child(odd) { grid-column: 1 / -1; } .sponsor-tile-row.lay-2 { grid-template-columns: repeat(2, 1fr); } .sponsor-tile-row.lay-3 { grid-template-columns: repeat(3, 1fr); } .sponsor-tile-row.lay-4 { grid-template-columns: repeat(4, 1fr); } .sponsor-tile-row.lay-2 > .sponsor-tile:first-child:nth-last-child(odd), .sponsor-tile-row.lay-3 > .sponsor-tile:first-child:nth-last-child(odd), .sponsor-tile-row.lay-4 > .sponsor-tile:first-child:nth-last-child(odd) { grid-column: auto; } @media (max-width: 900px) { .sponsor-tile-row, .sponsor-tile-row.lay-3, .sponsor-tile-row.lay-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { /* Telefonda da 2 sütun (müşteri isteği, 12 Eyl 2026: "global sponsorlar alt alta çıkıyor"). Tek sayıda ilk kart tam genişlik kalır. Kart yüksekliği 720px kuralından (clamp 76px…) geliyor, yarım kartta yeterli. */ .sponsor-tile-row, .sponsor-tile-row.lay-2, .sponsor-tile-row.lay-3, .sponsor-tile-row.lay-4 { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } .sponsor-tile-row > .sponsor-tile { padding: 0.5rem 0.6rem; } } /* ============================================================ SPONSORLAR SAYFASI — ÜÇ KADEME 1) Global → yukarıdaki büyük görsel kartlar (.sponsor-tile) 2) Sponsorlar→ #tierSponsorsGrid (normal kart) 3) Diğer → #tierOtherGrid (bir tık küçük kart) Başlık yazısı yok; ayrımı boşluk ve kart boyutu yapıyor. ============================================================ */ #tierSponsorsGrid { margin-top: 3.3rem; } /* banner'lardan sonra nefes */ #tierOtherGrid { margin-top: 3rem; } /* kademeler arası ayrım */ #tierOtherGrid[hidden] { display: none; } /* 3. kademe: aynı kart bileşeni, yalnız ölçüler küçültülür. (Kartın kendi yapısına dokunulmuyor — sadece bu ızgarada.) */ .sponsor-grid--sm { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.65rem; } .sponsor-grid--sm .sponsor .sponsor-head { height: 92px; } .sponsor-grid--sm .sponsor .sponsor-body { padding: 0.7rem 0.75rem 0.75rem; gap: 0.4rem; } .sponsor-grid--sm .sponsor .sponsor-name { font-size: 0.8rem; } .sponsor-grid--sm .sponsor .sponsor-bonus { font-size: 0.72rem; padding: 0.4rem 0.5rem; } .sponsor-grid--sm .sponsor .btn { padding: 0.5rem 0.6rem; font-size: 0.76rem; } @media (max-width: 560px) { .sponsor-grid--sm { grid-template-columns: repeat(3, 1fr); } /* 12 Eyl: 2 → 3 (müşteri) */ } /* ============================================================ PROFİL — Sponsor kullanıcı adları (sponsor başına) Her sponsor sitesinde farklı kullanıcı adı olabildiği için tek kutu yerine: sponsor seç + kullanıcı adı gir + liste. ============================================================ */ .spu-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(160deg, var(--panel-2), var(--panel)); padding: 1rem 1.1rem; } .spu-hint { color: var(--muted); font-size: 0.84rem; margin: 0 0 0.85rem; line-height: 1.55; } .spu-done { color: var(--muted-2); font-size: 0.84rem; margin: 0; } .spu-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 0.5rem; } .spu-form .auth-input { margin: 0; } @media (max-width: 640px) { .spu-form { grid-template-columns: 1fr; } } .spu-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.9rem; } .spu-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 28px; align-items: center; gap: 0.65rem; padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.025); } .spu-row.is-off { opacity: 0.55; } .spu-logo { width: 28px; height: 28px; border-radius: 7px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); } .spu-logo img { width: 100%; height: 100%; object-fit: contain; } .spu-logo .ev-mono { font-family: var(--font-display); font-weight: 800; font-size: 0.62rem; color: #fff; } .spu-name { font-size: 0.86rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spu-name i { color: var(--muted-2); font-style: normal; font-size: 0.76rem; } .spu-user { font-family: var(--font-display); font-size: 0.86rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spu-x { width: 24px; height: 24px; border: 0; border-radius: 6px; cursor: pointer; background: transparent; color: var(--muted-2); font-size: 0.9rem; line-height: 1; transition: background 0.15s ease, color 0.15s ease; } .spu-x:hover { background: rgba(239, 68, 68, 0.15); color: #ef4444; } /* ============================================================ PROFİL — iki sütunlu üst blok Solda "Sonraki Hedefler" (kompakt), sağda hesap bağlantıları. Her ikisi de kart; dar ekranda alt alta düşer. ============================================================ */ .pf-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 0.4rem; } .pf-col { min-width: 0; } .pf-col .block-head { margin-top: 0; } @media (max-width: 900px) { .pf-cols { grid-template-columns: 1fr; } } /* ---- Hedefler kartı: kompakt ---- */ .goals { padding: 0.9rem 1rem; } .goals-head { gap: 0.7rem; margin-bottom: 0.7rem; } .goals-ring { width: 44px; height: 44px; flex-shrink: 0; } .goals-ring span { font-size: 0.72rem; } .goals-head-text small { font-size: 0.6rem; letter-spacing: 0.09em; } .goals-motivation { font-size: 0.82rem; line-height: 1.35; margin: 0.1rem 0 0; } .goals-list { gap: 0.3rem; } .goal { padding: 0.5rem 0.6rem; gap: 0.55rem; border-radius: 10px; } .goal-ic { width: 26px; height: 26px; flex-shrink: 0; } .goal-ic svg { width: 15px; height: 15px; } .goal-body b { font-size: 0.82rem; } .goal-body small { font-size: 0.7rem; } .goal-go { font-size: 0.95rem; } /* ---- Kariyer istatistiği ikonu ---- */ .stat-svg { width: 18px; height: 18px; display: block; color: var(--muted); } /* .stat-ic eskiden ölçüsüz bir kutuydu (yalnız ikon taşıyordu, sorun değildi). Renk verilince arka plan tüm satırı kaplayıp ÇUBUĞA dönüştü. Diğer ikon kutularıyla aynı ölçüye sabitlendi. */ .stat-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); color: #e9ecf1; margin-bottom: 0.6rem; } .stat-ic svg { width: 17px; height: 17px; } /* ============================================================ HESAP ALANI (2026-08-16) — Özet · Bilgilerim · Sponsorlar · Geçmişim ------------------------------------------------------------ Profil tek uzun sayfaydı; sekmeye bölündü. Sekme çubuğu profil başlığının hemen altında durur, seçili sekme beyaz alt çizgi alır (sitenin "beyaz vurgu" diline uyar; marka rengi harcamaz). ============================================================ */ .acc-tabs { display: flex; gap: 0.15rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 0.2rem 0 1.15rem; } .acc-tab { position: relative; background: none; border: 0; cursor: pointer; padding: 0.62rem 0.95rem; margin-bottom: -1px; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--muted); letter-spacing: 0.01em; border-bottom: 2px solid transparent; transition: color 0.16s ease, border-color 0.16s ease; display: inline-flex; align-items: center; gap: 0.4rem; } .acc-tab:hover { color: #e9ecf1; } .acc-tab.is-on { color: #fff; border-bottom-color: #fff; } /* Bekleyen sayacı — 0 ise JS gizler ("0" rozeti gösterilmez). */ .acc-n { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 0.64rem; font-weight: 700; line-height: 17px; text-align: center; } .acc-pane { animation: accIn 0.18s ease; } @keyframes accIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* ---- Kart ---- */ .acc-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(160deg, var(--panel-2), var(--panel)); padding: 1rem 1.1rem; margin-bottom: 0.9rem; } .acc-card-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; } .acc-card-head > div { min-width: 0; flex: 1; } .acc-card-head b { display: block; font-size: 0.95rem; } .acc-card-head small { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 0.12rem; line-height: 1.45; } .acc-card-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); color: #e9ecf1; } .acc-card-ic svg { width: 17px; height: 17px; } /* ============================================================ PROFİL İKON RENKLERİ ------------------------------------------------------------ Panel hub kartlarındaki renk dilinin site tarafındaki karşılığı. İki kademe var, bilerek: • Kart BAŞLIĞI (.acc-card-ic, .member-ic) → dolu renkli kutu. Bölümü uzaktan tanıtır. • Satır içi alan (.acc-row-ic) → yalnız ikon rengi, kutu yok. Küçük satırlara dolu kare koyunca tablo alacalı görünüyordu. Renkler yalnız ikonda; kart yüzeyi ve yazılar nötr kalır — sitenin siyah/beyaz kimliği bozulmasın. ============================================================ */ .acc-card-ic[data-tone], .member-ic[data-tone], .goal-ic[data-tone], .stat-ic[data-tone] { border-color: transparent; color: #fff; } .acc-card-ic[data-tone="blue"], .member-ic[data-tone="blue"], .goal-ic[data-tone="blue"], .stat-ic[data-tone="blue"] { background: linear-gradient(145deg, #60a5fa, #2563eb); box-shadow: 0 8px 20px -12px rgba(59, 130, 246, 0.95); } .acc-card-ic[data-tone="green"], .member-ic[data-tone="green"], .goal-ic[data-tone="green"], .stat-ic[data-tone="green"] { background: linear-gradient(145deg, #4ade80, #16a34a); box-shadow: 0 8px 20px -12px rgba(34, 197, 94, 0.95); } .acc-card-ic[data-tone="amber"], .member-ic[data-tone="amber"], .goal-ic[data-tone="amber"], .stat-ic[data-tone="amber"] { background: linear-gradient(145deg, #fbbf24, #d97706); box-shadow: 0 8px 20px -12px rgba(245, 158, 11, 0.95); } .acc-card-ic[data-tone="violet"], .member-ic[data-tone="violet"], .goal-ic[data-tone="violet"], .stat-ic[data-tone="violet"] { background: linear-gradient(145deg, #a78bfa, #7c3aed); box-shadow: 0 8px 20px -12px rgba(139, 92, 246, 0.95); } .acc-card-ic[data-tone="cyan"], .member-ic[data-tone="cyan"], .goal-ic[data-tone="cyan"], .stat-ic[data-tone="cyan"] { background: linear-gradient(145deg, #22d3ee, #0891b2); box-shadow: 0 8px 20px -12px rgba(6, 182, 212, 0.95); } .acc-card-ic[data-tone="pink"], .member-ic[data-tone="pink"], .goal-ic[data-tone="pink"], .stat-ic[data-tone="pink"] { background: linear-gradient(145deg, #f472b6, #db2777); box-shadow: 0 8px 20px -12px rgba(236, 72, 153, 0.95); } /* Satır ikonu: kutu yok, sadece renk */ .acc-row-ic[data-tone="blue"] { color: #7cb2ff; } .acc-row-ic[data-tone="green"] { color: #5ede97; } .acc-row-ic[data-tone="amber"] { color: #fbbf24; } .acc-row-ic[data-tone="violet"] { color: #b79cff; } .acc-row-ic[data-tone="cyan"] { color: #45dcf0; } .acc-row-ic[data-tone="pink"] { color: #f78ac4; } /* Durum bayrağı (Kayıtlı / Eksik / Biçim hatalı) */ .acc-flag { display: inline-flex; align-items: center; gap: 0.32rem; flex-shrink: 0; padding: 0.25rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.01em; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.05); color: var(--muted); } .acc-flag svg { width: 13px; height: 13px; } .acc-flag.ok { color: #7ee0a8; border-color: rgba(126, 224, 168, 0.3); background: rgba(126, 224, 168, 0.09); } .acc-flag.warn { color: #ffd28a; border-color: rgba(255, 210, 138, 0.3); background: rgba(255, 210, 138, 0.09); } .acc-flag.bad { color: #ff9aa2; border-color: rgba(255, 154, 162, 0.3); background: rgba(255, 154, 162, 0.09); } /* ---- Bilgi satırları ---- */ .acc-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .acc-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); } .acc-row-ic { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; color: var(--muted-2); } .acc-row-ic svg { width: 16px; height: 16px; } .acc-row-body { min-width: 0; } .acc-row-body small { display: block; color: var(--muted-2); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; } .acc-row-body b { display: block; font-size: 0.86rem; margin-top: 0.12rem; overflow-wrap: anywhere; } .acc-yok { color: var(--muted-2); font-style: normal; } .acc-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.82em; letter-spacing: 0.02em; } @media (max-width: 720px) { .acc-rows { grid-template-columns: 1fr; } } /* ---- Cüzdan alanı ---- */ .acc-wallet { display: flex; gap: 0.5rem; flex-wrap: wrap; } .acc-wallet input { flex: 1; min-width: 220px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.82rem; } .acc-hint { color: var(--muted); font-size: 0.79rem; line-height: 1.55; margin: 0.7rem 0 0; } .acc-hint b { color: #d9dde4; } .acc-empty { color: var(--muted-2); font-size: 0.84rem; margin: 0; padding: 0.6rem 0; } .acc-done { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.84rem; margin: 0; } .acc-done svg { width: 15px; height: 15px; color: #7ee0a8; } /* ---- Filtre çipleri (Sponsorlar + Geçmişim) ---- */ .acc-filters { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.8rem; } .acc-chip { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; padding: 0.36rem 0.7rem; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); color: var(--muted); font: inherit; font-size: 0.78rem; font-weight: 600; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .acc-chip:hover { color: #e9ecf1; border-color: rgba(255, 255, 255, 0.22); } .acc-chip span { min-width: 16px; padding: 0 3px; border-radius: 8px; text-align: center; background: rgba(255, 255, 255, 0.08); font-size: 0.66rem; } .acc-chip.is-on { background: #fff; border-color: #fff; color: #0c0c10; } .acc-chip.is-on span { background: rgba(0, 0, 0, 0.12); color: #0c0c10; } /* ---- Sponsor ID satırı ---- */ .spid-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 0.5rem; } .spid-form select, .spid-form input { min-width: 0; } @media (max-width: 720px) { .spid-form { grid-template-columns: 1fr; } } .spid-list { display: grid; gap: 0.4rem; } .spid-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.65rem; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); } .spid-row.is-off { opacity: 0.55; } .spid-logo { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; overflow: hidden; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); } .spid-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; } .spid-main { min-width: 0; flex: 1; } .spid-main b { display: block; font-size: 0.86rem; } .spid-main b i { color: var(--muted-2); font-style: normal; font-weight: 600; font-size: 0.78em; } .spid-main small { display: block; color: var(--muted); font-size: 0.76rem; margin-top: 0.1rem; overflow-wrap: anywhere; } .spid-note { color: #ff9aa2 !important; } .spid-flag { display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0; font-size: 0.72rem; font-weight: 700; color: var(--muted); } .spid-flag svg { width: 14px; height: 14px; } .spid-flag.ok { color: #7ee0a8; } .spid-flag.wait { color: #ffd28a; } .spid-flag.bad { color: #ff9aa2; } .spid-act { display: flex; gap: 0.25rem; flex-shrink: 0; } .spid-btn { width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; background: none; border: 1px solid transparent; color: var(--muted-2); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .spid-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.06); border-color: var(--line-2); } .spid-btn svg { width: 15px; height: 15px; } @media (max-width: 620px) { .spid-row { flex-wrap: wrap; } .spid-flag { order: 3; } .spid-act { margin-left: auto; } } /* Profil başlığındaki etiket ikonu (emoji yerine) */ .tag-svg { width: 12px; height: 12px; margin-right: 0.3rem; vertical-align: -0.13em; } .member-ic svg { width: 17px; height: 17px; } /* ============================================================ ÜST BARDAKİ HESAP MENÜSÜ ------------------------------------------------------------ Puan + avatar; tıklanınca hesap alanının sekmelerine kısayol. Sol menüdeki kullanıcı kartı DURUYOR — bu, müşterinin alışkın olduğu sağ üst erişim. Girişsizken JS gizler. ============================================================ */ .appbar-acc { position: relative; flex-shrink: 0; } .acc-btn { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.32rem 0.5rem 0.32rem 0.75rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); font: inherit; font-size: 0.8rem; font-weight: 700; transition: border-color 0.15s ease, background 0.15s ease; } .acc-btn:hover { border-color: rgba(255, 255, 255, 0.24); } .acc-btn .kp-dot { flex-shrink: 0; } .acc-btn-av { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; font-size: 0.74rem; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line-2); } .acc-btn-av img { width: 100%; height: 100%; object-fit: cover; } .acc-btn-chev { width: 13px; height: 13px; color: var(--muted-2); transition: transform 0.18s ease; } .acc-btn[aria-expanded="true"] .acc-btn-chev { transform: rotate(180deg); } .acc-menu { position: absolute; right: 0; top: calc(100% + 0.45rem); z-index: 60; min-width: 232px; padding: 0.45rem; border-radius: 14px; border: 1px solid var(--line-2); background: var(--panel); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); animation: accIn 0.14s ease; } .acc-menu-head { padding: 0.55rem 0.6rem 0.6rem; border-bottom: 1px solid var(--line); margin-bottom: 0.35rem; } .acc-menu-head b { display: block; font-size: 0.88rem; } .acc-menu-head small { display: block; color: var(--muted); font-size: 0.74rem; margin-top: 0.15rem; } .acc-menu-item { width: 100%; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; padding: 0.52rem 0.6rem; border-radius: 9px; text-align: left; background: none; border: 0; color: var(--text); font: inherit; font-size: 0.83rem; font-weight: 600; transition: background 0.13s ease; } .acc-menu-item:hover { background: rgba(255, 255, 255, 0.06); } .acc-menu-item svg { width: 16px; height: 16px; color: var(--muted-2); flex-shrink: 0; } .acc-menu-item.is-out { color: #ff9aa2; } .acc-menu-item.is-out svg { color: #ff9aa2; } .acc-menu-sep { height: 1px; background: var(--line); margin: 0.35rem 0; } @media (max-width: 900px) { .appbar-acc { display: none; } } /* 🔴 UST BARDAKI SOSYAL IKONLAR TELEFONDA TASIYORDU (olculdu 26 Agu 2026). 8 ikon x 38px + aralik = 354px; 390px'lik telefonda belge 417px oluyor ve TUM SAYFA yana kayiyordu. Bu ancak sekiz baglantinin da girildigi durumda ortaya cikiyor - panelde `website` ve `live` alanlari olmadigi surece kimse 8'e ulasamiyordu, o yuzden gorulmemis. Ikonlari GIZLEMEK yerine kucultup satiri kendi icinde kaydirilabilir yapiyoruz: hicbir baglanti kaybolmuyor. `min-width: 0` SART - flex ogesi varsayilan `min-width: auto` ile icerigi kadar buyur ve overflow hic devreye girmez. */ @media (max-width: 720px) { .appbar-social { gap: 0.3rem; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .appbar-social::-webkit-scrollbar { display: none; } .social-ic { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; } } /* Sponsorsuz etkinlik: soru işareti yerine nötr ikon. */ .ev-mono--ic { display: grid; place-items: center; color: var(--muted-2); } .ev-mono--ic svg { width: 20px; height: 20px; } /* Ödülü olmayan etkinlik: rakam yerine açıklama/başlık, küçük punto. TEK SATIR + kırpma: uzun açıklama süre etiketinin altına taşıyordu. */ .ev-prize--none { font-size: 0.86rem !important; font-weight: 600 !important; color: var(--muted) !important; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev-row .ev-main { min-width: 0; } /* ============================================================ SAYFA KURUCU — İÇERİK BLOKLARI (site tarafı) Panelden kurulan içerik sayfalarının gövdesi. Aynı stiller panelin tuvalinde de kullanılıyor (panel ../styles.css yükler), böylece "panelde gördüğün = sitede çıkan". ============================================================ */ .pgb { display: flex; flex-direction: column; gap: 2.1rem; max-width: 100%; } .pgb-b { min-width: 0; } .pgb-b[data-align="center"] { text-align: center; } .pgb-b[data-align="right"] { text-align: right; } .pgb-b[data-align="center"] .pgb-text { margin-inline: auto; } /* --- Başlık --- */ .pgb-h { font-family: var(--font-display); color: var(--text); line-height: 1.25; } h2.pgb-h { font-size: clamp(1.5rem, 3.2vw, 2.05rem); } h3.pgb-h { font-size: clamp(1.2rem, 2.4vw, 1.45rem); } h4.pgb-h { font-size: 1.05rem; } .pgb-h-sub { margin-top: 0.45rem; color: var(--muted); font-size: 0.95rem; max-width: 68ch; } .pgb-b[data-align="center"] .pgb-h-sub { margin-inline: auto; } /* --- Paragraf --- */ .pgb-text { font-size: 0.96rem; line-height: 1.75; } .pgb-text.is-narrow { max-width: 68ch; } /* --- Buton --- */ .pgb-t-button .btn { display: inline-flex; } /* --- Kart grid --- */ .pgb-cards { display: grid; gap: 0.9rem; } .pgb-cards[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pgb-cards[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pgb-cards[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pgb-card { display: flex; flex-direction: column; overflow: hidden; text-align: left; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm); transition: border-color 0.18s ease, transform 0.18s ease; } .pgb-card.is-link:hover { border-color: var(--rose-line); transform: translateY(-2px); } .pgb-card-img { display: block; aspect-ratio: 16 / 10; background: var(--panel-2); } .pgb-card-img img { width: 100%; height: 100%; object-fit: cover; } .pgb-card-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.85rem 0.95rem 1rem; } .pgb-card-body b { font-family: var(--font-display); font-size: 0.95rem; color: var(--text); } .pgb-card-body small { color: var(--muted); font-size: 0.82rem; line-height: 1.55; } /* --- İkon kutusu --- */ .pgb-feats { display: grid; gap: 0.9rem; } .pgb-feats[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pgb-feats[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pgb-feats[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pgb-feat { display: flex; flex-direction: column; gap: 0.4rem; text-align: left; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 1.05rem 1rem; } .pgb-feat-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(var(--rose-rgb), 0.08); border: 1px solid var(--rose-line); color: var(--rose-3); margin-bottom: 0.15rem; } .pgb-feat b { font-family: var(--font-display); font-size: 0.94rem; color: var(--text); } .pgb-feat small { color: var(--muted); font-size: 0.82rem; line-height: 1.55; } /* --- Akordeon / SSS --- */ .pgb-faq { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; } .pgb-faq-i { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; } .pgb-faq-i[open] { border-color: var(--rose-line); } .pgb-faq-i summary { cursor: pointer; list-style: none; padding: 0.85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; color: var(--text); } .pgb-faq-i summary::-webkit-details-marker { display: none; } .pgb-faq-i summary::after { content: '+'; flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 1rem; line-height: 1; color: var(--muted); border: 1px solid var(--line-2); transition: all 0.18s ease; } .pgb-faq-i[open] summary::after { content: '\2212'; color: var(--text); border-color: var(--rose-line); } .pgb-faq-a { padding: 0 1rem 0.95rem; font-size: 0.9rem; } .pgb-faq-a p:last-child { margin-bottom: 0; } /* --- Sayaç --- */ .pgb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8rem; } .pgb-stat { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 1.1rem 1rem; text-align: center; } .pgb-stat b { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2rem); color: var(--text); line-height: 1.1; } .pgb-stat small { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.8rem; } /* --- Uyarı kutusu --- */ .pgb-notice { display: flex; gap: 0.7rem; align-items: flex-start; text-align: left; border-radius: var(--radius-sm); padding: 0.9rem 1.05rem; border: 1px solid var(--line-2); background: var(--panel); } .pgb-notice .doc-rich p:last-child { margin-bottom: 0; } .pgb-notice-ic { flex-shrink: 0; display: grid; place-items: center; margin-top: 1px; } .pgb-notice.is-info { border-color: rgba(96, 165, 250, 0.32); background: rgba(96, 165, 250, 0.07); } .pgb-notice.is-info .pgb-notice-ic { color: #93c5fd; } .pgb-notice.is-warn { border-color: rgba(240, 181, 61, 0.32); background: rgba(240, 181, 61, 0.07); } .pgb-notice.is-warn .pgb-notice-ic { color: var(--gold); } .pgb-notice.is-ok { border-color: rgba(52, 211, 153, 0.32); background: rgba(52, 211, 153, 0.07); } .pgb-notice.is-ok .pgb-notice-ic { color: var(--green); } .pgb-notice.is-bad { border-color: rgba(248, 113, 113, 0.34); background: rgba(248, 113, 113, 0.07); } .pgb-notice.is-bad .pgb-notice-ic { color: #fca5a5; } /* --- Ayırıcı --- TUZAK: .pgb kabı flex + gap:2.1rem. Ayırıcı bloğun ÜSTÜNE ve ALTINA bu gap ayrıca ekleniyordu → "orta" ayırıcı 2.1 + 1.6 + 2.1 = 5.8rem yer kaplıyor, sayfa delik deşik görünüyordu. ÇÖZÜM: ayırıcı kabın gap'ini negatif margin ile yutar; kalan boşluk YALNIZ kendi min-height'ıdır. Böylece paneldeki "Az/Orta/Çok" seçimi ekranda gerçekten o kadar boşluk demek. */ .pgb-t-divider { margin-block: -2.1rem; } .pgb-div { display: flex; align-items: center; } .pgb-div[data-space="sm"] { min-height: 2.1rem; } .pgb-div[data-space="md"] { min-height: 3.4rem; } .pgb-div[data-space="lg"] { min-height: 5.4rem; } .pgb-div > span { flex: 1; height: 1px; background: var(--line-2); } @media (max-width: 720px) { .pgb-t-divider { margin-block: -1.6rem; } /* dar ekranda kap gap'i 1.6rem */ } /* --- Banner / görsel --- */ .pgb-img { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .pgb-img img { width: 100%; height: 100%; object-fit: cover; } /* --- Slider --- */ .pgb-slider { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); aspect-ratio: 16 / 7; } .pgb-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; pointer-events: none; } .pgb-slide.is-on { opacity: 1; pointer-events: auto; } .pgb-slide img { width: 100%; height: 100%; object-fit: cover; } .pgb-slide-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.1rem 0.85rem; font-size: 0.88rem; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent); } .pgb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 1.3rem; line-height: 1; color: #fff; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); transition: background 0.15s ease; } .pgb-nav:hover { background: rgba(0, 0, 0, 0.78); } .pgb-prev { left: 0.7rem; } .pgb-next { right: 0.7rem; } .pgb-slide-dots { position: absolute; z-index: 3; right: 0.9rem; bottom: 0.7rem; display: flex; gap: 0.35rem; } .pgb-dot { width: 7px; height: 7px; border-radius: 50%; cursor: pointer; padding: 0; background: rgba(255, 255, 255, 0.35); border: 0; transition: all 0.18s ease; } .pgb-dot.is-on { background: #fff; width: 18px; border-radius: 4px; } /* --- Video --- */ .pgb-video { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .pgb-video iframe, .pgb-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; } .pgb-gform iframe { aspect-ratio: auto; background: #fff; } .pgb-video figcaption { padding: 0.6rem 0.9rem; font-size: 0.82rem; color: var(--muted); background: var(--panel); } /* Panelde "2 sütun" dendiyse sitede 2 sütun çıkmalı — eskiden auto-fit sütun sayısını kendi seçiyordu ve "2 sütun" geniş ekranda 4'e çıkıyordu. Artık sayı sabit; daralınca aşağıdaki KAP SORGULARI kırıyor. Neden @container: kurucudaki tuval telefon moduna geçince kabın genişliği 414px oluyor ama TARAYICI penceresi hâlâ geniş — @media yanlış cevap verirdi, kap sorgusu doğru cevabı verir. */ .pgb { container-type: inline-size; } @container (max-width: 900px) { .pgb-cards[data-cols], .pgb-feats[data-cols] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 560px) { .pgb-cards[data-cols], .pgb-feats[data-cols] { grid-template-columns: 1fr; } .pgb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .pgb { gap: 1.6rem; } .pgb-slider { aspect-ratio: 4 / 3; } } /* Telegram girisi kapaliyken gosterilen durust aciklama (eski hali: Telegram'in kendi "Username invalid" hatasi ekranda duruyordu). */ .auth-tg-off { margin: 0.6rem 0 0; padding: 0.7rem 0.9rem; font-size: 0.82rem; line-height: 1.5; color: var(--muted); background: rgba(255, 255, 255, 0.04); border: 1px dashed var(--line-2); border-radius: var(--radius-sm); } /* Üyelik modalı — iki adım (hesap → Telegram doğrulama), 12 Eyl 2026 */ .auth-tg-title { margin: 0.2rem 0 0.9rem; font-size: 0.95rem; color: var(--muted); } .auth-tg-title b { color: var(--text); } .auth-skip { display: inline-block; margin-top: 0.9rem; font-size: 0.82rem; color: var(--muted); font-weight: 600; } .auth-skip:hover { color: var(--text); } .auth-gate[data-adim="telegram"] #authStepAccount, .auth-gate[data-adim="telegram"] #authTgDivider { display: none; } .auth-gate[data-adim="telegram"] .auth-tg { min-height: 56px; } /* Doğrulamalar kartı (hesabım) */ .dogrulama-satir { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .dogrulama-satir .conn-status.warn { color: var(--gold, #e6b95c); border-color: rgba(230,185,92,0.35); background: rgba(230,185,92,0.08); } /* ============================================================ CANLILIK — çevrim içi göstergesi + aktivite bildirimleri Modül kapalıyken bu sınıflar hiç kullanılmaz (JS `hidden`ı kaldırmaz). ============================================================ */ /* ---------- Çevrim içi göstergesi (sidebar) ---------- */ .canli-online { display: flex; align-items: center; gap: 0.42rem; margin: -0.2rem 0 0.85rem; padding: 0.34rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.035); font-size: 0.735rem; color: var(--muted); white-space: nowrap; } .canli-online b { font-family: var(--font-display); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; /* rakam değişirken genişlik oynamasın */ letter-spacing: -0.01em; } .canli-online-yazi { color: var(--muted-2); } /* Nefes alan nokta — "canlı" işareti. Tek sonsuz animasyon, az-hareket modunda aşağıda kapatılıyor. */ .canli-online-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); animation: canliNabiz 2.4s ease-out infinite; } @keyframes canliNabiz { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } /* ---------- Aktivite bildirimleri (SAĞ ÜST) ---------- Aurora BİLEREK kullanılmadı: duyuru bandı zaten aurora taşıyor, ikisi üst üste gelince tekrar gibi duruyordu. Burada sade bir ince beyaz çerçeve var — dikkat çeker ama bağırmaz. */ .canli-bildirim-yigin { position: fixed; top: 14px; right: 18px; /* right'i JS ölçüp günceller */ z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; max-width: min(340px, 82vw); } .canli-bildirim { display: flex; align-items: center; gap: 0.55rem; padding: 0.78rem 1rem; /* biraz daha yüksek kart */ border: 1px solid var(--rose-line); /* ince beyaz çerçeve */ border-radius: var(--radius-sm); background: rgba(10, 10, 11, 0.94); backdrop-filter: blur(6px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); color: var(--text); font-size: 0.8rem; line-height: 1.3; white-space: nowrap; opacity: 0; transform: translateY(-12px); transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .canli-bildirim.acik { opacity: 1; transform: translateY(0); } .canli-bildirim-nokta { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 7px rgba(52, 211, 153, 0.65); } .canli-bildirim-yazi { min-width: 0; color: var(--muted); } .canli-bildirim-ad { font-family: var(--font-display); font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .canli-bildirim-puan { display: inline-block; margin: 0 0.1rem; padding: 0.06rem 0.4rem; border-radius: 999px; background: rgba(var(--rose-rgb), 0.12); border: 1px solid rgba(var(--rose-rgb), 0.25); color: var(--rose-3); font-weight: 700; font-variant-numeric: tabular-nums; } /* Dar ekranda bildirim ALTA gelir. ÖLÇÜLDÜ (375px): üstteyken (top:62px) tam sayfa başlığının üzerine biniyordu — "Ana Sayfa" H1'i ile çakışma doğrulandı. Geniş ekranda sağ üstte yer var, darda yok. Alt kenar hem başlığı örtmez hem parmak erişimine yakındır. Kart da yönünü değiştirir: aşağıdan gelir. */ @media (max-width: 720px) { .canli-bildirim-yigin { top: auto; bottom: 12px; right: 10px; left: 10px; align-items: stretch; max-width: none; } .canli-bildirim { white-space: normal; font-size: 0.76rem; transform: translateY(12px); } .canli-bildirim.acik { transform: translateY(0); } } /* Az-hareket: bildirim yine görünür ama KAYMADAN gelir, nokta nabız atmaz. (Bugünün kuralı: hareketi kes, içeriği kesme.) */ @media (prefers-reduced-motion: reduce) { .canli-online-nokta { animation: none !important; } .canli-bildirim { transition: opacity 0.2s ease !important; transform: none !important; } .canli-bildirim.acik { transform: none !important; } } /* ================================================================ ETKINLIK HERO — sayac SAGA, banner solda kalir ---------------------------------------------------------------- Istek: "sayac sagda olacak, solda banner olacak, eski haliyle." Sayac metnin hemen altinda, govdenin solunda duruyordu ve saginda genis bir bosluk kaliyordu. Artik govde iki sutun: yazi solda, sayac + odul havuzu sag sutunda, dikey ortali. ================================================================ */ /* Esik 900 -> 1200 (26 Agu 2026 - olculdu): 861-1199 bandinda iki sutunlu govde basligi 4 satira kiriyor ve karti 340.5px'e uzatiyordu; tek sutuna donunce 293.2px. 6 banner ust uste dizilince bu fark carpanla geliyor. `.eh2-body > h3` OLU seciciydi - JS `

` basiyor (views.js:1268). Sinifa cevrildi. */ @media (min-width: 1200px) { .eh2-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.6rem; align-items: center; } .eh2-top, .eh2-title, .eh2-desc { grid-column: 1; } .eh2-count { grid-column: 2; grid-row: 1 / -1; align-self: center; margin-top: 0; } .eh2-foot { grid-column: 1 / -1; } } /* Sag ustteki puan+avatar menusu KAPALI. Sol menunun altinda ayni puan + ayni kullanici karti zaten duruyor; ayni bilgi iki yerde tekrarliyordu. hidden ozniteligi shell.js tarafindan geri aciliyordu, o yuzden CSS ile kesin kapatildi. Geri acmak icin: bu iki satiri sil. */ #appbarAcc { display: none !important; } /* ============================================================ DOKUNMA HEDEFLERÄ° — dar ekran (2026-08-25, ölçüldü) ------------------------------------------------------------ 375 / 390 / 412 px'te ölçüldü. Zaten bir kural vardı ama bazı düğmelere ULAŞMIYORDU: GiriÅŸ Yap · Kayıt Ol · Talep Et · Kullan · Siteye Git 35px etkinlik filtreleri (Öne çıkanlar / BitiÅŸe en yakın …) 31px Yaygın kılavuzların önerdiÄŸi alt sınır 44px; parmakla ıskalanıyordu. Dolgu (padding) yerine min-height kullanılıyor: dolgu yazı boyutuna göre deÄŸiÅŸiyor ve garanti vermiyordu, min-height veriyor. ============================================================ */ @media (max-width: 720px) { .btn-sm, .side-btn, .seg-btn, .ev-sort button, .side-live-btn, .task-cta, .sponsor-cta { min-height: 44px; } /* Dikeyde ortalansın - min-height verilince yazı tepede kalmasın. */ .btn-sm, .side-btn, .seg-btn, .ev-sort button, .side-live-btn { display: inline-flex; align-items: center; justify-content: center; } /* Blok düğmeler tam geniÅŸlik kalsın (inline-flex bunu bozabiliyor). */ .btn-block, .side-btn, .side-live-btn { display: flex; width: 100%; } } /* Slayt noktalari: GORUNUM 8px kalsin, DOKUNMA ALANI buyusun. Olculdu (375px): .hero-dot 8x8 px - parmakla iskalaniyor. Gorunur nokta buyutulurse tasarim bozulur; bunun yerine gorunmez bir vurus alani seriliyor. Genislik komsu noktayi yutmasin diye dar tutuldu, kazanc dikeyde. */ .hero-dot { position: relative; } .hero-dot::after { content: ''; position: absolute; /* 'content: ;' gecersizdi, alan hic olusmuyordu (olculdu 11 Eyl 2026) */ top: 50%; left: 50%; transform: translate(-50%, -50%); height: 44px; width: calc(100% + 10px); } /* ---------- Ä°lk ziyaret perdesi (14 Eyl 2026, bkz. site-loader.js perdeAc) ---------- Sunucu içeriÄŸi gelene kadar kabuk görünmez; ortada sessiz bir yükleniyor. */ html.icerik-bekleniyor .shell, html.icerik-bekleniyor .mobile-bar { visibility: hidden; } html.icerik-bekleniyor body::after { content: ''; position: fixed; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.12); border-top-color: rgba(255,255,255,0.75); animation: perde-don 0.9s linear infinite; z-index: 5; } @keyframes perde-don { to { transform: rotate(360deg); } } /* ---------- Hero düzeni — denetim #22 (11 Eyl), 12 Eyl 2026 ---------- Laptop (1366): banner sütunu geniÅŸ (0.85fr/1.6fr) → sol sütun ~346px, iki CTA (284+195) sığmayıp alt alta düşüyor, saÄŸda boÅŸluk kalıyordu. Düğmeler satırı paylaÅŸsın: ikisi de esner, yazı tek satır. Telefon: CTA altı + grid boÅŸluÄŸu + banner üstü yığılıp ~54px boÅŸluk oluyordu; banner varken CTA alt marjı sıfır, banner üst marjı sıfır. */ @media (min-width: 861px) { /* 13 Eyl: müşteri yan yana hâlini Ä°STÄ°YOR (yazısını kendi kısalttı). Yan yana kalır; sığmayan uzun yazı çerçeveden taÅŸmaz, düğme içinde ikinci satıra iner (önceki nowrap + min-width:0 taşırıyordu, müşteri ekranında görüldü). */ .hero.has-media .hero-cta .btn { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; line-height: 1.25; padding-left: 1rem; padding-right: 1rem; } } @media (max-width: 860px) { .hero.has-media .hero-cta { margin-bottom: 0; } .hero.has-media .hero-media { margin-top: 0; } } /* GiriÅŸ penceresi logosu: yatay logo 58px kareye sığmaz → kutu geniÅŸler, yükseklik sabit, görsel orantılı. Harf modunda eski kare kalır. */ .auth-chip.logo-chip-img { width: auto; max-width: min(240px, 70%); height: 64px; margin: 0 auto 1rem; } .auth-chip.logo-chip-img img { width: auto; max-width: 100%; height: 100%; object-fit: contain; } @media (max-width: 480px) { .auth-chip.logo-chip-img { height: 56px; } } /* "Sifremi unuttum" — giris kipinde, "Kayit ol"un altinda ayri satir, sessiz ton. */ .auth-forgot { display: block; margin: 0.45rem auto 0; color: var(--muted); font-weight: 600; } .auth-forgot[hidden] { display: none; } /* Sponsor kartlari: birlestirilmis masaustu ve mobil duzen */ .lower-sponsor-copy { display: none; } #sponsorFeatured.sponsor-tile-row { display: flex; flex-wrap: wrap; gap: .9rem; } #sponsorFeatured.sponsor-tile-row > .sponsor-tile { flex: 1 1 calc((100% - .9rem) / 2); min-width: 0; box-sizing: border-box; height: clamp(104px, 11vw, 168px); padding: 0; } #sponsorFeatured.sponsor-tile-row > [data-card-width="full"] { flex-basis: 100%; } #sponsorFeatured.sponsor-tile-row > [data-card-width="half"] { flex-basis: calc((100% - .9rem) / 2); } #sponsorFeatured.sponsor-tile-row > [data-card-width="third"] { flex-basis: calc((100% - 1.8rem) / 3); } #sponsorFeatured .sponsor-tile-logo { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } #sponsorFeatured .sponsor-tile-logo img { max-width: min(78%, 340px); max-height: 76%; } #sponsorFeatured .lower-sponsor-copy { position: absolute; left: 20px; right: 20px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 4px; text-align: left; } .lower-sponsor-description { color: #999; font-size: 16px; line-height: 1.3; font-weight: 400; } .lower-sponsor-link { color: #fff; font-size: 20px; line-height: 1.3; font-weight: 500; } #sponsorFeatured .lower-sponsor-description { font-size: 13px; } #sponsorFeatured .lower-sponsor-link { font-size: 16px; } #tierSponsorsGrid.lower-sponsor-tiles, #tierOtherGrid.sponsor-tile-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } #tierOtherGrid.sponsor-tile-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } #tierSponsorsGrid.lower-sponsor-tiles > .sponsor-tile, #tierOtherGrid.sponsor-tile-row > .sponsor-tile { grid-column: auto; min-width: 0; height: 230px; padding: 20px; flex-direction: column; align-items: stretch; justify-content: space-between; box-sizing: border-box; } #tierOtherGrid.sponsor-tile-row > .sponsor-tile { height: 210px; padding: 16px; } #tierSponsorsGrid .sponsor-tile-logo, #tierOtherGrid .sponsor-tile-logo { flex: 1; min-height: 0; } #tierSponsorsGrid .sponsor-tile-logo img { max-width: 80%; max-height: 80px; } #tierOtherGrid .sponsor-tile-logo img { max-width: 85%; max-height: 70px; } #tierSponsorsGrid .lower-sponsor-copy, #tierOtherGrid .lower-sponsor-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; text-align: left; } #tierOtherGrid .lower-sponsor-description { font-size: 14px; } #tierOtherGrid .lower-sponsor-link { font-size: 18px; } #tierOtherGrid[hidden] { display: none; } @media (min-width: 721px) and (max-width: 1100px) { #tierOtherGrid.sponsor-tile-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Mobil: logo ve metin normal akista; mutlak konum yok. */ @media (max-width: 720px) { #sponsorFeatured.sponsor-tile-row { gap: 10px; min-width: 0; width: 100%; } #sponsorFeatured.sponsor-tile-row > .sponsor-tile, #sponsorFeatured.sponsor-tile-row > [data-card-width="half"], #sponsorFeatured.sponsor-tile-row > [data-card-width="third"] { flex: 1 1 calc((100% - 10px) / 2); } #sponsorFeatured.sponsor-tile-row > [data-card-width="full"] { flex-basis: 100%; } #tierSponsorsGrid.lower-sponsor-tiles, #tierOtherGrid.sponsor-tile-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; min-width: 0; } #sponsorFeatured.sponsor-tile-row > .sponsor-tile, #tierSponsorsGrid.lower-sponsor-tiles > .sponsor-tile, #tierOtherGrid.sponsor-tile-row > .sponsor-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; grid-column: auto; box-sizing: border-box; height: auto; min-height: 180px; min-width: 0; padding: 12px; margin: 0; } #sponsorFeatured .sponsor-tile-logo, #tierSponsorsGrid .sponsor-tile-logo, #tierOtherGrid .sponsor-tile-logo { position: relative; inset: auto; flex: 1 0 88px; width: 100%; height: auto; min-height: 88px; display: flex; align-items: center; justify-content: center; } #sponsorFeatured .sponsor-tile-logo img, #tierSponsorsGrid .sponsor-tile-logo img, #tierOtherGrid .sponsor-tile-logo img { max-width: 86%; max-height: 60px; width: auto; height: auto; object-fit: contain; } #sponsorFeatured .lower-sponsor-copy, #tierSponsorsGrid .lower-sponsor-copy, #tierOtherGrid .lower-sponsor-copy { position: relative; inset: auto; flex: 0 0 auto; z-index: 2; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; width: 100%; min-width: 0; text-align: left; } #sponsorFeatured .lower-sponsor-description, #tierSponsorsGrid .lower-sponsor-description, #tierOtherGrid .lower-sponsor-description { font-size: 12px; line-height: 1.4; font-weight: 400; white-space: normal; overflow-wrap: anywhere; } #sponsorFeatured .lower-sponsor-link, #tierSponsorsGrid .lower-sponsor-link, #tierOtherGrid .lower-sponsor-link { font-size: 15px; line-height: 1.35; font-weight: 500; white-space: normal; } #sponsorFeatured .sponsor-tile:hover, #tierSponsorsGrid .sponsor-tile:hover, #tierOtherGrid .sponsor-tile:hover { transform: none; outline: none; box-shadow: none; filter: none; } } @media (max-width: 720px) { #tierSponsorsGrid.lower-sponsor-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; } #tierOtherGrid.sponsor-tile-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; } #tierSponsorsGrid.lower-sponsor-tiles > .sponsor-tile, #tierOtherGrid.sponsor-tile-row > .sponsor-tile { min-width: 0; min-height: 105px; height: auto; padding: 6px; border-radius: 10px; } #tierSponsorsGrid .sponsor-tile-logo, #tierOtherGrid .sponsor-tile-logo { flex: 1 0 44px; min-height: 44px; } #tierSponsorsGrid .sponsor-tile-logo img, #tierOtherGrid .sponsor-tile-logo img { max-width: 100%; max-height: 30px; } #tierSponsorsGrid .lower-sponsor-copy, #tierOtherGrid .lower-sponsor-copy { margin-top: 6px; gap: 4px; } #tierSponsorsGrid .lower-sponsor-description, #tierOtherGrid .lower-sponsor-description { font-size: 8px; line-height: 1.3; } #tierSponsorsGrid .lower-sponsor-link, #tierOtherGrid .lower-sponsor-link { font-size: 9px; line-height: 1.3; } } @media (max-width: 720px) { /* Üst alan: masaüstündeki genişlik seçimlerini koru */ #sponsorFeatured.sponsor-tile-row { gap: 6px; } #sponsorFeatured.sponsor-tile-row > .sponsor-tile, #sponsorFeatured.sponsor-tile-row > [data-card-width="half"] { flex: 1 1 calc((100% - 6px) / 2); } #sponsorFeatured.sponsor-tile-row > [data-card-width="full"] { flex: 1 1 100%; } #sponsorFeatured.sponsor-tile-row > [data-card-width="third"] { flex: 1 1 calc((100% - 12px) / 3); } #sponsorFeatured.sponsor-tile-row > .sponsor-tile { min-width: 0; min-height: 105px; height: auto; padding: 7px; border-radius: 10px; } #sponsorFeatured .sponsor-tile-logo { position: relative; inset: auto; flex: 1 0 45px; min-height: 45px; width: 100%; height: auto; } #sponsorFeatured .sponsor-tile-logo img { max-width: 85%; max-height: 38px; } #sponsorFeatured .lower-sponsor-copy { position: relative; inset: auto; margin-top: 6px; gap: 4px; } #sponsorFeatured .lower-sponsor-description { font-size: 9px; line-height: 1.3; } #sponsorFeatured .lower-sponsor-link { font-size: 11px; line-height: 1.3; } /* Orta alan: 4 sütun */ #tierSponsorsGrid.lower-sponsor-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Alt alan: 5 sütun */ #tierOtherGrid.sponsor-tile-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Orta alan 3, alt alan 4 sütun */ #tierSponsorsGrid.lower-sponsor-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } #tierOtherGrid.sponsor-tile-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Orta ve alt alan: sponsor başına genişlik */ #tierSponsorsGrid.lower-sponsor-tiles, #tierOtherGrid.sponsor-tile-row { --card-gap: 0.75rem; display: flex; flex-wrap: wrap; gap: var(--card-gap); } #tierSponsorsGrid.lower-sponsor-tiles > .sponsor-tile { flex: 1 1 calc((100% - 2 * var(--card-gap)) / 3); min-width: 0; } #tierOtherGrid.sponsor-tile-row > .sponsor-tile { flex: 1 1 calc((100% - 3 * var(--card-gap)) / 4); min-width: 0; } #tierSponsorsGrid.lower-sponsor-tiles > [data-card-width="half"], #tierOtherGrid.sponsor-tile-row > [data-card-width="half"] { flex-basis: calc((100% - var(--card-gap)) / 2); } #tierSponsorsGrid.lower-sponsor-tiles > [data-card-width="third"], #tierOtherGrid.sponsor-tile-row > [data-card-width="third"] { flex-basis: calc((100% - 2 * var(--card-gap)) / 3); } #tierOtherGrid.sponsor-tile-row > [data-card-width="quarter"] { flex-basis: calc((100% - 3 * var(--card-gap)) / 4); } @media (max-width: 720px) { #tierSponsorsGrid.lower-sponsor-tiles, #tierOtherGrid.sponsor-tile-row { --card-gap: 5px; } } /* Sponsor bölümleri arasındaki boşluğu azalt */ #tierSponsorsGrid { margin-bottom: 0; } #tierOtherGrid { margin-top: 12px; } @media (max-width: 720px) { #tierOtherGrid { margin-top: 5px; } } /* Üst sponsorlar → bannerlar → orta sponsorlar */ #sponsorFeatured { margin-bottom: 12px; } #sponsorBanners { margin-top: 0; margin-bottom: 0; } #tierSponsorsGrid { margin-top: 12px; } @media (max-width: 720px) { #sponsorFeatured { margin-bottom: 5px; } #tierSponsorsGrid { margin-top: 5px; } } /* Ana sayfa global sponsor: bonus metni ve bağlantı */ #tierGlobal .sponsor-tile { position: relative; } #tierGlobal .lower-sponsor-copy { position: absolute; left: 20px; right: 20px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 4px; text-align: left; } #tierGlobal .lower-sponsor-description { font-size: 13px; font-weight: 400; } #tierGlobal .lower-sponsor-link { font-size: 16px; font-weight: 500; } @media (max-width: 720px) { #tierGlobal .lower-sponsor-copy { left: 10px; right: 10px; bottom: 8px; } #tierGlobal .lower-sponsor-description { font-size: 9px; } #tierGlobal .lower-sponsor-link { font-size: 11px; } } /* Panelden seçilen sponsor banner genişliği */ #sponsorBanners > .sponsor-banner[data-width="full"] { grid-column: 1 / -1; } #sponsorBanners > .sponsor-banner[data-width="half"] { grid-column: span 1; } @media (max-width: 720px) { #sponsorBanners > .sponsor-banner[data-width] { grid-column: 1 / -1; } .side-nav [data-link="live"]::after { content: "● İzle"; margin-left: auto; flex-shrink: 0; padding: 4px 8px; border-radius: 999px; background: rgba(255, 210, 50, .12); color: #ffd232; font-size: 11px; font-weight: 700; white-space: nowrap; animation: live-watch-blink 1.5s ease-in-out infinite; } @keyframes live-watch-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .side-nav [data-link="live"]::after { animation: none; } } #tierSponsorsGrid.lower-sponsor-tiles > [data-card-width="full"], #tierOtherGrid.sponsor-tile-row > [data-card-width="full"] { flex: 0 0 100%; } #tierSponsorsGrid.lower-sponsor-tiles > [data-card-width="quarter"] { flex: 0 0 calc((100% - 3 * var(--card-gap, 0.75rem)) / 4); } }