/* ============================================================
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; }
/* 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 (>= 1680px) gösterilir. */
.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: min(300px, calc((100vw - var(--shell-w)) / 2 - 24px));
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 ve içerik dışında yeterli boşluk kaldıysa göster.
Kabuk 1520px olduğu için eşik yükseldi (yan boşluk ≥ ~140px olmalı). */
@media (min-width: 1810px) { .page-side-banner.has-img { display: flex; } }
/* ---------- 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);
box-shadow: 0 18px 44px -14px rgba(var(--sb, 0, 0, 0), 0.55);
}
.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); } }
@media (max-width: 420px) {
.sponsor-tier-grid { grid-template-columns: 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); } }
@media (max-width: 520px) { .shop-grid { grid-template-columns: 1fr; } }
.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: 3 / 4; background: transparent; display: grid; place-items: center; overflow: hidden; }
.shop-img { width: 100%; height: 100%; object-fit: contain; object-position: top; }
/* Ü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; }
/* Ö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. */
/* ---------- Sponsor Şikayet Formu ---------- */
.cmp-card {
background: linear-gradient(165deg, var(--panel-2), var(--panel));
border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: 1.6rem 1.7rem 1.8rem; max-width: 900px;
}
.cmp-title { font-size: 1.25rem; margin-bottom: 0.35rem; }
.cmp-lead { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.4rem; }
.cmp-label { display: block; font-size: 0.86rem; font-weight: 700; margin: 0 0 0.55rem; }
.cmp-req { color: var(--rose-3); }
.cmp-sponsors {
/* 130 -> 150: "BetHorizon" gibi uzun adlar kesilmesin. */
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.6rem; margin-bottom: 1.3rem;
}
.cmp-sponsor {
display: flex; align-items: center; justify-content: center; cursor: pointer; text-align: center;
padding: 0.6rem 0.7rem; border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
color: var(--text); font-size: 0.84rem; font-weight: 600;
transition: border-color 0.15s ease, background 0.15s ease;
}
.cmp-sponsor:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.06); }
.cmp-sponsor.on { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
/* Çipte logo/monogram YOK (views.js'teki nota bak) — isim tam genişliği alır. */
.cmp-sponsor-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#complaintForm .auth-input { width: 100%; margin-bottom: 1.2rem; }
.cmp-textarea { min-height: 8rem; resize: vertical; font-family: inherit; }
.cmp-error { color: #ff9b9b; font-size: 0.84rem; margin-bottom: 0.8rem; }
.cmp-success { text-align: center; padding: 1.5rem 0 0.5rem; }
.cmp-success-ic {
width: 52px; height: 52px; margin: 0 auto 0.8rem; 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.5rem;
}
.cmp-success h4 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.cmp-success p { color: var(--muted); font-size: 0.88rem; }
.cmp-success b { color: var(--text); font-family: var(--font-display); letter-spacing: 0.04em; }
.cmp-success-note { margin: 0.3rem 0 1rem; font-size: 0.82rem !important; }
/* ---------- 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); } }
@media (max-width: 520px) { .model-grid { grid-template-columns: 1fr; } }
.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; }
/* ---------- 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 {
position: fixed; inset: 0; z-index: 300;
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 #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 #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,
.shop-grid, .event-grid, .event-rail, .ladder { grid-template-columns: 1fr; }
/* 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 #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) ---------- */
.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: cover; background-position: center;
opacity: 0.5;
}
.sponsor.has-bg::after {
content: ''; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.82));
}
/* ---------- 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; }
.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 alt alta — tam genişlik kuralı gereksiz. */
.sponsor-tile-row, .sponsor-tile-row.lay-2,
.sponsor-tile-row.lay-3, .sponsor-tile-row.lay-4 { grid-template-columns: 1fr; }
.sponsor-tile-row > .sponsor-tile:first-child:nth-last-child(odd) { grid-column: auto; }
}
/* ============================================================
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(2, 1fr); }
}
/* ============================================================
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-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);
}
/* ============================================================
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;
top: 50%; left: 50%; transform: translate(-50%, -50%);
height: 44px; width: calc(100% + 10px);
}